128 lines
5.2 KiB
JavaScript
128 lines
5.2 KiB
JavaScript
Ox.load('UI', function() {
|
|
|
|
window.pandora = {site: {map: 'auto'}};
|
|
|
|
window.app = {
|
|
$ui: {}
|
|
};
|
|
|
|
Ox.getJSON(['json/cuts0.json', 'json/cuts1.json', 'json/hashes.json'], function(data) {
|
|
var video = {
|
|
duration: 6242.24,
|
|
id: '0084628',
|
|
resolution: 96,
|
|
ratio: 158/96,
|
|
src: 'https://video0.0xdb.org/0084628/96p1.webm'
|
|
};
|
|
app.$ui.video = Ox.VideoEditor({
|
|
annotationsRange: 'position',
|
|
cuts: data['json/cuts0.json'],
|
|
duration: video.duration,
|
|
enableSubtitles: true,
|
|
getFrameURL: function(position) {
|
|
return 'https://0xdb.org/' + video.id + '/' + video.resolution
|
|
+ 'p' + position + '.jpg';
|
|
},
|
|
getLargeTimelineURL: function(type, i) {
|
|
return 'http://c.local/timelines/0084628/timelinecuts' + '64p' + i + '.jpg';
|
|
return 'https://0xdb.org/' + video.id
|
|
+ '/timeline' + type + '64p' + i + '.jpg';
|
|
},
|
|
getSmallTimelineURL: function(type, i) {
|
|
return 'https://0xdb.org/' + video.id
|
|
+ '/timeline' + type + '16p' + i + '.jpg';
|
|
},
|
|
height: window.innerHeight - 24,
|
|
layers: [{
|
|
id: 'image',
|
|
item: 'Image',
|
|
items: data['json/hashes.json'].filter(function(value) {
|
|
return value.type == 'shape';
|
|
}).map(function(value) {
|
|
return {
|
|
'in': value['in'],
|
|
out: value.out,
|
|
value: '<img src="' + value.composite + '">'
|
|
}
|
|
}),
|
|
title: 'Images',
|
|
type: 'text'
|
|
}].concat([
|
|
{id: 'shape', item: 'Shape Hash', title: 'Shape Hashes'},
|
|
{id: 'color', item: 'Color Hash', title: 'Color Hashes'},
|
|
{id: 'pHash', item: 'P Hash', title: 'P Hashes'},
|
|
{id: 'dct', item: '3D DCT Hash', title: '3D DCT Hashes'},
|
|
].map(function(layer) {
|
|
return {
|
|
id: layer.id,
|
|
item: layer.item,
|
|
items: data['json/hashes.json'].filter(function(value) {
|
|
return value.type == layer.id;
|
|
}).map(function(value) {
|
|
return {
|
|
'in': value['in'],
|
|
out: value.out,
|
|
value: value.hash + '<br>'
|
|
+ value.similar.map(function(value) {
|
|
var position = Ox.formatDuration(value.position, 3);
|
|
return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
|
|
}).join('<br>')
|
|
};
|
|
}),
|
|
title: layer.title,
|
|
type: 'text'
|
|
}
|
|
})),
|
|
resolution: video.resolution,
|
|
showAnnotations: true,
|
|
showLayers: {image: true, shape: true, color: true, pHash: true, dct: true},
|
|
subtitles: data['json/cuts1.json'].map(function(position) {
|
|
return {'in': position - 0.08, out: position - 0.04, text: ''};
|
|
}),
|
|
timeline: 'antialias',
|
|
timelines: [
|
|
{id: 'antialias', title: 'Anti-Alias'},
|
|
{id: 'slitscaqn', title: 'Slit-Scan'}
|
|
],
|
|
width: window.innerWidth,
|
|
video: {
|
|
96: [{duration: video.duration, src: video.src}]
|
|
}
|
|
})
|
|
.bindEvent({
|
|
position: function(data) {
|
|
window.location.hash = '#' + Ox.formatDuration(data.position, 3);
|
|
}
|
|
});
|
|
app.$ui.panel.replaceElement(1, app.$ui.video);
|
|
Ox.$window.on({
|
|
hashchange: hashchange
|
|
});
|
|
hashchange();
|
|
var count = Ox.count(data['json/cuts0.json'].map(function(position, i) {
|
|
return i == 0 ? 0 : Math.round((position - data['json/cuts0.json'][i - 1]) * 25) / 25;
|
|
}));
|
|
Ox.print(
|
|
data['json/cuts0.json'].length,
|
|
JSON.stringify(Object.keys(count).sort().map(function(key) {
|
|
return [key, count[key]];
|
|
}))
|
|
);
|
|
});
|
|
|
|
app.$ui.panel = Ox.SplitPanel({
|
|
elements: [
|
|
{element: Ox.Bar({size: 24}), size: 24},
|
|
{element: Ox.Element()}
|
|
],
|
|
orientation: 'vertical'
|
|
})
|
|
.appendTo(Ox.$body);
|
|
|
|
function hashchange() {
|
|
var position = Ox.parseDuration(window.location.hash.slice(1));
|
|
app.$ui.video.options({position: position});
|
|
window.location.hash = '#' + Ox.formatDuration(position, 3);
|
|
}
|
|
|
|
}); |