fix ios preview (#1302)

* Revert "Ensure live preview is not cached"
This reverts commit 80faa47.

* fix ios cache busting on preview fix

* rename cache busting function, remove leftover url()´s

* fix for manual page sidebar Undefined variable $appVersion

* fix ci

---------

Co-authored-by: Andreas Skomski

Author: reloxx13

assets/js/preview.js

@@ -1,7 +1,9 @@
 /* eslint n/no-unsupported-features/node-builtins: "off" */
+
 /* globals photoBooth photoboothTools */
 
-function addCacheBustingParam(url) {
+function getPreviewUrlWithCacheBusting() {
+    const url = getBasePreviewUrl();
     const timestamp = new Date().getTime();
 
     if (url.includes('?')) {
@@ -11,10 +13,16 @@ function addCacheBustingParam(url) {
     return `${url}?t=${timestamp}`;
 }
 
-function getRootProperty(property) {
-    const root = document.documentElement;
-    const style = getComputedStyle(root);
-    return style.getPropertyValue(property).trim();
+function getBasePreviewUrl() {
+    if (!config.preview || !config.preview.url) {
+        return '';
+    }
+
+    const raw = config.preview.url;
+    //remove url("") if present
+    const match = raw.match(/^url\((['"]?)(.+?)\1\)$/);
+
+    return match ? match[2] : raw;
 }
 
 const photoboothPreview = (function () {
@@ -196,8 +204,9 @@ const photoboothPreview = (function () {
                 } else if (config.preview.mode === PreviewMode.URL.valueOf()) {
                     photoboothTools.console.logDev('Preview: Preview at countdown from URL.');
                     setTimeout(function () {
-                        url.attr('src', addCacheBustingParam(getRootProperty('--background-preview')));
+                        url.css('background-image', 'url("' + getPreviewUrlWithCacheBusting() + '")');
                         url.show();
+                        url.addClass('streaming');
                     }, config.preview.url_delay);
                 }
                 break;
@@ -208,8 +217,9 @@ const photoboothPreview = (function () {
                 } else if (config.preview.mode === PreviewMode.URL.valueOf()) {
                     photoboothTools.console.logDev('Preview: Preview from URL.');
                     setTimeout(function () {
-                        url.attr('src', addCacheBustingParam(getRootProperty('--background-preview')));
+                        url.css('background-image', 'url("' + getPreviewUrlWithCacheBusting() + '")');
                         url.show();
+                        url.addClass('streaming');
                     }, config.preview.url_delay);
                 }
                 break;
@@ -235,8 +245,9 @@ const photoboothPreview = (function () {
             tracks.forEach((track) => track.stop());
             api.stream = null;
         }
+        url.removeClass('streaming');
         url.hide();
-        url.attr('src', '');
+        url.css('background-image', 'none');
         video.hide();
         pictureFrame.hide();
         collageFrame.hide();

assets/js/test-preview.js

@@ -96,7 +96,7 @@ const photoboothPreviewTest = (function () {
         if (config.preview.mode === PreviewMode.DEVICE.valueOf()) {
             photoboothPreview.stopVideo();
         } else if (config.preview.mode === PreviewMode.URL.valueOf()) {
-            previewIpcam.attr('src', '');
+            previewIpcam.removeClass('streaming');
             previewIpcam.hide();
         }
 

assets/sass/components/_preview.scss

@@ -92,3 +92,9 @@
     scale: 1 -1;
   }
 }
+
+#preview--ipcam {
+  &.streaming {
+    background-image: var(--background-preview);
+  }
+}

manual/index.php

@@ -19,7 +19,12 @@
 $configsetup = require PathUtility::getAbsolutePath('lib/configsetup.inc.php');
 
 $languageService = LanguageService::getInstance();
-$pageTitle = 'Manual - ' . ApplicationService::getInstance()->getTitle();
+
+$appName    = ApplicationService::getInstance()->getTitle();
+$appVersion = ApplicationService::getInstance()->getVersion();
+$page       = 'Manual';
+$pageTitle  = $page . ' - ' . $appName . ' (' . $appVersion . ')';
+
 include PathUtility::getAbsolutePath('admin/components/head.admin.php');
 include PathUtility::getAbsolutePath('admin/helper/index.php');
 
@@ -31,7 +36,7 @@
             <!-- body -->
             <div class="w-full h-full flex flex-1 flex-col md:flex-row mt-5 overflow-hidden">
 <?php
-$sidebarHeadline = 'Manual';
+$sidebarHeadline = $page . ' - ' . $appName;
 include PathUtility::getAbsolutePath('admin/components/sidebar.php');
 ?>
                 <div class="flex flex-1 flex-col bg-content-1 rounded-xl ml-5 mr-5 mb-5 md:ml-0 overflow-hidden">

src/Service/ConfigurationService.php

@@ -213,7 +213,7 @@ protected function processMigration(array $config): array
             $config['preview']['mode'] = 'device_cam';
         }
 
-        // Migrate Preview URL
+        // Migrate Preview URL, remove surrounding url("...")
         if (isset($config['preview']['url']) && substr($config['preview']['url'], 0, 4) === 'url(' && substr($config['preview']['url'], -1) === ')') {
             $config['preview']['url'] = trim(substr($config['preview']['url'], 4, -1), '"\'');
         }

template/components/preview.php

@@ -45,7 +45,7 @@
 echo '<div id="preview-container" style="aspect-ratio: ' . $comp . '">';
 echo '<div id="preview-wrapper" style="aspect-ratio:' . $comp . '">';
 echo '<video id="preview--video" style="' . $composed_style . '" class="' . $previewFlipClass . ' ' . $previewStyleClass . '" autoplay playsinline></video>';
-echo '<img id="preview--ipcam" style="' . $composed_style . '" class="' . $previewFlipClass . ' ' . $previewStyleClass . '"></img>';
+echo '<div id="preview--ipcam" style="' . $composed_style . '" class="' . $previewFlipClass . ' ' . $previewStyleClass . '"></div>';
 echo '<div id="preview--none">' . $languageService->translate('no_preview') . '</div>';
 echo '</div></div>';