From b903eb416f11ec08d77f2b26cdb9395077018e1b Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Wed, 2 Sep 2026 15:21:43 +0200
Subject: [PATCH] chore: refactor vue components

---
 web/src/components/UserPlaylists.vue          |  0
 web/src/components/main/PlayerComponent.vue   | 49 +++++++++++++++++++
 web/src/components/main/PlayerWrapper.vue     | 49 +++++++++++++++++++
 .../PlaylistsComponent.vue}                   |  2 +-
 .../components/main/SmallPlayerComponent.vue  | 35 +++++++++++++
 .../components/{ => player}/CurrentSong.vue   |  0
 .../{ => player}/PlayerControls.vue           |  0
 .../components/{ => player}/ProgressBar.vue   |  0
 .../components/{ => player}/QueueViewer.vue   |  6 +--
 web/src/components/{ => popups}/AddSong.vue   |  2 +-
 .../components/{ => popups}/ConfirmView.vue   |  0
 .../components/{ => popups}/PopupElement.vue  |  0
 .../components/{ => popups}/SongEditor.vue    |  0
 web/src/composables/AssociationView.vue       |  2 +-
 web/src/composables/DiskLoader.vue            |  2 +-
 web/src/composables/ImportTypePicker.vue      |  2 +-
 web/src/composables/SearchView.vue            |  2 +-
 web/src/ts/dtype/playlist.d.ts                |  2 +-
 web/src/ts/player/playlists/add.ts            |  7 +++
 web/src/ts/player/playlists/loader.ts         |  4 +-
 web/src/ts/player/plugins/interface.d.ts      |  5 ++
 web/src/ts/player/plugins/local/index.ts      |  6 ++-
 web/src/ts/player/plugins/local/loader.ts     |  4 ++
 web/src/ts/player/plugins/musickit/index.ts   |  6 +--
 web/src/ts/player/state.ts                    |  6 +--
 web/src/ts/userPlaylists/file.d.ts            | 14 ++++++
 web/src/ts/userPlaylists/index.ts             |  0
 web/src/ts/userPlaylists/save.ts              | 10 ++++
 web/src/ts/userPlaylists/state.ts             | 10 ++++
 web/src/views/AppView.vue                     | 36 ++------------
 30 files changed, 209 insertions(+), 52 deletions(-)
 create mode 100644 web/src/components/UserPlaylists.vue
 create mode 100644 web/src/components/main/PlayerComponent.vue
 create mode 100644 web/src/components/main/PlayerWrapper.vue
 rename web/src/components/{PlaylistPicker.vue => main/PlaylistsComponent.vue} (61%)
 create mode 100644 web/src/components/main/SmallPlayerComponent.vue
 rename web/src/components/{ => player}/CurrentSong.vue (100%)
 rename web/src/components/{ => player}/PlayerControls.vue (100%)
 rename web/src/components/{ => player}/ProgressBar.vue (100%)
 rename web/src/components/{ => player}/QueueViewer.vue (96%)
 rename web/src/components/{ => popups}/AddSong.vue (97%)
 rename web/src/components/{ => popups}/ConfirmView.vue (100%)
 rename web/src/components/{ => popups}/PopupElement.vue (100%)
 rename web/src/components/{ => popups}/SongEditor.vue (100%)
 create mode 100644 web/src/ts/userPlaylists/file.d.ts
 create mode 100644 web/src/ts/userPlaylists/index.ts
 create mode 100644 web/src/ts/userPlaylists/save.ts
 create mode 100644 web/src/ts/userPlaylists/state.ts

