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

svelte-migrate: updated files
continuous-integration/drone/push Build is passing Details

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

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

4
src/app.html
View File

@ -8,9 +8,9 @@
<meta name="robots" content="none">
<base href="/videos/">
<script async defer data-website-id="a090d9cb-821a-4bf0-b992-6d6b746ddcca" src="https://pythagore.p0m.fr/pythagore.js"></script>
%svelte.head%
%sveltekit.head%
</head>
<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>
</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,
} from 'sveltestrap';
export let activemenu = '';
export { className as class };
let className = '';
</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>
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>

6
src/routes/+page.svelte
View File

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

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

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;