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

rename various options of video widgets to allow for different timeline types

Browse source
This commit is contained in:
rlx 2012-04-18 07:43:32 +00:00
commit 132e8d2207
10 changed files with 90 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

45
source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
View file

@ -16,34 +16,34 @@ Ox.SmallVideoTimeline = function(options, self) {
disabled: false,
duration: 0,
find: '',
imageURL: '',
'in': 0,
mode: 'player',
out: 0,
paused: false,
results: [],
showMilliseconds: 0,
state: 'default',
subtitles: [],
timeline: '',
type: 'player',
width: 256
})
.options(options || {})
.addClass('OxSmallVideoTimeline')
.css(Ox.extend({
width: self.options.width + 'px'
}, self.options.type == 'player' ? {
}, self.options.mode == 'player' ? {
background: 'rgb(0, 0, 0)',
borderRadius: '8px'
} : {}));
self.height = self.options.type == 'player' ? 16 : 24;
self.imageLeft = self.options.type == 'player' ? 8 : 4;
self.height = self.options.mode == 'player' ? 16 : 24;
self.imageLeft = self.options.mode == 'player' ? 8 : 4;
self.imageWidth = self.options.width -
(self.options.type == 'player' ? 16 : 8)
self.imageHeight = self.options.type == 'player' ? 16 : 18;
self.interfaceLeft = self.options.type == 'player' ? 0 : 4;
self.interfaceTop = self.options.type == 'player' ? 0 : 2;
self.interfaceWidth = self.options.type == 'player' ? self.options.width : self.imageWidth;
(self.options.mode == 'player' ? 16 : 8)
self.imageHeight = self.options.mode == 'player' ? 16 : 18;
self.interfaceLeft = self.options.mode == 'player' ? 0 : 4;
self.interfaceTop = self.options.mode == 'player' ? 0 : 2;
self.interfaceWidth = self.options.mode == 'player' ? self.options.width : self.imageWidth;
that.css({
height: self.height + 'px'
@ -77,7 +77,7 @@ Ox.SmallVideoTimeline = function(options, self) {
textAlign: 'center'
});
if (self.options.type == 'player') {
if (self.options.mode == 'player') {
self.$positionMarker = $('<div>')
.addClass('OxMarkerPlay' + (self.options.paused ? ' OxPaused' : ''))
.append($('<div>').append($('<div>')))
@ -92,7 +92,7 @@ Ox.SmallVideoTimeline = function(options, self) {
}
setPositionMarker();
if (self.options.type == 'editor') {
if (self.options.mode == 'editor') {
self.$pointMarker = {};
['in', 'out'].forEach(function(point) {
var titlecase = Ox.toTitleCase(point);
@ -109,7 +109,7 @@ Ox.SmallVideoTimeline = function(options, self) {
function getPosition(e) {
var position = (
(e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left)
- (self.options.type == 'player' ? 8 : 0)
- (self.options.mode == 'player' ? 8 : 0)
) * self.options.duration / self.imageWidth;
return Ox.limit(position, 0, self.options.duration);
}
@ -128,14 +128,15 @@ Ox.SmallVideoTimeline = function(options, self) {
function getTimelineImage() {
return Ox.SmallVideoTimelineImage({
duration: self.options.duration,
imageURL: self.options.imageURL,
'in': self.options['in'],
mode: self.options.mode,
out: self.options.out,
results: self.options.results,
subtitles: self.options.subtitles,
state: self.options.state,
timeline: self.options.timeline,
width: self.imageWidth,
type: self.options.type
type: self.options.type,
width: self.imageWidth
})
.css({
position: 'absolute',
@ -187,14 +188,14 @@ Ox.SmallVideoTimeline = function(options, self) {
self.$positionMarker.css({
left: self.interfaceLeft + Math.round(
self.options.position * self.imageWidth / self.options.duration
) - (self.options.type == 'editor' ? 5 : 0) + self.options._offset + 'px'
) - (self.options.mode == 'editor' ? 5 : 0) + self.options._offset + 'px'
});
}
function setWidth() {
self.imageWidth = self.options.width -
(self.options.type == 'player' ? 16 : 8);
self.interfaceWidth = self.options.type == 'player' ?
(self.options.mode == 'player' ? 16 : 8);
self.interfaceWidth = self.options.mode == 'player' ?
self.options.width : self.imageWidth;
that.css({
width: self.options.width + 'px'
@ -208,7 +209,7 @@ Ox.SmallVideoTimeline = function(options, self) {
width: self.interfaceWidth + 'px'
});
setPositionMarker();
if (self.options.type == 'editor') {
if (self.options.mode == 'editor') {
setPointMarker('in');
setPointMarker('out');
}
@ -219,10 +220,10 @@ Ox.SmallVideoTimeline = function(options, self) {
self.$image.options({duration: value});
} else if (key == 'in') {
self.$image.options({'in': value});
self.options.type == 'editor' && setPointMarker('in');
self.options.mode == 'editor' && setPointMarker('in');
} else if (key == 'out') {
self.$image.options({out: value});
self.options.type == 'editor' && setPointMarker('out');
self.options.mode == 'editor' && setPointMarker('out');
} else if (key == 'paused') {
self.$positionMarker[
self.options.paused ? 'addClass' : 'removeClass'