<script>
  import { onMount } from "svelte";

  export let aspect_ratio = "16/9";
  // source is deprecated since I use src everywhere now
  export let source = "";
  export let src = "";
  export let content_type = "application/x-mpegURL";
  export let poster;
  export let preload="auto";
  export let background_color = "var(--color-accent)";
  export let controls = true;
  export let autoplay = false;
  export let muted = false;
  export let loop = false;
  let ready = false;

  onMount(() => {
    ready = true;
  });
</script>

<video-player class="stacked" style="background: { background_color };">
  <video class="layer" class:top={ready} src={ source || src }
         style="--aspect-ratio: { aspect_ratio };"
         autoplay={autoplay}
         muted={muted}
         poster={poster}
         controls={controls}
         loop={loop}
         preload={preload}
         id="video-player">

    <source src={ source || src } type={ content_type}>
  </video>
  <layer class="layer" style="background: {background_color };" class:top={ !ready }>
  {#if poster}
    <img src={ poster }>
  {:else}
    &nbsp;
  {/if}
  </layer>
</video-player>
