Site done
This commit is contained in:
parent
d747d9419f
commit
cca01dc055
28
package-lock.json
generated
28
package-lock.json
generated
@ -89,6 +89,11 @@
|
||||
"integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
|
||||
"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": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
|
||||
@ -131,6 +136,15 @@
|
||||
"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": {
|
||||
"version": "1.0.0-next.47",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.47.tgz",
|
||||
@ -230,6 +244,12 @@
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
|
||||
"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": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@ -1323,6 +1343,14 @@
|
||||
"integrity": "sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==",
|
||||
"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": {
|
||||
"version": "6.8.0",
|
||||
"resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
|
||||
|
||||
@ -12,7 +12,9 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/adapter-static": "^1.0.0-next.29",
|
||||
"@sveltejs/kit": "next",
|
||||
"bootstrap-icons": "^1.8.1",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^3.2.1",
|
||||
@ -20,5 +22,8 @@
|
||||
"prettier-plugin-svelte": "^2.5.0",
|
||||
"svelte": "^3.44.0"
|
||||
},
|
||||
"type": "module"
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"sveltestrap": "^5.9.0"
|
||||
}
|
||||
}
|
||||
|
||||
11
src/app.html
11
src/app.html
@ -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
30
src/components/Header.svelte
Normal 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
18
src/components/VideoThumb.svelte
Normal 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
6
src/hooks.js
Normal 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
74
src/routes/[vid].svelte
Normal 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
61
src/routes/__layout.svelte
Normal 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…
|
||||
</Container>
|
||||
{:else}
|
||||
<slot></slot>
|
||||
{/if}
|
||||
</Container>
|
||||
@ -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
27
src/stores/videos.js
Normal 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();
|
||||
@ -1,9 +1,14 @@
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
kit: {
|
||||
adapter: adapter()
|
||||
adapter: adapter({
|
||||
fallback: 'index.html'
|
||||
}),
|
||||
paths: {
|
||||
base: '/videos',
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user