implement show copyright info on album page

+ rewrite server track and album models to use destructuring

src/components/FolderView/SongList.vue

@@ -22,6 +22,9 @@
         <div class="text">No tracks here</div>
       </div>
     </div>
+    <div class="copyright" v-if="copyright">
+      {{ copyright() }}
+    </div>
   </div>
 </template>
 
@@ -46,6 +49,7 @@ const props = defineProps<{
   playlistid?: string;
   on_album_page?: boolean;
   disc?: string | number;
+  copyright?: () => string;
 }>();
 
 const route = useRoute();
@@ -140,6 +144,13 @@ function getTrackList() {
   padding: 1rem;
 }
 
+.copyright {
+  font-size: 0.8rem;
+  margin-top: 1rem;
+  text-align: center;
+  opacity: 0.5;
+}
+
 .table {
   height: 100%;
   overflow-y: hidden;

src/interfaces.ts

@@ -17,6 +17,7 @@ export interface Track {
   discnumber?: number;
   index?: number;
   uniq_hash: string;
+  copyright?: string;
 }
 
 export interface Folder {
@@ -40,6 +41,7 @@ export interface AlbumInfo {
   is_single: boolean;
   hash: string;
   colors: string[];
+  copyright?: string;
 }
 
 export interface Artist {
@@ -108,5 +110,3 @@ export interface FetchProps {
   put?: boolean;
   headers?: {};
 }
-
-

src/views/album/Content.vue

@@ -1,7 +1,19 @@
 <template>
   <div class="album-tracks rounded">
     <div v-for="(disc, key) in discs" class="album-disc">
-      <SongList :key="key" :tracks="disc" :on_album_page="true" :disc="key" />
+      <SongList
+        :key="key"
+        :tracks="disc"
+        :on_album_page="true"
+        :disc="key"
+        :copyright="
+          () => {
+            if (isLastDisc(key)) {
+              return copyright;
+            }
+          }
+        "
+      />
     </div>
   </div>
 </template>
@@ -10,11 +22,18 @@
 import { Track } from "@/interfaces";
 import SongList from "@/components/FolderView/SongList.vue";
 
-defineProps<{
+const props = defineProps<{
   discs: {
     [key: string]: Track[];
   };
+  copyright: string;
 }>();
+
+// check if the disc is the last disc
+const isLastDisc = (disc: string | number) => {
+  const discs = Object.keys(props.discs);
+  return discs[discs.length - 1] === disc;
+};
 </script>
 
 <style lang="scss">

src/views/album/index.vue

@@ -4,7 +4,7 @@
       <Header :album="album.info" />
     </template>
     <template #content>
-      <Content :discs="album.discs" />
+      <Content :discs="album.discs" :copyright="album.info.copyright" />
     </template>
     <template #bottom>
       <Bottom