From 9d1391eae059c2e27945555450f598ca1f7dbdaa Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Thu, 19 Feb 2026 02:09:33 +0100
Subject: [PATCH] Add SoundCloud player to image modal when audio available

---
 components/IconButton.vue | 2 +-
 layouts/default.vue       | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index 722203f..d2b48d6 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -30,7 +30,7 @@
                 <Icon name="fluent:video-48-filled" style="color: white" />
             </button>
 
-            <button @click="modalStore.setModalProps('image', 'aspect-auto', true, 'images', work.gallery, '')" v-else="type === 'image'" class="inline-flex p-1">
+            <button @click="modalStore.setModalProps('image', 'aspect-auto', true, 'images', work.gallery, '', '', work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : '')" v-else="type === 'image'" class="inline-flex p-1">
                 <Icon name="mdi:camera" style="color: white" />
             </button>
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 2a2957a..8843e44 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -36,6 +36,9 @@
   <Modal v-model="modalStore.isOpen">
       <ModalBody :class="modalStore.aspect">
         <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
+        <div v-if="modalStore.type === 'image' && 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 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>