timeline player: fix mute button, add scroll button
This commit is contained in:
rlx
parent
01b4840fd6
commit
fb64474545
1 changed files with 59 additions and 20 deletions
|
|
@ -46,8 +46,8 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
+ self.options.showMilliseconds * 6;
|
||||
self.tiles = Math.ceil(self.frames / self.tileWidth);
|
||||
self.videoWidth = Math.round(self.tileHeight * self.options.videoRatio);
|
||||
self.lines = getLines(); // may update self.contentWidth
|
||||
self.videoLines = getVideoLines();
|
||||
self.lines = getLines();
|
||||
|
||||
self.$menubar = Ox.Bar({size: 16});
|
||||
|
||||
|
|
@ -95,6 +95,22 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$menubar);
|
||||
|
||||
self.$scrollButton = Ox.Button({
|
||||
style: 'symbol',
|
||||
title: 'arrowDown',
|
||||
tooltip: 'Scroll to Player',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right'})
|
||||
.hide()
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
self.scrollTimeout && clearTimeout(self.scrollTimeout);
|
||||
scrollToPosition();
|
||||
}
|
||||
})
|
||||
.appendTo(self.$menubar);
|
||||
|
||||
self.$timelinePlayer = Ox.Element()
|
||||
.css({overflowX: 'hidden', overflowY: 'auto'})
|
||||
.bind({
|
||||
|
|
@ -151,6 +167,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
self.$playButton = Ox.Button({
|
||||
style: 'symbol',
|
||||
title: 'play',
|
||||
tooltip: 'Play',
|
||||
type: 'image'
|
||||
})
|
||||
.css({
|
||||
|
|
@ -165,7 +182,8 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
|
||||
self.$muteButton = Ox.Button({
|
||||
style: 'symbol',
|
||||
title: 'mute',
|
||||
title: self.options.muted ? 'unmute' : 'mute',
|
||||
tooltip: self.options.muted ? 'Unmute' : 'Mute',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'left'})
|
||||
|
|
@ -259,10 +277,12 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$timelines[self.videoLines[1]][0]);
|
||||
|
||||
Ox.print('MUTED???', self.options.muted)
|
||||
self.$frame = Ox.VideoPlayer({
|
||||
censored: self.options.censored,
|
||||
duration: self.options.duration,
|
||||
height: self.tileHeight,
|
||||
muted: self.options.muted,
|
||||
position: self.options.position,
|
||||
scaleToFill: true,
|
||||
type: 'in',
|
||||
|
|
@ -396,6 +416,20 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
) / self.fps;
|
||||
}
|
||||
|
||||
function getPositionScrollTop() {
|
||||
// Returns the target scrolltop if the player is not fully visible,
|
||||
// otherwise returns null
|
||||
var scrollTop = self.$timelinePlayer.scrollTop(),
|
||||
videoTop = [
|
||||
self.margin + Ox.min(self.videoLines) * (self.tileHeight + self.margin),
|
||||
self.margin + Ox.max(self.videoLines) * (self.tileHeight + self.margin)
|
||||
],
|
||||
offset = self.contentHeight - self.tileHeight - self.margin;
|
||||
return videoTop[0] < scrollTop + self.margin ? videoTop[0] - self.margin
|
||||
: videoTop[1] > scrollTop + offset ? videoTop[1] - offset
|
||||
: null;
|
||||
}
|
||||
|
||||
function getSmallTimeline() {
|
||||
var $timeline = Ox.SmallVideoTimeline({
|
||||
duration: self.options.duration,
|
||||
|
|
@ -545,6 +579,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
}
|
||||
|
||||
function scroll() {
|
||||
updateScrollButton();
|
||||
if (!self.options.paused && self.options.followPlayer) {
|
||||
self.scrollTimeout && clearTimeout(self.scrollTimeout);
|
||||
self.scrollTimeout = setTimeout(function() {
|
||||
|
|
@ -555,21 +590,12 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
}
|
||||
|
||||
function scrollToPosition() {
|
||||
var scrollTop = self.$timelinePlayer.scrollTop(),
|
||||
videoTop = [
|
||||
self.margin + Ox.min(self.videoLines) * (self.tileHeight + self.margin),
|
||||
self.margin + Ox.max(self.videoLines) * (self.tileHeight + self.margin)
|
||||
],
|
||||
offset = self.contentHeight - self.tileHeight - self.margin;
|
||||
if (videoTop[0] < scrollTop + self.margin) {
|
||||
self.$timelinePlayer.stop().animate({
|
||||
scrollTop: videoTop[0] - self.margin
|
||||
}, 250);
|
||||
} else if (videoTop[1] > scrollTop + offset) {
|
||||
self.$timelinePlayer.stop().animate({
|
||||
scrollTop: videoTop[1] - offset
|
||||
}, 250);
|
||||
}
|
||||
var positionScrollTop = getPositionScrollTop();
|
||||
positionScrollTop && self.$timelinePlayer.stop().animate({
|
||||
scrollTop: positionScrollTop
|
||||
}, 250, function() {
|
||||
self.$scrollButton.hide();
|
||||
});
|
||||
}
|
||||
|
||||
function setHeight() {
|
||||
|
|
@ -609,12 +635,12 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
});
|
||||
}
|
||||
if (
|
||||
fromVideo && self.options.followPlayer && !self.scrollTimeout
|
||||
fromVideo && !self.scrollTimeout
|
||||
&& videoLines[1] != self.videoLines[1]
|
||||
&& videoLines[1] > videoLines[0]
|
||||
) {
|
||||
self.videoLines = videoLines;
|
||||
scrollToPosition();
|
||||
self.options.followPlayer ? scrollToPosition() : updateScrollButton();
|
||||
} else {
|
||||
self.videoLines = videoLines;
|
||||
}
|
||||
|
|
@ -706,7 +732,8 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
self.options.muted = !self.options.muted;
|
||||
self.$video.options({muted: self.options.muted});
|
||||
self.$muteButton.options({
|
||||
title: self.options.muted ? 'unmute' : 'mute'
|
||||
title: self.options.muted ? 'unmute' : 'mute',
|
||||
tooltip: self.options.muted ? 'Unmute' : 'Mute'
|
||||
});
|
||||
that.triggerEvent('muted', {
|
||||
muted: self.options.muted
|
||||
|
|
@ -727,6 +754,18 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function updateScrollButton() {
|
||||
var scrollTop = self.$timelinePlayer.scrollTop(),
|
||||
positionScrollTop = getPositionScrollTop();
|
||||
if (positionScrollTop === null) {
|
||||
self.$scrollButton.hide();
|
||||
} else {
|
||||
self.$scrollButton.options({
|
||||
title: positionScrollTop < scrollTop ? 'arrowUp' : 'arrowDown'
|
||||
}).show();
|
||||
}
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'height') {
|
||||
setHeight();
|
||||
|
|
|
|||
Loading…
Reference in a new issue