media previews are displayed now when they enter the viewport

diff --git a/src/mediafiles.py b/src/mediafiles.py
index 4392d16b9bbbf7361da431284b5219f4c6c41edd..d453ddcba2b043a5ffd7bbc6833ed99bd15eb30f 100644 (file)
--- a/src/mediafiles.py
+++ b/src/mediafiles.py
@@ -122,14 +122,13 @@ def make_movie_preview(camera_config, full_path):
     offs = pre_capture / framerate
     offs = max(4, offs * 2)
     
-    logging.debug('creating movie preview for %(path)s with an offset of %(offs)s seconds ...' % {
+    logging.debug('creating movie preview for %(path)s with an offset of %(offs)s seconds...' % {
             'path': full_path, 'offs': offs})
 
-    cmd = 'ffmpeg -i "%(path)s" -f mjpeg -vframes 1 -ss %(offs)s -y %(path)s.thumb' % {
-            'path': full_path, 'offs': offs}
+    cmd = 'ffmpeg -i "%(path)s" -f mjpeg -vframes 1 -ss %(offs)s -y %(path)s.thumb'
     
     try:
-        subprocess.check_output(cmd, shell=True, stderr=subprocess.STDOUT)
+        subprocess.check_output(cmd % {'path': full_path, 'offs': offs}, shell=True, stderr=subprocess.STDOUT)
     
     except subprocess.CalledProcessError as e:
         logging.error('failed to create movie preview for %(path)s: %(msg)s' % {
@@ -137,6 +136,19 @@ def make_movie_preview(camera_config, full_path):
         
         return None
     
+    if os.path.getsize(full_path + '.thumb') == 0:
+        logging.debug('movie was too short, grabbing first frame from %(path)s...' % {'path': full_path})
+        
+        # try again, this time grabbing the very first frame
+        try:
+            subprocess.check_output(cmd % {'path': full_path, 'offs': 0}, shell=True, stderr=subprocess.STDOUT)
+        
+        except subprocess.CalledProcessError as e:
+            logging.error('failed to create movie preview for %(path)s: %(msg)s' % {
+                    'path': full_path, 'msg': unicode(e)})
+            
+            return None
+    
     return full_path + '.thumb'
 
 

diff --git a/static/css/main.css b/static/css/main.css
index b374b61b8eb1c7e6e826c6a7c8dccdb1dca7037b..96d57dfda7e0d61d32ee470a094409e5c8c22e52 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -405,6 +405,7 @@ div.media-dialog-group-button.current:ACTIVE {
 
 div.media-dialog-list {
     overflow: auto;
+    position: relative;
 }
 
 div.media-list-group-title {

diff --git a/static/js/main.js b/static/js/main.js
index aab47c7c64ef5eb49d2b94b80f604a1a9ba90c6c..fbdbdef5a5e8d1c6a474f37970a27d0723e4c864 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1475,15 +1475,7 @@ function runMediaDialog(cameraId, mediaType) {
                     mediaListDiv.append(entryDiv);
                 });
                 
-                setTimeout(function () {
-                    mediaListDiv.find('img.media-list-preview').each(function () {
-                        if (this._src) {
-                            this.src = this._src;
-                        }
-                        
-                        delete this._src;
-                    });
-                }, 1000);
+                mediaListDiv.scroll();
             });
         }
         
@@ -1499,8 +1491,6 @@ function runMediaDialog(cameraId, mediaType) {
                 
                 groupsDiv.append(groupButton);
             });
-            
-            showGroup(keys[0]);
         }
         else {
             groupsDiv.html('(no media files)');
@@ -1521,7 +1511,37 @@ function runMediaDialog(cameraId, mediaType) {
             buttons: '',
             content: dialogDiv,
             onShow: function () {
-                dialogDiv.scrollTop(dialogDiv.prop('scrollHeight'));
+                //dialogDiv.scrollTop(dialogDiv.prop('scrollHeight'));
+                if (keys.length) {
+                    showGroup(keys[0]);
+                }
+            }
+        });
+    });
+    
+    /* install the media list scroll event handler */
+    mediaListDiv.scroll(function () {
+        var height = mediaListDiv.height();
+        
+        mediaListDiv.find('img.media-list-preview').each(function () {
+            if (!this._src) {
+                return;
+            }
+            
+            var $this = $(this);
+            var entryDiv = $this.parent();
+            if (!entryDiv.is(':visible')) {
+                return;
+            }
+            
+            var top1 = entryDiv.position().top;
+            var top2 = top1 + entryDiv.height();
+            
+            if ((top1 >= 0 && top1 <= height) ||
+                (top2 >= 0 && top2 <= height)) {
+                
+                this.src = this._src;
+                delete this._src;
             }
         });
     });