localstorage upgrage, custome colors, fixed broken files (encoding issues)

frontend/src/views/MeView.vue

@@ -1,15 +1,57 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useUserStore } from '@/stores/userStore';
+import SongItem from '../components/SongItem.vue'
+import { useAudioStore } from '@/stores/audioStore';
 
+const audioStore = useAudioStore();
 const userStore = useUserStore();
 
+const bgColor = ref('');
+const actionColor = ref('');
+const infoColor = ref('');
+const borderColor = ref('');
+
 function update() {
   var input = document.getElementById("url-input") as HTMLAudioElement;
   console.log(input.value)
   userStore.baseUrl = input.value;
 
 }
+
+function save(bg: string | null, main: string | null, info: string | null, border: string | null) {
+
+  document.documentElement.style.setProperty('--background-color', bg ?? bgColor.value);
+  document.documentElement.style.setProperty('--action-color', main ?? actionColor.value);
+  document.documentElement.style.setProperty('--information-color', info ?? infoColor.value);
+  document.documentElement.style.setProperty('--border-color', border ?? borderColor.value);
+
+  localStorage.setItem('bgColor', bg ?? bgColor.value);
+  localStorage.setItem('actionColor', main ?? actionColor.value);
+  localStorage.setItem('infoColor', info ?? infoColor.value);
+  localStorage.setItem('borderColor', border ?? borderColor.value);
+
+  console.log("bg", bgColor.value, "action:", actionColor.value, "info", infoColor.value, "border", borderColor.value)
+}
+
+onMounted(() => {
+  reset();
+})
+
+function reset() {
+
+  bgColor.value = localStorage.getItem('bgColor') || '#1c1719';
+  actionColor.value = localStorage.getItem('actionColor') || '#eab308';
+  infoColor.value = localStorage.getItem('infoColor') || '#ec4899';
+  borderColor.value = localStorage.getItem('borderColor') || '#ec4899';
+
+  document.documentElement.style.setProperty('--background-color', bgColor.value);
+  document.documentElement.style.setProperty('--action-color', actionColor.value);
+  document.documentElement.style.setProperty('--information-color', infoColor.value);
+  document.documentElement.style.setProperty('--border-color', borderColor.value);
+
+}
+
 </script>
 
 <template>
