From f49b3db7f5de0899a676ea708e994ed5b39dbde8 Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Thu, 26 Oct 2023 01:26:34 +0200
Subject: [PATCH] task: drop unnessesary wrapper

---
 chroma/chromakeying.php                       |  39 ++--
 chroma/index.php                              |  68 ++-----
 gallery/index.php                             |   7 +-
 gulpfile.mjs                                  |   4 +-
 index.php                                     |  31 +--
 lib/services_start.php                        |   2 +-
 lib/services_stop.php                         |   2 +-
 lib/src/Utility/ThemeUtility.php              |   2 +-
 resources/lang/cs.json                        |   1 -
 resources/lang/de.json                        |   1 -
 resources/lang/en.json                        |   1 -
 resources/lang/es.json                        |   1 -
 resources/lang/fr.json                        |   1 -
 resources/lang/it.json                        |   1 -
 resources/lang/nl.json                        |   1 -
 resources/lang/no.json                        |   1 -
 resources/lang/pt.json                        |   1 -
 slideshow/index.php                           |  15 +-
 src/js/chromakeying.js                        | 192 ++++++------------
 src/js/core.js                                |  18 +-
 ..._updatecheck.js => gallery-updatecheck.js} |   0
 src/js/preview.js                             |  30 +--
 ...uzzer_client.js => remotebuzzer-client.js} |   0
 ...uzzer_server.js => remotebuzzer-server.js} |   0
 src/js/{test_chroma.js => test-chroma.js}     |   0
 src/js/{test_preview.js => test-preview.js}   | 109 +++++-----
 src/sass/classic_chromacapture.scss           | 127 ------------
 src/sass/classic_chromakeying.scss            |  39 ----
 src/sass/classic_rounded_chromacapture.scss   |   1 -
 src/sass/classic_rounded_chromakeying.scss    |   1 -
 src/sass/classic_rounded_style.scss           |   1 -
 src/sass/components/_base.scss                |   4 +
 src/sass/components/_button.scss              |  20 +-
 src/sass/components/_chroma.scss              |  37 ++++
 src/sass/components/_preview.scss             |  74 +++++++
 src/sass/components/_root.scss                |   2 +-
 src/sass/components/_stage.scss               |  13 +-
 src/sass/framework.scss                       |   2 +
 src/sass/{classic_style.scss => legacy.scss}  |  31 +--
 src/sass/modern_chromacapture.scss            |  13 --
 src/sass/modern_chromakeying.scss             |   1 -
 src/sass/modern_squared_chromacapture.scss    |   1 -
 src/sass/modern_squared_chromakeying.scss     |   1 -
 src/sass/modern_squared_style.scss            |   1 -
 src/sass/modern_style.scss                    |   5 -
 src/sass/partials/_video_animation.scss       |   1 -
 src/sass/partials/_video_preview.scss         |  74 -------
 src/sass/themes/_classic.scss                 |   6 +-
 src/sass/themes/_modern.scss                  |   8 +-
 .../components/chroma.background.selector.php |  11 +
 template/components/chroma.canvas.php         |   3 +
 template/components/main.footer.php           |   2 +-
 template/components/main.head.php             |   2 +-
 template/components/preview.php               |  23 +++
 template/components/stage.loader.php          |   3 +-
 template/components/stage.results.php         |   2 +-
 template/components/stage.start.php           |   2 +-
 test/chroma.php                               |  45 ++--
 test/preview.php                              |  24 +--
 test/trigger.php                              |   3 -
 60 files changed, 412 insertions(+), 699 deletions(-)
 rename src/js/{gallery_updatecheck.js => gallery-updatecheck.js} (100%)
 rename src/js/{remotebuzzer_client.js => remotebuzzer-client.js} (100%)
 rename src/js/{remotebuzzer_server.js => remotebuzzer-server.js} (100%)
 rename src/js/{test_chroma.js => test-chroma.js} (100%)
 rename src/js/{test_preview.js => test-preview.js} (51%)
 delete mode 100644 src/sass/classic_chromacapture.scss
 delete mode 100644 src/sass/classic_chromakeying.scss
 delete mode 100644 src/sass/classic_rounded_chromacapture.scss
 delete mode 100644 src/sass/classic_rounded_chromakeying.scss
 delete mode 100644 src/sass/classic_rounded_style.scss
 create mode 100644 src/sass/components/_chroma.scss
 create mode 100644 src/sass/components/_preview.scss
 rename src/sass/{classic_style.scss => legacy.scss} (56%)
 delete mode 100644 src/sass/modern_chromacapture.scss
 delete mode 100644 src/sass/modern_chromakeying.scss
 delete mode 100644 src/sass/modern_squared_chromacapture.scss
 delete mode 100644 src/sass/modern_squared_chromakeying.scss
 delete mode 100644 src/sass/modern_squared_style.scss
 delete mode 100644 src/sass/modern_style.scss
 delete mode 100644 src/sass/partials/_video_preview.scss
 create mode 100644 template/components/chroma.background.selector.php
 create mode 100644 template/components/chroma.canvas.php
 create mode 100644 template/components/preview.php

diff --git a/chroma/chromakeying.php b/chroma/chromakeying.php
index 4fe463fff..7b8bd762d 100644
--- a/chroma/chromakeying.php
+++ b/chroma/chromakeying.php
@@ -4,7 +4,6 @@
 
 use Photobooth\Service\LanguageService;
 use Photobooth\Utility\ComponentUtility;
