From 4701c0804b9d2c5a1afc14f1ad4ef7082b2bc287 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Mon, 22 Sep 2025 23:06:18 +0200
Subject: [PATCH] Fix slideshow transition

---
 com/static/bundled/com/slideshow-index.ts |  2 ++
 com/static/css/slideshow.scss             | 38 ++++++++++++++++++++---
 com/templates/com/screen_slideshow.jinja  |  3 +-
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/com/static/bundled/com/slideshow-index.ts b/com/static/bundled/com/slideshow-index.ts
index 6d5aad3e..f52623ce 100644
--- a/com/static/bundled/com/slideshow-index.ts
+++ b/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;
         }
diff --git a/com/static/css/slideshow.scss b/com/static/css/slideshow.scss
index da2bc178..3f127cb7 100644
--- a/com/static/css/slideshow.scss
+++ b/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;
     }
diff --git a/com/templates/com/screen_slideshow.jinja b/com/templates/com/screen_slideshow.jinja
index 8b53f0e6..f3354aa2 100644
--- a/com/templates/com/screen_slideshow.jinja
+++ b/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>