oxjs/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js
2011-11-05 17:46:53 +01:00

320 lines
9.5 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.VideoPanelPlayer = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
annotationsSize: 256,
censored: [],
duration: 0,
find: '',
fullscreen: false,
height: 0,
'in': 0,
loop: false,
muted: false,
out: 0,
paused: false,
playInToOut: false,
position: 0,
poster: '',
scaleToFill: false,
showAnnotations: true,
showControls: 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_shift_a: function() {
that.toggleAnnotations();
},
key_shift_c: function() {
that.toggleControls();
},
key_shift_s: function() {
that.toggleSize();
},
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', 'resolution'],
enableFind: true,
enableKeyboard: true,
enableMouse: 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,
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;
},
position: setPosition,
muted: function(data) {
that.triggerEvent('muted', data);
},
paused: function(data) {
that.triggerEvent('paused', data);
},
position: function(data) {
that.triggerEvent('position', data);
},
scale: function(data) {
that.triggerEvent('scale', 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.showControls,
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.showControls * 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.showControls = !data.collapsed;
self.$video.options({
height: getPlayerHeight()
});
that.triggerEvent('togglecontrols', {
showControls: self.options.showControls
});
}
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 == 'width') {
self.$video.options({
width: getPlayerWidth()
});
self.$timeline.options({
width: getTimelineWidth()
});
}
}
/*@
toggleAnnotations <f> toggle annotations
() -> <o> toggle visibility of annotations
@*/
that.toggleAnnotations = function() {
that.$element.toggle(1);
//that.toggleAnnotations(null, !self.options.showAnnotations);
};
/*@
toggleControls <f> toggle controls
() -> <o> toggle visibility of controls
@*/
that.toggleControls = function() {
self.$panel.toggle(1);
//that.toggleControls(null, !self.options.showControls);
};
return that;
}