From 0de3bb8527f3ac6bf538963a15ab0ebfccf2946f Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 20 Feb 2013 15:37:58 +0530 Subject: [PATCH] update embed panel --- static/js/pandora/embedPanel.js | 121 ++++++++++++++++++++++++++++--- static/js/pandora/embedPlayer.js | 60 --------------- 2 files changed, 112 insertions(+), 69 deletions(-) delete mode 100644 static/js/pandora/embedPlayer.js diff --git a/static/js/pandora/embedPanel.js b/static/js/pandora/embedPanel.js index 4fcb7c72..73db91ab 100644 --- a/static/js/pandora/embedPanel.js +++ b/static/js/pandora/embedPanel.js @@ -1,7 +1,7 @@ pandora.ui.embedPanel = function() { var that = Ox.Element(), - data, options, + options, video, ui = pandora.user.ui, $outerPanel, $innerPanel, $title, $player, $controls, $timeline, $annotations, @@ -15,11 +15,13 @@ pandora.ui.embedPanel = function() { 'duration', 'layers', 'parts', 'posterFrame', 'rightslevel', 'size', 'title', 'videoRatio' ]}, function(result) { - data = result.data, innerHeight; - Ox.extend(data, pandora.getVideoOptions(data)); + + video = result.data, innerHeight; + Ox.extend(video, pandora.getVideoOptions(video)); + if (options.matchRatio || options.showAnnotations) { options.height = Math.min( - Math.round(window.innerWidth / data.videoRatio), + Math.round(window.innerWidth / video.videoRatio), window.innerHeight - (options.title ? 32 : 0) - (options.showTimeline ? 80 : 0) @@ -33,6 +35,7 @@ pandora.ui.embedPanel = function() { innerHeight = options.height + (options.title ? 32 : 0) + (options.showTimeline ? 80 : 0); + if (options.title) { $title = Ox.Element() .css({position: 'absolute'}) @@ -47,24 +50,85 @@ pandora.ui.embedPanel = function() { } else { $title = Ox.Element(); } - $player = pandora.ui.embedPlayer(options, data) + + $player = Ox.VideoPlayer(Ox.extend({ + censored: video.censored, + censoredIcon: pandora.site.cantPlay.icon, + censoredTooltip: pandora.site.cantPlay.text, + controlsBottom: ['play', 'volume'].concat( + options.matchRatio ? [] : ['scale'] + ).concat( + Ox.Fullscreen.available ? ['fullscreen'] : [] + ).concat( + ['timeline', 'position', 'settings'] + ), + controlsTooltips: { + close: 'Close', + open: 'Watch on ' + pandora.site.site.name + }, + controlsTop: (options.showCloseButton ? ['close'] : []).concat( + ['title', 'open'] + ), + duration: video.duration, + enableFullscreen: Ox.Fullscreen.available, + enableKeyboard: true, + enableMouse: true, + enablePosition: true, + enableSubtitles: true, + enableTimeline: true, + enableVolume: true, + height: options.height, + invertHighlight: options.invertHighlight, + muted: pandora.user.ui.videoMuted, + paused: options.paused, + playInToOut: options.playInToOut, + position: options.position, + poster: '/' + options.item + '/' + '96p' + ( + options.position !== void 0 ? options.position + : options['in'] !== void 0 ? options['in'] + : video.posterFrame + ) +'.jpg', + resolution: pandora.user.ui.videoResolution, + scaleToFill: pandora.user.ui.videoScale == 'fill', + subtitles: video.subtitles, + timeline: options.playInToOut ? function(size, i) { + return '/' + options.item + + '/timelineantialias' + + size + 'p' + i + '.jpg' + } : '/' + options.item + '/' + 'timeline16p.png', + title: video.title, + video: video.video, + volume: pandora.user.ui.videoVolume, + width: options.width + }, options['in'] ? { + 'in': options['in'] + } : {}, options.out ? { + out: options.out + } : {})) .bindEvent({ playing: function(data) { setPosition(data.position, true); }, position: function(data) { setPosition(data.position); + }, + subtitles: function(data) { + $timeline.options({ + subtitles: data.subtitles ? video.subtitles : [] + }); } }); + $controls = Ox.Element(); + if (options.showTimeline) { $timeline = Ox.LargeVideoTimeline({ - duration: data.duration, + duration: video.duration, getImageURL: function(type, i) { return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg'; }, position: options.position, - subtitles: data.subtitles || [], + subtitles: ui.videoSubtitles ? video.subtitles : [], type: ui.videoTimeline, width: window.innerWidth - 16 }) @@ -78,7 +142,28 @@ pandora.ui.embedPanel = function() { }) .appendTo($controls); } - $annotations = Ox.Element().html('ANNOTATIONS'); + + if (options.showAnnotations) { + $annotations = Ox.AnnotationPanel(Ox.extend({ + font: options.annotationsFont, + layers: video.annotations, + position: options.position, + range: options.annotationsRange, + showLayers: options.showLayers, + showUsers: true, + sort: options.annotationsSort + }, options['in'] ? { + 'in': options['in'] + } : {}, options.out ? { + out: options.out + } : {})) + .bindEvent({ + select: selectAnnotation + }) + } else { + $annotations = Ox.Element(); + } + $innerPanel = Ox.SplitPanel({ elements: [ {element: $title, size: options.title ? 32 : 0}, @@ -87,6 +172,7 @@ pandora.ui.embedPanel = function() { ], orientation: 'vertical' }); + $outerPanel = Ox.SplitPanel({ elements: [ {element: $innerPanel, size: innerHeight}, @@ -94,7 +180,9 @@ pandora.ui.embedPanel = function() { ], orientation: 'vertical' }); + that.setElement($outerPanel); + }); } else { @@ -143,7 +231,6 @@ pandora.ui.embedPanel = function() { var position = options.playInToOut ? Ox.limit(data.position, options['in'], options.out) : data.position; - Ox.print('PPP', position); $player.options({position: position}); position != data.position && $timeline.options({position: position}); options.showAnnotations && $annotations.options({position: position}); @@ -152,9 +239,17 @@ pandora.ui.embedPanel = function() { function getOptions() { var options = {}, defaults = { + annotationsFont: ui.annotationsFont, + annotationsRange: ui.annotationsRange, + annotationsSort: ui.annotationsSort, invertHighlight: true, + matchRatio: false, paused: true, playInToOut: true, + showAnnotations: false, + showCloseButton: false, + showLayers: ui.showLayers, + showTimeline: false, width: window.innerWidth }; ui.hash.query.forEach(function(condition) { @@ -177,6 +272,14 @@ pandora.ui.embedPanel = function() { return options; } + function selectAnnotation(data) { + if (data.id) { + setPosition(data['in']); + //setPoint('in', data['in']); + //setPoint('out', data.out); + } + } + function setPosition(position, playing) { !playing && $player.options({position: position}); options.showTimeline && $timeline.options({position: position}); diff --git a/static/js/pandora/embedPlayer.js b/static/js/pandora/embedPlayer.js deleted file mode 100644 index c120bb32..00000000 --- a/static/js/pandora/embedPlayer.js +++ /dev/null @@ -1,60 +0,0 @@ -pandora.ui.embedPlayer = function(options, data) { - - var that = Ox.VideoPlayer(Ox.extend({ - censored: data.censored, - censoredIcon: pandora.site.cantPlay.icon, - censoredTooltip: pandora.site.cantPlay.text, - controlsBottom: ['play', 'volume'].concat( - options.matchRatio ? [] : ['scale'] - ).concat( - Ox.Fullscreen.available ? ['fullscreen'] : [] - ).concat( - ['timeline', 'position', 'settings'] - ), - controlsTooltips: { - close: 'Close', - open: 'Watch on ' + pandora.site.site.name - }, - controlsTop: (options.showCloseButton ? ['close'] : []).concat( - ['title', 'open'] - ), - duration: data.duration, - enableFullscreen: Ox.Fullscreen.available, - enableKeyboard: true, - enableMouse: true, - enablePosition: true, - enableSubtitles: true, - enableTimeline: true, - enableVolume: true, - height: options.height, - invertHighlight: options.invertHighlight, - muted: pandora.user.ui.videoMuted, - paused: options.paused, - playInToOut: options.playInToOut, - position: options.position, - poster: '/' + options.item + '/' + '96p' + ( - options.position !== void 0 ? options.position - : options['in'] !== void 0 ? options['in'] - : data.posterFrame - ) +'.jpg', - resolution: pandora.user.ui.videoResolution, - scaleToFill: pandora.user.ui.videoScale == 'fill', - subtitles: data.subtitles, - timeline: options.playInToOut ? function(size, i) { - return '/' + options.item - + '/timelineantialias' - + size + 'p' + i + '.jpg' - } : '/' + options.item + '/' + 'timeline16p.png', - title: data.title, - video: data.video, - volume: pandora.user.ui.videoVolume, - width: options.width - }, options['in'] ? { - 'in': options['in'] - } : {}, options.out ? { - out: options.out - } : {})); - - return that; - -}; \ No newline at end of file