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/VideoIndex.svelte

62 lines
1.4 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 Icon from "$/client/components/Icon.svelte";
import IconImage from "$/client/components/IconImage.svelte";
import SnapImage from "$/client/components/SnapImage.svelte";
let available_media = [];
onMount(async () => {
const [status, data] = await api.get("/api/media");
if(status === 200) {
available_media = data;
} else {
console.error("Invalid response", status, data);
}
});
</script>
<style>
videos {
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-gap: 0.5rem;
align-self: start;
}
</style>
<Layout fixed={ false } authenticated={ true } fullscreen={ true } footer={ false } testid="home-page">
<videos>
{#each available_media 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>
<video-views>
<Icon name="user" /> { media.views }
</video-views>
<video-tags>
{ media.tags }
</video-tags>
</bottom>
</card>
{/each}
</videos>
</Layout>