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',
title: 'set',
tooltip: 'Actions and Settings',
tooltip: 'Options',
type: 'image'
})
.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,
state: 'default',
subtitles: [],
type: '',
width: 0
})
.options(options || {})
@ -54,14 +55,15 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$image = Ox.SmallVideoTimelineImage({
duration: self.options.duration,
editing: self.options.editing,
imageURL: self.options.getImageURL,
'in': self.options['in'],
mode: 'editor',
out: self.options.out,
results: self.options.results,
state: self.options.state,
subtitles: self.options.subtitles,
timeline: self.options.getImageURL,
width: Math.round(self.options.duration),
type: 'editor'
type: self.options.type,
width: Math.round(self.options.duration)
});
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: [],
out: 0,
position: 0,
style: 'default', // fixme: there are no different styles yet
subtitles: [],
type: 'player',
type: '',
width: 0
})
.options(options || {})
@ -158,7 +157,7 @@ Ox.LargeVideoTimeline = function(options, self) {
if (!self.$tiles[i]) {
self.$tiles[i] = $('<img>')
.attr({
src: self.options.getImageURL(i)
src: self.options.getImageURL(self.options.type, i)
})
.css({
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,
duration: 0,
find: '',
imageURL: '',
'in': 0,
mode: 'player',
out: 0,
paused: false,
results: [],
showMilliseconds: 0,
state: 'default',
subtitles: [],
timeline: '',
type: 'player',
width: 256
})
.options(options || {})
.addClass('OxSmallVideoTimeline')
.css(Ox.extend({
width: self.options.width + 'px'
}, self.options.type == 'player' ? {
}, self.options.mode == 'player' ? {
background: 'rgb(0, 0, 0)',
borderRadius: '8px'
} : {}));
self.height = self.options.type == 'player' ? 16 : 24;
self.imageLeft = self.options.type == 'player' ? 8 : 4;
self.height = self.options.mode == 'player' ? 16 : 24;
self.imageLeft = self.options.mode == 'player' ? 8 : 4;
self.imageWidth = self.options.width -
(self.options.type == 'player' ? 16 : 8)
self.imageHeight = self.options.type == 'player' ? 16 : 18;
self.interfaceLeft = self.options.type == 'player' ? 0 : 4;
self.interfaceTop = self.options.type == 'player' ? 0 : 2;
self.interfaceWidth = self.options.type == 'player' ? self.options.width : self.imageWidth;
(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;
that.css({
height: self.height + 'px'
@ -77,7 +77,7 @@ Ox.SmallVideoTimeline = function(options, self) {
textAlign: 'center'
});
if (self.options.type == 'player') {
if (self.options.mode == 'player') {
self.$positionMarker = $('<div>')
.addClass('OxMarkerPlay' + (self.options.paused ? ' OxPaused' : ''))
.append($('<div>').append($('<div>')))
@ -92,7 +92,7 @@ Ox.SmallVideoTimeline = function(options, self) {
}
setPositionMarker();
if (self.options.type == 'editor') {
if (self.options.mode == 'editor') {
self.$pointMarker = {};
['in', 'out'].forEach(function(point) {
var titlecase = Ox.toTitleCase(point);
@ -109,7 +109,7 @@ Ox.SmallVideoTimeline = function(options, self) {
function getPosition(e) {
var position = (
(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;
return Ox.limit(position, 0, self.options.duration);
}
@ -128,14 +128,15 @@ Ox.SmallVideoTimeline = function(options, self) {
function getTimelineImage() {
return Ox.SmallVideoTimelineImage({
duration: self.options.duration,
imageURL: self.options.imageURL,
'in': self.options['in'],
mode: self.options.mode,
out: self.options.out,
results: self.options.results,
subtitles: self.options.subtitles,
state: self.options.state,
timeline: self.options.timeline,
width: self.imageWidth,
type: self.options.type
type: self.options.type,
width: self.imageWidth
})
.css({
position: 'absolute',
@ -187,14 +188,14 @@ Ox.SmallVideoTimeline = function(options, self) {
self.$positionMarker.css({
left: self.interfaceLeft + Math.round(
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() {
self.imageWidth = self.options.width -
(self.options.type == 'player' ? 16 : 8);
self.interfaceWidth = self.options.type == 'player' ?
(self.options.mode == 'player' ? 16 : 8);
self.interfaceWidth = self.options.mode == 'player' ?
self.options.width : self.imageWidth;
that.css({
width: self.options.width + 'px'
@ -208,7 +209,7 @@ Ox.SmallVideoTimeline = function(options, self) {
width: self.interfaceWidth + 'px'
});
setPositionMarker();
if (self.options.type == 'editor') {
if (self.options.mode == 'editor') {
setPointMarker('in');
setPointMarker('out');
}
@ -219,10 +220,10 @@ Ox.SmallVideoTimeline = function(options, self) {
self.$image.options({duration: value});
} else if (key == 'in') {
self.$image.options({'in': value});
self.options.type == 'editor' && setPointMarker('in');
self.options.mode == 'editor' && setPointMarker('in');
} else if (key == 'out') {
self.$image.options({out: value});
self.options.type == 'editor' && setPointMarker('out');
self.options.mode == 'editor' && setPointMarker('out');
} else if (key == 'paused') {
self.$positionMarker[
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)
.defaults({
duration: 0,
imageURL: '',
'in': 0,
mode: 'player',
out: 0,
results: [],
state: 'default',
subtitles: [],
timeline: '',
type: '',
width: 256,
type: 'player'
})
.options(options || {})
.css({
@ -21,24 +22,24 @@ Ox.SmallVideoTimelineImage = function(options, self) {
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);
self.imageWidth = Ox.isString(self.options.timeline) ?
self.imageWidth = Ox.isString(self.options.imageURL) ?
1920 : Math.round(self.options.duration);
self.height = self.options.type == 'player' ? 16 : 24;
self.imageHeight = self.options.type == 'player' ? 16 : 18;
self.imageTop = self.options.type == 'player' ? 0 : 3;
self.timelineTop = self.options.type == 'player' ? 0 : 4;
self.height = self.options.mode == 'player' ? 16 : 24;
self.imageHeight = self.options.mode == 'player' ? 16 : 18;
self.imageTop = self.options.mode == 'player' ? 0 : 3;
self.timelineTop = self.options.mode == 'player' ? 0 : 4;
self.theme = Ox.Theme();
that.css({
height: self.height + 'px'
});
if (Ox.isString(self.options.timeline)) {
if (Ox.isString(self.options.imageURL)) {
self.$timeline = $('<img>')
.attr({
src: self.options.timeline
src: self.options.imageURL
})
.css({
position: 'absolute',
@ -51,7 +52,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
Ox.loop(self.images, function(i) {
$('<img>')
.attr({
src: self.options.timeline(i)
src: self.options.imageURL(self.options.type, i)
})
.css({
position: 'absolute',
@ -124,7 +125,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
) + 1;
Ox.loop(left, right, function(x) {
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,
color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
? [0, 0, 0] : [255, 255, 0],
@ -151,7 +152,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
: [[32, 32, 32], [224, 224, 224]];
Ox.loop(left, right, function(x) {
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,
color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
index = x * 4 + y * 4 * width;
@ -162,7 +163,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
});
});
} 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) {
var left = Math.round(
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: '',
fps: 25,
getFrameURL: null,
getLargeTimelineImageURL: null,
getSmallTimelineImageURL: null,
getLargeTimelineURL: null,
getSmallTimelineURL: null,
'in': 0,
height: 0,
layers: [],
@ -53,6 +53,8 @@ Ox.VideoEditor = function(options, self) {
showLayers: {},
showUsers: false,
subtitles: [],
timeline: '',
timelines: [],
tooltips: false,
videoRatio: 16/9,
videoSize: 'small',
@ -300,14 +302,14 @@ Ox.VideoEditor = function(options, self) {
cuts: self.options.cuts,
duration: self.options.duration,
find: self.options.find,
getImageURL: self.options.getLargeTimelineImageURL,
getImageURL: self.options.getLargeTimelineURL,
id: 'timelineLarge',
'in': self.options['in'],
//matches: self.options.matches,
out: self.options.out,
position: self.options.position,
subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
type: 'editor',
type: self.options.timeline,
width: self.sizes.timeline[0].width
})
.css({
@ -325,7 +327,7 @@ Ox.VideoEditor = function(options, self) {
cuts: self.options.cuts,
duration: self.options.duration,
find: self.options.find,
getImageURL: self.options.getSmallTimelineImageURL,
getImageURL: self.options.getSmallTimelineURL,
id: 'timelineSmall',
'in': self.options['in'],
out: self.options.out,
@ -334,6 +336,7 @@ Ox.VideoEditor = function(options, self) {
showPointMarkers: true,
state: self.options.selected ? 'selected' : 'default',
subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
type: self.options.timeline,
videoId: self.options.videoId,
width: self.sizes.timeline[1].width
})
@ -432,10 +435,7 @@ Ox.VideoEditor = function(options, self) {
self.$menuButton = Ox.MenuButton({
items: Ox.merge(
[
{group: 'size', min: 1, max: 1, items: [
{id: 'small', title: 'Small Player', checked: self.options.videoSize == 'small'},
{id: 'large', title: 'Large Player', checked: self.options.videoSize == 'large'}
]},
{id: 'size', title: 'Large Player', checked: self.options.videoSize == 'large'},
{},
{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: '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: 'downloadSelection', title: 'Download Selection...', disabled: !self.options.enableDownload},
@ -465,7 +476,7 @@ Ox.VideoEditor = function(options, self) {
),
style: 'square',
title: 'set',
tooltip: 'Actions and Settings',
tooltip: 'Options',
type: 'image'
})
.css({float: 'left'})
@ -509,6 +520,8 @@ Ox.VideoEditor = function(options, self) {
toggleSize();
} else if (id == 'subtitles') {
toggleSubtitles();
} else if (id == 'timeline') {
// data.checked[0].id
}
},
hide: function() {

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

@ -30,6 +30,7 @@ Ox.VideoPanel = function(options, self) {
enableSubtitles: false,
find: '',
fullscreen: false,
getLargeTimelineURL: null,
height: 0,
'in': 0,
layers: [],
@ -49,7 +50,9 @@ Ox.VideoPanel = function(options, self) {
showLayers: {},
showTimeline: true,
showUsers: false,
smallTimelineURL: '',
subtitles: [],
timeline: '',
tooltips: false,
video: '',
volume: 1,
@ -103,7 +106,7 @@ Ox.VideoPanel = function(options, self) {
resolution: self.options.resolution,
scaleToFill: self.options.scaleToFill,
subtitles: self.options.subtitles,
timeline: self.options.timeline,
timeline: self.options.smallTimelineURL,
video: self.options.video,
volume: self.options.volume,
width: getPlayerWidth()
@ -159,10 +162,11 @@ Ox.VideoPanel = function(options, self) {
self.$timeline = Ox.LargeVideoTimeline({
duration: self.options.duration,
find: self.options.find,
getImageURL: self.options.getTimelineImageURL,
getImageURL: self.options.getLargeTimelineURL,
position: self.options.position,
subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
videoId: self.options.videoId,
type: self.options.timeline,
width: getTimelineWidth()
})
.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,
duration: self.options.duration,
find: self.options.find,
imageURL: self.options.timeline,
'in': self.options['in'],
mode: 'player',
out: self.options.out,
paused: self.options.paused,
position: self.options.position,
results: self.results,
showMilliseconds: self.options.showMilliseconds,
subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
timeline: self.options.timeline,
type: 'player',
width: getTimelineWidth()
})
.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,
followPlayer: false,
getFrameURL: null,
getTimelineImageURL: null,
getLargeTimelineURL: null,
height: 0,
layers: [],
loop: false, // fixme: used?
@ -38,9 +38,9 @@ Ox.VideoTimelinePanel = function(options, self) {
showAnnotationsMap: false,
showLayers: {},
showUsers: false,
smallTimelineURL: '',
subtitles: [],
timeline: '',
timelineImageURL: '',
timelines: [],
video: '',
volume: 1,
@ -69,15 +69,15 @@ Ox.VideoTimelinePanel = function(options, self) {
duration: self.options.duration,
followPlayer: self.options.followPlayer,
getFrameURL: self.options.getFrameURL,
getTimelineImageURL: self.options.getTimelineImageURL,
getLargeTimelineURL: self.options.getLargeTimelineURL,
height: self.options.height,
muted: self.options.muted,
paused: true,
position: self.options.position,
resolution: self.options.resolution,
smallTimelineURL: self.options.smallTimelineURL,
subtitles: self.options.subtitles,
timeline: self.options.timeline,
timelineImageURL: self.options.timelineImageURL,
timelines: self.options.timelines,
video: self.options.video,
videoRatio: self.options.videoRatio,
@ -100,6 +100,9 @@ Ox.VideoTimelinePanel = function(options, self) {
position: function(data) {
setPosition(data.position);
},
timeline: function(data) {
that.triggerEvent('timeline', data);
},
volume: function(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: '',
followPlayer: false,
getFrameURL: null,
getTimelineImageURL: null,
getLargeTimelineURL: null,
height: 0,
'in': 0,
matches: [],
@ -21,9 +21,9 @@ Ox.VideoTimelinePlayer = function(options, self) {
paused: false,
position: 0,
showMilliseconds: false,
smallTimelineURL: '',
subtitles: [],
timeline: '',
timelineImageURL: '',
timelines: [],
video: '',
videoRatio: 1,
@ -79,7 +79,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
change: function(data) {
var id = data.id;
if (id == 'timeline') {
// ...
// data.checked[0].id
} else if (id == 'followPlayer') {
self.options.followPlayer = data.checked;
if (!self.options.paused && self.options.followPlayer) {
@ -385,11 +385,11 @@ Ox.VideoTimelinePlayer = function(options, self) {
function getSmallTimeline() {
var $timeline = Ox.SmallVideoTimeline({
duration: self.options.duration,
imageURL: self.options.smallTimelineURL,
mode: 'player',
paused: self.options.paused,
position: self.options.position,
showMilliseconds: self.options.showMilliseconds,
timeline: self.options.timelineImageURL,
type: 'player',
width: getSmallTimelineWidth()
})
.css({float: 'left'})
@ -506,7 +506,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
Ox.loop(self.tiles, function(i) {
$('<img>')
.attr({
src: self.options.getTimelineImageURL(i)
src: self.options.getLargeTimelineURL(self.options.type, i)
})
.css({
position: 'absolute',