patch

docker/config/nginx/motionui.conf

@@ -83,6 +83,7 @@ server {
         fastcgi_request_buffering off;
     }
 
+    # Go2rtc stream access
     location ~ /api/stream.mjpeg { 
         proxy_pass http://127.0.0.1:1984;
         proxy_http_version 1.1; 
@@ -92,6 +93,11 @@ server {
         proxy_read_timeout 86400;
     }
 
+    # Go2rtc main page
+    location ~ /go2rtc { 
+        proxy_pass http://127.0.0.1:1984/;
+    }
+
     location ~ \.php$ {
         root $WWW_DIR/public;
         include fastcgi_params;

www/controllers/Camera/Timelapse.php

@@ -130,7 +130,7 @@ public function timelapse()
                     /**
                      *  Ignore if it fails to capture image because the camera may not be running 24/7
                      */
-                    if ($content === false) {
+                    if ($content === false or empty($content)) {
                         continue;
                     }
 

www/public/resources/js/camera.js

@@ -328,6 +328,9 @@ $(document).on('click','.timelapse-camera-btn',function () {
         // Execute functions :
         [ "$('footer').append(jsonValue.message)" ]
     );
+
+    // Temporary hide all other stream images to avoid CPU loads
+    $('.camera-image').hide();
 });
 
 /**
@@ -380,9 +383,8 @@ $(document).on('click','#timelapse-play-btn',function () {
 
 /**
  *  Play timelapse
- *  @returns
  */
-async function playTimelapse()
+function playTimelapse()
 {
     /**
      *  Retrieve camera id, date, max range and all pictures names
@@ -587,47 +589,43 @@ $(document).on('click','.hide-camera-configuration-btn',function () {
  *  Event: close timelapse screen
  */
 $(document).on('click','.close-timelapse-btn',function () {
+    // Show all stream images
+    $('.camera-image').show();
+
     $('#timelapse').remove();
 });
 
 /**
  *  Event: set a camera on full screen
  */
 $(document).on('click','.full-screen-camera-btn',function () {
-    var cameraId = $(this).attr('camera-id');
-
-    /**
-     *  Add full-screen class to set the div on full screen
-     */
-    $('.camera-container[camera-id='+cameraId+']').addClass("full-screen");
-
-    /**
-     *  Show and hide certain buttons
-     */
-    $('.delete-camera-btn[camera-id='+cameraId+']').hide();
-    $('.configure-camera-btn[camera-id='+cameraId+']').hide();
-    $('.timelapse-camera-btn[camera-id='+cameraId+']').hide();
-    $('.close-full-screen-container[camera-id='+cameraId+']').css('display', 'block');
+    var img = $(this);
+
+    html = '<div id="fullscreen">'
+    + '<div class="flex align-item-center">'
+    + '<img src="' + img.attr('src') + '" class="fullscreen-image" alt="Camera Image" />'
+    + '</div>'
+    + '<div class="flex align-item-center justify-center">'
+    + '<img src="/assets/icons/close.svg" class="close-fullscreen-btn pointer lowopacity" title="Close fullscreen">'
+    + '</div>'
+    + '</div>';
+
+    // Append the fullscreen div to the body
+    $('body').append(html);
+
+    // Temporary hide all other stream images to avoid CPU loads
+    $('.camera-image').hide();
 });
 
 /**
  *  Event: close camera full screen
  */
-$(document).on('click','.close-full-screen-btn',function () {
-    var cameraId = $(this).attr('camera-id');
+$(document).on('click','.close-fullscreen-btn',function () {
+    // Show all stream images
+    $('.camera-image').show();
 
-    /**
-     *  Remove full-screen class to set the div on normal screen
-     */
-    $('.camera-container[camera-id='+cameraId+']').removeClass("full-screen");
-
-    /**
-     *  Show and hide certain buttons
-     */
-    $('.delete-camera-btn[camera-id='+cameraId+']').show();
-    $('.configure-camera-btn[camera-id='+cameraId+']').show();
-    $('.timelapse-camera-btn[camera-id='+cameraId+']').show();
-    $('.close-full-screen-container[camera-id='+cameraId+']').hide();
+    // Remove the fullscreen div
+    $('#fullscreen').remove();
 });
 
 /**

www/public/resources/js/motion.js

@@ -247,8 +247,17 @@ $(document).on('change','.event-date-input',function () {
 $(document).on('click','.play-picture-btn',function () {
     var fileId = $(this).attr('file-id');
 
-    $('.event-print-file').html('<img src="/media?id=' + fileId + '" />');
-    $('.event-print-file-container').css('display', 'flex');
+    html = '<div id="fullscreen">'
+    + '<div class="flex align-item-center">'
+    + '<img src="/media?id=' + fileId + '" title="Full screen event picture" />'
+    + '</div>'
+    + '<div class="flex align-item-center justify-center">'
+    + '<img src="/assets/icons/close.svg" class="close-fullscreen-btn pointer lowopacity" title="Close fullscreen">'
+    + '</div>'
+    + '</div>';
+
+    // Append the fullscreen div to the body
+    $('body').append(html);
 });
 
 /**
@@ -257,8 +266,17 @@ $(document).on('click','.play-picture-btn',function () {
 $(document).on('click','.play-video-btn',function () {
     var fileId = $(this).attr('file-id');
 
-    $('.event-print-file').html('<video controls><source src="/media?id=' + fileId + '"><p>You browser does not support embedded videos.</p></video>');
-    $('.event-print-file-container').css('display', 'flex');
+    html = '<div id="fullscreen">'
+    + '<div class="flex align-item-center">'
+    + '<video controls title="Full screen event video"><source src="/media?id=' + fileId + '"><p>You browser does not support embedded videos.</p></video>'
+    + '</div>'
+    + '<div class="flex align-item-center justify-center">'
+    + '<img src="/assets/icons/close.svg" class="close-fullscreen-btn pointer lowopacity" title="Close fullscreen">'
+    + '</div>'
+    + '</div>';
+
+    // Append the fullscreen div to the body
+    $('body').append(html);
 });
 
 /**

www/public/resources/js/pre/camera.js

@@ -4,7 +4,7 @@
  */
 function setUnavailable(cameraId)
 {
-    $('.camera-container[camera-id=' + cameraId + ']').find('.camera-loading').hide();
-    $('.camera-container[camera-id=' + cameraId + ']').find('.camera-image').hide();
+    $('.camera-container[camera-id=' + cameraId + ']').find('.camera-loading').remove();
+    $('.camera-container[camera-id=' + cameraId + ']').find('.camera-image').remove();
     $('.camera-container[camera-id=' + cameraId + ']').find('.camera-unavailable').css('display', 'flex');
 }

www/public/resources/styles/motionui.css

@@ -470,7 +470,7 @@ h3 {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    margin: 20px 15px;
+    margin: 15px;
 }
 
 .camera-image > img {
@@ -507,7 +507,11 @@ h3 {
     width: 30%;
     height: 30%;
 }
-#timelapse, .full-screen {
+
+#fullscreen, #timelapse {
+    display: grid;
+    row-gap: 15px;
+    justify-content: center;
     position: fixed;
     top: 0;
     left: 0;
@@ -519,34 +523,43 @@ h3 {
     -webkit-box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
     box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
 }
+#fullscreen {
+    grid-template-rows: 80% 20%;    
+}
+#timelapse {
+    grid-template-rows: 40% 40% 20%;
+}
 #timelapse-picture-container {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    max-height: 40vh;
-    max-width: 100vw;
+    row-gap: 15px;
+    height: 100% !important;
+    max-height: 100% !important;
+}
+#timelapse-picture-container div:nth-child(1) {
+    max-height: 100%;
 }
 #timelapse-picture {
     max-height: 100%;
-    max-width: 100vw;
+    width: auto;
+    max-width: 100%;
+    margin: auto;
     border-radius: 2px;
     box-shadow: 0px 1px 5px 0px rgb(13 13 13 / 50%);
 }
 #timelapse #picture-slider {
     width: 85vw;
 }
 
-.close-timelapse-btn, .close-full-screen-btn {
+.close-timelapse-btn, .close-fullscreen-btn {
     width: 50px;
     height: 50px;
-    margin: auto;
 }
-.full-screen img {
-    max-height: 85vh;
-    max-width: 100vw;
-    display: block !important;
-    margin: auto;
-    border-radius: 2px;
+#fullscreen img:first-child, #fullscreen video {
+    max-height: 100% !important;
+    max-width: 100% !important;
 }
 
 .hide {
@@ -758,10 +771,6 @@ footer #github img { width: 25px; }
         justify-content: space-around;
     }
 
-    #timelapse-picture-container {
-        max-height: 70vh;
-    }
-
     #motion-events-captures-container {
         grid-template-columns: repeat(2, 45%);
         justify-content: space-between;
@@ -848,6 +857,14 @@ footer #github img { width: 25px; }
         grid-template-columns: repeat(3, 1fr);
     }
 
+    #timelapse {
+        grid-template-rows: 65% 20% 15%;
+    }
+
+    #fullscreen {
+        grid-template-rows: 85% 15%;
+    }
+
     .bottom-buttons {
         justify-content: center;
         align-items: center;