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 flex justify-center items-center" @click="play()">
          <svg width="40px" height="30px">
            <polygon points="0,0 0,30 30,15" />
          </svg>
        </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="https://files.erudi.fr/evilspins/zero-a-hd.mp4" type="video/mp4">
          <source src="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm" media="all and (max-width: 640px)">
        </video>
        <button class="button button--close flex justify-center items-center" @click="closePlayer()">
          <svg width="40px" 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>
  </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 play = () => {
    fadeOut(document.querySelector('.button'))
    fadeOut(document.querySelector('.logo'))
    fadeOut(document.querySelector('.animation'))
    fadeIn(document.querySelector('.mix'))
    fadeOut(document.querySelector('.shadow'))
    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')
  }

  // 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;
  }
  
  .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));
  }
  
  .button {
    position: relative;
    top: 60px;
    padding-left: 16px;
    text-decoration: none;
    box-shadow: 0 8px 0 0 black;
    transition: all .3s;
    border: 8px black solid;
    line-height: 100%;
    height: 70px;
    width: 70px;
    border-width: 2px;
    border-radius: 100px;
    cursor: pointer;
    color: #fdec50ff;
    font-size: 26px;
    background-color: rgba(255, 255, 255, 0.35);
    &:hover {
      background-color: #fdec50ff;
      color: black;
    }
    &:active {
      top: 64px;
      box-shadow: 0 0 0 0 black;
    }
    &--close {
      right: 24px;
      padding-top: 10px;
      position: absolute;
    }
  }
  
  .hide {
    opacity: 0;
    z-index: 0;
  }
  .show {
    opacity: 1;
  }
  </style>