valere/evilspins
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

player can switch between compilation

Browse Source
This commit is contained in:
valere
2024-09-08 18:53:20 +02:00
parent 431fc4912b
commit 0c0074ccc1
9 changed files with 419 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
pages/index.vue
View File

@@ -9,10 +9,8 @@
</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 class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
↓
</button>
</figure>
<div class="shadow screen" />
@@ -23,27 +21,26 @@
</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)">
<source :src="mixPlayerSourceHD" type="video/mp4">
<source :src="mixPlayerSourceSD" type="video/mp4" media="all and (max-width: 640px)">
</video>
<button class="button button--close flex justify-center items-center" @click="closePlayer()">
<svg width="40px" height="30px">
<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">
<zero-a>
<button class="button flex justify-center items-center" @click="play()">
<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></zero-b>
<zero-b @click="play('ES00B')"></zero-b>
</section>
</template>
<script setup lang="ts">
@@ -59,13 +56,19 @@ useSeoMeta({
// 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'
const play = () => {
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()
}
@@ -86,6 +89,10 @@ 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 })
@@ -130,6 +137,7 @@ body {
.mix {
z-index: 4;
position: fixed;
}
.shadow {
@@ -154,39 +162,8 @@ body {
filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
}
.button {
position: relative;
top: 70px;
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: #ffffff59;
&:hover {
background-color: #fdec50ff;
color: black;
}
&:active {
top: 64px;
box-shadow: 0 0 0 0 black;
}
&--close {
right: 24px;
padding-top: 10px;
position: absolute;
}
.mixPlayer {
background: black;
}
.hide {