make large timeline work in player view
This commit is contained in:
parent
f962a33dfb
commit
b64c66bad5
1 changed files with 46 additions and 42 deletions
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue