Skip to content

Commit

Permalink
Collapsible sidebar, new bottom player UI
Browse files Browse the repository at this point in the history 
- When you need extra horizontal screen real estate, you can now collapse the sidebar.
- New bottom player with track info, playback and volume controls when the sidebar is collapsed
- With the sidebar collapsed, window controls get in the way of certain UI elements like the library header, so the app makes space for the controls
- Some general UI tweaks
- Sidebar automatically collapsed on small windows
  • Loading branch information
@basharovV
basharovV committed Aug 18, 2024
1 parent cf3cfa5 commit 177c5af
Show file tree
Hide file tree
Showing 13 changed files with 651 additions and 84 deletions.
13 changes: 10 additions & 3 deletions public/images/volume-up.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
139 changes: 113 additions & 26 deletions src/App.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import { debounce } from "lodash-es";
import { Toaster } from "svelte-french-toast";
import {
bottomBarNotification,
Expand All @@ -15,12 +16,15 @@
isMiniPlayer,
isQueueOpen,
isSettingsOpen,
isSidebarOpen,
isTrackInfoPopupOpen,
isWaveformOpen,
isWikiOpen,
os,
selectedPlaylistId,
selectedSmartQuery,
sidebarManuallyOpened,
sidebarTogglePos,
uiView
} from "./data/store";
Expand Down Expand Up @@ -58,6 +62,9 @@
import ThemeWrapper from "./theming/ThemeWrapper.svelte";
import { startMenuListener } from "./window/EventListener";
import WikiView from "./lib/views/WikiView.svelte";
import Icon from "./lib/ui/Icon.svelte";
import TopBar from "./lib/views/TopBar.svelte";
import { currentThemeObject } from "./theming/store";
console.log("locale", getLocaleFromNavigator());
Expand Down Expand Up @@ -208,7 +215,7 @@
let container: HTMLElement;
let isResizing = false;
let showCloseWikiPrompt = false;
function onResize(e: MouseEvent) {
function onWikiResize(e: MouseEvent) {
e.stopPropagation();
e.preventDefault();
const containerWidth = window.innerWidth;
Expand All @@ -223,19 +230,45 @@
}
function startResizeListener() {
isResizing = true;
container.addEventListener("mousemove", onResize);
container.addEventListener("mousemove", onWikiResize);
document.addEventListener("mouseup", stopResizeListener);
}
function stopResizeListener() {
isResizing = false;
container.removeEventListener("mousemove", onResize);
container.removeEventListener("mousemove", onWikiResize);
if (showCloseWikiPrompt) {
$isWikiOpen = false;
showCloseWikiPrompt = 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;
}
} 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
};
}
</script>

<svelte:window on:resize={debounce(onResize, 5)} />

