organize files, parse description from markdown, video handling

onboarding/package/assets/data/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Welcome to Tooloop OS</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="css/styles.css">
 </head>
 
 <body>
@@ -15,15 +15,12 @@
     <template id="slide-template">
         <div class="slide">
             <section class="image"></section>
-            <section class="description">
+            <section class="description"></section>
-                <h1></h1>
-                <p></p>
-            </section>
         </div>
     </template>
 
     <nav>
-        <button class="slide-button previous" onclick="slider.previous(); slider.stop();">
+        <button class="slide-button previous" onclick="slider.previous();">
             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24"
                 height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="miter"
                 stroke-linejoin="miter">
@@ -32,7 +29,7 @@
             </svg>
         </button>
 
-        <button class="slide-button next" onclick="slider.next(); slider.stop();">
+        <button class="slide-button next" onclick="slider.next();">
             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24"
                 height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="miter"
                 stroke-linejoin="miter">
@@ -43,8 +40,7 @@
 
         <button class="close-button" onclick="window.close();">
             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24"
-                viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round"
+                viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                 <path d="M18 6l-12 12" />
                 <path d="M6 6l12 12" />
@@ -52,13 +48,12 @@
         </button>
     </nav>
 
+    <script src="js/marked.min.js"></script>
     <script src="slides/slides.js"></script>
-    <script src="Slider.js"></script>
+    <script src="js/Slider.js"></script>
 
     <script>
-        var slider = new Slider("#slider", "#slide-template", slides, 12000);
+        var slider = new Slider("#slider", "#slide-template", slides, 8000);
-        // var scale = document.querySelector("html").clientWidth > 1920 ? 2.0 : 1.0;
-        // document.querySelector(':root').style.setProperty("--scale", scale);
     </script>
 
 </body>

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

