evilspins/pages/index.vue

<template>
  <section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer" @keydown.enter="play()">
    <figure class="ui">
      <!-- <ul>
          <li>
            <a href="mailto:contact@evilspins.com">contact</a>
            <a href="/newsletter">newsletter</a>
            <a href="/infos">?</a>
          </li>
        </ul> -->
      <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 screen hide">
      <video class="mixPlayer screen" controls ref="mixPlayer">
        <source :src="mixPlayerSourceHD" type="video/mp4">
        <source :src="mixPlayerSourceSD" type="video/mp4" media="all and (max-width: 640px)">
      </video>
      <button class="button button--close m-4 flex justify-center items-center" @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>
    </div>
  </section>
  <section class="flex bg-black">
    <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>
  </section>
</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'
})


// animate player
const mixPlayer = ref()
const mixPlayerSourceHD = ref()
const mixPlayerSourceSD = ref()

const play = (id: string) => {
  mixPlayerSourceHD.value = 'https://files.erudi.fr/evilspins/'+id+'-HD.mp4'
  mixPlayerSourceSD.value = 'https://files.erudi.fr/evilspins/'+id+'-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()
}

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: artists } = await useFetch('/api/artists')
const { data: styles, status: statusStyles } = await useFetch('/api/styles', { lazy: true })
const { data: compilations } = await useFetch('/api/compilations')
console.log(compilations.value)
console.log(styles.value)
console.log(statusStyles.value)
</script>

<style lang="scss">
body {
  margin: 0;
}

.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;
}

.hide {
  opacity: 0;
  z-index: 0;
}

.show {
  opacity: 1;
}
</style>