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

Fix image scaling
All checks were successful
continuous-integration/drone/push Build is passing
Details

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