pixelperfectionist/rendered/pages/live/[slug]/player.svelte

<script context="module">
  import live from "$/rendered/pages/live/index.js";

  export const getPaths = live.load_paths;

  export const getData = stream => stream;
</script>

<script>
  import Video from "$/client/components/Video.svelte";
  import { Hydrate } from '@jamcart/7ty/components';
  import IconImage from "$/client/components/IconImage.svelte";

  export let slug;
  export let source;
  export let poster;
  export let state;
  export let starts_on;

  let video_background = "rgba(0,0,0,0)";

  let video_props = {
    poster,
    background_color: video_background,
    source,
    starts_on
  }

</script>
{#if state === "live" || state === "archived"} 
  <Hydrate component={ Video } props={ video_props } />
{:else if state === "pending"}
  <IconImage name="clock" />
{:else if state === "finished"}
  <IconImage name="film" />
{/if}