From 1c868ae2019609b1a1f1156a8e06283e5c20d2dd Mon Sep 17 00:00:00 2001
From: df <fieldhouse@gmx.net>
Date: Tue, 10 Nov 2020 14:04:20 +0000
Subject: [PATCH] Add thumbnail viewer to Manage Bookmarks

---
 webif/html/browse/bookmarks/index.jim |  34 +++++-
 webif/html/browse/bookmarks/script.js | 144 ++++++++++++++++++++++----
 2 files changed, 158 insertions(+), 20 deletions(-)

diff --git a/webif/html/browse/bookmarks/index.jim b/webif/html/browse/bookmarks/index.jim
index b12c937..f81650d 100755
--- a/webif/html/browse/bookmarks/index.jim
+++ b/webif/html/browse/bookmarks/index.jim
@@ -2,7 +2,7 @@
 
 package require cgi
 source /mod/webif/lib/setup
-require ts.class pretty_size
+require ts.class system.class pretty_size
 
 jscss script.js style.css
 jqplugin touchpunch
@@ -15,6 +15,10 @@ set erfile [string map {' \\'} $rfile]
 
 set len [$ts duration 1]
 
+set start -1
+set incr 1
+set limit $(1-$start)
+
 puts "
 <script type=text/javascript>
 var initbookmarks = '[$ts bookmarks]';
@@ -39,10 +43,38 @@ var dir = '$dir';
 <button class=left id=addbmark>Add Bookmark</button>
 <button class=left id=delbmark>Remove Bookmark</button>
 </td><td><div id=slider></div></td></tr>
+<tr><td align=right>
+<span class=left>Current: <span id=curbmk></span></span><br><br><br>
+<button id=genthumbs title=\"Generate Thumbnails\"
+    class=left>Generate Thumbnails</button>
+</td><td>
+<div id=thumbs class=hidden>
+<table><tr>
+"
+set times {}
+loop v $start $limit $incr {
+	lappend times $v
+	puts "
+		<th style=\"text-align: center\"><span class=mark>
+		[format "%+d" $v]</span>s</th>
+	"
+}
+puts "</tr><tr>"
+foreach v $times {
+	puts "<td><img class=bmp src=/img/generating.png pos=$v></td>"
+}
+puts "
+</tr></table>
+</div></td></tr>
 </table>
 <div id=buttons>
 <button id=save>Save Bookmarks</button>
 <button id=back>Back to Media Browser</button>
+"
+if {[system pkginst nicesplice]} {
+	puts "<button id=crop>Go to Crop</button>"
+}
+puts "
 </div>
 <div id=results class=\"hidden blood\"></div>
 "
diff --git a/webif/html/browse/bookmarks/script.js b/webif/html/browse/bookmarks/script.js
index 02174c7..803fa02 100644
--- a/webif/html/browse/bookmarks/script.js
+++ b/webif/html/browse/bookmarks/script.js
@@ -1,11 +1,26 @@
 var curval = 0;
 var $slider;
+var values;
+
+function
+toTimeStr(tval)
+{
+	return new Date(null, null, null, null, null, tval)
+	    .toTimeString().match(/\d{2}:\d{2}:\d{2}/)[0] + ' ';
+}
+
+function
+valarray(valstr)
+{
+	return valstr.trim().split(/ +/);
+}
 
 function
 setvals()
 {
-	values = $.trim($('#bookmarks').val()).split(/ +/);
-	if (!values.length || values[0] == '')
+	var nvalues;
+	values = valarray($('#bookmarks').val());
+	if (values.length > 0 && values[0] != '')
 	{
 		refreshtimes();
 		return;
@@ -20,6 +35,7 @@ setvals()
 	});
 	values = nvalues;
 	$('#bookmarks').val(values.join(' '));
+	values = valarray($('#bookmarks').val());
 	sortmarks();
 	refreshtimes();
 }
@@ -32,7 +48,6 @@ draw_slider()
 	else
 		$slider = $('#slider');
 	setvals();
-	values = $.trim($('#bookmarks').val()).split(/ +/);
 	if (!values.length || values[0] == '')
 	{
 		$slider = null;
@@ -55,55 +70,95 @@ draw_slider()
 			var marks = '';
 			for (var i = 0; i < ui.values.length; ++i)
 				marks += ui.values[i] + ' ';
-			$('#bookmarks').val($.trim(marks));
+			$('#bookmarks').val(marks.trim()));
 			setvals();
 		}
 	});
