From 9c65940aea254e0c75ad38bcd5bd86b07997a6cf Mon Sep 17 00:00:00 2001 From: pandadev <70103896+0PandaDEV@users.noreply.github.com> Date: Mon, 15 Apr 2024 15:09:19 +0200 Subject: [PATCH] added all songs to library and recently played to home page --- assets/styles/components/library.scss | 20 ++++++- assets/styles/pages/index.scss | 47 ++++++++++++++- components/Library.vue | 83 ++++++++++++++++++++------- components/icons/Search.vue | 27 +++++++++ pages/index.vue | 76 +++++++++--------------- plugins/music.ts | 2 + stores/music.ts | 38 +++++++----- types/types.ts | 1 + 8 files changed, 209 insertions(+), 85 deletions(-) create mode 100644 components/icons/Search.vue diff --git a/assets/styles/components/library.scss b/assets/styles/components/library.scss index 9b19606..a44c10a 100644 --- a/assets/styles/components/library.scss +++ b/assets/styles/components/library.scss @@ -10,6 +10,7 @@ width: v.$sidebar-width; height: 100%; padding: 16px; + position: relative; .link{ display: flex; @@ -34,7 +35,7 @@ .search-container { width: 268px; height: 32px; - background-color: #222222; + background-color: v.$element; outline: none; border: none; display: flex; @@ -54,4 +55,21 @@ height: 32px; } } +} + +.items{ + display: flex; + flex-direction: column; + gap: 8px; + color: v.$text-bright; + + .song{ + display: flex; + align-items: center; + gap: 8px; + } + + .cover{ + width: 32px; + } } \ No newline at end of file diff --git a/assets/styles/pages/index.scss b/assets/styles/pages/index.scss index cb88c17..d081cc6 100644 --- a/assets/styles/pages/index.scss +++ b/assets/styles/pages/index.scss @@ -4,7 +4,52 @@ padding: 0 !important; } -.index{ +.index { padding: 24px; + padding-top: 48px; padding-bottom: 0; + font-size: 14px; +} + +.ascii { + padding-bottom: 48px; + color: v.$accent; +} + +.playlists, +.recently-played { + display: flex; + flex-direction: column; + gap: 14px; +} + +.recently-played .cards { + display: flex; + flex-direction: row; + gap: 16px; + + .song { + display: flex; + flex-direction: column; + gap: 8px; + + .info { + p { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .artist{ + color: v.$text; + } + } + + .cover { + flex: 1; + max-width: 240px; + min-width: 150px; + } + } } \ No newline at end of file diff --git a/components/Library.vue b/components/Library.vue index 3edda0a..e934f17 100644 --- a/components/Library.vue +++ b/components/Library.vue @@ -1,32 +1,71 @@ + + \ No newline at end of file diff --git a/components/icons/Search.vue b/components/icons/Search.vue new file mode 100644 index 0000000..5d6bb34 --- /dev/null +++ b/components/icons/Search.vue @@ -0,0 +1,27 @@ + diff --git a/pages/index.vue b/pages/index.vue index 4e0bc57..4204273 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -2,23 +2,30 @@

Home

- 
+      
                 __                        
  _      _____  / /________  ____ ___  ___ 
 | | /| / / _ \/ / ___/ __ \/ __ `__ \/ _ \
 | |/ |/ /  __/ / /__/ /_/ / / / / / /  __/
 |__/|__/\___/_/\___/\____/_/ /_/ /_/\___/ 
       

-      

-        
-        
Song ID is missing

-        

-          
{{ song.title }}

-          
{{ song.artist }}

-          
{{ formatDuration(song.length) }}

-          
{{ formatDate(song.date_added) }}

+
+      

+        
Playlists

+        

+      

+
+      

+        
Recently played

+        

+          

+            
+            

+              
{{ truncate(song.title) }}

+              
{{ truncate(song.artist) }}

+            

+          

         

-        
       

     

   

@@ -26,6 +33,7 @@
 
 
 
 
+
\ No newline at end of file
diff --git a/plugins/music.ts b/plugins/music.ts
index 2bb5f6b..3339c83 100644
--- a/plugins/music.ts
+++ b/plugins/music.ts
@@ -97,6 +97,8 @@ export default defineNuxtPlugin((nuxtApp) => {
         musicStore.player.currentSongId = id;
         await musicStore.setSongFromBuffer(contents);
         await this.ensureAudioContextAndFilters();
+        const currentTime = new Date().toISOString();
+        musicStore.updateLastPlayed(id, currentTime);
       } else {
         settingsStore.settings.playerSettings.currentSong = "";
         await settingsStore.saveSettings();
diff --git a/stores/music.ts b/stores/music.ts
index 240e23f..448cc65 100644
--- a/stores/music.ts
+++ b/stores/music.ts
@@ -1,19 +1,23 @@
+import {
+  BaseDirectory,
+  writeTextFile,
+} from "@tauri-apps/plugin-fs";
 import type { MusicStore, SongsConfig, Song } from "~/types/types";
 
 export const useMusicStore = defineStore("musicStore", {
   state: () =>
-    ({
-      songsConfig: {
-        songs: {},
-      },
-      player: {
-        audio: new Audio(),
-        currentSongId: "",
-        audioContext: null,
-        sourceNode: null,
-        eqFilters: []
-      },
-    } as MusicStore),
+  ({
+    songsConfig: {
+      songs: {},
+    },
+    player: {
+      audio: new Audio(),
+      currentSongId: "",
+      audioContext: null,
+      sourceNode: null,
+      eqFilters: []
+    },
+  } as MusicStore),
 
   actions: {
     init(songs: SongsConfig) {
@@ -45,6 +49,14 @@ export const useMusicStore = defineStore("musicStore", {
     },
     getSongByID(id: string): Song | null {
       return this.songsConfig?.songs?.[id] ?? null;
-    }
+    },
+    updateLastPlayed(songId: string, lastPlayed: string) {
+      if (this.songsConfig.songs[songId]) {
+        this.songsConfig.songs[songId].lastPlayed = lastPlayed;
+        writeTextFile("Vleer/songs.json", JSON.stringify(this.songsConfig, null, 2), {
+          baseDir: BaseDirectory.Audio,
+        });
+      }
+    },
   },
 });
diff --git a/types/types.ts b/types/types.ts
index 5d6e791..777930f 100644
--- a/types/types.ts
+++ b/types/types.ts
@@ -6,6 +6,7 @@ export interface Song {
   cover: string;
   coverURL?: string;
   date_added: string;
+  lastPlayed?: string;
 }
 
 export interface SongsConfig {