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

314 lines
9.1 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
2011-11-05 22:18:26 +00:00
'use strict';
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,
2011-10-22 21:03:42 +00:00
censored: [],
2011-04-22 22:03:10 +00:00
duration: 0,
find: '',
fullscreen: false,
2011-04-22 22:03:10 +00:00
height: 0,
'in': 0,
2011-04-22 22:03:10 +00:00
loop: false,
muted: false,
out: 0,
2011-04-22 22:03:10 +00:00
paused: false,
playInToOut: false,
position: 0,
poster: '',
2011-08-17 19:34:34 +00:00
scaleToFill: false,
2011-04-22 22:03:10 +00:00
showAnnotations: true,
showTimeline: true,
2011-04-22 22:03:10 +00:00
subtitles: [],
tooltips: false,
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_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({
2011-10-22 21:03:42 +00:00
censored: self.options.censored,
2011-08-28 06:23:15 +00:00
controlsTop: ['fullscreen', 'title', 'find'],
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'resolution'],
2011-08-17 19:34:34 +00:00
enableFind: true,
enableKeyboard: true,
2011-08-18 14:03:48 +00:00
enableMouse: true,
find: self.options.find,
fullscreen: self.options.fullscreen,
2011-08-17 19:34:34 +00:00
height: getPlayerHeight(),
'in': self.options['in'],
2011-08-17 19:34:34 +00:00
muted: self.options.muted,
out: self.options.out,
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({
find: function(data) {
self.$timeline.options({find: data.find});
that.triggerEvent('find', data);
},
fullscreen: function(data) {
self.options.fullscreen = data.fullscreen;
},
2011-08-17 19:34:34 +00:00
muted: function(data) {
that.triggerEvent('muted', data);
},
paused: function(data) {
that.triggerEvent('paused', data);
},
2011-11-05 20:14:24 +00:00
playing: setPosition,
position: function(data) {
that.triggerEvent('position', data);
},
2011-08-17 19:34:34 +00:00
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,
find: self.options.find,
2011-08-17 19:34:34 +00:00
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.showTimeline,
2011-04-22 22:03:10 +00:00
collapsible: true,
element: self.$controls,
size: 80,
tooltip: self.options.tooltips ? 'timeline' : false
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,
tooltip: self.options.tooltips ? 'annotations' : false
2011-04-22 22:03:10 +00:00
}
],
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});
that.triggerEvent('position', {position: self.options.position});
2011-04-22 22:03:10 +00:00
}
function getPlayerHeight() {
return self.options.height -
self.options.showTimeline * 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(data) {
2011-08-19 20:37:58 +00:00
// called on annotations resize
self.options.annotationsSize = data.size;
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
}
function resizeendAnnotations(data) {
self.options.annotationsSize = data.size;
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(data) {
2011-04-22 22:03:10 +00:00
// called on browser toggle
self.options.height = data.size;
2011-08-17 19:34:34 +00:00
self.$video.options({
height: getPlayerHeight()
});
2011-04-22 22:03:10 +00:00
}
function resizePanel(data) {
2011-04-22 22:03:10 +00:00
// 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
}
function setPosition(data) {
2011-08-17 19:34:34 +00:00
self.options.position = data.position;
//self.$video.position(self.options.position);
self.$timeline.options({
position: self.options.position
2011-11-03 15:42:41 +00:00
});
2011-04-22 22:03:10 +00:00
}
function toggleAnnotations(data) {
2011-04-22 22:03:10 +00:00
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(data) {
self.options.showTimeline = !data.collapsed;
2011-08-17 19:34:34 +00:00
self.$video.options({
height: getPlayerHeight()
2011-04-22 22:03:10 +00:00
});
that.triggerEvent('toggletimeline', {
showTimeline: self.options.showTimeline
2011-04-22 22:03:10 +00:00
});
}
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
if (key == 'fullscreen') {
self.$video.options({
fullscreen: value
});
} else 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.options({
position: value
});
self.$timeline.options({
position: value
});
} else if (key == 'showAnnotations') {
that.$element.toggle(1);
} else if (key == 'showTimeline') {
self.$panel.toggle(1);
2011-04-22 22:03:10 +00:00
} 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
}
}
// fixme: can these be removed?
2011-09-14 14:34:33 +00:00
/*@
toggleAnnotations <f> toggle annotations
2011-11-03 15:42:41 +00:00
() -> <o> toggle visibility of annotations
2011-09-14 14:34:33 +00:00
@*/
2011-04-22 22:03:10 +00:00
that.toggleAnnotations = function() {
that.$element.toggle(1);
};
2011-09-14 14:34:33 +00:00
/*@
toggleTimeline <f> toggle timeline
() -> <o> toggle visibility of timeline
2011-09-14 14:34:33 +00:00
@*/
that.toggleTimeline = function() {
2011-04-22 22:03:10 +00:00
self.$panel.toggle(1);
};
return that;
}