video handling, tweaks

onboarding/package/assets/data/css/styles.css

@@ -19,7 +19,7 @@ body {
     transform: scale(var(--scale));
     transform-origin: 0 0;
 
-    background-color: white;
+    background-color: black;
 
     margin: 0;
     padding: 0;
@@ -133,6 +133,7 @@ button.slide-button.next {
     position: relative;
     padding: 1rem 8rem;
     height: calc(var(--height) / 4);
+    background-color: white;
 
     overflow: auto;
 }

onboarding/package/assets/data/js/Slider.js

@@ -74,34 +74,45 @@ class Slider {
     }
 
     onScroll(e) {
-        this.activeSlide = Math.round(e.target.scrollLeft / 800);
+        let newSlide = Math.round(e.target.scrollLeft / 800);
+        if(this.activeSlide != newSlide) {
+            this.handleVideoPlayback(this.activeSlide, newSlide);
+            this.activeSlide = newSlide;
+        }
     }
 
     next() {
-        // stop old video
-        if (this.getType(this.activeSlide) == "video") {
-            this.slides[this.activeSlide].querySelector("video").pause();
-        }
-
         // scroll to next slide
         let targetSlide = this.activeSlide >= (this.data.length - 1) ? 0 : this.activeSlide + 1;
         this.element.scrollTo(targetSlide * 800, 0);
 
+        this.handleVideoPlayback(this.activeSlide, targetSlide);
+
+        this.start();
+    }
+
+    handleVideoPlayback(oldSlideIndex, newSlideIndex) {
+
+        // stop old video
+        if (this.getType(oldSlideIndex) == "video") {
+            this.slides[oldSlideIndex].querySelector("video").pause();
+        }
+
         // start new video and timeout
-        if (this.getType(targetSlide) == "video") {
-            let video = this.slides[targetSlide].querySelector("video");
+        if (this.getType(newSlideIndex) == "video") {
+            let video = this.slides[newSlideIndex].querySelector("video");
             video.currentTime = 0
             video.play();
         }
 
-        this.start();
-
     }
 
     previous() {
         let targetSlide = this.activeSlide <= 0 ? (this.data.length - 1) : this.activeSlide - 1
         this.element.scrollTo(targetSlide * 800, 0);
 
+        this.handleVideoPlayback(this.activeSlide, targetSlide);
+
         this.start();
     }
 

onboarding/package/assets/data/slides/slides.js

@@ -1,8 +1,6 @@
 var slides = [
     {
         image: "Hello World.mp4",
-        title: "",
-        description: ""
     },
     {
         image: "placeholder-16x9.png",
@@ -17,6 +15,6 @@ var slides = [
     {
         image: "placeholder-16x9.png",
         title: "Documentation",
-        description: `You can find manuals and information at [tooloop-os.org](https://tooloop-os.org).`
+        description: `You can find manuals and information at **tooloop-os.org**.`
     },
 ]