feat: playlist loading

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

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

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

@@ -15,6 +15,9 @@ import {
 import type {
     Song
 } from '@/ts/dtype/playlist';
+import {
+    playlistIdx
+} from '@/ts/userPlaylists/state';
 
 export const addSongList = ( songs: Song[] ) => {
     rawQueue.value = rawQueue.value.concat( songs );
@@ -22,6 +25,7 @@ export const addSongList = ( songs: Song[] ) => {
 };
 
 export const clearQueue = () => {
+    playlistIdx.value = -1;
     queue.value = [];
     rawQueue.value = [];
     sources[currentSource.value]?.stop();

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

@@ -1,4 +1,5 @@
 import {
+    fullPlayer,
     queue,
     rawQueue,
     sources
@@ -42,6 +43,16 @@ export const load = ( playlist: PlaylistSongs ) => {
 
     if ( needToLoadLocalSongs ) {
         // FIXME: Combine mime types
-        openAssociationManager( fileLoader, '' );
+        const mime = Object.values( sources )
+            .map( src => {
+                return src.loading.requiresLocalFiles === true ? src.loading.mime : '';
+            } )
+            .reduce( ( prev, curr ) => {
+                return prev === '' ? curr : prev + ',' + curr;
+            } );
+
+        openAssociationManager( fileLoader, mime );
     }
+
+    fullPlayer.value = true;
 };

web/src/ts/player/state.ts

@@ -26,7 +26,7 @@ export const currentSource = ref( '' );
 
 export const rawQueue: Ref<PlaylistSongs> = ref( [] );
 
-export const queueIdx = ref( 0 );
+export const queueIdx = ref( -1 );
 
 export const queue: Ref<PlaylistSongs> = ref( [] );
 
@@ -36,6 +36,8 @@ export const shuffle = ref( false );
 
 export const repeat: Ref<RepeatMode> = ref( 'off' );
 
+export const fullPlayer = ref( false );
+
 const initSources = async () => {
     try {
         sources['applemusic'] = await useMusicKit();

web/src/ts/request.ts

@@ -13,6 +13,7 @@ const post = async ( url: string, payload: string, mime: string = 'application/j
     return await wrapper( url, {
         'credentials': 'include',
         'body': payload,
+        'method': 'post',
         'headers': {
             'Content-Type': mime ?? 'application/json'
         }

web/src/ts/userPlaylists/index.ts

@@ -0,0 +1,19 @@
+import {
+    editingPlaylists,
+    playlists
+} from './state';
+
+export const addPlaylist = ( name: string ) => {
+    playlists.value.push( {
+        'name': name,
+        'songs': []
+    } );
+    editingPlaylists.value.push( false );
+};
+
+export const removePlaylist = ( idx: number ) => {
+    if ( confirm( 'Do you really want to delete this playlist?' ) ) {
+        playlists.value.splice( idx, 1 );
+        editingPlaylists.value.splice( idx, 1 );
+    }
+};

web/src/ts/userPlaylists/save.ts

@@ -1,10 +1,62 @@
+import {
+    editingPlaylists,
+    playlistIdx,
+    playlists
+} from './state';
 import {
     queue,
     rawQueue,
     shuffle
 } from '../player/state';
+import {
+    addPlaylist
+} from '.';
+import request from '../request';
+import {
+    useNotification
+} from '@kyvg/vue3-notification';
 
-const savePlaylist = () => {
+export const savePlaylist = async () => {
     rawQueue.value = queue.value;
     shuffle.value = false;
+
+    if ( playlistIdx.value ) {
+        let name: null | string = '';
+
+        while ( !name || name.length === 0 ) {
+            name = prompt( 'You are trying to save a playlist that has not previously been created. Please enter a name for it' );
+        }
+
+        addPlaylist( name );
+        playlistIdx.value = playlists.value.length - 1;
+    }
+
+    playlists.value[ playlistIdx.value ]!.songs = rawQueue.value;
+
+    savePlaylists();
+};
+
+export const getPlaylists = async () => {
+    playlists.value = await ( await request.get( '/user/playlists' ) ).json();
+    editingPlaylists.value = playlists.value.map( () => false );
+};
+
+export const savePlaylists = async () => {
+    const notifications = useNotification();
+
+    try {
+        await request.post( '/user/playlists', JSON.stringify( playlists.value ) );
+        notifications.notify( {
+            'text': 'Playlists saved successfully',
+            'type': 'success',
+            'title': 'Playlists'
+        } );
+    } catch ( e ) {
+        console.error( e );
+        notifications.notify( {
+            'text': 'Failed to save playlists',
+            'type': 'error',
+            'title': 'Playlists'
+        } );
+    }
 };

web/src/ts/userPlaylists/state.ts

@@ -3,8 +3,11 @@ import {
     ref
 } from 'vue';
 import type {
-    PlaylistSongs
-} from '../dtype/playlist';
+    Playlist
+} from './file';
 
-const currentPlaylist = ref( '' );
-const playlists: Ref<PlaylistSongs> = ref( [] );
+export const playlistIdx = ref( -1 );
+
+export const playlists: Ref<Playlist[]> = ref( [] );
+
+export const editingPlaylists: Ref<boolean[]> = ref( [] );