@@ -23,8 +65,93 @@ function update() {
     </div>
   </header>
 
-  <main class="flex-1">
+  <main class="flex-1 flex flex-col overflow-scroll">
     <h1> Meeeeee </h1>
     <input @change="update" type="text" id="url-input" :value="userStore.baseUrl" />
+    <br>
+
+    <div class="flex flex-col w-full justify-around p-10">
+      <div class="flex flex-1 justify-between">
+        <p>Background:</p>
+        <input type="color" id="bgPicker" v-model="bgColor" @input="save()"
+          class="appearance-none w-8 h-8 border border-2 p-0 overflow-hidden cursor-pointer">
+      </div>
+
+      <div class="flex flex-1 justify-between">
+        <p>Main:</p>
+        <input type="color" id="actionPicker" v-model="actionColor" @input="save()"
+          class="appearance-none w-8 h-8 border border-2 p-0 overflow-hidden cursor-pointer">
+      </div>
+
+      <div class="flex flex-1 justify-between">
+        <p>Secondary:</p>
+        <input type="color" id="infoPicker" v-model="infoColor" @input="save()"
+          class="appearance-none w-8 h-8 border border-2 p-0 overflow-hidden cursor-pointer">
+      </div>
+
+      <div class="flex flex-1 justify-between">
+        <p>Border:</p>
+        <input type="color" id="borderPicker" v-model="borderColor" @input="save()"
+          class="appearance-none w-8 h-8 border border-2 p-0 overflow-hidden cursor-pointer">
+      </div>
+    </div>
+
+    <div class="w-full p-2">
+      <p>Current</p>
+      <SongItem :song="audioStore.currentSong" />
+    </div>
+
+    <div class="w-full p-2 bg-black">
+      <p class="flex-1 flex justify-between" style=" color : #57db5d">StaryNight <button style="border-color : #b3002d"
+          class="border rounded-lg p-0.5" @click="save('#000000', '#5e2d8f', '#57db5d', '#b3002d')">Choose
+        </button>
+      </p>
+      <SongItem :song="audioStore.currentSong" :border="'#b3002d'" :action="'#5e2d8f'" :info="'#57db5d'" />
+    </div>
+    <div class="w-full p-2" style="background-color: #1c1719">
+      <p class="flex-1 flex justify-between" style=" color : #ec4889">Default<button style="border-color : #ec4889"
+          class="border rounded-lg p-0.5" @click="save('#1c1719', '#eab308', '#ec4889', '#ec4889')">Choose
+        </button>
+      </p>
+      <SongItem :song="audioStore.currentSong" :border="'#ec4889'" :info="'#ec4889'" :action="'#eab308'" />
+    </div>
+
+    <div class="w-full p-2" style="background-color: #ff4c4c">
+      <p class="flex-1 flex justify-between" style="color: #ffffff">
+        Bright Sunset
+        <button style="border-color: #ffffff" class="border rounded-lg p-0.5"
+          @click="save('#ff4c4c', '#ffcc00', '#ffffff', '#ffffff')">Choose</button>
+      </p>
+      <SongItem :song="audioStore.currentSong" :border="'#ffffff'" :info="'#ffffff'" :action="'#ffcc00'" />
+    </div>
+
+    <div class="w-full p-2" style="background-color: #003d00">
+      <p class="flex-1 flex justify-between" style="color: #e0f8d8">
+        Forest Night
+        <button style="border-color: #e0f8d8" class="border rounded-lg p-0.5"
+          @click="save('#003d00', '#a8d5a2', '#e0f8d8', '#e0f8d8')">Choose</button>
+      </p>
+      <SongItem :song="audioStore.currentSong" :border="'#e0f8d8'" :info="'#e0f8d8'" :action="'#a8d5a2'" />
+    </div>
+
+    <div class="w-full p-2" style="background-color: #00274d">
+      <p class="flex-1 flex justify-between" style="color: #00ffff">
+        Electric Blue
+        <button style="border-color: #00ffff" class="border rounded-lg p-0.5"
+          @click="save('#00274d', '#0099ff', '#00ffff', '#00ffff')">Choose</button>
+      </p>
+      <SongItem :song="audioStore.currentSong" :border="'#00ffff'" :info="'#00ffff'" :action="'#0099ff'" />
+    </div>
+
   </main>
 </template>
+
+<style scoped>
+input[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+input[type='color']::-webkit-color-swatch {
+  border: none;
+}
+</style>

frontend/src/views/NowPlayingView.vue

@@ -19,17 +19,18 @@ const audioStore = useAudioStore();
     </div>
   </header>
 
-  <main class="flex-1 flex justify-center text-center text-yellow-600">
+  <main class="flex-1 flex justify-center text-center action">
     <div class="flex flex-col justify-around">
       <div class="relative">
         <i class="relative p-36 fa-solid fa-play">
 
-          <img class="h-72 absolute top-4 left-0 bottom-0 right-0 bg-center bg-cover rounded-lg"
-            :src="encodeURI(audioStore.bgimg + '?h=500&w=500')" :key="audioStore.bgimg" />
+          <img class="absolute top-4 left-0 bottom-0 right-0 bg-center bg-cover rounded-lg"
+            :src="encodeURI(audioStore.bgimg + '?h=320&w=320')" :key="audioStore.bgimg" />
         </i>
       </div>
 
-      <div>
+      <div class="h-1/3 flex flex-col justify-center">
+        <div class="flex-1"></div>
         <div>
           <div class="flex w-screen justify-around">
             <i class="fa-solid fa-backward-step text-5xl self-center" @click="audioStore.togglePrev"></i>
@@ -38,23 +39,27 @@ const audioStore = useAudioStore();
             <i class="fa-solid fa-forward-step text-5xl self-center" @click="audioStore.toggleNext"></i>
           </div>
         </div>
-        <div class="flex flex-1 justify-around">
-          <i @click="audioStore.toggleShuffle" :class="[audioStore.shuffle ? 'text-pink-500' : '']"
+        <div class="flex flex-1 justify-around ml-4">
+          <i @click="audioStore.toggleShuffle" :class="[audioStore.shuffle ? 'info' : '']"
             class="fa-solid fa-shuffle"></i>
 
-          <div class="m-4 text-pink-500 max-w-1/2 overflow-idden">
+          <div class="m-4 info flex-1 overflow-idden">
             <p>{{ audioStore.title }}</p>
-            <p>{{ audioStore.artist }}</p>
+            <RouterLink :to="'search?a=' + audioStore.artist">
+
+              {{ audioStore.artist }}
+
+            </RouterLink>
           </div>
-          <div class="flex flex-col justify-between mb-4">
-            <i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'text-pink-500' : '']"
+          <div class="flex flex-col justify-between mb-4 mr-4">
+            <i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'info' : '']"
               class="fa-solid fa-repeat"></i>
             <i @click="$router.go(-1);" class="fa-solid fa-arrow-down"></i>
           </div>
         </div>
         <div class="flex">
           <input
-            class="appearance-none mx-4 flex-1 bg-yellow-200 bg-opacity-20 accent-yellow-600 rounded-lg outline-none slider"
+            class="appearance-none mx-4 flex-1 bg-yellow-200 bg-opacity-20 accent-yellow-600 rounded-lg outline-none slider "
             type="range" id="audio-slider" @change="audioStore.updateTime" max="100" :value="audioStore.percentDone">
         </div>
         <div class="flex justify-between mx-4">