@@ -1,13 +1,15 @@
 class Slider {
 
-    element;
+    imageTypes = ["png", "gif", "webp", "jpg"];
-    slides;
+    videoTypes = ["mp4", "webm"];
-    template;
+
     data;
+    element;
+    template;
+    slides = [];
     activeSlide = 0;
     slideDuration;
-    autoplayInterval;
+    slideTimeout;
-    ip;
 
     constructor(element, template, data, slideDuration = 10000) {
         this.element = document.querySelector(element);
@@ -19,21 +21,17 @@ class Slider {
         // append slides
         for (let i = 0; i < this.data.length; i++) {
             let slide = this.template.content.cloneNode(true);
-            let type = this.data[i].image.split('.').pop().toLowerCase();
+            let type = this.getType(i);
 
             switch (type) {
                 // image
-                case "png":
+                case "image":
-                case "jpg":
-                case "webp":
-                case "gif":
                     let img = document.createElement("img");
-                    img.src = this.data[i].image;
+                    img.src = "./slides/" + this.data[i].image;
                     slide.querySelector(".image").appendChild(img);
                     break;
 
-                case "mp4":
+                case "video":
-                case "webm":
                     let video = document.createElement("video");
                     video.autoplay = true;
                     video.loop = true;
@@ -49,42 +47,76 @@ class Slider {
             // texts
             let hasText = this.data[i].title || this.data[i].description;
             if (hasText) {
-                let title = slide.querySelector(".description h1");
+                // let title = slide.querySelector(".description h1");
-                let description = slide.querySelector(".description p");
+                // title.textContent = this.data[i].title;
+                let description = slide.querySelector(".description");
+                description.innerHTML = marked.parse(this.data[i].description);
+
+                let title = document.createElement("h1");
                 title.textContent = this.data[i].title;
-                description.textContent = this.data[i].description;
+                description.prepend(title);
             }
 
             // slide
-            let newslide = this.element.appendChild(slide);
+            this.element.appendChild(slide);
+
             let slideNode = document.querySelector(element + " .slide:last-child");
             slideNode.id = "slide-" + i;
             slideNode.classList.toggle("no-text", !hasText);
+            this.slides.push(slideNode);
         }
 
         // observe scroll position
         this.element.onscroll = e => this.onScroll(e);
 
         // start auto play
-        this.autoplayInterval = setInterval(() => { this.next(); }, this.slideDuration);
+        this.start();
     }
 
     onScroll(e) {
-        this.activeSlide = Math.round(e.target.scrollLeft / 640);
+        this.activeSlide = Math.round(e.target.scrollLeft / 800);
     }
 
     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 * 640, 0);
+        this.element.scrollTo(targetSlide * 800, 0);
+
+        // start new video and timeout
+        if (this.getType(targetSlide) == "video") {
+            let video = this.slides[targetSlide].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 * 640, 0);
+        this.element.scrollTo(targetSlide * 800, 0);
+
+        this.start();
     }
 
-    stop() {
+    start(timeout = this.slideDuration) {
-        clearInterval(this.autoplayInterval);
+        clearTimeout(this.slideTimeout);
+        this.slideTimeout = setTimeout(() => { this.next(); }, timeout);
+    }
+
+    getType(slideIndex) {
+        let type = this.data[slideIndex].image.split('.').pop().toLowerCase();
+
+        if (this.imageTypes.includes(type)) return "image";
+        if (this.videoTypes.includes(type)) return "video";
+
+        return false;
     }
 
 }

onboarding/package/assets/data/js/marked.min.js

@@ -0,0 +1,6 @@
+/**
+ * marked v12.0.0 - a markdown parser
+ * Copyright (c) 2011-2024, Christopher Jeffrey. (MIT Licensed)
+ * https://github.com/markedjs/marked
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).marked={})}(this,(function(e){"use strict";function t(){return{async:!1,breaks:!1,extensions:null,gfm:!0,hooks:null,pedantic:!1,renderer:null,silent:!1,tokenizer:null,walkTokens:null}}function n(t){e.defaults=t}e.defaults={async:!1,breaks:!1,extensions:null,gfm:!0,hooks:null,pedantic:!1,renderer:null,silent:!1,tokenizer:null,walkTokens:null};const s=/[&<>"']/,r=new RegExp(s.source,"g"),i=/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/,l=new RegExp(i.source,"g"),o={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},a=e=>o[e];function c(e,t){if(t){if(s.test(e))return e.replace(r,a)}else if(i.test(e))return e.replace(l,a);return e}const h=/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/gi;function p(e){return e.replace(h,((e,t)=>"colon"===(t=t.toLowerCase())?":":"#"===t.charAt(0)?"x"===t.charAt(1)?String.fromCharCode(parseInt(t.substring(2),16)):String.fromCharCode(+t.substring(1)):""))}const u=/(^|[^\[])\^/g;function k(e,t){let n="string"==typeof e?e:e.source;t=t||"";const s={replace:(e,t)=>{let r="string"==typeof t?t:t.source;return r=r.replace(u,"$1"),n=n.replace(e,r),s},getRegex:()=>new RegExp(n,t)};return s}function g(e){try{e=encodeURI(e).replace(/%25/g,"%")}catch(e){return null}return e}const f={exec:()=>null};function d(e,t){const n=e.replace(/\|/g,((e,t,n)=>{let s=!1,r=t;for(;--r>=0&&"\\"===n[r];)s=!s;return s?"|":" |"})).split(/ \|/);let s=0;if(n[0].trim()||n.shift(),n.length>0&&!n[n.length-1].trim()&&n.pop(),t)if(n.length>t)n.splice(t);else for(;n.length<t;)n.push("");for(;s<n.length;s++)n[s]=n[s].trim().replace(/\\\|/g,"|");return n}function x(e,t,n){const s=e.length;if(0===s)return"";let r=0;for(;r<s;){const i=e.charAt(s-r-1);if(i!==t||n){if(i===t||!n)break;r++}else r++}return e.slice(0,s-r)}function b(e,t,n,s){const r=t.href,i=t.title?c(t.title):null,l=e[1].replace(/\\([\[\]])/g,"$1");if("!"!==e[0].charAt(0)){s.state.inLink=!0;const e={type:"link",raw:n,href:r,title:i,text:l,tokens:s.inlineTokens(l)};return s.state.inLink=!1,e}return{type:"image",raw:n,href:r,title:i,text:c(l)}}class w{options;rules;lexer;constructor(t){this.options=t||e.defaults}space(e){const t=this.rules.block.newline.exec(e);if(t&&t[0].length>0)return{type:"space",raw:t[0]}}code(e){const t=this.rules.block.code.exec(e);if(t){const e=t[0].replace(/^ {1,4}/gm,"");return{type:"code",raw:t[0],codeBlockStyle:"indented",text:this.options.pedantic?e:x(e,"\n")}}}fences(e){const t=this.rules.block.fences.exec(e);if(t){const e=t[0],n=function(e,t){const n=e.match(/^(\s+)(?:```)/);if(null===n)return t;const s=n[1];return t.split("\n").map((e=>{const t=e.match(/^\s+/);if(null===t)return e;const[n]=t;return n.length>=s.length?e.slice(s.length):e})).join("\n")}(e,t[3]||"");return{type:"code",raw:e,lang:t[2]?t[2].trim().replace(this.rules.inline.anyPunctuation,"$1"):t[2],text:n}}}heading(e){const t=this.rules.block.heading.exec(e);if(t){let e=t[2].trim();if(/#$/.test(e)){const t=x(e,"#");this.options.pedantic?e=t.trim():t&&!/ $/.test(t)||(e=t.trim())}return{type:"heading",raw:t[0],depth:t[1].length,text:e,tokens:this.lexer.inline(e)}}}hr(e){const t=this.rules.block.hr.exec(e);if(t)return{type:"hr",raw:t[0]}}blockquote(e){const t=this.rules.block.blockquote.exec(e);if(t){const e=x(t[0].replace(/^ *>[ \t]?/gm,""),"\n"),n=this.lexer.state.top;this.lexer.state.top=!0;const s=this.lexer.blockTokens(e);return this.lexer.state.top=n,{type:"blockquote",raw:t[0],tokens:s,text:e}}}list(e){let t=this.rules.block.list.exec(e);if(t){let n=t[1].trim();const s=n.length>1,r={type:"list",raw:"",ordered:s,start:s?+n.slice(0,-1):"",loose:!1,items:[]};n=s?`\\d{1,9}\\${n.slice(-1)}`:`\\${n}`,this.options.pedantic&&(n=s?n:"[*+-]");const i=new RegExp(`^( {0,3}${n})((?:[\t ][^\\n]*)?(?:\\n|$))`);let l="",o="",a=!1;for(;e;){let n=!1;if(!(t=i.exec(e)))break;if(this.rules.block.hr.test(e))break;l=t[0],e=e.substring(l.length);let s=t[2].split("\n",1)[0].replace(/^\t+/,(e=>" ".repeat(3*e.length))),c=e.split("\n",1)[0],h=0;this.options.pedantic?(h=2,o=s.trimStart()):(h=t[2].search(/[^ ]/),h=h>4?1:h,o=s.slice(h),h+=t[1].length);let p=!1;if(!s&&/^ *$/.test(c)&&(l+=c+"\n",e=e.substring(c.length+1),n=!0),!n){const t=new RegExp(`^ {0,${Math.min(3,h-1)}}(?:[*+-]|\\d{1,9}[.)])((?:[ \t][^\\n]*)?(?:\\n|$))`),n=new RegExp(`^ {0,${Math.min(3,h-1)}}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)`),r=new RegExp(`^ {0,${Math.min(3,h-1)}}(?:\`\`\`|~~~)`),i=new RegExp(`^ {0,${Math.min(3,h-1)}}#`);for(;e;){const a=e.split("\n",1)[0];if(c=a,this.options.pedantic&&(c=c.replace(/^ {1,4}(?=( {4})*[^ ])/g,"  ")),r.test(c))break;if(i.test(c))break;if(t.test(c))break;if(n.test(e))break;if(c.search(/[^ ]/)>=h||!c.trim())o+="\n"+c.slice(h);else{if(p)break;if(s.search(/[^ ]/)>=4)break;if(r.test(s))break;if(i.test(s))break;if(n.test(s))break;o+="\n"+c}p||c.trim()||(p=!0),l+=a+"\n",e=e.substring(aLine truncated

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

@@ -1,8 +1,22 @@
 var slides = [
-    { image: "../../../../../media-player/package/assets/data/Tooloop Greeter Intro.mp4", title: "", description: "" },
+    {
-    { image: "../../../../../gpu-benchmark/media/glmark2-buffer.jpg", title: "Desktop", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
+        image: "Hello World.mp4",
-    { image: "../../../../../gpu-benchmark/media/glmark2-jellyfish.jpg", title: "Menu", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
+        title: "",
-    { image: "../../../../../gpu-benchmark/media/glmark2-refract.jpg", title: "Control Center", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
+        description: ""
-    { image: "../../../../../gpu-benchmark/media/glmark2-shadow.jpg", title: "Files", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
+    },
-    { image: "../../../../../gpu-benchmark/media/glmark2-thumbnail.jpg", title: "Remote control", description: "Lorem ipsum dolor hit me. Mommy says knock you out." }
+    {
+        image: "placeholder-16x9.png",
+        title: "Mouse cursor",
+        description: `Your mouse cursor is hidden. It will show up if you move it. Click on the desktop to access the _menu_.`
+    },
+    {
+        image: "placeholder-16x9.png",
+        title: "Network access",
+        description: `Tooloop Boxes can be managed over the network. Just type the IP-address of this box into your browser.`
+    },
+    {
+        image: "placeholder-16x9.png",
+        title: "Documentation",
+        description: `You can find manuals and information at [tooloop-os.org](https://tooloop-os.org).`
+    },
 ]