optimized media list loading time

diff --git a/doc/todo.txt b/doc/todo.txt
index c8d562af9652e90cbbe1f83ef5b56950aad68854..0a2425708e98304029dcc49e6bfafd8919fa8169 100644 (file)
--- a/doc/todo.txt
+++ b/doc/todo.txt
@@ -1,6 +1,3 @@
--> optimize the media list js code:
-    * loading many media groups (directories) is painfully slow
-    * scroll event could also be optimized for speed
 -> make camera frames positions configurable
 -> add a view log functionality
 

diff --git a/static/js/main.js b/static/js/main.js
index 8e2eef3f8005e440bca45584f83700f0c4833ffb..23b8fcd19bf5f53d2553fb3ee1e1176e7eac7257 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1343,7 +1343,7 @@ function runMediaDialog(cameraId, mediaType) {
             return;
         }
         
-        /* sort and group the media */
+        /* group the media */
         var groups = {};
         data.mediaList.forEach(function (media) {
             var path = media.path;
@@ -1373,42 +1373,7 @@ function runMediaDialog(cameraId, mediaType) {
         $('div.modal-container').append(tempDiv);
         var height = tempDiv.height();
         tempDiv.remove();
-        
-        /* prepare the entries within each group */
-        keys.forEach(function (key) {
-            var entries = groups[key];
-            
-            entries.forEach(function (entry) {
-                var entryDiv = $('<div class="media-list-entry"></div>');
-                
-                var previewImg = $('<img class="media-list-preview" src="' + staticUrl + 'img/modal-progress.gif"/>');
-                entryDiv.append(previewImg);
-                previewImg[0]._src = '/' + mediaType + '/' + cameraId + '/preview' + entry.path + '?height=' + height;
-                
-                var downloadButton = $('<div class="media-list-download-button button">download</div>');
-                entryDiv.append(downloadButton);
-                
-                var nameDiv = $('<div class="media-list-entry-name">' + entry.name + '</div>');
-                entryDiv.append(nameDiv);
-                
-                var detailsDiv = $('<div class="media-list-entry-details"></div>');
-                entryDiv.append(detailsDiv);
-                
-                downloadButton[0]._onClick = function () {
-                    window.location.href = '/picture/' + cameraId + '/download' + entry.path;
-                    
-                    return false;
-                };
-                
-                entryDiv[0]._onClick = function () {
-                    var pos = entries.indexOf(entry);
-                    runPictureDialog(entries, pos, mediaType);
-                };
-                
-                entry.div = entryDiv;
-            });
-        });
-        
+
         function showGroup(key) {
             if (mediaListDiv.find('img.media-list-progress').length) {
                 return; /* already in progress of loading */
@@ -1436,13 +1401,42 @@ function runMediaDialog(cameraId, mediaType) {
                 /* add the entries to the media list */
                 entries.forEach(function (entry) {
                     var entryDiv = entry.div;
-                    var detailsDiv = entryDiv.find('div.media-list-entry-details');
-                    var downloadButton = entryDiv.find('div.media-list-download-button');
+                    var detailsDiv = null;
+                    
+                    if (!entryDiv) {
+                        entryDiv = $('<div class="media-list-entry"></div>');
+                        
+                        var previewImg = $('<img class="media-list-preview" src="' + staticUrl + 'img/modal-progress.gif"/>');
+                        entryDiv.append(previewImg);
+                        previewImg[0]._src = '/' + mediaType + '/' + cameraId + '/preview' + entry.path + '?height=' + height;
+                        
+                        var downloadButton = $('<div class="media-list-download-button button">download</div>');
+                        entryDiv.append(downloadButton);
+                        
+                        var nameDiv = $('<div class="media-list-entry-name">' + entry.name + '</div>');
+                        entryDiv.append(nameDiv);
+                        
+                        detailsDiv = $('<div class="media-list-entry-details"></div>');
+                        entryDiv.append(detailsDiv);
+                        
+                        downloadButton.click(function () {
+                            window.location.href = '/picture/' + cameraId + '/download' + entry.path;
+                            
+                            return false;
+                        });
+                        
+                        entryDiv.click(function () {
+                            var pos = entries.indexOf(entry);
+                            runPictureDialog(entries, pos, mediaType);
+                        });
+                        
+                        entry.div = entryDiv;
+                    }
+                    else {
+                        detailsDiv = entry.div.find('div.media-list-entry-details');
+                    }                    
                     
                     detailsDiv.html(entry.momentStr + ' | ' + entry.sizeStr);
-                    entryDiv.unbind('click').click(entryDiv[0]._onClick);
-                    downloadButton.click(downloadButton[0]._onClick);
-
                     mediaListDiv.append(entryDiv);
                 });