From 132e8d22076471cb61ad839d718597b3e2e1d153 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Wed, 18 Apr 2012 07:43:32 +0000 Subject: [PATCH] rename various options of video widgets to allow for different timeline types --- source/Ox.UI/js/Video/Ox.AnnotationPanel.js | 2 +- .../Ox.UI/js/Video/Ox.BlockVideoTimeline.js | 8 ++-- .../Ox.UI/js/Video/Ox.LargeVideoTimeline.js | 5 +-- .../Ox.UI/js/Video/Ox.SmallVideoTimeline.js | 45 ++++++++++--------- .../js/Video/Ox.SmallVideoTimelineImage.js | 29 ++++++------ source/Ox.UI/js/Video/Ox.VideoEditor.js | 33 +++++++++----- source/Ox.UI/js/Video/Ox.VideoPanel.js | 8 +++- source/Ox.UI/js/Video/Ox.VideoPlayer.js | 4 +- .../Ox.UI/js/Video/Ox.VideoTimelinePanel.js | 11 +++-- .../Ox.UI/js/Video/Ox.VideoTimelinePlayer.js | 12 ++--- 10 files changed, 90 insertions(+), 67 deletions(-) diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index 94d45782..a31dc336 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -348,7 +348,7 @@ Ox.AnnotationPanel = function(options, self) { ), style: 'square', title: 'set', - tooltip: 'Actions and Settings', + tooltip: 'Options', type: 'image' }) .css({float: 'left'}) diff --git a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js index c2822b88..c0cc3997 100644 --- a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js @@ -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) { diff --git a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js index ee363261..fe7f5ed7 100644 --- a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js @@ -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] = $('') .attr({ - src: self.options.getImageURL(i) + src: self.options.getImageURL(self.options.type, i) }) .css({ left: (i * self.tileWidth) + 'px' diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js index 31cbf698..d3ebaec5 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js @@ -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 = $('
') .addClass('OxMarkerPlay' + (self.options.paused ? ' OxPaused' : '')) .append($('
').append($('
'))) @@ -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' diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js index 80f07d24..4f0e0baa 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js @@ -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 = $('') .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) { $('') .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 diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 8e91dd2d..dce16fae 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -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() { diff --git a/source/Ox.UI/js/Video/Ox.VideoPanel.js b/source/Ox.UI/js/Video/Ox.VideoPanel.js index 2b75cd83..72d92a79 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPanel.js +++ b/source/Ox.UI/js/Video/Ox.VideoPanel.js @@ -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'}) diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 4be4f698..d946b834 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -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'}) diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js index ddc9426c..b4691a95 100644 --- a/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js +++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js @@ -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); } diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js index eb12e3a2..c111cb67 100644 --- a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js @@ -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) { $('') .attr({ - src: self.options.getTimelineImageURL(i) + src: self.options.getLargeTimelineURL(self.options.type, i) }) .css({ position: 'absolute',