5.2.1

README.md

@@ -1,6 +1,6 @@
 # motion-UI
 
-A web responsive interface to manage <a href="https://motion-project.github.io/"><b>motion</b></a> (an open-source motion detection software) and visualize cameras live stream.
+A web responsive interface to manage <a href="https://github.com/Motion-Project/motion"><b>motion</b></a> (an open-source motion detection software) and visualize cameras live stream.
 
 <div align="center">
     <img src="https://github.com/user-attachments/assets/bdae2550-819d-40c4-895b-541ee64bdc03" width=25% align="top">
@@ -31,7 +31,7 @@ A web responsive interface to manage <a href="https://motion-project.github.io/"
 
 ## Android app 📱
 
-An Android app is available for download <a href="https://github.com/lbr38/motion-UI/releases/tag/android-1.0">here</a> (in the assets section).
+An Android app is available for download <a href="https://github.com/lbr38/motion-UI/releases/tag/android-1.0.0">here</a> (in the assets section).
 
 <hr>
 

docker/init

@@ -44,6 +44,9 @@ fi
 # Start go2rtc in background
 /bin/su -s /bin/bash -c "/usr/local/bin/go2rtc -c $GO2RTC_DIR/go2rtc.yml >/dev/null 2>/dev/null &" www-data
 
+# Start shell service in background
+/bin/bash "$WWW_DIR/bin/service.sh" &
+
 # Start motionui service
 /bin/su -s /bin/bash -c "php $WWW_DIR/tools/service.php" www-data
 

www/bin/service.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Run commands every day
+while true; do
+    /usr/bin/apt-get clean all > /dev/null
+    /usr/bin/apt-get update -y -qq > /dev/null
+
+    # Sleep for a day
+    /usr/bin/sleep 86400
+done

www/controllers/Go2rtc/Go2rtc.php

@@ -56,13 +56,10 @@ public function addStream(int $id, array $params)
          *  Rotate filter
          */
         if ($rotate == 90) {
-            // $ffmpegParams .= ' -vf "transpose=1"';
             $ffmpegParams .= '#rotate=90';
         } else if ($rotate == 180) {
-            // $ffmpegParams .= ' -vf "transpose=2,transpose=2"';
             $ffmpegParams .= '#rotate=180';
         } else if ($rotate == 270) {
-            // $ffmpegParams .= ' -vf "transpose=2"';
             $ffmpegParams .= '#rotate=270';
         }
 

www/controllers/Motion/Event.php

