0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

make 'censored' icon/link/tooltip configurable (fixes #252)

Browse source
This commit is contained in:
rlx 2012-04-22 09:57:17 +00:00
parent bdab9b8a7d
commit f0d4043fd4
6 changed files with 89 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
source/Ox.UI/css/Ox.UI.css
View file

@ -2270,7 +2270,7 @@ Video
} }
.OxVideoPlayer .OxCopyrightIcon { .OxVideoPlayer .OxCensoredIcon {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;

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

@ -25,6 +25,8 @@ Ox.VideoEditor = function(options, self) {
annotationsSize: 256, annotationsSize: 256,
annotationsSort: 'position', annotationsSort: 'position',
censored: [], censored: [],
censoredIcon: '',
censoredTooltip: '',
clickLink: null, clickLink: null,
cuts: [], cuts: [],
duration: 0, duration: 0,
@ -236,6 +238,8 @@ Ox.VideoEditor = function(options, self) {
['play', 'in', 'out'].forEach(function(type, i) { ['play', 'in', 'out'].forEach(function(type, i) {
self.$player[i] = Ox.VideoPlayer({ self.$player[i] = Ox.VideoPlayer({
censored: self.options.censored, censored: self.options.censored,
censoredIcon: self.options.censoredIcon,
censoredTooltip: self.options.censoredTooltip,
controlsBottom: type == 'play' ? controlsBottom: type == 'play' ?
['play', 'playInToOut', 'volume', 'size', 'space', 'position'] : ['play', 'playInToOut', 'volume', 'size', 'space', 'position'] :
['goto', 'set', 'space', 'position'], ['goto', 'set', 'space', 'position'],
@ -267,42 +271,48 @@ Ox.VideoEditor = function(options, self) {
left: self.sizes.player[i].left + 'px', left: self.sizes.player[i].left + 'px',
top: self.sizes.player[i].top + 'px' top: self.sizes.player[i].top + 'px'
}) })
.bindEvent(type == 'play' ? { .bindEvent(
muted: function(data) { Ox.extend({
that.triggerEvent('muted', data); censored: function() {
}, that.triggerEvent('censored');
paused: function(data) { }
that.triggerEvent('paused', data); }, type == 'play' ? {
}, muted: function(data) {
playing: function(data) { that.triggerEvent('muted', data);
setPosition(data.position, true); },
}, paused: function(data) {
position: function(data) { that.triggerEvent('paused', data);
setPosition(data.position); },
}, playing: function(data) {
resolution: function(data) { setPosition(data.position, true);
that.triggerEvent('resolution', data); },
}, position: function(data) {
size: function() { setPosition(data.position);
toggleSize(); },
}, resolution: function(data) {
subtitles: function(data) { that.triggerEvent('resolution', data);
that.triggerEvent('subtitles', data); },
}, size: function() {
volume: function(data) { toggleSize();
that.triggerEvent('volume', data); },
} subtitles: function(data) {
} : { that.triggerEvent('subtitles', data);
gotopoint: function() { },
goToPoint(type); volume: function(data) {
}, that.triggerEvent('volume', data);
position: function(data) { }
setPoint(type, data.position); } : {
}, gotopoint: function() {
setpoint: function() { goToPoint(type);
setPoint(type, self.options.position); },
} position: function(data) {
}) setPoint(type, data.position);
},
setpoint: function() {
setPoint(type, self.options.position);
}
})
)
.appendTo(self.$editor); .appendTo(self.$editor);
}); });

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

@ -23,6 +23,8 @@ Ox.VideoPanel = function(options, self) {
annotationsSize: 256, annotationsSize: 256,
annotationsSort: 'position', annotationsSort: 'position',
censored: [], censored: [],
censoredIcon: '',
censoredTooltip: '',
clickLink: null, clickLink: null,
cuts: [], cuts: [],
duration: 0, duration: 0,
@ -86,6 +88,8 @@ Ox.VideoPanel = function(options, self) {
self.$video = Ox.VideoPlayer({ self.$video = Ox.VideoPlayer({
annotations: getAnnotations(), annotations: getAnnotations(),
censored: self.options.censored, censored: self.options.censored,
censoredIcon: self.options.censoredIcon,
censoredTooltip: self.options.censoredTooltip,
controlsTop: ['fullscreen', 'title', 'find'], controlsTop: ['fullscreen', 'title', 'find'],
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'settings'], controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'settings'],
enableDownload: self.options.enableDownload, enableDownload: self.options.enableDownload,
@ -112,6 +116,9 @@ Ox.VideoPanel = function(options, self) {
width: getPlayerWidth() width: getPlayerWidth()
}) })
.bindEvent({ .bindEvent({
censored: function() {
that.triggerEvent('censored');
},
download: function(data) { download: function(data) {
that.triggerEvent('downloadvideo', data); that.triggerEvent('downloadvideo', data);
}, },

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

@ -12,6 +12,8 @@ Ox.VideoPlayer <f> Generic Video Player
out <n> Out point (sec) out <n> Out point (sec)
text <s> Text text <s> Text
censored <a|[]> Array of censored ranges censored <a|[]> Array of censored ranges
censoredIcon <s|''> 'Censored' icon
censoredTooltip <s|''> Tooltip for 'censored' icon
controlsBottom <[s]|[]> Bottom controls, from left to right controlsBottom <[s]|[]> Bottom controls, from left to right
Can be 'close', fullscreen', 'scale', 'title', 'find', 'open', Can be 'close', fullscreen', 'scale', 'title', 'find', 'open',
'play', 'playInToOut', 'previous', 'next', 'mute', 'volume', 'size', 'play', 'playInToOut', 'previous', 'next', 'mute', 'volume', 'size',
@ -84,6 +86,8 @@ Ox.VideoPlayer = function(options, self) {
annotations: [], annotations: [],
brightness: 1, brightness: 1,
censored: [], censored: [],
censoredIcon: '',
censoredTooltip: '',
controlsBottom: [], controlsBottom: [],
controlsTooltips: {}, controlsTooltips: {},
controlsTop: [], controlsTop: [],
@ -298,7 +302,8 @@ Ox.VideoPlayer = function(options, self) {
self.options.enableMouse && self.$videoContainer.bindEvent({ self.options.enableMouse && self.$videoContainer.bindEvent({
anyclick: function(e) { anyclick: function(e) {
if (!$(e.target).is('.OxLogo')) { var $target = $(e.target);
if (!$target.is('.OxLogo') && !$target.is('.OxCensoredIcon')) {
togglePaused(); togglePaused();
} }
}, },
@ -439,14 +444,18 @@ Ox.VideoPlayer = function(options, self) {
if (self.options.censored.length) { if (self.options.censored.length) {
self.$copyrightIcon = Ox.Element({ self.$copyrightIcon = Ox.Element({
element: '<img>', element: '<img>',
// fixme: make this configurable tooltip: self.options.censoredTooltip
tooltip: 'This part of this video is not available in<br/>your part of your country. Sorry for that.'
}) })
.addClass('OxCopyrightIcon OxVideo') .addClass('OxCensoredIcon OxVideo')
.attr({ .attr({
src: Ox.UI.getImageURL('symbolNoCopyright', 'modern'), src: Ox.UI.getImageURL('symbol' + self.options.censoredIcon, 'modern'),
}) })
.hide() .hide()
.bindEvent({
anyclick: function() {
that.triggerEvent('censored');
}
})
.appendTo(self.$videoContainer); .appendTo(self.$videoContainer);
} }

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

@ -18,6 +18,8 @@ Ox.VideoTimelinePanel = function(options, self) {
annotationsSize: 256, annotationsSize: 256,
annotationsSort: 'position', annotationsSort: 'position',
censored: [], censored: [],
censoredIcon: '',
censoredTooltip: '',
clickLink: null, clickLink: null,
cuts: [], cuts: [],
duration: 0, duration: 0,
@ -65,6 +67,8 @@ Ox.VideoTimelinePanel = function(options, self) {
self.$player = Ox.VideoTimelinePlayer({ self.$player = Ox.VideoTimelinePlayer({
censored: self.options.censored, censored: self.options.censored,
censoredIcon: self.options.censoredIcon,
censoredTooltip: self.options.censoredTooltip,
cuts: self.options.cuts, cuts: self.options.cuts,
duration: self.options.duration, duration: self.options.duration,
followPlayer: self.options.followPlayer, followPlayer: self.options.followPlayer,
@ -85,6 +89,9 @@ Ox.VideoTimelinePanel = function(options, self) {
width: getPlayerWidth() width: getPlayerWidth()
}) })
.bindEvent({ .bindEvent({
censored: function() {
that.triggerEvent('censored');
},
follow: function(data) { follow: function(data) {
that.triggerEvent('follow', data); that.triggerEvent('follow', data);
}, },

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

@ -8,6 +8,8 @@ Ox.VideoTimelinePlayer = function(options, self) {
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
censored: [], censored: [],
censoredIcon: '',
censoredTooltip: '',
cuts: [], cuts: [],
duration: 0, duration: 0,
find: '', find: '',
@ -279,6 +281,8 @@ Ox.VideoTimelinePlayer = function(options, self) {
self.$frame = Ox.VideoPlayer({ self.$frame = Ox.VideoPlayer({
censored: self.options.censored, censored: self.options.censored,
censoredIcon: self.options.censoredIcon,
censoredTooltip: self.options.censoredTooltip,
duration: self.options.duration, duration: self.options.duration,
height: self.tileHeight, height: self.tileHeight,
position: self.options.position, position: self.options.position,
@ -287,6 +291,11 @@ Ox.VideoTimelinePlayer = function(options, self) {
video: self.options.getFrameURL, video: self.options.getFrameURL,
width: self.videoWidth width: self.videoWidth
}) })
.bindEvent({
censored: function() {
that.triggerEvent('censored');
}
})
.appendTo(self.$frameBox); .appendTo(self.$frameBox);
$('<div>') $('<div>')
@ -316,6 +325,8 @@ Ox.VideoTimelinePlayer = function(options, self) {
self.$video = Ox.VideoPlayer({ self.$video = Ox.VideoPlayer({
censored: self.options.censored, censored: self.options.censored,
censoredIcon: self.options.censoredIcon,
censoredTooltip: self.options.censoredTooltip,
duration: self.options.duration, duration: self.options.duration,
height: self.tileHeight, height: self.tileHeight,
muted: self.options.muted, muted: self.options.muted,
@ -326,6 +337,9 @@ Ox.VideoTimelinePlayer = function(options, self) {
width: self.videoWidth width: self.videoWidth
}) })
.bindEvent({ .bindEvent({
censored: function() {
that.triggerEvent('censored');
},
ended: function() { ended: function() {
togglePaused(true); togglePaused(true);
}, },