This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-template/client/pages/Video.svelte

121 lines
2.9 KiB

<script>
import Layout from "$/client/Layout.svelte";
import { onMount } from "svelte";
import api from "$/client/api.js";
import {link} from 'svelte-spa-router';
import { defer, page_change } from "$/client/helpers.js";
import Icon from "$/client/components/Icon.svelte";
import WTVideo from "$/client/components/WTVideo.svelte";
import Video from "$/client/components/Video.svelte";
import IconImage from "$/client/components/IconImage.svelte";
import SnapImage from "$/client/components/SnapImage.svelte";
export let params = {};
let media = {};
let media_defer = defer();
const load_related = async () => {
const [ status, data ] = await api.get("/api/media");
return status == 200 ? data : [];
}
const load_media = async () => {
const [status, data] = await api.get("/api/media", {
media_id: params.id
});
if(status === 200) {
media = data[0];
media_defer.resolve();
} else {
console.error("Invalid response", status, data);
media_defer.reject();
}
}
$: if(page_change(media, params)) {
media_defer = defer();
load_media();
}
onMount(load_media);
</script>
<style>
content {
padding-top: var(--fixed-header-height);
flex-direction: row-reverse;
}
content > left {
overflow-y: auto;
min-height: calc(100vh - var(--fixed-header-height));
max-height: calc(100vh - var(--fixed-header-height));
}
content > right {
border: 1px solid green;
width: 100%;
}
video-display {
display: flex;
background-color: var(--value2);
width: 100%;
}
</style>
<Layout footer={ false } fixed={ true } authenticated={ true } fullwidth={ true }>
<content>
<left>
{#await load_related()}
&nbsp;
{:then related}
{#each related as media}
<card>
<top>
<a href="/video/{ media.id }/" use:link>
{#if media.poster}
<SnapImage width={ media.width / 3 } height={ media.height / 3 } src={ media.poster } />
{:else}
<IconImage name="video" />
{/if}
</a>
</top>
<bottom>{ media.id}</bottom>
</card>
{/each}
{/await}
</left>
<right>
{#await media_defer}
&nbsp;
{:then}
<video-display style="--aspect-ratio: 16/9;">
{#if media.torrent_url}
<WTVideo media={ media } />
{:else}
<Video src={ media.src } poster={ media.poster } />
{/if}
</video-display>
<info>
<tile>
<left>
<Icon name="user" size="48" />
</left>
<middle>
ID: { media.id } { media.title || "No title." } { media.duration }
</middle>
<right>
{ media.views } <Icon name="eye" />
</right>
</tile>
</info>
{/await}
</right>
</content>
</Layout>