Example of how to use VimeJS with Sapper / Svelte Kit

[antony]

Documentation

SSR Examples for new Vime JS.

Documentation page URL:
Does not yet exist

Reason:
The only existing "documentation" around this is the final comment on #38 - using dynamic imports is easy, but then you have to also use svelte:component in order to use those dynamic modules, and even then there are loads of console errors during build:

The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
1: var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                    ^
2:     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3:     return new (P || (P = Promise))(function (resolve, reject) {
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
1: var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                            ^
2:     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3:     return new (P || (P = Promise))(function (resolve, reject) {

It would be good to have a written example of using the new "web components" based VimeJS, as I can't see a clear path forward for using it in an SSR enabled environment.

[benbucksch]

I think the problem is coming from using "Web components", which is a alternative technology to Svelte. In a real Svelte component, the problem does not appear, because there is no extends HTMLElement and browser-related code can run in onMount, which side-steps the issue.

[tw1t611]

I really don't understand why anyone should go for web components. They have been risen and fallen with polymer. Like no major web framework uses them. Simple bundled Modules are just way more hassle-free and work everywhere.
Nonetheless, is there any way to get it working with svelte-kit? It's in beta for a while now and I think nobody will start a new project with plain svelte anymore. So it is a very relevant issue.

[mihar-22]

Web components have definitely had a bumpy ride and there are many negative things that can be said, but it's a standard none the less and it's where my focus is. There's been amazing improvements in browser support for enabling SSR with web components such as the new Declarative Shadow DOM API. There's also a bunch of other exciting proposals in the pipeline (eg: Constructable Stylesheets and HTML Modules).

Polymer has morphed into Lit and Google has recently released Lit 2 which has seen amazing adoption. Google has doubled down on it, and lot of major platforms/apps are shifting in this same direction. If I want to author a library that is framework agnostic and future proof then it can't be written at the framework layer (whatever the flavour of the month is or what you might think is the best). I'm also aware the Svelte can compile down to web components and I love the DX (huge Svelte fan)... but there are many issues with a compiled set of web components that we've experienced at work (this applies to Stencil as well).

I completely acknowledge that the integration packages were unfortunately not well written in Vime but I'm rectifying a lot of that on the new media player I'm working on which I'll announce soon. Framework support will hopefully come directly from Lit directly as they already support React.

I'm completely aware svelte-kit is the future of Svelte and I'm definitely looking to add better support. Please keep in mind that this is worked on mostly in spare time outside of work/family/life. I don't have the bandwidth to address a lot of issues with Vime at this time. There are great things in the works, just a little patience and I'll get there.

Thanks!

[silllli]

But despite these errors / warnings during compilation, Vime works with Sapper when dynamically imported and used with <svelte:component>, as far as I can tell. Or are there problems further down the line?

[benbucksch]

@silllli : Do you have a shortened code example of how you use <svelte:component>? That might be helpful for us.

[silllli]

Sure:

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

  let Player;
  let Video;

  onMount(async () => {
    // NOTE: parentheses turn destructuring assignments into expressions
    ({ Player, Video } = await import('@vime/svelte'));
  });
</script>

<svelte:component this={Player} controls>
  <svelte:component this={Video} crossorigin="">
    <source data-src="file.mp4">
  </svelte:component>
</svelte:component>

[stolinski]

The above code works great for me in dev mode, but running build gives a

HTMLElement is not defined ReferenceError: HTMLElement is not defined

Any ideas? I can provide a repro if needed.

[stolinski]

Seems like my issue might be with Vite/SvelteKit eagerly bundling sveltejs/kit#1570

[silllli]

Arguments to <svelte:component this={Player}> don’t seem to get passed correctly (at least autoplay doesn’t). 😢

[benaltair]

While trying to embed a Vimeo video on Kit 115 I get the following error:

ReferenceError: HTMLElement is not defined
    at /node_modules/@vime/core/dist/custom-elements/index.js?v=e741b189:826:14
    at instantiateModule (D:\Github\conference\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:68693:166)

I agree that supporting Kit more thoroughly would be a good move given the direction of the project.

[benwoodward]

Damn, really disappointed this fantastic lib doesn't work with SvelteKit. Just got the HTMLElement is not defined error after following the Getting Started / Hls instructions in the docs.

EDIT: Actually, seems to work using the <svelte:component> workaround..

EDIT: Here's my working code for anyone struggling:

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

  let isMounted = false;
  let video;
  let Player;
  let Hls;

  onMount(async () => {
    const vime = await import('@vime/svelte');
    Player = vime.Player;
    Hls = vime.Hls;
    isMounted = true;

    setTimeout(() => {
      video.play();
    }, 100);
  })
</script>

{#if isMounted === true}
  <svelte:component this={Player} bind:this={video} controls>
    <svelte:component this={Hls} version="latest" config={hlsConfig} crossorigin="">
      <source data-src="https://stream.mux.com/abc123.m3u8" type="application/x-mpegURL">
    </svelte:component>
  </svelte:component>
{/if}

SvelteKit: 1.0.0-next.116
Svelte: 3.38.3

EDIT: I'm experiencing issues calling methods on the Player using <svelte:component>:

index.js?v=188b6dfd:2980 Uncaught (in promise) TypeError: fullscreen error
    at Object.requestFullscreen (index.js?v=188b6dfd:2980)
    at FullscreenController.makeEnterFullscreenRequest (index.js?v=188b6dfd:3078)
    at FullscreenController.requestFullscreen (index.js?v=188b6dfd:3075)
    at HTMLElement.enterFullscreen (index.js?v=188b6dfd:5233)
    at proxy.enterFullscreen (Player.svelte? [sm]:93)

😞

EDIT: Hm, actually finding that I'm able to get it work without <svelte:component>:

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

  let isMounted = false;
  let video;
  let Player;
  let Hls;

  onMount(async () => {
    const vime = await import('@vime/svelte');
    Player = vime.Player;
    Hls = vime.Hls;
    isMounted = true;

    setTimeout(() => {
      video.play();
    }, 100);
  })
</script>

{#if isMounted === true}
  <Player this={Player} bind:this={video} controls>
    <Hls this={Hls} version="latest" config={hlsConfig} crossorigin="">
      <source data-src="https://stream.mux.com/abc123.m3u8" type="application/x-mpegURL">
    </Hls>
  </Player>
{/if}

With this code I'm finding that video.play(), video.enterFullscreen() etc. are actually working. ..Although I can't set props on it:

Player.svelte? [sm]:125 Uncaught Error: <Player>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'
    at Player.set currentTime [as currentTime] (Player.svelte? [sm]:125)
    at proxy.set (proxy.js:110)

EDIT: Okay, so it actually works fine as a Web Component:

<script context="module">
  let player = null;

  export function pause() {
    player.pause();
  }
</script>

<script>
  // deps
  import { onMount } from 'svelte';

  // stores
  import { currentTimeSec, isPlaying } from '$lib/stores/media.js';

  $: if ($isPlaying) {
    if (player !== null) {
      player.play()
    }
  } else {
    if (player !== null) {
      player.pause()
    }
  }

  function handleTimeUpdate(event) {
    currentTimeSec.set(event.detail)
  }

  function movePlayheadToTime(time) {
    player.currentTime = time;

    if (!$isPlaying) {
      currentTimeSec.set(time)
    }
  }

  function setPlaybackRate(playbackRate) {
    player.playbackRate = playbackRate;
  }

  let hlsConfig = {};

  onMount(async () => {
    player = document.querySelector('vm-player');
  })
</script>

<div id="container">
  <vm-player playsinline on:vmCurrentTimeChange={handleTimeUpdate}>
    <vm-hls
      cross-origin="true"
      poster="https://image.mux.com/muxid-123/thumbnail.png?width=214&height=121&fit_mode=pad">
      <source data-src="https://stream.mux.com/muxid-123.m3u8" type="application/x-mpegURL" />
    </vm-hls>
    <vm-default-ui></vm-default-ui>
  </vm-player>
</div>

app.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css"
      />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/light.css"
      />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script
      defer
      type="module"
      src="https://cdn.jsdelivr.net/npm/@vime/core@^5/dist/vime/vime.esm.js"
      >
    </script>
    %svelte.head%
  </head>
  <body class="text-gray-300">
    <div id="svelte">%svelte.body%</div>
  </body>
</html>

[llamaswize]

Which is the official recommended way to implement Vime on a SvelteKit project? Can we rise a feature request for SvelteKit support? At least add some kind of mention of SvelteKit on the documentation.

[stolinski]

We have it working in SvelteKit by using the web component version and just loading the script.

[ralyodio]

why are the docs trash for svelte? can someone post an official solution here?