From 7791cc248dd8a88ff66667c3c99df9ee5cd1935d Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 20 Feb 2013 14:28:15 +0530 Subject: [PATCH] update embed panel and player --- static/js/pandora/embedPanel.js | 142 +++++++++++++++++++++++++++++-- static/js/pandora/embedPlayer.js | 40 ++------- 2 files changed, 141 insertions(+), 41 deletions(-) diff --git a/static/js/pandora/embedPanel.js b/static/js/pandora/embedPanel.js index cfeaf10c..4fcb7c72 100644 --- a/static/js/pandora/embedPanel.js +++ b/static/js/pandora/embedPanel.js @@ -1,25 +1,105 @@ pandora.ui.embedPanel = function() { - var that, $errorBox, $errorLogo, $errorText; + var that = Ox.Element(), + data, options, + ui = pandora.user.ui, + $outerPanel, $innerPanel, + $title, $player, $controls, $timeline, $annotations, + $errorBox, $errorLogo, $errorText; if (pandora.user.ui.item) { - that = Ox.Element(); + options = getOptions(); - pandora.api.get({id: pandora.user.ui.item, keys: [ + pandora.api.get({id: ui.item, keys: [ 'duration', 'layers', 'parts', 'posterFrame', 'rightslevel', 'size', 'title', 'videoRatio' ]}, function(result) { - Ox.extend(result.data, pandora.getVideoOptions(result.data)); - that.setElement( - pandora.$ui.embedPlayer = pandora.ui.embedPlayer(result.data) - ); + data = result.data, innerHeight; + Ox.extend(data, pandora.getVideoOptions(data)); + if (options.matchRatio || options.showAnnotations) { + options.height = Math.min( + Math.round(window.innerWidth / data.videoRatio), + window.innerHeight + - (options.title ? 32 : 0) + - (options.showTimeline ? 80 : 0) + - (options.showAnnotations ? 128 : 0) + ); + } else { + options.height = window.innerHeight + - (options.title ? 32 : 0) + - (options.showTimeline ? 80 : 0); + } + innerHeight = options.height + + (options.title ? 32 : 0) + + (options.showTimeline ? 80 : 0); + if (options.title) { + $title = Ox.Element() + .css({position: 'absolute'}) + .append( + $('
') + .css({ + marginTop: !options.title.match(/\\n/) ? '8px' : '2px', + textAlign: 'center' + }) + .html(options.title.replace(/\\n/g, '
')) + ); + } else { + $title = Ox.Element(); + } + $player = pandora.ui.embedPlayer(options, data) + .bindEvent({ + playing: function(data) { + setPosition(data.position, true); + }, + position: function(data) { + setPosition(data.position); + } + }); + $controls = Ox.Element(); + if (options.showTimeline) { + $timeline = Ox.LargeVideoTimeline({ + duration: data.duration, + getImageURL: function(type, i) { + return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg'; + }, + position: options.position, + subtitles: data.subtitles || [], + type: ui.videoTimeline, + width: window.innerWidth - 16 + }) + .css({ + top: '4px', + left: '4px' + }) + .bindEvent({ + mousedown: that.gainFocus, + position: changeTimeline + }) + .appendTo($controls); + } + $annotations = Ox.Element().html('ANNOTATIONS'); + $innerPanel = Ox.SplitPanel({ + elements: [ + {element: $title, size: options.title ? 32 : 0}, + {element: $player}, + {element: $controls, size: options.showTimeline ? 80 : 0} + ], + orientation: 'vertical' + }); + $outerPanel = Ox.SplitPanel({ + elements: [ + {element: $innerPanel, size: innerHeight}, + {element: $annotations} + ], + orientation: 'vertical' + }); + that.setElement($outerPanel); }); } else { - that = Ox.Element() - .addClass('OxScreen') + that.addClass('OxScreen') .css({ position: 'absolute', left: 0, @@ -59,6 +139,50 @@ pandora.ui.embedPanel = function() { } + function changeTimeline(data) { + 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}); + } + + function getOptions() { + var options = {}, + defaults = { + invertHighlight: true, + paused: true, + playInToOut: true, + width: window.innerWidth + }; + ui.hash.query.forEach(function(condition) { + if (condition.key != 'embed') { + options[condition.key] = condition.value; + } + }); + options = Ox.extend( + {item: ui.item}, + ui.videoPoints[ui.item] || {}, + defaults, + options + ); + if (!options.position) { + options.position = options['in'] || 0; + } + if (!options['in'] && !options.out) { + options.playInToOut = false; + } + return options; + } + + function setPosition(position, playing) { + !playing && $player.options({position: position}); + options.showTimeline && $timeline.options({position: position}); + options.showAnnotations && $annotations.options({position: position}); + } + that.display = function() { // fixme: move animation into Ox.App var animate = $('.OxScreen').length == 0; diff --git a/static/js/pandora/embedPlayer.js b/static/js/pandora/embedPlayer.js index e11fc5b9..c120bb32 100644 --- a/static/js/pandora/embedPlayer.js +++ b/static/js/pandora/embedPlayer.js @@ -1,11 +1,12 @@ -pandora.ui.embedPlayer = function(data) { +pandora.ui.embedPlayer = function(options, data) { - var options = getOptions(), - that = Ox.VideoPlayer(Ox.extend({ + var that = Ox.VideoPlayer(Ox.extend({ censored: data.censored, censoredIcon: pandora.site.cantPlay.icon, censoredTooltip: pandora.site.cantPlay.text, - controlsBottom: ['play', 'volume', 'scale'].concat( + controlsBottom: ['play', 'volume'].concat( + options.matchRatio ? [] : ['scale'] + ).concat( Ox.Fullscreen.available ? ['fullscreen'] : [] ).concat( ['timeline', 'position', 'settings'] @@ -27,6 +28,7 @@ pandora.ui.embedPlayer = function(data) { enableVolume: true, height: options.height, invertHighlight: options.invertHighlight, + muted: pandora.user.ui.videoMuted, paused: options.paused, playInToOut: options.playInToOut, position: options.position, @@ -36,6 +38,7 @@ pandora.ui.embedPlayer = function(data) { : 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 @@ -44,6 +47,7 @@ pandora.ui.embedPlayer = function(data) { } : '/' + options.item + '/' + 'timeline16p.png', title: data.title, video: data.video, + volume: pandora.user.ui.videoVolume, width: options.width }, options['in'] ? { 'in': options['in'] @@ -51,34 +55,6 @@ pandora.ui.embedPlayer = function(data) { out: options.out } : {})); - function getOptions() { - var ui = pandora.user.ui, - defaults = { - height: window.innerHeight, - invertHighlight: true, - paused: true, - playInToOut: true, - width: window.innerWidth - }, - options, - query = {}; - ui.hash.query.forEach(function(condition) { - if (condition.key != 'embed') { - query[condition.key] = condition.value; - } - }) - options = Ox.extend({ - item: ui.item - }, ui.videoPoints[ui.item] || {}, defaults, query); - if (!options.position) { - options.position = options['in'] || 0; - } - if (!options['in'] && !options.out) { - options.playInToOut = false; - } - return options; - } - return that; }; \ No newline at end of file