videotests/js/index.js

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: '<img src="' + value.composite + '"><br>' + 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: '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 + '<br>' + value.similar.map(function(value) {
                                var position = Ox.formatDuration(value.position, 3);
                                return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
                            }).join('<br>')
                        };
                    }),
                    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 + '<br>' + value.similar.map(function(value) {
                                var position = Ox.formatDuration(value.position, 3);
                                return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
                            }).join('<br>')
                        };
                    }),
                    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 + '<br>' + value.similar.map(function(value) {
                                var position = Ox.formatDuration(value.position, 3);
                                return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
                            }).join('<br>')
                        };
                    }),
                    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);
    }

});