task: drop unnessesary wrapper

PhotoboothProject · Oct 28, 2023 · f49b3db · f49b3db
1 parent df6320c
commit f49b3db
Show file tree

Hide file tree

Showing 60 changed files with 412 additions and 699 deletions.
diff --git 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,45 +30,31 @@
 
 $languageService = LanguageService::getInstance();
 $pageTitle = $config['ui']['branding'] . ' Chromakeying';
-$mainStyle = $config['ui']['style'] . '_chromakeying.css';
 $photoswipe = false;
 $remoteBuzzer = true;
 
 include PathUtility::getAbsolutePath('template/components/main.head.php');
 ?>
 
 <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
@@ -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
@@ -7,17 +7,14 @@
 
 $assetService = AssetService::getInstance();
 $pageTitle = $config['ui']['branding'] . ' Gallery';
-$mainStyle = $config['ui']['style'] . '_style.css';
 $photoswipe = true;
 $randomImage = false;
 $remoteBuzzer = true;
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'); ?>