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

This commit is contained in:
Dominic Grimm 2022-08-02 20:29:34 +02:00
parent 93e9794ed1
commit 750f91452b

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