@@ -120,7 +120,7 @@ public function attachFile(string $motionEventId, string $file, int $width, int
              *  Create thumbnail if not already exist
              */
             if (!file_exists($file . '.thumbnail')) {
-                $myprocess = new \Controllers\Process('/usr/bin/ffmpeg -loglevel error -ss 00:00:01.00 -i ' . $file . ' -vf \'scale=320:320:force_original_aspect_ratio=decrease\' -vframes 1 ' . $file . '.thumbnail.jpg');
+                $myprocess = new \Controllers\Process('/usr/bin/ffmpeg -loglevel error -ss 00:00:00.10 -i ' . $file . ' -vf \'scale=320:320:force_original_aspect_ratio=decrease\' -vframes 1 ' . $file . '.thumbnail.jpg');
                 $myprocess->execute();
                 $myprocess->close();
             }

www/public/resources/js/camera.js

@@ -380,13 +380,13 @@ $(document).on('click','#timelapse-play-btn',function () {
  *  @returns
  */
 async function playTimelapse()
-{
+{    
     /**
      *  Retrieve camera id, date, max range and all pictures names
      */
     var cameraId = $('#picture-slider').attr('camera-id');
     var date = $('#picture-slider').attr('date');
-    var max = $('#picture-slider').attr('max');
+    var max = parseInt($('#picture-slider').attr('max'));
     var pictures = $('timelapse-data').attr('pictures');
 
     /**
@@ -443,7 +443,7 @@ async function playTimelapse()
     /**
      *  Convert max to integer
      */
-    var max = parseInt(max);
+    max = parseInt(max);
 
     /**
      *  If current index is greater or equal to max, then reset index to 0
@@ -455,81 +455,92 @@ async function playTimelapse()
     }
 
     /**
-     *  The loop will run until the index reaches the max range
+     *  Define timelapse object
      */
-    while (index < max + 1) {
-        /**
-         *  Quit if timelapse div was closed
-         */
-        if ($('#timelapse').length == 0) {
-            return;
-        }
-
-        /**
-         *  Quit if timelapse is in pause mode
-         */
-        if ($('#picture-slider').attr('pause') == 'true') {
-            return;
-        }
-
-        /**
-         *  Quit if timelapse-date-changed is set in local storage
-         *  This means that the user has changed the date while the timelapse is playing so we stop the timelapse and
-         *  remove the 'timelapse-date-changed' from local storage
-         */
-        if (localStorage.getItem('timelapse-date-changed')) {
-            localStorage.removeItem('timelapse-date-changed');
-            return;
-        }
-
-        /**
-         *  Get JPEG picture filename from the array
-         *  e.g. timelapse_08-17-50.jpg
-         */
-        var picture = pictures[index];
+    const timelapse = {
+        images: pictures,
+        index: index,
+        imgElement: $("#timelapse-picture"),
+        loadNextImage: function() {
+            if (this.index < this.images.length) {
+                /**
+                 *  Quit if timelapse div was closed
+                 */
+                if ($('#timelapse').length == 0) {
+                    return;
+                }
 
-        /**
-         *  Define the path to the target picture
-         *  e.g. /timelapse?id=14&picture=2024-06-04/timelapse_08-17-50.jpg
-         */
-        var path = '/timelapse?id=' + cameraId + '&picture=' + date + '/' + picture;
+                /**
+                 *  Quit if timelapse is in pause mode
+                 */
+                if ($('#picture-slider').attr('pause') == 'true') {
+                    return;
+                }
 
-        /**
-         *  Extract the time from the picture name
-         */
-        var time = picture.split('_')[1].split('.')[0];
-        var hour = time.split('-')[0];
-        var min = time.split('-')[1];
-        var sec = time.split('-')[2];
+                /**
+                 *  Quit if timelapse-date-changed is set in local storage
+                 *  This means that the user has changed the date while the timelapse is playing so we stop the timelapse and
+                 *  remove the 'timelapse-date-changed' from local storage
+                 */
+                if (localStorage.getItem('timelapse-date-changed')) {
+                    localStorage.removeItem('timelapse-date-changed');
+                    return;
+                }
 
-        /**
-         *  Update the image and the slider value
-         */
-        $('#timelapse-picture').attr('src', path);
-        $('#picture-slider').val(index);
+                /**
+                 *  Get JPEG picture filename from the array
+                 *  e.g. timelapse_08-17-50.jpg
+                 */
+                var picture = pictures[this.index];
 
-        /**
-         *  Update the picture time
-         */
-        $('#picture-time').text(hour + ':' + min + ':' + sec);
+                /**
+                 *  Define the path to the target picture
+                 *  e.g. /timelapse?id=14&picture=2024-06-04/timelapse_08-17-50.jpg
+                 */
+                var path = '/timelapse?id=' + cameraId + '&picture=' + date + '/' + picture;
 
-        /**
-         *  Wait 100ms before updating the index
-         */
-        await new Promise(r => setTimeout(r, 100));
+                /**
+                 *  Extract the time from the picture name
+                 */
+                var time = picture.split('_')[1].split('.')[0];
+                var hour = time.split('-')[0];
+                var min = time.split('-')[1];
+                var sec = time.split('-')[2];
+
+                /**
+                 *  Create a new Image object and set its src to the target picture path
+                 */
+                const nextImage = new Image();
+                nextImage.src = path;
 
-        /**
-         *  Always define index from the current slider value (in case the user changed the slider value while the timelapse is playing)
-         *  and increment it by 1
-         */
-        index = parseInt($('#picture-slider').val()) + 1;
-    }
+                /**
+                 *  Once the image is fully loaded, update the image <img> and the slider value
+                 */
+                nextImage.onload = () => {
+                    // Image is fully loaded, update the slider value
+                    $('#picture-slider').val(this.index);
+
+                    // Update the picture time
+                    $('#picture-time').text(hour + ':' + min + ':' + sec);
+
+                    this.imgElement.attr("src", path);
+
+                    /**
+                     *  Always define index from the current slider value (in case the user changed the slider value while the timelapse is playing)
+                     *  and increment it by 1
+                     */
+                    this.index++;
+
+                    setTimeout(() => this.loadNextImage(), 150); // Pause
+                };
+            }
+        }
+    };
 
     /**
-     *  Change button to 'play' button
+     *  Start timelapse
      */
-    $('#timelapse-pause-btn').hide();
-    $('#timelapse-play-btn').css('display', 'inline-flex');
+    timelapse.loadNextImage();
 }
 
 /**