diff --git a/web/src/components/UserPlaylists.vue b/web/src/components/UserPlaylists.vue
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/components/main/PlayerComponent.vue b/web/src/components/main/PlayerComponent.vue
new file mode 100644
index 0000000..2ffc248
--- /dev/null
+++ b/web/src/components/main/PlayerComponent.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+    import {
+        queue,
+        queueIdx
+    } from '@/ts/player/state';
+    import CurrentSong from '../player/CurrentSong.vue';
+    import PlayerControls from '../player/PlayerControls.vue';
+    import QueueViewer from '../player/QueueViewer.vue';
+</script>
+
+<template>
+    <div class="player">
+        <div
+            class="panel"
+        >
+            <div style="margin-bottom: 20px; width: 100%;">
+                <CurrentSong
+                    v-model="queue[queueIdx]"
+                />
+            </div>
+            <PlayerControls />
+        </div>
+        <div class="panel">
+            <QueueViewer />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.player {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+
+    .panel {
+        width: 45%;
+        margin-left: 2.5%;
+        margin-right: 2.5%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+}
+</style>
diff --git a/web/src/components/main/PlayerWrapper.vue b/web/src/components/main/PlayerWrapper.vue
new file mode 100644
index 0000000..5a8fd7e
--- /dev/null
+++ b/web/src/components/main/PlayerWrapper.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+    import PlayerComponent from './PlayerComponent.vue';
+    import SmallPlayerComponent from './SmallPlayerComponent.vue';
+    import {
+        ref
+    } from 'vue';
+
+    const fullPlayer = ref( true );
+
+    const close = () => {
+        fullPlayer.value = false;
+    };
+</script>
+
+<template>
+    <div class="player-wrapper">
+        <SmallPlayerComponent v-model="fullPlayer" />
+        <div :class="['player-container', fullPlayer ? undefined : 'hidden']">
+            <i class="fa-solid fa-xmark" @click="close"></i>
+            <PlayerComponent />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .player-container {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        background-color: var(--secondary-color);
+        transition: bottom 1s ease;
+        transition-delay: 0.25s;
+
+        &.hidden {
+            transition-delay: 0s;
+            bottom: -100vh;
+        }
+
+        >.fa-xmark {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            font-size: 1.5rem;
+            cursor: pointer;
+        }
+    }
+</style>
diff --git a/web/src/components/PlaylistPicker.vue b/web/src/components/main/PlaylistsComponent.vue
similarity index 61%
rename from web/src/components/PlaylistPicker.vue
rename to web/src/components/main/PlaylistsComponent.vue
index ee3adef..c51e6da 100644
--- a/web/src/components/PlaylistPicker.vue
+++ b/web/src/components/main/PlaylistsComponent.vue
@@ -1,5 +1,5 @@
 <template>
     <div>
-        Hello World
+        <h1>Playlists</h1>
     </div>
 </template>
diff --git a/web/src/components/main/SmallPlayerComponent.vue b/web/src/components/main/SmallPlayerComponent.vue
new file mode 100644
index 0000000..d7137e4
--- /dev/null
+++ b/web/src/components/main/SmallPlayerComponent.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+    const closed = defineModel<boolean>( {
+        'required': true
+    } );
+
+    const open = () => {
+        closed.value = true;
+    };
+</script>
+
+<template>
+    <div :class="['small-player', closed ? 'hidden' : undefined]" @click="open">
+        Player
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.small-player {
+    background-color: green;
+    width: 80vw;
+    height: 7vh;
+    position: fixed;
+    left: 10vw;
+    bottom: 15px;
+    border-radius: 4vh;
+    overflow: hidden;
+    transition: bottom 0.5s ease;
+    transition-delay: 0.75s;
+
+    &.hidden {
+        bottom: -8vh;
+        transition-delay: 0s;
+    }
+}
+</style>
diff --git a/web/src/components/CurrentSong.vue b/web/src/components/player/CurrentSong.vue
similarity index 100%
rename from web/src/components/CurrentSong.vue
rename to web/src/components/player/CurrentSong.vue
diff --git a/web/src/components/PlayerControls.vue b/web/src/components/player/PlayerControls.vue
similarity index 100%
rename from web/src/components/PlayerControls.vue
rename to web/src/components/player/PlayerControls.vue
diff --git a/web/src/components/ProgressBar.vue b/web/src/components/player/ProgressBar.vue
similarity index 100%
rename from web/src/components/ProgressBar.vue
rename to web/src/components/player/ProgressBar.vue
diff --git a/web/src/components/QueueViewer.vue b/web/src/components/player/QueueViewer.vue
similarity index 96%
rename from web/src/components/QueueViewer.vue
rename to web/src/components/player/QueueViewer.vue
index 0354e99..03a4b3f 100644
--- a/web/src/components/QueueViewer.vue
+++ b/web/src/components/player/QueueViewer.vue
@@ -5,12 +5,12 @@
         computed,
         ref
     } from 'vue';
