189 lines
8 KiB
Vue
189 lines
8 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-white">
|
|
<!-- Mobile header -->
|
|
<header class="sticky top-0 bg-white z-40 border-b border-gray-200 lg:hidden">
|
|
<div class="max-w-7xl mx-auto px-4 py-2 flex items-center justify-between gap-4">
|
|
<Menu />
|
|
<h1 class="text-lg md:text-2xl whitespace-nowrap">
|
|
<NuxtLink to='/' class="hover:underline">michael winter</NuxtLink>
|
|
</h1>
|
|
<div class="flex-1 text-right text-lg md:text-xl">{{ pageTitle }}</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Desktop header -->
|
|
<header class="sticky top-0 bg-white z-40 border-b border-gray-200 hidden lg:block">
|
|
<div class="w-full px-4 py-2 flex items-center justify-between">
|
|
<h1 class="text-lg md:text-2xl whitespace-nowrap">
|
|
<NuxtLink to='/' class="hover:underline">michael winter</NuxtLink>
|
|
</h1>
|
|
<div class="text-lg md:text-xl">{{ pageTitle }}</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="flex">
|
|
<!-- Sidebar for wide screens -->
|
|
<aside class="hidden lg:block w-48 flex-shrink-0 border-r border-gray-200 p-4 pt-12 sticky self-start top-12 z-20">
|
|
<nav class="space-y-4 ml-4">
|
|
<div>
|
|
<p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Works</p>
|
|
<div class="space-y-2 ml-2">
|
|
<NuxtLink to="/pieces" class="block hover:underline">pieces</NuxtLink>
|
|
<NuxtLink to="/writings" class="block hover:underline">writings</NuxtLink>
|
|
<NuxtLink to="/albums" class="block hover:underline">albums</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Events</p>
|
|
<div class="space-y-2 ml-2">
|
|
<NuxtLink to="/performances" class="block hover:underline">performances</NuxtLink>
|
|
<NuxtLink to="/lectures" class="block hover:underline">lectures</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<NuxtLink to="/about" class="block hover:underline">about</NuxtLink>
|
|
<a href="https://unboundedpress.org/code" target="_blank" class="block hover:underline">code</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<div class="flex-1">
|
|
<main class="max-w-7xl mx-auto px-4 py-8">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<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'"
|
|
class="w-64"
|
|
height="20px"
|
|
scrolling="no"
|
|
frameborder="no"
|
|
: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>
|
|
|
|
<SimpleModal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
|
|
<div class="flex flex-col h-full overflow-hidden relative p-4">
|
|
<!-- Navigation buttons for images - fixed to modal -->
|
|
<template v-if="modalStore.type === 'image' && modalStore.gallery && modalStore.gallery.length > 1">
|
|
<button @click="prevImage" class="absolute left-2 top-1/2 -translate-y-1/2 z-20 text-gray-600 hover:text-gray-900">
|
|
<Icon name="mdi:chevron-left" class="w-10 h-10" />
|
|
</button>
|
|
<button @click="nextImage" class="absolute right-2 top-1/2 -translate-y-1/2 z-20 text-gray-600 hover:text-gray-900">
|
|
<Icon name="mdi:chevron-right" class="w-10 h-10" />
|
|
</button>
|
|
</template>
|
|
|
|
<div v-if="modalStore.type === 'image'" class="flex-1 flex items-center justify-center min-h-0">
|
|
<ImageViewer :bucket="modalStore.bucket" :gallery="modalStore.gallery" :initialIndex="modalStore.initialIndex"></ImageViewer>
|
|
</div>
|
|
<div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
|
|
<ClientOnly>
|
|
<iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
|
|
</ClientOnly>
|
|
</div>
|
|
<div v-if="modalStore.type === 'video'" class="w-full h-full flex items-center justify-center">
|
|
<ClientOnly>
|
|
<iframe
|
|
:src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid"
|
|
width="100%"
|
|
height="100%"
|
|
frameborder="0"
|
|
webkitallowfullscreen
|
|
mozallowfullscreen
|
|
allowfullscreen
|
|
class="w-full h-full block"
|
|
></iframe>
|
|
</ClientOnly>
|
|
</div>
|
|
<div v-if="modalStore.type === 'document'" class="w-full flex flex-col h-[70vh]">
|
|
<ClientOnly>
|
|
<iframe :src="modalStore.iframeUrl" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>
|
|
</ClientOnly>
|
|
</div>
|
|
<div v-if="modalStore.type === 'pdf'" class="w-full h-full flex flex-col">
|
|
<ClientOnly>
|
|
<iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" class="flex-1"></iframe>
|
|
</ClientOnly>
|
|
<div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2">
|
|
<ClientOnly>
|
|
<iframe :src="modalStore.soundcloudUrl" class="w-64" 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-4 right-4 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>
|
|
</div>
|
|
</SimpleModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
|
|
import { useModalStore } from "@/stores/ModalStore"
|
|
import { onMounted, computed, ref } from "vue"
|
|
|
|
const audioPlayerStore = useAudioPlayerStore()
|
|
const modalStore = useModalStore()
|
|
|
|
const currentImageIndex = ref(0)
|
|
|
|
const prevImage = () => {
|
|
if (modalStore.gallery && modalStore.gallery.length > 0) {
|
|
currentImageIndex.value = (currentImageIndex.value - 1 + modalStore.gallery.length) % modalStore.gallery.length
|
|
modalStore.initialIndex = currentImageIndex.value
|
|
}
|
|
}
|
|
|
|
const nextImage = () => {
|
|
if (modalStore.gallery && modalStore.gallery.length > 0) {
|
|
currentImageIndex.value = (currentImageIndex.value + 1) % modalStore.gallery.length
|
|
modalStore.initialIndex = currentImageIndex.value
|
|
}
|
|
}
|
|
|
|
watch(() => modalStore.isOpen, (isOpen) => {
|
|
if (isOpen) {
|
|
currentImageIndex.value = modalStore.initialIndex || 0
|
|
}
|
|
})
|
|
|
|
const route = useRoute()
|
|
|
|
const pageTitle = computed(() => {
|
|
const path = route.path
|
|
if (path === '/' || path === '/pieces') return 'pieces'
|
|
if (path === '/writings') return 'writings'
|
|
if (path === '/albums') return 'albums'
|
|
if (path === '/performances') return 'performances'
|
|
if (path === '/lectures') return 'lectures'
|
|
if (path === '/about') return 'about'
|
|
if (path.startsWith('/works/')) return 'works'
|
|
return ''
|
|
})
|
|
|
|
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>
|