show snpashot previews in the browse backups dialog

This commit is contained in:
juliandescottes 2017-08-02 00:00:08 +02:00 committed by Julian Descottes
parent eab21e0839
commit 7de03f1e73
3 changed files with 35 additions and 2 deletions

View File

@ -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;

View File

@ -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);
};

View File

@ -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>