From 7a3f47d61001fd85e1421b32f781c429e8f1cc62 Mon Sep 17 00:00:00 2001
From: mwinter <mwinter@unboundedpress.org>
Date: Thu, 29 Jun 2023 02:11:34 +0200
Subject: [PATCH] clicking a score button now loads the soundcloud track if
 there is one

---
 portfolio-nuxt/components/IconButton.vue    |  6 +++++-
 portfolio-nuxt/layouts/default.vue          | 18 +++++++++++++++++-
 portfolio-nuxt/pages/[files]/[filename].vue | 14 +++++++++-----
 portfolio-nuxt/pages/index.vue              |  2 +-
 portfolio-nuxt/stores/AudioPlayerStore.js   |  7 ++++++-
 5 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/portfolio-nuxt/components/IconButton.vue b/portfolio-nuxt/components/IconButton.vue
index de1efd3..d61ea9e 100644
--- a/portfolio-nuxt/components/IconButton.vue
+++ b/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>
 
diff --git a/portfolio-nuxt/layouts/default.vue b/portfolio-nuxt/layouts/default.vue
index cc1a65d..505dc05 100644
--- a/portfolio-nuxt/layouts/default.vue
+++ b/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>
diff --git a/portfolio-nuxt/pages/[files]/[filename].vue b/portfolio-nuxt/pages/[files]/[filename].vue
index 998d115..e2e7e8d 100644
--- a/portfolio-nuxt/pages/[files]/[filename].vue
+++ b/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]
     }
   })
 
diff --git a/portfolio-nuxt/pages/index.vue b/portfolio-nuxt/pages/index.vue
index b446e90..0721eae 100644
--- a/portfolio-nuxt/pages/index.vue
+++ b/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>
diff --git a/portfolio-nuxt/stores/AudioPlayerStore.js b/portfolio-nuxt/stores/AudioPlayerStore.js
index 1244dcc..90dbc33 100644
--- a/portfolio-nuxt/stores/AudioPlayerStore.js
+++ b/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'
         }
       }
 })
\ No newline at end of file