make large timeline work in player view

This commit is contained in:
rlx 2011-01-17 22:52:25 +00:00
parent f962a33dfb
commit b64c66bad5

View file

@ -12014,7 +12014,7 @@ requires
type: 'image'
})
.bindEvent({
click: toggleMute
click: self.$video.toggleMute
}),
size: new Ox.Button({
id: 'size',
@ -12057,15 +12057,20 @@ requires
large: new Ox.LargeTimeline({
duration: self.options.duration,
videoId: self.options.videoId,
width: self.options.width - 40
width: getTimelineWidth()
})
.css({
top: '4px'
})
.bindEvent({
change: function(event, data) {
self.$video.position(data.position);
}
}),
small: new Ox.SmallTimeline({
duration: self.options.duration,
videoId: self.options.videoId,
width: self.options.width - 40
width: getTimelineWidth()
})
.css({
top: '80px'
@ -12090,7 +12095,7 @@ requires
orientation: 'vertical'
})
.bindEvent({
resize: resizeVideo
resize: resizePanel
});
self.$annotations = new Ox.Element()
@ -12118,13 +12123,20 @@ requires
});
function getPlayerHeight() {
return self.options.height - 1 -
self.options.showControls * 104;
return self.options.height -
self.options.showControls * 104 - 1;
}
function getPlayerWidth() {
return self.options.width - 1 -
self.options.showAnnotations * self.options.annotationsSize;
return self.options.width -
self.options.showAnnotations *
self.options.annotationsSize - 1;
}
function getTimelineWidth() {
return self.options.width -
self.options.showAnnotations *
self.options.annotationsSize - 40
}
function getVideoCSS() {
@ -12133,25 +12145,6 @@ requires
ratio = width / height,
videoRatio = self.options.videoWidth / self.options.videoHeight,
isWide = ratio < videoRatio;
self.$annotations && self.$annotations.html($('<div>').html(JSON.stringify(self.options.videoSize == 'fit' ? {
foo: width,
bar: height,
width: (isWide ? width : Math.round(height * videoRatio)) + 'px',
height: (isWide ? Math.round(width / videoRatio) : height) + 'px',
margin: 'auto'
} : {
foo: width,
bar: height,
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(' ')
})).css({width: '150px'}));
return self.options.videoSize == 'fit' ? {
position: 'absolute',
left: 0,
@ -12181,8 +12174,10 @@ requires
}
function playing() {
function playing(event, data) {
self.$timeline.large.options({
position: data.position
});
}
function playInToOut() {
@ -12191,23 +12186,41 @@ requires
function resizeAnnotations(event, data) {
self.options.annotationsSize = data;
resizeVideo();
resizeVideoAndControls();
}
function resizeendAnnotations(event, data) {
self.options.annotationsSize = data;
resizeVideo();
that.triggerEvent('change', {
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();
}
function resizePanel(event, data) {
// called on annotations toggle
resizeVideoAndControls();
}
function resizeVideoAndControls() {
resizeVideo();
resizeControls();
}
function resizeVideo() {
self.videoCSS = getVideoCSS();
self.$video.css(self.videoCSS);
@ -12227,18 +12240,9 @@ requires
});
}
function toggleMute() {
}
function togglePlay() {
}
function toggleSize() {
self.options.videoSize = self.options.videoSize == 'fit' ? 'fill' : 'fit';
self.videoCSS = getVideoCSS()
self.$video.css(self.videoCSS);
resizeVideo();
that.triggerEvent('change', {
videoSize: self.options.videoSize
});
@ -12248,7 +12252,7 @@ requires
if (key == 'height') {
resizeVideo();
} else if (key == 'width') {
resizeVideo();
resizeVideoAndControls();
}
}