0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add 'invertHighlight' option to video player

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

8
source/Ox.UI/js/Video/SmallVideoTimelineImage.js
View file

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

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

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