From 5b144d6cf1e222aa495d3d598da70c410cf243b3 Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 17 Feb 2012 09:12:48 +0000 Subject: [PATCH] update pad.ma home screen (fixes #448 and #489) --- static/js/embed/pandora.js | 76 ++++++++++++++++++++++++----- static/js/pandora/home.padma.js | 43 +++++++++++----- static/js/pandora/infoView.padma.js | 2 +- 3 files changed, 94 insertions(+), 27 deletions(-) diff --git a/static/js/embed/pandora.js b/static/js/embed/pandora.js index 9437a4af..cbe3e3fd 100755 --- a/static/js/embed/pandora.js +++ b/static/js/embed/pandora.js @@ -15,18 +15,15 @@ Ox.load('UI', { user: data.user.level == 'guest' ? Ox.clone(data.site.user) : data.user, ui: {}, clip: function(options) { - var that = Ox.Element(); - pandora.api.get({id: options.item, keys: []}, function(result) { - var video = {}; - pandora.site.video.resolutions.forEach(function(resolution) { - video[resolution] = Ox.range(result.data.parts).map(function(i) { - var part = (i + 1), - prefix = pandora.site.site.videoprefix.replace('PART', part); - return prefix + '/' + options.item + '/' - + resolution + 'p' + part + '.' + pandora.user.videoFormat; - }); - }); + var that = Ox.Element(), + keys = [ 'cuts', 'director', 'duration', 'layers', 'parts', 'posterFrame', 'rendered', 'rightslevel', 'size', 'title', 'videoRatio', 'year']; + pandora.api.get({id: options.item, keys: keys}, function(result) { + var video = {}, + videoOptions = getVideoOptions(result.data); + Ox.print(videoOptions); + Ox.print('/' + options.item + '/' + 'timeline16p.png'); that.append(pandora.player = Ox.VideoPlayer({ + censored: videoOptions.censored, controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'settings'], enableFind: false, enableFullscreen: true, @@ -40,13 +37,14 @@ Ox.load('UI', { out: options.out, paused: options.paused, position: options['in'], - poster: '/' + options.item + '/' + '128p' + options['in'] +'.jpg', + poster: '/' + options.item + '/' + '96p' + options['in'] +'.jpg', resolution: pandora.user.ui.videoResolution, showMarkers: false, showMilliseconds: 0, + subtitles: videoOptions.subtitles, timeline: '/' + options.item + '/' + 'timeline16p.png', title: result.data.title, - video: video, + video: videoOptions.video, width: document.width }) .bindEvent({ @@ -107,4 +105,56 @@ Ox.load('UI', { } } }); + function getVideoOptions(data) { + var canPlayClips = data.editable || pandora.site.capabilities.canPlayClips[pandora.user.level] >= data.rightslevel, + canPlayVideo = data.editable || pandora.site.capabilities.canPlayVideo[pandora.user.level] >= data.rightslevel, + options = {}; + options.subtitles = data.layers.subtitles + ? data.layers.subtitles.map(function(subtitle) { + return {'in': subtitle['in'], out: subtitle.out, text: subtitle.value}; + }) + : []; + options.censored = canPlayVideo ? [] + : canPlayClips ? ( + options.subtitles.length + ? Ox.merge( + options.subtitles.map(function(subtitle, i) { + return { + 'in': i == 0 ? 0 : options.subtitles[i - 1].out, + out: subtitle['in'] + }; + }), + [{'in': Ox.last(options.subtitles).out, out: data.duration}] + ) + : Ox.range(0, data.duration - 5, 60).map(function(position) { + return { + 'in': position + 5, + out: Math.min(position + 60, data.duration) + }; + }) + ) + : [{'in': 0, out: data.duration}]; + options.video = {}; + pandora.site.video.resolutions.forEach(function(resolution) { + options.video[resolution] = Ox.range(data.parts).map(function(i) { + var part = (i + 1), + prefix = pandora.site.site.videoprefix.replace('{part}', part); + return prefix + '/' + (data.item || pandora.user.ui.item) + '/' + + resolution + 'p' + part + '.' + pandora.user.videoFormat; + }); + }); + options.layers = []; + pandora.site.layers.forEach(function(layer, i) { + options.layers[i] = Ox.extend({}, layer, { + items: data.layers[layer.id].map(function(annotation) { + annotation.duration = Math.abs(annotation.out - annotation['in']); + annotation.editable = annotation.editable + || annotation.user == pandora.user.username + || pandora.site.capabilities['canEditAnnotations'][pandora.user.level]; + return annotation; + }) + }); + }); + return options; + } }); diff --git a/static/js/pandora/home.padma.js b/static/js/pandora/home.padma.js index 91d93853..c2079e88 100644 --- a/static/js/pandora/home.padma.js +++ b/static/js/pandora/home.padma.js @@ -262,12 +262,14 @@ pandora.ui.home = function() { sort: [{key: 'position', operator: '+'}] }, function(result) { var lists = result.data.items, - items = 8, mouse = false, position = 0, selected = 0, + counter = 0, items = 8, mouse = false, position = 0, selected = 0, color = Ox.Theme() == 'classic' - ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)', + ? 'rgb(32, 32, 32)' : 'rgb(224, 224, 224)', $label, $icon, $text, - $listsBox, $listsContainer, $listsContent, $list = [], + $listsBox, $listsContainer, $listsContent, + $listBox = [], $listIcon = [], $previousButton, $nextButton; + $lists.empty(); if (lists.length) { $label = Ox.Label({ textAlign: 'center', @@ -396,10 +398,13 @@ pandora.ui.home = function() { .hide() .bindEvent({ mousedown: function() { + counter = 0; scrollToPosition(position + 1, true); }, mouserepeat: function() { - scrollToPosition(position + 1, false); + if (counter++ % 10 == 0) { + scrollToPosition(position + 1, false); + } } }) .appendTo($listsBox); @@ -417,6 +422,10 @@ pandora.ui.home = function() { }, 250, function() { $(this).hide(); }); + }, + mousewheel: function(e, delta, deltaX, deltaY) { + Ox.print('mwd', deltaX) + scrollToPosition(position + Math.round(deltaX), true); } }); self.keydown = function(e) { @@ -440,7 +449,19 @@ pandora.ui.home = function() { Ox.$document.bind({keydown: self.keydown}); } lists.forEach(function(list, i) { - $list[i] = Ox.Element({ + $listBox[i] = $('
') + .css({ + float: 'left', + width: '57px', + height: '57px', + padding: '2px', + margin: '2px', + borderRadius: '16px', + //background: i == selected ? color : 'transparent', + boxShadow: '0 0 2px ' + (i == selected ? color : 'transparent') + }) + .appendTo($listsContent); + $listIcon[i] = Ox.Element({ element: '', tooltip: list.name }) @@ -449,13 +470,9 @@ pandora.ui.home = function() { + list.name + '/icon256.jpg' }) .css({ - float: 'left', width: '57px', height: '57px', borderRadius: '16px', - margin: '4px', - boxShadow: i == selected - ? '0 0 2px ' + color : '', cursor: 'pointer' }) .bindEvent({ @@ -466,7 +483,7 @@ pandora.ui.home = function() { selectList(i); } }) - .appendTo($listsContent); + .appendTo($listBox[i]); }); } $lists.animate({opacity: 1}, 250); @@ -506,7 +523,7 @@ pandora.ui.home = function() { opacity: 0 }, 250, function() { $nextButton.hide(); - });; + }); } else { $nextButton.addClass('visible'); } @@ -518,11 +535,11 @@ pandora.ui.home = function() { } function selectList(i) { if (i >= 0 && i <= lists.length - 1 && i != selected) { - $list[selected].css({ + $listBox[selected].css({ boxShadow: 'none' }); selected = i; - $list[selected].css({ + $listBox[selected].css({ boxShadow: '0 0 2px ' + color }); if (selected < position) { diff --git a/static/js/pandora/infoView.padma.js b/static/js/pandora/infoView.padma.js index de655e58..2191fccf 100644 --- a/static/js/pandora/infoView.padma.js +++ b/static/js/pandora/infoView.padma.js @@ -246,7 +246,7 @@ pandora.ui.infoView = function(data) { clickLink: pandora.clickLink, editable: key != 'duration', format: function(value) { - return key != 'duration' ? formatValue(value.split(', '), key) + return key != 'duration' ? formatValue(value, key) : value < 60 ? Math.round(value) + ' sec' : Math.round(value / 60) + ' min'; },