From 478e9f8b800272e313cd661789fcb76f8db55a06 Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 26 Jul 2013 23:03:56 +0200 Subject: [PATCH] initial commit --- index.html | 10 ++++ js/index.js | 158 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 168 insertions(+) create mode 100644 index.html create mode 100644 js/index.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..aed934a --- /dev/null +++ b/index.html @@ -0,0 +1,10 @@ + + + + video + + + + + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..7173eaf --- /dev/null +++ b/js/index.js @@ -0,0 +1,158 @@ +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: 'shape', + item: 'Shape Hash', + items: data['json/hashes.json'].filter(function(value) { + return value.type == 'shape'; + }).map(function(value) { + return { + 'in': value['in'], + out: value.out, + value: '
' + value.hash + '
' + + value.similar.map(function(value) { + var position = Ox.formatDuration(value.position, 3); + return '' + position +' ' + value.distance; + }).join('
') + }; + }), + title: 'Shape Hashes', + type: 'text' + }, { + id: 'color', + item: 'Color Hash', + items: data['json/hashes.json'].filter(function(value) { + return value.type == 'color'; + }).map(function(value) { + return { + 'in': value['in'], + out: value.out, + value: value.hash + '
' + value.similar.map(function(value) { + var position = Ox.formatDuration(value.position, 3); + return '' + position +' ' + value.distance; + }).join('
') + }; + }), + title: 'Color Hashes', + type: 'text' + },{ + id: 'p', + item: 'P Hash', + items: data['json/hashes.json'].filter(function(value) { + return value.type == 'pHash'; + }).map(function(value) { + return { + 'in': value['in'], + out: value.out, + value: value.hash + '
' + value.similar.map(function(value) { + var position = Ox.formatDuration(value.position, 3); + return '' + position +' ' + value.distance; + }).join('
') + }; + }), + title: 'P Hashes', + type: 'text' + }, { + id: 'dct', + item: 'DCT Hash', + items: data['json/hashes.json'].filter(function(value) { + return value.type == 'dct'; + }).map(function(value) { + return { + 'in': value['in'], + out: value.out, + value: value.hash + '
' + value.similar.map(function(value) { + var position = Ox.formatDuration(value.position, 3); + return '' + position +' ' + value.distance; + }).join('
') + }; + }), + title: 'DCT Hashes', + type: 'text' + }], + resolution: video.resolution, + showAnnotations: true, + showLayers: {shape: true, color: 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); + } + +}); \ No newline at end of file