You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
3.5 KiB
Vue
78 lines
3.5 KiB
Vue
<template>
|
|
<div class="grid grid-cols-[63%,35%] w-full font-thin sticky top-0 bg-white p-2 z-20">
|
|
<div>
|
|
<div class="text-5xl p-2"> <NuxtLink to='/'>michael winter</NuxtLink></div>
|
|
<div class="inline-flex text-2xl ml-4">
|
|
<NuxtLink class="px-3" to='/'>works</NuxtLink>
|
|
<NuxtLink class="px-3" to='/events'>events</NuxtLink>
|
|
<NuxtLink class="px-3" to='/about'>about</NuxtLink>
|
|
<NuxtLink class="px-3" to='https://unboundedpress.org/code'>code</NuxtLink>
|
|
<NuxtLink class="px-3 block" to='https://unboundedpress.org/legacy'>legacy</NuxtLink>
|
|
</div>
|
|
|
|
<!-- hdp link while active -->
|
|
<!------
|
|
<div class="inline-flex text-2xl ml-4 font-bold">
|
|
<NuxtLink class="px-3" to='/a_history_of_the_domino_problem'>A HISTORY OF THE DOMINO PROBLEM | 17.11 - 01.12.2023 </NuxtLink>
|
|
</div>
|
|
--->
|
|
</div>
|
|
|
|
<!-- TODO: this needs to be automatically flipped off when there are no upcoming events-->
|
|
<div class="px-1 bg-zinc-100 rounded-lg text-center">
|
|
<div class="text-sm">upcoming events</div>
|
|
<EventSlider :upcoming_events="upcoming_events" class="max-w-[95%] min-h-[80%]"></EventSlider>
|
|
</div>
|
|
|
|
</div>
|
|
<slot /> <!-- required here only -->
|
|
<div class="fixed bottom-0 bg-white p-2 w-full flex justify-center z-20">
|
|
<iframe width="400rem" height="20px" 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>
|
|
</div>
|
|
|
|
<Modal v-model="modalStore.isOpen">
|
|
<ModalBody :class="modalStore.aspect">
|
|
<ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
|
|
<iframe v-if="modalStore.type === 'video'" :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
|
</ModalBody>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
|
|
import { useModalStore } from "@/stores/ModalStore"
|
|
|
|
const audioPlayerStore = useAudioPlayerStore()
|
|
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]
|
|
}
|
|
})
|
|
}
|
|
|
|
//const today = Date.now(); //annoying this does not work
|
|
const today = 1715247305793;
|
|
const { data: upcoming_events } = await useFetch("https://unboundedpress.org/api/events?filter={'start_date':{'$gte':{'$date':" + today + "}}}", {
|
|
transform: (upcoming_events) => {
|
|
for (const event of upcoming_events) {
|
|
let date = new Date(event.start_date.$date)
|
|
event.formatted_date = ("0" + (date.getMonth() + 1)).slice(-2) + "." + ("0" + date.getDate()).slice(-2) + "." + date.getFullYear()
|
|
}
|
|
return upcoming_events.sort((a,b) => a.start_date.$date - b.start_date.$date)
|
|
}
|
|
})
|
|
|
|
</script>
|