oxjs/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js

273 lines
7.9 KiB
JavaScript
Raw Normal View History

2011-07-29 18:48:43 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-05-16 08:24:46 +00:00
/*@
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
@*/
2011-04-22 22:03:10 +00:00
Ox.VideoPanelPlayer = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
annotationsSize: 256,
duration: 0,
height: 0,
loop: false,
muted: false,
paused: false,
playInToOut: false,
points: [0, 0],
position: 0,
poster: '',
2011-08-17 19:34:34 +00:00
scaleToFill: false,
2011-04-22 22:03:10 +00:00
showAnnotations: true,
showControls: true,
subtitles: [],
2011-08-17 19:34:34 +00:00
video: '',
volume: 1,
2011-04-22 22:03:10 +00:00
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();
}
});
2011-08-17 19:34:34 +00:00
self.fullscreen = false;
2011-04-22 22:03:10 +00:00
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
self.$player = Ox.Element()
2011-04-22 22:03:10 +00:00
.css({
overflowX: 'hidden',
overflowY: 'hidden'
});
2011-08-17 19:34:34 +00:00
self.$video = Ox.VideoPlayer({
controlsTop: ['fullscreen', 'scale', 'title', 'find'],
controlsBottom: ['play', 'volume', 'timeline', 'position', 'resolution'],
enableFind: true,
enableKeyboard: true,
2011-08-18 14:03:48 +00:00
enableMouse: true,
2011-08-17 19:34:34 +00:00
height: getPlayerHeight(),
muted: self.options.muted,
2011-04-22 22:03:10 +00:00
paused: true,
position: self.options.position,
2011-08-17 19:34:34 +00:00
scaleToFill: self.options.scaleToFill,
subtitles: self.options.subtitles,
timeline: self.options.timeline,
video: self.options.video,
volume: self.options.volume,
width: getPlayerWidth()
2011-04-22 22:03:10 +00:00
})
.bindEvent({
2011-08-17 19:34:34 +00:00
position: setPosition,
muted: function(data) {
that.triggerEvent('muted', data);
},
scale: function(data) {
that.triggerEvent('scale', data);
},
volume: function(data) {
that.triggerEvent('volume', data);
}
2011-04-22 22:03:10 +00:00
})
.appendTo(self.$player);
self.$controls = Ox.Element()
2011-04-22 22:03:10 +00:00
.bindEvent({
toggle: toggleControls
});
2011-08-17 19:34:34 +00:00
self.$timeline = Ox.LargeVideoTimeline({
duration: self.options.duration,
getImageURL: self.options.getTimelineImageURL,
position: self.options.position,
subtitles: self.options.subtitles,
videoId: self.options.videoId,
width: getTimelineWidth()
2011-04-22 22:03:10 +00:00
})
2011-08-17 19:34:34 +00:00
.css({left: '4px', top: '4px'})
.bindEvent({
position: changeTimeline
2011-04-22 22:03:10 +00:00
})
.appendTo(self.$controls);
self.$panel = Ox.SplitPanel({
2011-04-22 22:03:10 +00:00
elements: [
{
element: self.$player
},
{
collapsed: !self.options.showControls,
collapsible: true,
element: self.$controls,
2011-08-17 19:34:34 +00:00
size: 80
2011-04-22 22:03:10 +00:00
}
],
orientation: 'vertical'
})
.bindEvent({
resize: resizePanel
});
self.$annotations = Ox.Element()
2011-04-22 22:03:10 +00:00
.bindEvent({
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
toggle: toggleAnnotations
});
that.$element = Ox.SplitPanel({
2011-04-22 22:03:10 +00:00
elements: [
{
element: self.$panel
},
{
collapsed: !self.options.showAnnotations,
collapsible: true,
element: self.$annotations,
resizable: true,
resize: [192, 256, 320, 384],
size: self.options.annotationsSize
}
],
orientation: 'horizontal'
});
2011-08-17 19:34:34 +00:00
function changeTimeline(data) {
2011-04-22 22:03:10 +00:00
self.options.position = data.position;
2011-08-17 19:34:34 +00:00
self.$video.options({position: self.options.position});
2011-04-22 22:03:10 +00:00
}
function getPlayerHeight() {
return self.options.height -
2011-08-17 19:34:34 +00:00
self.options.showControls * 80 - 1;
2011-04-22 22:03:10 +00:00
}
function getPlayerWidth() {
return self.options.width -
2011-08-17 19:34:34 +00:00
(self.options.showAnnotations && !self.fullscreen)
* self.options.annotationsSize - 1;
2011-04-22 22:03:10 +00:00
}
function getTimelineWidth() {
return self.options.width -
(self.options.showAnnotations && !self.fullscreen) *
2011-08-17 19:34:34 +00:00
self.options.annotationsSize - 16 - 1;
2011-04-22 22:03:10 +00:00
}
function resizeAnnotations(event, data) {
2011-08-19 20:37:58 +00:00
// called on annotations resize
2011-04-22 22:03:10 +00:00
self.options.annotationsSize = data;
2011-08-19 20:37:58 +00:00
self.$video.options({
width: getPlayerWidth()
});
self.$timeline.options({
width: getTimelineWidth()
});
2011-04-22 22:03:10 +00:00
}
2011-08-19 20:37:58 +00:00
function resizeendAnnotations(event, data) {
2011-04-22 22:03:10 +00:00
self.options.annotationsSize = data;
2011-08-17 19:34:34 +00:00
that.triggerEvent('resizeannotations', {
2011-04-22 22:03:10 +00:00
annotationsSize: self.options.annotationsSize
});
}
function resizeElement(event, data) {
// called on browser toggle
self.options.height = data;
2011-08-17 19:34:34 +00:00
self.$video.options({
height: getPlayerHeight()
});
2011-04-22 22:03:10 +00:00
}
function resizePanel(event, data) {
// called on annotations toggle
2011-08-17 19:34:34 +00:00
self.$video.options({
width: getPlayerWidth()
});
self.$timeline.options({
width: getTimelineWidth()
});
2011-04-22 22:03:10 +00:00
}
2011-08-17 19:34:34 +00:00
function setPosition(event, data) {
self.options.position = data.position;
//self.$video.position(self.options.position);
self.$timeline.options({
position: self.options.position
});
2011-04-22 22:03:10 +00:00
}
function toggleAnnotations(event, data) {
self.options.showAnnotations = !data.collapsed;
2011-08-17 19:34:34 +00:00
self.$video.options({
height: getPlayerHeight()
});
that.triggerEvent('toggleannotations', {
2011-04-22 22:03:10 +00:00
showAnnotations: self.options.showAnnotations
});
}
function toggleControls(event, data) {
self.options.showControls = !data.collapsed;
2011-08-17 19:34:34 +00:00
self.$video.options({
height: getPlayerHeight()
2011-04-22 22:03:10 +00:00
});
2011-08-17 19:34:34 +00:00
that.triggerEvent('togglecontrols', {
showControls: self.options.showControls
2011-04-22 22:03:10 +00:00
});
}
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
2011-04-22 22:03:10 +00:00
if (key == 'height') {
2011-08-17 19:34:34 +00:00
self.$video.options({
height: getPlayerHeight()
});
2011-04-22 22:03:10 +00:00
} else if (key == 'position') {
self.$video.position(value);
} else if (key == 'width') {
2011-08-17 19:34:34 +00:00
self.$video.options({
width: getPlayerWidth()
});
2011-08-19 18:42:44 +00:00
self.$timeline.options({
2011-08-17 19:34:34 +00:00
width: getTimelineWidth()
});
2011-04-22 22:03:10 +00:00
}
}
that.toggleAnnotations = function() {
that.$element.toggle(1);
//that.toggleAnnotations(null, !self.options.showAnnotations);
};
that.toggleControls = function() {
self.$panel.toggle(1);
//that.toggleControls(null, !self.options.showControls);
};
return that;
}