Fix slideshow transition

com/static/bundled/com/slideshow-index.ts

@@ -12,11 +12,13 @@ document.addEventListener("alpine:init", () => {
     elapsed: 0,
 
     current: 0,
+    previous: 0,
 
     init() {
       this.$watch("elapsed", () => {
         const displayTime = this.posters[this.current].displayTime * 1000;
         if (this.elapsed > displayTime) {
+          this.previous = this.current;
           this.current = this.getNext();
           this.elapsed = 0;
         }

com/static/css/slideshow.scss

@@ -76,6 +76,7 @@ body {
       justify-content: center;
 
       top: 0px;
+      left: 0%;
 
       img {
         max-width: 100%;
@@ -83,12 +84,21 @@ body {
         object-fit: contain;
       }
 
-      &.active {
-        animation: scrolling 1s;
+      &.current {
         display: inline-flex;
+        left: 0%;
+        animation: scrolling-in 1s linear;
       }
 
-      @keyframes scrolling {
+      &.previous {
+        display: inline-flex;
+        animation: scrolling-out 1s linear;
+        opacity: 0;
+        transition: opacity 0.1s;
+        transition-delay: 0.9s;
+      }
+
+      @keyframes scrolling-in {
         0% {
           transform: translateX(100%);
         }
@@ -98,6 +108,16 @@ body {
         }
       }
 
+      @keyframes scrolling-out {
+        0% {
+          transform: translateX(0%);
+        }
+
+        100% {
+          transform: translateX(-100%);
+        }
+      }
+
     }
   }
 
@@ -131,14 +151,24 @@ body {
   }
 
   progress {
+    --color: #304c83;
+
     position: absolute;
     bottom: 0px;
     height: 10px;
-    // color: #304c83;
+    color: var(--color);
     width: 100%;
     margin-bottom: 0px;
     border: none;
 
+    &::-moz-progress-bar {
+      background: var(--color);
+    }
+
+    &::-webkit-progress-value {
+      background: var(--color);
+    }
+
     &[value] {
       background-color: transparent;
     }

com/templates/com/screen_slideshow.jinja

@@ -19,7 +19,8 @@
       <div id="slides">
         <template x-for="(poster, index) in posters">
           <div class="slide" :class="{
-                                     active: index === current,
+                                     current: index === current,
+                                     previous: index !== current && index === previous,
                                      }">
             <img :src="poster.url">
           </div>