From 62453e718856d2a0ce0a820253308e6584a35736 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Thu, 19 Feb 2026 01:58:44 +0100
Subject: [PATCH] Add SoundCloud player to PDF modal when audio available

---
 components/IconButton.vue | 2 +-
 layouts/default.vue       | 7 ++++++-
 stores/ModalStore.js      | 5 +++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index cb3c2ea..722203f 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -2,7 +2,7 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <button v-if="type === 'score'" @click="modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', link)" class="inline-flex p-1">
+            <button v-if="type === 'score'" @click="modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', link, work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : '')" class="inline-flex p-1">
                 <Icon name="ion:book-sharp" style="color: white" />
             </button>
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 974fcb6..2a2957a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -39,7 +39,12 @@
         <div v-if="modalStore.type === 'video'" class="w-full" :class="modalStore.aspect">
           <iframe :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
         </div>
-        <iframe v-if="modalStore.type === 'pdf'" :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0'" width="100%" height="100%" frameborder="0" class="max-h-[calc(85vh-2rem)]"></iframe>
+        <div v-if="modalStore.type === 'pdf'" class="flex flex-col h-full">
+          <iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0'" width="100%" height="100%" frameborder="0" :class="[modalStore.soundcloudUrl ? 'max-h-[calc(85vh-60px)]' : 'max-h-[calc(85vh-2rem)]', 'flex-grow']"></iframe>
+          <div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2">
+            <iframe :src="modalStore.soundcloudUrl" width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
+          </div>
+        </div>
         <div v-if="modalStore.type === 'pdf' || modalStore.type === 'image'" class="absolute bottom-2 right-2 z-10">
           <a :href="modalStore.type === 'pdf' ? modalStore.pdfUrl : '/' + modalStore.bucket + '/' + modalStore.gallery[0]?.image" target="_blank" rel="noopener noreferrer" class="p-2 bg-gray-600 rounded-lg inline-flex items-center justify-center">
             <Icon name="mdi:open-in-new" class="w-5 h-5 text-white" />
diff --git a/stores/ModalStore.js b/stores/ModalStore.js
index dc02f99..ccfa8a8 100644
--- a/stores/ModalStore.js
+++ b/stores/ModalStore.js
@@ -1,9 +1,9 @@
 import {defineStore} from "pinia";
 
 export const useModalStore = defineStore("ModalStore", {
-    state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid": "", "pdfUrl": ""}),
+    state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid": "", "pdfUrl": "", "soundcloudUrl": ""}),
     actions: {
-        setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl) {
+        setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl, soundcloudUrl) {
           this.type = type
           this.aspect = aspect
           this.isOpen = isOpen
@@ -11,6 +11,7 @@ export const useModalStore = defineStore("ModalStore", {
           this.gallery = gallery
           this.vimeo_trackid = vimeo_trackid
           this.pdfUrl = pdfUrl
+          this.soundcloudUrl = soundcloudUrl
         }
       }
 })
\ No newline at end of file