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

Site done

Browse Source
This commit is contained in:
nemunaire 2022-04-17 11:45:09 +02:00
parent d747d9419f
commit cca01dc055
11 changed files with 293 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
package-lock.json generated
View File

@ -89,6 +89,11 @@
"integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==", "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
"dev": true "dev": true
}, },
"@popperjs/core": {
"version": "2.11.5",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
"integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
},
"@rollup/pluginutils": { "@rollup/pluginutils": {
"version": "4.2.1", "version": "4.2.1",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@ -131,6 +136,15 @@
"tiny-glob": "^0.2.9" "tiny-glob": "^0.2.9"
} }
}, },
"@sveltejs/adapter-static": {
"version": "1.0.0-next.29",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.29.tgz",
"integrity": "sha512-0hjGnfT3BRyoHnzJ2w0/xL+xICRpKneDTm45ZzggiRrc0r71WJfF6toGeg8N4QUQnj8EJ3Itm453gsS1kt7VUQ==",
"dev": true,
"requires": {
"tiny-glob": "^0.2.9"
}
},
"@sveltejs/adapter-vercel": { "@sveltejs/adapter-vercel": {
"version": "1.0.0-next.47", "version": "1.0.0-next.47",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.47.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.47.tgz",
@ -230,6 +244,12 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true "dev": true
}, },
"bootstrap-icons": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
"integrity": "sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w==",
"dev": true
},
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -1323,6 +1343,14 @@
"integrity": "sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==", "integrity": "sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==",
"dev": true "dev": true
}, },
"sveltestrap": {
"version": "5.9.0",
"resolved": "https://registry.npmjs.org/sveltestrap/-/sveltestrap-5.9.0.tgz",
"integrity": "sha512-ZSiYKYrKhDMhhbamnAFK3RK/uqUdcLgjae5Fk3GYdv6Ccth0tN2y6vSg+Vp/PBTYc51u08ZwnYvt8SfWSRNCMA==",
"requires": {
"@popperjs/core": "^2.9.2"
}
},
"table": { "table": {
"version": "6.8.0", "version": "6.8.0",
"resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz", "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",

7
package.json
View File

@ -12,7 +12,9 @@
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "next", "@sveltejs/adapter-auto": "next",
"@sveltejs/adapter-static": "^1.0.0-next.29",
"@sveltejs/kit": "next", "@sveltejs/kit": "next",
"bootstrap-icons": "^1.8.1",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1", "eslint-plugin-svelte3": "^3.2.1",
@ -20,5 +22,8 @@
"prettier-plugin-svelte": "^2.5.0", "prettier-plugin-svelte": "^2.5.0",
"svelte": "^3.44.0" "svelte": "^3.44.0"
}, },
"type": "module" "type": "module",
"dependencies": {
"sveltestrap": "^5.9.0"
}
} }

11
src/app.html
View File

@ -1,13 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="fr" class="h-100">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="" /> <meta name="description" content="" />
<link rel="icon" href="%svelte.assets%/favicon.png" /> <link rel="icon" href="%svelte.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="maatma">
<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% %svelte.head%
</head> </head>
<body> <body class="h-100">
<div>%svelte.body%</div> <div class="d-flex flex-column justify-content-between h-100">%svelte.body%</div>
<script defer src="https://commento.nemunai.re/js/commento.js"></script>
</body> </body>
</html> </html>

30
src/components/Header.svelte Normal file
View File

@ -0,0 +1,30 @@
<script>
import {
Icon,
Nav,
Navbar,
NavbarBrand,
NavItem,
NavLink,
} from 'sveltestrap';
export let activemenu = '';
export { className as class };
let className = '';
</script>
<Navbar class={className} color="dark" dark expand="xs">
<NavbarBrand href=".">
Maatma Videos
</NavbarBrand>
<Nav navbar>
<NavItem>
<NavLink
href="/maatma/"
>
<Icon name="signpost-fill" />
Retour à Maatma
</NavLink>
</NavItem>
</Nav>
</Navbar>

18
src/components/VideoThumb.svelte Normal file
View File

@ -0,0 +1,18 @@
<script>
import { goto } from '$app/navigation';
import {
Card,
CardHeader,
CardTitle,
} from 'sveltestrap';
export let video = {};
</script>
<Card style="cursor: pointer" class="mb-3" on:click={() => {goto(video.id)}}>
<img src={video.thumb} alt={video.title} class="card-img-top">
<CardHeader>
<CardTitle>{video.title}</CardTitle>
</CardHeader>
</Card>

6
src/hooks.js Normal file
View File

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

74
src/routes/[vid].svelte Normal file
View File

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

61
src/routes/__layout.svelte Normal file
View File

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

30
src/routes/index.svelte
View File

@ -1,2 +1,28 @@
<h1>Welcome to SvelteKit</h1> <script>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> 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>

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

@ -0,0 +1,27 @@
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();

9
svelte.config.js
View File

@ -1,9 +1,14 @@
import adapter from '@sveltejs/adapter-auto'; import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
kit: { kit: {
adapter: adapter() adapter: adapter({
fallback: 'index.html'
}),
paths: {
base: '/videos',
},
} }
}; };