frontend/src/views/RecentView.vue

@@ -35,7 +35,7 @@ const fetchRecent = async () => {
   songs.value = [...songs.value, ...data];
 
   isLoading.value = false;
-  audioStore.setCollection(null);
+  audioStore.setCollection(songs.value);
 }
 
 

frontend/src/views/SearchView.vue

@@ -15,12 +15,11 @@ const activesongs = ref<Song[]>([]);
 const songs = ref<Song[]>([]);
 const artists = ref<string[]>([]);
 const showSearch = ref(false);
-
-
+const searchTerm = ref('');
 
 onMounted(async () => {
 
-await loadartistifexist();
+  await loadartistifexist();
 
   const container = document.querySelector('.search') as HTMLInputElement;
 
@@ -29,31 +28,43 @@ await loadartistifexist();
       showSearch.value = true;
 
       const target = event.target as HTMLInputElement;
-        if(target.value != undefined && target.value != ""){
-         const data = await userStore.fetchActiveSearch(target.value)
-         router.push({ query: {s: target.value } });
+      if (target.value != undefined && target.value != "") {
+        const data = await userStore.fetchActiveSearch(target.value)
+        router.push({ query: { s: target.value } });
+        searchTerm.value = target.value
 
-         data.songs.forEach(song => {
-            song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
-            song.url = `${userStore.baseUrl}api/v1/audio/${song.url}`;
-          });
-          
-          activesongs.value = data.songs;
-          audioStore.setCollection(data.songs)
-          artists.value = data.artist;
+        data.songs.forEach(song => {
+          song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
+          song.url = `${userStore.baseUrl}api/v1/audio/${song.url}`;
+        });
+
+        activesongs.value = data.songs;
+        audioStore.setCollection(data.songs)
+        artists.value = data.artist;
       } else {
-          activesongs.value = [];
-          artists.value = [];
-          showSearch.value = false;
-         
-      }
-    }
-    )}
-      const s =  route.query.s as string;
-      if(s){container.value = s; container.dispatchEvent(new Event('input'))}
-  });
+        activesongs.value = [];
+        artists.value = [];
+        showSearch.value = false;
+        router.push({ query: { s: target.value } });
 
-async function loadartistifexist(){
+      }
+    });
+    container.addEventListener('enter', async (event: Event) => {
+
+      const target = event.target as HTMLInputElement;
+      if (target.value != undefined && target.value != "") {
+        showSearch.value = false
+        const data = await userStore.fetchActiveSearch(target.value)
+
+      }
+    })
+
+  }
+  const s = route.query.s as string;
+  if (s) { container.value = s; container.dispatchEvent(new Event('input')) }
+});
+
+async function loadartistifexist() {
   const query = route.query.a as string;
   if (query) {
     showSearch.value = false;
@@ -62,16 +73,25 @@ async function loadartistifexist(){
     console.log(data);
 
     data.forEach(song => {
-            song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
-            song.url = `${userStore.baseUrl}api/v1/audio/${song.url}`;
-          });
+      song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
+      song.url = `${userStore.baseUrl}api/v1/audio/${song.url}`;
+    });
 
     songs.value = data;
   }
 }
 
+function emptySearch() {
+  const container = document.querySelector('.search') as HTMLInputElement;
+
+  container.value = "";
+  container.dispatchEvent(new Event('input'))
+  songs.value = [];
+  artists.value = [];
+
+}
 watch(() => route.query.a, async (newQuery) => {
-  
+
   await loadartistifexist();
 
 });
@@ -90,12 +110,18 @@ watch(() => route.query.a, async (newQuery) => {
     </div>
   </header>
   <main class="flex flex-col flex-1 flex-col w-full h-full overflow-scroll">
-    <input placeholder="Type to Search..." class="flex-1 max-h-12 search border border-pink-500 accent-pink-800 bg-yellow-300 bg-opacity-20 rounded-lg m-2 p-2" />
+    <input placeholder="Type to Search..."
+      class="flex-1 max-h-12 search border bordercolor accent-pink-800 bg-yellow-300 bg-opacity-20 rounded-lg m-2 p-2" />
+
+    <div class="absolute h-16 right-4 flex flex-col justify-center">
+      <i @click="emptySearch" class="far fa-times-circle opacity-50"></i>
+    </div>
+
     <div class="relative flex flex-col w-full h-full overflow-scroll">
-      <div v-if="showSearch" class="absolute w-full text-center search-recommendations  z -20">
-         <ActiveSearchList :songs="activesongs" :artist="artists"/>
-      </div>    
-    <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
+      <div v-if="showSearch" class="absolute w-full text-center search-recommendations  z-20">
+        <ActiveSearchList :songs="activesongs" :artist="artists" :search="searchTerm" />
+      </div>
+      <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
     </div>
   </main>
 </template>