Site done

src/routes/[vid].svelte

@@ -0,0 +1,74 @@
+<script context="module">
+ export async function load({ params }) {
+     return {
+         props: {
+             video_id: params.vid,
+         }
+     };
+ }
+</script>
+
+<script>
+ import {
+     Col,
+     Row,
+ } from 'sveltestrap';
+
+ import { videos } from '../stores/videos.js';
+ import VideoThumb from '../components/VideoThumb.svelte';
+
+ export let video_id = 0;
+</script>
+
+{#if $videos.idx_videos[video_id]}
+    <Row class="mt-3 mb-5">
+        <Col>
+        <div class="ratio ratio-16x9 mb-3">
+            <video controls autoplay poster={$videos.idx_videos[video_id].thumb}>
+                <source src={$videos.idx_videos[video_id].url} type="video/mp4">
+            </video>
+        </div>
+        {#if $videos.idx_videos[video_id].title}
+            <h1>
+                {$videos.idx_videos[video_id].title}
+            </h1>
+        {/if}
+        {#if $videos.idx_videos[video_id].description}
+            <p>
+                {@html $videos.idx_videos[video_id].description}
+            </p>
+        {/if}
+        <div id="commento"></div>
+        </Col>
+
+        <Col md="3" lg="4">
+        {#if $videos.idx_videos[video_id].next && $videos.idx_videos[$videos.idx_videos[video_id].next]}
+            <Row>
+                <Col xs="auto">
+                <h4>Prochaine vidéo</h4>
+                </Col>
+                <Col>
+                <hr>
+                </Col>
+            </Row>
+            <VideoThumb video={$videos.idx_videos[$videos.idx_videos[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.videos as video (video.id)}
+            {#if video.id != $videos.idx_videos[video_id].next && video.id != video_id}
+                <VideoThumb {video} />
+            {/if}
+        {/each}
+        </Col>
+    </Row>
+{:else}
+    Erreur 404
+{/if}

src/routes/__layout.svelte

@@ -0,0 +1,61 @@
+<script context="module">
+ import { videos } from '../stores/videos.js';
+
+ let stop_refresh = false;
+
+ let refresh_interval_videos = null;
+ async function refresh_videos(cb=null, interval=null) {
+     if (refresh_interval_videos)
+         clearInterval(refresh_interval_videos);
+     if (interval === null) {
+         interval = Math.floor(Math.random() * 124800) + 600000;
+     }
+     if (stop_refresh) {
+         return;
+     }
+     refresh_interval_videos = setInterval(refresh_videos, interval);
+
+     await videos.update(await fetch('videos.json', {headers: {'Accept': 'application/json'}}), cb);
+ }
+
+ export async function load({ stuff }) {
+     refresh_videos();
+
+     return {
+         stuff: {
+             ...stuff,
+             refresh_videos,
+         },
+     };
+ }
+</script>
+
+<script>
+ import "bootstrap-icons/font/bootstrap-icons.css";
+
+ import {
+     Container,
+     Styles,
+ } from 'sveltestrap';
+
+ import Header from '../components/Header.svelte';
+
+ export let loading = null;
+</script>
+
+<svelte:head>
+    <title>Maatma Videos</title>
+</svelte:head>
+
+<Styles />
+
+<Header />
+<Container fluid class="flex-fill d-flex flex-column justify-content-center pb-4 pb-lg-2">
+    {#if $videos.loading}
+        <Container class="border border-2 border-info text-center py-3 display-6 mb-5">
+            Chargement de la liste des vidéos&hellip;
+        </Container>
+    {:else}
+        <slot></slot>
+    {/if}
+</Container>

src/routes/index.svelte

@@ -1,2 +1,28 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+ import {
+     Col,
+     Container,
+     Row,
+ } from 'sveltestrap';
+
+ import { videos } from '../stores/videos.js';
+ import VideoThumb from '../components/VideoThumb.svelte';
+</script>
+
+<Container fluid class="flex-fill my-3">
+    <Row>
+        <Col xs="auto">
+        <h3>Toutes les vidéos</h3>
+        </Col>
+        <Col>
+        <hr>
+        </Col>
+    </Row>
+    <Row cols={{sm: 2, md: 3, lg: 4}}>
+        {#each $videos.videos as video (video.id)}
+            <Col>
+            <VideoThumb {video} />
+            </Col>
+        {/each}
+    </Row>
+</Container>