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

37
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,17 +35,15 @@
} }
</script> </script>
{#await fetchData} <div class="brett center-box">
{#await fetchData[0]}
<p>Loading...</p> <p>Loading...</p>
{:then data} {:then data}
<div class="brett center-box">
<div class="center">
{#if data.listings[listingIndex].type == api.ListingType.IMAGE} {#if data.listings[listingIndex].type == api.ListingType.IMAGE}
<img <img
class="dynamic-size" class="center dynamic-size"
src={api.generateContentURL(data.listings[listingIndex].content)} src={api.generateContentURL(data.listings[listingIndex].content)}
alt={data.listings[listingIndex].name} alt={data.listings[listingIndex].name}
width="100%"
on:load={() => on:load={() =>
handleTime( handleTime(
data.listings[listingIndex].time || 10, data.listings[listingIndex].time || 10,
@ -49,7 +52,7 @@
/> />
{:else if data.listings[listingIndex].type == api.ListingType.VIDEO} {:else if data.listings[listingIndex].type == api.ListingType.VIDEO}
<video <video
class="dynamic-size" class="center dynamic-size"
autoplay autoplay
playsinline playsinline
on:load={() => on:load={() =>
@ -66,7 +69,9 @@
<b class="error">Videos are not supported!</b> <b class="error">Videos are not supported!</b>
</video> </video>
{/if} {/if}
</div> {:catch error}
<p><b class="error">An error occured! {error}</b></p>
{/await}
<div class="banner"> <div class="banner">
<div class="banner-wrapper"> <div class="banner-wrapper">
@ -77,16 +82,12 @@
</div> </div>
</div> </div>
</div> </div>
{:catch error}
<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>