clicking a score button now loads the soundcloud track if there is one

main
mwinter 1 year ago
parent 0eb34a549e
commit 7a3f47d610

@ -2,7 +2,11 @@
<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" >
<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" /> <Icon name="ion:book-sharp" color="white" />
</NuxtLink> </NuxtLink>

@ -16,7 +16,7 @@
</div> </div>
<slot /> <!-- required here only --> <slot /> <!-- required here only -->
<div class="sticky bottom-0 bg-white p-2 flex justify-center z-20"> <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> :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> </div>
@ -35,4 +35,20 @@
const audioPlayerStore = useAudioPlayerStore() const audioPlayerStore = useAudioPlayerStore()
const modalStore = useModalStore() 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> </script>

@ -1,19 +1,23 @@
<template> <template>
<div class="flex min-h-full items-center justify-center text-center"> <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]"/> <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/' + metadata._id.$oid + '/binary'" class="w-[85%]"/> <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> </div>
</template> </template>
<script setup> <script setup>
import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
const audioPlayerStore = useAudioPlayerStore()
const route = useRoute() 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, //lazy: true,
//server: false, //server: false,
transform: (metadata) => { transform: (file_metadata) => {
return metadata[0] return file_metadata[0]
} }
}) })

@ -12,7 +12,7 @@
<div class="inline-flex"> <div class="inline-flex">
<div> <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>
<div> <div>

@ -4,7 +4,12 @@ export const useAudioPlayerStore = defineStore("AudioPlayerStore", {
state: () => ({"soundcloud_trackid": "1032587794"}), state: () => ({"soundcloud_trackid": "1032587794"}),
actions: { actions: {
setSoundCloudTrackID(trackid) { setSoundCloudTrackID(trackid) {
this.soundcloud_trackid = trackid if (typeof trackid !== 'undefined') {
this.soundcloud_trackid = trackid
}
},
clearSoundCloudTrackID() {
this.soundcloud_trackid = 'undefined'
} }
} }
}) })
Loading…
Cancel
Save