teach/maatma-videos
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Activity

svelte-migrate: updated files
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
nemunaire 2022-12-15 12:51:07 +01:00
parent 36151c1115
commit 15413f23b0
15 changed files with 2755 additions and 919 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3455
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
package.json
View File

@ -1,26 +1,24 @@
{ {
"name": "maatma-videos", "name": "maatma-videos",
"version": "0.0.1", "version": "0.0.2",
"scripts": { "scripts": {
"dev": "svelte-kit dev", "dev": "vite dev",
"build": "svelte-kit build", "build": "vite build",
"package": "svelte-kit package", "preview": "vite preview",
"preview": "svelte-kit preview",
"prepare": "svelte-kit sync",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .", "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ." "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "next", "@sveltejs/adapter-static": "^1.0.0",
"@sveltejs/adapter-static": "^1.0.0-next.29", "@sveltejs/kit": "^1.0.0",
"@sveltejs/kit": "next",
"bootstrap-icons": "^1.8.1", "bootstrap-icons": "^1.8.1",
"eslint": "^7.32.0", "eslint": "^8.0.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^4.0.0", "eslint-plugin-svelte3": "^4.0.0",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"prettier-plugin-svelte": "^2.5.0", "prettier-plugin-svelte": "^2.5.0",
"svelte": "^3.44.0" "svelte": "^3.54.0",
"vite": "^4.0.0"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {

4
src/app.html
View File

@ -8,9 +8,9 @@
<meta name="robots" content="none"> <meta name="robots" content="none">
<base href="/videos/"> <base href="/videos/">
<script async defer data-website-id="a090d9cb-821a-4bf0-b992-6d6b746ddcca" src="https://pythagore.p0m.fr/pythagore.js"></script> <script async defer data-website-id="a090d9cb-821a-4bf0-b992-6d6b746ddcca" src="https://pythagore.p0m.fr/pythagore.js"></script>
%svelte.head% %sveltekit.head%
</head> </head>
<body class="h-100"> <body class="h-100">
<div class="d-flex flex-column justify-content-between h-100">%svelte.body%</div> <div class="d-flex flex-column justify-content-between h-100">%sveltekit.body%</div>
</body> </body>
</html> </html>

6
src/hooks.js
View File

@ -1,6 +0,0 @@
export async function handle({ event, resolve }) {
const response = await resolve(event, {
ssr: false,
});
return response;
}

0
src/components/Commento.svelte → src/lib/components/Commento.svelte
View File

1
src/components/Header.svelte → src/lib/components/Header.svelte
View File

@ -8,7 +8,6 @@
NavLink, NavLink,
} from 'sveltestrap'; } from 'sveltestrap';
export let activemenu = '';
export { className as class }; export { className as class };
let className = ''; let className = '';
</script> </script>

0
src/components/VideoThumb.svelte → src/lib/components/VideoThumb.svelte
View File

27
src/lib/stores/videos.js Normal file
View File

@ -0,0 +1,27 @@
import { derived, writable } from 'svelte/store';
export const videos = writable(null);
export async function refresh_videos() {
const response = await fetch('videos.json', {headers: {'Accept': 'application/json'}});
if (response.ok) {
const data = await response.json();
videos.set(data);
return data;
} else {
throw new Error("Unable to retrieve the videos");
}
}
export const idx_videos = derived(
videos,
($videos) => {
const idx_videos = {};
for (const v of $videos) {
idx_videos[v.id] = v;
}
return idx_videos;
}
);

13
src/routes/+layout.js Normal file
View File

@ -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
};
}

44
src/routes/+layout.svelte
View File

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

6
src/routes/+page.svelte
View File

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

5
src/routes/[vid]/+page.js Normal file
View File

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

40
src/routes/[vid]/+page.svelte
View File

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

27
src/stores/videos.js
View File

@ -1,27 +0,0 @@
import { writable } from 'svelte/store';
function createVideosStore() {
const { subscribe, set, update } = writable({videos: [], idx_videos: {}, loading: true});
return {
subscribe,
update: async (res_videos, cb=null) => {
if (res_videos.status === 200) {
const videos = await res_videos.json();
const idx_videos = {};
for (const v of videos) {
idx_videos[v.id] = v;
}
update((t) => (Object.assign(t, {videos, idx_videos, loading: false})));
if (cb) {
cb(videos);
}
}
},
};
}
export const videos = createVideosStore();

8
vite.config.js Normal file
View File

@ -0,0 +1,8 @@
import { sveltekit } from '@sveltejs/kit/vite';
/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()]
};
export default config;