update pad.ma home screen (fixes #448 and #489)

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();
+                    var that = Ox.Element(),
-                    pandora.api.get({id: options.item, keys: []}, function(result) {
+                        keys = [ 'cuts', 'director', 'duration', 'layers', 'parts', 'posterFrame', 'rendered', 'rightslevel', 'size', 'title', 'videoRatio', 'year'];
-                        var video = {};
+                    pandora.api.get({id: options.item, keys: keys}, function(result) {
-                        pandora.site.video.resolutions.forEach(function(resolution) {
+                        var video = {},
-                            video[resolution] = Ox.range(result.data.parts).map(function(i) {
+                            videoOptions = getVideoOptions(result.data);
-                                var part = (i + 1),
+                        Ox.print(videoOptions);
-                                    prefix = pandora.site.site.videoprefix.replace('PART', part);
+                        Ox.print('/' + options.item + '/' + 'timeline16p.png');
-                                return prefix + '/' + options.item + '/'
-                                    + resolution + 'p' + part + '.' + pandora.user.videoFormat;
-                            });
-                        });
                         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;
+    }
 });

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,11 +398,14 @@ pandora.ui.home = function() {
                             .hide()
                             .bindEvent({
                                 mousedown: function() {
+                                    counter = 0;
                                     scrollToPosition(position + 1, true);
                                 },
                                 mouserepeat: function() {
+                                    if (counter++ % 10 == 0) {
                                         scrollToPosition(position + 1, false);
                                     }
+                                }
                             })
                             .appendTo($listsBox);
                         $listsBox.bind({
@@ -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] = $('<div>')
+                            .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: '<img>',
                                 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) {

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';
                     },