281 lines
8.9 KiB
Vue
281 lines
8.9 KiB
Vue
<template>
|
|
<div class="bg-black">
|
|
<div class="w-full flex justify-center">
|
|
<nav class="[&>*]:p-2 text-white bottom-0 right-0 fixed flex justify-center z-50">
|
|
<a href="https://www.youtube.com/channel/UCATtFHnOLDCv8qroi2KW3ZA" target="about:blank" class="mt-1">
|
|
<img src="/youtube.svg" alt="ho no" />
|
|
</a>
|
|
<a href="mailto:contact@evilspins.com">📬</a>
|
|
<a href="/about">❓</a>
|
|
</nav>
|
|
</div>
|
|
<section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer()">
|
|
<figure class="ui">
|
|
<img class="logo" src="/logo.svg">
|
|
<button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
|
|
↓
|
|
</button>
|
|
</figure>
|
|
<div class="shadow screen" />
|
|
<video class="animation screen" loop autoplay muted ref="animation">
|
|
<source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
|
|
<source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
|
|
media="all and (max-width: 640px)">
|
|
</video>
|
|
<div class="mix hide bg-black w-full screen overflow-scroll flex items-center flex-col">
|
|
<button class="button button--close m-4 flex justify-center items-center z-50" @click="closePlayer()">
|
|
<svg width="20px" height="30px">
|
|
<line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" />
|
|
<line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" />
|
|
</svg>
|
|
</button>
|
|
<video class="mixPlayer w-full" controls ref="mixPlayer">
|
|
<!-- <source :src="mixPlayerSourceHD" type="video/mp4"> -->
|
|
<source :src="mixPlayerSourceSD" type="video/mp4">
|
|
</video>
|
|
<nav class="text-esyellow w-full flex">
|
|
<button v-for="(track, index) in currentCompilationTracks" @click="listenTo(track.start)"
|
|
class="border-l-wihte-400 border-l-2 flex-grow hover:bg-esyellow hover:text-black"
|
|
:class="{ 'border-l-0': index === 0 }">
|
|
<span class="block">
|
|
{{ index + 1 }}
|
|
</span>
|
|
<!-- <span class="hidden lg:block">
|
|
{{ track.title }}
|
|
</span> -->
|
|
<!-- {{ track.title }} {{ track.name }} -->
|
|
</button>
|
|
</nav>
|
|
<article class="text-white p-8 max-w-5xl">
|
|
<div class="flex items-center">
|
|
<div class="mr-4">
|
|
<img class="flex-grow-0" :src="'https://f4.bcbits.com/img/' + currentCover + '_8.jpg'" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-5xl">
|
|
{{ currentTitle }}
|
|
</h3>
|
|
<h2 class="font-bold text-6xl text-esyellow">
|
|
{{ currentArtist.name }}
|
|
</h2>
|
|
<h4 class="text-xl text-slate-200">
|
|
{{ currentCompilationName }}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="block mt-10">
|
|
see artist page:<br>
|
|
<a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="currentLink">
|
|
{{ currentArtist.url }}
|
|
</a><br>
|
|
purchace the track:<br>
|
|
<a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="currentLink">
|
|
{{ currentLink }}
|
|
</a><br>
|
|
<br>
|
|
</p>
|
|
</article>
|
|
<section class=" bg-black">
|
|
<zero-a @click="play('ES00A')" class="w-40">
|
|
<button class="button absolute object-center p-4 flex justify-center items-center">
|
|
<svg width="40px" height="30px">
|
|
<polygon points="0,0 0,30 30,15" />
|
|
</svg>
|
|
</button>
|
|
</zero-a>
|
|
<zero-b @click="play('ES00B')" class="w-40"></zero-b>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
<section class="flex justify-center">
|
|
<div class="flex max-w-2xl">
|
|
<zero-a @click="play('ES00A')">
|
|
<button class="button absolute object-center p-4 flex justify-center items-center">
|
|
<svg width="40px" height="30px">
|
|
<polygon points="0,0 0,30 30,15" />
|
|
</svg>
|
|
</button>
|
|
</zero-a>
|
|
<zero-b @click="play('ES00B')"></zero-b>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
// SEO
|
|
useSeoMeta({
|
|
title: 'evilSpins, compilations indépendantes',
|
|
ogTitle: 'evilSpins, compilations indépendantes',
|
|
description: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
|
|
ogDescription: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
|
|
ogImage: 'https://evilspins.com/logo.svg'
|
|
})
|
|
|
|
interface Compilation {
|
|
id: string,
|
|
name: string,
|
|
duration: number,
|
|
}
|
|
|
|
// animate player
|
|
const mixPlayer = ref()
|
|
const mixPlayerSourceHD = ref('')
|
|
const mixPlayerSourceSD = ref('')
|
|
|
|
const currentCompilationId = ref('')
|
|
const currentCompilationName = ref('')
|
|
const currentCompilationTracks = ref({})
|
|
const currentArtist = ref('')
|
|
const currentTitle = ref('')
|
|
const currentLink = ref('')
|
|
const currentCover = ref('')
|
|
|
|
const play = (id: string) => {
|
|
document.body.style.overflow = 'hidden' // Block scrolling
|
|
currentCompilationId.value = id
|
|
mixPlayerSourceHD.value = 'https://files.erudi.fr/evilspins/' + currentCompilationId.value + '-HD.mp4'
|
|
mixPlayerSourceSD.value = 'https://files.erudi.fr/evilspins/' + currentCompilationId.value + '-SD.mp4'
|
|
|
|
fadeOut(document.querySelector('.button'))
|
|
fadeOut(document.querySelector('.logo'))
|
|
fadeOut(document.querySelector('.animation'))
|
|
fadeIn(document.querySelector('.mix'))
|
|
fadeOut(document.querySelector('.shadow'))
|
|
mixPlayer.value.load()
|
|
mixPlayer.value.play()
|
|
mixPlayer.value.focus()
|
|
}
|
|
|
|
const closePlayer = () => {
|
|
fadeIn(document.querySelector('.animation'))
|
|
fadeIn(document.querySelector('.button'))
|
|
fadeIn(document.querySelector('.logo'))
|
|
fadeOut(document.querySelector('.mix'))
|
|
fadeIn(document.querySelector('.shadow'))
|
|
mixPlayer.value.pause()
|
|
document.body.style.overflow = '' // Reset scroll when closing
|
|
}
|
|
|
|
const listenTo = (timeToPlay: number) => {
|
|
mixPlayer.value.currentTime = timeToPlay
|
|
mixPlayer.value.play()
|
|
}
|
|
|
|
const fadeOut = (elt: HTMLElement) => {
|
|
elt.classList.add('hide')
|
|
}
|
|
const fadeIn = (elt: HTMLElement) => {
|
|
elt.classList.remove('hide')
|
|
}
|
|
|
|
const scrollDown = function () {
|
|
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
|
|
}
|
|
|
|
// load data
|
|
const { data: tracksData } = await useFetch('/api/tracks')
|
|
const { data: artistsData } = await useFetch('/api/artists')
|
|
const { data: stylesData } = await useFetch('/api/styles')
|
|
const { data: compilationsData } = await useFetch('/api/compilations')
|
|
|
|
onMounted(() => {
|
|
setInterval(() => {
|
|
if (mixPlayer.value && currentCompilationId.value) {
|
|
const compilations = JSON.parse(JSON.stringify(compilationsData.value))
|
|
const tracks = JSON.parse(JSON.stringify(tracksData.value))
|
|
const artists = JSON.parse(JSON.stringify(artistsData.value))
|
|
compilations.map((compilation: Compilation) => {
|
|
if (compilation.id === currentCompilationId.value) {
|
|
currentCompilationName.value = compilations.find((compilation: { id: string; }) => compilation.id === currentCompilationId.value).name
|
|
currentCompilationTracks.value = tracks.filter((track: { compilation: string; }) => track.compilation === compilation.id)
|
|
const currentTrack = currentCompilationTracks.value.find((track: { start: number; }, index: number) => {
|
|
const nextTrackStart = currentCompilationTracks.value[index + 1]?.start ?? Infinity
|
|
return track.start <= mixPlayer.value.currentTime && mixPlayer.value.currentTime < nextTrackStart
|
|
})
|
|
currentArtist.value = artists.find((artist: { id: any; }) => artist.id === currentTrack.artist)
|
|
currentTitle.value = currentTrack.title
|
|
currentLink.value = currentTrack.link
|
|
currentCover.value = currentTrack.cover
|
|
}
|
|
})
|
|
}
|
|
}, 1000)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
body {
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.logo,
|
|
.button,
|
|
.shadow,
|
|
.animation,
|
|
.mix {
|
|
transition: .7s opacity;
|
|
}
|
|
|
|
.screen {
|
|
position: absolute;
|
|
height: 100vh;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.splash-screen {
|
|
position: relative;
|
|
height: 100vh;
|
|
background-color: black;
|
|
}
|
|
|
|
.animation {
|
|
z-index: 1;
|
|
object-fit: cover;
|
|
opacity: .8;
|
|
/* opacity: 0; */
|
|
}
|
|
|
|
.mix {
|
|
z-index: 4;
|
|
position: fixed;
|
|
}
|
|
|
|
.shadow {
|
|
z-index: 3;
|
|
box-shadow: rgb(0, 0, 0) 0px 0px 170px 70px inset;
|
|
opacity: .9;
|
|
}
|
|
|
|
.ui {
|
|
z-index: 4;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
max-width: 80%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
|
|
}
|
|
|
|
.mixPlayer {
|
|
background: black;
|
|
max-height: 70vh;
|
|
}
|
|
|
|
.hide {
|
|
opacity: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.show {
|
|
opacity: 1;
|
|
}
|
|
</style> |