oxjs/source/UI/js/Video/SmallVideoTimeline.js

278 lines
8.9 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-01-10 14:49:28 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.SmallVideoTimeline <f> Small video timeline
options <o> Options
self <o> Shared private variable
2012-05-31 10:32:54 +00:00
([options[, self]]) -> <o:Ox.Element> Small video timeline
2012-06-17 22:38:26 +00:00
position <!> position
2012-01-10 14:49:28 +00:00
@*/
2011-05-15 16:18:58 +00:00
Ox.SmallVideoTimeline = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
2012-01-10 14:49:28 +00:00
// _offset is a hack for cases where all these position: absolute
// elements have to go into a float: left
// FIXME: possibly unused and unneeded
2012-01-10 14:49:28 +00:00
_offset: 0,
2011-12-19 21:13:11 +00:00
disabled: false,
2011-05-15 16:18:58 +00:00
duration: 0,
2011-05-17 18:04:26 +00:00
find: '',
imageURL: '',
2011-05-15 16:18:58 +00:00
'in': 0,
invertHighlight: false,
mode: 'player',
2011-05-15 16:18:58 +00:00
out: 0,
2011-05-15 18:50:05 +00:00
paused: false,
results: [],
showInToOut: false,
2011-05-15 18:50:05 +00:00
showMilliseconds: 0,
2012-01-09 20:25:38 +00:00
state: 'default',
subtitles: [],
2011-05-15 18:50:05 +00:00
width: 256
2011-05-15 16:18:58 +00:00
})
.options(options || {})
2012-05-28 19:35:41 +00:00
.update({
duration: function() {
self.$image.options({duration: self.options.duration});
},
imageURL: function() {
self.$image.options({imageURL: self.options.imageURL});
},
2012-05-28 19:35:41 +00:00
'in': function() {
self.$image.options({'in': self.options['in']});
self.options.mode == 'editor' && setPointMarker('in');
},
out: function() {
self.$image.options({out: self.options.out});
self.options.mode == 'editor' && setPointMarker('out');
},
paused: function() {
self.$positionMarker[
self.options.paused ? 'addClass' : 'removeClass'
]('OxPaused');
},
position: function() {
setPositionMarker();
},
results: function() {
self.$image.options({results: self.options.results});
},
state: function() {
self.$image.options({state: self.options.state});
},
subtitles: function() {
self.$image.options({subtitles: self.options.subtitles});
},
width: function() {
setWidth();
}
})
2011-05-15 16:18:58 +00:00
.addClass('OxSmallVideoTimeline')
2011-05-15 18:50:05 +00:00
.css(Ox.extend({
2011-05-15 16:18:58 +00:00
width: self.options.width + 'px'
}, self.options.mode == 'player' ? {
2011-05-15 18:50:05 +00:00
background: 'rgb(0, 0, 0)',
borderRadius: '8px'
} : {}));
2011-05-15 16:18:58 +00:00
self.height = self.options.mode == 'player' ? 16 : 24;
self.imageLeft = self.options.mode == 'player' ? 8 : 4;
2011-05-15 18:50:05 +00:00
self.imageWidth = self.options.width -
(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;
2011-05-15 16:18:58 +00:00
that.css({
height: self.height + 'px'
});
self.$image = getTimelineImage().appendTo(that);
2011-05-15 16:18:58 +00:00
2011-05-17 18:44:53 +00:00
self.$interface = Ox.Element({
tooltip: getTooltip
})
2011-05-15 18:50:05 +00:00
.addClass('OxInterface')
.css({
left: self.interfaceLeft + 'px',
top: self.interfaceTop + 'px',
width: self.interfaceWidth + 'px',
2012-05-26 15:48:19 +00:00
height: '20px'
2011-05-15 18:50:05 +00:00
})
.bindEvent({
2011-09-17 11:49:29 +00:00
drag: function(data) {
mousedown(data);
},
2011-09-17 11:49:29 +00:00
dragend: function(data) {
self.triggered = false;
2011-09-17 11:49:29 +00:00
mousedown(data);
2012-01-10 14:49:28 +00:00
},
mousedown: mousedown,
touchend: function(data) {
self.triggered = false;
mousedown(data);
},
touchmove: mousedown,
touchstart: mousedown
2011-05-15 18:50:05 +00:00
})
.appendTo(that);
2011-05-15 16:18:58 +00:00
2011-05-17 18:44:53 +00:00
self.$interface.$tooltip.css({
textAlign: 'center'
});
if (self.options.mode == 'player') {
2011-05-15 18:50:05 +00:00
self.$positionMarker = $('<div>')
.addClass('OxMarkerPlay' + (self.options.paused ? ' OxPaused' : ''))
.append($('<div>').append($('<div>')))
.appendTo(that);
2011-05-15 18:50:05 +00:00
} else {
self.$positionMarker = $('<img>')
.addClass('OxMarkerPosition')
2011-05-15 16:18:58 +00:00
.attr({
2014-09-26 12:31:20 +00:00
src: Ox.UI.getImageURL('markerPosition')
2011-05-15 16:18:58 +00:00
})
.appendTo(that);
2011-05-15 18:50:05 +00:00
}
setPositionMarker();
2011-05-15 16:18:58 +00:00
if (self.options.mode == 'editor') {
2011-05-15 18:50:05 +00:00
self.$pointMarker = {};
['in', 'out'].forEach(function(point) {
2011-09-02 00:32:23 +00:00
var titlecase = Ox.toTitleCase(point);
2011-05-15 18:50:05 +00:00
self.$pointMarker[point] = $('<img>')
.addClass('OxMarkerPoint' + titlecase)
2011-05-15 18:50:05 +00:00
.attr({
2014-09-26 12:31:20 +00:00
src: Ox.UI.getImageURL('marker' + titlecase)
2011-05-15 18:50:05 +00:00
})
.appendTo(that);
2011-05-15 18:50:05 +00:00
setPointMarker(point);
});
}
2011-05-15 16:18:58 +00:00
function getLeft() {
return (
self.options.showInToOut
? self.options.position - self.options['in']
: self.options.position
) * self.imageWidth / self.options.duration;
}
2011-05-15 18:50:05 +00:00
function getPosition(e) {
2011-11-03 15:42:41 +00:00
var position = (
2012-01-17 17:56:26 +00:00
(e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left)
- (self.options.mode == 'player' ? 8 : 0)
2011-05-15 18:50:05 +00:00
) * self.options.duration / self.imageWidth;
position = Ox.limit(position, 0, self.options.duration);
if (self.options.showInToOut) {
position += self.options['in'];
}
return position;
2011-05-15 18:50:05 +00:00
}
function getSubtitle(position) {
var subtitle = '';
Ox.forEach(self.options.subtitles, function(v) {
if (v['in'] <= position && v.out > position) {
subtitle = v;
2012-07-05 08:58:08 +00:00
return false; // break
2011-05-15 18:50:05 +00:00
}
});
return subtitle;
}
function getTimelineImage() {
return (self.options.imageURL ? Ox.SmallVideoTimelineImage({
duration: self.options.duration,
imageURL: self.options.imageURL,
'in': self.options['in'],
2013-02-12 07:03:43 +00:00
invertHighlight: self.options.invertHighlight,
mode: self.options.mode,
out: self.options.out,
results: self.options.results,
showInToOut: self.options.showInToOut,
subtitles: self.options.subtitles,
2012-01-09 20:25:38 +00:00
state: self.options.state,
type: self.options.type,
width: self.imageWidth
}) : Ox.Element()).css({
position: 'absolute',
left: self.imageLeft + 'px',
width: self.imageWidth + 'px'
});
}
2011-05-17 18:44:53 +00:00
function getTooltip(e) {
var position = getPosition(e),
subtitle = getSubtitle(position);
2012-01-17 17:56:26 +00:00
return subtitle
? '<span class=\'OxBright\'>' + Ox.highlight(
subtitle.text, self.options.find, 'OxHighlight'
2012-06-03 08:41:18 +00:00
).replace(/\n/g, '<br/>') + '</span><br/>' + Ox.formatDuration(
2012-01-17 17:56:26 +00:00
subtitle['in'], self.options.showMilliseconds
) + ' - ' + Ox.formatDuration(
subtitle['out'], self.options.showMilliseconds
)
: Ox.formatDuration(position, self.options.showMilliseconds);
2011-05-17 18:44:53 +00:00
}
2011-05-15 18:50:05 +00:00
function mousedown(e) {
2011-12-19 21:13:11 +00:00
if (!self.options.disabled && $(e.target).is('.OxInterface')) {
2011-05-15 18:50:05 +00:00
self.options.position = getPosition(e);
setPositionMarker();
if (!self.triggered) {
that.triggerEvent('position', {
position: self.options.position
});
self.triggered = true;
setTimeout(function() {
self.triggered = false;
}, 250);
}
}
}
function setPointMarker(point) {
self.$pointMarker[point].css({
left: self.imageLeft + Math.round(getLeft()) + 'px'
2011-05-15 18:50:05 +00:00
});
}
function setPositionMarker() {
self.$positionMarker.css({
left: self.interfaceLeft + Math.round(getLeft())
- (self.options.mode == 'editor' ? 5 : 0)
+ self.options._offset + 'px'
2011-05-15 18:50:05 +00:00
});
}
function setWidth() {
self.imageWidth = self.options.width -
(self.options.mode == 'player' ? 16 : 8);
self.interfaceWidth = self.options.mode == 'player' ?
self.options.width : self.imageWidth;
2011-05-15 18:50:05 +00:00
that.css({
width: self.options.width + 'px'
});
self.$image.options({
width: self.imageWidth
}).css({
2011-05-15 18:50:05 +00:00
width: self.imageWidth + 'px'
});
self.$interface.css({
width: self.interfaceWidth + 'px'
});
setPositionMarker();
if (self.options.mode == 'editor') {
2011-05-15 18:50:05 +00:00
setPointMarker('in');
setPointMarker('out');
}
}
2011-05-15 16:18:58 +00:00
return that;
};