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

Add SoundCloud player to PDF modal when audio available

Browse source
This commit is contained in:
Michael Winter 2026-02-19 01:58:44 +01:00
parent 3c1dea94ce
commit 62453e7188
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/IconButton.vue
View file

@ -2,7 +2,7 @@
<div class="inline-flex p-1 min-w-[25px]"> <div class="inline-flex p-1 min-w-[25px]">
<div v-show="visible" class="bg-black rounded-full text-xs inline-flex" > <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" /> <Icon name="ion:book-sharp" style="color: white" />
</button> </button>

7
layouts/default.vue
View file

@ -39,7 +39,12 @@
<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>
<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"> <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"> <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" /> <Icon name="mdi:open-in-new" class="w-5 h-5 text-white" />

5
stores/ModalStore.js
View file

@ -1,9 +1,9 @@
import {defineStore} from "pinia"; import {defineStore} from "pinia";
export const useModalStore = defineStore("ModalStore", { 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: { actions: {
setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl) { setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl, soundcloudUrl) {
this.type = type this.type = type
this.aspect = aspect this.aspect = aspect
this.isOpen = isOpen this.isOpen = isOpen
@ -11,6 +11,7 @@ export const useModalStore = defineStore("ModalStore", {
this.gallery = gallery this.gallery = gallery
this.vimeo_trackid = vimeo_trackid this.vimeo_trackid = vimeo_trackid
this.pdfUrl = pdfUrl this.pdfUrl = pdfUrl
this.soundcloudUrl = soundcloudUrl
} }
} }
}) })