Merge pull request 'Fixes and improvements for bookmark viewer' (#47) from df/webif:df-bookmarkviewer-patch into master
Reviewed-on: #47
This commit is contained in:
commit
4f55ea1b9f
|
|
@ -21,7 +21,6 @@ set limit $(1-$start)
|
|||
|
||||
puts "
|
||||
<script type=text/javascript>
|
||||
var initbookmarks = '[$ts bookmarks]';
|
||||
var len = [$ts duration 1];
|
||||
var file = '$erfile';
|
||||
var dir = '$dir';
|
||||
|
|
@ -29,24 +28,29 @@ var dir = '$dir';
|
|||
<fieldset class=cleft>
|
||||
<legend>Manage Bookmarks</legend>
|
||||
|
||||
<table class=keyval cellpadding=5>
|
||||
<table class=keyval>
|
||||
<tr><th>File:</th><td>$rfile</td></tr>
|
||||
<tr><th>Length:</th><td>[clock format $len -format %T]</td></tr>
|
||||
<tr><th>Size:</th><td>[pretty_size [$ts size]] ([$ts get definition])</td></tr>
|
||||
<tr><th>Bookmarks<br><span class=footnote>(enter in seconds)</span></th><td>
|
||||
<input id=bookmarks size=80 maxlength=255 init=\"[$ts bookmarks]\"
|
||||
value=\"\" />
|
||||
<input id=bookmarks size=80 maxlength=255 value=\"[$ts bookmarks]\" />
|
||||
<button id=update>Update</button>
|
||||
<br>
|
||||
<span id=bookmarkstime></span>
|
||||
</td></tr><tr><td align=right>
|
||||
</td></tr><tr><td class=cell-align-right>
|
||||
<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>
|
||||
<tr><td class=cell-align-right>
|
||||
<span class=left>Current: <span id=curbmk></span></span><br><br><br>
|
||||
"
|
||||
if {![$ts flag "ODEncrypted"]} {
|
||||
puts "
|
||||
<button id=genthumbs title=\"Generate Thumbnails\"
|
||||
class=left>Generate Thumbnails</button>
|
||||
"
|
||||
}
|
||||
puts "
|
||||
</td><td>
|
||||
<div id=thumbs class=hidden>
|
||||
<table><tr>
|
||||
|
|
@ -55,13 +59,13 @@ set times {}
|
|||
loop v $start $limit $incr {
|
||||
lappend times $v
|
||||
puts "
|
||||
<th style=\"text-align: center\"><span class=mark>
|
||||
<th class=mark><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 "<td><img class=bmp data-pos=$v alt=\"thumbnail @ $v s\"></td>"
|
||||
}
|
||||
puts "
|
||||
</tr></table>
|
||||
|
|
@ -77,5 +81,8 @@ if {[system pkginst nicesplice]} {
|
|||
puts "
|
||||
</div>
|
||||
<div id=results class=\"hidden blood\"></div>
|
||||
</fieldset>
|
||||
"
|
||||
|
||||
footer
|
||||
|
||||
|
|
|
|||
|
|
@ -1,238 +1,225 @@
|
|||
var curval = 0;
|
||||
var $slider;
|
||||
var values;
|
||||
|
||||
/* using var len defined in inline script, index.jim */
|
||||
/* using var file defined in inline script, index.jim */
|
||||
/* using var dir defined in inline script, index.jim */
|
||||
function
|
||||
toTimeStr(tval)
|
||||
{
|
||||
return new Date(null, null, null, null, null, tval)
|
||||
.toTimeString().match(/\d{2}:\d{2}:\d{2}/)[0] + ' ';
|
||||
.toTimeString().match(/\d{2}:\d{2}:\d{2}/)[0];
|
||||
}
|
||||
|
||||
function
|
||||
valarray(valstr)
|
||||
{
|
||||
return valstr.trim().split(/ +/);
|
||||
}
|
||||
|
||||
function
|
||||
setvals()
|
||||
{
|
||||
var nvalues;
|
||||
values = valarray($('#bookmarks').val());
|
||||
if (values.length > 0 && values[0] != '')
|
||||
{
|
||||
refreshtimes();
|
||||
return;
|
||||
}
|
||||
nvalues = [];
|
||||
$.each(values, function(k, v) {
|
||||
if (v > len)
|
||||
v = len;
|
||||
if (v < 0)
|
||||
v = 0;
|
||||
nvalues.push(v);
|
||||
});
|
||||
values = nvalues;
|
||||
$('#bookmarks').val(values.join(' '));
|
||||
values = valarray($('#bookmarks').val());
|
||||
sortmarks();
|
||||
refreshtimes();
|
||||
}
|
||||
|
||||
function
|
||||
draw_slider()
|
||||
{
|
||||
if ($slider)
|
||||
$slider.slider('destroy');
|
||||
else
|
||||
$slider = $('#slider');
|
||||
setvals();
|
||||
if (!values.length || values[0] == '')
|
||||
{
|
||||
$slider = null;
|
||||
return;
|
||||
}
|
||||
$slider.slider({
|
||||
min: 0,
|
||||
max: len,
|
||||
step: 1,
|
||||
values: values,
|
||||
start: function(event, ui) {
|
||||
curval = ui.value;
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
curval = ui.value;
|
||||
sortmarks();
|
||||
refreshtimes();
|
||||
},
|
||||
slide: function(event, ui) {
|
||||
var marks = '';
|
||||
for (var i = 0; i < ui.values.length; ++i)
|
||||
marks += ui.values[i] + ' ';
|
||||
$('#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 = '';
|
||||
if (!values.length || values[0] == '')
|
||||
{
|
||||
$.each(values, function(k, v) {
|
||||
t += toTimeStr(v);
|
||||
});
|
||||
$('#slider .ui-slider-handle').each(function(i) {
|
||||
$(this).attr('title', toTimeStr(values[i]));
|
||||
});
|
||||
}
|
||||
$('#bookmarkstime').text(t);
|
||||
}
|
||||
|
||||
function
|
||||
sortmarks()
|
||||
{
|
||||
values.sort(function(a, b){return a - b});
|
||||
$('#bookmarks').val(values.join(" "));
|
||||
return valstr.trim().split(/\s+/);
|
||||
}
|
||||
|
||||
$(function() {
|
||||
var curval = 0;
|
||||
var $slider;
|
||||
var values;
|
||||
|
||||
$('#bookmarks').val($('#bookmarks').attr('init'));
|
||||
draw_slider();
|
||||
$('#curbmk').html(toTimeStr(curval));
|
||||
function
|
||||
sortmarks()
|
||||
{
|
||||
values.sort(function(a, b){return a - b});
|
||||
$('#bookmarks').val(values.join(" "));
|
||||
}
|
||||
|
||||
$('#addbmark').button({icons: {primary: "ui-icon-plus"}, text: false})
|
||||
.on('click', function() {
|
||||
$('#bookmarks').val('0 ' + $('#bookmarks').val());
|
||||
curval = 0;
|
||||
update_slider();
|
||||
});
|
||||
|
||||
$('#delbmark').button({icons: {primary: "ui-icon-minus"}, text: false})
|
||||
.on('click', function() {
|
||||
var cur = $('#bookmarks').val();
|
||||
cur = cur.replace(
|
||||
new RegExp('(^| )' + curval + '( |$)', ''), ' ').trim();
|
||||
$('#bookmarks').val(cur);
|
||||
update_slider();
|
||||
});
|
||||
|
||||
$('#save').button({icons: {primary: "ui-icon-disk"}})
|
||||
.on('click', function() {
|
||||
$.post('save.jim', {
|
||||
file: file,
|
||||
bookmarks: $('#bookmarks').val()
|
||||
}, function(data) {
|
||||
$('#results').html(data)
|
||||
.slideDown('slow').delay(5000).slideUp('slow');
|
||||
});
|
||||
});
|
||||
|
||||
$('#back').button({icons: {primary: "ui-icon-arrowreturnthick-1-w"}})
|
||||
.on('click', function() {
|
||||
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() {
|
||||
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;
|
||||
function
|
||||
refreshtimes()
|
||||
{
|
||||
var t = '';
|
||||
if (values.length > 0 && values[0] != '')
|
||||
{
|
||||
$.each(values, function(k, v) {
|
||||
if (t != '') t += ', ';
|
||||
t += toTimeStr(v);
|
||||
});
|
||||
$('#slider .ui-slider-handle').each(function(i) {
|
||||
if (values[i]|0 > 0)
|
||||
$(this).attr('title', toTimeStr(values[i]))
|
||||
else $(this).attr('title', '');
|
||||
});
|
||||
$('#curbmk').html(toTimeStr(curval));
|
||||
$('#genthumbs').button('enable');
|
||||
}
|
||||
incr++;
|
||||
});
|
||||
else
|
||||
{
|
||||
$('#genthumbs').button('disable');
|
||||
$('#curbmk').html('');
|
||||
}
|
||||
$('#bookmarkstime').text(t);
|
||||
}
|
||||
|
||||
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));
|
||||
function
|
||||
setvals()
|
||||
{
|
||||
var nvalues;
|
||||
values = valarray($('#bookmarks').val());
|
||||
nvalues = new Set();
|
||||
$.each(values, function(k, v) {
|
||||
if (v > len)
|
||||
v = len;
|
||||
if (v < 0)
|
||||
v = 0;
|
||||
nvalues.add(v);
|
||||
});
|
||||
$('#genthumbs').button('option', 'icon', 'ui-icon-zoomin');
|
||||
values = Array.from(nvalues);
|
||||
sortmarks();
|
||||
}
|
||||
|
||||
function
|
||||
regenthumbs(curbmkstr)
|
||||
{
|
||||
$('#curbmk').html(curbmkstr);
|
||||
$('#thumbs').hide();
|
||||
$('#genthumbs')
|
||||
.button(curbmkstr ? 'enable': 'disable')
|
||||
.button('option', 'icon', 'ui-icon-zoomin');
|
||||
}
|
||||
|
||||
function
|
||||
draw_slider()
|
||||
{
|
||||
if ($slider)
|
||||
$slider.slider('destroy');
|
||||
else
|
||||
$slider = $('#slider');
|
||||
setvals();
|
||||
$slider.slider({
|
||||
min: 0,
|
||||
max: len,
|
||||
step: 1,
|
||||
disabled: values.length <= 0 || values[0] == '',
|
||||
values: values,
|
||||
start: function(event, ui) {
|
||||
curval = ui.value;
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
curval = ui.value;
|
||||
sortmarks();
|
||||
refreshtimes();
|
||||
},
|
||||
slide: function(event, ui) {
|
||||
var marks = '';
|
||||
for (var i = 0; i < ui.values.length; ++i)
|
||||
marks += ui.values[i] + ' ';
|
||||
$('#bookmarks').val(marks.trim());
|
||||
setvals();
|
||||
}
|
||||
});
|
||||
refreshtimes();
|
||||
|
||||
/* 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;
|
||||
regenthumbs('');
|
||||
} else {
|
||||
if (nn >= values.length)
|
||||
nn = values.length - 1;
|
||||
if (nn >= 0) {
|
||||
regenthumbs(toTimeStr(curval = values[nn]));
|
||||
} else {
|
||||
curval = 0;
|
||||
regenthumbs('');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$('#genthumbs').button({icons: {primary: "ui-icon-zoomin"}, disabled: true})
|
||||
.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('data-pos') | 0;
|
||||
} else {
|
||||
last = $(this).attr('data-pos') | 0;
|
||||
}
|
||||
incr++;
|
||||
$(this).attr('src', '/img/generating.png');
|
||||
});
|
||||
$('#thumbs').show();
|
||||
|
||||
incr = (last - start) / incr;
|
||||
|
||||
$.get('/browse/thumbnail/mkrange.jim', {
|
||||
'file': file,
|
||||
's': start+curval,
|
||||
'e': last+curval,
|
||||
'i': incr
|
||||
}, function() {
|
||||
$('img.bmp').each(function(i) {
|
||||
/* cast to "int" */
|
||||
var pos = $(this).attr('data-pos')|0;
|
||||
$(this).attr('src',
|
||||
'/browse/thumbnail/fetch.jim?' +
|
||||
'file=' + encodeURIComponent(file) +
|
||||
'&pos=' + (curval+pos).toFixed(1));
|
||||
});
|
||||
$('#genthumbs').button('option', 'icon', 'ui-icon-zoomin');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
draw_slider();
|
||||
|
||||
});
|
||||
$('#addbmark').button({icons: {primary: "ui-icon-plus"}, text: false})
|
||||
.on('click', function() {
|
||||
$('#bookmarks').val('0 ' + $('#bookmarks').val());
|
||||
curval = 0;
|
||||
draw_slider();
|
||||
});
|
||||
|
||||
$('#delbmark').button({icons: {primary: "ui-icon-minus"}, text: false})
|
||||
.on('click', function() {
|
||||
var cur = $('#bookmarks').val();
|
||||
cur = cur.replace(
|
||||
new RegExp('(^| )' + curval + '( |$)', ''), ' ').trim();
|
||||
$('#bookmarks').val(cur);
|
||||
draw_slider();
|
||||
});
|
||||
|
||||
$('#save').button({icons: {primary: "ui-icon-disk"}})
|
||||
.on('click', function() {
|
||||
$.post('save.jim', {
|
||||
file: file,
|
||||
bookmarks: $('#bookmarks').val()
|
||||
}, function(data) {
|
||||
$('#results').html(data)
|
||||
.slideDown('slow').delay(5000).slideUp('slow');
|
||||
});
|
||||
});
|
||||
|
||||
$('#back').button({icons: {primary: "ui-icon-arrowreturnthick-1-w"}})
|
||||
.on('click', function() {
|
||||
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', draw_slider);
|
||||
|
||||
$('#slider')
|
||||
.on('slidechange', function(evt, ui) {
|
||||
var tstr = toTimeStr(curval);
|
||||
if (tstr != $('#curbmk').html())
|
||||
regenthumbs(tstr);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,3 +14,20 @@
|
|||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* <table class=keyval ... cellpadding=5> */
|
||||
.keyval th, .keyval td
|
||||
{
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* <td align=right> */
|
||||
.cell-align-right
|
||||
{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* <th style="text-align: center"> */
|
||||
th.mark
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue