bandolier-website/client/pages/Video.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 { defer, page_change } from "$/client/helpers.js";
  import Icon from "$/client/components/Icon.svelte";
  import WTVideo from "$/client/components/WTVideo.svelte";
  import Video from "$/client/components/Video.svelte";
  import IconImage from "$/client/components/IconImage.svelte";
  import SnapImage from "$/client/components/SnapImage.svelte";

  export let params = {};
  let media = {};
  let media_defer = defer();

  const load_related = async () => {
    const [ status, data ] = await api.get("/api/media");
    return status == 200 ? data : [];
  }

  const load_media = async () => {
    const [status, data] = await api.get("/api/media", {
      media_id: params.id
    });

    if(status === 200) {
      media = data[0];
      media_defer.resolve();
    } else {
      console.error("Invalid response", status, data);
      media_defer.reject();
    }
  }

  $: if(page_change(media, params)) {
    media_defer = defer();
    load_media();
  }

  onMount(load_media);
</script>

<style>
  content {
    padding-top: var(--fixed-header-height);
    flex-direction: row-reverse;
  }

  content > left {
    overflow-y: auto;
    min-height: calc(100vh - var(--fixed-header-height));
    max-height: calc(100vh - var(--fixed-header-height));
  }

  content > right {
    border: 1px solid green;
    width: 100%;
  }

  video-display {
    display: flex;
    background-color: var(--value2);
    width: 100%;
  }
</style>

<Layout footer={ false } fixed={ true } authenticated={ true } fullwidth={ true }>
  <content>
    <left>
      {#await load_related()}
        &nbsp;
      {:then related}
        {#each related 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>{ media.id}</bottom>
        </card>
        {/each}
      {/await}
    </left>


    <right>
      {#await media_defer}
        &nbsp;
      {:then}
        <video-display style="--aspect-ratio: 16/9;">
          {#if media.torrent_url}
            <WTVideo media={ media } />
          {:else}
            <Video src={ media.src } poster={ media.poster } />
          {/if}
        </video-display>

        <info>
          <tile>
          <left>
            <Icon name="user" size="48" />
          </left>
          <middle>
            ID: { media.id } { media.title || "No title." } { media.duration }
          </middle>
          <right>
            { media.views } <Icon name="eye" />
          </right>
          </tile>
        </info>
      {/await}
    </right>
  </content>
</Layout>