dergrimm
/
schwarzesbrett
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix image scaling
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Dominic Grimm 2022-08-02 20:29:34 +02:00
parent 93e9794ed1
commit 750f91452b
1 changed files with 53 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
docker/schwarzesbrett/src/routes/index.svelte
View File

@ -1,12 +1,17 @@
<script lang="ts">
import * as api from "$lib/api";
let fetchData = api.fetchData();
// let fetchData = api.fetchData();
let fetchData = [api.fetchData()];
let listingIndex = 0;
function updateListingIndex(amount: number): void {
if (listingIndex == amount - 2) {
fetchData = api.fetchData();
fetchData.shift();
fetchData.push(api.fetchData());
}
if (fetchData.length == 0) {
fetchData.push(api.fetchData());
}
if (listingIndex >= amount - 1) {
@ -30,63 +35,59 @@
}
</script>
{#await fetchData}
<p>Loading...</p>
{:then data}
<div class="brett center-box">
<div class="center">
{#if data.listings[listingIndex].type == api.ListingType.IMAGE}
<img
class="dynamic-size"
<div class="brett center-box">
{#await fetchData[0]}
<p>Loading...</p>
{:then data}
{#if data.listings[listingIndex].type == api.ListingType.IMAGE}
<img
class="center dynamic-size"
src={api.generateContentURL(data.listings[listingIndex].content)}
alt={data.listings[listingIndex].name}
on:load={() =>
handleTime(
data.listings[listingIndex].time || 10,
data.listings.length
)}
/>
{:else if data.listings[listingIndex].type == api.ListingType.VIDEO}
<video
class="center dynamic-size"
autoplay
playsinline
on:load={() =>
handleVideoLoad(
data.listings[listingIndex].time,
data.listings.length
)}
on:ended={() => updateListingIndex(data.listings.length)}
>
<source
src={api.generateContentURL(data.listings[listingIndex].content)}
alt={data.listings[listingIndex].name}
width="100%"
on:load={() =>
handleTime(
data.listings[listingIndex].time || 10,
data.listings.length
)}
/>
{:else if data.listings[listingIndex].type == api.ListingType.VIDEO}
<video
class="dynamic-size"
autoplay
playsinline
on:load={() =>
handleVideoLoad(
data.listings[listingIndex].time,
data.listings.length
)}
on:ended={() => updateListingIndex(data.listings.length)}
>
<source
src={api.generateContentURL(data.listings[listingIndex].content)}
/>
<track kind="captions" />
<b class="error">Videos are not supported!</b>
</video>
{/if}
</div>
<track kind="captions" />
<b class="error">Videos are not supported!</b>
</video>
{/if}
{:catch error}
<p><b class="error">An error occured! {error}</b></p>
{/await}
<div class="banner">
<div class="banner-wrapper">
<span class="banner-pre">Powered by </span>
<a class="banner-name" href="https://dergrimm.net" target="_blank">
<code>Dominic Grimm &lt;dominic@dergrimm.net&gt;</code>
</a>
</div>
<div class="banner">
<div class="banner-wrapper">
<span class="banner-pre">Powered by </span>
<a class="banner-name" href="https://dergrimm.net" target="_blank">
<code>Dominic Grimm &lt;dominic@dergrimm.net&gt;</code>
</a>
</div>
</div>
{:catch error}
<p><b class="error">An error occured! {error}</b></p>
{/await}
</div>
<style lang="scss">
.brett {
cursor: none;
width: 100vw;
height: 100vh;
background-color: black;
color: white;
* {
pointer-events: none;
@ -111,19 +112,16 @@
}
.banner-pre {
// opacity: 30%;
font-size: large;
}
.banner-name {
// opacity: 70%;
font-size: x-large;
color: blue;
text-decoration: underline;
}
.center-box {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
@ -135,7 +133,8 @@
}
.dynamic-size {
max-height: 100vh;
width: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
</style>