update thingys

frontend/src/components/CollectionItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import SongItem from '../components/SongItem.vue'
-import type { Song } from '../script/types'
-import { ref, onMounted } from 'vue'
+import { type Song, mapApiToCollection } from '../script/types'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute } from 'vue-router'
 import CollectionListItem from '../components/CollectionListItem.vue'
 import { useAudio } from '@/composables/useAudio'
@@ -13,24 +13,86 @@ const { musicApi } = useApi()
 
 const songs = ref<Song[]>([])
 const name = ref('name')
+const limit = 50
+let offset = ref(0)
+let loading = ref(false)
+let hasMore = ref(true)
 
-onMounted(async () => {
+const fetchMoreSongs = async () => {
+  if (loading.value || !hasMore.value) return
+
+  loading.value = true
   try {
-    const response = await musicApi().musicBackendCollections(Array.isArray(route.params.id) ? route.params.id[0] : route.params.id) // Adjust method name if needed
+    const response = await musicApi().musicBackendCollections(
+      "",
+      Array.isArray(route.params.id) ? route.params.id[0] : route.params.id,
+      limit,
+      offset.value
+    )
 
-    const base = import.meta.env.VITE_MUSIC_API_URL || 'http://localhost:8080'
+    const col = mapApiToCollection(response.data)
 
-    response.songs.forEach(song => {
-      song.previewimage = `${base}/api/v1/images/${song.previewimage}`
-      song.url = `${base}/api/v1/audio/${song.url}`
-    })
-
-    name.value = response.name
-    songs.value = response.songs
+    if (offset.value === 0) {
+      name.value = col.name
+      songs.value = col.songs
+    } else {
+      songs.value.push(...col.songs)
+    }
 
     audioStore.setCollection(songs.value)
+
+    if (col.songs.length < limit) {
+      hasMore.value = false
+    }
+
+    offset.value += limit
   } catch (error) {
-    console.error('Error fetching collection:', error)
+    console.error('Error fetching songs:', error)
+  } finally {
+    loading.value = false
   }
+}
+
+const onScroll = (e: Event) => {
+  const target = e.target as HTMLElement
+  const scrollTop = target.scrollTop
+  const scrollHeight = target.scrollHeight
+  const clientHeight = target.clientHeight
+
+  if (scrollTop + clientHeight >= scrollHeight * 0.9) {
+    fetchMoreSongs()
+  }
+}
+
+onMounted(() => {
+  fetchMoreSongs()
+  const container = document.querySelector('.coll-container')
+  container?.addEventListener('scroll', onScroll)
+})
+
+onBeforeUnmount(() => {
+  const container = document.querySelector('.coll-container')
+  container?.removeEventListener('scroll', onScroll)
 })
 </script>
+
+
+<template>
+ <main class="flex-1 text-center flex flex-col h-full overflow-y-hidden">
+    <header v-show="true">
+      <div class="wrapper">
+        <nav class="flex justify-start my-2 mx-1 space-x-1 overflow-y-scroll flex-nowrap text-nowrap">
+          <RouterLink class="p-1 rounded-full backdrop--light shadow-xl" to="/menu/collections"><i class="fa-solid fa-arrow-left"></i>
+          </RouterLink>
+        <p  class="p-1 rounded-full backdrop--light shadow-xl">{{ name }}</p>
+        </nav>
+        <hr>
+      </div>
+    </header>
+    <div
+      class="flex-1 flex-col  overflow-y-scroll coll-container"
+    >
+      <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
+    </div>
+ </main>
+</template>