Merge pull request #13 from Tooloop/dev

Merge changes for 24.04
2026-04-27 20:41:37 +02:00 · 2024-07-23 16:38:19 +02:00
parent 8fc512b69b cdfcc6f858
commit 2e4abb9422
272 changed files with 827 additions and 165 deletions
@@ -0,0 +1,4 @@
 *.jpg filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
 *.mp4 filter=lfs diff=lfs merge=lfs -text
 *.ttf filter=lfs diff=lfs merge=lfs -text
@@ -1,4 +1,7 @@
 *.deb
 *.zip
 .DS_Store
-\#*
+\#*
 # Non open source packages
 kiosk-browser
@@ -0,0 +1,19 @@
 Package: tooloop-compositor
 Version: 1.0.0
 Maintainer: Tooloop Multimedia
 Homepage: https://www.tooloop.de
 Section: tooloop/addon
 Architecture: all
 Name: picom Compositor
 Depends: picom
 Recommends: picom-conf
 Thumbnail: picom-thumbnail.png
 Description: Installs the picom compositor to eliminate screen tearing.
 [picom](https://github.com/yshui/picom) is a compositor for X, and a fork of Compton.
 It has many features but we are primarily using it to fight screen tearing.
 .
 There is a graphical tool to configure picom:
 .
 ```bash
 picom-conf /home/tooloop/.config/picom.conf
 ```
@@ -0,0 +1,6 @@
 #!/bin/bash
 set -e
 picom &
 exit 0
@@ -0,0 +1,3 @@
 #!/bin/bash
 rm -f /assets/logs/picom.log
@@ -0,0 +1,54 @@
 # Example with all options at
 # /usr/share/picom-conf/picom.conf.example
 #################################
 #       General Settings        #
 #################################
 # Specify the backend to use: `xrender`, `glx`, or `xr_glx_hybrid`.
 # `xrender` is the default one.
 #
 backend = "glx";
 # backend = "xrender";
 # Enable/disable VSync.
 # vsync = false
 vsync = true;
 # GLX backend: Avoid using stencil buffer, useful if you don't have a stencil buffer.
 # Might cause incorrect opacity when rendering transparent content (but never
 # practically happened) and may not work with blur-background.
 # My tests show a 15% performance boost. Recommended.
 #
 glx-no-stencil = true;
 # GLX backend: Avoid rebinding pixmap on window damage.
 # Probably could improve performance on rapid window content changes,
 # but is known to break things on some drivers (LLVMpipe, xf86-video-intel, etc.).
 # Recommended if it works.
 #
 glx-no-rebind-pixmap = false;
 # Use X Sync fence to sync clients' draw calls, to make sure all draw
 # calls are finished before picom starts drawing. Needed on nvidia-drivers
 # with GLX backend for some users.
 #
 # xrender-sync-fence = false;
 # Set the log level. Possible values are:
 #  "trace", "debug", "info", "warn", "error"
 # in increasing level of importance. Case doesn't matter.
 # If using the "TRACE" log level, it's better to log into a file
 # using *--log-file*, since it can generate a huge stream of logs.
 #
 # log-level = "debug"
 log-level = "warn";
 # Set the log file.
 # If *--log-file* is never specified, logs will be written to stderr.
 # Otherwise, logs will to written to the given file, though some of the early
 # logs might still be written to the stderr.
 # When setting this option from the config file, it is recommended to use an absolute path.
 #
 log-file = "/assets/logs/picom.log";
@@ -1,4 +1,7 @@
 #!/bin/bash
 echo "-------------------------------------------------------------------------"
 echo "Copying packages to local repository"
 echo ""
 # move them to the repository
 for archive in *; do
@@ -13,9 +16,4 @@ done
 # update local package repository
 /opt/tooloop/scripts/tooloop-update-packages
-sudo systemctl restart tooloop-control.service
+sudo systemctl restart tooloop-control.service
 # list available packages
 #apt list tooloop*
 tree /assets/packages/
@@ -1,12 +1,12 @@
-Package: tooloop-glmark2
+Package: tooloop-gpu-benchmark
 Version: 1.0.0
 Maintainer: Tooloop Multimedia
 Homepage: https://www.tooloop.de
 Bugs: https://github.com/glmark2/glmark2
 Section: tooloop/presentation
 Depends: glmark2
-Architecture: amd64
+Architecture: all
-Name: glmark2
+Name: GPU Benchmark
 Thumbnail: glmark2-thumbnail.jpg
 Media: glmark2-jellyfish.jpg, glmark2-buffer.jpg, glmark2-refract.jpg, glmark2-shadow.jpg
 Description: OpenGL 2.0 and ES 2.0 benchmark
@@ -1,83 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slideshow</title>
    <style media="screen">
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            background: black;
        }
        .slide {
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: 1;
            background-size: cover;
            background-position: center center;
            opacity: 0;
            transition: opacity 1s;
        }
        .active {
            opacity: 1;
            z-index: 2;
        }
        .next {
            z-index: 3;
        }
    </style>
 </head>
 <body>
    <div id="slideshow">
        <div class="slide active" style="background-image: url(/media/assets/data/image1.jpg)"></div>
        <div class="slide" style="background-image: url(/media/assets/data/image2.jpg)"></div>
        <div class="slide" style="background-image: url(/media/assets/data/image3.jpg)"></div>
        <div class="slide" style="background-image: url(/media/assets/data/image4.jpg)"></div>
        <div class="slide" style="background-image: url(/media/assets/data/image5.jpg)"></div>
        <div class="slide" style="background-image: url(/media/assets/data/image6.jpg)"></div>
        <div class="slide" style="background-image: url(/media/assets/data/image7.jpg)"></div>
        <div class="slide" style="background-image: url(/media/assets/data/image8.jpg)"></div>
        <div class="slide" style="background-image: url(/media/assets/data/image9.jpg)"></div>
        <div class="slide" style="background-image: url(/media/assets/data/image10.jpg)"></div>
        <div class="slide" style="background-image: url(/media/assets/data/image11.jpg)"></div>
        <div class="slide" style="background-image: url(/media/assets/data/image12.jpg)"></div>
    </div>
    <script type="text/javascript">
        var active, next;
        function nextImage() {
            active = document.querySelector("#slideshow .slide.active");
            active.classList.remove("active");
            active = getNextSlide(active);
            active.classList.add("active");
            active.classList.remove("next");
            next = getNextSlide(active)
            next.classList.add("next")
        }
        function getNextSlide(slide) {
            return slide.nextElementSibling ? slide.nextElementSibling : document.querySelectorAll("#slideshow .slide")[0];
        }
        document.addEventListener("DOMContentLoaded", function () {
            setInterval("nextImage()", 7000);
        });
    </script>
 </body>
 </html>
