svelte-migrate: updated files

src/routes/+layout.js

@@ -0,0 +1,13 @@
+import { refresh_videos } from '$lib/stores/videos.js';
+
+export const ssr = false;
+
+export async function load() {
+  let error = null;
+
+  refresh_videos().then(() => true, (err) => error = err.detail);
+
+  return {
+    error
+  };
+}

src/routes/+layout.svelte

@@ -1,36 +1,6 @@
-<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 { videos } from '$lib/stores/videos.js';
+
  import "bootstrap-icons/font/bootstrap-icons.css";
 
  import {
@@ -38,9 +8,9 @@
      Styles,
  } from 'sveltestrap';
 
- import Header from '../components/Header.svelte';
+ import Header from '$lib/components/Header.svelte';
 
- export let loading = null;
+ export let data;
 </script>
 
 <svelte:head>
@@ -51,7 +21,11 @@
 
 <Header />
 <Container fluid class="flex-fill d-flex flex-column justify-content-center pb-4 pb-lg-2">
-    {#if $videos.loading}
+    {#if data.error !== null}
+        <Container class="border border-2 border-info text-center py-3 display-6 mb-5">
+            Une erreur s'est produite&nbsp;: {data.error}
+        </Container>
+    {:else if $videos === null}
         <Container class="border border-2 border-info text-center py-3 display-6 mb-5">
             Chargement de la liste des vidéos&hellip;
         </Container>

src/routes/+page.svelte

@@ -5,8 +5,8 @@
      Row,
  } from 'sveltestrap';
 
- import { videos } from '../stores/videos.js';
- import VideoThumb from '../components/VideoThumb.svelte';
+ import { videos } from '$lib/stores/videos.js';
+ import VideoThumb from '$lib/components/VideoThumb.svelte';
 </script>
 
 <Container fluid class="flex-fill my-3">
@@ -19,7 +19,7 @@
         </Col>
     </Row>
     <Row cols={{sm: 2, md: 3, lg: 4}}>
-        {#each $videos.videos as video (video.id)}
+        {#each $videos as video (video.id)}
             <Col>
             <VideoThumb {video} />
             </Col>

src/routes/[vid]/+page.js

@@ -0,0 +1,5 @@
+export async function load({ params }) {
+  return {
+    video_id: params.vid,
+  };
+}

src/routes/[vid]/+page.svelte

@@ -1,13 +1,3 @@
-<script context="module">
- export async function load({ params }) {
-     return {
-         props: {
-             video_id: params.vid,
-         }
-     };
- }
-</script>
-
 <script>
  import {
      Container,
@@ -15,34 +5,34 @@
      Row,
  } from 'sveltestrap';
 
- import { videos } from '../stores/videos.js';
- import Commento from '../components/Commento.svelte';
- import VideoThumb from '../components/VideoThumb.svelte';
+ 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 video_id = 0;
+ export let data;
 </script>
 
-{#if $videos.idx_videos[video_id]}
+{#if $idx_videos[data.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} src={$videos.idx_videos[video_id].url} />
+            <video controls autoplay poster={$idx_videos[data.video_id].thumb} src={$idx_videos[data.video_id].url} />
         </div>
-        {#if $videos.idx_videos[video_id].title}
+        {#if $idx_videos[data.video_id].title}
             <h1>
-                {$videos.idx_videos[video_id].title}
+                {$idx_videos[data.video_id].title}
             </h1>
         {/if}
-        {#if $videos.idx_videos[video_id].description}
+        {#if $idx_videos[data.video_id].description}
             <p>
-                {@html $videos.idx_videos[video_id].description}
+                {@html $idx_videos[data.video_id].description}
             </p>
         {/if}
-        <Commento pageId={'/videos/' + video_id} />
+        <Commento pageId={'/videos/' + data.video_id} />
         </Col>
 
         <Col md="3" lg="4">
-        {#if $videos.idx_videos[video_id].next && $videos.idx_videos[$videos.idx_videos[video_id].next]}
+        {#if $idx_videos[data.video_id].next && $idx_videos[$idx_videos[data.video_id].next]}
             <Row>
                 <Col xs="auto">
                 <h4>Prochaine vidéo</h4>
@@ -51,7 +41,7 @@
                 <hr>
                 </Col>
             </Row>
-            <VideoThumb video={$videos.idx_videos[$videos.idx_videos[video_id].next]} />
+            <VideoThumb video={$idx_videos[$idx_videos[data.video_id].next]} />
             <div class="mt-3"></div>
         {/if}
         <Row>
@@ -62,8 +52,8 @@
             <hr>
             </Col>
         </Row>
-        {#each $videos.videos as video (video.id)}
-            {#if video.id != $videos.idx_videos[video_id].next && video.id != video_id}
+        {#each $videos as video (video.id)}
+            {#if video.id != $idx_videos[data.video_id].next && video.id != data.video_id}
                 <VideoThumb {video} />
             {/if}
         {/each}