show snpashot previews in the browse backups dialog

src/css/dialogs-browse-backups.css

@@ -96,6 +96,14 @@
   box-sizing: border-box;
 }
 
+.browse-backups .snapshot-preview {
+  flex-grow: 0;
+  flex-shrink: 1;
+  height: 60px;
+  width: 60px;
+  margin-right: 20px;
+}
+
 .browse-backups .session-details,
 .browse-backups .snapshot-details {
   flex-grow: 1;

src/js/controller/dialogs/backups/steps/SessionDetails.js

@@ -44,12 +44,36 @@
             fps: snapshot.fps
           };
           html += pskl.utils.Template.replace(sessionItemTemplate, view);
-        });
+          this.updateSnapshotPreview_(snapshot);
+        }.bind(this));
       }
       this.container.querySelector('.snapshot-list').innerHTML = html;
     }.bind(this));
   };
 
+  ns.SessionDetails.prototype.updateSnapshotPreview_ = function (snapshot) {
+    pskl.utils.serialization.Deserializer.deserialize(
+      JSON.parse(snapshot.serialized),
+      function (piskel) {
+        var selector = '.snapshot-item[data-snapshot-id="' + snapshot.id + '"] .snapshot-preview';
+        var previewContainer = this.container.querySelector(selector);
+        if (!previewContainer) {
+          return;
+        }
+        var image = this.getFirstFrameAsImage_(piskel);
+        previewContainer.appendChild(image);
+      }.bind(this)
+    );
+  };
+
+  ns.SessionDetails.prototype.getFirstFrameAsImage_ = function (piskel) {
+    var frame = pskl.utils.LayerUtils.mergeFrameAt(piskel.getLayers(), 0);
+    var wZoom = 60 / piskel.width;
+    var hZoom = 60 / piskel.height;
+    var zoom = Math.min(hZoom, wZoom);
+    return pskl.utils.FrameUtils.toImage(frame, zoom);
+  };
+
   ns.SessionDetails.prototype.onBackClick_ = function () {
     this.backupsController.back(this);
   };

src/templates/dialogs/browse-backups.html

@@ -61,7 +61,8 @@
 </script>
 
 <script type="text/template" id="snapshot-list-item">
-<div class="snapshot-item">
+<div class="snapshot-item" data-snapshot-id={{id}}>
+  <div class="snapshot-preview lowcont-dark-picker-background"></div>
   <div class="snapshot-details">
     <span class="snapshot-details-title">{{name}} {{description}}</span>
     <span class="snapshot-details-info">Snapshot recorded {{date}}</span>