feat: previous/next buttons support

src/components/PlayNextView/PlayNextController.ts

@@ -4,6 +4,7 @@ import {
     currentID,
     albumsAddedToPlayNext,
     favoritesPlayStatus,
+    playNextIndex,
 } from '$lib/player';
 
 import { wantPlay } from '$lib/wantPlay';
@@ -65,7 +66,7 @@ playNextList.subscribe((list) => {
         && get(currentID) === '' // 2.
     )
         playNext();
-    
+
     playNextWasEmpty = list.length === 0;
 });
 
@@ -78,35 +79,35 @@ playNextList.subscribe((list) => {
     favoritesPlayStatus.set(-1);
 });
 
-if ('mediaSession' in navigator) {
-    navigator.mediaSession.setActionHandler('previoustrack', () => {
-        // if there is no song in playNextList, return
-        if (get(playNextList).length === 0) return;
+export function playPreviousSong() {
+    const index = get(playNextIndex);
+    // if there is no song in playNextList, return
+    if (index === null) return;
 
-        // find the index of the last Play Next song
-        const index = get(playNextList).findIndex((item) => {
-            return item.id === lastPlayNextID;
-        });
+    // if the index is the first index, it means the song is already the first song
+    if (index === 0) return;
 
-        // if the index is the first index, it means the song is the first song
-        if (index === 0) return;
+    // play the previous song
+    wantPlay(get(playNextList)[index - 1]);
+}
 
-        // play the previous song
-        wantPlay(get(playNextList)[index - 1]);
-    });
-    navigator.mediaSession.setActionHandler('nexttrack', () => {
-        // if there is no song in playNextList, return
-        if (get(playNextList).length === 0) return;
+export function playNextSong() {
+    const index = get(playNextIndex);
+    // if there is no song in playNextList, return
+    if (index === null) return;
 
-        // find the index of the last Play Next song
-        const index = get(playNextList).findIndex((item) => {
-            return item.id === lastPlayNextID;
-        });
+    // if the index is the last index, it means the song is the last song
+    if (index === get(playNextList).length - 1) return;
 
-        // if the index is the last index, it means the song is the last song
-        if (index === get(playNextList).length - 1) return;
+    // play the next song
+    wantPlay(get(playNextList)[index + 1]);
+}
 
-        // play the next song
-        wantPlay(get(playNextList)[index + 1]);
+if ('mediaSession' in navigator) {
+    navigator.mediaSession.setActionHandler('previoustrack', () => {
+        playPreviousSong();
+    });
+    navigator.mediaSession.setActionHandler('nexttrack', () => {
+        playNextSong();
     });
 }

src/components/PlayNextView/PlayNextView.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-  import { playNextList, menuEntries, shuffle, currentID } from '$lib/player';
+  import {
+    playNextList,
+    menuEntries,
+    shuffle,
+    currentID,
+    playNextIndex,
+  } from '$lib/player';
   import Modal from '$lib/Modal.svelte';
   import './PlayNextController';
   import PlayNextList from './PlayNextList.svelte';
   import ActionButton from '$lib/ActionButton.svelte';
   import { wantPlay } from '$lib/wantPlay';
   import { tick } from 'svelte';
+  import { playNextSong, playPreviousSong } from './PlayNextController';
 
   let modalClosed = true;
   let canOpenModal = true;
@@ -55,6 +62,25 @@
           forceOpenEffect = false;
         },
         discardAction: () => (forceOpenEffect = false),
+        breakAfter: true,
+      },
+      {
+        title: 'Play Previous',
+        action: () => {
+          playPreviousSong();
+          forceOpenEffect = false;
+        },
+        disabled: $playNextIndex === 0,
+        discardAction: () => (forceOpenEffect = false),
+      },
+      {
+        title: 'Play Next',
+        action: () => {
+          playNextSong();
+          forceOpenEffect = false;
+        },
+        disabled: $playNextIndex === $playNextList.length - 1,
+        discardAction: () => (forceOpenEffect = false),
       },
     ];
   }}

src/components/PlayerControls/PlayerControls.svelte

@@ -12,12 +12,22 @@
     artist,
     poster,
     volume,
+    playNextList,
+    playNextIndex,
+    previousNextButtonsPreference,
   } from '$lib/player';
   import { play, pause } from '$lib/AudioPlayer.svelte';
 
   import { fade } from 'svelte/transition';
   import clickOutside from '$lib/clickOutside';
 
