0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki 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
parent baa9e9be61
commit 132e8d2207
10 changed files with 90 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -348,7 +348,7 @@ Ox.AnnotationPanel = function(options, self) {
), ),
style: 'square', style: 'square',
title: 'set', title: 'set',
tooltip: 'Actions and Settings', tooltip: 'Options',
type: 'image' type: 'image'
}) })
.css({float: 'left'}) .css({float: 'left'})

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

@ -17,6 +17,7 @@ Ox.BlockVideoTimeline = function(options, self) {
showPointMarkers: false, showPointMarkers: false,
state: 'default', state: 'default',
subtitles: [], subtitles: [],
type: '',
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
@ -54,14 +55,15 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$image = Ox.SmallVideoTimelineImage({ self.$image = Ox.SmallVideoTimelineImage({
duration: self.options.duration, duration: self.options.duration,
editing: self.options.editing, editing: self.options.editing,
imageURL: self.options.getImageURL,
'in': self.options['in'], 'in': self.options['in'],
mode: 'editor',
out: self.options.out, out: self.options.out,
results: self.options.results, results: self.options.results,
state: self.options.state, state: self.options.state,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
timeline: self.options.getImageURL, type: self.options.type,
width: Math.round(self.options.duration), width: Math.round(self.options.duration)
type: 'editor'
}); });
Ox.loop(self.lines, function(i) { Ox.loop(self.lines, function(i) {

5
source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
View file

@ -24,9 +24,8 @@ Ox.LargeVideoTimeline = function(options, self) {
matches: [], matches: [],
out: 0, out: 0,
position: 0, position: 0,
style: 'default', // fixme: there are no different styles yet
subtitles: [], subtitles: [],
type: 'player', type: '',
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
@ -158,7 +157,7 @@ Ox.LargeVideoTimeline = function(options, self) {
if (!self.$tiles[i]) { if (!self.$tiles[i]) {
self.$tiles[i] = $('<img>') self.$tiles[i] = $('<img>')
.attr({ .attr({
src: self.options.getImageURL(i) src: self.options.getImageURL(self.options.type, i)
}) })
.css({ .css({
left: (i * self.tileWidth) + 'px' left: (i * self.tileWidth) + 'px'

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

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

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

@ -6,14 +6,15 @@ Ox.SmallVideoTimelineImage = function(options, self) {
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
duration: 0, duration: 0,
imageURL: '',
'in': 0, 'in': 0,
mode: 'player',
out: 0, out: 0,
results: [], results: [],
state: 'default', state: 'default',
subtitles: [], subtitles: [],
timeline: '', type: '',
width: 256, width: 256,
type: 'player'
}) })
.options(options || {}) .options(options || {})
.css({ .css({
@ -21,24 +22,24 @@ Ox.SmallVideoTimelineImage = function(options, self) {
width: self.options.width + 'px' width: self.options.width + 'px'
}); });
self.images = Ox.isString(self.options.timeline) ? self.images = Ox.isString(self.options.imageURL) ?
1 : Math.ceil(self.options.duration / 3600); 1 : Math.ceil(self.options.duration / 3600);
self.imageWidth = Ox.isString(self.options.timeline) ? self.imageWidth = Ox.isString(self.options.imageURL) ?
1920 : Math.round(self.options.duration); 1920 : Math.round(self.options.duration);
self.height = self.options.type == 'player' ? 16 : 24; self.height = self.options.mode == 'player' ? 16 : 24;
self.imageHeight = self.options.type == 'player' ? 16 : 18; self.imageHeight = self.options.mode == 'player' ? 16 : 18;
self.imageTop = self.options.type == 'player' ? 0 : 3; self.imageTop = self.options.mode == 'player' ? 0 : 3;
self.timelineTop = self.options.type == 'player' ? 0 : 4; self.timelineTop = self.options.mode == 'player' ? 0 : 4;
self.theme = Ox.Theme(); self.theme = Ox.Theme();
that.css({ that.css({
height: self.height + 'px' height: self.height + 'px'
}); });
if (Ox.isString(self.options.timeline)) { if (Ox.isString(self.options.imageURL)) {
self.$timeline = $('<img>') self.$timeline = $('<img>')
.attr({ .attr({
src: self.options.timeline src: self.options.imageURL
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
@ -51,7 +52,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
Ox.loop(self.images, function(i) { Ox.loop(self.images, function(i) {
$('<img>') $('<img>')
.attr({ .attr({
src: self.options.timeline(i) src: self.options.imageURL(self.options.type, i)
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
@ -124,7 +125,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
) + 1; ) + 1;
Ox.loop(left, right, function(x) { Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) { Ox.loop(top, bottom, function(y) {
var alpha = self.options.type == 'editor' var alpha = self.options.mode == 'editor'
&& (y == top || y == bottom - 1) ? 255 : 128, && (y == top || y == bottom - 1) ? 255 : 128,
color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1 color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
? [0, 0, 0] : [255, 255, 0], ? [0, 0, 0] : [255, 255, 0],
@ -151,7 +152,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
: [[32, 32, 32], [224, 224, 224]]; : [[32, 32, 32], [224, 224, 224]];
Ox.loop(left, right, function(x) { Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) { Ox.loop(top, bottom, function(y) {
var alpha = self.options.type == 'editor' var alpha = self.options.mode == 'editor'
&& (y == top || y == bottom - 1) ? 255 : 128, && (y == top || y == bottom - 1) ? 255 : 128,
color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1], color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
index = x * 4 + y * 4 * width; index = x * 4 + y * 4 * width;
@ -162,7 +163,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
}); });
}); });
} else if (image == 'subtitles') { } else if (image == 'subtitles') {
var bottom = self.options.type == 'player' ? 14 : 15; var bottom = self.options.mode == 'player' ? 14 : 15;
self.options.subtitles.forEach(function(subtitle) { self.options.subtitles.forEach(function(subtitle) {
var left = Math.round( var left = Math.round(
subtitle['in'] / self.options.duration * self.imageWidth subtitle['in'] / self.options.duration * self.imageWidth

33
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -34,8 +34,8 @@ Ox.VideoEditor = function(options, self) {
find: '', find: '',
fps: 25, fps: 25,
getFrameURL: null, getFrameURL: null,
getLargeTimelineImageURL: null, getLargeTimelineURL: null,
getSmallTimelineImageURL: null, getSmallTimelineURL: null,
'in': 0, 'in': 0,
height: 0, height: 0,
layers: [], layers: [],
@ -53,6 +53,8 @@ Ox.VideoEditor = function(options, self) {
showLayers: {}, showLayers: {},
showUsers: false, showUsers: false,
subtitles: [], subtitles: [],
timeline: '',
timelines: [],
tooltips: false, tooltips: false,
videoRatio: 16/9, videoRatio: 16/9,
videoSize: 'small', videoSize: 'small',
@ -300,14 +302,14 @@ Ox.VideoEditor = function(options, self) {
cuts: self.options.cuts, cuts: self.options.cuts,
duration: self.options.duration, duration: self.options.duration,
find: self.options.find, find: self.options.find,
getImageURL: self.options.getLargeTimelineImageURL, getImageURL: self.options.getLargeTimelineURL,
id: 'timelineLarge', id: 'timelineLarge',
'in': self.options['in'], 'in': self.options['in'],
//matches: self.options.matches, //matches: self.options.matches,
out: self.options.out, out: self.options.out,
position: self.options.position, position: self.options.position,
subtitles: self.options.enableSubtitles ? self.options.subtitles : [], subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
type: 'editor', type: self.options.timeline,
width: self.sizes.timeline[0].width width: self.sizes.timeline[0].width
}) })
.css({ .css({
@ -325,7 +327,7 @@ Ox.VideoEditor = function(options, self) {
cuts: self.options.cuts, cuts: self.options.cuts,
duration: self.options.duration, duration: self.options.duration,
find: self.options.find, find: self.options.find,
getImageURL: self.options.getSmallTimelineImageURL, getImageURL: self.options.getSmallTimelineURL,
id: 'timelineSmall', id: 'timelineSmall',
'in': self.options['in'], 'in': self.options['in'],
out: self.options.out, out: self.options.out,
@ -334,6 +336,7 @@ Ox.VideoEditor = function(options, self) {
showPointMarkers: true, showPointMarkers: true,
state: self.options.selected ? 'selected' : 'default', state: self.options.selected ? 'selected' : 'default',
subtitles: self.options.enableSubtitles ? self.options.subtitles : [], subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
type: self.options.timeline,
videoId: self.options.videoId, videoId: self.options.videoId,
width: self.sizes.timeline[1].width width: self.sizes.timeline[1].width
}) })
@ -432,10 +435,7 @@ Ox.VideoEditor = function(options, self) {
self.$menuButton = Ox.MenuButton({ self.$menuButton = Ox.MenuButton({
items: Ox.merge( items: Ox.merge(
[ [
{group: 'size', min: 1, max: 1, items: [ {id: 'size', title: 'Large Player', checked: self.options.videoSize == 'large'},
{id: 'small', title: 'Small Player', checked: self.options.videoSize == 'small'},
{id: 'large', title: 'Large Player', checked: self.options.videoSize == 'large'}
]},
{}, {},
{group: 'resolution', min: 1, max: 1, items: self.resolutions} {group: 'resolution', min: 1, max: 1, items: self.resolutions}
], ],
@ -444,6 +444,17 @@ Ox.VideoEditor = function(options, self) {
{id: 'subtitles', title: 'Show Subtitles', checked: self.options.enableSubtitles} {id: 'subtitles', title: 'Show Subtitles', checked: self.options.enableSubtitles}
] : [], ] : [],
[ [
{},
{id: 'timelines', title: 'Timeline', disabled: true},
{group: 'timeline', min: 1, max: 1, items: Ox.map(
self.options.timelines,
function(timeline) {
return Ox.extend({
checked: timeline.id == self.options.timeline,
disabled: true
}, timeline);
}
)},
{}, {},
{id: 'downloadVideo', title: 'Download Video...', disabled: !self.options.enableDownload }, {id: 'downloadVideo', title: 'Download Video...', disabled: !self.options.enableDownload },
{id: 'downloadSelection', title: 'Download Selection...', disabled: !self.options.enableDownload}, {id: 'downloadSelection', title: 'Download Selection...', disabled: !self.options.enableDownload},
@ -465,7 +476,7 @@ Ox.VideoEditor = function(options, self) {
), ),
style: 'square', style: 'square',
title: 'set', title: 'set',
tooltip: 'Actions and Settings', tooltip: 'Options',
type: 'image' type: 'image'
}) })
.css({float: 'left'}) .css({float: 'left'})
@ -509,6 +520,8 @@ Ox.VideoEditor = function(options, self) {
toggleSize(); toggleSize();
} else if (id == 'subtitles') { } else if (id == 'subtitles') {
toggleSubtitles(); toggleSubtitles();
} else if (id == 'timeline') {
// data.checked[0].id
} }
}, },
hide: function() { hide: function() {

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

@ -30,6 +30,7 @@ Ox.VideoPanel = function(options, self) {
enableSubtitles: false, enableSubtitles: false,
find: '', find: '',
fullscreen: false, fullscreen: false,
getLargeTimelineURL: null,
height: 0, height: 0,
'in': 0, 'in': 0,
layers: [], layers: [],
@ -49,7 +50,9 @@ Ox.VideoPanel = function(options, self) {
showLayers: {}, showLayers: {},
showTimeline: true, showTimeline: true,
showUsers: false, showUsers: false,
smallTimelineURL: '',
subtitles: [], subtitles: [],
timeline: '',
tooltips: false, tooltips: false,
video: '', video: '',
volume: 1, volume: 1,
@ -103,7 +106,7 @@ Ox.VideoPanel = function(options, self) {
resolution: self.options.resolution, resolution: self.options.resolution,
scaleToFill: self.options.scaleToFill, scaleToFill: self.options.scaleToFill,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
timeline: self.options.timeline, timeline: self.options.smallTimelineURL,
video: self.options.video, video: self.options.video,
volume: self.options.volume, volume: self.options.volume,
width: getPlayerWidth() width: getPlayerWidth()
@ -159,10 +162,11 @@ Ox.VideoPanel = function(options, self) {
self.$timeline = Ox.LargeVideoTimeline({ self.$timeline = Ox.LargeVideoTimeline({
duration: self.options.duration, duration: self.options.duration,
find: self.options.find, find: self.options.find,
getImageURL: self.options.getTimelineImageURL, getImageURL: self.options.getLargeTimelineURL,
position: self.options.position, position: self.options.position,
subtitles: self.options.enableSubtitles ? self.options.subtitles : [], subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
videoId: self.options.videoId, videoId: self.options.videoId,
type: self.options.timeline,
width: getTimelineWidth() width: getTimelineWidth()
}) })
.css({left: '4px', top: '4px'}) .css({left: '4px', top: '4px'})

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

@ -1397,15 +1397,15 @@ Ox.VideoPlayer = function(options, self) {
disabled: !self.options.enableTimeline, disabled: !self.options.enableTimeline,
duration: self.options.duration, duration: self.options.duration,
find: self.options.find, find: self.options.find,
imageURL: self.options.timeline,
'in': self.options['in'], 'in': self.options['in'],
mode: 'player',
out: self.options.out, out: self.options.out,
paused: self.options.paused, paused: self.options.paused,
position: self.options.position, position: self.options.position,
results: self.results, results: self.results,
showMilliseconds: self.options.showMilliseconds, showMilliseconds: self.options.showMilliseconds,
subtitles: self.options.enableSubtitles ? self.options.subtitles : [], subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
timeline: self.options.timeline,
type: 'player',
width: getTimelineWidth() width: getTimelineWidth()
}) })
.css({float: 'left'}) .css({float: 'left'})

11
source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js
View file

@ -23,7 +23,7 @@ Ox.VideoTimelinePanel = function(options, self) {
duration: 0, duration: 0,
followPlayer: false, followPlayer: false,
getFrameURL: null, getFrameURL: null,
getTimelineImageURL: null, getLargeTimelineURL: null,
height: 0, height: 0,
layers: [], layers: [],
loop: false, // fixme: used? loop: false, // fixme: used?
@ -38,9 +38,9 @@ Ox.VideoTimelinePanel = function(options, self) {
showAnnotationsMap: false, showAnnotationsMap: false,
showLayers: {}, showLayers: {},
showUsers: false, showUsers: false,
smallTimelineURL: '',
subtitles: [], subtitles: [],
timeline: '', timeline: '',
timelineImageURL: '',
timelines: [], timelines: [],
video: '', video: '',
volume: 1, volume: 1,
@ -69,15 +69,15 @@ Ox.VideoTimelinePanel = function(options, self) {
duration: self.options.duration, duration: self.options.duration,
followPlayer: self.options.followPlayer, followPlayer: self.options.followPlayer,
getFrameURL: self.options.getFrameURL, getFrameURL: self.options.getFrameURL,
getTimelineImageURL: self.options.getTimelineImageURL, getLargeTimelineURL: self.options.getLargeTimelineURL,
height: self.options.height, height: self.options.height,
muted: self.options.muted, muted: self.options.muted,
paused: true, paused: true,
position: self.options.position, position: self.options.position,
resolution: self.options.resolution, resolution: self.options.resolution,
smallTimelineURL: self.options.smallTimelineURL,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
timeline: self.options.timeline, timeline: self.options.timeline,
timelineImageURL: self.options.timelineImageURL,
timelines: self.options.timelines, timelines: self.options.timelines,
video: self.options.video, video: self.options.video,
videoRatio: self.options.videoRatio, videoRatio: self.options.videoRatio,
@ -100,6 +100,9 @@ Ox.VideoTimelinePanel = function(options, self) {
position: function(data) { position: function(data) {
setPosition(data.position); setPosition(data.position);
}, },
timeline: function(data) {
that.triggerEvent('timeline', data);
},
volume: function(data) { volume: function(data) {
that.triggerEvent('volume', data); that.triggerEvent('volume', data);
} }

12
source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js
View file

@ -12,7 +12,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
find: '', find: '',
followPlayer: false, followPlayer: false,
getFrameURL: null, getFrameURL: null,
getTimelineImageURL: null, getLargeTimelineURL: null,
height: 0, height: 0,
'in': 0, 'in': 0,
matches: [], matches: [],
@ -21,9 +21,9 @@ Ox.VideoTimelinePlayer = function(options, self) {
paused: false, paused: false,
position: 0, position: 0,
showMilliseconds: false, showMilliseconds: false,
smallTimelineURL: '',
subtitles: [], subtitles: [],
timeline: '', timeline: '',
timelineImageURL: '',
timelines: [], timelines: [],
video: '', video: '',
videoRatio: 1, videoRatio: 1,
@ -79,7 +79,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
change: function(data) { change: function(data) {
var id = data.id; var id = data.id;
if (id == 'timeline') { if (id == 'timeline') {
// ... // data.checked[0].id
} else if (id == 'followPlayer') { } else if (id == 'followPlayer') {
self.options.followPlayer = data.checked; self.options.followPlayer = data.checked;
if (!self.options.paused && self.options.followPlayer) { if (!self.options.paused && self.options.followPlayer) {
@ -385,11 +385,11 @@ Ox.VideoTimelinePlayer = function(options, self) {
function getSmallTimeline() { function getSmallTimeline() {
var $timeline = Ox.SmallVideoTimeline({ var $timeline = Ox.SmallVideoTimeline({
duration: self.options.duration, duration: self.options.duration,
imageURL: self.options.smallTimelineURL,
mode: 'player',
paused: self.options.paused, paused: self.options.paused,
position: self.options.position, position: self.options.position,
showMilliseconds: self.options.showMilliseconds, showMilliseconds: self.options.showMilliseconds,
timeline: self.options.timelineImageURL,
type: 'player',
width: getSmallTimelineWidth() width: getSmallTimelineWidth()
}) })
.css({float: 'left'}) .css({float: 'left'})
@ -506,7 +506,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
Ox.loop(self.tiles, function(i) { Ox.loop(self.tiles, function(i) {
$('<img>') $('<img>')
.attr({ .attr({
src: self.options.getTimelineImageURL(i) src: self.options.getLargeTimelineURL(self.options.type, i)
}) })
.css({ .css({
position: 'absolute', position: 'absolute',