Revert "Ensure live preview is not cached"

This reverts commit 80faa47.

Author: reloxx13

admin/captureconfig.php

@@ -34,7 +34,7 @@
 $config['picture']['cheese_time'] = '0';
 
 $config['preview']['mode'] = 'url';
-$config['preview']['url'] = 'http://' . Environment::getIp() . ':1984/api/stream.mjpeg?src=photobooth';
+$config['preview']['url'] = 'url("http://' . Environment::getIp() . ':1984/api/stream.mjpeg?src=photobooth")';
 $config['preview']['camTakesPic'] = false;
 
 try {

admin/wgetcaptureconfig.php

@@ -34,7 +34,7 @@
 $config['picture']['cheese_time'] = '0';
 
 $config['preview']['mode'] = 'url';
-$config['preview']['url'] = 'http://' . Environment::getIp() . ':1984/api/stream.mjpeg?src=photobooth';
+$config['preview']['url'] = 'url("http://' . Environment::getIp() . ':1984/api/stream.mjpeg?src=photobooth")';
 $config['preview']['camTakesPic'] = false;
 
 try {

assets/js/preview.js

@@ -1,22 +1,5 @@
 /* eslint n/no-unsupported-features/node-builtins: "off" */
 /* globals photoBooth photoboothTools */
-
-function addCacheBustingParam(url) {
-    const timestamp = new Date().getTime();
-
-    if (url.includes('?')) {
-        return `${url}&t=${timestamp}`;
-    }
-
-    return `${url}?t=${timestamp}`;
-}
-
-function getRootProperty(property) {
-    const root = document.documentElement;
-    const style = getComputedStyle(root);
-    return style.getPropertyValue(property).trim();
-}
-
 const photoboothPreview = (function () {
     // vars
     const CameraDisplayMode = {
@@ -196,8 +179,8 @@ 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.show();
+                        url.addClass('streaming');
                     }, config.preview.url_delay);
                 }
                 break;
@@ -208,8 +191,8 @@ 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.show();
+                        url.addClass('streaming');
                     }, config.preview.url_delay);
                 }
                 break;
@@ -235,8 +218,8 @@ const photoboothPreview = (function () {
             tracks.forEach((track) => track.stop());
             api.stream = null;
         }
+        url.removeClass('streaming');
         url.hide();
-        url.attr('src', '');
         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);
+  }
+}

docs/faq/index.md

@@ -476,7 +476,7 @@ If you like to have the same preview independent of the device you access Photob
 Make sure to have a stream available you can use (e.g. from your Webcam, Smartphone Camera or Raspberry Pi Camera)
 
 -   Admin panel config _"Preview mode"_: `from URL`
--   Admin panel config _"Preview-URL"_ example (add needed IP address instead): `http://192.168.0.2:8081`
+-   Admin panel config _"Preview-URL"_ example (add needed IP address instead): `url(http://192.168.0.2:8081)`
 
 **Note**
 
@@ -488,7 +488,7 @@ Make sure to have a stream available you can use (e.g. from your Webcam, Smartph
 
 If you want to use a stream from your DSLR or Pi Camera, install go2rtc and setup needed service to use.
 
-go2rtc can be accessed at `http://localhost:1984`. Use `http://localhost:1984/api/stream.mjpeg?src=photobooth` as _"Preview-URL"_ (replace `localhost` with Photobooths IP for remote access).
+go2rtc can be accessed at `http://localhost:1984`. Use `url("http://localhost:1984/api/stream.mjpeg?src=photobooth")` as _"Preview-URL"_ (replace `localhost` with Photobooths IP for remote access).
 To be able to also capture images you need to adjust the capture command.
 _"Commands"_: _"Take picture command"_: `capture %s`
 

lib/configsetup.inc.php

@@ -1513,7 +1513,7 @@
         'preview_url' => [
             'type' => 'input',
             'name' => 'preview[url]',
-            'placeholder' => 'http://localhost:8081',
+            'placeholder' => 'url(http://localhost:8081)',
             'value' => htmlentities($config['preview']['url'] ?? ''),
         ],
         'preview_url_delay' => [

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>';