95 lines
4.4 KiB
Vue
95 lines
4.4 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-white">
|
|
<header class="sticky top-0 bg-white z-40 border-b border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-center">
|
|
<h1 class="text-2xl">
|
|
<NuxtLink to='/' class="hover:underline">michael winter</NuxtLink>
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<Menu />
|
|
|
|
<main class="max-w-7xl mx-auto px-4 py-8">
|
|
<slot />
|
|
</main>
|
|
|
|
<footer class="fixed bottom-0 bg-white border-t border-gray-200 p-2 w-full flex justify-center z-30">
|
|
<ClientOnly>
|
|
<iframe
|
|
v-if="audioPlayerStore.soundcloud_trackid !== 'undefined'"
|
|
width="400rem"
|
|
height="20px"
|
|
scrolling="no"
|
|
frameborder="no"
|
|
allow="autoplay"
|
|
: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>
|
|
</ClientOnly>
|
|
</footer>
|
|
|
|
<Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
|
|
<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">
|
|
<ClientOnly>
|
|
<iframe :src="modalStore.soundcloudUrl" width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
|
|
</ClientOnly>
|
|
</div>
|
|
<div v-if="modalStore.type === 'video'" :class="modalStore.aspect" class="w-full h-full flex items-center justify-center p-4">
|
|
<ClientOnly>
|
|
<iframe :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="max-w-full max-h-full"></iframe>
|
|
</ClientOnly>
|
|
</div>
|
|
<div v-if="modalStore.type === 'document'" class="w-full flex flex-col" style="height: calc(85vh - 4rem)">
|
|
<ClientOnly>
|
|
<iframe :src="modalStore.iframeUrl" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>
|
|
</ClientOnly>
|
|
</div>
|
|
<div v-if="modalStore.type === 'pdf'" class="flex flex-col h-full">
|
|
<ClientOnly>
|
|
<iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" :class="[modalStore.soundcloudUrl ? 'max-h-[calc(85vh-60px)]' : 'max-h-[calc(85vh-2rem)]', 'flex-grow']"></iframe>
|
|
</ClientOnly>
|
|
<div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2">
|
|
<ClientOnly>
|
|
<iframe :src="modalStore.soundcloudUrl" width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
<div v-if="modalStore.type === 'pdf' || modalStore.type === 'image' || modalStore.type === 'document'" class="absolute bottom-2 right-2 z-10">
|
|
<a :href="modalStore.type === 'pdf' ? modalStore.pdfUrl : modalStore.type === 'image' ? '/' + modalStore.bucket + '/' + modalStore.gallery[0]?.image : modalStore.type === 'document' ? modalStore.iframeUrl : undefined" target="_blank" rel="noopener noreferrer" class="p-2 bg-gray-600 rounded-lg inline-flex items-center justify-center pointer-events-auto">
|
|
<Icon name="mdi:open-in-new" class="w-5 h-5 text-white" />
|
|
</a>
|
|
</div>
|
|
</ModalBody>
|
|
</Modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
|
|
import { useModalStore } from "@/stores/ModalStore"
|
|
import { onMounted } from "vue"
|
|
|
|
const audioPlayerStore = useAudioPlayerStore()
|
|
const modalStore = useModalStore()
|
|
|
|
const route = useRoute()
|
|
|
|
onMounted(() => {
|
|
if(route.params.files == 'scores') {
|
|
useFetch('/api/works', {
|
|
transform: (works) => {
|
|
return works.find(w => w.score === route.params.filename)
|
|
}
|
|
}).then(({ data }) => {
|
|
if(data.value?.soundcloud_trackid){
|
|
audioPlayerStore.setSoundCloudTrackID(data.value.soundcloud_trackid)
|
|
} else {
|
|
audioPlayerStore.clearSoundCloudTrackID()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
</script>
|