-    import AddSong from './AddSong.vue';
+    import AddSong from '../popups/AddSong.vue';
     import type {
         Song
     } from '@/ts/dtype/playlist';
-    import SongEditor from './SongEditor.vue';
-    import SortableList from './SortableList.vue';
+    import SongEditor from '../popups/SongEditor.vue';
+    import SortableList from '../SortableList.vue';
     import {
         beautifyTime
     } from '@/ts/util/time';
diff --git a/web/src/components/AddSong.vue b/web/src/components/popups/AddSong.vue
similarity index 97%
rename from web/src/components/AddSong.vue
rename to web/src/components/popups/AddSong.vue
index 6759006..d997bc9 100644
--- a/web/src/components/AddSong.vue
+++ b/web/src/components/popups/AddSong.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
     import DiskLoader from '@/composables/DiskLoader.vue';
     import ImportTypePicker from '@/composables/ImportTypePicker.vue';
-    import PopupElement from '@/components/PopupElement.vue';
+    import PopupElement from './PopupElement.vue';
     import player from '@/ts/player';
     import {
         sources
diff --git a/web/src/components/ConfirmView.vue b/web/src/components/popups/ConfirmView.vue
similarity index 100%
rename from web/src/components/ConfirmView.vue
rename to web/src/components/popups/ConfirmView.vue
diff --git a/web/src/components/PopupElement.vue b/web/src/components/popups/PopupElement.vue
similarity index 100%
rename from web/src/components/PopupElement.vue
rename to web/src/components/popups/PopupElement.vue
diff --git a/web/src/components/SongEditor.vue b/web/src/components/popups/SongEditor.vue
similarity index 100%
rename from web/src/components/SongEditor.vue
rename to web/src/components/popups/SongEditor.vue
diff --git a/web/src/composables/AssociationView.vue b/web/src/composables/AssociationView.vue
index b160a16..f4cf231 100644
--- a/web/src/composables/AssociationView.vue
+++ b/web/src/composables/AssociationView.vue
@@ -11,7 +11,7 @@
         onMounted,
         useTemplateRef
     } from 'vue';
-    import PopupElement from '@/components/PopupElement.vue';
+    import PopupElement from '@/components/popups/PopupElement.vue';
     import player from '@/ts/player';
     import {
         queue
diff --git a/web/src/composables/DiskLoader.vue b/web/src/composables/DiskLoader.vue
index b639e9e..f9b70f9 100644
--- a/web/src/composables/DiskLoader.vue
+++ b/web/src/composables/DiskLoader.vue
@@ -8,7 +8,7 @@
         ref,
         useTemplateRef
     } from 'vue';
-    import PopupElement from '@/components/PopupElement.vue';
+    import PopupElement from '@/components/popups/PopupElement.vue';
 
     const fileinput = useTemplateRef( 'fileinput' );
     const progress = ref( -1 );
diff --git a/web/src/composables/ImportTypePicker.vue b/web/src/composables/ImportTypePicker.vue
index 4886606..185bc32 100644
--- a/web/src/composables/ImportTypePicker.vue
+++ b/web/src/composables/ImportTypePicker.vue
@@ -4,7 +4,7 @@
         importers,
         isShowingImportTypePicker
     } from './importTypePicker';
-    import PopupElement from '@/components/PopupElement.vue';
+    import PopupElement from '@/components/popups/PopupElement.vue';
     import SearchView from './SearchView.vue';
     import {
         openDiskLoaderInterface
diff --git a/web/src/composables/SearchView.vue b/web/src/composables/SearchView.vue
index a1c0944..50294da 100644
--- a/web/src/composables/SearchView.vue
+++ b/web/src/composables/SearchView.vue
@@ -5,7 +5,7 @@
         results,
         searchOpts
     } from './searchManager';
-    import PopupElement from '@/components/PopupElement.vue';
+    import PopupElement from '@/components/popups/PopupElement.vue';
     import {
         ref
     } from 'vue';
