add first version of Ox.VideoTimelinePanel, update Ox.VideoTimelinePlayer
This commit is contained in:
rlx
parent
c6f0308a17
commit
8c963339fd
2 changed files with 185 additions and 0 deletions
183
source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js
Normal file
183
source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
|
||||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.VideoTimelinePanel <f:Ox.Element> VideoTimelinePanel
|
||||
@*/
|
||||
|
||||
Ox.VideoTimelinePanel = 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,
|
||||
height: 0,
|
||||
layers: [],
|
||||
loop: false, // fixme: used?
|
||||
muted: false,
|
||||
out: 0,
|
||||
paused: false,
|
||||
position: 0,
|
||||
resolution: 0,
|
||||
selected: '',
|
||||
showAnnotations: false,
|
||||
showAnnotationsCalendar: false,
|
||||
showAnnotationsMap: false,
|
||||
showLayers: {},
|
||||
showUsers: false,
|
||||
subtitles: [],
|
||||
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.$player = Ox.VideoTimelinePlayer({
|
||||
censored: self.options.censored,
|
||||
cuts: self.options.cuts,
|
||||
duration: self.options.durations,
|
||||
muted: self.options.muted,
|
||||
paused: true,
|
||||
position: self.options.position,
|
||||
resolution: self.options.resolution,
|
||||
volume: self.options.volume
|
||||
})
|
||||
.bindEvent({
|
||||
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);
|
||||
},
|
||||
volume: function(data) {
|
||||
that.triggerEvent('volume', data);
|
||||
}
|
||||
});
|
||||
|
||||
that.setElement(
|
||||
Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$player
|
||||
},
|
||||
{
|
||||
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 getPlayerWidth() {
|
||||
return self.options.width -
|
||||
self.options.showAnnotations * self.options.annotationsSize - 1;
|
||||
}
|
||||
|
||||
function resizeAnnotations(data) {
|
||||
// called on annotations resize
|
||||
self.options.annotationsSize = data.size;
|
||||
self.$player.options({
|
||||
width: getPlayerWidth()
|
||||
});
|
||||
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.$player.options({
|
||||
height: self.options.height
|
||||
});
|
||||
}
|
||||
|
||||
function selectAnnotation(data) {
|
||||
self.options.selected = data.id;
|
||||
if (self.options.selected) {
|
||||
setPosition(data['in']);
|
||||
}
|
||||
self.$annotationPanel.options({selected: self.options.selected});
|
||||
that.triggerEvent('select', {id: self.options.selected});
|
||||
}
|
||||
|
||||
function setPosition(position, playing) {
|
||||
var minute = parseInt(position / 60),
|
||||
previousMinute = parseInt(self.options.position / 60);
|
||||
self.options.position = position;
|
||||
!playing && self.$player.options({position: self.options.position});
|
||||
self.$annotationPanel.options({position: self.options.position});
|
||||
if (!playing || minute != previousMinute) {
|
||||
that.triggerEvent('position', {
|
||||
position: !playing ? self.options.position : minute * 60
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAnnotations(data) {
|
||||
self.options.showAnnotations = !data.collapsed;
|
||||
self.$player.options({
|
||||
width: getPlayerWidth()
|
||||
});
|
||||
that.triggerEvent('toggleannotations', {
|
||||
showAnnotations: self.options.showAnnotations
|
||||
});
|
||||
}
|
||||
|
||||
function toggleMuted() {
|
||||
self.$player.toggleMuted();
|
||||
}
|
||||
|
||||
function togglePaused() {
|
||||
self.$player.togglePaused();
|
||||
self.$player.options('paused') && that.triggerEvent('position', {
|
||||
position: self.$player.options('position')
|
||||
});
|
||||
}
|
||||
|
||||
that.toggleAnnotations = function() {
|
||||
that.$element.toggle(1);
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
@ -15,12 +15,14 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
height: 0,
|
||||
'in': 0,
|
||||
matches: [],
|
||||
muted: false,
|
||||
out: 0,
|
||||
paused: false,
|
||||
position: 0,
|
||||
subtitles: [],
|
||||
timelineURL: '',
|
||||
videoRatio: 1,
|
||||
volume: 1,
|
||||
width: 0
|
||||
})
|
||||
.options(options || {})
|
||||
|
|
|
|||
Loading…
Reference in a new issue