2022-11-20 05:20:29 +01:00
< script >
import Header from "../../lib/Header.svelte";
2022-11-21 03:24:29 +01:00
/** @type { import ( './$types' ). PageData } */
export let data;
2022-11-20 05:20:29 +01:00
< / script >
< style >
.video {
border-radius: 10px;
2022-12-24 01:08:16 +01:00
box-shadow: 0px 0px 32px rgba(255, 255, 255, 0.1);
2022-11-20 05:20:29 +01:00
display: flex;
flex-direction: column;
overflow: hidden;
max-width: 100%;
}
2022-11-21 03:24:29 +01:00
video {
width: 350px;
height: auto;
}
2022-11-20 05:20:29 +01:00
.videos {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 1em;
flex-wrap: wrap;
}
.video-label {
padding: 0.5em;
background-color: #eeeeef;
color: #000;
font-weight: bold;
text-align: center;
font-size: large;
}
< / style >
< svelte:head >
< title > videos of all time< / title >
< / svelte:head >
< main style = "width: 1100px" >
< Header / >
< div class = "big paragraph neat-bg-container center" >
< div class = "neat-bg" style = "transform: skewY(1deg)" > < / div >
videos of all fucking time compilation
< / div >
< div class = "videos" >
2022-11-21 03:24:29 +01:00
{ #each Object . values ( data ) as vid }
2022-11-20 05:20:29 +01:00
< div class = "video" >
<!-- svelte - ignore a11y - media - has - caption -->
< video
2022-11-21 03:24:29 +01:00
width={ vid . width }
height={ vid . height }
2022-11-20 05:20:29 +01:00
controls="true"
controlslist="disablepictureinpicture nofullscreen noremoteplayback"
disablepictureinpicture="true"
disableremoteplayback="true"
playsinline="true"
preload="metadata">
2022-11-21 03:24:29 +01:00
< source src = { '/videos/' + vid . name } type= { vid . mime } >
2022-11-20 05:20:29 +01:00
< / video >
< div class = "video-label" >
2022-11-21 03:24:29 +01:00
{ vid . name }
2022-11-20 05:20:29 +01:00
< / div >
< / div >
{ /each }
< / div >
2022-11-20 13:34:30 +01:00
< br > < br >
< button on:click = {() => { document . querySelectorAll ( 'video' ). forEach ( v => { v . play (); v . loop = true ; v . volume = Math . random () * v . volume })}} class="center" > Play every video at the same time</ button >
2022-11-20 05:20:29 +01:00
< / main >