maatma-videos/src/routes/[vid]/+page.svelte

<script>
 import {
     Container,
     Col,
     Row,
 } from 'sveltestrap';

 import { videos, idx_videos } from '$lib/stores/videos.js';
 import Commento from '$lib/components/Commento.svelte';
 import VideoThumb from '$lib/components/VideoThumb.svelte';

 export let data;
</script>

{#if $idx_videos[data.video_id]}
    <Row class="mt-3 mb-5">
        <Col>
        <div class="ratio ratio-16x9 mb-3">
            <video controls autoplay poster={$idx_videos[data.video_id].thumb} src={$idx_videos[data.video_id].url} />
        </div>
        {#if $idx_videos[data.video_id].title}
            <h1>
                {$idx_videos[data.video_id].title}
            </h1>
        {/if}
        {#if $idx_videos[data.video_id].description}
            <p>
                {@html $idx_videos[data.video_id].description}
            </p>
        {/if}
        <Commento pageId={'/videos/' + data.video_id} />
        </Col>

        <Col md="3" lg="4">
        {#if $idx_videos[data.video_id].next && $idx_videos[$idx_videos[data.video_id].next]}
            <Row>
                <Col xs="auto">
                <h4>Prochaine vidéo</h4>
                </Col>
                <Col>
                <hr>
                </Col>
            </Row>
            <VideoThumb video={$idx_videos[$idx_videos[data.video_id].next]} />
            <div class="mt-3"></div>
        {/if}
        <Row>
            <Col xs="auto">
            <h4>Autres vidéos</h4>
            </Col>
            <Col>
            <hr>
            </Col>
        </Row>
        {#each $videos as video (video.id)}
            {#if video.id != $idx_videos[data.video_id].next && video.id != data.video_id}
                <VideoThumb {video} />
            {/if}
        {/each}
        </Col>
    </Row>
{:else}
    <Container class="mt-3 mb-5 text-center">
        <h1>
            Erreur 404
            <small class="text-muted">Vidéo introuvable</small>
        </h1>
        <p>
            La vidéo à laquelle vous essayez d'accéder n'existe pas&nbsp;!
        </p>
        <p>
            Vous pouvez retourner à <a href=".">la page d'accueil</a>.
        </p>
    </Container>
{/if}