76 lines
2.1 KiB
Svelte
76 lines
2.1 KiB
Svelte
<script>
|
|
import {
|
|
Container,
|
|
Col,
|
|
Row,
|
|
} from 'sveltestrap';
|
|
|
|
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 data;
|
|
</script>
|
|
|
|
{#if $idx_videos[data.video_id]}
|
|
<Row class="mt-3 mb-5">
|
|
<Col>
|
|
<div class="ratio ratio-16x9 mb-3">
|
|
<video controls autoplay poster={$idx_videos[data.video_id].thumb} src={$idx_videos[data.video_id].url} />
|
|
</div>
|
|
{#if $idx_videos[data.video_id].title}
|
|
<h1>
|
|
{$idx_videos[data.video_id].title}
|
|
</h1>
|
|
{/if}
|
|
{#if $idx_videos[data.video_id].description}
|
|
<p>
|
|
{@html $idx_videos[data.video_id].description}
|
|
</p>
|
|
{/if}
|
|
<Commento pageId={'/videos/' + data.video_id} />
|
|
</Col>
|
|
|
|
<Col md="3" lg="4">
|
|
{#if $idx_videos[data.video_id].next && $idx_videos[$idx_videos[data.video_id].next]}
|
|
<Row>
|
|
<Col xs="auto">
|
|
<h4>Prochaine vidéo</h4>
|
|
</Col>
|
|
<Col>
|
|
<hr>
|
|
</Col>
|
|
</Row>
|
|
<VideoThumb video={$idx_videos[$idx_videos[data.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 as video (video.id)}
|
|
{#if video.id != $idx_videos[data.video_id].next && video.id != data.video_id}
|
|
<VideoThumb {video} />
|
|
{/if}
|
|
{/each}
|
|
</Col>
|
|
</Row>
|
|
{:else}
|
|
<Container class="mt-3 mb-5 text-center">
|
|
<h1>
|
|
Erreur 404
|
|
<small class="text-muted">Vidéo introuvable</small>
|
|
</h1>
|
|
<p>
|
|
La vidéo à laquelle vous essayez d'accéder n'existe pas !
|
|
</p>
|
|
<p>
|
|
Vous pouvez retourner à <a href=".">la page d'accueil</a>.
|
|
</p>
|
|
</Container>
|
|
{/if}
|