From ced3f851a46a876cce7eaead2b3106788904b32b Mon Sep 17 00:00:00 2001
From: Manuel Thomassen <thom@ssen.codes>
Date: Sat, 16 Jan 2021 04:52:38 +0100
Subject: [PATCH] Add timelapse preview to file browser

implementation copied from
https://github.com/OctoPrint/OctoPrint/blob/f67c15a9a47794a68be9aed4f2d5a12a87e70179/src/octoprint/static/js/app/viewmodels/timelapse.js
https://github.com/OctoPrint/OctoPrint/blob/f67c15a9a47794a68be9aed4f2d5a12a87e70179/src/octoprint/templates/dialogs/timelapse.jinja2
---
 .../static/js/octolapse.file_browser.js              | 10 ++++++++++
 .../octolapse_dialog_timelapse_files.jinja2          |  4 ++++
 .../octolapse_dialog_timelapse_preview.jinja2        | 12 ++++++++++++
 3 files changed, 26 insertions(+)
 create mode 100644 octoprint_octolapse/templates/octolapse_dialog_timelapse_preview.jinja2

diff --git a/octoprint_octolapse/static/js/octolapse.file_browser.js b/octoprint_octolapse/static/js/octolapse.file_browser.js
index d6a6ffd1..76957357 100644
--- a/octoprint_octolapse/static/js/octolapse.file_browser.js
+++ b/octoprint_octolapse/static/js/octolapse.file_browser.js
@@ -325,5 +325,15 @@ $(function () {
             Octolapse.download(url, e, options);
         };
 
+        self.showTimelapsePreview = function(data) {
+            var url = data.value.get_download_url(data);
+            var previewModal = $("#octolapseTimelapsePreviewModal");
+            previewModal.children("div.modal-body").children("video").attr("src", url);
+            previewModal.off("hidden.bs.modal").on("hidden.bs.modal", function() {
+                $(this).attr("src", "");
+            });
+            previewModal.modal("show");
+        };
+
     };
 });
diff --git a/octoprint_octolapse/templates/octolapse_dialog_timelapse_files.jinja2 b/octoprint_octolapse/templates/octolapse_dialog_timelapse_files.jinja2
index 098995d3..fa7d8291 100644
--- a/octoprint_octolapse/templates/octolapse_dialog_timelapse_files.jinja2
+++ b/octoprint_octolapse/templates/octolapse_dialog_timelapse_files.jinja2
@@ -77,6 +77,9 @@
 </script>
 
 <script type="text/html" id="octolapse-timelapse-files-custom-actions">
+    <a data-bind="click: $data.data.parent.showTimelapsePreview">
+        <i title="Click to preview." class="fa fa-lg fa-camera"></i>
+    </a>&nbsp;|&nbsp;
     <a data-bind="click: $data.data.parent.download">
         <i data-bind="class: $data.data.parent._download_icon_class, attr: {title: $data.data.parent._download_icon_title}" class="fa fa-lg fa-download"></i>
     </a>
@@ -88,4 +91,5 @@
 </script>
 
 {% include "octolapse_file_browser.jinja2" %}
+{% include "octolapse_dialog_timelapse_preview.jinja2" %}
 
diff --git a/octoprint_octolapse/templates/octolapse_dialog_timelapse_preview.jinja2 b/octoprint_octolapse/templates/octolapse_dialog_timelapse_preview.jinja2
new file mode 100644
index 00000000..b7bc8a31
--- /dev/null
+++ b/octoprint_octolapse/templates/octolapse_dialog_timelapse_preview.jinja2
@@ -0,0 +1,12 @@
+<div id="octolapseTimelapsePreviewModal" class="modal large hide fade">
+    <div class="modal-header">
+            <a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
+            <h3>{{ _('Timelapse Preview') }}</h3>
+    </div>
+    <div class="modal-body" style="text-align: center">
+            <video width="800px" height="600px" style="width: 800px; height: 600px" autoplay controls src=""></video>
+    </div>
+    <div class="modal-footer">
+            <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Close') }}</a>
+    </div>
+</div>