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.
62 lines
1.4 KiB
62 lines
1.4 KiB
2 years ago
|
<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>
|