From 818900edc1254474d76df7abd9fff77b2df962ca Mon Sep 17 00:00:00 2001 From: ThetaDev Date: Thu, 22 Feb 2024 01:03:13 +0100 Subject: [PATCH 1/2] fix: arrMoveMulti function Beware of the Array.sort() footgun! --- src/index.test.ts | 7 --- src/lib/components/list/TrackList.svelte | 22 ++------- src/lib/util/functions.test.ts | 62 ++++++++++++++++++++++++ src/lib/util/functions.ts | 35 +++---------- src/routes/playlist/[id]/+page.svelte | 2 +- 5 files changed, 74 insertions(+), 54 deletions(-) delete mode 100644 src/index.test.ts create mode 100644 src/lib/util/functions.test.ts diff --git a/src/index.test.ts b/src/index.test.ts deleted file mode 100644 index dadc7e4..0000000 --- a/src/index.test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { describe, it, expect } from "vitest"; - -describe("sum test", () => { - it("adds 1 + 2 to equal 3", () => { - expect(1 + 2).toBe(3); - }); -}); diff --git a/src/lib/components/list/TrackList.svelte b/src/lib/components/list/TrackList.svelte index 1167a1f..f8b97ab 100644 --- a/src/lib/components/list/TrackList.svelte +++ b/src/lib/components/list/TrackList.svelte @@ -15,7 +15,7 @@ } from "$lib/util/types"; import { DBLCLICK_MS, LIST_PAGENAV_N } from "$lib/util/constants"; import { - arrMoveMulti2, + arrMoveMulti, clamp, dateToNumber, findParentWithAttr, @@ -598,24 +598,10 @@ function doMove(data: MoveData) { dispatch("moveTracks", data); - // let os = 0; - // for (let i = 0; i < data.positions.length; i++) { - // if (data.positions[i] < data.target) { - // os--; - // } - // } + let offset = arrMoveMulti(tracks, data.positions, data.target); + tracks = tracks; - // for (let i = 0; i < data.positions.length; i++) { - // selection[data.target + i + os] = true; - // } - // lastSelection = Math.max( - // data.target + data.positions.length + os - 1, - // tracks.length - 1 - // ); - let res = arrMoveMulti2(tracks, data.positions, data.target); - tracks = res.array; - - let toff = data.target + res.offset; + let toff = data.target + offset; selection = {}; selectRange([toff, toff + data.positions.length - 1]); scrollTo(data.target); diff --git a/src/lib/util/functions.test.ts b/src/lib/util/functions.test.ts new file mode 100644 index 0000000..a4e0028 --- /dev/null +++ b/src/lib/util/functions.test.ts @@ -0,0 +1,62 @@ +import { test, expect } from "vitest"; +import { arrMoveMulti } from "./functions"; + +const ARR = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; +test.each([ + { + name: "single fwd", + positions: [1], + target: 3, + result: [0, 2, 1, 3, 4, 5, 6, 7, 8, 9], + offset: -1, + }, + { + name: "range fwd", + positions: [1, 2, 3], + target: 7, + result: [0, 4, 5, 6, 1, 2, 3, 7, 8, 9], + offset: -3, + }, + { + name: "range+single fwd", + positions: [1, 2, 3, 7], + target: 9, + result: [0, 4, 5, 6, 8, 1, 2, 3, 7, 9], + offset: -4, + }, + { + name: "single bck", + positions: [8], + target: 1, + result: [0, 8, 1, 2, 3, 4, 5, 6, 7, 9], + offset: 0, + }, + { + name: "range bck", + positions: [6, 7, 8], + target: 1, + result: [0, 6, 7, 8, 1, 2, 3, 4, 5, 9], + offset: 0, + }, + { + name: "range+single bck", + positions: [8, 3, 6, 7], + target: 1, + result: [0, 3, 6, 7, 8, 1, 2, 4, 5, 9], + offset: 0, + }, + { + name: "range inside", // no items get moved + positions: [2, 3, 4, 5], + target: 4, + result: ARR, + offset: -2, + }, +])("arrMoveMulti $name", ({ positions, target, result, offset }) => { + const arr = [...ARR]; + + const o = arrMoveMulti(arr, positions, target); + + expect(arr).toStrictEqual(result); + expect(o).toBe(offset); +}); diff --git a/src/lib/util/functions.ts b/src/lib/util/functions.ts index 877a336..20a309c 100644 --- a/src/lib/util/functions.ts +++ b/src/lib/util/functions.ts @@ -236,8 +236,12 @@ export function arrMove(arr: T[], oldIndex: number, newIndex: number) { arr.splice(newIndex > oldIndex ? newIndex - 1 : newIndex, 0, ...items); } -export function arrMoveMulti(arr: T[], positions: number[], target: number) { - positions.sort(); +/** Move a list of items in an array to the target position. + * + * Returns the offset of the move operation + * (the number of positions the items were shifted to the right) */ +export function arrMoveMulti(arr: T[], positions: number[], target: number): number { + positions.sort((a, b) => a - b); const toInsert = []; let offset = 0; @@ -247,33 +251,8 @@ export function arrMoveMulti(arr: T[], positions: number[], target: number) { } toInsert.reverse(); arr.splice(target + offset, 0, ...toInsert); -} -export function arrMoveMulti2( - arr: T[], - positions: number[], - target: number -): { array: T[]; offset: number } { - const a1 = [], - spliced = []; - const pset = new Set(positions); - - let offset = 0; - - for (let i = positions.length - 1; i >= 0; i--) { - if (target > positions[i]) offset--; - } - - for (let i = 0; i < arr.length; i++) { - if (pset.has(i)) { - spliced.push(arr[i]); - } else { - a1.push(arr[i]); - } - } - - a1.splice(target + offset, 0, ...spliced); - return { array: a1, offset }; + return offset; } export function setCookie(cName: string, cValue: string, expDays: number) { diff --git a/src/routes/playlist/[id]/+page.svelte b/src/routes/playlist/[id]/+page.svelte index d6b9ff8..58a578b 100644 --- a/src/routes/playlist/[id]/+page.svelte +++ b/src/routes/playlist/[id]/+page.svelte @@ -3,7 +3,7 @@ import type { PageData } from "./$types"; import { searchTerm } from "$lib/stores/layout"; - import { userLink, arrMoveMulti, arrMoveMulti2 } from "$lib/util/functions"; + import { userLink } from "$lib/util/functions"; import { ListView, type MoveData } from "$lib/util/types"; import { testPlaylist } from "$lib/util/testdata"; // import testPlaylist from "$lib/util/testdata/playlist_5K_conv.json"; From fe98476154b84271e98a364a59ff7104034aa7c2 Mon Sep 17 00:00:00 2001 From: ThetaDev Date: Thu, 22 Feb 2024 19:15:58 +0100 Subject: [PATCH 2/2] feat: add mobile landscape navbar --- src/app.html | 2 +- src/lib/components/nav/NavbarMobile.svelte | 2 +- .../nav/NavbarMobileLandscape.svelte | 59 +++++++ src/lib/components/player/Playerbar.svelte | 4 +- .../components/player/PlayerbarMobile.svelte | 9 +- .../player/PlayerbarMobileLandscape.svelte | 147 ++++++++++++++++++ src/lib/components/ui/Slider.svelte | 3 +- src/lib/components/ui/Swiper.svelte | 3 +- src/routes/+layout.svelte | 34 ++-- 9 files changed, 242 insertions(+), 21 deletions(-) create mode 100644 src/lib/components/nav/NavbarMobileLandscape.svelte create mode 100644 src/lib/components/player/PlayerbarMobileLandscape.svelte diff --git a/src/app.html b/src/app.html index 6f71d5a..fed1eff 100644 --- a/src/app.html +++ b/src/app.html @@ -8,7 +8,7 @@ %sveltekit.head% Tiraya - +
%sveltekit.body%
diff --git a/src/lib/components/nav/NavbarMobile.svelte b/src/lib/components/nav/NavbarMobile.svelte index 06df83c..f331ad5 100644 --- a/src/lib/components/nav/NavbarMobile.svelte +++ b/src/lib/components/nav/NavbarMobile.svelte @@ -15,7 +15,7 @@ import NavbarMobileItem from "./NavbarMobileItem.svelte"; -
+
+ import LL from "$i18n/i18n-svelte"; + import { + mdiAccountMusic, + mdiAccountMusicOutline, + mdiAlbum, + mdiHome, + mdiHomeOutline, + mdiPlaylistMusic, + mdiPlaylistMusicOutline, + } from "@mdi/js"; + + import { iconAlbumOutline, iconSearch, iconSearchFilled } from "$lib/util/icons"; + + import NavbarItemLarge from "./NavbarItemLarge.svelte"; + import PlayerbarMobileLandscape from "$lib/components/player/PlayerbarMobileLandscape.svelte"; + + +
+
    + + + + + + +
+ +
diff --git a/src/lib/components/player/Playerbar.svelte b/src/lib/components/player/Playerbar.svelte index 112fd7c..1323205 100644 --- a/src/lib/components/player/Playerbar.svelte +++ b/src/lib/components/player/Playerbar.svelte @@ -49,8 +49,8 @@
diff --git a/src/lib/components/player/PlayerbarMobile.svelte b/src/lib/components/player/PlayerbarMobile.svelte index 3570282..094179e 100644 --- a/src/lib/components/player/PlayerbarMobile.svelte +++ b/src/lib/components/player/PlayerbarMobile.svelte @@ -29,9 +29,6 @@ // Enable color transition after first image load let colorTrans = false; - let buttonsElm: Element; - let seekbarElm: Element; - function onImageLoad(e: Event) { fastAverageColor(e.target as HTMLImageElement, (res) => { imgColor = res; @@ -75,7 +72,7 @@ class="shadow rounded-md z-50" class:transition-colors={colorTrans} style={`background-color: ${bgColorHex}`} - aria-label={$LL.now_playing({ title: "Across the Sea", artist: "Leaves' Eyes" })} + aria-label={$LL.now_playing({ title: track.name, artist: track.artists[0].name })} >
+ +
+ + +
+
+
+ + diff --git a/src/lib/components/ui/Slider.svelte b/src/lib/components/ui/Slider.svelte index 0db0fd0..236f9fb 100644 --- a/src/lib/components/ui/Slider.svelte +++ b/src/lib/components/ui/Slider.svelte @@ -11,6 +11,7 @@ export let max = 100; export let value = 0; export let ariaLabel: string | undefined = undefined; + export let marginX = true; /** * Value to be displayed next to the slider @@ -141,7 +142,7 @@ on:mouseup={onDragEnd} on:resize={resizeSlider} /> -
+
width / 3 }} on:swipeStart={onSwipeStart} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 97c5a2a..ed9ab96 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -25,12 +25,13 @@ headerColor, } from "$lib/stores/layout"; import { clamp, getEventCoords } from "$lib/util/functions"; - import { WIDTH_SMALL } from "$lib/util/constants"; + import { WIDTH_PHONE, WIDTH_SMALL } from "$lib/util/constants"; - import Menubar from "$lib/components/nav/Navbar.svelte"; + import Navbar from "$lib/components/nav/Navbar.svelte"; import Playerbar from "$lib/components/player/Playerbar.svelte"; import DummyText from "$lib/components/ui/DummyText.svelte"; import NavbarMobile from "$lib/components/nav/NavbarMobile.svelte"; + import NavbarMobileLandscape from "$lib/components/nav/NavbarMobileLandscape.svelte"; import PlayerbarMobile from "$lib/components/player/PlayerbarMobile.svelte"; import FixedHeader from "$lib/components/header/FixedHeader.svelte"; @@ -53,8 +54,10 @@ let queuebarElm: HTMLElement; let queuebarResizing = false; + let mobileLandscape = false; + $: mobileLandscape = $screenHeight < WIDTH_PHONE && $screenWidth > WIDTH_PHONE; let showNavbar = false; - $: showNavbar = $screenWidth >= WIDTH_SMALL; + $: showNavbar = $screenWidth >= WIDTH_SMALL && !mobileLandscape; let showQueue = false; $: showQueue = showNavbar && $clientState.showQueue; @@ -168,7 +171,8 @@
- + + + {:else if mobileLandscape} + {/if} {#if showQueue} @@ -214,15 +222,15 @@
{/if} - {#if !showNavbar} - + {#if !showNavbar && !mobileLandscape} +
{/if}
- {#if showNavbar} + {#if showNavbar && !mobileLandscape} - {:else} + {:else if !mobileLandscape} {/if} @@ -242,6 +250,10 @@ "main-content" calc(100vh - 3rem) "player" 3rem / 1fr; } + + &.mobile-landscape { + grid-template: "main-content" 100vh; + } } #main-content { @@ -253,6 +265,10 @@ ); } + .mobile-landscape > #main-content { + grid-template: "sidebar main" 1fr/10rem 1fr; + } + main { grid-area: main;