diff --git a/src/App.svelte b/src/App.svelte index 692649c4..0444f98f 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -3,6 +3,7 @@ import { Toaster } from "svelte-french-toast"; import { bottomBarNotification, + canShowInfoPopup, draggedScrapbookItems, draggedSongs, droppedFiles, @@ -13,7 +14,9 @@ isLyricsOpen, isMiniPlayer, isQueueOpen, + isSidebarFloating, isSidebarOpen, + isSidebarShowing, isSmartQueryBuilderOpen, isTagCloudOpen, isWaveformOpen, @@ -22,8 +25,6 @@ popupOpen, selectedPlaylistFile, selectedSmartQuery, - sidebarManuallyOpened, - sidebarTogglePos, uiView, } from "./data/store"; @@ -217,9 +218,27 @@ unlistenFolderWatch(); }); - $: showCursorInfo = $draggedSongs.length > 0 && mouseX + mouseY > 0; + let showMiniPlayer = window.innerHeight <= 220 && window.innerWidth <= 210; + $: innerHeight = window.innerHeight; + $: innerWidth = window.innerWidth; $: selectedQuery = findQuery($selectedSmartQuery); + $: showCursorInfo = $draggedSongs.length > 0 && mouseX + mouseY > 0; + $: showMainPanel = innerWidth >= 300; + $: showQueue = !showMiniPlayer && (innerWidth < 460 || $isQueueOpen); + $: showSidebar = + showMiniPlayer || + (innerHeight >= 650 && + $isSidebarOpen && + ((!$isWikiOpen && innerWidth >= 660) || + ($isWikiOpen && + ((!showQueue && innerWidth >= 880) || + (showQueue && innerWidth >= 1000))))); + $: showWiki = + $isWikiOpen && + ((!showQueue && innerWidth >= 500) || (showQueue && innerWidth >= 660)); + $: isQueueAutoWidth = !showMiniPlayer && innerWidth < 520; + $: isSplitView = showMainPanel && showQueue && innerWidth < 520; $: if ($bottomBarNotification?.timeout) { setTimeout(() => { @@ -227,6 +246,18 @@ }, $bottomBarNotification.timeout); } + $: { + canShowInfoPopup.set(innerWidth >= 750); + } + + $: { + $isSidebarShowing = showSidebar; + + if (showSidebar) { + $isSidebarFloating = false; + } + } + let container: HTMLElement; let isResizing = false; let showCloseWikiPrompt = false; @@ -245,40 +276,28 @@ } function startResizeListener() { isResizing = true; + container.addEventListener("mousemove", onWikiResize); document.addEventListener("mouseup", stopResizeListener); } function stopResizeListener() { - isResizing = false; - container.removeEventListener("mousemove", onWikiResize); - if (showCloseWikiPrompt) { - $isWikiOpen = false; - showCloseWikiPrompt = false; - } - } + if (isResizing) { + isResizing = false; - function onResize() { - // If sidebar is open and width is below 400px, collapse it - if ($isSidebarOpen && window.innerWidth < 400) { - if (window.innerHeight <= 210 && window.innerWidth <= 210) { - $isSidebarOpen = true; - } else { - $isSidebarOpen = false; + container.removeEventListener("mousemove", onWikiResize); + container.removeEventListener("mouseup", stopResizeListener); + + if (showCloseWikiPrompt) { + $isWikiOpen = false; + showCloseWikiPrompt = false; } - } else if ( - !$isSidebarOpen && - $sidebarManuallyOpened && - window.innerWidth > 400 - ) { - $isSidebarOpen = true; - } else if (window.innerHeight <= 210 && window.innerWidth <= 210) { - $isSidebarOpen = true; } + } - $sidebarTogglePos = { - x: 0, - y: window.innerHeight / 2 - 30, - }; + function onResize() { + showMiniPlayer = window.innerHeight <= 220 && window.innerWidth <= 210; + innerHeight = window.innerHeight; + innerWidth = window.innerWidth; } @@ -309,36 +328,53 @@
-
- -
- -
- {#if $isSidebarOpen} - +
+ {#if showSidebar || $isSidebarFloating} + {/if}
- {#if !$isSidebarOpen} -
+ {#if $isSidebarFloating} +
+ { + $isSidebarFloating = false; + }} + /> +
+ {:else if !showSidebar} +
{ - $isSidebarOpen = true; - $sidebarManuallyOpened = true; + if ( + !showMiniPlayer && + (innerWidth < 660 || innerHeight < 650) + ) { + $isSidebarFloating = true; + } else { + $isSidebarOpen = true; + } }} />
{/if} -
- {#if $isQueueOpen} +
+ {#if showQueue}
- +
{/if}
@@ -404,25 +440,27 @@ {/if}
-
- {#if $uiView === "library" || $uiView.match(/^(smart-query|favourites|to-delete)/)} - - {:else if $uiView === "playlists" || $uiView === "to-delete"} - - {:else if $uiView === "albums"} - - {:else if $uiView === "your-music"} - - {:else if $uiView === "map"} - - {:else if $uiView === "analytics"} - - {:else if $uiView === "internet-archive"} - - {:else if $uiView === "prune"} - - {/if} -
+ {#if showMainPanel} +
+ {#if $uiView === "library" || $uiView.match(/^(smart-query|favourites|to-delete)/)} + + {:else if $uiView === "playlists" || $uiView === "to-delete"} + + {:else if $uiView === "albums"} + + {:else if $uiView === "your-music"} + + {:else if $uiView === "map"} + + {:else if $uiView === "analytics"} + + {:else if $uiView === "internet-archive"} + + {:else if $uiView === "prune"} + + {/if} +
+ {/if} {#if $isLyricsOpen}
@@ -438,7 +476,7 @@
- {#if $isWikiOpen} + {#if showWiki}
-
- {#if !$isSidebarOpen} +
+ {#if !showSidebar}
@@ -472,7 +510,7 @@ {/if} - {#if $isWikiOpen} + {#if showWiki} = writable(null); // Queue export const isQueueOpen: Writable = writable( - /true/.test(localStorage.getItem("isQueueOpen")) || false, + localStorage.getItem("isQueueOpen") === "true", ); isQueueOpen.subscribe((val) => localStorage.setItem("isQueueOpen", String(val)), @@ -373,13 +373,17 @@ export const isWikiOpen = writable(false); export const wikiArtist: Writable = writable(null); // Sidebar -export const isSidebarOpen = writable(true); -export const sidebarManuallyOpened = writable(false); -export const sidebarTogglePos = writable({ x: 0, y: 0 }); -export const isCmdOrCtrlPressed = writable(false); +export const isSidebarOpen: Writable = writable( + localStorage.getItem("isSidebarOpen") === "true", +); +isSidebarOpen.subscribe((val) => + localStorage.setItem("isSidebarOpen", String(val)), +); +export const isSidebarFloating = writable(false); +export const isSidebarShowing = writable(true); export const isWaveformOpen: Writable = writable( - /true/.test(localStorage.getItem("isWaveformOpen")) || false, + localStorage.getItem("isWaveformOpen") === "true", ); isWaveformOpen.subscribe((val) => { localStorage.setItem("isWaveformOpen", String(val)); @@ -504,4 +508,7 @@ export const webPlayerVolume: Writable = writable(0.6); export const webPlayerIsLoading = writable(false); export const fileToDownload: Writable = writable(null); +// Info Popup +export const canShowInfoPopup = writable(true); + init(); diff --git a/src/lib/albums/AlbumsHeader.svelte b/src/lib/albums/AlbumsHeader.svelte index cd1c99c4..785c8e7f 100644 --- a/src/lib/albums/AlbumsHeader.svelte +++ b/src/lib/albums/AlbumsHeader.svelte @@ -1,4 +1,5 @@ -
+

{$LL.albums.title()}

-
-
-

{$LL.albums.options.orderBy()}

- { - $uiPreferences.albumsViewSortBy = v; - }} - /> -
- -
- { - $uiPreferences.albumsViewShowSingles = !showSingles; - }} - /> -

{$LL.albums.options.showSingles()}

-
-
+ {#if showAllOptions} +
+ + { + $uiPreferences.albumsViewSortBy = v; + }} + /> +
+ +
+ { + $uiPreferences.albumsViewShowSingles = !showSingles; + }} + /> +
+
+ { + $uiPreferences.albumsViewShowInfo = !showInfo; + }} + /> +
+ + + {:else} { - $uiPreferences.albumsViewShowInfo = !showInfo; - }} + onClick={toogleOptionsPanel} /> -

{$LL.albums.options.showInfo()}

-
- - + {/if}
+ + {#if showOptionsPanel} +
+ +
+ + { + $uiPreferences.albumsViewSortBy = v; + }} + /> +
+ +
+
+ { + $uiPreferences.albumsViewShowSingles = + !showSingles; + }} + /> +
+
+ { + $uiPreferences.albumsViewShowInfo = !showInfo; + }} + /> +
+
+ + + +
+ {/if}
diff --git a/src/lib/library/BottomBar.svelte b/src/lib/library/BottomBar.svelte index f2f10869..9ebb28dd 100644 --- a/src/lib/library/BottomBar.svelte +++ b/src/lib/library/BottomBar.svelte @@ -13,7 +13,6 @@ isFolderWatchUpdate, isLyricsOpen, isQueueOpen, - isSidebarOpen, nextUpSong, uiView, userSettings, @@ -54,8 +53,6 @@ }, 200); }); - let wasSidebarOpen = $isSidebarOpen; - function onResize() { if (nextUp?.getBoundingClientRect()) { // calculate remaining space for spectroscope visualizer diff --git a/src/lib/library/CanvasLibrary.svelte b/src/lib/library/CanvasLibrary.svelte index 0a9fd9af..24233ff8 100644 --- a/src/lib/library/CanvasLibrary.svelte +++ b/src/lib/library/CanvasLibrary.svelte @@ -43,7 +43,7 @@ importStatus, isPlaying, isQueueOpen, - isSidebarOpen, + isSidebarShowing, isSmartQueryBuilderOpen, isSmartQuerySaveUiOpen, isTagCloudOpen, @@ -598,7 +598,9 @@ setTimeout(() => { width = - scrollContainer?.clientWidth ?? libraryContainer.clientWidth; + scrollContainer?.clientWidth ?? + libraryContainer?.clientWidth ?? + 0; calculateColumns(); }, 50); } @@ -1343,13 +1345,8 @@ event.preventDefault(); console.log("active element", document.activeElement.tagName); // Check if there an input in focus currently - if (!showTrackMenu && songsHighlighted.length) { + if (!trackMenu.isOpen && songsHighlighted.length) { console.log("opening info", songsHighlighted); - if (songsHighlighted.length > 1) { - $rightClickedTracks = songsHighlighted; - } else { - $rightClickedTrack = songsHighlighted[0]; - } const topTrack = songsHighlighted[0]; // Get the y position of the top track by calculating the offset using the index in the slice @@ -1363,8 +1360,11 @@ HEADER_HEIGHT + 10; console.log("top track y", topTrackY); - menuPos = { x: 250, y: topTrackY }; - showTrackMenu = true; + + trackMenu.open( + songsHighlighted.length > 1 ? songsHighlighted : topTrack, + { x: 250, y: topTrackY }, + ); } } else if ( event.keyCode === 13 && @@ -1732,8 +1732,6 @@ } - - @@ -2563,7 +2561,7 @@ {/if} - + {#if get(canShowInfoPopup)} + + {/if} {/if} diff --git a/src/lib/player/Waveform.svelte b/src/lib/player/Waveform.svelte index c0a7e98e..b3c042e4 100644 --- a/src/lib/player/Waveform.svelte +++ b/src/lib/player/Waveform.svelte @@ -6,8 +6,6 @@ import { current, - isCmdOrCtrlPressed, - os, playerTime, seekTime, waveformPeaks, diff --git a/src/lib/queue/TrackMenu.svelte b/src/lib/queue/TrackMenu.svelte index 6c8d8cc9..9f8dc250 100644 --- a/src/lib/queue/TrackMenu.svelte +++ b/src/lib/queue/TrackMenu.svelte @@ -2,6 +2,7 @@ import { type } from "@tauri-apps/plugin-os"; import { onMount } from "svelte"; import { + canShowInfoPopup, isShuffleEnabled, popupOpen, rightClickedAlbum, @@ -16,6 +17,7 @@ import { openInFinder } from "../menu/file"; import Icon from "../ui/Icon.svelte"; import ToolsMenu from "./ToolsMenu.svelte"; + import { get } from "svelte/store"; type ActionType = "delete"; @@ -150,7 +152,7 @@ isDisabled={true} text={song ? song.title : songs.length + " tracks"} /> - {#if song} + {#if song && get(canShowInfoPopup)} More Tools @@ -176,7 +178,8 @@ text="Open in {explorerName}" /> {/if} - - + {#if get(canShowInfoPopup)} + + {/if} {/if} diff --git a/src/lib/sidebar/Sidebar.svelte b/src/lib/sidebar/Sidebar.svelte index d8ce3862..c06ee14d 100644 --- a/src/lib/sidebar/Sidebar.svelte +++ b/src/lib/sidebar/Sidebar.svelte @@ -31,6 +31,7 @@ draggedSongs, draggedTitle, isFindFocused, + isSidebarFloating, isMiniPlayer, isPlaying, isShuffleEnabled, @@ -52,8 +53,6 @@ selectedPlaylistFile, selectedSmartQuery, shouldFocusFind, - sidebarManuallyOpened, - sidebarTogglePos, singleKeyShortcutsEnabled, smartQueryInitiator, toDeletePlaylist, @@ -88,6 +87,8 @@ const appWindow = tauriWindow.getCurrentWindow(); + export let floating = false; + // What to show in the sidebar let song: Song; let title; @@ -294,6 +295,7 @@ } let height = 0; let width = 0; + let hideArtwork = window.innerHeight < 650; let hasDecorations = false; let sidebarToggleX = 0; @@ -313,14 +315,14 @@ // await appWindow.setDecorations(true); } - // Get bottom coordinates of top container - const topContainer = sidebar?.querySelector(".top"); + if (height >= 650) { + if (hideArtwork) { + hideArtwork = false; - if (topContainer) { - $sidebarTogglePos = { - x: topContainer.getBoundingClientRect().right, - y: topContainer.getBoundingClientRect().bottom, - }; + drawArtwork(true); + } + } else { + hideArtwork = true; } } @@ -460,14 +462,14 @@ let showMenuBottomScrollShadow = false; function onMenuResize() { - console.log( - "scrollTop", - menuInnerScrollArea.scrollTop, - menuInnerScrollArea.clientHeight, - menuInnerScrollArea.scrollHeight, - ); // Check scroll area size, add shadows if necessary if (menuInnerScrollArea) { + console.log( + "scrollTop", + menuInnerScrollArea.scrollTop, + menuInnerScrollArea.clientHeight, + menuInnerScrollArea.scrollHeight, + ); showMenuTopScrollShadow = menuInnerScrollArea.scrollTop > 0 && menuInnerScrollArea.scrollHeight > @@ -626,6 +628,7 @@ }; $selectedPlaylistFile = playlist; $selectedSmartQuery = null; + $isSidebarFloating = false; activePlaylist = null; } @@ -650,6 +653,7 @@ $query.reverse = false; } $selectedSmartQuery = smartQuery; + $isSidebarFloating = false; } function onClickSmartPlaylistOptions(e, query: SavedSmartQuery) { @@ -733,7 +737,7 @@ await db.songs.put($current.song); $current = $current; } - let sidebar; + let sidebarElement; let sidebarWidth = 210; let titleElement: HTMLParagraphElement; let isTitleOverflowing = false; // to show marquee @@ -765,14 +769,15 @@ }; // Detect size changes in scroll container for the menu - const resizeObserver = new ResizeObserver(onMenuResize).observe(menu); + const resizeObserver = new ResizeObserver(onMenuResize); + + resizeObserver.observe(menu); height = window.innerHeight; - window.onresize = throttle(() => { - onResize(); - }, 200); - onResize(); // run once + onResize(); + + return () => resizeObserver.unobserve(menu); }); let canvas: HTMLCanvasElement; @@ -790,16 +795,6 @@ titleElement?.scrollWidth > titleElement?.clientWidth; resetMarquee(); - - // Get bottom coordinates of top container - const topContainer = sidebar.querySelector(".top"); - - if (topContainer) { - $sidebarTogglePos = { - x: topContainer.getBoundingClientRect().right - 15, - y: topContainer.getBoundingClientRect().bottom - 10, - }; - } } function clearMarquee() { @@ -1053,6 +1048,8 @@ let isPlaybackSpeedControlOpen = false; + +
{/if} -
- - -
- + {#if !floating} +
+ + +
+ + + {#if !$isMiniPlayer} +
+ { + $isSidebarOpen = false; + }} + /> +
+ {/if} - {#if !$isMiniPlayer} +
{ - $isSidebarOpen = false; - $sidebarManuallyOpened = false; - $sidebarTogglePos = { x: e.clientX, y: e.clientY }; - }} + icon={$isMiniPlayer + ? "gg:arrows-expand-up-right" + : "gg:arrows-expand-down-left"} + onClick={() => toggleMiniPlayer()} + boxed />
- {/if} + cd gif - -
- toggleMiniPlayer()} - boxed - /> -
- cd gif +
+ {#if song} + {#if sidebarWidth && displayTitle} +
{ + setDraggedSongs([song], "Player"); + }} + > + +
+ {/if} + {#if artist} + +

{ + $isWikiOpen = !$isWikiOpen; + }} + use:optionalTippy={{ + show: !$isMiniPlayer, + content: $LL.sidebar.openWikiTooltip({ + artist, + }), + placement: "right", + }} + > + {artist} +

+ {/if} + {#if !title && !album && !artist} + + {/if} + {#if album} + {album} + {/if} + {:else} +

+ {$LL.sidebar.takeControl()} +

+ {/if} -
- {#if song} - {#if sidebarWidth && displayTitle} + {#if codec}
{ - setDraggedSongs([song], "Player"); - }} + class="file" + class:empty={!title && !album && !artist} > - +

{codec}

+ +

{(Number(sampleRate) / 1000).toFixed(1)} Khz

+

+ + {stereo ? "stereo" : "mono"} +

{/if} - {#if artist} - -

{ - $isWikiOpen = !$isWikiOpen; - }} - use:optionalTippy={{ - show: !$isMiniPlayer, - content: $LL.sidebar.openWikiTooltip({ - artist, - }), - placement: "right", - }} - > - {artist} -

- {/if} - {#if !title && !album && !artist} - - {/if} - {#if album} - {album} - {/if} - {:else} -

{$LL.sidebar.takeControl()}

- {/if} - - {#if codec} -
-

{codec}

- -

{(Number(sampleRate) / 1000).toFixed(1)} Khz

-

- - {stereo ? "stereo" : "mono"} -

-
- {/if} -
-
-
- - {#if song} -
-
- +
- {/if} -
-
- seekTime.set(time)} - playerTime={$playerTime} - /> -
-

- {elapsedTime} -

- -

- {durationText} -

+ {#if song} +
+
+ +
- - { - $isShuffleEnabled = !$isShuffleEnabled; - }} + {/if} +
+
+ seekTime.set(time)} + playerTime={$playerTime} /> - audioPlayer.playPrevious()} - /> - audioPlayer.togglePlay()} - icon={$isPlaying ? "fe:pause" : "fe:play"} - /> - audioPlayer.playNext()} - /> - { - favouriteCurrentSong(); - }} - /> - - -
-
+
+

+ {elapsedTime} +

+ +

+ {durationText} +

+
+ { - $rightClickedTrack = song; - $rightClickedTracks = []; - $rightClickedAlbum = null; - $popupOpen = "track-info"; + $isShuffleEnabled = !$isShuffleEnabled; }} /> -
- - - -
($isWaveformOpen = !$isWaveformOpen)} + class="transport-middle" + icon="fe:backward" + size={36} + disabled={$current.index <= 0} + onClick={() => audioPlayer.playPrevious()} + /> + audioPlayer.togglePlay()} + icon={$isPlaying ? "fe:pause" : "fe:play"} + /> + audioPlayer.playNext()} /> + { + favouriteCurrentSong(); + }} + /> + + +
+
+ { + $rightClickedTrack = song; + $rightClickedTracks = []; + $rightClickedAlbum = null; + $popupOpen = "track-info"; + }} + /> +
+ + + +
+ ($isWaveformOpen = !$isWaveformOpen)} + /> +
-
+ {/if} +