From: Calin Crisan <ccrisan@gmail.com>
Date: Sat, 11 Jan 2014 17:44:48 +0000 (+0200)
Subject: image loading progress improvements
X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=45f58d5a3773cdce7bcd621f937dd4ebe1926337;p=motioneye-debian

image loading progress improvements
---

diff --git a/static/css/main.css b/static/css/main.css
index 32812e2..467dfd8 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -683,7 +683,8 @@ img.camera {
     opacity: 1;
 }
 
-img.camera.error {
+img.camera.error,
+img.camera.loading {
     opacity: 0;
 }
 
@@ -693,7 +694,6 @@ div.camera-placeholder {
     right: 0px;
     bottom: 0px;
     left: 0px;
-    background-color: #555;
     text-align: center;
     transition: opacity 0.2s linear;
 }
@@ -713,12 +713,11 @@ div.camera-progress {
     opacity: 0;
     transition: all 0.2s linear;
     text-align: center;
-    background-color: rgba(0, 0, 0, 1);
     cursor: pointer;
 }
 
 img.camera-progress {
-    margin-top: 28%;
+    margin-top: 20%;
     border: 10px solid white;
     border-radius: 10px;
 }
diff --git a/static/img/camera-progress.gif b/static/img/camera-progress.gif
index 023347e..748c0c7 100644
Binary files a/static/img/camera-progress.gif and b/static/img/camera-progress.gif differ
diff --git a/static/js/main.js b/static/js/main.js
index 00dd7ee..df0d825 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1661,6 +1661,11 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
         doFullScreenCamera(cameraId);
     });
     
+    //if (inProgress) { TODO
+        cameraProgress.css('opacity', '0.5');
+        cameraPlaceholder.css('opacity', '0');
+//    }
+    
     /* insert the new camera frame at the right position,
      * with respect to the camera id */
     var cameraFrames = pageContainer.find('div.camera-frame');
@@ -1711,7 +1716,7 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
         this.error = true;
         this.loading = false;
         
-        cameraImg.addClass('error');
+        cameraImg.addClass('error').removeClass('loading');
         cameraImg.height(Math.round(cameraImg.width() * 0.75));
         cameraPlaceholder.css('opacity', 1);
     });
@@ -1723,7 +1728,7 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
         this.error = false;
         this.loading = false;
         
-        cameraImg.removeClass('error');
+        cameraImg.removeClass('error').removeClass('loading');
         cameraImg.css('height', '');
         cameraPlaceholder.css('opacity', 0);
         cameraProgress.css('opacity', 0);
@@ -1734,7 +1739,8 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
         }
     });
     
-    cameraImg.error();
+    cameraImg.addClass('loading');
+    cameraImg.height(Math.round(cameraImg.width() * 0.75));
 }
 
 function remCameraFrameUi(cameraId) {
@@ -1907,7 +1913,7 @@ function checkCameraErrors() {
     var cameraFrames = $('div.page-container').find('img.camera');
     
     cameraFrames.each(function () {
-        if (this.complete === true && this.naturalWidth === 0 && !this.error) {
+        if (this.complete === true && this.naturalWidth === 0 && !this.error && this.src) {
             $(this).error();
         }
     });