Merge pull request #70 from lbr38/devel

4.3.3

docker/Dockerfile

@@ -100,8 +100,8 @@ RUN echo "syntax on" >> /root/.vimrc
 RUN echo "set background=dark" >> /root/.vimrc
 
 # Copy entrypoint script
-RUN cp /tmp/motionui/docker/entrypoint.sh /entrypoint.sh
-RUN chmod 700 /entrypoint.sh
+RUN cp /tmp/motionui/docker/init /init
+RUN chmod 700 /init
 
 # Clean
 RUN rm -rf /tmp/motionui
@@ -112,4 +112,4 @@ EXPOSE 8080
 # Set working dir
 WORKDIR ${DATA_DIR}
 
-ENTRYPOINT ["/entrypoint.sh"]
+ENTRYPOINT ["/init"]

www/bin/motionui

@@ -31,7 +31,7 @@ function help
 # Set correct permissions on all directories and files used by motionui
 function permissions
 {
-    echo -ne "\n${YELLOW} Setting permissions... ${RESET}"
+    echo -e "\n${YELLOW} Setting permissions... ${RESET}"
 
     # Permissions on web directory
     find "$WWW_DIR" -type f -exec chmod 0660 {} \;
@@ -58,8 +58,6 @@ function permissions
     find "/etc/motion" -type d -exec chmod 0770 {} \;
     chown -R ${WWW_USER}:motion /etc/motion
     chmod 770 /etc/motion
-
-    echo -e "${GREEN}OK${RESET}\n"
 }
 
 echo '

www/controllers/App/Config/Main.php

@@ -48,18 +48,20 @@ public static function get()
         if (!defined('GIT_VERSION')) {
             define('GIT_VERSION', trim(file_get_contents(DATA_DIR . '/version.available')));
         }
-        if (defined('VERSION') and defined('GIT_VERSION')) {
-            if (VERSION !== GIT_VERSION) {
-                if (!defined('UPDATE_AVAILABLE')) {
-                    define('UPDATE_AVAILABLE', 'true');
+        if (!defined('UPDATE_AVAILABLE')) {
+            if (defined('VERSION') and defined('GIT_VERSION')) {
+                if (preg_match('/^[0-9]+\.[0-9]+\.[0-9]+$/', GIT_VERSION)) {
+                    if (VERSION !== GIT_VERSION) {
+                        define('UPDATE_AVAILABLE', true);
+                    } else {
+                        define('UPDATE_AVAILABLE', false);
+                    }
+                } else {
+                    define('UPDATE_AVAILABLE', false);
                 }
             } else {
-                if (!defined('UPDATE_AVAILABLE')) {
-                    define('UPDATE_AVAILABLE', 'false');
-                }
+                define('UPDATE_AVAILABLE', false);
             }
-        } else {
-            define('UPDATE_AVAILABLE', 'false');
         }
 
         /**

www/controllers/App/Config/Notification.php

@@ -21,7 +21,7 @@ public static function get()
         /**
          *  If an update is available, generate a new notification
          */
-        if (UPDATE_AVAILABLE == 'true') {
+        if (UPDATE_AVAILABLE) {
             $message = '<span class="yellowtext">A new release is available: <b>' . GIT_VERSION . '</b>.</span><br><br>Please update your docker image by following the steps documented <a href="' . PROJECT_UPDATE_DOC_URL . '">here</a></span>';
             $NOTIFICATION_MESSAGES[] = array('Title' => 'Update available', 'Message' =>  $message);
             $NOTIFICATION++;

www/controllers/Layout/Container/vars/motion/events/list.vars.inc.php

@@ -2,3 +2,8 @@
 
 $mymotionEvent = new \Controllers\Motion\Event();
 $mycamera = new \Controllers\Camera\Camera();
+
+/**
+ *  Get total unseen events
+ */
+$unseenEventsTotal = $mymotionEvent->getUnseenCount();

www/controllers/Motion/Event.php

@@ -49,6 +49,7 @@ public function new(string $motionEventId, int $motionEventIdShort, int $cameraI
          */
         $this->layoutContainerStateController->update('motion/events/list');
         $this->layoutContainerStateController->update('motion/stats/list');
+        $this->layoutContainerStateController->update('buttons/bottom');
     }
 
     /**
@@ -63,6 +64,7 @@ public function end(string $motionEventId)
          */
         $this->layoutContainerStateController->update('motion/events/list');
         $this->layoutContainerStateController->update('motion/stats/list');
+        $this->layoutContainerStateController->update('buttons/bottom');
     }
 
     /**

www/public/resources/js/camera.js

@@ -33,39 +33,37 @@ function loadCameras()
     }
 
     /**
-     *  Just wait a little bit to be sure that all camera divs are loaded
+     *  For each camera container, load the camera image and hide the loading div
      */
-    setTimeout(function () {
-        $('.camera-container').each(function () {
-            /**
-             *  Retrieve camera loading div and camera image div
-             */
-            const cameraLoadingDiv = $(this).find('div.camera-loading');
-            const cameraImageDiv = $(this).find('div.camera-image');
+    $('.camera-container').each(function () {
+        /**
+         *  Retrieve camera loading div and camera image div
+         */
+        const cameraLoadingDiv = $(this).find('div.camera-loading');
+        const cameraImageDiv = $(this).find('div.camera-image');
 
+        /**
+         *  Retrieve camera 'img' tag and its 'data-src' attribute
+         */
+        const cameraImageImg = cameraImageDiv.find('img');
+        const cameraImageSrc = cameraImageImg.attr('data-src');
+
+        /**
+         *  Find 'img' tag inside camera image div and set its 'src' attribute to the 'data-src' attribute
+         */
+        cameraImageDiv.find('img').on('load', function () {
             /**
-             *  Retrieve camera 'img' tag and its 'data-src' attribute
+             *  Print log message
              */
-            const cameraImageImg = cameraImageDiv.find('img');
-            const cameraImageSrc = cameraImageImg.attr('data-src');
+            console.log('Camera(s) loaded');
 
             /**
-             *  Find 'img' tag inside camera image div and set its 'src' attribute to the 'data-src' attribute
+             *  Once the image is loaded, hide the loading div and show the image div
              */
-            cameraImageDiv.find('img').on('load', function () {
-                /**
-                 *  Print log message
-                 */
-                console.log('Camera(s) loaded');
-
-                /**
-                 *  Once the image is loaded, hide the loading div and show the image div
-                 */
-                cameraLoadingDiv.hide();
-                cameraImageDiv.show();
-            }).attr('src', cameraImageSrc);
-        });
-    }, 500);
+            cameraLoadingDiv.hide();
+            cameraImageDiv.show();
+        }).attr('src', cameraImageSrc);
+    });
 }
 
 function reloadTimestamp()
@@ -76,7 +74,7 @@ function reloadTimestamp()
     if ($('.camera-image').find('p.camera-image-timestamp').length == 0) {
         return;
     }
-    console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)
+    // console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)
 
     /**
      *  Refresh timestamp every second
@@ -140,8 +138,22 @@ function reloadImage()
              *  Then set camera 'next reload' timestamp
              */
             if (cameraTimestamp == currentTimestamp) {
-                $(this).attr('src', '/image?id=' + cameraId + '&' + currentTimestamp);
-                $(this).attr('refresh-timestamp', (Math.floor((Date.now() / 1000) + parseInt(refreshInterval))));
+                $(this).on('load', function () {
+                    /**
+                     *  Print log message
+                     */
+                    console.log('Camera reloaded');
+
+                    /**
+                     *  Always make sure to hide the 'camera-unavailable' and 'camera-loading' divs
+                     */
+                    $('div.camera-unavailable[camera-id=' + cameraId + ']').hide();
+                    $('div.camera-loading[camera-id=' + cameraId + ']').hide();
+                    $('div.camera-image[camera-id=' + cameraId + ']').show();
+                }).attr({
+                    'src': '/image?id=' + cameraId + '&' + currentTimestamp,
+                    'refresh-timestamp': (Math.floor((Date.now() / 1000) + parseInt(refreshInterval)))
+                });
             }
         });
     }, 1000);
