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: '',
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,

26
source/Ox.UI/js/Video/SmallVideoTimelineImage.js
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,16 +206,18 @@ Ox.SmallVideoTimelineImage = function(options, self) {
: self.options.state == 'selected' ? 'videoTimelineSelectedGradient'
: 'videoTimelineDefaultGradient'
];
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
var alpha = self.options.mode == 'editor'
&& (y == top || y == bottom - 1) ? 255 : 128,
color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
index = x * 4 + y * 4 * width;
data[index] = color[0];
data[index + 1] = color[1];
data[index + 2] = color[2];
data[index + 3] = alpha;
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,
color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
index = x * 4 + y * 4 * width;
data[index] = color[0];
data[index + 1] = color[1];
data[index + 2] = color[2];
data[index + 3] = alpha;
});
});
});
} else if (image == 'subtitles') {

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
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,