+  import { tweened } from 'svelte/motion';
+  import { cubicOut } from 'svelte/easing';
+  import {
+    playNextSong,
+    playPreviousSong,
+  } from '$components/PlayNextView/PlayNextController';
+
   let smallScreen = false;
 
   window.addEventListener('resize', () => {
@@ -32,6 +42,27 @@
   let resetStatus: 'none' | 'working' | 'done' = 'none';
   let resetTimeout: NodeJS.Timeout;
 
+  // expressed in REMs
+  let playerButtonsWidth = tweened(1.75, {
+    duration: 300,
+    easing: cubicOut,
+  });
+
+  let playNextListUnsubscribe = () => {};
+  previousNextButtonsPreference.subscribe((status) => {
+    if (status === 'off') {
+      playerButtonsWidth.set(1.75);
+      playNextListUnsubscribe();
+      return;
+    }
+
+    playNextListUnsubscribe = playNextList.subscribe((val) => {
+      if (val.length === 0) return playerButtonsWidth.set(1.75);
+
+      playerButtonsWidth.set(1.75 /*rem*/ * 3 /* buttons*/ + 2 /*rem for gap*/);
+    });
+  });
+
   paused.subscribe(() => {
     if ('mediaSession' in navigator) {
       navigator.mediaSession.metadata = new MediaMetadata({
@@ -177,10 +208,34 @@
         : 'Keep pressing to reset playing time...'}
     </div>
   {/if}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div class="player__play-pause" on:click={toggle}>
-    <div class="play-pause__icon" class:pause={!$paused} />
+  <div class="player__buttons" style="--buttons-width:{$playerButtonsWidth}rem">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="player-button player__previous-button"
+      class:disabled={$playNextIndex === 0}
+      on:click={playPreviousSong}
+    >
+      <svg class="double-arrow-icon">
+        <use xlink:href="#double-arrow" />
+      </svg>
+    </div>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div class="player__play-pause" on:click={toggle}>
+      <div class="play-pause__icon" class:pause={!$paused} />
+    </div>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="player-button player__next-button"
+      class:disabled={$playNextList.length - 1 === $playNextIndex}
+      on:click={playNextSong}
+    >
+      <svg class="double-arrow-icon">
+        <use xlink:href="#double-arrow" />
+      </svg>
+    </div>
   </div>
   <Range />
   <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -216,6 +271,18 @@
       d="M6 7l8-5v20l-8-5v-10zm-6 10h4v-10h-4v10zm20.264-13.264l-1.497 1.497c1.847 1.783 2.983 4.157 2.983 6.767 0 2.61-1.135 4.984-2.983 6.766l1.498 1.498c2.305-2.153 3.735-5.055 3.735-8.264s-1.43-6.11-3.736-8.264zm-.489 8.264c0-2.084-.915-3.967-2.384-5.391l-1.503 1.503c1.011 1.049 1.637 2.401 1.637 3.888 0 1.488-.623 2.841-1.634 3.891l1.503 1.503c1.468-1.424 2.381-3.309 2.381-5.394z"
     />
   </symbol>
+  <symbol id="double-arrow" viewBox="0 0 24 24">
+    <g id="layer1" transform="translate(-1.2345222e-7,-2.9999998)">
+      <path
+        d="m 18.292605,7.7669902 -7.574831,4.3733308 0,-8.7466618 z"
+        transform="matrix(1.9802421,0,0,2.057928,-12.223787,-3.9839066)"
+      />
+      <path
+        d="m 18.292605,7.7669902 -7.574831,4.3733308 0,-8.7466618 z"
+        transform="matrix(1.9802421,0,0,2.057928,-21.223787,-3.9839066)"
+      />
+    </g>
+  </symbol>
 </svg>
 
 <style>
@@ -224,7 +291,6 @@
     display: flex;
     align-items: center;
     justify-content: space-evenly;
-    padding: 0.5em;
     height: var(--bars-height);
     width: 100%;
     bottom: 0;
@@ -240,6 +306,24 @@
     color: var(--theme-color);
     font-weight: 800;
   }
+  .player__buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    overflow: hidden;
+    height: auto;
+    animation: width 250ms ease;
+
+    width: var(--buttons-width, 1.75rem);
+  }
+  .player-button {
+    transition: opacity 250ms ease;
+  }
+  .player-button.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
   .player__play-pause {
     display: inline-block;
     position: relative;
@@ -281,13 +365,21 @@
       5% 0%
     );
   }
-  .volume-icon {
+  .player__previous-button {
+    transform: scaleX(-1);
+  }
+  .volume-icon,
+  .double-arrow-icon {
     display: inline-block;
     width: 1.75em;
     height: 1.75em;
     fill: var(--theme-color);
     vertical-align: middle;
   }
+  .double-arrow-icon {
+    /* quick alignment fix */
+    transform: translateY(0.2rem);
+  }
   .player__volume {
     position: relative;
     isolation: isolate;