bandolier-website/client/pages/VideoIndex.svelte

<script>
  import Layout from "$/client/Layout.svelte";
  import { onMount } from "svelte";
  import api from "$/client/api.js";
  import {link} from 'svelte-spa-router';
  import Icon from "$/client/components/Icon.svelte";
  import IconImage from "$/client/components/IconImage.svelte";
  import SnapImage from "$/client/components/SnapImage.svelte";

  let available_media = [];

  onMount(async () => {
    const [status, data] = await api.get("/api/media");

    if(status === 200) {
      available_media = data;
    } else {
      console.error("Invalid response", status, data);
    }
  });
</script>

<style>
  videos {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 0.5rem;
    align-self: start;
  }


</style>

<Layout fixed={ false } authenticated={ true } fullscreen={ true } footer={ false } testid="home-page">
  <videos>
  {#each available_media as media}
    <card>
    <top>
      <a href="/video/{ media.id }/" use:link>
        {#if media.poster}
          <SnapImage width={ media.width / 3 } height={ media.height / 3 } src={ media.poster } />
        {:else}
          <IconImage name="video" />
        {/if}
      </a>
    </top>
    <bottom>
      <video-views>
        <Icon name="user" /> { media.views }
      </video-views>
      <video-tags>
        { media.tags }
      </video-tags>
    </bottom>
    </card>

  {/each}
  </videos>
</Layout>