fix, ui: add songs & themes

src/ui/src/App.vue

@@ -8,7 +8,7 @@ import PlayerInPicture from "./PlayerInPicture.vue";
 import Header from "./Header.vue";
 
 import { usePlayerStore } from "@/store/player";
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import Startup from "@/views/Startup.vue";
 import { initPictureInPicture } from "@/pictureInPicture";
 import { getCover } from "@/components/image/placeholder";
@@ -27,6 +27,10 @@ const setCover = async () => {
     cover.value = await getCover(playerStore.song.cover, "graphic_eq")
 }
 setCover();
+
+const coverAsBackground = computed(() => {
+    return window.getCurrentThemeProperty("coverAsBackground");
+})
 </script>
 
 <template>
@@ -103,8 +107,7 @@ export default {
     },
     data() {
         return {
-            maximised: false,
-            coverAsBackground: false
+            maximised: false
         }
     },
     watch: {

src/ui/src/api/playlist.ts

@@ -75,7 +75,7 @@ export const deletePlaylist = async (id: number): Promise<boolean> => {
  * creates a new playlist
  * @returns the id of the new playlist
  */
-export const createPlaylist = async (): Promise<number> => {
+export const createPlaylist = async (): Promise<string> => {
     const res = await fetch("/api/playlists/new");
     const id = await res.json();
     await updateDataStore();
@@ -93,7 +93,7 @@ export const createPlaylistWithMetadata = async (
     name: string,
     description: string = "",
     cover: string = ""
-): Promise<number> => {
+): Promise<string> => {
     const id = await createPlaylist();
     await updatePlaylistMetadata({
         id,

src/ui/src/api/song.ts

@@ -6,6 +6,12 @@
 import { IMetadata, ISong, ISpotifySong, unhashTrack } from "../common";
 import { createPlaylist } from "./playlist";
 import { useDownloaderStore } from "../store/downloader";
+import { useDataStore } from "../store/data";
+
+const updateDataStore = async () => {
+    const dataStore = useDataStore();
+    await dataStore.fetchPlaylists();
+};
 
 /**
  * updates a song based on its id
@@ -21,7 +27,8 @@ export const updateSong = async (song: ISong) => {
             album: song.album,
             cover: song.cover
         })
-    })
+    });
+    await updateDataStore();
 }
 
 /**
@@ -35,6 +42,7 @@ export const updateSongProperty = async (songId: number, key: string, value: any
             [key]: value
         })
     })
+    await updateDataStore();
 }
 
 export const fetchMetadata = async (src: string): Promise<ISong> => {
@@ -52,15 +60,11 @@ export const fetchMetadata = async (src: string): Promise<ISong> => {
  * @param playlistId the id of the playlist to add the song to
  * @param song the song to add
  */
-export const addSong = async (playlistId: number | string, song: ISong) => {
+export const addSong = async (playlistId: string, song: ISong) => {
     if (playlistId === "new") {
         playlistId = await createPlaylist();
     }
 
-    if (typeof playlistId === "string") {
-        console.error("playlistId cannot be a string", playlistId);
-    }
-
     await fetch(`/api/playlists/${playlistId}/tracks`, {
         method: "POST",
         body: JSON.stringify({
@@ -72,6 +76,8 @@ export const addSong = async (playlistId: number | string, song: ISong) => {
             spotify: song.metadata ? JSON.stringify(song.metadata.spotify) : ""
         })
     })
+
+    await updateDataStore();
 }
 
 /**
@@ -82,7 +88,9 @@ export const addSong = async (playlistId: number | string, song: ISong) => {
 export const addExistingSong = async (playlistId: number, songId: number) => {
     await fetch(`/api/playlists/${playlistId}/tracks/${songId}`, {
         method: "POST"
-    })
+    });
+
+    await updateDataStore();
 }
 
 /**
@@ -96,7 +104,9 @@ export const favouriteSong = async (songId: number, favourite: boolean = true) =
         body: JSON.stringify({
             favourite
         })
-    })
+    });
+
+    await updateDataStore();
 }
 
 /**
@@ -110,7 +120,9 @@ export const saveDuration = async(songId: number, duration: number) => {
         body: JSON.stringify({
             duration
         })
-    })
+    });
+
+    await updateDataStore();
 }
 
 /**

src/ui/src/common.ts

@@ -98,7 +98,7 @@ export interface IBrowseSong extends ISong {
 }
 
 export interface IPlaylistMeta {
-    id: number;
+    id: string;
     name: string;
     cover: string;
     description: string;

src/ui/src/components/popups/ImportSpotifySong.vue

@@ -68,23 +68,25 @@ const preview = () => {
     window.dispatchEvent(event);
 }
 
-const createPlaylist = async (playlistId: string | number): Promise<number> => {
+const createPlaylist = async (playlistId: string): Promise<string> => {
     if (playlistId === "new") {
         const newPlaylist = await createPlaylistWithMetadata(props.song.title, props.song.artist, props.song.cover);
         options.value[0].options = data.playlistsAsDropdown;
         options.value[0].value = newPlaylist;
         return newPlaylist;
     }
-    return Number(playlistId);
+    return playlistId;
 }
 
-const addSong = async (index: number, playlistId: number = null) => {
+const addSong = async (index: number, playlistId: string = null) => {
     playlistId ??= form.value.toObject().playlist;
 
+    console.log(playlistId);
+
     playlistId = await createPlaylist(playlistId);
 
     await addSongToPlaylist(
-        playlistId ?? form.value.toObject().playlist,
+        playlistId,
         track.value);
     props.song.added = true;
     Notifications.addSuccess(track.value.title,

src/ui/src/store/data.ts

@@ -23,7 +23,7 @@ export const useDataStore = defineStore({
         },
         playlistsAsDropdown(allowCreateNew = true): IDropdownOption[] {
             const options = this.playlists.map((playlist) => ({
-                value: playlist.id.toString(),
+                value: playlist.id,
                 label: playlist.name,
             }));
             if (allowCreateNew) {

src/ui/src/store/index.ts

@@ -7,8 +7,12 @@ import {usePlayerStore} from "./player";
 import {useDataStore} from "./data";
 import {useDownloaderStore} from "./downloader";
 
+import window from "../themes";
+
 export const initialiseStores = () => {
     usePlayerStore().initialise();
     useDataStore().fetchPlaylists();
     useDownloaderStore().initialise();
+
+    window.restoreTheme();
 }

src/ui/src/themes.ts

@@ -1,10 +1,7 @@
-//import { useSettingsStore } from "./store/settings";
 import themes from "./assets/themes.json";
-import { ref } from "vue";
+import { useSettingsStore } from "./store/settings";
 
-const settings = ref({
-    theme: "dynamic"
-});
+const settings = () => useSettingsStore();
 
 
 interface CustomWindow extends Window {
@@ -13,6 +10,7 @@ interface CustomWindow extends Window {
     setTheme: (theme: string) => void;
     getCurrentThemeProperty: (property: string) => string;
     themes: string[];
+    restoreTheme: () => void;
 }
 
 declare const window: CustomWindow;
@@ -30,15 +28,15 @@ window.getThemes = () => { // returns a string array of all available themes
 }
 
 window.getCurrentTheme = () => {
-    return settings.value.theme;
+    return settings().theme;
 }
 
 window.setTheme = (theme) => { // accepts a string (theme name)
     if (!window.getThemes().includes(theme)) {
         return;
     }
 
-    settings.theme = theme;
+    settings().theme = theme;
 
     for (const key of Object.keys(themes)) {
         const value = themes[key]
@@ -49,11 +47,11 @@ window.setTheme = (theme) => { // accepts a string (theme name)
     }
 }
 
-window.setTheme(settings.theme || "dynamic") // optional, loads the default theme
+window.restoreTheme = () => window.setTheme(settings().theme || "dynamic") // optional, loads the default theme
 
 window.getCurrentThemeProperty = (property) => {
     const value = themes[property]
-    return value[settings.theme] ?? value.dark;
+    return value[settings().theme] ?? value.dark;
 }
 
 export default window;