forked from 0x2620/oxjs
update video editor
This commit is contained in:
rlx
parent
e98696b93d
commit
b2e8b2ac82
9 changed files with 623 additions and 485 deletions
|
|
@ -1,326 +0,0 @@
|
|||
// 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.VideoPanelPlayer = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
annotationsSize: 256,
|
||||
censored: [],
|
||||
duration: 0,
|
||||
enableSubtitles: false,
|
||||
find: '',
|
||||
fullscreen: false,
|
||||
height: 0,
|
||||
'in': 0,
|
||||
loop: false,
|
||||
muted: false,
|
||||
out: 0,
|
||||
paused: false,
|
||||
playInToOut: false,
|
||||
position: 0,
|
||||
poster: '',
|
||||
resolution: 0,
|
||||
scaleToFill: false,
|
||||
showAnnotations: true,
|
||||
showTimeline: true,
|
||||
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_space: function() {
|
||||
that.togglePlay();
|
||||
}
|
||||
});
|
||||
|
||||
self.fullscreen = false;
|
||||
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
|
||||
|
||||
self.$player = Ox.Element()
|
||||
.css({
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'hidden'
|
||||
});
|
||||
|
||||
self.$video = Ox.VideoPlayer({
|
||||
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});
|
||||
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: setPosition,
|
||||
position: function(data) {
|
||||
setPosition(data);
|
||||
that.triggerEvent('position', data);
|
||||
},
|
||||
resolution: function(data) {
|
||||
that.triggerEvent('resolution', data);
|
||||
},
|
||||
scale: function(data) {
|
||||
that.triggerEvent('scale', data);
|
||||
},
|
||||
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({
|
||||
position: changeTimeline
|
||||
})
|
||||
.appendTo(self.$controls);
|
||||
|
||||
self.$panel = 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'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: resizePanel
|
||||
});
|
||||
|
||||
self.$annotations = Ox.Element()
|
||||
.bindEvent({
|
||||
resize: resizeAnnotations,
|
||||
resizeend: resizeendAnnotations,
|
||||
toggle: toggleAnnotations
|
||||
});
|
||||
|
||||
that.$element = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$panel
|
||||
},
|
||||
{
|
||||
collapsed: !self.options.showAnnotations,
|
||||
collapsible: true,
|
||||
element: self.$annotations,
|
||||
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});
|
||||
that.triggerEvent('position', {position: self.options.position});
|
||||
}
|
||||
|
||||
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()
|
||||
});
|
||||
}
|
||||
|
||||
function resizeendAnnotations(data) {
|
||||
self.options.annotationsSize = data.size;
|
||||
that.triggerEvent('resizeannotations', {
|
||||
annotationsSize: self.options.annotationsSize
|
||||
});
|
||||
}
|
||||
|
||||
function resizeElement(data) {
|
||||
// called on browser toggle
|
||||
self.options.height = data.size;
|
||||
self.$video.options({
|
||||
height: getPlayerHeight()
|
||||
});
|
||||
}
|
||||
|
||||
function resizePanel(data) {
|
||||
// called on annotations toggle
|
||||
self.$video.options({
|
||||
width: getPlayerWidth()
|
||||
});
|
||||
self.$timeline.options({
|
||||
width: getTimelineWidth()
|
||||
});
|
||||
}
|
||||
|
||||
function setPosition(data) {
|
||||
self.options.position = data.position;
|
||||
//self.$video.position(self.options.position);
|
||||
self.$timeline.options({
|
||||
position: self.options.position
|
||||
});
|
||||
}
|
||||
|
||||
function toggleAnnotations(data) {
|
||||
self.options.showAnnotations = !data.collapsed;
|
||||
self.$video.options({
|
||||
height: getPlayerHeight()
|
||||
});
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
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 == 'position') {
|
||||
self.$video.options({
|
||||
position: value
|
||||
});
|
||||
self.$timeline.options({
|
||||
position: value
|
||||
});
|
||||
} else if (key == 'showAnnotations') {
|
||||
that.$element.toggle(1);
|
||||
} else if (key == 'showTimeline') {
|
||||
self.$panel.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.$panel.toggle(1);
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue