sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

enable timeline types

Browse source
This commit is contained in:
rlx 2012-06-15 13:20:07 +00:00
commit 856ea3b1d3
7 changed files with 134 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -45,6 +45,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
togglePaused();
},
position: setPosition,
timeline: function() {
self.$menuButton.checkItem(self.options.timeline);
updateTimeline();
},
width: setWidth
});
@ -73,8 +77,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
self.options.timelines,
function(timeline) {
return Ox.extend({
checked: timeline.id == self.options.timeline,
disabled: true
checked: timeline.id == self.options.timeline
}, timeline);
}
)},
@ -95,7 +98,11 @@ Ox.VideoTimelinePlayer = function(options, self) {
change: function(data) {
var id = data.id;
if (id == 'timeline') {
// data.checked[0].id
self.options.timeline = data.checked[0].id;
updateTimeline();
that.triggerEvent('timeline', {
timeline: self.options.timeline
});
} else if (id == 'followPlayer') {
self.options.followPlayer = data.checked;
if (!self.options.paused && self.options.followPlayer) {
@ -268,7 +275,6 @@ Ox.VideoTimelinePlayer = function(options, self) {
self.$lines = [];
self.$timelines = [];
self.$interfaces = [];
self.$timeline = renderTimeline();
//setSubtitles();
@ -277,7 +283,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
});
Ox.last(self.$lines).css({
height: self.tileHeight + 1.5 * self.margin + 'px'
});
});
self.$frameBox = $('<div>')
.css({
@ -397,12 +403,12 @@ Ox.VideoTimelinePlayer = function(options, self) {
})
.appendTo(self.$timelinePlayer);
self.$timelines[i] = [
self.$timeline.clone()
self.$timeline.clone(true)
.css({
width: self.frame + self.videoWidth + 'px',
marginLeft: -i * self.contentWidth + 'px'
}),
self.$timeline.clone()
self.$timeline.clone(true)
.css({
marginLeft: -i * self.contentWidth + self.videoWidth - 1 + 'px'
})
@ -581,30 +587,29 @@ Ox.VideoTimelinePlayer = function(options, self) {
height: self.tileHeight + self.margin + 'px',
overflow: 'hidden'
});
Ox.loop(self.tiles, function(i) {
$('<img>')
.attr({
src: self.options.getLargeTimelineURL(self.options.timeline, i)
})
.css({
position: 'absolute',
left: i * self.tileWidth + 'px',
top: self.margin / 2 + 'px'
})
.appendTo($timeline);
});
$('<div>')
.addClass('OxTimelineInterface')
Ox.loop(self.tiles, function(i) {
$('<img>')
.attr({
src: self.options.getLargeTimelineURL(self.options.timeline, i)
})
.css({
position: 'absolute',
left: 0,
top: self.margin / 2 + 'px',
width: self.frames + 'px',
height: self.tileHeight + 'px'
//background: 'rgba(255, 0, 0, 0.5)'
left: i * self.tileWidth + 'px',
top: self.margin / 2 + 'px'
})
.data({index: i})
.appendTo($timeline);
});
$('<div>')
.addClass('OxTimelineInterface')
.css({
position: 'absolute',
left: 0,
top: self.margin / 2 + 'px',
width: self.frames + 'px',
height: self.tileHeight + 'px'
})
.appendTo($timeline);
return $timeline;
}
@ -715,6 +720,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
});
}
function setTimeline() {
self.$timelinePlayer.empty();
}
function setVolume() {
self.$video.options({volume: self.options.volume});
that.triggerEvent('volume', {
@ -807,6 +816,17 @@ Ox.VideoTimelinePlayer = function(options, self) {
}
}
function updateTimeline() {
self.$timelinePlayer.find('img').each(function() {
var $this = $(this);
$this.attr({
src: self.options.getLargeTimelineURL(
self.options.timeline, $this.data('index')
)
});
});
}
/*@
togglePaused <f> toggle paused
() -> <o> toggle paused