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
commit cca01dc055
11 changed files with 293 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app.html
View file

@ -1,13 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr" class="h-100">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="%svelte.assets%/favicon.png" />
<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%
</head>
<body>
<div>%svelte.body%</div>
<body class="h-100">
<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>
</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>
<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>

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();