<ThemeWrapper>
<!-- <svelte:body on:click={onPageClick} /> -->
<Toaster />
Expand Down Expand Up @@ -269,10 +302,36 @@
class:transparent={$os === "Darwin"}
bind:this={container}
>
<div class="sidebar">
<Sidebar />
<div class="window-padding">
<!-- {#if !$isSidebarOpen}
<div data-tauri-drag-region></div>
{/if} -->
</div>
<div class="top-bar">
{#if !$isSidebarOpen}
<TopBar />
{/if}
</div>

<div class="sidebar" class:visible={$isSidebarOpen}>
{#if $isSidebarOpen}
<Sidebar />
{/if}
</div>

{#if !$isSidebarOpen}
<div class="sidebar-toggle" style="top: {$sidebarTogglePos.y}px">
<Icon
icon="tabler:layout-sidebar-left-expand"
size={22}
onClick={() => {
$isSidebarOpen = true;
$sidebarManuallyOpened = true;
}}
/>
</div>
{/if}

<div class="queue">
{#if $isQueueOpen}
<div
Expand Down Expand Up @@ -323,11 +382,8 @@
</div>

{#if $isLyricsOpen}
<div
class="lyrics"
transition:fade={{ duration: 150 }}
>
<LyricsView right={$isWikiOpen ? wikiPanelSize + 15 : 0}/>
<div class="lyrics" transition:fade={{ duration: 150 }}>
<LyricsView right={$isWikiOpen ? wikiPanelSize + 15 : 0} />
</div>
{/if}

Expand Down Expand Up @@ -393,7 +449,7 @@
main {
display: grid;
grid-template-columns: auto auto 1fr auto auto; // Sidebar, queue, panel, resizer, wiki
grid-template-rows: auto 1fr auto auto;
grid-template-rows: auto auto 1fr auto auto auto;
width: 100vw;
height: 100vh;
opacity: 1;
Expand All @@ -404,30 +460,61 @@
background-color: color-mix(in srgb, var(--background, initial) 86%, transparent);
} */
@media screen and (max-width: 210px) and (max-height: 210px) {
grid-template-columns: auto; // Sidebar, queue, panel, resizer, wiki
}
&.mini-player {
border-radius: 5px;
overflow: hidden;
}
.sidebar {
width: 100%;
grid-row: 1 / 3;
grid-row: 1 / 4;
grid-column: 1;
width: 5px;
&.visible {
width: 210px;
}
}
@media only screen and (max-width: 320px) {
grid-template-columns: 1fr;
.sidebar-toggle {
position: absolute;
left: -12px;
margin: auto;
z-index: 20;
transition: all 0.1s ease-in-out;
&:hover {
transform: translateX(5px);
}
}
@media only screen and (max-width: 320px) and (min-height: 300px) {
grid-template-columns: 1fr;
.sidebar {
display: none;
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 0.6;
}
padding-top: 2em;
}
.header {
.window-padding {
grid-row: 1;
grid-column: 2 / 6;
div {
height: 30px;
}
}
.top-bar {
grid-row: 5;
grid-column: 2 / 6;
}
.header {
grid-row: 2;
grid-column: 3;
.content {
Expand All @@ -442,29 +529,29 @@
}
.panel {
grid-row: 2;
grid-row: 3 / 5;
grid-column: 3;
display: grid;
overflow: hidden;
}
.notes {
grid-row: 3;
grid-row: 4;
grid-column: 2 / 6;
}
.bottom-bar {
position: relative;
width: 100%;
z-index: 15;
grid-row: 4;
grid-row: 6;
grid-column: 2 / 6;
margin-top: 5px;
margin-bottom: 5px;
}
.queue {
grid-row: 1/3;
grid-row: 3/5;
grid-column: 2;
overflow: hidden;
height: 100%;
Expand All @@ -484,7 +571,7 @@
}
.wiki {
grid-row: 1/3;
grid-row: 3/5;
grid-column: 5;
overflow-y: hidden;
height: 100%;
Expand Down Expand Up @@ -516,7 +603,7 @@
resize-handle {
grid-column: 4;
grid-row: 1 / 3;
grid-row: 3 / 5;
display: block;
position: relative;
height: 100%;
Expand Down
4 changes: 4 additions & 0 deletions src/data/store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,10 @@ export const queueMode: Writable<QueueMode> = writable("library");
// Wiki
export const isWikiOpen = writable(false);

// 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 isWaveformOpen = writable(false);
Expand Down
12 changes: 11 additions & 1 deletion src/lib/library/BottomBar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
isFolderWatchUpdate,
isLyricsOpen,
isQueueOpen,
isSidebarOpen,
nextUpSong,
uiView,
userSettings
Expand Down Expand Up @@ -55,17 +56,20 @@
}, 200);
});
let wasSidebarOpen = $isSidebarOpen;
function onResize() {
if (nextUp?.getBoundingClientRect()) {
// calculate remaining space for spectroscope visualizer
const nextUpRight = nextUp?.getBoundingClientRect()?.right;
const rightXPos = right?.getBoundingClientRect()?.left;
const diff = Math.abs(nextUpRight - rightXPos);
console.log("diff", diff);
// console.log("diff", diff);
visualiserWidth = Math.min(150, diff - 13);
showVisualiser = window.innerWidth > 900 && diff > 150;
}
}
</script>

<svelte:window on:resize={debounce(onResize, 5)} />
Expand Down Expand Up @@ -214,6 +218,12 @@
align-items: center;
position: relative;
@media only screen and (max-width: 500px) {
.lossy-selector {
display: none;
}
}
.next-up {
display: flex;
flex-direction: row;
Expand Down
13 changes: 12 additions & 1 deletion src/lib/library/CanvasLibrary.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
isQueueCleared,
isQueueOpen,
isShuffleEnabled,
isSidebarOpen,
isSmartQueryBuilderOpen,
isSmartQuerySaveUiOpen,
isTrackInfoPopupOpen,
Expand Down Expand Up @@ -339,14 +340,17 @@
let dpr;
// CONSTANTS
const HEADER_HEIGHT = 26;
const HEADER_HEIGHT = 23.5;
const ROW_HEIGHT = 26;
const DROP_HINT_HEIGHT = 2;
const BORDER_WIDTH = 1;
const SCROLL_PADDING = 200;
const DUMMY_COUNT = 5;
const DUMMY_PADDING = DUMMY_COUNT * ROW_HEIGHT;
// PLATFORM SPECIFIC
const WINDOW_CONTROLS_WIDTH = 70;
// COLORS
let BG_COLOR: string;
let HEADER_BG_COLOR: string;
Expand Down Expand Up @@ -1953,6 +1957,13 @@
{/if}
<Text
config={{
x:
!$isSidebarOpen &&
!$isQueueOpen &&
$os === "Darwin" &&
idx === 0
? WINDOW_CONTROLS_WIDTH
: null,
text: f.name,
align: "left",
padding:
Expand Down
Loading

0 comments on commit 177c5af

Please sign in to comment.