diff --git a/web/src/ts/dtype/playlist.d.ts b/web/src/ts/dtype/playlist.d.ts
index 05ff906..6713e78 100644
--- a/web/src/ts/dtype/playlist.d.ts
+++ b/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
diff --git a/web/src/ts/player/playlists/add.ts b/web/src/ts/player/playlists/add.ts
index 3e3e0a5..a985879 100644
--- a/web/src/ts/player/playlists/add.ts
+++ b/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 );
+    }
 };
 
 /**
diff --git a/web/src/ts/player/playlists/loader.ts b/web/src/ts/player/playlists/loader.ts
index ead9c0a..0bdfc7e 100644
--- a/web/src/ts/player/playlists/loader.ts
+++ b/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;
 
diff --git a/web/src/ts/player/plugins/interface.d.ts b/web/src/ts/player/plugins/interface.d.ts
index b7ad6da..90f2c56 100644
--- a/web/src/ts/player/plugins/interface.d.ts
+++ b/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>;
 }
diff --git a/web/src/ts/player/plugins/local/index.ts b/web/src/ts/player/plugins/local/index.ts
index d32b421..ae1af5e 100644
--- a/web/src/ts/player/plugins/local/index.ts
+++ b/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
     };
 };
diff --git a/web/src/ts/player/plugins/local/loader.ts b/web/src/ts/player/plugins/local/loader.ts
index 15007f6..779f50d 100644
--- a/web/src/ts/player/plugins/local/loader.ts
+++ b/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 );
+};
diff --git a/web/src/ts/player/plugins/musickit/index.ts b/web/src/ts/player/plugins/musickit/index.ts
index adfb8ce..0152964 100644
--- a/web/src/ts/player/plugins/musickit/index.ts
+++ b/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' );
diff --git a/web/src/ts/player/state.ts b/web/src/ts/player/state.ts
index cabc1d5..5b436a2 100644
--- a/web/src/ts/player/state.ts
+++ b/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 );
 
diff --git a/web/src/ts/userPlaylists/file.d.ts b/web/src/ts/userPlaylists/file.d.ts
new file mode 100644
index 0000000..bb80ec0
--- /dev/null
+++ b/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;
+}
diff --git a/web/src/ts/userPlaylists/index.ts b/web/src/ts/userPlaylists/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/ts/userPlaylists/save.ts b/web/src/ts/userPlaylists/save.ts
new file mode 100644
index 0000000..fa3beb7
--- /dev/null
+++ b/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;
+};
diff --git a/web/src/ts/userPlaylists/state.ts b/web/src/ts/userPlaylists/state.ts
new file mode 100644
index 0000000..1663291
--- /dev/null
+++ b/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( [] );
diff --git a/web/src/views/AppView.vue b/web/src/views/AppView.vue
index 217ecb3..a74c5cf 100644
--- a/web/src/views/AppView.vue
+++ b/web/src/views/AppView.vue
@@ -1,28 +1,13 @@
 <script setup lang="ts">
-    import {
-        queue,
-        queueIdx
-    } from '@/ts/player/state';
-    import CurrentSong from '@/components/CurrentSong.vue';
-    import PlayerControls from '@/components/PlayerControls.vue';
-    import QueueViewer from '@/components/QueueViewer.vue';
+    import PlayerWrapper from '@/components/main/PlayerWrapper.vue';
+    import PlaylistsComponent from '@/components/main/PlaylistsComponent.vue';
+
 </script>
 
 <template>
     <div class="main-app">
-        <div
-            class="panel"
-        >
-            <div style="margin-bottom: 20px; width: 100%;">
-                <CurrentSong
-                    v-model="queue[queueIdx]"
-                />
-            </div>
-            <PlayerControls />
-        </div>
-        <div class="panel">
-            <QueueViewer />
-        </div>
+        <PlaylistsComponent />
+        <PlayerWrapper />
     </div>
 </template>
 
@@ -34,16 +19,5 @@
     justify-content: center;
     align-items: center;
     flex-direction: row;
-
-    .panel {
-        width: 45%;
-        margin-left: 2.5%;
-        margin-right: 2.5%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
 }
 </style>