@@ -1,11 +0,0 @@
 #!/bin/bash
 COMMAND="chromium-browser --noerrdialogs --kiosk --incognito /media/assets/presentation/slideshow.html"
 if [ $EUID == 0 ]; then
    su tooloop -c "$COMMAND" &
 else
    $COMMAND &
 fi
 exit 0
@@ -1,5 +0,0 @@
 #!/bin/bash
 killall chrome
 exit 0
@@ -0,0 +1,20 @@
 Package: tooloop-intel-media-va-driver-non-free
 Version: 1.0.0
 Maintainer: Tooloop Multimedia
 Homepage: https://www.tooloop.de
 Bugs: https://www.github.com/Tooloop/Tooloop-Packages
 Section: tooloop/addon
 Architecture: amd64
 Depends: intel-media-va-driver-non-free
 Name: Intel Hardware Video Acceleration
 Thumbnail: intel-media-va-driver.png
 Description: Installs the Intel Media Driver for VAAPI
 The [Intel Media Driver for VAAPI](https://github.com/intel/media-driver) is a 
 new VA-API (Video Acceleration API) user mode driver supporting hardware 
 accelerated decoding, encoding, and video post processing for GEN based 
 graphics hardware.
 .
 Installing this will reduce CPU load when decoding e. g. h.264 video if 
 supported by the playback software. As result your video will run smoother and 
 your device produces less heat.
@@ -0,0 +1,13 @@
 Package: tooloop-media-player
 Version: 1.0.0
 Maintainer: Tooloop Multimedia
 Homepage: https://www.tooloop.de
 Bugs: https://github.com/Tooloop/Tooloop-Packages
 Section: tooloop/presentation
 Architecture: all
 Depends: mpv
 Name: Media Player
 Description: A simple image and video player
 The tooloop media player is using [mpv](https://mpv.io/) to loop over all images and videos in `/assets/data`.
 Thumbnail: video-player-thumbnail.jpg
@@ -0,0 +1,76 @@
 # mpv
 mpv is a fork of mplayer2, which is a fork of MPlayer.
 mpv as a whole is licensed under the GNU General Public License GPL version 2
 or later (called GPLv2+ in this document, see LICENSE.GPL for full license
 text) by default, or the GNU Lesser General Public License LGPL version 2 or
 later (LGPLv2.1+ in this document, see LICENSE.LGPL for full license text) if
 built with the --enable-lgpl configure switch.
 Most source files are LGPLv2.1+ or GPLv2+, but some files are available under
 more liberal licenses, such as BSD, MIT, ISC, and possibly others. Look at the
 copyright header of each source file, and grep the sources for "Copyright" if
 you need to know details. C source files without Copyright notice are usually
 licensed as LGPLv2.1+. Also see the list of files with specific licenses below
 (not all files can have a standard license header).
 All new contributions must be LGPLv2.1+ licensed. Using a more liberal license
 compatible to LGPLv2.1+ is also ok.
 Changes done to GPL code must come with the implicit/explicit agreement that the
 project can relicense the changes to LGPLv2.1+ at a later point without asking
 the contributor. This is a safeguard for making potential relicensing of
 remaining GPL code to LGPLv2.1+ easier.
 See DOCS/contribute.md for binding rules wrt. licensing for contributions.
 For information about authors and contributors, consult the git log, which
 contains the complete SVN and CVS history as well.
 "v2.1+" in this context means "version 2.1 or later".
 Some libraries are GPLv2+ or GPLv3+ only. Building mpv with Samba support makes
 it GPLv3+.
 mpv can be built as LGPLv2.1+ with the --enable-lgpl configure option. To add
 a LGPL mode to mpv, MPlayer code had to be relicensed from GPLv2+ to LGPLv2.1+
 by asking the MPlayer authors for permission. Since permission could not be
 obtained from everyone, LGPL mode disables the following features, some of
 them quite central:
 - Linux X11 video output
 - BSD audio output via OSS
 - NVIDIA/Linux hardware decoding (vdpau, although nvdec usually works)
 - Linux TV input
 - minor features: jack, DVD, CDDA, SMB, CACA, legacy direct3d VO
 Some of these will be fixed in the future. The intended use for LGPL mode is
 with libmpv, and currently it's not recommended to build mpv CLI in LGPL mode
 at all.
 The following files are still GPL only (--enable-lgpl disables them):
    audio/out/ao_jack.c             will stay GPL
    audio/out/ao_oss.c              will stay GPL
    stream/dvb*                     must stay GPL
    stream/stream_cdda.c            unknown
    stream/stream_dvb.*             must stay GPL
    stream/stream_dvdnav.c          unknown
    video/out/vo_caca.c             unknown
    video/out/vo_direct3d.c         unknown
    video/out/vo_vaapi.c            probably impossible (some company's code)
    video/out/vo_vdpau.c            probably impossible (nVidia's code)
    video/out/vo_x11.c              probably impossible
    video/out/vo_xv.c               probably impossible
    video/out/x11_common.*          probably impossible
    video/vdpau.c                   hard (GPL-only parts must be ifdefed)
    video/vdpau.h                   unknown
    video/vdpau_mixer.*             actual code must be rewritten
    DOCS/man/                       GPLv2+
    bootstrap.py                    unknown license, probably GPLv2+ or LGPLv2+
    etc/mplayer-input.conf          unknown license, probably GPLv2+
    mpv.desktop                     unknown license, probably GPLv2+
    etc/restore-old-bindings.conf   unknown license, probably GPLv2+
 None of the cases listed above affect the final binary if it's built as
 LGPL. Linked libraries still can affect the final license (for example if
 FFmpeg was built as GPL).
@@ -0,0 +1,7 @@
 # A simple image and video player
 The tooloop media player is using [mpv](https://mpv.io/) to loop over all images and videos in `/assets/data`.
 ## Customizing
 Check out the start script if you want to fiddle with some mpv options. [Here's the reference manual](https://mpv.io/manual/).
@@ -0,0 +1,12 @@
 #!/bin/bash
 mpv \
 --fullscreen \
 --image-display-duration=5 \
 --loop-playlist \
 --no-osc \
 --no-osd-bar \
 --video-sync=display-resample \
 /assets/data &
 exit 0
@@ -3,6 +3,6 @@
 # here comes everything, you need to stop the running presentation
 # basically kill or stop everything you started in `start-presentation.sh`
-kill $(pidof mplayer)
+killall mpv
 exit 0
@@ -3,7 +3,7 @@ Version: 1.0.0
 Maintainer: Tooloop Multimedia
 Homepage: https://www.tooloop.de
 Section: tooloop/addon
-Architecture: amd64
+Architecture: all
 Name: nginx Webserver
 Depends: nginx, php-fpm, php-mbstring, php-curl, php-xml, php-gd
 Recommends: tooloop-transparent-cursor
@@ -21,7 +21,7 @@ server {
    location ~* \.php$ {
        try_files $uri =404;
-        fastcgi_pass unix:/var/run/php/php8.1-fpm-tooloop.sock;
+        fastcgi_pass unix:/var/run/php/php8.3-fpm-tooloop.sock;
        include fastcgi.conf;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_param PATH_INFO $fastcgi_path_info;
@@ -33,7 +33,7 @@ group = tooloop
 ;                            (IPv6 and IPv4-mapped) on a specific port;
 ;   '/path/to/unix/socket' - to listen on a unix socket.
 ; Note: This value is mandatory.
-listen = /var/run/php/php8.1-fpm-tooloop.sock
+listen = /var/run/php/php8.3-fpm-tooloop.sock
 ; Set listen(2) backlog.
 ; Default Value: 511 (-1 on FreeBSD and OpenBSD)
@@ -238,7 +238,7 @@ pm.max_spare_servers = 3
 ;   last request memory:  0
 ;
 ; Note: There is a real-time FPM status monitoring sample web page available
-;       It's available in: /usr/share/php/8.1/fpm/status.html
+;       It's available in: /usr/share/php/8.3/fpm/status.html
 ;
 ; Note: The value must start with a leading slash (/). The value can be
 ;       anything, but it may not be a good idea to use the .php extension or it
@@ -0,0 +1,13 @@
 Package: tooloop-onboarding
 Version: 1.0.0
 Maintainer: Tooloop Multimedia
 Homepage: https://www.tooloop.de
 Bugs: https://github.com/Tooloop/Tooloop-Packages
 Section: tooloop/presentation
 Architecture: all
 Depends: chromium-browser
 Name: Onboarding
 Description: Tipps and first steps
 Learn how to find your way in Tooloop OS.
 Thumbnail: onboarding-thumbnail.png
@@ -0,0 +1,214 @@
 :root {
    --font-size: 18px;
    --light-grey: #f2f2f2;
    --medium-grey: #999999;
    --dark-grey: #333333;
    --pink: #E6004C;
    --width: 800px;
    --height: 600px;
    --scale: 1.0;
    --slide-duration: 10s;
 }
@font-face {
    font-family: "Clear Sans";
    src: url("../fonts/ClearSans-Regular.ttf");
    font-weight: normal;
    font-style: normal;
 }
@font-face {
    font-family: "Clear Sans";
    src: url("../fonts/ClearSans-Italic.ttf");
    font-weight: normal;
    font-style: italic;
 }
@font-face {
    font-family: "Clear Sans";
    src: url("../fonts/ClearSans-Bold.ttf");
    font-weight: bold;
    font-style: normal;
 }
@font-face {
    font-family: "Clear Sans";
    src: url("../fonts/ClearSans-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
 }
 html {
    background-color: var(--dark-grey);
 }
 body {
    width: var(--width);
    height: var(--height);
    transform: scale(var(--scale));
    transform-origin: 0 0;
    background-color: black;
    margin: 0;
    padding: 0;
    font-size: var(--font-size);
    position: absolute;
    inset: 0;
    font-family: "Clear Sans", system-ui, sans-serif;
 }
 nav {
    position: absolute;
    inset: 0;
    pointer-events: none;
 }
 button {
    pointer-events: all;
    position: absolute;
    padding: 0;
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 button:hover {
    background: var(--light-grey);
 }
 button:active {
    background: var(--medium-grey);
 }
 button.close-button {
    top: 1rem;
    right: 1rem;
 }
 button.close-button:hover {
    background-color: rgba(255,255,255, 0.1);
 }
 button.close-button svg {
    stroke: white;
 }
 button.slide-button {
    bottom: calc((var(--height) / 4 - 2rem) / 2);
 }
 button.slide-button svg {
    stroke: var(--pink);
 }
 button.slide-button.previous {
    left: 1rem;
 }
 button.slide-button.next {
    right: 1rem;
 }
 #slider {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
 }
 #slider::-webkit-scrollbar {
    display: none;
 }
 .slide {
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--width);
    height: var(--height);
 }
 .slide .image {
    background-color: var(--light-grey);
    height: calc(var(--height) * 3 / 4);
 }
 .slide.no-text .image {
    height: var(--height);
 }
 .slide .image img,
 .slide .image video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
 }
 .slide.no-text .description {
    display: none;
 }
 .slide .description {
    position: relative;
    padding: 0.5rem 8rem 1rem;
    height: calc(var(--height) / 4);
    background-color: white;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
 }
 .slide .description h1,
 .slide .description p {
    margin: 0 0 0.5rem 0;
 }
 .slide .description p:last-child {
    margin-bottom: 0;
 }
 .slide .description h1 {
    font-size: 1.5rem;
 }
 .slide .description h1:first-child {
    margin-top: 0;
 }
 .slide .description code {
    background-color: #ddd;
    padding: 0.1rem 0.3rem;
    color: var(--dark-grey);
    font-size: 0.888rem;
    border-radius: 2px;
 }
 .progressBar {
    position: fixed;
    height: .333rem;
    width: 0%;
    background-color: #ccc;
    mix-blend-mode: multiply;
    /* opacity: 0.5; */
    bottom: 0px;
    transition: width;
    transition-duration: 0s;
    transition-timing-function: linear;
 }
 .progressBar.playing {
    width: 100%;
    transition-duration: var(--slide-duration);
 }
@@ -0,0 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <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="css/styles.css">
 </head>
 <body>
    <div id="slider"></div>
    <template id="slide-template">
        <div class="slide">
            <section class="image"></section>
            <section class="description"></section>
        </div>
    </template>
    <nav>
        <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">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M15 6l-6 6l6 6" />
            </svg>
        </button>
        <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">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M9 6l6 6l-6 6" />
            </svg>
        </button>
        <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" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M18 6l-12 12" />
                <path d="M6 6l12 12" />
            </svg>
        </button>
    </nav>
    <script src="js/marked.min.js"></script>
    <script src="slides/slides.js"></script>
    <script src="js/Slider.js"></script>
    <script>
        var slider = new Slider("#slider", "#slide-template", slides, 10000);
    </script>
 </body>
 </html>
@@ -0,0 +1,155 @@
 class Slider {
    imageTypes = ["png", "gif", "webp", "jpg"];
    videoTypes = ["mp4", "webm"];
    data;
    element;
    progressBar;
    template;
    slides = [];
    activeSlide = 0;
    slideDuration;
    slideTimeout;
    constructor(element, template, data, slideDuration = 10000) {
        this.element = document.querySelector(element);
        this.template = document.querySelector(template);
        this.data = data;
        this.slideDuration = slideDuration;
        this.ip = location.host;
        // append slides
        for (let i = 0; i < this.data.length; i++) {
            let slide = this.template.content.cloneNode(true);
            let type = this.getType(i);
            switch (type) {
                // image
                case "image":
                    let img = document.createElement("img");
                    img.src = "./slides/" + this.data[i].image;
                    slide.querySelector(".image").appendChild(img);
                    break;
                case "video":
                    let video = document.createElement("video");
                    video.autoplay = true;
                    video.loop = true;
                    video.muted = true;
                    video.src = "./slides/" + this.data[i].image;
                    slide.querySelector(".image").appendChild(video);
                    break;
                default:
                    break;
            }
            // texts
            let hasText = this.data[i].title || this.data[i].description;
            if (hasText) {
                // let title = slide.querySelector(".description h1");
                // 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.prepend(title);
            }
            // 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);
        }
        // append progress bar
        let progressBar = document.createElement("div");
        progressBar.classList.add("progressBar");
        this.progressBar = this.element.appendChild(progressBar);
        document.querySelector(":root").style.setProperty("--slide-duration", this.slideDuration / 1000 + "s");
        // observe scroll position
        this.element.onscroll = e => this.onScroll(e);
        // keyboard shortcuts
        document.addEventListener("keydown", (e) => {
            if (e.code === "ArrowLeft" || e.code === "ArrowRight")
                e.preventDefault();
        });
        document.addEventListener("keyup", (e) => {
            if (e.code === "ArrowLeft") this.previous();
            if (e.code === "ArrowRight") this.next();
        });
        // start auto play
        this.startTimeout();
    }
    onScroll(e) {
        let newSlide = Math.round(e.target.scrollLeft / 800);
        if (this.activeSlide != newSlide) {
            this.handleVideoPlayback(this.activeSlide, newSlide);
            this.activeSlide = newSlide;
            this.startTimeout();
        }
    }
    next() {
        // 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);
    }
    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(newSlideIndex) == "video") {
            let video = this.slides[newSlideIndex].querySelector("video");
            video.currentTime = 0
            video.play();
        }
    }
    previous() {
        let targetSlide = this.activeSlide <= 0 ? (this.data.length - 1) : this.activeSlide - 1
        this.element.scrollTo(targetSlide * 800, 0);
        this.handleVideoPlayback(this.activeSlide, targetSlide);
    }
    startTimeout(timeout = this.slideDuration) {
        clearTimeout(this.slideTimeout);
        this.slideTimeout = setTimeout(() => { this.next(); }, timeout);
        // restart progress animation
        // https://css-tricks.com/restart-css-animation/
        this.progressBar.classList.remove("playing");
        void this.progressBar.offsetWidth;
        this.progressBar.classList.add("playing");
    }
    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;
    }
 }
@@ -0,0 +1,35 @@
 var slides = [
    {
        image: "Hello world.mp4",
    },
    {
        image: "System menu.mp4",
        title: "The system menu",
        description: `Your mouse cursor is hidden. It will only show up if you move it.  
        Click on the desktop to open the menu.`
    },
    {
        image: "System settings.mp4",
        title: "System settings",
        description: `Reach for the settings app to configure and monitor this computer.  
        It’s browser-based so you can use it remotely.`
    },
    {
        image: "File management.mp4",
        title: "File management",
        description: `Tooloop OS is designed to be maintained over network.  
        Administrate over \`SSH\` and manage files using \`SFTP\` or \`AFP\`.  
        You can of course also use a USB flash drive.`
    },
    {
        image: "Automation.mp4",
        title: "Automation",
        description: `Integrate Tooloop Boxes with your automation system.  
        Almost everything Tooloop OS can do can also be done via REST.`,
    },
    {
        image: "Shortcuts.mp4",
        title: "Shortcuts for your convenience",
        description: `There are some handy keyboard shortcuts and terminal commands starting with _tooloop_, e. g. \`tooloop-presentation-start\`.`,
    }
 ]
@@ -0,0 +1,24 @@
 #!/bin/bash
 # List of Chromium Command Line Switches
 # https://peter.sh/experiments/chromium-command-line-switches/
 COMMAND="chromium-browser \
 --disable-features=Translate,Infobars \
 --no-default-browser-check \
 --no-first-run \
 --noerrdialogs \
 --class=TooloopOnboarding \
 --app=file:///media/assets/data/index.html"
 if [ $EUID == 0 ]; then
    /bin/bash /assets/presentation/stop-presentation.sh
    sleep 0.1
    su tooloop -c "$COMMAND" &
 else
    /bin/bash /assets/presentation/stop-presentation.sh
    sleep 0.1
    $COMMAND &
 fi
 exit 0
@@ -0,0 +1,9 @@
 #!/bin/bash
 pids=$(xdotool search --class "TooloopOnboarding")
 for pid in $pids; do
    xkill -id $pid
    break
 done
 exit 0
@@ -1,15 +1,15 @@
-Package: tooloop-kiosk-browser
+Package: tooloop-simple-kiosk-browser
 Version: 1.0.0
 Maintainer: Tooloop Multimedia
 Homepage: https://www.tooloop.de
 Bugs: https://github.com/Tooloop/Tooloop-Packages
 Section: tooloop/presentation
-Architecture: amd64
+Architecture: all
 Depends: chromium-browser
 Recommends: tooloop-transparent-cursor
 Suggests: tooloop-nginx
-Name: Kiosk Browser
+Name: Simple Kiosk Browser
-Description: Full-screen browser for touch kiosks
+Description: Simple fullscreen browser for touch kiosks
 A simple full-screen kiosk browser based on chromium.
 You can define its’ homepage in the settings.
 Thumbnail: kiosk-browser-thumbnail.jpg
@@ -4,7 +4,7 @@
 <html>
 <head>
-    <title>Simple Kiosk</title>
+    <title>Kiosk Browser</title>
    <style type="text/css">
        canvas {
@@ -23,14 +23,13 @@
        }
        #box {
-            width: 50%;
+            width: 640px;
            position: absolute;
            background: rgba(255, 255, 255, 0.9);
-            left: 25%;
+            left: calc(50% - 320px);
            top: 25%;
            border-radius: 2px;
            padding: 20px;
            max-width: 640px;
            box-sizing: border-box;
            padding: 50px 40px 50px 40px;
            -webkit-user-select: none;
@@ -88,12 +87,11 @@
    <div id="particles"></div>
    <div id="box">
-        <h1>Simple Kiosk</h1>
+        <h1>Kiosk Browser</h1>
-        <p>This is a simple browser for your show room or trade fair booth.</p>
+        <p>This is a simple fullscreen browser for your show room or trade fair booth.</p>
        <p>It has very few features but works for simple things.</p>
        <p>By default it loads <span style="font-family: monospace;">/assets/data/index.html</span> but you can choose
-            any page you like.</p>
+            any page you like by editing <span style="font-family: monospace;">/assets/presentation/start-presentation.sh</span>.</p>
        <p>Simple Kiosk comes with a plugin for the Tooloop Settings Server so you can configure it in there.</p>
    </div>
    <div id="credits"><a href="http://vincentgarreau.com/particles.js/">particles.js</a> by Vincent Garreau</div>
@@ -11,6 +11,7 @@ COMMAND="chromium-browser \
 --overscroll-history-navigation=1 \
 --incognito \
 --disable-features=Translate,Infobars \
 --disable-pinch \
 --no-default-browser-check \
 --no-first-run \
 --noerrdialogs \
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1,3 @@`
							`#!/bin/bash`

							`rm -f /assets/logs/picom.log`