add 'invertHighlight' option to video player

This commit is contained in:
rolux 2013-02-12 11:58:52 +05:30
parent abb6d2a8be
commit 37fd8b2ce9
3 changed files with 20 additions and 10 deletions

View file

@ -21,6 +21,7 @@ Ox.SmallVideoTimeline = function(options, self) {
find: '',
imageURL: '',
'in': 0,
invertHighlight: false,
mode: 'player',
out: 0,
paused: false,
@ -166,6 +167,7 @@ Ox.SmallVideoTimeline = function(options, self) {
duration: self.options.duration,
imageURL: self.options.imageURL,
'in': self.options['in'],
invertHightlight: self.options.invertHighlight,
mode: self.options.mode,
out: self.options.out,
results: self.options.results,

View file

@ -13,6 +13,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
.defaults({
duration: 0,
imageURL: '',
invertHighlight: false,
'in': 0,
mode: 'player',
out: 0,
@ -194,6 +195,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
right = Math.round(
self.options.out / self.options.duration * width
) + 1,
spans = self.options.invertHighlight
? [{left: 0, right: left}, {left: right, right: width + 1}]
: [{left: left, right: right}],
top = 0,
bottom = height,
rgb = self.themeData[
@ -202,7 +206,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
: self.options.state == 'selected' ? 'videoTimelineSelectedGradient'
: 'videoTimelineDefaultGradient'
];
Ox.loop(left, right, function(x) {
spans.forEach(function(span) {
Ox.loop(span.left, span.right, function(x) {
Ox.loop(top, bottom, function(y) {
var alpha = self.options.mode == 'editor'
&& (y == top || y == bottom - 1) ? 255 : 128,
@ -214,6 +219,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
data[index + 3] = alpha;
});
});
});
} else if (image == 'subtitles') {
var bottom = self.options.mode == 'player' ? 14 : 15;
self.options.subtitles.forEach(function(subtitle) {

View file

@ -33,6 +33,7 @@ Ox.VideoPlayer <f> Generic Video Player
fullscreen <b|false> If true, video is in fullscreen
height <n|144> Height in px (excluding external controls)
in <n> In point (sec)
invertHighlight <b|false> If true, invert selection highlight on timeline
keepIconVisible <b|false> If true, play icon stays visible after mouseleave
keepLargeTimelineVisible <b|false> If true, large timeline stays visible after mouseleave
keepLogoVisible <b|false> If true, logo stays visible after mouseleave
@ -1492,6 +1493,7 @@ Ox.VideoPlayer = function(options, self) {
find: self.options.find,
imageURL: self.options.timeline,
'in': self.options['in'],
invertHighlight: self.options.invertHighlight,
mode: 'player',
out: self.options.out,
paused: self.options.paused,