fix: correct loop behaviour, fix prod build

package.json

@@ -14,30 +14,29 @@
 	"devDependencies": {
 		"@iconify-json/line-md": "^1.1.24",
 		"@iconify-json/mdi": "^1.1.50",
-		"@skeletonlabs/skeleton": "^1.2.0",
+		"@skeletonlabs/skeleton": "^1.2.5",
-		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-auto": "^2.0.1",
 		"@sveltejs/adapter-static": "^2.0.2",
-		"@sveltejs/kit": "^1.15.4",
+		"@sveltejs/kit": "^1.15.9",
-		"@typescript-eslint/eslint-plugin": "^5.58.0",
+		"@typescript-eslint/eslint-plugin": "^5.59.1",
-		"@typescript-eslint/parser": "^5.58.0",
+		"@typescript-eslint/parser": "^5.59.1",
 		"autoprefixer": "^10.4.14",
-		"eslint": "^8.38.0",
+		"eslint": "^8.39.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-svelte3": "^4.0.0",
-		"postcss": "^8.4.21",
+		"postcss": "^8.4.23",
-		"prettier": "^2.8.7",
+		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.0",
 		"svelte": "^3.58.0",
 		"svelte-check": "^3.2.0",
-		"tailwindcss": "^3.3.1",
+		"tailwindcss": "^3.3.2",
 		"tslib": "^2.5.0",
 		"typescript": "^5.0.4",
 		"unplugin-icons": "^0.16.1",
-		"vite": "^4.2.1"
+		"vite": "^4.3.3"
 	},
 	"type": "module",
 	"dependencies": {
-		"svelte-infinite-loading": "^1.3.8",
 		"svelte-tiny-virtual-list": "^2.0.5"
 	}
 }

src/components/playingnow.svelte

@@ -65,8 +65,8 @@
 					artwork
 				});
 				mediaSession.setPositionState({ position: currentTime, duration });
