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

add large timeline to video

Browse source
This commit is contained in:
rolux 2011-05-17 10:58:03 +02:00
commit e10ab53030
3 changed files with 295 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

69
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -85,6 +85,7 @@ Ox.VideoPlayer = function(options, self) {
keepIconVisible: false,
keepLargeTimelineVisible: false,
keepLogoVisible: false,
largeTimeline: false,
logo: '',
logoLink: '',
logoTitle: '',
@ -220,12 +221,14 @@ Ox.VideoPlayer = function(options, self) {
self.results = find(self.options.find);
Ox.print('--setting results--', self.$timeline)
if (self.options.duration) {
// video has loaded
self.$timeline && self.$timeline.options({
results: self.results,
subtitles: self.options.subtitles
});
} else {
self.$largeTimeline && self.$largeTimeline.options({
subtitles: self.options.subtitles
});
}
});
self.options.subtitles = [];
@ -864,6 +867,20 @@ Ox.VideoPlayer = function(options, self) {
}
if (self.options.largeTimeline) {
if (self.options.duration) {
self.$largeTimeline = getLargeTimeline()
} else {
self.$largeTimeline = Ox.Element()
.css({
float: 'left'
})
.html(' ');
}
self.$largeTimeline.appendTo(that);
}
setSizes();
@ -1092,6 +1109,31 @@ Ox.VideoPlayer = function(options, self) {
return subtitle;
}
function getLargeTimeline() {
var $timeline = Ox.LargeVideoTimeline({
duration: self.options.duration,
find: self.options.find,
getImageURL: self.options.largeTimeline,
'in': self.options['in'],
out: self.options.out,
position: self.options.position,
subtitles: self.options.subtitles,
type: 'player',
width: self.options.width
})
.css({
position: 'absolute',
bottom: '12px',
marginLeft: 0,
})
.bindEvent({
position: function(data) {
setPosition(data.position, true);
}
});
return $timeline;
}
function getTimeline() {
var $timeline = Ox.SmallVideoTimeline({
_offset: getTimelineLeft(),
@ -1239,13 +1281,13 @@ Ox.VideoPlayer = function(options, self) {
}
}
if (self.$timeline) {
if (!hadDuration) {
self.$timeline.replaceWith(self.$timeline = getTimeline());
}
self.$timeline.options({
duration: self.options.duration
});
if (!hadDuration) {
self.$timeline && self.$timeline.replaceWith(
self.$timeline = getTimeline()
);
self.$largeTimeline && self.$largeTimeline.replaceWith(
self.$largeTimeline = getLargeTimeline()
);
}
if (self.options.enableKeyboard && self.options.focus == 'load') {
@ -1338,9 +1380,13 @@ Ox.VideoPlayer = function(options, self) {
self.posterIsVisible = false;
}
self.$subtitle && setSubtitle();
// fixme: setPosition may have been called from these timelines
self.$timeline && self.$timeline.options({
position: self.options.position
});
self.$largeTimeline && self.$largeTimeline.options({
position: self.options.position
});
self.$position && self.$position.html(formatPosition());
}
@ -1392,9 +1438,12 @@ Ox.VideoPlayer = function(options, self) {
if (self.$volume) {
self.$volume.animate(getCSS('volume'), ms);
self.$volumeInput.options({
size: Math.min(128, self.width - 56)
size: Math.min(128, self.width - 56) // fixme: should be width in Ox.Range
});
}
self.$largeTimeline && self.$largeTimeline.options({
width: self.width
});
}
function setSubtitle() {