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

implement 'follow player while playing'

Browse source
This commit is contained in:
rlx 2012-04-17 13:42:46 +00:00
parent 0e8bfd1348
commit 3ecfcd0f3f
2 changed files with 69 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js
View file

@ -85,6 +85,9 @@ Ox.VideoTimelinePanel = function(options, self) {
width: getPlayerWidth()
})
.bindEvent({
follow: function(data) {
that.triggerEvent('follow', data);
},
muted: function(data) {
that.triggerEvent('muted', data);
},
@ -255,7 +258,9 @@ Ox.VideoTimelinePanel = function(options, self) {
}
self.setOption = function(key, value) {
if (key == 'showAnnotations') {
if (key == 'height') {
self.$player.options({height: value});
} else if (key == 'showAnnotations') {
that.$element.toggle(1);
} else if (key == 'width') {
self.$player.options({width: value});

81
source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js
View file

@ -81,23 +81,26 @@ Ox.VideoTimelinePlayer = function(options, self) {
if (id == 'timeline') {
// ...
} else if (id == 'followPlayer') {
// ...
self.options.followPlayer = data.checked;
if (!self.options.paused && self.options.followPlayer) {
self.scrollTimeout && clearTimeout(self.scrollTimeout);
scrollToPosition();
}
that.triggerEvent('follow', {
follow: self.options.followPlayer
});
}
Ox.print('DATA:::::::::', data);
}
})
.appendTo(self.$menubar);
self.$content = Ox.Element()
.addClass('OxVideoTimelinePlayer')
.css({
overflow: 'hidden',
overflowY: 'scroll'
})
self.$timelinePlayer = Ox.Element()
.css({overflowX: 'hidden', overflowY: 'scroll'})
.bind({
mousedown: mousedown,
mouseleave: mouseleave,
mousemove: mousemove
mousemove: mousemove,
scroll: scroll
})
.bindEvent({
mousedown: function() {
@ -217,7 +220,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
size: 16
},
{
element: self.$content
element: self.$timelinePlayer
},
{
element: self.$playerbar,
@ -340,7 +343,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
height: self.tileHeight + self.margin + 'px',
overflowX: 'hidden'
})
.appendTo(self.$content);
.appendTo(self.$timelinePlayer);
self.$timelines[i] = [
self.$timeline.clone()
.css({
@ -527,22 +530,45 @@ Ox.VideoTimelinePlayer = function(options, self) {
return $timeline;
}
function scroll() {
if (!self.options.paused && self.options.followPlayer) {
self.scrollTimeout && clearTimeout(self.scrollTimeout);
self.scrollTimeout = setTimeout(function() {
scrollToPosition();
self.scrollTimeout = 0;
}, 2500);
}
}
function scrollToPosition() {
var scrollTop = self.$content.scrollTop(),
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.$content.scrollTop(videoTop[0] - self.margin);
self.$timelinePlayer.stop().animate({
scrollTop: videoTop[0] - self.margin
}, 250);
} else if (videoTop[1] > scrollTop + offset) {
self.$content.scrollTop(videoTop[1] - offset);
self.$timelinePlayer.stop().animate({
scrollTop: videoTop[1] - offset
}, 250);
}
}
function setHeight() {
self.contentHeight = self.options.height - 32;
if (!self.options.paused && self.options.followPlayer) {
self.scrollTimeout && clearTimeout(self.scrollTimeout);
scrollToPosition();
}
}
function setPosition(fromVideo) {
var max, min, videoLines, isPlaying = !self.options.paused;
var isPlaying = !self.options.paused,
max, min, videoLines;
self.options.position = Ox.limit(self.options.position, 0, self.options.duration);
self.frame = Math.floor(self.options.position * self.fps);
videoLines = getVideoLines();
@ -554,11 +580,9 @@ Ox.VideoTimelinePlayer = function(options, self) {
});
});
if (videoLines[1] != self.videoLines[1]) {
self.videoLines[1] = videoLines[1];
self.$frameBox.detach().appendTo(self.$timelines[videoLines[1]][0]);
}
if (videoLines[0] != self.videoLines[0]) {
self.videoLines[0] = videoLines[0];
isPlaying && self.$video.togglePaused();
self.$videoBox.detach().appendTo(self.$timelines[videoLines[0]][0]);
isPlaying && self.$video.togglePaused();
@ -572,7 +596,16 @@ Ox.VideoTimelinePlayer = function(options, self) {
)
});
}
if (
fromVideo && self.options.followPlayer && !self.scrollTimeout
&& videoLines[1] != self.videoLines[1]
&& videoLines[1] > videoLines[0]
) {
self.videoLines = videoLines;
scrollToPosition();
} else {
self.videoLines = videoLines;
}
if (!fromVideo) {
self.$video.options({position: self.options.position});
self.$frame.attr({
@ -581,7 +614,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
scrollToPosition();
}
self.$smallTimeline.options({position: self.options.position});
self.$position.html(formatPosition())
self.$position.html(formatPosition());
}
function setSubtitles() {
@ -632,6 +665,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
self.$lines.pop();
self.$timelines.pop();
}
if (!self.options.paused && self.options.followPlayer) {
self.scrollTimeout && clearTimeout(self.scrollTimeout);
scrollToPosition();
}
self.$smallTimeline.options({width: getSmallTimelineWidth()})
}
@ -662,6 +699,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
function togglePaused(fromVideo) {
self.options.paused = !self.options.paused;
if (!self.options.paused && self.options.followPlayer) {
self.scrollTimeout && clearTimeout(self.scrollTimeout);
scrollToPosition();
}
!fromVideo && self.$video.options({
paused: self.options.paused
});
@ -671,7 +712,9 @@ Ox.VideoTimelinePlayer = function(options, self) {
}
self.setOption = function(key, value) {
if (key == 'width') {
if (key == 'height') {
setHeight();
} else if (key == 'width') {
setWidth();
}
};