task: unify rendering (#418)

All legacy special CSS files per theme are now removed and merged into the framework a while ago introduced `framework.css`. - All unnecessary wrappers have been removed - Preview rendering is now unified - Chroma and Chromakeying received a first round of cleanup - Dedicated CSS files for themes removed - JavaScript files with underscores renamed
PhotoboothProject · Oct 29, 2023 · 8c5f69a · 8c5f69a
1 parent e76332d
commit 8c5f69a
Show file tree

Hide file tree

Showing 64 changed files with 558 additions and 853 deletions.
diff --git a/api/liveChromaConfig.php b/api/liveChromaConfig.php
@@ -20,18 +20,18 @@
     $cmd .= ' --chromaBlend ' . escapeshellarg($_POST['chromaBlend']);
 }
 exec($cmd);
-$LogData = [
+$data = [
     'cmd' => $cmd,
     'isRunning' => true,
     'pid' => intval(1),
 ];
 
 if ($config['dev']['loglevel'] > 1) {
-    $Logger = new DataLogger(PHOTOBOOTH_LOG);
-    $Logger->addLogData(['php' => basename($_SERVER['PHP_SELF'])]);
-    $Logger->addLogData($LogData);
-    $Logger->logToFile();
+    $logger = new DataLogger(PHOTOBOOTH_LOG);
+    $logger->addLogData(['php' => basename($_SERVER['PHP_SELF'])]);
+    $logger->addLogData($data);
+    $logger->logToFile();
 }
-$LogString = json_encode($LogData);
-echo $LogString;
+
+echo json_encode($data);
 exit();
diff --git a/api/previewCamera.php b/api/previewCamera.php
@@ -6,11 +6,11 @@
 
 header('Content-Type: application/json');
 
-$Logger = new DataLogger(PHOTOBOOTH_LOG);
-$Logger->addLogData(['php' => basename($_SERVER['PHP_SELF'])]);
+$logger = new DataLogger(PHOTOBOOTH_LOG);
+$logger->addLogData(['php' => basename($_SERVER['PHP_SELF'])]);
 $simpleExec = $config['preview']['simpleExec'];
 
-function isRunning($pid, $Logger)
+function isRunning($pid, $logger)
 {
     try {
         $result = shell_exec(sprintf('ps %d', $pid));
@@ -20,7 +20,7 @@ function isRunning($pid, $Logger)
         }
     } catch (Exception $e) {
         $ErrorData = ['exception' => $e->getMessage()];
-        $Logger->addLogData($ErrorData);
+        $logger->addLogData($ErrorData);
         return false;
     }
 
@@ -31,15 +31,15 @@ function isRunning($pid, $Logger)
     $cmd = sprintf($config['preview']['cmd']);
     if ($simpleExec) {
         exec($cmd);
-        $LogData = [
+        $data = [
             'isRunning' => true,
             'pid' => intval(1),
         ];
     } else {
         $pid = exec($cmd, $out);
         sleep(3);
-        $LogData = [
-            'isRunning' => isRunning($pid, $Logger),
+        $data = [
+            'isRunning' => isRunning($pid, $logger),
             'pid' => $pid - 1,
             'cmd' => $cmd,
         ];
@@ -62,22 +62,22 @@ function isRunning($pid, $Logger)
         }
     }
     if ($simpleExec) {
-        $LogData = [
+        $data = [
             'isRunning' => false,
             'pid' => intval(0),
         ];
     } else {
-        $LogData = [
-            'isRunning' => isRunning($_POST['pid'], $Logger),
+        $data = [
+            'isRunning' => isRunning($_POST['pid'], $logger),
             'cmd' => $killcmd,
             'pid' => intval($_POST['pid']),
         ];
     }
 }
 if ($config['dev']['loglevel'] > 1) {
-    $Logger->addLogData($LogData);
-    $Logger->logToFile();
+    $logger->addLogData($data);
+    $logger->logToFile();
 }
-$LogString = json_encode($LogData);
-echo $LogString;
+
+echo json_encode($data);
 exit();
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__',