@@ -684,13 +696,13 @@ $(document).on('click','.full-screen-camera-btn',function () {
     $('.delete-camera-btn[camera-id='+cameraId+']').hide();
     $('.configure-camera-btn[camera-id='+cameraId+']').hide();
     $('.timelapse-camera-btn[camera-id='+cameraId+']').hide();
-    $('.close-full-screen-camera-btn[camera-id='+cameraId+']').css('display', 'block');
+    $('.close-full-screen-container[camera-id='+cameraId+']').css('display', 'block');
 });
 
 /**
  *  Event: close camera full screen
  */
-$(document).on('click','.close-full-screen-camera-btn',function () {
+$(document).on('click','.close-full-screen-btn',function () {
     var cameraId = $(this).attr('camera-id');
 
     /**
@@ -704,7 +716,7 @@ $(document).on('click','.close-full-screen-camera-btn',function () {
     $('.delete-camera-btn[camera-id='+cameraId+']').show();
     $('.configure-camera-btn[camera-id='+cameraId+']').show();
     $('.timelapse-camera-btn[camera-id='+cameraId+']').show();
-    $('.close-full-screen-camera-btn[camera-id='+cameraId+']').hide();
+    $('.close-full-screen-container[camera-id='+cameraId+']').hide();
 });
 
 /**

www/public/resources/js/general.js

@@ -8,7 +8,6 @@ $(document).ready(function () {
      */
     setInterval(function () {
         reloadContainer('buttons/top');
-        reloadContainer('buttons/bottom');
     }, 5000);
 });
 

www/public/resources/js/motion.js

@@ -225,8 +225,8 @@ $(document).on('click','.event-pagination-btn',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-div').show();
+    $('.event-print-file').html('<img src="/media?id=' + fileId + '" />');
+    $('.event-print-file-container').css('display', 'flex');
 });
 
 /**
@@ -235,23 +235,23 @@ $(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-div').show();
+    $('.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');
 });
 
 /**
  *  Event: close event picture or video
  */
-$(document).on('click','#event-print-file-close-btn',function () {
+$(document).on('click','.event-print-file-close-btn',function () {
     /**
      *  Mask container div
      */
-    $('#event-print-file-div').hide();
+    $('.event-print-file-container').hide();
 
     /**
      *  Clear div
      */
-    $('#event-print-file').html('');
+    $('.event-print-file').html('');
 });
 
 /**

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

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