-use Photobooth\Utility\ImageUtility;
 use Photobooth\Utility\PathUtility;
 
 if (empty($_GET['filename'])) {
@@ -31,7 +30,6 @@
 
 $languageService = LanguageService::getInstance();
 $pageTitle = $config['ui']['branding'] . ' Chromakeying';
-$mainStyle = $config['ui']['style'] . '_chromakeying.css';
 $photoswipe = false;
 $remoteBuzzer = true;
 
@@ -39,37 +37,24 @@
 ?>
 
 <body data-main-image="<?=$mainimage?>">
-    <div class="chromawrapper rotarygroup">
     <?php if ($keying_possible): ?>
-        <div class="canvasWrapper initial">
-            <canvas id="mainCanvas"></canvas>
-        </div>
-
-        <div style="padding-top:10px;text-align:center;">
-        <?php
-        $backgroundImages = ImageUtility::getImagesFromPath(PathUtility::getAbsolutePath($config['keying']['background_path']));
-        foreach ($backgroundImages as $backgroundImage) {
-            echo '<img src="' . PathUtility::getPublicPath($backgroundImage) . '" class="backgroundPreview rotaryfocus" onclick="setBackgroundImage(this.src)">';
-        }
-        ?>
-        </div>
-
-        <div class="chroma-control-bar">
-<?php
-    echo ComponentUtility::renderButton('save', $config['icons']['save'], 'save-chroma-btn');
-        if ($config['print']['from_chromakeying']) {
-            echo ComponentUtility::renderButton('print', $config['icons']['print'], 'print-btn');
-        }
-        echo ComponentUtility::renderButton('close', $config['icons']['close'], 'close-btn');
-        ?>
+        <?php include PathUtility::getAbsolutePath('template/components/chroma.canvas.php'); ?>
+        <div class="stage stage--active stage--chromakeying rotarygroup" data-stage="start">
+            <div class="stage-inner">
+                <?php include PathUtility::getAbsolutePath('template/components/chroma.background.selector.php'); ?>
+                <div class="buttonbar buttonbar--bottom">
+                    <?= ComponentUtility::renderButton('save', $config['icons']['save'], 'save-chroma-btn'); ?>
+                    <?= ($config['print']['from_chromakeying']) ? ComponentUtility::renderButton('print', $config['icons']['print'], 'print-btn') : '' ?>
+                    <?= ComponentUtility::renderButton('close', $config['icons']['close'], 'close-btn'); ?>
+                </div>
+            </div>
         </div>
     <?php else:?>
-        <div style="text-align:center;padding-top:250px">
-            <h1 style="color: red;"><?=$languageService->translate('keyingerror')?></h1>
+        <div>
+            <h1><?=$languageService->translate('keyingerror')?></h1>
             <?= ComponentUtility::renderButtonLink('close', $config['icons']['close'], PathUtility::getPublicPath()) ?>
         </div>
     <?php endif; ?>
-    </div>
 
     <?php include PathUtility::getAbsolutePath('template/components/main.footer.php'); ?>
     <?php include PathUtility::getAbsolutePath('template/components/chroma.footer.php'); ?>
diff --git a/chroma/index.php b/chroma/index.php
index fec7127d1..31a77926d 100644
--- a/chroma/index.php
+++ b/chroma/index.php
@@ -5,7 +5,6 @@
 use Photobooth\Service\AssetService;
 use Photobooth\Service\LanguageService;
 use Photobooth\Utility\ComponentUtility;
-use Photobooth\Utility\ImageUtility;
 use Photobooth\Utility\PathUtility;
 
 // Login / Authentication check
@@ -21,7 +20,6 @@
 $languageService = LanguageService::getInstance();
 $assetService = AssetService::getInstance();
 $pageTitle = $config['ui']['branding'] . ' Chroma capture';
-$mainStyle = $config['ui']['style'] . '_chromacapture.css';
 $photoswipe = true;
 $randomImage = false;
 $remoteBuzzer = true;
@@ -30,61 +28,33 @@
 
 ?>
 <body class="gallery-mode--overlay ">
-<video id="video--view" class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['style']; ?>"
-       autoplay playsinline></video>
-<div class="chromawrapper">
-    <div class="rotarygroup" id="start">
-        <div class="top-bar">
-<?php
-    if (!$config['chromaCapture']['enabled']) {
-        echo ComponentUtility::renderButtonLink('close', $config['icons']['close'], PathUtility::getPublicPath());
-    }
-    if ($config['gallery']['enabled']) {
-        echo ComponentUtility::renderButton('gallery', $config['icons']['gallery'], 'gallery-button');
-    }
-?>
-        </div>
 
-        <div class="canvasWrapper initial">
-            <canvas id="mainCanvas"></canvas>
-        </div>
+<?php include PathUtility::getAbsolutePath('template/components/preview.php'); ?>
+<?php include PathUtility::getAbsolutePath('template/components/chroma.canvas.php'); ?>
 
-        <div class="chromaNote">
-            <?=$languageService->translate('chromaInfoBefore')?>
-        </div>
-
-        <?php include PathUtility::getAbsolutePath('template/components/stage.loader.php'); ?>
-
-        <!-- Result Page -->
-        <div class="stage" data-stage="result"></div>
-
-        <div class="backgrounds">
-        <?php
-        $backgroundImages = ImageUtility::getImagesFromPath(PathUtility::getAbsolutePath($config['keying']['background_path']));
-foreach ($backgroundImages as $backgroundImage) {
-    echo '<img src="' . PathUtility::getPublicPath($backgroundImage) . '" class="backgroundPreview rotaryfocus" onclick="setBackgroundImage(this.src)">';
-}
-?>
+<div class="stage stage--chroma rotarygroup" data-stage="start">
+    <div class="stage-inner">
+        <div class="stage-message stage-message--error"><?=$languageService->translate('chromaInfoBefore')?></div>
+        <?php include PathUtility::getAbsolutePath('template/components/chroma.background.selector.php'); ?>
+        <div class="buttonbar buttonbar--top">
+            <?= ($config['gallery']['enabled']) ? ComponentUtility::renderButton('gallery', $config['icons']['gallery'], 'gallery-button') : '' ?>
         </div>
-
-        <div class="chroma-control-bar">
-<?php
-echo ComponentUtility::renderButton('takePhoto', $config['icons']['take_picture'], 'takeChroma');
-
-if ($config['picture']['allow_delete']) {
-    echo ComponentUtility::renderButton('delete', $config['icons']['delete'], 'deletebtn');
-}
-
-echo ComponentUtility::renderButton('reload', $config['icons']['refresh'], 'reloadPage');
-?>
+        <div class="buttonbar buttonbar--bottom">
+            <?= ComponentUtility::renderButton('takePhoto', $config['icons']['take_picture'], 'take-chroma') ?>
         </div>
     </div>
-    <div class="rotarygroup">
-        <div id="wrapper">
-            <?php include PathUtility::getAbsolutePath('template/components/gallery.php'); ?>
+</div>
+<?php include PathUtility::getAbsolutePath('template/components/stage.loader.php'); ?>
+<div class="stage stage--result" data-stage="result">
+    <div class="stage-inner">
+        <div class="buttonbar buttonbar--bottom">
+            <?= ComponentUtility::renderButton('reload', $config['icons']['refresh'], 'reload') ?>
+            <?= ($config['picture']['allow_delete']) ? ComponentUtility::renderButton('delete', $config['icons']['delete'], 'deletebtn') : '' ?>
         </div>
     </div>
 </div>
+
+<?php include PathUtility::getAbsolutePath('template/components/gallery.php'); ?>
 <script type="text/javascript">
     onCaptureChromaView = true;
 </script>
diff --git a/gallery/index.php b/gallery/index.php
index eb8522dd3..e4a486c5f 100644
--- a/gallery/index.php
+++ b/gallery/index.php
@@ -7,7 +7,6 @@
 
 $assetService = AssetService::getInstance();
 $pageTitle = $config['ui']['branding'] . ' Gallery';
-$mainStyle = $config['ui']['style'] . '_style.css';
 $photoswipe = true;
 $randomImage = false;
 $remoteBuzzer = true;
@@ -15,9 +14,7 @@
 include PathUtility::getAbsolutePath('template/components/main.head.php');
 ?>
 <body>
-    <div id="wrapper">
-        <?php include PathUtility::getAbsolutePath('template/components/gallery.php'); ?>
-    </div>
+    <?php include PathUtility::getAbsolutePath('template/components/gallery.php'); ?>
 
     <script>
         onStandaloneGalleryView = true;
@@ -30,7 +27,7 @@
     <script src="<?=$assetService->getUrl('resources/js/core.js')?>"></script>
     <script src="<?=$assetService->getUrl('resources/js/gallery.js')?>"></script>
     <?php if ($config['gallery']['db_check_enabled']): ?>
-    <script src="<?=$assetService->getUrl('resources/js/gallery_updatecheck.js')?>"></script>
+    <script src="<?=$assetService->getUrl('resources/js/gallery-updatecheck.js')?>"></script>
     <?php endif; ?>
 
     <?php require_once PathUtility::getAbsolutePath('lib/services_start.php'); ?>
diff --git a/gulpfile.mjs b/gulpfile.mjs
index 7535198b3..987aa2491 100644
--- a/gulpfile.mjs
+++ b/gulpfile.mjs
@@ -28,7 +28,7 @@ gulp.task('js', function () {
     .src('./src/js/**/*.js')
     .pipe(babel({
       presets: ['@babel/env'],
-      ignore: ['src/js/sync-to-drive.js', 'src/js/remotebuzzer_server.js']
+      ignore: ['src/js/sync-to-drive.js', 'src/js/remotebuzzer-server.js']
     }))
     .pipe(gulp.dest('./resources/js'));
 });
@@ -68,7 +68,7 @@ gulp.task('js-admin', function () {
     .pipe(concat('main.admin.js'))
     .pipe(babel({
       presets: ['@babel/env'],
-      ignore: ['src/js/sync-to-drive.js', 'src/js/remotebuzzer_server.js']
+      ignore: ['src/js/sync-to-drive.js', 'src/js/remotebuzzer-server.js']
     }))
     .pipe(gulp.dest('./resources/js'));
 });
diff --git a/index.php b/index.php
index eee0cec88..6bdcc586d 100644
--- a/index.php
+++ b/index.php
@@ -26,7 +26,6 @@
     ((isset($_SESSION['auth']) && $_SESSION['auth'] === true) || !$config['protect']['index'])
 ) {
     $pageTitle = $config['ui']['branding'];
-    $mainStyle = $config['ui']['style'] . '_style.css';
     $photoswipe = true;
     $randomImage = false;
     $remoteBuzzer = true;
@@ -39,30 +38,8 @@
 ?>
 
 <body class="gallery-mode--overlay ">
+<?php include PathUtility::getAbsolutePath('template/components/preview.php'); ?>
 
-<?php if ($config['preview']['showFrame'] && !empty($config['picture']['frame'])): ?>
-    <img
-        id="picture--frame"
-        class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['style']; ?>"
-        src="<?php echo $config['picture']['frame']; ?>"
-        alt="pictureFrame"
-    />
-<?php endif; ?>
-<?php if ($config['preview']['showFrame'] && !empty($config['collage']['frame'])): ?>
-    <img
-        id="collage--frame"
-        class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['style']; ?>"
-        src="<?php echo $config['collage']['frame']; ?>"
-        alt="collageFrame"
-    />
-<?php endif; ?>
-<video
-    id="video--view"
-    class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['style']; ?>"
-    autoplay
-    playsinline
->
-</video>
 <?php if ($config['video']['enabled'] && $config['video']['animation']): ?>
     <div id="videoAnimation">
         <ul class="left">
@@ -77,7 +54,6 @@ class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['
         </ul>
     </div>
 <?php endif; ?>
-<div id="wrapper">
 <?php
 
 include PathUtility::getAbsolutePath('template/components/stage.start.php');
@@ -92,10 +68,9 @@ class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['
     include PathUtility::getAbsolutePath('template/components/filter.php');
 }
 
-?>
-</div>
+include PathUtility::getAbsolutePath('template/components/main.footer.php');
 
-<?php include PathUtility::getAbsolutePath('template/components/main.footer.php'); ?>
+?>
 
 <script src="<?=$assetService->getUrl('resources/js/preview.js')?>"></script>
 <script src="<?=$assetService->getUrl('resources/js/core.js')?>"></script>
diff --git a/lib/services_start.php b/lib/services_start.php
index aa3968a83..c44256821 100644
--- a/lib/services_start.php
+++ b/lib/services_start.php
@@ -28,7 +28,7 @@ function processIsRunning($pName, $pidFile)
 
         echo '<!-- Remote Buzzer enabled --- starting server -->' . "\n";
         chdir(PathUtility::getRootPath());
-        proc_close(proc_open($config['nodebin']['cmd'] . ' resources/js/remotebuzzer_server.js 1>' . $logfile . ' 2>&1 &', [], $foo));
+        proc_close(proc_open($config['nodebin']['cmd'] . ' resources/js/remotebuzzer-server.js 1>' . $logfile . ' 2>&1 &', [], $foo));
     } else {
         echo '<!-- Remote Buzzer Enabled --- server already started (port in use) -->' . "\n";
     }
diff --git a/lib/services_stop.php b/lib/services_stop.php
index 2b76b547f..325406414 100644
--- a/lib/services_stop.php
+++ b/lib/services_stop.php
@@ -28,7 +28,7 @@ function killProcessIfActive($pName, $pidFile, $logfileName, $killSig)
 
 // can be killed if active independent of $config['remotebuzzer']['startserver']
 killProcessIfActive(
-    'remotebuzzer_server.js',
+    'remotebuzzer-server.js',
     $config['foldersAbs']['tmp'] . DIRECTORY_SEPARATOR . 'remotebuzzer_server.pid',
     $config['remotebuzzer']['logfile'],
     9
diff --git a/lib/src/Utility/ThemeUtility.php b/lib/src/Utility/ThemeUtility.php
index 84420988c..9605dbd65 100644
--- a/lib/src/Utility/ThemeUtility.php
+++ b/lib/src/Utility/ThemeUtility.php
@@ -23,7 +23,7 @@ public static function renderCustomUserStyle(array $config): string
             '--gallery-button-color' => $config['colors']['gallery_button'] ?? '__UNSET__',
             '--background-default' => $config['background']['defaults'] ?? '__UNSET__',
             '--background-chroma' => $config['background']['chroma'] ?? '__UNSET__',
-            '--background-url' => $config['preview']['url'] ?? '__UNSET__',
+            '--background-preview' => $config['preview']['url'] ?? '__UNSET__',
             '--font-size' => $config['ui']['font_size'] ?? '__UNSET__',
             '--font-color' => $config['colors']['font'] ?? '__UNSET__',
             '--preview-rotation' => $config['preview']['rotation'] ?? '__UNSET__',
diff --git a/resources/lang/cs.json b/resources/lang/cs.json
index 954ee1e50..049c6ce52 100644
--- a/resources/lang/cs.json
+++ b/resources/lang/cs.json
@@ -18,7 +18,6 @@
   "busyVideo": "Zpracování videa...",
   "check_version": "Zkontrolovat online",
   "cheese": "Sýýýýýýýýýýýýýýýrrrr!",
-  "chromaInfoAfter": "Pro pořízení nové fottografie prosím obnovte stránku",
   "close": "Zavřít",
   "collage:collage_background": "Pozadí",
   "collage:collage_background_color": "Barva pozadí koláže",
diff --git a/resources/lang/de.json b/resources/lang/de.json
index 95d09a255..7dff984ca 100644
--- a/resources/lang/de.json
+++ b/resources/lang/de.json
@@ -32,7 +32,6 @@
   "cheese": "Cheeeeeeeese!",
   "choose_image": "Bild auswählen",
   "chromaCapture": "Chroma-Aufnahme",
-  "chromaInfoAfter": "Bitte laden Sie die Seite neu, um ein neues Foto aufzunehmen",
   "chromaInfoBefore": "Bitte wählen Sie einen Hintergrund, um ein neues Foto aufzunehmen",
   "chromaPreviewTest": "Chroma-Vorschau-Test",
   "chroma_needs_background": "Bitte wählen Sie zuerst einen Hintergrund!",
diff --git a/resources/lang/en.json b/resources/lang/en.json
index 363bec972..c3c16fe23 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -32,7 +32,6 @@
   "cheese": "Cheeeeeeeese!",
   "choose_image": "Choose an image",
   "chromaCapture": "Chroma Capture",
-  "chromaInfoAfter": "Please reload the page to take a new Picture",
   "chromaInfoBefore": "Please choose a background to take a Picture",
   "chromaPreviewTest": "Chroma preview test",
   "chroma_needs_background": "Please choose a background first!",
diff --git a/resources/lang/es.json b/resources/lang/es.json
index 438453e10..e7ed968c0 100644
--- a/resources/lang/es.json
+++ b/resources/lang/es.json
@@ -32,7 +32,6 @@
   "cheese": "¡Patataaaaaa!",
   "choose_image": "Elige una imagen",
   "chromaCapture": "Captura de croma",
-  "chromaInfoAfter": "Favor de cargar nuevamente la página para tomar una nueva fotografía",
   "chromaInfoBefore": "Por favor elige un fondo para tomar la fotografía",
   "chromaPreviewTest": "Prueba de vista previa de Chroma",
   "chroma_needs_background": "¡Por favor, elige un fondo primero!",
diff --git a/resources/lang/fr.json b/resources/lang/fr.json
index 375e2489e..82191b0e2 100644
--- a/resources/lang/fr.json
+++ b/resources/lang/fr.json
@@ -30,7 +30,6 @@
   "cheese": "Souriez !",
   "choose_image": "Choisissez une image",
   "chromaCapture": "Capture Chroma",
-  "chromaInfoAfter": "Veuillez actualiser la page pour prendre une nouvelle photo",
   "chromaInfoBefore": "Veuillez choisir un arrière-plan pour prendre une photo",
   "chromaPreviewTest": "Test d'aperçu Chroma",
   "chroma_needs_background": "Veuillez d'abord choisir un arrière-plan !",
diff --git a/resources/lang/it.json b/resources/lang/it.json
index 71a73a1aa..9e12d78da 100644
--- a/resources/lang/it.json
+++ b/resources/lang/it.json
@@ -32,7 +32,6 @@
   "cheese": "Cheeeeeeeese!",
   "choose_image": "Scegli un'immagine",
   "chromaCapture": "Cattura Chroma",
-  "chromaInfoAfter": "Per favore ricarica la pagina per scattare una nuova foto",
   "chromaInfoBefore": "Per favore scegli uno sfondo per scattare un'immagine",
   "chromaPreviewTest": "Anteprima chroma test",
   "chroma_needs_background": "Per favore scegli prima uno sfondo!",
diff --git a/resources/lang/nl.json b/resources/lang/nl.json
index 4811a0566..bac25d2ed 100644
--- a/resources/lang/nl.json
+++ b/resources/lang/nl.json
@@ -32,7 +32,6 @@
   "cheese": "Lachen!",
   "choose_image": "Kies een afbeelding",
   "chromaCapture": "Chroma-opname",
-  "chromaInfoAfter": "Vernieuw de pagina om een nieuwe foto te maken",
   "chromaInfoBefore": "Kies alstublieft een achtergrond om een foto te maken",
   "chromaPreviewTest": "Chroma voorbeeldtest",
   "chroma_needs_background": "Kies eerst een achtergrond!",
diff --git a/resources/lang/no.json b/resources/lang/no.json
index 0e56599cb..489d4d995 100644
--- a/resources/lang/no.json
+++ b/resources/lang/no.json
@@ -22,7 +22,6 @@
   "busyCollage": "Behandler collage...",
   "check_version": "Sjekk online",
   "cheese": "Smiiiiiiiiiiil!",
-  "chromaInfoAfter": "Vennligst last inn siden på nytt for å ta et nytt bilde",
   "chromaInfoBefore": "Vennligst velg en bakgrunn for å ta et bilde",
   "close": "Lukk",
   "collage": "Collage",
diff --git a/resources/lang/pt.json b/resources/lang/pt.json
index 9e9900846..720ef6e44 100644
--- a/resources/lang/pt.json
+++ b/resources/lang/pt.json
@@ -32,7 +32,6 @@
   "cheese": "Cheeeeeeeese!",
   "choose_image": "Escolha uma imagem",
   "chromaCapture": "Captura Chroma",
-  "chromaInfoAfter": "Por favor, recarregue a página para tirar uma nova Fotografia",
   "chromaInfoBefore": "Por favor, escolha um plano de fundo para tirar uma Foto",
   "chromaPreviewTest": "Teste de pré-visualização Chroma",
   "chroma_needs_background": "Por favor, escolha um plano de fundo primeiro!",
diff --git a/slideshow/index.php b/slideshow/index.php
index c174d5cab..3c9c8547b 100644
--- a/slideshow/index.php
+++ b/slideshow/index.php
@@ -9,7 +9,6 @@
 $languageService = LanguageService::getInstance();
 $assetService = AssetService::getInstance();
 $pageTitle = $config['ui']['branding'] . ' Slideshow';
-$mainStyle = $config['ui']['style'] . '_style.css';
 $photoswipe = true;
 $randomImage = $config['slideshow']['randomPicture'];
 $remoteBuzzer = false;
@@ -18,14 +17,12 @@
 
 ?>
 <body>
-    <div id="wrapper">
-        <div id="gallery" class="gallery">
-            <div class="gallery-header">
-                <div class="gallery-title"><h1><?=$languageService->translate('slideshow')?></h1></div>
-            </div>
-            <div class="gallery-body">
-                <?php include PathUtility::getAbsolutePath('template/components/gallery.images.php'); ?>
-            </div>
+    <div id="gallery" class="gallery">
+        <div class="gallery-header">
+            <div class="gallery-title"><h1><?=$languageService->translate('slideshow')?></h1></div>
+        </div>
+        <div class="gallery-body">
+            <?php include PathUtility::getAbsolutePath('template/components/gallery.images.php'); ?>
         </div>
     </div>
     <?php include PathUtility::getAbsolutePath('template/components/main.footer.php'); ?>
diff --git a/src/js/chromakeying.js b/src/js/chromakeying.js
index 99ad79c08..9501291a2 100644
--- a/src/js/chromakeying.js
+++ b/src/js/chromakeying.js
@@ -1,5 +1,5 @@
-/* globals photoBooth MarvinColorModelConverter AlphaBoundary MarvinImage Seriously initRemoteBuzzerFromDOM rotaryController photoboothTools */
-/* exported setBackgroundImage setMainImage */
+/* globals photoBooth MarvinColorModelConverter AlphaBoundary MarvinImage Seriously initRemoteBuzzerFromDOM photoboothTools */
+/* exported setChromaImage processChromaImage */
 let mainImage;
 let mainImageWidth;
 let mainImageHeight;
@@ -10,8 +10,9 @@ let chroma;
 let seriouslyimage;
 let needsReload = false;
 const notificationTimeout = config.ui.notification_timeout * 1000;
-const canvas = document.getElementById('mainCanvas');
-const ctx = canvas.getContext ? canvas.getContext('2d') : null;
+
+const chromaCanvas = document.getElementById('chromaCanvas');
+const chromaCanvasContext = chromaCanvas.getContext ? chromaCanvas.getContext('2d') : null;
 
 function greenToTransparency(imageIn, imageOut) {
     for (let y = 0; y < imageIn.getHeight(); y++) {
@@ -57,7 +58,7 @@ function alphaBoundary(imageOut, radius) {
     }
 }
 
-function setMainImage(imgSrc, save = false, filename = '') {
+function processChromaImage(imgSrc, save = false, filename = '') {
     if (config.keying.variant === 'marvinj') {
         const image = new MarvinImage();
         image.load(imgSrc, function () {
@@ -130,26 +131,26 @@ function setMainImage(imgSrc, save = false, filename = '') {
 }
 
 // eslint-disable-next-line no-unused-vars
-function setBackgroundImage(url) {
+function setChromaImage(url) {
+    console.log(url);
     backgroundImage = new Image();
     backgroundImage.src = url;
     backgroundImage.onload = function () {
         drawCanvas();
-        $('.canvasWrapper').css('display', 'inline-block');
     };
 }
 
 function drawCanvas(save = false, filename = '') {
     if (typeof mainImage !== 'undefined' && mainImage !== null) {
-        canvas.width = mainImage.width;
-        canvas.height = mainImage.height;
+       chromaCanvas.width = mainImage.width;
+       chromaCanvas.height = mainImage.height;
     } else if (typeof backgroundImage !== 'undefined' && backgroundImage !== null) {
-        canvas.width = backgroundImage.width;
-        canvas.height = backgroundImage.height;
+       chromaCanvas.width = backgroundImage.width;
+       chromaCanvas.height = backgroundImage.height;
     }
 
     // Clear the canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    chromaCanvasContext.clearRect(0, 0,chromaCanvas.width,chromaCanvas.height);
 
     if (typeof backgroundImage !== 'undefined' && backgroundImage !== null) {
         if (typeof mainImage !== 'undefined' && mainImage !== null) {
@@ -159,18 +160,18 @@ function drawCanvas(save = false, filename = '') {
                 mainImage.width,
                 mainImage.height
             );
-            ctx.drawImage(backgroundImage, 0, 0, size.width, size.height);
+            chromaCanvasContext.drawImage(backgroundImage, 0, 0, size.width, size.height);
         } else {
-            ctx.drawImage(backgroundImage, 0, 0, backgroundImage.width, backgroundImage.height);
+            chromaCanvasContext.drawImage(backgroundImage, 0, 0, backgroundImage.width, backgroundImage.height);
         }
     }
 
     if (typeof mainImage !== 'undefined' && mainImage !== null) {
         if (config.keying.variant === 'marvinj') {
-            ctx.drawImage(mainImage, 0, 0);
+            chromaCanvasContext.drawImage(mainImage, 0, 0);
         } else {
             //important to fetch tmpimageout
-            ctx.drawImage(document.getElementById('tmpimageout'), 0, 0);
+            chromaCanvasContext.drawImage(document.getElementById('tmpimageout'), 0, 0);
         }
         if (save) {
             saveImage(filename);
@@ -180,16 +181,16 @@ function drawCanvas(save = false, filename = '') {
 
 function clearCanvasAndLoadImage(imageUrl) {
     // Clear the canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    chromaCanvasContext.clearRect(0, 0,chromaCanvas.width,chromaCanvas.height);
 
     // Create a new image element
     const newImage = new Image();
 
     // Set the onload event handler to execute code after the image is loaded
     newImage.onload = function () {
-        canvas.width = newImage.width;
-        canvas.height = newImage.height;
-        ctx.drawImage(newImage, 0, 0);
+       chromaCanvas.width = newImage.width;
+       chromaCanvas.height = newImage.height;
+        chromaCanvasContext.drawImage(newImage, 0, 0);
     };
 
     // Set the source of the image to the specified URL
@@ -197,7 +198,7 @@ function clearCanvasAndLoadImage(imageUrl) {
 }
 
 function saveImage(filename, cb) {
-    const dataURL = canvas.toDataURL('image/png');
+    const dataURL = chromaCanvas.toDataURL('image/png');
     $.ajax({
         method: 'POST',
         url: config.foldersPublic.api + '/chromakeying/save.php',
@@ -215,16 +216,10 @@ function saveImage(filename, cb) {
                 photoBooth.takingPic = false;
                 needsReload = true;
                 photoBooth.chromaimage = resp.filename;
-                if ($('.chroma-control-bar').is(':hidden')) {
-                    $('.chroma-control-bar').show();
-                    $('.takeChroma').hide();
-                }
                 clearCanvasAndLoadImage(config.foldersPublic.images + '/' + resp.filename);
 
                 if (config.picture.allow_delete) {
-                    $('.deletebtn').css('visibility', 'visible');
-                    $('.chroma-control-bar')
-                        .find('.deletebtn')
+                    $('[data-command="deletebtn"]')
                         .off('click')
                         .on('click', (ev) => {
                             ev.preventDefault();
@@ -277,38 +272,6 @@ function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
     };
 }
 
-function printImageHandler(ev) {
-    ev.preventDefault();
-
-    setTimeout(function () {
-        saveImage('', (resp) => {
-            if (!resp.success) {
-                return;
-            }
-
-            photoboothTools.printImage(resp.filename, () => {
-                $('[data-command="print-btn"]').blur();
-            });
-        });
-    }, 1000);
-}
-
-function saveImageHandler(ev) {
-    ev.preventDefault();
-    photoboothTools.overlay.show(photoboothTools.getTranslation('saving'));
-    saveImage();
-}
-
-function closeHandler(ev) {
-    ev.preventDefault();
-
-    if (document.referrer) {
-        window.location = document.referrer;
-    } else {
-        window.history.back();
-    }
-}
-
 $(document).on('keyup', function (ev) {
     if (
         typeof onCaptureChromaView === 'undefined' &&
@@ -345,92 +308,61 @@ $(document).on('keyup', function (ev) {
     }
 });
 
-$(document).ready(function () {
+$(function() {
+    const $chromaStage = $('.stage[data-stage="start"]');
+    const $chromaActions = $chromaStage.find('.buttonbar.buttonbar--bottom');
+    const $chromaMessage = $chromaStage.find('.stage-message');
+
     if (typeof onCaptureChromaView === 'undefined') {
-        $('[data-command="save-chroma-btn"]').on('click', saveImageHandler);
-        $('[data-command="print-btn"]').on('click', printImageHandler);
-        $('[data-command="close-btn"]').on('click', closeHandler);
+        $('[data-command="save-chroma-btn"]').on('click', (event) => {
+            event.preventDefault();
+            photoboothTools.overlay.show(photoboothTools.getTranslation('saving'));
+            saveImage();
+        });
+        $('[data-command="print-btn"]').on('click', (event) => {
+            event.preventDefault();
+            setTimeout(function () {
+                saveImage('', (resp) => {
+                    if (!resp.success) {
+                        return;
+                    }
+                    photoboothTools.printImage(resp.filename, () => {
+                        $('[data-command="print-btn"]').blur();
+                    });
+                });
+            }, 1000);
+        });
+        $('[data-command="close-btn"]').on('click', (event) => {
+            event.preventDefault();
+            if (document.referrer) {
+                window.location = document.referrer;
+            } else {
+                window.history.back();
+            }
+        });
 
         setTimeout(function () {
-            setMainImage($('body').attr('data-main-image'));
+            processChromaImage($('body').attr('data-main-image'));
         }, 100);
 
-        // we don't want to scroll on small or horizontal devices
-        const windowHeight = $(window).innerHeight();
-        const bottomLine = $('.chroma-control-bar').position().top + $('.chroma-control-bar').outerHeight(true);
-        const diff = bottomLine - windowHeight;
-
-        if (diff > 0) {
-            const canvasHeight = $('#mainCanvas').height();
-
-            $('#mainCanvas').css('height', canvasHeight - diff + 'px');
-        }
-        $('.canvasWrapper').removeClass('initial');
-
         initRemoteBuzzerFromDOM();
-        rotaryController.focusSet('.chromawrapper');
     } else {
-        $('.backgroundPreview').on('click', function () {
-            $('.canvasWrapper').removeClass('initial');
-            if ($('.chroma-control-bar').is(':hidden')) {
-                $('.chroma-control-bar').show();
-                $('.chromaNote').empty();
-                $('.chromaNote').hide();
-            }
-            $('.backgrounds').addClass('shrinked');
-        });
+        $chromaActions.addClass('hidden');
 
-        // Take Chroma Button
-        $('.takeChroma, .newchroma').on('click', function (e) {
-            e.preventDefault();
+        $('.chroma-background-selector-image').on('click', function () {
+            $chromaMessage.addClass('hidden');
+            $chromaActions.removeClass('hidden');
+        });
 
+        $('[data-command="take-chroma"]').on('click', (event) => {
+            event.preventDefault();
             if (photoBooth.takingPic) {
                 photoboothTools.console.logDev('Taking picture in progress already!');
-
                 return;
             }
-
-            const chromaInfo = photoboothTools.getTranslation('chromaInfoAfter');
-
             photoBooth.thrill('chroma');
-
-            if ($('.chroma-control-bar').is(':visible')) {
-                $('.chroma-control-bar').hide();
-                $('.backgrounds').hide();
-
-                setTimeout(() => {
-                    $('.chromaNote').show();
-                    $('.chromaNote').text(chromaInfo);
-                    $('.chroma-control-bar > .takeChroma').hide();
-                    $('.chroma-control-bar > .deleteBtn').hide();
-                    $('.chroma-control-bar > .reloadPage').show();
-                    $('.chroma-control-bar').show();
-                }, config.picture.cntdwn_time * 1000);
-            }
-        });
-
-        $('.reloadPage').on('click', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            photoboothTools.reloadPage();
-        });
-
-        // Open Gallery Button
-        $('.chromaCapture-gallery-btn').on('click', function (e) {
-            e.preventDefault();
-
-            photoBooth.openGallery($(this));
-        });
-
-        // Close Button
-        $('.chromaCapture-close-btn').on('click', function () {
-            location.assign('./index.php');
         });
 
         photoboothTools.console.log('[CHROMA CAPTURE] DOM ready');
-        if (typeof rotaryController !== 'undefined') {
-            rotaryController.focusSet('.stage[data-stage="start"]');
-        }
     }
 });
diff --git a/src/js/core.js b/src/js/core.js
index 61271ad97..59fa7c6a7 100644
--- a/src/js/core.js
+++ b/src/js/core.js
@@ -1,4 +1,4 @@
-/* globals initPhotoSwipeFromDOM initRemoteBuzzerFromDOM setMainImage remoteBuzzerClient rotaryController globalGalleryHandle photoboothTools photoboothPreview */
+/* globals initPhotoSwipeFromDOM initRemoteBuzzerFromDOM processChromaImage remoteBuzzerClient rotaryController globalGalleryHandle photoboothTools photoboothPreview */
 
 const photoBooth = (function () {
     const PhotoStyle = {
@@ -44,17 +44,17 @@ const photoBooth = (function () {
 
         gallery = $('#gallery'),
         filternav = $('#filternav'),
-        ipcamView = $('#ipcam--view'),
+        ipcamView = $('#preview--ipcam'),
         galimages = $('#galimages'),
         printBtn = $('.printbtn'),
         deleteBtn = $('.deletebtn'),
         videoAnimation = $('#videoAnimation'),
         resultVideo = $('#resultVideo'),
         resultVideoQR = $('#resultVideoQR'),
-        idVideoView = $('#video--view'),
+        idVideoView = $('#preview--video'),
         idVideoSensor = $('#video--sensor'),
-        pictureFrame = $('#picture--frame'),
-        collageFrame = $('#collage--frame'),
+        pictureFrame = $('#previewframe--picture'),
+        collageFrame = $('#previewframe--collage'),
         videoView = idVideoView.get(0),
         videoSensor = document.querySelector('#video--sensor'),
         usesBackgroundPreview =
@@ -882,10 +882,14 @@ const photoBooth = (function () {
         if (config.keying.show_all) {
             api.addImage(filename);
         }
-        loader.hide();
+
+        startPage.removeClass('stage--active');
+        loader.removeClass('stage--active');
+        resultPage.addClass('stage--active');
 
         const chromaimage = config.foldersPublic.keying + '/' + filename;
-        setMainImage(chromaimage, true, filename);
+        processChromaImage(chromaimage, true, filename);
+        rotaryController.focusSet(resultPage);
 
         api.takingPic = false;
         remoteBuzzerClient.inProgress(false);
diff --git a/src/js/gallery_updatecheck.js b/src/js/gallery-updatecheck.js
similarity index 100%
rename from src/js/gallery_updatecheck.js
rename to src/js/gallery-updatecheck.js
diff --git a/src/js/preview.js b/src/js/preview.js
index e7511bdeb..fa64b09da 100644
--- a/src/js/preview.js
+++ b/src/js/preview.js
@@ -25,7 +25,6 @@ const photoboothPreview = (function () {
     let pid,
         video,
         loader,
-        wrapper,
         url,
         pictureFrame,
         collageFrame,
@@ -33,14 +32,8 @@ const photoboothPreview = (function () {
 
     api.changeVideoMode = function (mode) {
         photoboothTools.console.logDev('Preview: Changing video mode: ' + mode);
-        if (mode === CameraDisplayMode.BACKGROUND) {
-            video.css('z-index', 0);
-            wrapper.css('background-image', 'none');
-            wrapper.css('background-color', 'transparent');
-        } else {
-            wrapper.css('background-color', config.colors.panel);
+        if (mode !== CameraDisplayMode.BACKGROUND) {
             loader.css('--stage-background', 'transparent');
-            video.css('z-index', 99);
         }
         video.show();
     };
@@ -205,7 +198,6 @@ const photoboothPreview = (function () {
     };
 
     api.stopVideo = function () {
-        wrapper.css('background-color', config.colors.panel);
         loader.css('--stage-background', null);
         if (api.stream) {
             api.stream.getTracks()[0].stop();
@@ -216,20 +208,12 @@ const photoboothPreview = (function () {
         collageFrame.hide();
     };
 
-    api.setElements = function (
-        videoSelector = '#video--view',
-        loaderSelector = '.stage[data-stage="loader"]',
-        wrapperSelector = '#wrapper',
-        urlSelector = '#ipcam--view',
-        pictureFrameSelector = '#picture--frame',
-        collageFrameSelector = '#collage--frame'
-    ) {
-        video = $(videoSelector);
-        loader = $(loaderSelector);
-        wrapper = $(wrapperSelector);
-        url = $(urlSelector);
-        pictureFrame = $(pictureFrameSelector);
-        collageFrame = $(collageFrameSelector);
+    api.setElements = () => {
+        video = $('#preview--video');
+        loader = $('.stage[data-stage="loader"]');
+        url = $('#preview--ipcam');
+        pictureFrame = $('#previewframe--picture');
+        collageFrame = $('#previewframe--collage');
     };
 
     api.init = function () {
diff --git a/src/js/remotebuzzer_client.js b/src/js/remotebuzzer-client.js
similarity index 100%
rename from src/js/remotebuzzer_client.js
rename to src/js/remotebuzzer-client.js
diff --git a/src/js/remotebuzzer_server.js b/src/js/remotebuzzer-server.js
similarity index 100%
rename from src/js/remotebuzzer_server.js
rename to src/js/remotebuzzer-server.js
diff --git a/src/js/test_chroma.js b/src/js/test-chroma.js
similarity index 100%
rename from src/js/test_chroma.js
rename to src/js/test-chroma.js
diff --git a/src/js/test_preview.js b/src/js/test-preview.js
similarity index 51%
rename from src/js/test_preview.js
rename to src/js/test-preview.js
index 202228d92..bdeccfdbb 100644
--- a/src/js/test_preview.js
+++ b/src/js/test-preview.js
@@ -20,22 +20,27 @@ const photoboothPreviewTest = (function () {
         };
 
     const api = {},
-        url = $('#ipcam--view'),
-        video = $('#video--view'),
-        pictureFrame = $('#picture--frame'),
-        collageFrame = $('#collage--frame');
+        previewNone = $('#preview--none'),
+        previewIpcam = $('#preview--ipcam'),
+        previewVideo = $('#preview--video'),
+        previewFramePicture = $('#previewframe--picture'),
+        previewFrameCollage = $('#previewframe--collage'),
+        buttonStartPreview = $('[data-command="startPreview"]'),
+        buttonStopPreview = $('[data-command="stopPreview"]'),
+        buttonShowFramePicture = $('[data-command="showPictureFrame"]'),
+        buttonShowFrameCollage = $('[data-command="showCollageFrame"]'),
+        buttonHideFrame = $('[data-command="hideFrame"]');
 
     let pid;
 
     api.init = function () {
-        video.hide();
-        video.css('z-index', 0);
-        url.hide();
-        $('#no_preview').show();
-        $('.stopPreview').hide();
-        pictureFrame.hide();
-        collageFrame.hide();
-        $('.hideFrame').hide();
+        previewNone.show();
+        previewVideo.hide();
+        previewIpcam.hide();
+        previewFramePicture.hide();
+        previewFrameCollage.hide();
+        buttonStopPreview.hide();
+        buttonHideFrame.hide();
     };
 
     api.runCmd = function (mode) {
@@ -56,11 +61,12 @@ const photoboothPreviewTest = (function () {
             });
     };
 
-    $('.startPreview').on('click', function (e) {
-        e.preventDefault();
+    buttonStartPreview.on('click', (event) => {
+        event.preventDefault();
 
         photoboothTools.console.log('Starting preview...');
-        $('.startPreview').hide();
+        buttonStartPreview.hide();
+        previewNone.hide();
         if (config.preview.cmd) {
             photoboothTools.console.logDev('Running preview cmd (TEST).');
             api.runCmd('start');
@@ -69,67 +75,72 @@ const photoboothPreviewTest = (function () {
 
         setTimeout(() => {
             if (photoboothPreview.stream) {
-                $('#no_preview').hide();
-                $('.stopPreview').show();
+                buttonStopPreview.show();
             } else {
-                $('.startPreview').show();
+                buttonStartPreview.show();
             }
         }, 4000);
     });
 
-    $('.stopPreview').on('click', function (e) {
-        e.preventDefault();
+    buttonStopPreview.on('click', (event) => {
+        event.preventDefault();
 
         photoboothTools.console.log('Stopping preview...');
-        $('.stopPreview').hide();
-        collageFrame.hide();
-        pictureFrame.hide();
+        buttonStopPreview.hide();
+        previewFrameCollage.hide();
+        previewFramePicture.hide();
+        previewNone.show();
         if (config.preview.killcmd) {
             api.runCmd('stop');
         }
         if (config.preview.mode === PreviewMode.DEVICE.valueOf()) {
             photoboothPreview.stopVideo();
         } else if (config.preview.mode === PreviewMode.URL.valueOf()) {
-            url.removeClass('streaming');
-            url.hide();
+            previewIpcam.removeClass('streaming');
+            previewIpcam.hide();
         }
 
         setTimeout(() => {
             if (photoboothPreview.stream) {
-                $('.stopPreview').show();
+                buttonStopPreview.show();
             } else {
-                $('#no_preview').show();
-                $('.startPreview').show();
+                buttonStartPreview.show();
             }
         }, 4000);
     });
 
-    $('.showPictureFrame').on('click', function (e) {
-        e.preventDefault();
+    buttonShowFramePicture.on('click', (event) => {
+        event.preventDefault();
         photoboothTools.console.log('Showing picture frame over the preview...');
-        pictureFrame.show();
-        collageFrame.hide();
-        $('.hideFrame').show();
+        previewFramePicture.show();
+        previewFrameCollage.hide();
+        buttonShowFramePicture.hide();
+        buttonShowFrameCollage.hide();
+        buttonHideFrame.show();
     });
 
-    $('.showCollageFrame').on('click', function (e) {
-        e.preventDefault();
+    buttonShowFrameCollage.on('click', (event) => {
+        event.preventDefault();
         photoboothTools.console.log('Showing collage frame over the preview...');
-        collageFrame.show();
-        pictureFrame.hide();
-        $('.hideFrame').show();
+        previewFrameCollage.show();
+        previewFramePicture.hide();
+        buttonShowFramePicture.hide();
+        buttonShowFrameCollage.hide();
+        buttonHideFrame.show();
     });
 
-    $('.hideFrame').on('click', function (e) {
-        e.preventDefault();
+    buttonHideFrame.on('click', (event) => {
+        event.preventDefault();
         photoboothTools.console.log('Hiding frames...');
-        collageFrame.hide();
-        pictureFrame.hide();
-        $('.hideFrame').hide();
+        previewFrameCollage.hide();
+        previewFramePicture.hide();
+        buttonShowFramePicture.show();
+        buttonShowFrameCollage.show();
+        buttonHideFrame.hide();
     });
 
-    video.on('loadedmetadata', function (ev) {
-        const videoEl = ev.target;
+    previewVideo.on('loadedmetadata', (event) => {
+        const videoEl = event.target;
         let newWidth = videoEl.offsetWidth;
         let newHeight = videoEl.offsetHeight;
         if (config.preview.style === PreviewStyle.SCALE_DOWN.valueOf()) {
@@ -137,10 +148,10 @@ const photoboothPreviewTest = (function () {
             newHeight = videoEl.videoHeight;
         }
         if (newWidth !== 0 && newHeight !== 0) {
-            pictureFrame.css('width', newWidth);
-            pictureFrame.css('height', newHeight);
-            collageFrame.css('width', newWidth);
-            collageFrame.css('height', newHeight);
+            previewFramePicture.css('width', newWidth);
+            previewFramePicture.css('height', newHeight);
+            previewFrameCollage.css('width', newWidth);
+            previewFrameCollage.css('height', newHeight);
         }
     });
 
diff --git a/src/sass/classic_chromacapture.scss b/src/sass/classic_chromacapture.scss
deleted file mode 100644
index afa7cc841..000000000
--- a/src/sass/classic_chromacapture.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-@import 'classic_chromakeying';
-@import 'partials/video_preview';
-@import 'vendor/photoswipe';
-
-.top-bar {
-  display: inline-block;
-  width: 100%;
-  margin: 1.5em;
-}
-
-.chromaNote {
-  display: block;
-  color: #ff0000;
-  padding-bottom: 10px;
-  background-color: var(--primary-light-color);
-  border: 2px solid var(--border-color);
-  width: 1000px;
-  max-width: 100%;
-  margin: auto;
-  text-align: center;
-  font-weight: bold;
-  z-index: 10;
-}
-
-.chroma-control-bar {
-  margin-top: 12px;
-  text-align: center;
-  display: none;
-  padding-top: 10px;
-}
-
-.backgrounds {
-  padding-top: 10px;
-  text-align: center;
-}
-
-@media (max-width: 1280px) and (orientation: landscape) {
-  .chromawrapper {
-    padding: 0;
-    margin: 0;
-  }
-
-  .canvasWrapper {
-    display: block;
-    position: absolute;
-    top: 40px;
-    right: 0;
-    width: 80%;
-    max-width: 950px;
-    max-height: 100%;
-  }
-
-  .top-bar {
-    display: block;
-    position: relative;
-    top: 50px;
-    left: 0;
-    width: 250px;
-    margin: 0;
-  }
-
-  .chromaNote {
-    position: absolute;
-    bottom: 40px;
-    right: 0;
-    width: 950px;
-  }
-
-  .backgrounds {
-    display: block;
-    position: relative;
-    top: 50px;
-    left: 0px;
-    width: 250px;
-    height: 400px;
-    overflow-y: auto;
-    img {
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-
-  .backgroundPreview {
-    max-width: 250px;
-    max-height: 150px;
-  }
-
-  .chroma-control-bar {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 250px;
-  }
-
-  #mainCanvas {
-    max-height: 100%;
-  }
-}
-
-@media (max-height: 740px) and (orientation: landscape) {
-  .backgrounds {
-    &.shrinked {
-      height: 250px;
-    }
-  }
-}
-
-@media (max-width: 1200px) and (orientation: landscape) {
-  .canvasWrapper,
-  .chromaNote {
-    max-width: 750px;
-    &.initial {
-      width: 750px;
-    }
-  }
-}
-
-@media (max-width: 1000px) and (orientation: landscape) {
-  .canvasWrapper,
-  .chromaNote {
-    max-width: 650px;
-    &.initial {
-      width: 650px;
-    }
-  }
-}
diff --git a/src/sass/classic_chromakeying.scss b/src/sass/classic_chromakeying.scss
deleted file mode 100644
index a1d54b7aa..000000000
--- a/src/sass/classic_chromakeying.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.chromawrapper {
-  display: block;
-  padding: 1em 2em 2em;
-  position: relative;
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  background-color: var(--primary-light-color);
-  background-image: var(--background-chroma);
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-attachment: fixed;
-}
-
-.canvasWrapper {
-  display: block;
-  max-width: 100%;
-  background-color: green;
-  margin: auto;
-  &.initial {
-    width: 1000px;
-  }
-}
-
-#mainCanvas {
-  display: block;
-  max-height: 650px;
-  max-width: 100%;
-}
-
-.backgroundPreview {
-  cursor: pointer;
-  max-width: 120px;
-  max-height: 80px;
-  border: 2px solid var(--border-color);
-  margin: 3px;
-}
diff --git a/src/sass/classic_rounded_chromacapture.scss b/src/sass/classic_rounded_chromacapture.scss
deleted file mode 100644
index 0c64fcc69..000000000
--- a/src/sass/classic_rounded_chromacapture.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'classic_chromacapture';
diff --git a/src/sass/classic_rounded_chromakeying.scss b/src/sass/classic_rounded_chromakeying.scss
deleted file mode 100644
index 447f1e2b3..000000000
--- a/src/sass/classic_rounded_chromakeying.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'classic_chromakeying';
diff --git a/src/sass/classic_rounded_style.scss b/src/sass/classic_rounded_style.scss
deleted file mode 100644
index a988e5803..000000000
--- a/src/sass/classic_rounded_style.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'classic_style';
diff --git a/src/sass/components/_base.scss b/src/sass/components/_base.scss
index d5f53bfa7..3b8c47305 100644
--- a/src/sass/components/_base.scss
+++ b/src/sass/components/_base.scss
@@ -26,4 +26,8 @@ body {
   height: 100vh;
   position: relative;
   overflow: hidden;
+  background-color: var(--primary-light-color);
+  background-image: var(--background-default);
+  background-position: center center;
+  background-size: cover;
 }
diff --git a/src/sass/components/_button.scss b/src/sass/components/_button.scss
index fce3f8e89..aab6dda2a 100644
--- a/src/sass/components/_button.scss
+++ b/src/sass/components/_button.scss
@@ -135,12 +135,30 @@
     translate: 0 -50%;
   }
 
+  &--top {
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+    right: 2rem;
+  }
+
+  &--top-left {
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+  }
+
+  &--top-right {
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+  }
+
   &--bottom {
     position: absolute;
     bottom: 2rem;
     left: 2rem;
     right: 2rem;
-    z-index: 100;
   }
 
   &--actions {
diff --git a/src/sass/components/_chroma.scss b/src/sass/components/_chroma.scss
new file mode 100644
index 000000000..28cf5f651
--- /dev/null
+++ b/src/sass/components/_chroma.scss
@@ -0,0 +1,37 @@
+/**
+ * Cheese
+ */
+.chroma-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 100%;
+  max-height: 100%;
+  translate: -50% -50%;
+
+  canvas {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
+.chroma-background-selector {
+  position: absolute;
+  max-width: 100%;
+  display: flex;
+  gap: 0.5rem;
+  left: 2rem;
+  right: 2rem;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  bottom: calc(4rem + var(--button-height));
+}
+
+.chroma-background-selector-image {
+  cursor: pointer;
+  max-width: 120px;
+  max-height: 80px;
+  border: 2px solid var(--border-color);
+}
diff --git a/src/sass/components/_preview.scss b/src/sass/components/_preview.scss
new file mode 100644
index 000000000..6a8338cc7
--- /dev/null
+++ b/src/sass/components/_preview.scss
@@ -0,0 +1,74 @@
+/**
+ * Preview
+ */
+#preview--none,
+#preview--ipcam,
+#preview--video,
+#previewframe--picture,
+#previewframe--collage {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  translate: -50% -50%;
+  font-size: 1.75em;
+  color: var(--start-font-color);
+  text-align: center;
+}
+
+#preview--ipcam,
+#preview--video,
+#previewframe--picture,
+#previewframe--collage {
+  rotate: var(--preview-rotation);
+}
+
+#preview--none,
+#previewframe--picture,
+#previewframe--collage {
+  height: auto;
+  width: auto;
+}
+
+#preview--ipcam,
+#preview--video,
+#previewframe--picture,
+#previewframe--collage {
+  background-image: none;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+
+  &.fill {
+    object-fit: fill;
+  }
+  &.contain {
+    object-fit: contain;
+  }
+  &.cover {
+    background-size: cover;
+    object-fit: cover;
+  }
+  &.none {
+    object-fit: none;
+  }
+  &.scale-down {
+    object-fit: scale-down;
+  }
+  &.flip-horizontal {
+    scale: 1 -1;
+  }
+  &.flip-vertical {
+    scale: -1 1;
+  }
+}
+
+#preview--ipcam {
+  &.streaming {
+    background-image: var(--background-preview);
+  }
+}
diff --git a/src/sass/components/_root.scss b/src/sass/components/_root.scss
index 30882a8f8..9eb34b8ee 100644
--- a/src/sass/components/_root.scss
+++ b/src/sass/components/_root.scss
@@ -23,7 +23,7 @@
   --background-default: none;
   --background-admin: none;
   --background-chroma: none;
-  --background-url: none;
+  --background-preview: none;
   --font-family: 'Dosis', sans-serif;
   --font-size: 1rem;
   --font-color: transparent;
diff --git a/src/sass/components/_stage.scss b/src/sass/components/_stage.scss
index f8e619bcd..f73648f17 100644
--- a/src/sass/components/_stage.scss
+++ b/src/sass/components/_stage.scss
@@ -7,6 +7,8 @@
   --stage-background-image: none;
   --stage-start-color: var(--start-font-color);
   --stage-start-background: transparent;
+  --stage-chroma-color: inherit;
+  --stage-chroma-background: var(--background-chroma);
   --stage-loader-color: inherit;
   --stage-loader-background: var(--background-countdown-color);
   --stage-result-color: inherit;
@@ -30,17 +32,22 @@
     display: flex;
   }
 
-  &[data-stage='start'] {
+  &--start {
     --stage-color: var(--stage-start-color);
     --stage-background: var(--stage-start-background);
   }
 
-  &[data-stage='loader'] {
+  &--chroma {
+    --stage-color: var(--stage-chroma-color);
+    --stage-background: var(--stage-chroma-background);
+  }
+
+  &--loader {
     --stage-color: var(--stage-loader-color);
     --stage-background: var(--stage-loader-background);
   }
 
-  &[data-stage='result'] {
+  &--result {
     --stage-color: var(--stage-result-color);
     --stage-background: var(--stage-result-background);
   }
diff --git a/src/sass/framework.scss b/src/sass/framework.scss
index 5b1439ae9..27ca2e324 100644
--- a/src/sass/framework.scss
+++ b/src/sass/framework.scss
@@ -7,6 +7,7 @@
 @import 'components/button';
 @import 'components/sidenav';
 @import 'components/stage';
+@import 'components/preview';
 @import 'components/logo';
 @import 'components/adminshortcut';
 @import 'components/countdown';
@@ -14,6 +15,7 @@
 @import 'components/shutter';
 @import 'components/buzzer';
 @import 'components/gallery';
+@import 'components/chroma';
 @import 'components/form';
 @import 'components/modal';
 @import 'components/overlay';
diff --git a/src/sass/classic_style.scss b/src/sass/legacy.scss
similarity index 56%
rename from src/sass/classic_style.scss
rename to src/sass/legacy.scss
index c9352e6ad..e552311cf 100644
--- a/src/sass/classic_style.scss
+++ b/src/sass/legacy.scss
@@ -1,27 +1,10 @@
 @import 'vendor/photoswipe';
 @import 'partials/video_animation';
-@import 'partials/video_preview';
 
-#wrapper {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  background-color: var(--primary-light-color);
-  background-image: var(--background-default);
-  background-position: center center;
-  background-size: cover;
-}
-
-#no_preview {
-  width: 80%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 1.75em;
-  color: var(--start-font-color);
-  text-align: center;
+[data-ui-theme='modern'] {
+  .pswp-rotary-focus {
+    background: radial-gradient(var(--highlight-color), var(--primary-color), var(--secondary-color)) !important;
+  }
 }
 
 #resultVideo {
@@ -69,12 +52,6 @@
   bottom: 80px;
   min-width: 15%;
   max-height: 30%;
-  z-index: 150;
-}
-
-.chroma-control-bar {
-  margin-top: 12px;
-  text-align: center;
 }
 
 .pswp-rotary-focus {
diff --git a/src/sass/modern_chromacapture.scss b/src/sass/modern_chromacapture.scss
deleted file mode 100644
index 9b9737826..000000000
--- a/src/sass/modern_chromacapture.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import 'classic_chromacapture';
-
-.backgrounds {
-  margin-top: 5px;
-}
-
-@media (max-height: 740px) and (orientation: landscape) {
-  .backgrounds {
-    &.shrinked {
-      height: 350px;
-    }
-  }
-}
diff --git a/src/sass/modern_chromakeying.scss b/src/sass/modern_chromakeying.scss
deleted file mode 100644
index 447f1e2b3..000000000
--- a/src/sass/modern_chromakeying.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'classic_chromakeying';
diff --git a/src/sass/modern_squared_chromacapture.scss b/src/sass/modern_squared_chromacapture.scss
deleted file mode 100644
index 1353b1ea1..000000000
--- a/src/sass/modern_squared_chromacapture.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'modern_chromacapture';
diff --git a/src/sass/modern_squared_chromakeying.scss b/src/sass/modern_squared_chromakeying.scss
deleted file mode 100644
index d6e7bc3d9..000000000
--- a/src/sass/modern_squared_chromakeying.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'modern_chromakeying';
diff --git a/src/sass/modern_squared_style.scss b/src/sass/modern_squared_style.scss
deleted file mode 100644
index dcb44e83e..000000000
--- a/src/sass/modern_squared_style.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'modern_style';
diff --git a/src/sass/modern_style.scss b/src/sass/modern_style.scss
deleted file mode 100644
index c9bd1dd81..000000000
--- a/src/sass/modern_style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import 'classic_style';
-
-.pswp-rotary-focus {
-  background: radial-gradient(var(--highlight-color), var(--primary-color), var(--secondary-color)) !important;
-}
diff --git a/src/sass/partials/_video_animation.scss b/src/sass/partials/_video_animation.scss
index 0b1c1d2cc..8042b16e5 100644
--- a/src/sass/partials/_video_animation.scss
+++ b/src/sass/partials/_video_animation.scss
@@ -4,7 +4,6 @@
   width: 100%;
   overflow: hidden;
   position: relative;
-  z-index: 1500;
 }
 
 #videoAnimation * {
diff --git a/src/sass/partials/_video_preview.scss b/src/sass/partials/_video_preview.scss
deleted file mode 100644
index 721f1ee22..000000000
--- a/src/sass/partials/_video_preview.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-#video--view,
-#picture--frame,
-#collage--frame {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(var(--preview-rotation));
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  &.fill {
-    object-fit: fill;
-  }
-  &.contain {
-    object-fit: contain;
-  }
-  &.cover {
-    object-fit: cover;
-  }
-  &.none {
-    object-fit: none;
-  }
-  &.scale-down {
-    object-fit: scale-down;
-  }
-  &.flip-horizontal {
-    transform: translate(-50%, -50%) rotate(var(--preview-rotation)) scalex(-1);
-  }
-  &.flip-vertical {
-    transform: translate(-50%, -50%) rotate(var(--preview-rotation)) scaleY(-1);
-  }
-  z-index: 0;
-}
-
-#picture--frame,
-#collage--frame {
-  display: none;
-  z-index: 100;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-#ipcam--view {
-  top: 0;
-  left: 0;
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  background-image: none;
-  background-size: contain;
-  background-position: center center;
-  background-repeat: no-repeat;
-  transform: rotate(var(--preview-rotation));
-
-  &.cover {
-    background-size: cover;
-  }
-
-  &.streaming {
-    background-image: var(--background-url);
-  }
-}
-
-.flip-horizontal {
-  -webkit-transform: scaleX(-1);
-  transform: scaleX(-1);
-  filter: FlipH;
-}
-
-.flip-vertical {
-  -webkit-transform: scaleY(-1);
-  transform: scaleY(-1);
-  filter: FlipV;
-}
diff --git a/src/sass/themes/_classic.scss b/src/sass/themes/_classic.scss
index d20c52e90..fc03b22b2 100644
--- a/src/sass/themes/_classic.scss
+++ b/src/sass/themes/_classic.scss
@@ -3,7 +3,7 @@
  */
 [data-ui-theme='classic'],
 [data-ui-theme='classic_rounded'] {
-  [data-stage='start'] {
+  .stage--start {
     .stage-inner {
       &:before {
         content: '';
@@ -66,7 +66,7 @@
     }
   }
 
-  [data-stage='result'] {
+  .stage--result {
     button[data-command='homebtn'] {
       position: fixed;
       top: 2rem;
@@ -81,7 +81,7 @@
 }
 
 [data-ui-theme='classic_rounded'] {
-  [data-stage='start'] {
+  .stage--start {
     .stage-inner,
     .stage-inner:before {
       border-radius: 1rem;
diff --git a/src/sass/themes/_modern.scss b/src/sass/themes/_modern.scss
index 6b65ab942..cb757580b 100644
--- a/src/sass/themes/_modern.scss
+++ b/src/sass/themes/_modern.scss
@@ -3,7 +3,7 @@
  */
 [data-ui-theme='modern'],
 [data-ui-theme='modern_squared'] {
-  [data-stage='start'] {
+  .stage--start {
     .stage-inner {
       justify-content: flex-end;
     }
@@ -15,7 +15,7 @@
     }
   }
 
-  [data-stage='result'] {
+  .stage--result {
     button[data-command='homebtn'] {
       position: fixed;
       top: 2rem;
@@ -25,7 +25,7 @@
 }
 
 [data-ui-theme='modern'] {
-  [data-stage='start'] {
+  .stage--start {
     .stage-inner {
       justify-content: flex-end;
       align-items: flex-end;
@@ -38,7 +38,7 @@
 }
 
 [data-ui-theme='modern_squared'] {
-  [data-stage='start'] {
+  .stage--start {
     .names {
       text-align: center;
     }
diff --git a/template/components/chroma.background.selector.php b/template/components/chroma.background.selector.php
new file mode 100644
index 000000000..cce53e0ec
--- /dev/null
+++ b/template/components/chroma.background.selector.php
@@ -0,0 +1,11 @@
+<?php
+
+use Photobooth\Utility\ImageUtility;
+use Photobooth\Utility\PathUtility;
+
+echo '<div class="chroma-background-selector">';
+$backgroundImages = ImageUtility::getImagesFromPath(PathUtility::getAbsolutePath($config['keying']['background_path']));
+foreach ($backgroundImages as $backgroundImage) {
+    echo '<img src="' . PathUtility::getPublicPath($backgroundImage) . '" class="chroma-background-selector-image rotaryfocus" onclick="setChromaImage(this.src)">';
+}
+echo '</div>';
diff --git a/template/components/chroma.canvas.php b/template/components/chroma.canvas.php
new file mode 100644
index 000000000..7a61a1117
--- /dev/null
+++ b/template/components/chroma.canvas.php
@@ -0,0 +1,3 @@
+<div class="chroma-canvas">
+    <canvas id="chromaCanvas"></canvas>
+</div>
diff --git a/template/components/main.footer.php b/template/components/main.footer.php
index 2ea58d719..85fcd4d4a 100644
--- a/template/components/main.footer.php
+++ b/template/components/main.footer.php
@@ -9,7 +9,7 @@
 
 if ($remoteBuzzer) {
     echo '<script src="' . $assetService->getUrl('node_modules/socket.io-client/dist/socket.io.min.js') . '"></script>';
-    echo '<script src="' . $assetService->getUrl('resources/js/remotebuzzer_client.js') . '"></script>';
+    echo '<script src="' . $assetService->getUrl('resources/js/remotebuzzer-client.js') . '"></script>';
 }
 
 if ($photoswipe) {
diff --git a/template/components/main.head.php b/template/components/main.head.php
index 31b65ca29..c8ed8755f 100644
--- a/template/components/main.head.php
+++ b/template/components/main.head.php
@@ -40,7 +40,7 @@
     <link rel="stylesheet" href="<?=$assetService->getUrl('node_modules/material-icons/css/material-icons.css')?>">
     <link rel="stylesheet" href="<?=$assetService->getUrl('resources/css/fonts.css')?>" />
     <link rel="stylesheet" href="<?=$assetService->getUrl('resources/css/framework.css')?>" />
-    <link rel="stylesheet" href="<?=$assetService->getUrl('resources/css/' . $mainStyle)?>" />
+    <link rel="stylesheet" href="<?=$assetService->getUrl('resources/css/legacy.css')?>" />
 <?php
 
 if ($photoswipe) {
diff --git a/template/components/preview.php b/template/components/preview.php
new file mode 100644
index 000000000..aef642801
--- /dev/null
+++ b/template/components/preview.php
@@ -0,0 +1,23 @@
+<?php
+
+use Photobooth\Service\LanguageService;
+
+$languageService = LanguageService::getInstance();
+$previewFlipClass = $config['preview']['flip'];
+$previewStyleClass = $config['preview']['style'];
+$previewShowPictureFrame = $config['preview']['showFrame'] && !empty($config['picture']['frame']);
+$previewShowCollageFrame = $config['preview']['showFrame'] && !empty($config['collage']['frame']);
+
+echo '<div class="preview">';
+echo '<video id="preview--video" class="'. $previewFlipClass . ' ' . $previewStyleClass . '" autoplay playsinline></video>';
+echo '<div id="preview--ipcam" class="' . $previewFlipClass . ' ' . $previewStyleClass . '"></div>';
+echo '<div id="preview--none">' . $languageService->translate('no_preview') . '</div>';
+
+if ($previewShowPictureFrame) {
+    echo '<img id="previewframe--picture" class="' . $previewFlipClass . '" src="' . $config['picture']['frame'] . '" alt="pictureFrame" />';
+}
+if ($previewShowCollageFrame) {
+    echo '<img id="previewframe--collage" class="' . $previewFlipClass . '" src="' . $config['collage']['frame'] . '" alt="collageFrame" />';
+}
+
+echo '</div>';
diff --git a/template/components/stage.loader.php b/template/components/stage.loader.php
index 14c32eef4..7be40e069 100644
--- a/template/components/stage.loader.php
+++ b/template/components/stage.loader.php
@@ -1,7 +1,6 @@
 
-<div class="stage rotarygroup" data-stage="loader">
+<div class="stage stage--loader rotarygroup" data-stage="loader">
     <div class="stage-inner">
-        <div id="ipcam--view" class="<?php echo $config['preview']['style']; ?>"></div>
         <canvas id="video--sensor"></canvas>
         <div class="stage-image"></div>
         <div class="stage-message"></div>
diff --git a/template/components/stage.results.php b/template/components/stage.results.php
index 1ba2a5fc0..28e41842a 100644
--- a/template/components/stage.results.php
+++ b/template/components/stage.results.php
@@ -2,7 +2,7 @@
 
 use Photobooth\Utility\ComponentUtility;
 
-echo '<div class="stage rotarygroup" data-stage="result">';
+echo '<div class="stage stage--result rotarygroup" data-stage="result">';
 echo '<div class="stage-inner">';
 echo '<div class="buttonbar buttonbar--bottom">';
 
diff --git a/template/components/stage.start.php b/template/components/stage.start.php
index 3a5fdf53e..592166f84 100644
--- a/template/components/stage.start.php
+++ b/template/components/stage.start.php
@@ -4,7 +4,7 @@
 
 ?>
 <!-- Start Page -->
-<div class="stage rotarygroup" data-stage="start">
+<div class="stage stage--start rotarygroup" data-stage="start">
     <?php include PathUtility::getAbsolutePath('template/components/start.logo.php'); ?>
     <div class="stage-inner">
         <?php if ($config['event']['enabled'] || $config['start_screen']['title_visible']): ?>
diff --git a/test/chroma.php b/test/chroma.php
index 4c03e18e0..aad9e5e7d 100644
--- a/test/chroma.php
+++ b/test/chroma.php
@@ -10,7 +10,6 @@
 $languageService = LanguageService::getInstance();
 $assetService = AssetService::getInstance();
 $pageTitle = $config['ui']['branding'] . ' Chroma-Preview Test';
-$mainStyle = $config['ui']['style'] . '_style.css';
 $photoswipe = false;
 $remoteBuzzer = false;
 
@@ -18,36 +17,30 @@
 ?>
 
 <body>
-    <video id="video--view" class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['style']; ?>" autoplay playsinline></video>
-
-    <div id="wrapper">
-        <div id="ipcam--view" class="<?php echo $config['preview']['style']; ?>"></div>
-        <div id="no_preview">
-            <?=$languageService->translate('no_preview')?>
-        </div>
-        <div class="buttonbar buttonbar--bottom">
-            <?= ComponentUtility::renderButton('startPreview', 'fa fa-play', 'startPreview') ?>
-            <?= ComponentUtility::renderButton('stopPreview', 'fa fa-stop', 'stopPreview') ?>
-
-            <label for="chromaImage">Chroma Image:</label>
-            <input id="chromaImage" type="text" value="/var/www/html/resources/img/bg.jpg"/>
-            <label for="chromaColor">Color:</label>
-            <input id="chromaColor" class="settinginput color" type="color" value="#00ff00"/>'
-            <label for="chromaSensitivity">Sensitivity:</label>
-            <input id="chromaSensitivity" type="number" value="0.4"/>
-            <label for="chromaBlend">Blend:</label>
-            <input id="chromaBlend" type="number" value="0.1"/>
-
-            <?= ComponentUtility::renderButton('set', 'fa fa-save', 'setChroma') ?>
-            <?= ComponentUtility::renderButtonLink('back', 'fa fa-chevron-left', PathUtility::getPublicPath('test')) ?>
-        </div>
+    <?php include PathUtility::getAbsolutePath('template/components/preview.php'); ?>
+    <div class="buttonbar buttonbar--top-left">
+        <?= ComponentUtility::renderButtonLink('back', 'fa fa-chevron-left', PathUtility::getPublicPath('test')) ?>
+    </div>
+    <div class="buttonbar buttonbar--bottom">
+        <?= ComponentUtility::renderButton('startPreview', 'fa fa-play', 'startPreview') ?>
+        <?= ComponentUtility::renderButton('stopPreview', 'fa fa-stop', 'stopPreview') ?>
+        <label for="chromaImage">Chroma Image:</label>
+        <input id="chromaImage" type="text" value="/var/www/html/resources/img/bg.jpg"/>
+        <label for="chromaColor">Color:</label>
+        <input id="chromaColor" class="settinginput color" type="color" value="#00ff00"/>'
+        <label for="chromaSensitivity">Sensitivity:</label>
+        <input id="chromaSensitivity" type="number" value="0.4"/>
+        <label for="chromaBlend">Blend:</label>
+        <input id="chromaBlend" type="number" value="0.1"/>
+
+        <?= ComponentUtility::renderButton('set', 'fa fa-save', 'setChroma') ?>
     </div>
 
     <?php include PathUtility::getAbsolutePath('template/components/main.footer.php'); ?>
 
     <script src="<?=$assetService->getUrl('resources/js/preview.js')?>"></script>
-    <script src="<?=$assetService->getUrl('resources/js/test_preview.js')?>"></script>
-    <script src="<?=$assetService->getUrl('resources/js/test_chroma.js')?>"></script>
+    <script src="<?=$assetService->getUrl('resources/js/test-preview.js')?>"></script>
+    <script src="<?=$assetService->getUrl('resources/js/test-chroma.js')?>"></script>
 
 </body>
 </html>
diff --git a/test/preview.php b/test/preview.php
index be3840547..0816cf213 100644
--- a/test/preview.php
+++ b/test/preview.php
@@ -10,7 +10,6 @@
 $languageService = LanguageService::getInstance();
 $assetService = AssetService::getInstance();
 $pageTitle = $config['ui']['branding'] . ' Preview-Test';
-$mainStyle = $config['ui']['style'] . '_style.css';
 $photoswipe = false;
 $remoteBuzzer = false;
 
@@ -18,20 +17,11 @@
 ?>
 
 <body>
-    <?php if ($config['preview']['showFrame'] && !empty($config['picture']['frame'])): ?>
-    <img id="picture--frame" class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['style']; ?>" src="<?php echo $config['picture']['frame']; ?>" alt="pictureFrame" />
-    <?php endif; ?>
-    <?php if ($config['preview']['showFrame'] && !empty($config['collage']['frame'])): ?>
-    <img id="collage--frame" class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['style']; ?>" src="<?php echo $config['collage']['frame']; ?>" alt="collageFrame" />
-    <?php endif; ?>
-    <video id="video--view" class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['style']; ?>" autoplay playsinline></video>
-
-    <div id="wrapper">
-        <div id="ipcam--view" class="<?php echo $config['preview']['style']; ?>"></div>
-        <div id="no_preview">
-            <?=$languageService->translate('no_preview')?>
-        </div>
-        <div class="buttonbar buttonbar--bottom">
+    <?php include PathUtility::getAbsolutePath('template/components/preview.php'); ?>
+    <div class="buttonbar buttonbar--top-left">
+        <?= ComponentUtility::renderButtonLink('back', 'fa fa-chevron-left', PathUtility::getPublicPath('test')) ?>
+    </div>
+    <div class="buttonbar buttonbar--bottom">
 <?php
 
 echo ComponentUtility::renderButton('startPreview', 'fa fa-play', 'startPreview');
@@ -45,16 +35,14 @@
 if ($config['preview']['showFrame'] && !empty($config['picture']['frame']) || $config['preview']['showFrame'] && !empty($config['collage']['frame'])) {
     echo ComponentUtility::renderButton('hideFrame', 'fa fa-eye-slash', 'hideFrame');
 }
-echo ComponentUtility::renderButtonLink('back', 'fa fa-chevron-left', PathUtility::getPublicPath('test'));
 
 ?>
-        </div>
     </div>
 
     <?php include PathUtility::getAbsolutePath('template/components/main.footer.php'); ?>
 
     <script src="<?=$assetService->getUrl('resources/js/preview.js')?>"></script>
-    <script src="<?=$assetService->getUrl('resources/js/test_preview.js')?>"></script>
+    <script src="<?=$assetService->getUrl('resources/js/test-preview.js')?>"></script>
 
 </body>
 </html>
diff --git a/test/trigger.php b/test/trigger.php
index a96b75b34..7eb0d369e 100644
--- a/test/trigger.php
+++ b/test/trigger.php
@@ -8,14 +8,12 @@
 
 $languageService = LanguageService::getInstance();
 $pageTitle = $config['ui']['branding'] . ' Remote Trigger';
-$mainStyle = $config['ui']['style'] . '_style.css';
 $photoswipe = false;
 $remoteBuzzer = false;
 
 include PathUtility::getAbsolutePath('template/components/main.head.php');
 
 echo '<body>';
-echo '<div id="wrapper">';
 echo '<div class="buttonbar buttonbar--middle">';
 
 if ($config['remotebuzzer']['usebuttons']) {
@@ -53,7 +51,6 @@
 
 echo ComponentUtility::renderButtonLink('back', 'fa fa-chevron-left', PathUtility::getPublicPath('test'));
 
-echo '</div>';
 echo '</div>';
 
 include PathUtility::getAbsolutePath('template/components/main.footer.php');