+	refreshtimes();
+};
+
+function
+regenthumbs(curbmkstr)
+{
+	$('#curbmk').html(curbmkstr);
+	$('#thumbs').hide();
+	$('#genthumbs')
+	    .button('enable')
+	    .button('option', 'icon', 'ui-icon-zoomin');
+}
+
+function
+update_slider()
+{
+	setvals();
+
+	/* slider values are strings */
+	var curvalstr = "" + curval;
+	if (!values.includes(curvalstr)) {
+		/* try to map current selected bmk to new bmk */
+		var ovalues = $slider.slider("option", "values");
+		var nn = ovalues.indexOf(curvalstr);
+		if (nn < 0) {
+			curval = 0;
+		} else {
+			if (nn >= values.length)
+			    nn = values.length - 1;
+			curval = nn >= 0 ? values[nn] : 0;
+		}
+		regenthumbs(toTimeStr(curval));
+	}
+	$('#slider .ui-slider-handle').each(function(i) {
+		if (i >= values.length)
+			$(this).hide();
+		else
+			$(this).show();
+	});
+	$slider.slider("option", "values", values);
 };
 
 function
 refreshtimes()
 {
 	var t = '';
-	values = $.trim($('#bookmarks').val()).split(/ +/);
 	if (!values.length || values[0] == '')
 	{
-		$('#bookmarkstime').text(t);
-		return;
+		$.each(values, function(k, v) {
+			t += toTimeStr(v);
+		});
+		$('#slider .ui-slider-handle').each(function(i) {
+			$(this).attr('title', toTimeStr(values[i]));
+		});
 	}
-	$.each(values, function(k, v) {
-		t += new Date(null, null, null, null, null, v)
-		    .toTimeString().match(/\d{2}:\d{2}:\d{2}/)[0] + ' ';
-	});
 	$('#bookmarkstime').text(t);
 }
 
 function
 sortmarks()
 {
-	var a = $.trim($('#bookmarks').val()).split(/ +/);
-	a.sort(function(a, b){return a-b});
-	$('#bookmarks').val(a.join(" "));
+	values.sort(function(a, b){return a - b});
+	$('#bookmarks').val(values.join(" "));
 }
 
 $(function() {
 
 $('#bookmarks').val($('#bookmarks').attr('init'));
 draw_slider();
+$('#curbmk').html(toTimeStr(curval));
 
 $('#addbmark').button({icons: {primary: "ui-icon-plus"}, text: false})
     .on('click', function() {
 	$('#bookmarks').val('0 ' + $('#bookmarks').val());
-	draw_slider();
+	curval = 0;
+	update_slider();
 });
 
 $('#delbmark').button({icons: {primary: "ui-icon-minus"}, text: false})
     .on('click', function() {
 	var cur = $('#bookmarks').val();
-	cur = $.trim(cur.replace(
-	    new RegExp('(^| )' + curval + '( |$)', ''), ' '));
+	cur = cur.replace(
+	    new RegExp('(^| )' + curval + '( |$)', ''), ' ').trim();
 	$('#bookmarks').val(cur);
-	draw_slider();
+	update_slider();
 });
 
 $('#save').button({icons: {primary: "ui-icon-disk"}})
@@ -122,11 +177,62 @@ $('#back').button({icons: {primary: "ui-icon-arrowreturnthick-1-w"}})
 	window.location = '/go/browse?dir=' + encodeURIComponent(dir);
 });
 
+$('#crop').button({icons: {primary: "ui-icon-arrowreturnthick-1-e"}})
+    .on('click', function() {
+	window.location =
+	    window.location.href.replace('/bookmarks/?','/crop/crop.jim?');
+});
+
 $('#update').button()
     .on('click', function() {
-	draw_slider();
+	update_slider();
 });
 
+$('#slider')
+    .on('slidechange', function(evt, ui) {
+	var tstr = toTimeStr(curval);
+	if (tstr != $('#curbmk').html())
+		regenthumbs(tstr);
+});
+
+$('#genthumbs').button({icons: {primary: "ui-icon-zoomin"}, disabled: false})
+    .on('click', function() {
+	var start;
+	var incr = -1;
+	var last;
+	$(this)
+	    .button('disable')
+	    .button('option', 'icon', 'ui-icon-refresh');
+	$('img.bmp').each(function(i) {
+		if (start === undefined) {
+			start = $(this).attr('pos') | 0;
+		} else {
+			last = $(this).attr('pos') | 0;
+		}
+		incr++;
+	});
+
+	incr = (last - start) / incr;
+
+	$.get('/browse/thumbnail/mkrange.jim', {
+		'file': file,
+		's':    start+curval,
+		'e':    last+curval,
+		'i':    incr
+	}, function() {
+		$('#thumbs').show();
+		$('img.bmp').each(function(i) {
+			/* cast to "int" */
+			var pos = $(this).attr('pos')|0;
+			$(this).attr('src',
+			    '/browse/thumbnail/fetch.jim?' +
+			    'file=' + encodeURIComponent(file) +
+			    '&pos=' + (curval+pos).toFixed(1));
+		});
+		$('#genthumbs').button('option', 'icon', 'ui-icon-zoomin');
+	});
+
+});
 
 });