diff --git a/static/js/embedInfo.js b/static/js/embedInfo.js index cc4bbaacb..e3887927c 100644 --- a/static/js/embedInfo.js +++ b/static/js/embedInfo.js @@ -2,15 +2,103 @@ pandora.ui.embedInfo = function() { - var ui = pandora.user.ui, + var item = pandora.user.ui.item, - that = Ox.Element(), + data, - $poster = Ox.Element('') - .attr({ - src: '/' + pandora.user.ui.item + '/poster.jpg' - }) - .appendTo(that); + that = Ox.Element(); + + pandora.api.get({ + id: item, + keys: ['director', 'posterRatio', 'title', 'year'] + }, function(result) { + + data = result.data; + + var posterSize = 256, + posterWidth = Math.round( + data.posterRatio > 1 + ? posterSize + : posterSize * data.posterRatio + ), + posterHeight = Math.round( + data.posterRatio > 1 + ? posterSize / data.posterRatio + : posterSize + ), + posterLeft = Math.floor( + (window.innerWidth - posterWidth) / 2 + ), + textCSS = { + marginTop: '8px', + fontWeight: 'bold', + fontSize: '13px', + textAlign: 'center' + }, + + $icon = Ox.$('') + .attr({src: '/' + item + '/poster256.jpg'}) + .css({ + position: 'absolute', + left: posterLeft + 'px', + top: '8px', + width: posterWidth + 'px', + height: posterHeight + 'px', + cursor: 'pointer' + }) + .appendTo(that), + + $reflection = Ox.$('
') + .addClass('OxReflection') + .css({ + position: 'absolute', + left: posterLeft + 'px', + top: posterHeight + 8 + 'px', + width: '256px', + height: '128px', + overflow: 'hidden' + }) + .appendTo(that), + + $reflectionIcon = Ox.$('') + .attr({src: '/' + item + '/poster256.jpg'}) + .css({ + position: 'absolute', + width: posterWidth + 'px', + height: posterHeight + 'px' + }) + .appendTo($reflection), + + $reflectionGradient = Ox.$('
') + .css({ + position: 'absolute', + width: '256px', + height: '128px' + }) + .appendTo($reflection), + + $text = Ox.$('
') + .css({ + position: 'absolute', + left: '8px', + top: 8 + 8 + posterHeight + 'px', + right: '8px' + }) + .appendTo(that); + + Ox.$('
') + .css(textCSS) + .html(data.title + (data.year ? ' (' + data.year + ')' : '')) + .appendTo($text); + + if (data.director) { + Ox.$('
') + .css(textCSS) + .html(data.director.join(', ')) + .appendTo($text); + } + + }); return that;