From f0d4043fd4fe13d1b56183473b91f55cdd424c40 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sun, 22 Apr 2012 09:57:17 +0000 Subject: [PATCH] make 'censored' icon/link/tooltip configurable (fixes #252) --- source/Ox.UI/css/Ox.UI.css | 2 +- source/Ox.UI/js/Video/Ox.VideoEditor.js | 82 +++++++++++-------- source/Ox.UI/js/Video/Ox.VideoPanel.js | 7 ++ source/Ox.UI/js/Video/Ox.VideoPlayer.js | 19 +++-- .../Ox.UI/js/Video/Ox.VideoTimelinePanel.js | 7 ++ .../Ox.UI/js/Video/Ox.VideoTimelinePlayer.js | 14 ++++ 6 files changed, 89 insertions(+), 42 deletions(-) diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 4906aca1..deee5dce 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -2270,7 +2270,7 @@ Video } -.OxVideoPlayer .OxCopyrightIcon { +.OxVideoPlayer .OxCensoredIcon { position: absolute; left: 0; top: 0; diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 3d10c0c6..59733c5a 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -25,6 +25,8 @@ Ox.VideoEditor = function(options, self) { annotationsSize: 256, annotationsSort: 'position', censored: [], + censoredIcon: '', + censoredTooltip: '', clickLink: null, cuts: [], duration: 0, @@ -236,6 +238,8 @@ Ox.VideoEditor = function(options, self) { ['play', 'in', 'out'].forEach(function(type, i) { self.$player[i] = Ox.VideoPlayer({ censored: self.options.censored, + censoredIcon: self.options.censoredIcon, + censoredTooltip: self.options.censoredTooltip, controlsBottom: type == 'play' ? ['play', 'playInToOut', 'volume', 'size', 'space', 'position'] : ['goto', 'set', 'space', 'position'], @@ -267,42 +271,48 @@ Ox.VideoEditor = function(options, self) { left: self.sizes.player[i].left + 'px', top: self.sizes.player[i].top + 'px' }) - .bindEvent(type == 'play' ? { - muted: function(data) { - that.triggerEvent('muted', data); - }, - paused: function(data) { - that.triggerEvent('paused', data); - }, - playing: function(data) { - setPosition(data.position, true); - }, - position: function(data) { - setPosition(data.position); - }, - resolution: function(data) { - that.triggerEvent('resolution', data); - }, - size: function() { - toggleSize(); - }, - subtitles: function(data) { - that.triggerEvent('subtitles', data); - }, - volume: function(data) { - that.triggerEvent('volume', data); - } - } : { - gotopoint: function() { - goToPoint(type); - }, - position: function(data) { - setPoint(type, data.position); - }, - setpoint: function() { - setPoint(type, self.options.position); - } - }) + .bindEvent( + Ox.extend({ + censored: function() { + that.triggerEvent('censored'); + } + }, type == 'play' ? { + muted: function(data) { + that.triggerEvent('muted', data); + }, + paused: function(data) { + that.triggerEvent('paused', data); + }, + playing: function(data) { + setPosition(data.position, true); + }, + position: function(data) { + setPosition(data.position); + }, + resolution: function(data) { + that.triggerEvent('resolution', data); + }, + size: function() { + toggleSize(); + }, + subtitles: function(data) { + that.triggerEvent('subtitles', data); + }, + volume: function(data) { + that.triggerEvent('volume', data); + } + } : { + gotopoint: function() { + goToPoint(type); + }, + position: function(data) { + setPoint(type, data.position); + }, + setpoint: function() { + setPoint(type, self.options.position); + } + }) + ) .appendTo(self.$editor); }); diff --git a/source/Ox.UI/js/Video/Ox.VideoPanel.js b/source/Ox.UI/js/Video/Ox.VideoPanel.js index 72d92a79..1143e0ca 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPanel.js +++ b/source/Ox.UI/js/Video/Ox.VideoPanel.js @@ -23,6 +23,8 @@ Ox.VideoPanel = function(options, self) { annotationsSize: 256, annotationsSort: 'position', censored: [], + censoredIcon: '', + censoredTooltip: '', clickLink: null, cuts: [], duration: 0, @@ -86,6 +88,8 @@ Ox.VideoPanel = function(options, self) { self.$video = Ox.VideoPlayer({ annotations: getAnnotations(), censored: self.options.censored, + censoredIcon: self.options.censoredIcon, + censoredTooltip: self.options.censoredTooltip, controlsTop: ['fullscreen', 'title', 'find'], controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'settings'], enableDownload: self.options.enableDownload, @@ -112,6 +116,9 @@ Ox.VideoPanel = function(options, self) { width: getPlayerWidth() }) .bindEvent({ + censored: function() { + that.triggerEvent('censored'); + }, download: function(data) { that.triggerEvent('downloadvideo', data); }, diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 27339882..e6842b59 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -12,6 +12,8 @@ Ox.VideoPlayer Generic Video Player out Out point (sec) text Text censored Array of censored ranges + censoredIcon 'Censored' icon + censoredTooltip Tooltip for 'censored' icon controlsBottom <[s]|[]> Bottom controls, from left to right Can be 'close', fullscreen', 'scale', 'title', 'find', 'open', 'play', 'playInToOut', 'previous', 'next', 'mute', 'volume', 'size', @@ -84,6 +86,8 @@ Ox.VideoPlayer = function(options, self) { annotations: [], brightness: 1, censored: [], + censoredIcon: '', + censoredTooltip: '', controlsBottom: [], controlsTooltips: {}, controlsTop: [], @@ -298,7 +302,8 @@ Ox.VideoPlayer = function(options, self) { self.options.enableMouse && self.$videoContainer.bindEvent({ anyclick: function(e) { - if (!$(e.target).is('.OxLogo')) { + var $target = $(e.target); + if (!$target.is('.OxLogo') && !$target.is('.OxCensoredIcon')) { togglePaused(); } }, @@ -439,14 +444,18 @@ Ox.VideoPlayer = function(options, self) { if (self.options.censored.length) { self.$copyrightIcon = Ox.Element({ element: '', - // fixme: make this configurable - tooltip: 'This part of this video is not available in
your part of your country. Sorry for that.' + tooltip: self.options.censoredTooltip }) - .addClass('OxCopyrightIcon OxVideo') + .addClass('OxCensoredIcon OxVideo') .attr({ - src: Ox.UI.getImageURL('symbolNoCopyright', 'modern'), + src: Ox.UI.getImageURL('symbol' + self.options.censoredIcon, 'modern'), }) .hide() + .bindEvent({ + anyclick: function() { + that.triggerEvent('censored'); + } + }) .appendTo(self.$videoContainer); } diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js index ae3bab2e..5d2bfe1f 100644 --- a/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js +++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js @@ -18,6 +18,8 @@ Ox.VideoTimelinePanel = function(options, self) { annotationsSize: 256, annotationsSort: 'position', censored: [], + censoredIcon: '', + censoredTooltip: '', clickLink: null, cuts: [], duration: 0, @@ -65,6 +67,8 @@ Ox.VideoTimelinePanel = function(options, self) { self.$player = Ox.VideoTimelinePlayer({ censored: self.options.censored, + censoredIcon: self.options.censoredIcon, + censoredTooltip: self.options.censoredTooltip, cuts: self.options.cuts, duration: self.options.duration, followPlayer: self.options.followPlayer, @@ -85,6 +89,9 @@ Ox.VideoTimelinePanel = function(options, self) { width: getPlayerWidth() }) .bindEvent({ + censored: function() { + that.triggerEvent('censored'); + }, follow: function(data) { that.triggerEvent('follow', data); }, diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js index e4e4f57c..185f463b 100644 --- a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js @@ -8,6 +8,8 @@ Ox.VideoTimelinePlayer = function(options, self) { var that = Ox.Element({}, self) .defaults({ censored: [], + censoredIcon: '', + censoredTooltip: '', cuts: [], duration: 0, find: '', @@ -279,6 +281,8 @@ Ox.VideoTimelinePlayer = function(options, self) { self.$frame = Ox.VideoPlayer({ censored: self.options.censored, + censoredIcon: self.options.censoredIcon, + censoredTooltip: self.options.censoredTooltip, duration: self.options.duration, height: self.tileHeight, position: self.options.position, @@ -287,6 +291,11 @@ Ox.VideoTimelinePlayer = function(options, self) { video: self.options.getFrameURL, width: self.videoWidth }) + .bindEvent({ + censored: function() { + that.triggerEvent('censored'); + } + }) .appendTo(self.$frameBox); $('
') @@ -316,6 +325,8 @@ Ox.VideoTimelinePlayer = function(options, self) { self.$video = Ox.VideoPlayer({ censored: self.options.censored, + censoredIcon: self.options.censoredIcon, + censoredTooltip: self.options.censoredTooltip, duration: self.options.duration, height: self.tileHeight, muted: self.options.muted, @@ -326,6 +337,9 @@ Ox.VideoTimelinePlayer = function(options, self) { width: self.videoWidth }) .bindEvent({ + censored: function() { + that.triggerEvent('censored'); + }, ended: function() { togglePaused(true); },