Fix image scaling

docker/schwarzesbrett/src/routes/index.svelte

@@ -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">
+  {:then data}
     {#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">
@@ -76,17 +81,13 @@
       </a>
     </div>
   </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>