livestream/src/components/VideoPlayer.svelte

<script>
import {
  VimePlayer,
  VimeHls,
  usePlayerStore,
  VimeControls,
  VimeFullscreenControl,
  VimeScrim,
  VimeControlSpacer,
  VimeVolumeControl,
  VimePlaybackControl,
  VimeDefaultUi,
} from "@vime/svelte";
import "@vime/core/themes/default.css";
import Offline from "./Offline.svelte";
import { live, channel } from "../stores.js";

let player;
//const { paused } = usePlayerStore(() => player);
</script>

<VimePlayer playsinline bind:this="{player}">
  <VimeHls preload="auto" version="latest">
    <source
      data-src="{`https://live.autistici.org/hls/${$channel}.m3u8`}"
      type="application/x-mpegURL"
    />
  </VimeHls>
  {#if !$live}
    <Offline />
  {/if}

  <VimeDefaultUi noControls>
    <VimeScrim />
    <VimeControls fullWidth>
      <VimePlaybackControl hideTooltip />
      <VimeVolumeControl hideTooltip />
      <VimeControlSpacer />
      <VimeFullscreenControl hideTooltip />
    </VimeControls>
  </VimeDefaultUi>
</VimePlayer>