465 lines
15 KiB
JavaScript
465 lines
15 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
|
|
|
'use strict';
|
|
|
|
/*@
|
|
Ox.VideoPanelPlayer <f:Ox.Element> VideoPanelPlayer Object
|
|
() -> <f> VideoPanelPlayer Object
|
|
(options) -> <f> VideoPanelPlayer Object
|
|
(options, self) -> <f> VideoPanelPlayer Object
|
|
options <o> Options object
|
|
self <o> shared private variable
|
|
@*/
|
|
|
|
Ox.VideoPanel = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
annotationsCalendarSize: 256,
|
|
annotationsFont: 'small',
|
|
annotationsMapSize: 256,
|
|
annotationsRange: 'all',
|
|
annotationsSize: 256,
|
|
annotationsSort: 'position',
|
|
censored: [],
|
|
clickLink: null,
|
|
cuts: [],
|
|
duration: 0,
|
|
enableSubtitles: false,
|
|
find: '',
|
|
fullscreen: false,
|
|
height: 0,
|
|
'in': 0,
|
|
layers: [],
|
|
loop: false, // fixme: used?
|
|
muted: false,
|
|
out: 0,
|
|
paused: false,
|
|
playInToOut: false,
|
|
position: 0,
|
|
poster: '',
|
|
resolution: 0,
|
|
scaleToFill: false,
|
|
selected: '',
|
|
showAnnotations: false,
|
|
showAnnotationsCalendar: false,
|
|
showAnnotationsMap: false,
|
|
showLayers: {},
|
|
showTimeline: true,
|
|
showUsers: false,
|
|
subtitles: [],
|
|
tooltips: false,
|
|
video: '',
|
|
volume: 1,
|
|
width: 0
|
|
})
|
|
.options(options || {})
|
|
.css({
|
|
height: self.options.height + 'px',
|
|
width: self.options.width + 'px'
|
|
})
|
|
.bindEvent({
|
|
resize: resizeElement,
|
|
key_0: toggleMuted,
|
|
key_equal: function() {
|
|
self.$video.changeVolume(0.1);
|
|
},
|
|
key_minus: function() {
|
|
self.$video.changeVolume(-0.1);
|
|
},
|
|
key_space: togglePaused
|
|
});
|
|
|
|
self.fullscreen = false;
|
|
|
|
self.$player = Ox.Element()
|
|
.css({
|
|
overflowX: 'hidden',
|
|
overflowY: 'hidden'
|
|
});
|
|
|
|
self.$video = Ox.VideoPlayer({
|
|
annotations: getAnnotations(),
|
|
censored: self.options.censored,
|
|
controlsTop: ['fullscreen', 'title', 'find'],
|
|
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'settings'],
|
|
enableFind: true,
|
|
enableKeyboard: true,
|
|
enableMouse: true,
|
|
enablePosition: true,
|
|
enableSubtitles: self.options.enableSubtitles,
|
|
enableTimeline: true,
|
|
find: self.options.find,
|
|
fullscreen: self.options.fullscreen,
|
|
height: getPlayerHeight(),
|
|
'in': self.options['in'],
|
|
muted: self.options.muted,
|
|
out: self.options.out,
|
|
paused: true,
|
|
position: self.options.position,
|
|
resolution: self.options.resolution,
|
|
scaleToFill: self.options.scaleToFill,
|
|
subtitles: self.options.subtitles,
|
|
timeline: self.options.timeline,
|
|
video: self.options.video,
|
|
volume: self.options.volume,
|
|
width: getPlayerWidth()
|
|
})
|
|
.bindEvent({
|
|
find: function(data) {
|
|
self.$timeline.options({find: data.find});
|
|
self.$annotationPanel.options({highlight: data.find});
|
|
that.triggerEvent('find', data);
|
|
},
|
|
fullscreen: function(data) {
|
|
self.options.fullscreen = data.fullscreen;
|
|
},
|
|
muted: function(data) {
|
|
that.triggerEvent('muted', data);
|
|
},
|
|
paused: function(data) {
|
|
that.triggerEvent('paused', data);
|
|
},
|
|
playing: function(data) {
|
|
setPosition(data.position, true);
|
|
},
|
|
position: function(data) {
|
|
setPosition(data.position);
|
|
that.triggerEvent('position', data);
|
|
},
|
|
resolution: function(data) {
|
|
that.triggerEvent('resolution', data);
|
|
},
|
|
scale: function(data) {
|
|
that.triggerEvent('scale', data);
|
|
},
|
|
select: selectAnnotation,
|
|
subtitles: function(data) {
|
|
that.triggerEvent('subtitles', data);
|
|
},
|
|
volume: function(data) {
|
|
that.triggerEvent('volume', data);
|
|
}
|
|
})
|
|
.appendTo(self.$player);
|
|
|
|
self.$controls = Ox.Element()
|
|
.bindEvent({
|
|
toggle: toggleControls
|
|
});
|
|
|
|
self.$timeline = Ox.LargeVideoTimeline({
|
|
duration: self.options.duration,
|
|
find: self.options.find,
|
|
getImageURL: self.options.getTimelineImageURL,
|
|
position: self.options.position,
|
|
subtitles: self.options.subtitles,
|
|
videoId: self.options.videoId,
|
|
width: getTimelineWidth()
|
|
})
|
|
.css({left: '4px', top: '4px'})
|
|
.bindEvent({
|
|
mousedown: that.gainFocus,
|
|
position: changeTimeline
|
|
})
|
|
.appendTo(self.$controls);
|
|
|
|
self.$videoPanel = Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: self.$player
|
|
},
|
|
{
|
|
collapsed: !self.options.showTimeline,
|
|
collapsible: true,
|
|
element: self.$controls,
|
|
size: 80,
|
|
tooltip: self.options.tooltips ? 'timeline' : false
|
|
}
|
|
],
|
|
orientation: 'vertical'
|
|
});
|
|
|
|
self.$annotationPanel = Ox.AnnotationPanel({
|
|
calendarSize: self.options.annotationsCalendarSize,
|
|
clickLink: self.options.clickLink,
|
|
editable: false,
|
|
font: self.options.annotationsFont,
|
|
highlight: self.options.find,
|
|
'in': self.options['in'],
|
|
layers: self.options.layers,
|
|
mapSize: self.options.annotationsMapSize,
|
|
out: self.options.out,
|
|
position: self.options.position,
|
|
range: self.options.annotationsRange,
|
|
selected: self.options.selected,
|
|
showCalendar: self.options.showAnnotationsCalendar,
|
|
showFonts: true,
|
|
showLayers: self.options.showLayers,
|
|
showMap: self.options.showAnnotationsMap,
|
|
showUsers: self.options.showUsers,
|
|
sort: self.options.annotationsSort,
|
|
width: self.options.annotationsSize
|
|
})
|
|
.bindEvent({
|
|
annotationsfont: function(data) {
|
|
self.options.annotationsFont = data.font;
|
|
that.triggerEvent('annotationsfont', data);
|
|
},
|
|
annotationsrange: function(data) {
|
|
self.options.annotationsRange = data.range;
|
|
that.triggerEvent('annotationsrange', data);
|
|
},
|
|
annotationssort: function(data) {
|
|
self.options.annotationsSort = data.sort;
|
|
that.triggerEvent('annotationssort', data);
|
|
},
|
|
open: function() {
|
|
setPosition(self.options['in']);
|
|
},
|
|
resize: resizeAnnotations,
|
|
resizeend: resizeendAnnotations,
|
|
resizecalendar: function(data) {
|
|
that.triggerEvent('resizecalendar', data);
|
|
},
|
|
resizemap: function(data) {
|
|
that.triggerEvent('resizemap', data);
|
|
},
|
|
select: selectAnnotation,
|
|
toggle: toggleAnnotations,
|
|
togglecalendar: function(data) {
|
|
self.options.showAnnotationsCalendar = !data.collapsed;
|
|
that.triggerEvent('togglecalendar', data);
|
|
},
|
|
togglelayer: function(data) {
|
|
that.triggerEvent('togglelayer', {
|
|
collapsed: data.collapsed,
|
|
layer: data.layer
|
|
});
|
|
},
|
|
togglemap: function(data) {
|
|
self.options.showAnnotationsMap = !data.collapsed;
|
|
that.triggerEvent('togglemap', data);
|
|
}
|
|
});
|
|
|
|
[
|
|
'0', 'b', 'backslash', 'closebracket', 'comma', 'dot', 'equal', 'f',
|
|
'g', 'i', 'minus', 'n', 'o', 'openbracket', 'p', 'shift_0', 'shift_g',
|
|
'shift_i', 'shift_o', 'slash', 'space'
|
|
].forEach(function(key) {
|
|
key = 'key_' + key;
|
|
self.$annotationPanel.bindEvent(key, function() {
|
|
that.triggerEvent(key);
|
|
});
|
|
});
|
|
|
|
that.$element = Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: self.$videoPanel
|
|
},
|
|
{
|
|
collapsed: !self.options.showAnnotations,
|
|
collapsible: true,
|
|
element: self.$annotationPanel,
|
|
resizable: true,
|
|
resize: [192, 256, 320, 384],
|
|
size: self.options.annotationsSize,
|
|
tooltip: self.options.tooltips ? 'annotations' : false
|
|
}
|
|
],
|
|
orientation: 'horizontal'
|
|
});
|
|
|
|
function changeTimeline(data) {
|
|
self.options.position = data.position;
|
|
self.$video.options({position: self.options.position});
|
|
self.$annotationPanel.options({position: self.options.position});
|
|
that.triggerEvent('position', {position: self.options.position});
|
|
}
|
|
|
|
function getAnnotations() {
|
|
return Ox.flatten(Ox.merge(self.options.layers.map(function(layer) {
|
|
return layer.items.map(function(item) {
|
|
return {id: item.id, 'in': item['in'], out: item.out, text: item.value};
|
|
});
|
|
}))).sort(sortAnnotations);
|
|
}
|
|
|
|
function getPlayerHeight() {
|
|
return self.options.height -
|
|
self.options.showTimeline * 80 - 1;
|
|
}
|
|
|
|
function getPlayerWidth() {
|
|
return self.options.width -
|
|
(self.options.showAnnotations && !self.fullscreen)
|
|
* self.options.annotationsSize - 1;
|
|
}
|
|
|
|
function getTimelineWidth() {
|
|
return self.options.width -
|
|
(self.options.showAnnotations && !self.fullscreen) *
|
|
self.options.annotationsSize - 16 - 1;
|
|
}
|
|
|
|
function resizeAnnotations(data) {
|
|
// called on annotations resize
|
|
self.options.annotationsSize = data.size;
|
|
self.$video.options({
|
|
width: getPlayerWidth()
|
|
});
|
|
self.$timeline.options({
|
|
width: getTimelineWidth()
|
|
});
|
|
self.$annotationPanel.options({width: data.size});
|
|
}
|
|
|
|
function resizeendAnnotations(data) {
|
|
that.triggerEvent('annotationssize', data.size);
|
|
}
|
|
|
|
function resizeElement(data) {
|
|
// called on browser toggle
|
|
self.options.height = data.size;
|
|
self.$video.options({
|
|
height: getPlayerHeight()
|
|
});
|
|
}
|
|
|
|
/*
|
|
function resizePanel(data) {
|
|
// called on annotations toggle <-- FIXME: NOT TRUE
|
|
Ox.print('RESIZEPANEL----------')
|
|
self.$video.options({
|
|
width: getPlayerWidth()
|
|
});
|
|
self.$timeline.options({
|
|
width: getTimelineWidth()
|
|
});
|
|
}
|
|
*/
|
|
|
|
function selectAnnotation(data) {
|
|
self.options.selected = data.id;
|
|
if (self.options.selected) {
|
|
setPosition(data['in']);
|
|
setPoint('in', data['in']);
|
|
setPoint('out', data.out);
|
|
}
|
|
self.$annotationPanel.options({selected: self.options.selected});
|
|
that.triggerEvent('select', {id: self.options.selected});
|
|
}
|
|
|
|
function setPoint(point, position) {
|
|
self.options[point] = position;
|
|
self.$video.options(point, position);
|
|
self.$timeline.options(point, position);
|
|
self.$annotationPanel.options(point, position);
|
|
}
|
|
|
|
function setPosition(position, playing) {
|
|
self.options.position = position;
|
|
!playing && self.$video.options({position: self.options.position});
|
|
self.$timeline.options({position: self.options.position});
|
|
self.$annotationPanel.options({position: self.options.position});
|
|
}
|
|
|
|
function sortAnnotations(a, b) {
|
|
var ret = 0;
|
|
if (a['in'] < b['in']) {
|
|
ret = -1;
|
|
} else if (a['in'] > b['in']) {
|
|
ret = 1;
|
|
} else if (a.out < b.out) {
|
|
ret = -1;
|
|
} else if (a.out > b.out) {
|
|
ret = 1;
|
|
} else if (a.value < b.value) {
|
|
ret = -1;
|
|
} else if (a.value > b.value) {
|
|
ret = 1;
|
|
}
|
|
return ret;
|
|
}
|
|
|
|
function toggleAnnotations(data) {
|
|
self.options.showAnnotations = !data.collapsed;
|
|
self.$video.options({
|
|
width: getPlayerWidth()
|
|
});
|
|
self.$timeline.options({
|
|
width: getTimelineWidth()
|
|
});
|
|
that.triggerEvent('toggleannotations', {
|
|
showAnnotations: self.options.showAnnotations
|
|
});
|
|
}
|
|
|
|
function toggleControls(data) {
|
|
self.options.showTimeline = !data.collapsed;
|
|
self.$video.options({
|
|
height: getPlayerHeight()
|
|
});
|
|
that.triggerEvent('toggletimeline', {
|
|
showTimeline: self.options.showTimeline
|
|
});
|
|
}
|
|
|
|
function toggleMuted() {
|
|
self.$video.toggleMuted();
|
|
}
|
|
|
|
function togglePaused() {
|
|
self.$video.togglePaused();
|
|
self.$video.options('paused') && that.triggerEvent('position', {
|
|
position: self.$video.options('position')
|
|
});
|
|
}
|
|
|
|
self.setOption = function(key, value) {
|
|
if (key == 'fullscreen') {
|
|
self.$video.options({fullscreen: value});
|
|
} else if (key == 'height') {
|
|
self.$video.options({height: getPlayerHeight()});
|
|
} else if (key == 'in' || key == 'out') {
|
|
setPoint(key, value);
|
|
} else if (key == 'position') {
|
|
self.$video.options({position: value});
|
|
self.$timeline.options({position: value});
|
|
self.$annotationPanel.options({position: value});
|
|
} else if (key == 'selected') {
|
|
self.$annotationPanel.options({selected: value});
|
|
} else if (key == 'showAnnotations') {
|
|
that.$element.toggle(1);
|
|
} else if (key == 'showTimeline') {
|
|
self.$videoPanel.toggle(1);
|
|
} else if (key == 'width') {
|
|
self.$video.options({width: getPlayerWidth()});
|
|
self.$timeline.options({width: getTimelineWidth()});
|
|
}
|
|
}
|
|
|
|
// fixme: can these be removed?
|
|
|
|
/*@
|
|
toggleAnnotations <f> toggle annotations
|
|
() -> <o> toggle visibility of annotations
|
|
@*/
|
|
that.toggleAnnotations = function() {
|
|
that.$element.toggle(1);
|
|
};
|
|
|
|
/*@
|
|
toggleTimeline <f> toggle timeline
|
|
() -> <o> toggle visibility of timeline
|
|
@*/
|
|
that.toggleTimeline = function() {
|
|
self.$videoPanel.toggle(1);
|
|
};
|
|
|
|
return that;
|
|
|
|
}
|