lure/lure-web
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Use dynamic import as Vime does not work in SSR

Browse Source
This commit is contained in:
Elara 2022-12-21 14:05:30 -08:00
parent 321113aec5
commit e6d71b9b3f
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/routes/+page.svelte
View File

@ -7,13 +7,12 @@
import bash from 'svelte-highlight/languages/bash'; import bash from 'svelte-highlight/languages/bash';
import agate from 'svelte-highlight/styles/agate'; import agate from 'svelte-highlight/styles/agate';
import {Player, Video, DefaultUi} from '@vime/svelte'; let Carousel, Player, Video, DefaultUi;
let Carousel;
onMount(async () => { onMount(async () => {
// Perform dynamic import of svelte-carousel because it breaks // Perform dynamic import of svelte-carousel because it breaks
// if imported during SSR // if imported during SSR
Carousel = (await import('svelte-carousel')).default; Carousel = (await import('svelte-carousel')).default;
({Player, Video, DefaultUi} = await import('@vime/svelte'));
}) })
let images = [ let images = [
@ -93,12 +92,12 @@
{#each images as image} {#each images as image}
<div class="has-text-centered"> <div class="has-text-centered">
<figure class="terminal-player mx-auto"> <figure class="terminal-player mx-auto">
<Player> <svelte:component this={Player}>
<Video> <svelte:component this={Video}>
<source data-src="{image.path}" type="video/webm"> <source data-src="{image.path}" type="video/webm">
</Video> </svelte:component>
<DefaultUi></DefaultUi> <svelte:component this={DefaultUi}></svelte:component>
</Player> </svelte:component>
<figcaption>{image.caption ?? ""}</figcaption> <figcaption>{image.caption ?? ""}</figcaption>
</figure> </figure>
</div> </div>