<script>
  import Header from "../../lib/Header.svelte";

  /** @type {import('./$types').PageData} */
  export let data;
</script>

<style>
  .video {
    border-radius: 10px;
    filter: drop-shadow(0px 0px 32px rgba(255, 255, 255, 0.1));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100%;
  }
  video {
    width: 350px;
    height: auto;
  }
  .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">
    {#each Object.values(data) as vid}
      <div class="video">
        <!-- svelte-ignore a11y-media-has-caption -->
        <video
          width={vid.width}
          height={vid.height}
          controls="true"
          controlslist="disablepictureinpicture nofullscreen noremoteplayback"
          disablepictureinpicture="true"
          disableremoteplayback="true"
          playsinline="true"
          preload="metadata">
          <source src={'/videos/' + vid.name} type={vid.mime}>
        </video>
        <div class="video-label">
          {vid.name}
        </div>
      </div>
    {/each}
  </div>
  <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>
</main>