clicking a score button now loads the soundcloud track if there is one

portfolio-nuxt/components/IconButton.vue

@@ -2,7 +2,11 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <NuxtLink v-if="type === 'document'" class="inline-flex p-1" :to="link">
+            <NuxtLink @click.native="audioPlayerStore.setSoundCloudTrackID(work.soundcloud_trackid)" v-if="type === 'score'" class="inline-flex p-1" :to="link">
+                <Icon name="ion:book-sharp" color="white" />
+            </NuxtLink>
+
+            <NuxtLink v-else-if="type === 'document'" class="inline-flex p-1" :to="link">
                 <Icon name="ion:book-sharp" color="white" />
             </NuxtLink>
 

portfolio-nuxt/layouts/default.vue

@@ -16,7 +16,7 @@
   </div>
   <slot /> <!-- required here only -->
   <div class="sticky bottom-0 bg-white p-2 flex justify-center z-20">
-    <iframe width="400rem" height="20" scrolling="no" frameborder="no" allow="autoplay" 
+    <iframe width="400rem" height="20" scrolling="no" frameborder="no" allow="autoplay" v-if="audioPlayerStore.soundcloud_trackid !== 'undefined'"
     :src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + audioPlayerStore.soundcloud_trackid + '&inverse=false&auto_play=true&show_user=false'"></iframe>
   </div>
 
@@ -35,4 +35,20 @@
   const audioPlayerStore = useAudioPlayerStore()
   const modalStore = useModalStore()
 
+  const route = useRoute()
+
+  if(route.params.files == 'scores') {
+    const { data: work } = await useFetch('https://unboundedpress.org/api/works?filter={"score":"' + route.params.filename + '"}', {
+      transform: (work) => {
+
+          if(work[0].soundcloud_trackid){
+            audioPlayerStore.setSoundCloudTrackID(work[0].soundcloud_trackid)
+          } else {
+            audioPlayerStore.clearSoundCloudTrackID()
+          }
+          return work[0]
+      }
+    })
+  }
+
 </script>

portfolio-nuxt/pages/[files]/[filename].vue

@@ -1,19 +1,23 @@
 <template>
     <div class="flex min-h-full items-center justify-center text-center">
-        <embed v-if="route.params.filename.split('.').pop()==='pdf'" :src="'https://unboundedpress.org/api/' + route.params.files + '.files/' + metadata._id.$oid + '/binary'" class="w-[85%] h-[88vh]"/>
-        <nuxt-img v-else-if="route.params.filename.split('.').pop()==='jpg'" :src="'https://unboundedpress.org/api/' + route.params.files + '.files/' + metadata._id.$oid + '/binary'" class="w-[85%]"/>
+        <embed v-if="route.params.filename.split('.').pop()==='pdf'" :src="'https://unboundedpress.org/api/' + route.params.files + '.files/' + file_metadata._id.$oid + '/binary'" class="w-[85%] h-[88vh]"/>
+        <nuxt-img v-else-if="route.params.filename.split('.').pop()==='jpg'" :src="'https://unboundedpress.org/api/' + route.params.files + '.files/' + file_metadata._id.$oid + '/binary'" class="w-[85%]"/>
     </div>
 </template>
 
 <script setup>
 
+import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
+
+const audioPlayerStore = useAudioPlayerStore()
+
 const route = useRoute()
 
-const { data: metadata } = await useFetch('https://unboundedpress.org/api/' + route.params.files + '.files?filter={"filename":"' + route.params.filename + '"}', {
+const { data: file_metadata } = await useFetch('https://unboundedpress.org/api/' + route.params.files + '.files?filter={"filename":"' + route.params.filename + '"}', {
     //lazy: true,
     //server: false,
-    transform: (metadata) => {
-        return metadata[0]
+    transform: (file_metadata) => {
+        return file_metadata[0]
     }
   })
 

portfolio-nuxt/pages/index.vue

@@ -12,7 +12,7 @@
             <div class="inline-flex">
 
               <div>
-                <IconButton :visible="work.score" type="document" :work="work" :link="work.score" class="inline-flex p-1"></IconButton>
+                <IconButton :visible="work.score" type="score" :work="work" :link="work.score" class="inline-flex p-1"></IconButton>
               </div>
 
               <div>

portfolio-nuxt/stores/AudioPlayerStore.js

@@ -4,7 +4,12 @@ export const useAudioPlayerStore = defineStore("AudioPlayerStore", {
     state: () => ({"soundcloud_trackid": "1032587794"}),
     actions: {
         setSoundCloudTrackID(trackid) {
-          this.soundcloud_trackid = trackid
+          if (typeof trackid !== 'undefined') {
+            this.soundcloud_trackid = trackid
+          }
+        },
+        clearSoundCloudTrackID() {
+          this.soundcloud_trackid = 'undefined'
         }
       }
 })