forked from hummypkg/webif
Add thumbnail viewer to Manage Bookmarks
This commit is contained in:
parent
4820ade1f5
commit
1c868ae201
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
package require cgi
|
package require cgi
|
||||||
source /mod/webif/lib/setup
|
source /mod/webif/lib/setup
|
||||||
require ts.class pretty_size
|
require ts.class system.class pretty_size
|
||||||
|
|
||||||
jscss script.js style.css
|
jscss script.js style.css
|
||||||
jqplugin touchpunch
|
jqplugin touchpunch
|
||||||
|
@ -15,6 +15,10 @@ set erfile [string map {' \\'} $rfile]
|
||||||
|
|
||||||
set len [$ts duration 1]
|
set len [$ts duration 1]
|
||||||
|
|
||||||
|
set start -1
|
||||||
|
set incr 1
|
||||||
|
set limit $(1-$start)
|
||||||
|
|
||||||
puts "
|
puts "
|
||||||
<script type=text/javascript>
|
<script type=text/javascript>
|
||||||
var initbookmarks = '[$ts bookmarks]';
|
var initbookmarks = '[$ts bookmarks]';
|
||||||
|
@ -39,10 +43,38 @@ var dir = '$dir';
|
||||||
<button class=left id=addbmark>Add Bookmark</button>
|
<button class=left id=addbmark>Add Bookmark</button>
|
||||||
<button class=left id=delbmark>Remove Bookmark</button>
|
<button class=left id=delbmark>Remove Bookmark</button>
|
||||||
</td><td><div id=slider></div></td></tr>
|
</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>
|
</table>
|
||||||
<div id=buttons>
|
<div id=buttons>
|
||||||
<button id=save>Save Bookmarks</button>
|
<button id=save>Save Bookmarks</button>
|
||||||
<button id=back>Back to Media Browser</button>
|
<button id=back>Back to Media Browser</button>
|
||||||
|
"
|
||||||
|
if {[system pkginst nicesplice]} {
|
||||||
|
puts "<button id=crop>Go to Crop</button>"
|
||||||
|
}
|
||||||
|
puts "
|
||||||
</div>
|
</div>
|
||||||
<div id=results class=\"hidden blood\"></div>
|
<div id=results class=\"hidden blood\"></div>
|
||||||
"
|
"
|
||||||
|
|
|
@ -1,11 +1,26 @@
|
||||||
var curval = 0;
|
var curval = 0;
|
||||||
var $slider;
|
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
|
function
|
||||||
setvals()
|
setvals()
|
||||||
{
|
{
|
||||||
values = $.trim($('#bookmarks').val()).split(/ +/);
|
var nvalues;
|
||||||
if (!values.length || values[0] == '')
|
values = valarray($('#bookmarks').val());
|
||||||
|
if (values.length > 0 && values[0] != '')
|
||||||
{
|
{
|
||||||
refreshtimes();
|
refreshtimes();
|
||||||
return;
|
return;
|
||||||
|
@ -20,6 +35,7 @@ setvals()
|
||||||
});
|
});
|
||||||
values = nvalues;
|
values = nvalues;
|
||||||
$('#bookmarks').val(values.join(' '));
|
$('#bookmarks').val(values.join(' '));
|
||||||
|
values = valarray($('#bookmarks').val());
|
||||||
sortmarks();
|
sortmarks();
|
||||||
refreshtimes();
|
refreshtimes();
|
||||||
}
|
}
|
||||||
|
@ -32,7 +48,6 @@ draw_slider()
|
||||||
else
|
else
|
||||||
$slider = $('#slider');
|
$slider = $('#slider');
|
||||||
setvals();
|
setvals();
|
||||||
values = $.trim($('#bookmarks').val()).split(/ +/);
|
|
||||||
if (!values.length || values[0] == '')
|
if (!values.length || values[0] == '')
|
||||||
{
|
{
|
||||||
$slider = null;
|
$slider = null;
|
||||||
|
@ -55,55 +70,95 @@ draw_slider()
|
||||||
var marks = '';
|
var marks = '';
|
||||||
for (var i = 0; i < ui.values.length; ++i)
|
for (var i = 0; i < ui.values.length; ++i)
|
||||||
marks += ui.values[i] + ' ';
|
marks += ui.values[i] + ' ';
|
||||||
$('#bookmarks').val($.trim(marks));
|
$('#bookmarks').val(marks.trim()));
|
||||||
setvals();
|
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
|
function
|
||||||
refreshtimes()
|
refreshtimes()
|
||||||
{
|
{
|
||||||
var t = '';
|
var t = '';
|
||||||
values = $.trim($('#bookmarks').val()).split(/ +/);
|
|
||||||
if (!values.length || values[0] == '')
|
if (!values.length || values[0] == '')
|
||||||
{
|
{
|
||||||
$('#bookmarkstime').text(t);
|
$.each(values, function(k, v) {
|
||||||
return;
|
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);
|
$('#bookmarkstime').text(t);
|
||||||
}
|
}
|
||||||
|
|
||||||
function
|
function
|
||||||
sortmarks()
|
sortmarks()
|
||||||
{
|
{
|
||||||
var a = $.trim($('#bookmarks').val()).split(/ +/);
|
values.sort(function(a, b){return a - b});
|
||||||
a.sort(function(a, b){return a-b});
|
$('#bookmarks').val(values.join(" "));
|
||||||
$('#bookmarks').val(a.join(" "));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
|
|
||||||
$('#bookmarks').val($('#bookmarks').attr('init'));
|
$('#bookmarks').val($('#bookmarks').attr('init'));
|
||||||
draw_slider();
|
draw_slider();
|
||||||
|
$('#curbmk').html(toTimeStr(curval));
|
||||||
|
|
||||||
$('#addbmark').button({icons: {primary: "ui-icon-plus"}, text: false})
|
$('#addbmark').button({icons: {primary: "ui-icon-plus"}, text: false})
|
||||||
.on('click', function() {
|
.on('click', function() {
|
||||||
$('#bookmarks').val('0 ' + $('#bookmarks').val());
|
$('#bookmarks').val('0 ' + $('#bookmarks').val());
|
||||||
draw_slider();
|
curval = 0;
|
||||||
|
update_slider();
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#delbmark').button({icons: {primary: "ui-icon-minus"}, text: false})
|
$('#delbmark').button({icons: {primary: "ui-icon-minus"}, text: false})
|
||||||
.on('click', function() {
|
.on('click', function() {
|
||||||
var cur = $('#bookmarks').val();
|
var cur = $('#bookmarks').val();
|
||||||
cur = $.trim(cur.replace(
|
cur = cur.replace(
|
||||||
new RegExp('(^| )' + curval + '( |$)', ''), ' '));
|
new RegExp('(^| )' + curval + '( |$)', ''), ' ').trim();
|
||||||
$('#bookmarks').val(cur);
|
$('#bookmarks').val(cur);
|
||||||
draw_slider();
|
update_slider();
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#save').button({icons: {primary: "ui-icon-disk"}})
|
$('#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);
|
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()
|
$('#update').button()
|
||||||
.on('click', function() {
|
.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');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue