schwarzesbrett/docker/schwarzesbrett/src/routes/index.svelte

<script lang="ts">
  import * as api from "$lib/api";

  let fetchData = api.fetchData();
  // let fetchData = [api.fetchData()];
  let listingIndex = 0;

  function updateListingIndex(amount: number): void {
    if (listingIndex == amount - 2) {
      // fetchData.shift();
      // fetchData.push(api.fetchData());
      fetchData = api.fetchData();
    }
    // if (fetchData.length == 0) {
    //   fetchData.push(api.fetchData());
    // }

    if (listingIndex >= amount - 1) {
      listingIndex = 0;
    } else {
      listingIndex++;
    }
  }

  function handleTime(time: number, listingsAmount: number): void {
    setTimeout(() => updateListingIndex(listingsAmount), time * 1000);
  }

  function handleVideoLoad(
    time: number | undefined,
    listingsAmount: number
  ): void {
    if (time) {
      handleTime(time, listingsAmount);
    }
  }
</script>

<div class="brett center-box">
  {#await fetchData}
    <p>Loading...</p>
  {:then data}
    {#if data.listings[listingIndex].type == api.ListingType.IMAGE}
      <img
        class="center dynamic-size"
        src={api
          .generateContentURL(data.listings[listingIndex].content)
          .toString()}
        alt={data.listings[listingIndex].name}
        on:load={() =>
          handleTime(
            data.listings[listingIndex].time || 10,
            data.listings.length
          )}
      />
    {:else if data.listings[listingIndex].type == api.ListingType.VIDEO}
      <video
        class="center dynamic-size"
        autoplay
        playsinline
        on:load={() =>
          handleVideoLoad(
            data.listings[listingIndex].time,
            data.listings.length
          )}
        on:ended={() => updateListingIndex(data.listings.length)}
      >
        <source
          src={api
            .generateContentURL(data.listings[listingIndex].content)
            .toString()}
        />
        <track kind="captions" />
        <b class="error">Videos are not supported!</b>
      </video>
    {/if}
  {:catch error}
    <p><b class="error">An error occured! {error}</b></p>
  {/await}

  <div class="banner">
    <div class="banner-wrapper">
      <span class="banner-pre">Powered by </span>
      <a class="banner-name" href="https://dergrimm.net" target="_blank">
        <code>Dominic Grimm &lt;dominic@dergrimm.net&gt;</code>
      </a>
    </div>
  </div>
</div>

<style lang="scss">
  .brett {
    cursor: none;
    background-color: black;
    color: white;

    * {
      pointer-events: none;
    }
  }

  .banner {
    position: absolute;
    transform: scale(-1);
    writing-mode: vertical-rl;
    right: 1vh;
    bottom: 1vh;
    color: black;
    font-family: "Fira Code";
    background-color: white;
    opacity: 90%;
  }

  .banner-wrapper {
    margin-left: 0.75%;
    margin-right: 0.75%;
  }

  .banner-pre {
    font-size: large;
  }

  .banner-name {
    font-size: x-large;
    color: blue;
    text-decoration: underline;
  }

  .center-box {
    height: 100vh;
    display: flex;
    justify-content: center;
  }

  .center {
    display: flex;
    justify-content: center;
  }

  .dynamic-size {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
</style>