mwinter/portfolio
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add SoundCloud player to image modal when audio available

Browse source
This commit is contained in:
Michael Winter 2026-02-19 02:09:33 +01:00
parent 62453e7188
commit 9d1391eae0
2 changed files with 4 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/IconButton.vue
View file

@ -30,7 +30,7 @@
<Icon name="fluent:video-48-filled" style="color: white" /> <Icon name="fluent:video-48-filled" style="color: white" />
</button> </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" /> <Icon name="mdi:camera" style="color: white" />
</button> </button>

3
layouts/default.vue
View file

@ -36,6 +36,9 @@
<Modal v-model="modalStore.isOpen"> <Modal v-model="modalStore.isOpen">
<ModalBody :class="modalStore.aspect"> <ModalBody :class="modalStore.aspect">
<ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider> <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"> <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> <iframe :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div> </div>