resizing images ondemand

frontend/src/components/CollectionItem.vue

@@ -17,7 +17,7 @@ const name = ref('name');
 onMounted(async () => {
   const data = await userStore.fetchCollection(Number(route.params.id));
   console.log(data)
-  
+
   data.songs.forEach(song => {
     song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
     song.url = `${userStore.baseUrl}api/v1/audio/${song.url}`;
@@ -47,10 +47,6 @@ onMounted(async () => {
 
   <div class="flex-1 flex-col h-full overflow-scroll">
 
-      <SongItem 
-        v-for="(song, index) in songs"
-        :key="index"
-        :song="song"
-      />
+    <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
   </div>
 </template>

frontend/src/components/NowPlaying.vue

@@ -11,8 +11,8 @@ const audioStore = useAudioStore();
     <hr>
     <div class="relative wrapper p-1 grow text-yellow-500">
 
-      <img :src="encodeURI(audioStore.bgimg)" class="absolute top-0 left-0 w-full h-full"
-       :style="{ 'filter': 'blur(2px)', 'opacity': '0.5' }" alt="Background Image" />
+      <img :src="encodeURI(audioStore.bgimg + '?h=150&w=400')" class="absolute top-0 left-0 w-full h-full"
+        :style="{ 'filter': 'blur(2px)', 'opacity': '0.5' }" alt="Background Image" />
 
       <nav class="relative flex justify-around my-2 z-10">
 
@@ -37,7 +37,8 @@ const audioStore = useAudioStore();
         <i class="fa-solid fa-arrow-up"></i>
       </RouterLink>
 
-      <marquee class="relative mx-16 text-2xl font-bold text-pink-500" behavior="scroll">{{ audioStore.artist }} - {{ audioStore.title
+      <marquee class="relative mx-16 text-2xl font-bold text-pink-500" behavior="scroll">{{ audioStore.artist }} - {{
+        audioStore.title
         }}</marquee>
       <audio controls class="hidden" id="audio-player" :src="audioStore.songSrc"
         @timeupdate="audioStore.update"></audio>

frontend/src/components/SongItem.vue

@@ -4,11 +4,11 @@ import { useAudioStore } from '@/stores/audioStore';
 import { useUserStore } from '@/stores/userStore';
 import type { Song } from '@/script/types';
 
-const props = defineProps<{ song: Song}>();
+const props = defineProps<{ song: Song }>();
 const userStore = useUserStore();
 const audioStore = useAudioStore();
 
-function updateSong(){
+function updateSong() {
 
   let updated = props.song;
   audioStore.setSong(updated)
@@ -19,7 +19,7 @@ function updateSong(){
 <template>
 
   <div @click="updateSong" class="m-2 border border-pink-500 rounded-lg flex">
-    <img class="h-16 w-16 m-1 rounded-lg" :src="encodeURI(props.song.previewimage)" loading="lazy" />
+    <img class="h-16 w-16 m-1 rounded-lg" :src="encodeURI(props.song.previewimage + '?h=64&w=64')" loading="lazy" />
     <div class="flex flex-col">
       <h3 class="text-nowrap overflow-scroll">
         <slot name="songName">{{ props.song.name }}</slot>

frontend/src/stores/userStore.ts

@@ -4,7 +4,7 @@ import type { Song, CollectionPreview } from '@/script/types';
 
 export const useUserStore = defineStore('userStore', () => {
   const userId = ref(null)
-  const baseUrl = ref('https://localhost:7254/')
+  const baseUrl = ref('https://service.illegalesachen.download/')
 
   async function fetchSong(hash: string): Promise<Song> {
     try {
@@ -20,12 +20,12 @@ export const useUserStore = defineStore('userStore', () => {
       console.error('Failed to fetch songs:', error);
       return {
         hash: "-1",
-    name: "song name",
-    artist: "artist name",
-    length: 0,
-    url: "song.mp3",
-    previewimage: "404.im5",
-    mapper: "map",
+        name: "song name",
+        artist: "artist name",
+        length: 0,
+        url: "song.mp3",
+        previewimage: "404.im5",
+        mapper: "map",
       } as Song;
     }
   }

frontend/src/views/CollectionView.vue

@@ -11,7 +11,7 @@ const collections = ref<CollectionPreview[]>([]);
 onMounted(async () => {
   const data = await userStore.fetchCollections();
   data.forEach(song => {
-    song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
+    song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}?h=80&w=80`;
   })
   collections.value = data;
 
@@ -21,12 +21,7 @@ onMounted(async () => {
 <template>
   <main class="flex-1 text-center flex flex-col h-full overflow-scroll">
     <div class="flex flex-col overflow-scroll">
-      <CollectionListItem 
-        v-for="(collection, index) in collections"
-        :key="index"
-        :collection="collection"
-      />
+      <CollectionListItem v-for="(collection, index) in collections" :key="index" :collection="collection" />
     </div>
   </main>
 </template>
-

frontend/src/views/NowPlayingView.vue

@@ -23,8 +23,9 @@ const audioStore = useAudioStore();
     <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)" :key="audioStore.bgimg" />
+
+          <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" />
         </i>
       </div>
 
@@ -46,11 +47,11 @@ const audioStore = useAudioStore();
             <p>{{ audioStore.artist }}</p>
           </div>
           <div class="flex flex-col justify-between mb-4">
-          <i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'text-pink-500' : '']"
-            class="fa-solid fa-repeat"></i>
+            <i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'text-pink-500' : '']"
+              class="fa-solid fa-repeat"></i>
             <i @click="this.$router.go(-1);" class="fa-solid fa-arrow-down"></i>
+          </div>
         </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"