Update works page with new layout; fix audio player to only autoplay on click
This commit is contained in:
parent
be041de733
commit
69fab67601
|
|
@ -22,7 +22,6 @@
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@
|
|||
</span>
|
||||
|
||||
<div class="flex gap-1">
|
||||
<IconButton v-if="work.score" type="score" :work="work" :link="work.score"></IconButton>
|
||||
<IconButton v-if="work.soundcloud_trackid" type="audio" :work="work"></IconButton>
|
||||
<IconButton v-if="work.vimeo_trackid" type="video" :work="work"></IconButton>
|
||||
<IconButton v-if="work.gallery" type="image" :work="work"></IconButton>
|
||||
<IconButton v-if="work.score" type="score" :work="work" :link="work.score" :visible="true"></IconButton>
|
||||
<IconButton v-if="work.soundcloud_trackid" type="audio" :work="work" :visible="true"></IconButton>
|
||||
<IconButton v-if="work.vimeo_trackid" type="video" :work="work" :visible="true"></IconButton>
|
||||
<IconButton v-if="work.gallery" type="image" :work="work" :visible="true"></IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,81 @@
|
|||
<template>
|
||||
<div class="bg-zinc-100 rounded-lg mx-5 mt-5 p-5">
|
||||
<div>
|
||||
<div v-if="work">
|
||||
<div class="sticky top-[100px] z-10 bg-zinc-100 pb-4 pt-2">
|
||||
<div class="max-w-[800px] mx-auto">
|
||||
<h1 class="text-4xl italic text-center mb-4" v-html="work.title"></h1>
|
||||
|
||||
<nav class="flex gap-4 mb-6">
|
||||
<a v-if="work.vimeo_trackid" href="#video" class="hover:underline">Video</a>
|
||||
<a v-if="gallery && gallery.length" href="#images" class="hover:underline">Images</a>
|
||||
<a v-if="scoreUrl" href="#score" class="hover:underline">Score</a>
|
||||
</nav>
|
||||
<div class="sticky top-[64px] bg-white z-30 border-b border-gray-200">
|
||||
<div class="max-w-3xl mx-auto px-4">
|
||||
<div class="flex items-center justify-between py-1">
|
||||
<div class="flex items-baseline gap-1">
|
||||
<h1 class="text-xl italic" v-html="work.title"></h1>
|
||||
<span class="text-sm text-gray-500">({{ year }})</span>
|
||||
</div>
|
||||
<nav class="flex items-center gap-4 text-sm">
|
||||
<a
|
||||
v-for="item in navItems"
|
||||
:key="item.href"
|
||||
:href="item.href"
|
||||
class="hover:underline"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a>
|
||||
<NuxtLink to="/pieces" class="text-gray-500 hover:text-gray-700">
|
||||
<Icon name="mdi:arrow-u-left-top" class="w-4 h-4 translate-y-0.5" />
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[800px] mx-auto">
|
||||
<div id="video" v-if="work.vimeo_trackid" class="mb-8 scroll-mt-[280px]">
|
||||
<iframe :src="'https://player.vimeo.com/video/' + work.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="w-full aspect-video"></iframe>
|
||||
<div class="max-w-3xl mx-auto space-y-8 px-4 pt-6">
|
||||
<div v-if="work.soundcloud_trackid" id="audio">
|
||||
<h2 class="text-lg mb-4 border-b border-gray-200 pb-2">Audio</h2>
|
||||
<iframe
|
||||
:src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true'"
|
||||
width="100%"
|
||||
height="150"
|
||||
scrolling="no"
|
||||
frameborder="no"
|
||||
allow="autoplay"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div id="images" v-if="gallery && gallery.length" class="mb-8 scroll-mt-[280px]">
|
||||
<ImageSlider :bucket="'images'" :gallery="gallery"></ImageSlider>
|
||||
<div v-if="work.vimeo_trackid" id="video">
|
||||
<h2 class="text-lg mb-4 border-b border-gray-200 pb-2">Video</h2>
|
||||
<iframe
|
||||
:src="'https://player.vimeo.com/video/' + work.vimeo_trackid"
|
||||
width="100%"
|
||||
height="400"
|
||||
frameborder="0"
|
||||
webkitallowfullscreen
|
||||
mozallowfullscreen
|
||||
allowfullscreen
|
||||
class="w-full aspect-video"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div id="score" v-if="scoreUrl" class="mb-8 scroll-mt-[280px]">
|
||||
<iframe :src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'" class="w-full h-[85vh] border"></iframe>
|
||||
<div v-if="gallery?.length" id="images">
|
||||
<h2 class="text-lg mb-4 border-b border-gray-200 pb-2">Images</h2>
|
||||
<div :class="gallery.length === 1 ? 'grid grid-cols-1' : 'grid grid-cols-2 gap-4'">
|
||||
<button
|
||||
v-for="(img, index) in gallery"
|
||||
:key="index"
|
||||
@click="openImageModal(index)"
|
||||
class="block w-full relative overflow-hidden group"
|
||||
>
|
||||
<nuxt-img
|
||||
:src="'/images/' + img.image"
|
||||
:alt="work.title"
|
||||
class="w-full aspect-[4/3] object-cover transition-opacity duration-200 group-hover:opacity-50"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="scoreUrl" id="score">
|
||||
<h2 class="text-lg mb-4 border-b border-gray-200 pb-2">Score</h2>
|
||||
<iframe
|
||||
:src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'"
|
||||
class="w-full h-[80vh] border border-gray-200"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,10 +86,10 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
|
||||
import { useModalStore } from "@/stores/ModalStore"
|
||||
|
||||
const route = useRoute()
|
||||
const audioPlayerStore = useAudioPlayerStore()
|
||||
const modalStore = useModalStore()
|
||||
const slug = route.params.slug
|
||||
|
||||
const slugify = (title) => {
|
||||
|
|
@ -54,6 +106,11 @@ const work = computed(() => {
|
|||
return works.value.find(w => slugify(w.title) === slug)
|
||||
})
|
||||
|
||||
const year = computed(() => {
|
||||
if (!work.value?.date) return ''
|
||||
return new Date(work.value.date).getFullYear()
|
||||
})
|
||||
|
||||
const scoreUrl = computed(() => {
|
||||
if (!work.value?.score) return null
|
||||
if (work.value.score.startsWith('/scores/')) {
|
||||
|
|
@ -69,23 +126,27 @@ const gallery = computed(() => {
|
|||
}))
|
||||
})
|
||||
|
||||
const itemCount = computed(() => {
|
||||
let count = 0
|
||||
if (work.value?.vimeo_trackid) count++
|
||||
if (gallery.value?.length) count++
|
||||
if (scoreUrl.value) count++
|
||||
return count
|
||||
const navItems = computed(() => {
|
||||
const items = []
|
||||
if (work.value?.soundcloud_trackid) items.push({ label: 'Audio', href: '#audio' })
|
||||
if (work.value?.vimeo_trackid) items.push({ label: 'Video', href: '#video' })
|
||||
if (gallery.value?.length) items.push({ label: 'Images', href: '#images' })
|
||||
if (scoreUrl.value) items.push({ label: 'Score', href: '#score' })
|
||||
return items
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (work.value?.soundcloud_trackid) {
|
||||
audioPlayerStore.setSoundCloudTrackID(work.value.soundcloud_trackid)
|
||||
}
|
||||
const openImageModal = (index) => {
|
||||
modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '')
|
||||
}
|
||||
|
||||
useHead({
|
||||
titleTemplate: () => work.value ? `Michael Winter - ${work.value.title}` : 'Michael Winter'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
import {defineStore} from "pinia";
|
||||
|
||||
export const useAudioPlayerStore = defineStore("AudioPlayerStore", {
|
||||
state: () => ({"soundcloud_trackid": "1032587794"}),
|
||||
state: () => ({
|
||||
"soundcloud_trackid": "undefined",
|
||||
"currentTrackTitle": ""
|
||||
}),
|
||||
actions: {
|
||||
setSoundCloudTrackID(trackid) {
|
||||
setSoundCloudTrackID(trackid, title = "") {
|
||||
if (typeof trackid !== 'undefined') {
|
||||
this.soundcloud_trackid = trackid
|
||||
this.currentTrackTitle = title
|
||||
}
|
||||
},
|
||||
clearSoundCloudTrackID() {
|
||||
this.soundcloud_trackid = 'undefined'
|
||||
this.currentTrackTitle = ""
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in a new issue