-				mediaSession.setActionHandler('nexttrack', nextQueuePosition);
+				mediaSession.setActionHandler('nexttrack', () => nextQueuePosition());
-				mediaSession.setActionHandler('previoustrack', prevQueuePosition);
+				mediaSession.setActionHandler('previoustrack', () => prevQueuePosition());
 				mediaSession.setActionHandler('seekto', (ev) => {
 					if (ev.seekTime !== undefined) {
 						currentTime = ev.seekTime;
@@ -83,7 +83,7 @@
 				switch ($loop) {
 					case LoopKind.Off:
 						duration = 0;
-						nextQueuePosition();
+						nextQueuePosition(true);
 						break;
 					case LoopKind.Once:
 						const queuePos = nextQueuePosition();
@@ -119,8 +119,16 @@
 				on:load={() => (isError = false)}
 			/>
 		{/if}
-		<IconPlay class="child play-icon {showIcon && $paused ? 'opacity-100' : 'opacity-0'}" />
+		<IconPlay
-		<IconPause class="child play-icon {showIcon && !$paused ? 'opacity-100' : 'opacity-0'}" />
+			class="child play-icon variant-glass-surface {showIcon && $paused
+				? 'opacity-100'
+				: 'opacity-0'}"
+		/>
+		<IconPause
+			class="child play-icon variant-glass-surface {showIcon && !$paused
+				? 'opacity-100'
+				: 'opacity-0'}"
+		/>
 	</button>
 	<div class="flex flex-col gap-1">
 		<div
@@ -144,7 +152,7 @@
 
 <style lang="postcss">
 	button :global(.play-icon) {
-		@apply transition-opacity variant-glass-surface backdrop-blur-sm;
+		@apply transition-opacity backdrop-blur-sm;
 	}
 	button :global(.child) {
 		@apply absolute top-0 left-0 w-12 h-12;

src/components/track.svelte

@@ -31,7 +31,9 @@
 	>
 		<IconMusic class="absolute top-1 left-1 w-10 h-10" />
 		<Spinnny
-			class="absolute play-icon top-1 left-1 w-10 h-10 {showSpinner ? 'visible' : 'hidden'}"
+			class="absolute play-icon variant-glass-surface top-1 left-1 w-10 h-10 {showSpinner
+				? 'visible'
+				: 'hidden'}"
 		/>
 		<!-- svelte-ignore a11y-missing-attribute -->
 		<img
@@ -44,13 +46,15 @@
 			on:loadstart={() => (showSpinner = true)}
 			on:load={() => (showSpinner = false)}
 		/>
-		<IconPlay class="child play-icon {showPlayIcon ? 'opacity-100' : 'opacity-0'}" />
+		<IconPlay
+			class="child play-icon variant-glass-surface {showPlayIcon ? 'opacity-100' : 'opacity-0'}"
+		/>
 	</button>
 	<div class="whitespace-nowrap overflow-ellipsis overflow-hidden">
 		<span>#{track.track_num} - {track.title}</span>
 		<div class="text-sm whitespace-nowrap overflow-ellipsis overflow-hidden">
 			<span
-				class="badge variant-filled-primary py-0.5 {$currentTrack?.id == track_id
+				class="badge variant-filled-primary py-0.5 {$currentTrack?.id === track_id
 					? 'visible'
 					: 'hidden'}">playing</span
 			>
@@ -62,7 +66,7 @@
 
 <style lang="postcss">
 	button :global(.play-icon) {
-		@apply transition-opacity variant-glass-surface backdrop-blur-sm;
+		@apply transition-opacity backdrop-blur-sm;
 	}
 	button :global(.child) {
 		@apply rounded absolute top-0 left-0 w-12 h-12;

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 	import '@skeletonlabs/skeleton/themes/theme-crimson.css';
 	// This contains the bulk of Skeletons required styles:
 	import '@skeletonlabs/skeleton/styles/all.css';
-	import '../app.css';
+	import '../app.postcss';
 
 	import { AppShell, Toast, toastStore } from '@skeletonlabs/skeleton';
 	import {

src/routes/+layout.ts

@@ -1,6 +1,6 @@
 import { MetadataCommunicator } from "../comms";
 
 export const ssr = false;
-export const prerender = false;
+export const prerender = true;
 
 export const _metadataComm = new MetadataCommunicator();

src/stores.ts

@@ -58,30 +58,38 @@ export function setQueuePositionTo(track_id: TrackId) {
   }
 }
 
-export function prevQueuePosition() {
+export function getPrevQueuePosition(respectLoop: boolean) {
   const pos = get(queuePosition);
   if (pos !== null) {
     const q = get(queue);
+    const l = get(loop);
     const _newPos = pos - 1;
-    const newPos = _newPos > -1 ? _newPos : q.length - 1;
+    const newPos = _newPos > -1 ? _newPos : l === LoopKind.Once || !respectLoop ? q.length - 1 : null;
-    queuePosition.set(newPos);
     return newPos;
   }
   return null;
 }
 
-export function nextQueuePosition() {
+export function getNextQueuePosition(respectLoop: boolean) {
   const pos = get(queuePosition);
   if (pos !== null) {
     const q = get(queue);
+    const l = get(loop);
     const _newPos = pos + 1;
-    const newPos = _newPos < q.length ? _newPos : 0;
+    const newPos = _newPos < q.length ? _newPos : l === LoopKind.Once || !respectLoop ? 0 : null;
-    queuePosition.set(newPos);
     return newPos;
   }
   return null;
 }
 
+export function prevQueuePosition(respectLoop: boolean = false) {
+  queuePosition.set(getPrevQueuePosition(respectLoop));
+}
+
+export function nextQueuePosition(respectLoop: boolean = false) {
+  queuePosition.set(getNextQueuePosition(respectLoop));
+}
+
 export const paused = writable<boolean>(false);
 export const volume = writable<number>(1.0);
 export const muted = writable<boolean>(false);