feat: add support for playing playlists

Author: Garrett Downs

src/components/AudioPlayer.svelte

@@ -1,77 +1,90 @@
 <script context="module" lang="ts">
   import throttle from 'lodash.throttle';
-  import { SoundCloud } from '../lib/soundcloud';
-  import type { PlaybackProgress } from '../models/PlaybackProgress';
   import { player } from '../stores/player';
   import { clamp } from '../utils/clamp';
 
   let audio = new Audio();
   (audio as any).mozAudioChannelType = 'content';
 
   audio.onloadedmetadata = () => {
-    updateStatus({ duration: audio.duration });
+    player.update({ duration: audio.duration });
   };
 
   audio.ontimeupdate = throttle(() => {
-    updateStatus({ currentTime: audio.currentTime });
+    player.update({ currentTime: audio.currentTime });
   }, 1000);
 
-  export async function load(trackId: number) {
-    const [track, streamUrl] = await Promise.all([
-      new SoundCloud().track.get(trackId),
-      new SoundCloud().track.getStreamUrl(trackId),
-    ]);
+  audio.onended = async () => {
+    nextTrack();
+  };
+
+  export async function loadTrack(trackId: number) {
+    const streamUrl = await player.loadTrack(trackId);
+
+    audio.src = streamUrl;
+    audio.currentTime = 0;
+
+    audio.play();
+    player.update({ playing: true });
+  }
+
+  export async function loadPlaylist(playlistId: number) {
+    const streamUrl = await player.loadPlaylist(playlistId);
+
+    audio.src = streamUrl;
+    audio.currentTime = 0;
+
+    audio.play();
+    player.update({ playing: true });
+  }
+
+  export async function nextTrack() {
+    const streamUrl = await player.nextTrack();
+    if (!streamUrl) return;
 
     audio.src = streamUrl;
     audio.currentTime = 0;
 
-    player.set({
-      track,
-      currentTime: 0,
-      duration: track.duration || 0,
-      playing: true,
-    });
+    audio.play();
+    player.update({ playing: true });
+  }
+
+  export async function previousTrack() {
+    const streamUrl = await player.previousTrack();
+    if (!streamUrl) return;
+
+    audio.src = streamUrl;
+    audio.currentTime = 0;
 
     audio.play();
+    player.update({ playing: true });
   }
 
   export function play() {
     audio.play();
-    updateStatus({ playing: true });
+    player.update({ playing: true });
   }
 
   export function pause() {
     audio.pause();
-    updateStatus({ playing: false });
+    player.update({ playing: false });
   }
 
   export function stop() {
     audio.src = '';
     audio.currentTime = 0;
-    player.set({
-      track: undefined,
-      playing: false,
-      currentTime: 0,
-      duration: 0,
-    });
+    player.reset();
   }
 
   export function skip(seconds: number) {
     const newTime = clamp(audio.currentTime + seconds, 0, audio.duration);
     audio.currentTime = audio.currentTime + seconds;
-    updateStatus({ currentTime: newTime });
+    player.update({ currentTime: newTime });
   }
 
   export function skipTo(seconds: number) {
     const newTime = clamp(seconds, 0, audio.duration);
     audio.currentTime = seconds;
-    updateStatus({ currentTime: newTime });
-  }
-
-  function updateStatus(changes: Partial<PlaybackProgress>) {
-    player.update((a) => ({
-      ...a,
-      ...changes,
-    }));
+    player.update({ currentTime: newTime });
   }
 </script>

src/components/PlaylistItem.svelte

@@ -2,7 +2,7 @@
   import ListItem from 'onyx-ui/components/list/ListItem.svelte';
   import { Onyx } from 'onyx-ui/services';
   import { push } from 'svelte-spa-router';
-  import { load } from '../components/AudioPlayer.svelte';
+  import { loadPlaylist } from '../components/AudioPlayer.svelte';
   import { SoundCloud } from '../lib/soundcloud';
   import type { Playlist } from '../models';
   import { getImage } from '../utils/getImage';
@@ -28,7 +28,7 @@
       {
         label: 'Play',
         onSelect: async () => {
-          load(playlist.id);
+          loadPlaylist(playlist.id);
           Onyx.contextMenu.close();
         },
       },

src/components/TrackItem.svelte

@@ -2,7 +2,7 @@
   import ListItem from 'onyx-ui/components/list/ListItem.svelte';
   import { Onyx } from 'onyx-ui/services';
   import { push } from 'svelte-spa-router';
-  import { load } from '../components/AudioPlayer.svelte';
+  import { loadTrack } from '../components/AudioPlayer.svelte';
   import { SoundCloud } from '../lib/soundcloud';
   import type { Track } from '../models';
   import { getImage } from '../utils/getImage';
@@ -28,7 +28,7 @@
       {
         label: 'Play',
         onSelect: async () => {
-          load(track.id);
+          loadTrack(track.id);
           Onyx.contextMenu.close();
         },
       },

src/models/PlaybackProgress.ts

@@ -2,6 +2,7 @@ import type { Track } from './Track';
 
 export type PlaybackProgress = {
   track: Track | undefined;
+  allTracks: Track[];
   playing: boolean;
   currentTime: number;
   duration: number;

src/routes/Player.svelte

@@ -17,7 +17,7 @@
   import MdPlayArrow from 'svelte-icons/md/MdPlayArrow.svelte';
   import MdRepeat from 'svelte-icons/md/MdRepeat.svelte';
   import { replace } from 'svelte-spa-router';
-  import { pause, play, skip, skipTo } from '../components/AudioPlayer.svelte';
+  import { pause, play, previousTrack, skip, skipTo } from '../components/AudioPlayer.svelte';
   import Waveform from '../components/Waveform.svelte';
   import { player } from '../stores/player';
   import { formatTime } from '../utils/formatTime';
@@ -50,7 +50,13 @@
         return true;
       },
       onArrowLeftLong: () => {
-        skipTo(0);
+        console.log('time', $player.currentTime);
+
+        if ($player.currentTime < 10) {
+          previousTrack();
+        } else {
+          skipTo(0);
+        }
         return true;
       },
       onArrowLeft: () => {

src/routes/Playlist.svelte

@@ -13,6 +13,7 @@
   import MdInfoOutline from 'svelte-icons/md/MdInfoOutline.svelte';
   import MdPlayarrow from 'svelte-icons/md/MdPlayarrow.svelte';
   import { push } from 'svelte-spa-router';
+  import { loadPlaylist } from '../components/AudioPlayer.svelte';
   import TrackItem from '../components/TrackItem.svelte';
   import { SoundCloud } from '../lib/soundcloud';
   import { getImage } from '../utils/getImage';
@@ -49,7 +50,7 @@
               color={Color.Primary}
               navi={{
                 itemId: `btnPlayAll`,
-                onSelect: async () => console.log('play all'),
+                onSelect: async () => loadPlaylist(data.id),
               }}
             />
             <IconButton

src/routes/Track.svelte

@@ -11,7 +11,7 @@
   import { registerView, updateView } from 'onyx-ui/stores/view';
   import { onMount } from 'svelte';
   import MdPlayarrow from 'svelte-icons/md/MdPlayarrow.svelte';
-  import { load } from '../components/AudioPlayer.svelte';
+  import { loadTrack } from '../components/AudioPlayer.svelte';
   import { SoundCloud } from '../lib/soundcloud';
   import { formatTime } from '../utils/formatTime';
   import { getImage } from '../utils/getImage';
@@ -48,7 +48,7 @@
             color={Color.Primary}
             navi={{
               itemId: `btnPlay`,
-              onSelect: async () => load(data.id),
+              onSelect: async () => loadTrack(data.id),
             }}
           />
           <Divider title="stats" />

src/stores/player.ts

@@ -1,9 +1,103 @@
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
+import { SoundCloud } from '../lib/soundcloud';
 import type { PlaybackProgress } from '../models';
 
-export const player = writable<PlaybackProgress>({
-  track: undefined,
-  playing: false,
-  currentTime: 0,
-  duration: 0,
-});
+function createPlayer() {
+  const { subscribe, update, set } = writable<PlaybackProgress>({
+    track: undefined,
+    allTracks: [],
+    playing: false,
+    currentTime: 0,
+    duration: 0,
+  });
+
+  return {
+    subscribe,
+    update: function (data: Partial<PlaybackProgress>) {
+      update((previous) => ({ ...previous, ...data }));
+    },
+    reset: function () {
+      set({
+        track: undefined,
+        allTracks: [],
+        playing: false,
+        currentTime: 0,
+        duration: 0,
+      });
+    },
+    loadTrack: async function (trackId: number): Promise<string> {
+      const [track, streamUrl] = await Promise.all([
+        new SoundCloud().track.get(trackId),
+        new SoundCloud().track.getStreamUrl(trackId),
+      ]);
+
+      set({
+        track,
+        allTracks: [track],
+        playing: false,
+        currentTime: 0,
+        duration: 0,
+      });
+
+      return streamUrl;
+    },
+    loadPlaylist: async function (playlistId: number): Promise<string> {
+      const playlist = await new SoundCloud().playlist.get(playlistId, true);
+
+      if (playlist.tracks.length === 0) return;
+
+      const [track, streamUrl] = await Promise.all([
+        new SoundCloud().track.get(playlist.tracks[0].id),
+        new SoundCloud().track.getStreamUrl(playlist.tracks[0].id),
+      ]);
+
+      set({
+        track,
+        allTracks: playlist.tracks,
+        playing: false,
+        currentTime: 0,
+        duration: 0,
+      });
+
+      return streamUrl;
+    },
+    nextTrack: async function (): Promise<string | null> {
+      const current = get({ subscribe });
+      const index = current.allTracks.findIndex((a) => a.id === current.track.id);
+      const track = current.allTracks[index + 1];
+      if (!track || index === -1) return null;
+
+      const streamUrl = await new SoundCloud().track.getStreamUrl(track.id);
+
+      update((previous) => ({
+        ...previous,
+        track: track,
+        playing: false,
+        currentTime: 0,
+        duration: 0,
+      }));
+
+      return streamUrl;
+    },
+    previousTrack: async function (): Promise<string | null> {
+      const current = get({ subscribe });
+      const index = current.allTracks.findIndex((a) => a.id === current.track.id);
+      const track = current.allTracks[index - 1];
+      if (!track || index === -1) return null;
+
+      const streamUrl = await new SoundCloud().track.getStreamUrl(track.id);
+
+      update((previous) => ({
+        ...previous,
+        track: track,
+        playing: false,
+        currentTime: 0,
+        duration: 0,
+      }));
+
+      return streamUrl;
+    },
+  };
+}
+
+export const player = createPlayer();