chore: refactor vue components

web/src/ts/dtype/playlist.d.ts

@@ -1,6 +1,6 @@
 // NOTE: For re-associating files with details here, can use dropdown in UI
 
-export type Playlist = Song[];
+export type PlaylistSongs = Song[];
 
 export interface UrlToFileMapping {
     [key: string]: string

web/src/ts/player/playlists/add.ts

@@ -4,6 +4,7 @@ import {
     queue,
     queueIdx,
     rawQueue,
+    repeat,
     shuffle,
     sources
 } from '../state';
@@ -27,6 +28,12 @@ export const clearQueue = () => {
     duration.value = -1;
     playbackPercentage.value = 1;
     isPlaying.value = false;
+    repeat.value = 'off';
+    shuffle.value = false;
+
+    for ( const song of queue.value ) {
+        sources[ song.source ]?.songUnload( song );
+    }
 };
 
 /**

web/src/ts/player/playlists/loader.ts

@@ -7,13 +7,13 @@ import type {
     AssociationResult
 } from '../plugins/interface';
 import type {
-    Playlist
+    PlaylistSongs
 } from '@/ts/dtype/playlist';
 import {
     openAssociationManager
 } from '@/composables/associationManager';
 
-export const load = ( playlist: Playlist ) => {
+export const load = ( playlist: PlaylistSongs ) => {
     queue.value = playlist;
     rawQueue.value = playlist;
 

web/src/ts/player/plugins/interface.d.ts

@@ -118,4 +118,9 @@ export interface PlayerSourcePlugin {
      * You may use the provided interface elements (search bar and popups) to e.g. ask if user wants to use a playlist, album, etc
      */
     'addSongsFromThisSource': ( cb: ( songs: Song[] ) => void ) => void;
+
+    /**
+     * Fully unload a song. This is called on clear of a playlist
+     */
+    'songUnload': ( song: Song ) => Promise<void>;
 }

web/src/ts/player/plugins/local/index.ts

@@ -7,7 +7,8 @@ import {
     updateIdentifiers
 } from './association';
 import {
-    load
+    load,
+    unload
 } from './loader';
 import {
     ref
@@ -38,6 +39,7 @@ export const useLocalPlayer: PlayerSourcePluginInitializer = async (): Promise<P
             'association': associate,
             'updateIdentifiers': updateIdentifiers,
             'mime': 'audio/aac,audio/mpeg,audio/wav,audio/mp4,audio/ogg'
-        }
+        },
+        'songUnload': unload
     };
 };

web/src/ts/player/plugins/local/loader.ts

@@ -75,3 +75,7 @@ export const load = ( cb: ( songs: Song[] ) => void ) => {
         }
     };
 };
+
+export const unload = async ( song: Song ) => {
+    URL.revokeObjectURL( song.identifier );
+};

web/src/ts/player/plugins/musickit/index.ts

@@ -2,9 +2,6 @@ import type {
     PlayerSourcePlugin,
     PlayerSourcePluginInitializer
 } from '../interface';
-import type {
-    Song
-} from '@/ts/dtype/playlist';
 import {
     addFromAppleMusic
 } from './search';
@@ -57,7 +54,8 @@ export const useMusicKit: PlayerSourcePluginInitializer = ( storefront: string =
                     'addSongsFromThisSource': addFromAppleMusic,
                     'loading': {
                         'requiresLocalFiles': false
-                    }
+                    },
+                    'songUnload': async () => {}
                 };
             } else {
                 throw new Error( 'ERR_AUTH' );

web/src/ts/player/state.ts

@@ -6,7 +6,7 @@ import type {
     PlayerSourcePlugin
 } from './plugins/interface';
 import type {
-    Playlist
+    PlaylistSongs
 } from '../dtype/playlist';
 import type {
     RepeatMode
@@ -24,11 +24,11 @@ export const sources: {
 
 export const currentSource = ref( '' );
 
-export const rawQueue: Ref<Playlist> = ref( [] );
+export const rawQueue: Ref<PlaylistSongs> = ref( [] );
 
 export const queueIdx = ref( 0 );
 
-export const queue: Ref<Playlist> = ref( [] );
+export const queue: Ref<PlaylistSongs> = ref( [] );
 
 export const isPlaying = ref( false );
 

web/src/ts/userPlaylists/file.d.ts

@@ -0,0 +1,14 @@
+import type {
+    PlaylistSongs
+} from '../dtype/playlist';
+
+interface UserPlaylistFile {
+    'version': '1',
+    'userid': string,
+    'playlists': Playlist[]
+}
+
+interface Playlist {
+    'name': string;
+    'songs': PlaylistSongs;
+}

web/src/ts/userPlaylists/save.ts

@@ -0,0 +1,10 @@
+import {
+    queue,
+    rawQueue,
+    shuffle
+} from '../player/state';
+
+const savePlaylist = () => {
+    rawQueue.value = queue.value;
+    shuffle.value = false;
+};

web/src/ts/userPlaylists/state.ts

@@ -0,0 +1,10 @@
+import {
+    type Ref,
+    ref
+} from 'vue';
+import type {
+    PlaylistSongs
+} from '../dtype/playlist';
+
+const currentPlaylist = ref( '' );
+const playlists: Ref<PlaylistSongs> = ref( [] );