0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update VideoPanelPlayer

Browse source
This commit is contained in:
rlx 2011-08-17 19:34:34 +00:00
parent acc7971b96
commit 91c69d5d23
3 changed files with 100 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -225,7 +225,9 @@ Ox.VideoEditor = function(options, self) {
left: self.sizes.timeline[0].left + 'px',
top: self.sizes.timeline[0].top + 'px'
})
.bindEvent('position', changeTimelineLarge)
.bindEvent({
position: changeTimelineLarge
})
.appendTo(self.$editor);
self.$timeline[1] = Ox.BlockVideoTimeline({
@ -246,7 +248,9 @@ Ox.VideoEditor = function(options, self) {
left: self.sizes.timeline[1].left + 'px',
top: self.sizes.timeline[1].top + 'px',
})
.bindEvent('position', changeTimelineSmall)
.bindEvent({
position: changeTimelineSmall
})
.appendTo(self.$editor);
self.$annotations = Ox.Element()
@ -266,14 +270,14 @@ Ox.VideoEditor = function(options, self) {
data.layer = layer.id;
data['in'] = self.options['in'];
data.out = self.options.out;
that.triggerEvent('addAnnotation', data);
that.triggerEvent('addannotation', data);
},
remove: function(event, data) {
data = {
ids: [data],
layer: layer.id
};
that.triggerEvent('removeAnnotations', data);
that.triggerEvent('removeannotations', data);
},
select: function(event, data) {
self.options.layers.forEach(function(l, j) { // fixme: l? j?
@ -877,7 +881,7 @@ Ox.VideoEditor = function(options, self) {
function updateAnnotation(event, data) {
data['in'] = self.options['in'];
data.out = self.options.out;
that.triggerEvent('updateAnnotation', data);
that.triggerEvent('updateannotation', data);
}
function select(type) {
@ -970,8 +974,8 @@ Ox.VideoEditor = function(options, self) {
function toggleAnnotations(event, data) {
self.options.showAnnotations = !data.collapsed;
setSizes();
that.triggerEvent('toggleAnnotations', {
visible: self.options.showAnnotations
that.triggerEvent('toggleannotations', {
showAnnotations: self.options.showAnnotations
});
}

323
source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js
View file

@ -24,13 +24,14 @@ Ox.VideoPanelPlayer = function(options, self) {
points: [0, 0],
position: 0,
poster: '',
scaleToFill: false,
showAnnotations: true,
showControls: true,
subtitles: [],
video: '',
videoHeight: 0,
videoSize: 'fit',
videoWidth: 0,
videoURL: '',
volume: 1,
width: 0
})
.options(options || {})
@ -54,36 +55,42 @@ Ox.VideoPanelPlayer = function(options, self) {
}
});
$.extend(self, {
fullscreen: false,
videoCSS: getVideoCSS()
});
self.fullscreen = false;
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
self.$player = Ox.Element()
.css({
overflowX: 'hidden',
overflowY: 'hidden'
})
.bind({
mousedown: that.gainFocus
})
.bindEvent({
resize: resizeVideo
});
self.$video = Ox.VideoElement({
height: self.videoCSS.height,
self.$video = Ox.VideoPlayer({
controlsTop: ['fullscreen', 'scale', 'title', 'find'],
controlsBottom: ['play', 'volume', 'timeline', 'position', 'resolution'],
enableFind: true,
enableKeyboard: true,
height: getPlayerHeight(),
muted: self.options.muted,
paused: true,
points: self.options.points,
position: self.options.position,
url: self.options.videoURL,
width: self.videoCSS.width
scaleToFill: self.options.scaleToFill,
subtitles: self.options.subtitles,
timeline: self.options.timeline,
video: self.options.video,
volume: self.options.volume,
width: getPlayerWidth()
})
.css(self.videoCSS)
.bindEvent({
paused: paused,
playing: playing
position: setPosition,
muted: function(data) {
that.triggerEvent('muted', data);
},
scale: function(data) {
that.triggerEvent('scale', data);
},
volume: function(data) {
that.triggerEvent('volume', data);
}
})
.appendTo(self.$player);
@ -92,122 +99,20 @@ Ox.VideoPanelPlayer = function(options, self) {
toggle: toggleControls
});
self.$buttons = Ox.Element()
.css({
float: 'left',
width: '16px',
margin: '4px'
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()
})
.css({left: '4px', top: '4px'})
.bindEvent({
position: changeTimeline
})
.appendTo(self.$controls);
self.$button = {
play: Ox.Button({
id: 'play',
title: [
{id: 'play', title: 'play'},
{id: 'pause', title: 'pause'}
],
tooltip: ['Play', 'Pause'],
type: 'image'
})
.bindEvent({
click: self.$video.togglePlay
}),
mute: Ox.Button({
id: 'mute',
title: [
{id: 'mute', title: 'mute'},
{id: 'unmute', title: 'unmute'}
],
tooltip: ['Mute', 'Unmute'],
type: 'image'
})
.bindEvent({
click: self.$video.toggleMute
}),
size: Ox.Button({
id: 'size',
title: self.options.videoSize == 'fit' ? [
{id: 'fill', title: 'fill'},
{id: 'fit', title: 'fit'}
] : [
{id: 'fit', title: 'fit'},
{id: 'fill', title: 'fill'}
],
tooltip: self.options.videoSize == 'fit' ? [
'Fill Screen', 'Fit to Screen'
] : [
'Fit to Screen', 'Fill Screen'
],
type: 'image'
})
.bindEvent({
click: toggleSize
}),
fullscreen: Ox.Button({
id: 'size',
title: [
{id: 'grow', title: 'grow'},
{id: 'shrink', title: 'shrink'}
],
tooltip: [
'Enter Fullscreen', 'Exit Fullscreen'
],
type: 'image'
})
.bindEvent({
click: toggleFullscreen
})
}
var i = 0;
Ox.forEach(self.$button, function($button) {
$button.css({
position: 'absolute',
left: '8px',
top: (8 + i++ * 24) + 'px'
})
.appendTo(self.$buttons);
});
self.$timelines = Ox.Element()
.css({
float: 'left',
margin: '4px'
})
.appendTo(self.$controls);
self.$timeline = {
large: Ox.LargeTimeline({
duration: self.options.duration,
position: self.options.position,
subtitles: self.options.subtitles,
videoId: self.options.videoId,
width: getTimelineWidth()
})
.css({
top: '4px'
})
.bindEvent({
change: changeLargeTimeline
}),
small: Ox.SmallTimeline({
duration: self.options.duration,
position: self.options.position,
subtitles: self.options.subtitles,
videoId: self.options.videoId,
width: getTimelineWidth()
})
.css({
top: '76px'
})
.bindEvent({
change: changeSmallTimeline
})
};
Ox.forEach(self.$timeline, function($timeline) {
$timeline.appendTo(self.$timelines);
});
self.$panel = Ox.SplitPanel({
elements: [
{
@ -217,7 +122,7 @@ Ox.VideoPanelPlayer = function(options, self) {
collapsed: !self.options.showControls,
collapsible: true,
element: self.$controls,
size: 104
size: 80
}
],
orientation: 'vertical'
@ -250,78 +155,26 @@ Ox.VideoPanelPlayer = function(options, self) {
orientation: 'horizontal'
});
function changeLargeTimeline(event, data) {
function changeTimeline(data) {
self.options.position = data.position;
self.$video.position(self.options.position);
self.$timeline.small.options({
position: self.options.position
});
}
function changeSmallTimeline(event, data) {
self.options.position = data.position;
self.$video.position(self.options.position);
self.$timeline.large.options({
position: self.options.position
});
self.$video.options({position: self.options.position});
}
function getPlayerHeight() {
return self.options.height -
self.options.showControls * 104 - 1;
self.options.showControls * 80 - 1;
}
function getPlayerWidth() {
return self.options.width -
(self.options.showAnnotations && !self.fullscreen) *
self.options.annotationsSize - 1;
(self.options.showAnnotations && !self.fullscreen)
* self.options.annotationsSize - 1;
}
function getTimelineWidth() {
return self.options.width -
(self.options.showAnnotations && !self.fullscreen) *
self.options.annotationsSize - 40
}
function getVideoCSS() {
var width = getPlayerWidth(),
height = getPlayerHeight(),
ratio = width / height,
videoRatio = self.options.videoWidth / self.options.videoHeight,
isWide = ratio < videoRatio;
return self.options.videoSize == 'fit' ? {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
width: (isWide ? width : Math.round(height * videoRatio)) + 'px',
height: (isWide ? Math.round(width / videoRatio) : height) + 'px',
margin: 'auto'
} : {
width: (isWide ? Math.round(height * videoRatio) : width) + 'px',
height: (isWide ? height : Math.round(width / videoRatio)) + 'px',
margin: [
isWide ? '0' : Math.floor((height - width / videoRatio) / 2) + 'px',
isWide ? Math.ceil((width - height * videoRatio) / 2) + 'px' : '0',
isWide ? '0' : Math.ceil((height - width / videoRatio) / 2) + 'px',
isWide ? Math.floor((width - height * videoRatio) / 2) + 'px' : '0'
].join(' ')
};
}
function paused() {
}
function playing(event, data) {
self.options.position = data.position;
self.$timeline.large.options({
position: self.options.position
});
self.$timeline.small.options({
position: self.options.position
});
self.options.annotationsSize - 16 - 1;
}
function resizeAnnotations(event, data) {
@ -329,79 +182,73 @@ Ox.VideoPanelPlayer = function(options, self) {
resizeVideoAndControls();
}
function resizeendAnnotations(event, data) {
function resizeendAnnotations(data) {
self.options.annotationsSize = data;
that.triggerEvent('change', {
that.triggerEvent('resizeannotations', {
annotationsSize: self.options.annotationsSize
});
}
function resizeControls() {
self.$timeline.large.options({
width: getTimelineWidth()
});
self.$timeline.small.options({
width: getTimelineWidth()
});
}
function resizeElement(event, data) {
// called on browser toggle
self.options.height = data;
resizeVideo();
self.$video.options({
height: getPlayerHeight()
});
}
function resizePanel(event, data) {
// called on annotations toggle
resizeVideoAndControls();
self.$video.options({
width: getPlayerWidth()
});
self.$timeline.options({
width: getTimelineWidth()
});
}
function resizeVideoAndControls() {
resizeVideo();
resizeControls();
function setPosition(event, data) {
self.options.position = data.position;
//self.$video.position(self.options.position);
self.$timeline.options({
position: self.options.position
});
}
function resizeVideo() {
self.videoCSS = getVideoCSS();
self.$video.css(self.videoCSS);
};
function toggleAnnotations(event, data) {
self.options.showAnnotations = !data.collapsed;
that.triggerEvent('change', {
self.$video.options({
height: getPlayerHeight()
});
that.triggerEvent('toggleannotations', {
showAnnotations: self.options.showAnnotations
});
}
function toggleControls(event, data) {
self.options.showControls = !data.collapsed;
that.triggerEvent('change', {
showControls: self.options.showControls
self.$video.options({
height: getPlayerHeight()
});
}
function toggleFullscreen() {
self.fullscreen = !self.fullscreen;
self.options.showAnnotations && that.$element.toggle(1);
self.fullscreen && self.options.showControls && self.$panel.toggle(1);
that.triggerEvent((self.fullscreen ? 'enter' : 'exit') + 'fullscreen', {});
}
function toggleSize() {
self.options.videoSize = self.options.videoSize == 'fit' ? 'fill' : 'fit';
resizeVideo();
that.triggerEvent('change', {
videoSize: self.options.videoSize
that.triggerEvent('togglecontrols', {
showControls: self.options.showControls
});
}
self.setOption = function(key, value) {
if (key == 'height') {
resizeVideo();
self.$video.options({
height: getPlayerHeight()
});
} else if (key == 'position') {
self.$video.position(value);
} else if (key == 'width') {
resizeVideoAndControls();
self.$video.options({
width: getPlayerWidth()
});
self.$timeline.opitions({
width: getTimelineWidth()
});
}
}
@ -415,18 +262,6 @@ Ox.VideoPanelPlayer = function(options, self) {
//that.toggleControls(null, !self.options.showControls);
};
that.toggleMute = function() {
self.$button.mute.trigger('click');
};
that.togglePlay = function() {
self.$button.play.trigger('click');
};
that.toggleSize = function() {
self.$button.size.trigger('click');
}
return that;
}

10
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -1698,6 +1698,9 @@ Ox.VideoPlayer = function(options, self) {
src: getVolumeImageURL()
});
self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100));
that.triggerEvent('volume', {
volume: self.options.volume
});
}
function showControls() {
@ -1924,6 +1927,9 @@ Ox.VideoPlayer = function(options, self) {
self.$volumeValue && self.$volumeValue.html(
self.options.muted ? 0 : Math.round(self.options.volume * 100)
);
that.triggerEvent('muted', {
muted: self.options.muted
});
}
function togglePaused(from) {
@ -1980,6 +1986,9 @@ Ox.VideoPlayer = function(options, self) {
marker.animate(self.posterMarkerCSS[position], 250);
});
}
that.triggerEvent('scale', {
scale: self.options.scaleToFill ? 'fill' : 'fit'
});
}
function toggleSize() {
@ -1997,6 +2006,7 @@ Ox.VideoPlayer = function(options, self) {
if (key == 'fullscreen') {
toggleFullscreen();
} else if (key == 'height' || key == 'width') {
Ox.print('!!!!!!!!!!!!!', key, value)
setSizes();
} else if (key == 'in' || key == 'out') {
self.options.paused && setMarkers();