info view/clips annotations

static/js/pandora/clipList.js

@@ -7,7 +7,6 @@ pandora.ui.clipList = function(videoRatio) {
     var ui = pandora.user.ui,
         fixedRatio = !ui.item ? 16/9 : videoRatio,
         isClipView = !ui.item ? ui.listView == 'clip' : ui.itemView == 'clips',
-        textKey = pandora.getClipTextKey(),
         that = Ox.IconList({
             fixedRatio: fixedRatio,
             item: function(data, sort, size) {
@@ -22,7 +21,9 @@ pandora.ui.clipList = function(videoRatio) {
                     width = fixedRatio > 1 ? size : Math.round(size * fixedRatio);
                     height = fixedRatio > 1 ? Math.round(size / fixedRatio) : size;
                 }
-                title = data[textKey] ? data[textKey][0].value : '';
+                title = data.annotations ? data.annotations.map(function(annotation) {
+                    return Ox.stripTags(annotation.value);
+                }).join('; ') : '',
                 url = '/' + data.id.split('/')[0] + '/' + height + 'p' + data['in'] + '.jpg';
                 sortKey = sort[0].key;
                 if (['text', 'position', 'duration'].indexOf(sortKey) > -1) {
@@ -80,7 +81,7 @@ pandora.ui.clipList = function(videoRatio) {
                 }, data), callback);
             },
             keys: Ox.merge(
-                ['id', 'in', 'out', textKey],
+                ['annotations', 'id', 'in', 'out'],
                 !ui.item ? ['videoRatio'] : []
             ),
             max: 1,
@@ -102,7 +103,8 @@ pandora.ui.clipList = function(videoRatio) {
                     points = {
                         annotation: that.value(id, 'annotations')[0].id.split('/')[1],
                         'in': that.value(id, 'in'),
-                        out: that.value(id, 'out')
+                        out: that.value(id, 'out'),
+                        position: that.value(id, 'in')
                     },
                     set = {
                         item: item,

static/js/pandora/clipsView.js

@@ -4,8 +4,7 @@
 
 pandora.ui.clipsView = function(videoRatio) {
 
-    var textKey = pandora.getClipTextKey(),
+    var that = Ox.SplitPanel({
-        that = Ox.SplitPanel({
             elements: [
                 {
                     element: Ox.Bar({size: 24})
@@ -27,7 +26,7 @@ pandora.ui.clipsView = function(videoRatio) {
                                 .bindEvent({
                                     submit: function(data) {
                                         pandora.UI.set('itemFind', data.value ? {
-                                            conditions: [{key: textKey, value: data.value, operator: '='}],
+                                            conditions: [{key: 'annotations', value: data.value, operator: '='}],
                                             operator: '&'
                                         } : pandora.site.user.ui.itemFind);
                                         // since this is the only way itemFind can change,

static/js/pandora/infoView.js

@@ -88,7 +88,8 @@ pandora.ui.infoView = function(data) {
         $reflectionIcon = $('<img>')
             .attr({
                 src: '/' + data.id + '/' + (
-                    ui.icons == 'posters' ? 'poster' : 'icon'
+                    ui.icons == 'posters'
+                    ? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon'
                 ) + '512.jpg?' + uid
             })
             .css({
@@ -116,7 +117,6 @@ pandora.ui.infoView = function(data) {
                 left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
                 top: margin + 'px',
                 right: margin + statisticsWidth + margin + 'px',
-                //background: 'green'
             })
             .bindEvent(canEdit && !isEditable ? {
                 doubleclick: reloadMetadata
@@ -136,7 +136,7 @@ pandora.ui.infoView = function(data) {
 
         $browserImages = [];
 
-    pandora.createLinks($text);
+    pandora.createLinks($text); // FIXME: this is wrong for editables that already have clickLink
 
     // Title -------------------------------------------------------------------
 
@@ -211,7 +211,8 @@ pandora.ui.infoView = function(data) {
         var $div = $('<div>')
             .css(css)
             .appendTo($text);
-        ['country', 'year'].forEach(function(key) {
+        ['country', 'year'].forEach(function(key, i) {
+            i && $('<div>').css({float: 'left'}).html(';&nbsp;').appendTo($div);
             $('<div>')
                 .css({float: 'left'})
                 .html(formatKey(key).replace('</span>', '&nbsp;</span>'))
@@ -234,7 +235,6 @@ pandora.ui.infoView = function(data) {
                     }
                 })
                 .appendTo($div);
-            key == 'country' && $('<div>').css({float: 'left'}).html(';&nbsp;').appendTo($div);
         });
     } else if (data.country || data.year || data.language || data.runtime) {
         var html = [];

static/js/pandora/infoView.padma.js

@@ -14,15 +14,12 @@ pandora.ui.infoView = function(data) {
             MozUserSelect: 'text',
             WebkitUserSelect: 'text'
         },
-        iconRatio = ui.icons == 'posters'
+        iconRatio = ui.icons == 'posters' ? data.posterRatio : 1,
-            ? (ui.showSitePoster ? 5/8 : data.posterRatio) : 1,
         iconSize = ui.infoIconSize,
         iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio),
         iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio),
         iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0,
         borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8,
-        isEditable = canEdit,
-        listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
         margin = 16,
         statisticsWidth = 128,
         uid = Ox.uid(),
@@ -31,23 +28,18 @@ pandora.ui.infoView = function(data) {
 
         $list,
 
-        $info = $('<div>')
+        $info = Ox.Element()
             .css({
                 position: 'absolute',
-                left: canEdit && !ui.showIconBrowser ? -listWidth + 'px' : 0,
+                left: 0,
                 top: 0,
                 right: 0,
+                bottom: 0,
+                overflowY: 'auto'
             })
-            .appendTo(that.$element),
+            .appendTo(that),
 
-        $data = Ox.Container()
+        $left = Ox.Element()
-            .css({
-                position: 'absolute',
-                left: (canEdit ? listWidth : 0) + 'px',
-                top: 0,
-                right: 0,
-                height: pandora.$ui.contentPanel.size(1) + 'px'
-            })
             .appendTo($info),
 
         $icon = Ox.Element({
@@ -55,8 +47,7 @@ pandora.ui.infoView = function(data) {
             })
             .attr({
                 src: '/' + data.id + '/' + (
-                    ui.icons == 'posters'
+                    ui.icons == 'posters' ? 'poster' : 'icon'
-                    ? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon'
                 ) + '512.jpg?' + uid
             })
             .css({
@@ -71,7 +62,7 @@ pandora.ui.infoView = function(data) {
             .bindEvent({
                 singleclick: toggleIconSize
             })
-            .appendTo($data.$element),
+            .appendTo($left),
 
         $reflection = $('<div>')
             .addClass('OxReflection')
@@ -83,7 +74,7 @@ pandora.ui.infoView = function(data) {
                 height: iconSize / 2 + 'px',
                 overflow: 'hidden'
             })
-            .appendTo($data.$element),
+            .appendTo($left),
 
         $reflectionIcon = $('<img>')
             .attr({
@@ -108,42 +99,120 @@ pandora.ui.infoView = function(data) {
             })
             .appendTo($reflection),
 
-        $text = Ox.Element({
+        $data = $('<div>')
+            .css({
+                position: 'absolute',
+                left: margin + 'px',
+                top: margin + iconHeight + margin + 'px'
+            })
+            .appendTo($left),
+
+        $center = Ox.Element({
             })
             .css({
                 position: 'absolute',
                 left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
                 top: margin + 'px',
                 right: margin + statisticsWidth + margin + 'px',
-                //background: 'green'
             })
-            .appendTo($data.$element),
+            .appendTo($info),
 
-        $statistics = $('<div>')
+        $right = $('<div>')
             .css({
                 position: 'absolute',
                 width: statisticsWidth + 'px',
                 top: margin + 'px',
                 right: margin + 'px'
             })
-            .appendTo($data.$element),
+            .appendTo($info),
 
-        $capabilities,
+        $capabilities;
 
-        $browserImages = [];
+    if (!canEdit) {
+        pandora.createLinks($info);        
+    }
 
-    //pandora.createLinks($text);
+    var listKeys = [
+        'language', 'topic', 'director', 'cinematographer', 'featuring',
+        'groups', 'license'
+    ];
+
+    // Source & Project --------------------------------------------------------
+
+    ['source', 'project'].forEach(function(key) {
+
+        var $div = $('<div>').appendTo($data),
+            value = data[key] || '';
+        if (canEdit || value) {
+            $('<div>')
+                .css({float: 'left'})
+                .html(
+                    formatKey({
+                        category: 'categories',
+                    }[key] || key).replace('</span>', '&nbsp;</span>')
+                )
+                .appendTo($div);
+            Ox.Editable({
+                    clickLink: pandora.clickLink,
+                    format: function(value) {
+                        return listKeys.indexOf(key) >= 0
+                            ? formatValue(value.split(', '), {
+                                'director': 'name',
+                                'cinematographer': 'name',
+                                'features': 'name',
+                            }[key] || key)
+                            : value;
+                    },
+                    placeholder: formatLight('unknown'),
+                    editable: canEdit,
+                    tooltip: canEdit ? 'Doubleclick to edit' : '',
+                    value: listKeys.indexOf(key) >= 0
+                          ? (data[key] || []).join(', ')
+                          : data[key] || ''
+                })
+                .css({float: 'left'})
+                .bindEvent({
+                    submit: function(event) {
+                        editMetadata(key, event.value);
+                    }
+                })
+                .appendTo($div);
+            if (canEdit || data[key + 'description']) {
+                $('<br>').appendTo($div);
+                $('<div>')
+                    .append(
+                        descriptions[key] = Ox.Editable({
+                            clickLink: pandora.clickLink,
+                            placeholder: formatLight('No ' + Ox.toTitleCase(key) + ' Description'),
+                            editable: canEdit,
+                            tooltip: canEdit ? 'Doubleclick to edit' : '',
+                            type: 'textarea',
+                            value: data[key + 'description'] || ''
+                        })
+                        .bindEvent({
+                            submit: function(event) {
+                                editMetadata(key + 'description', event.value);
+                            }
+                        })
+                        .css(css)
+                    ).css({
+                        'margin-top': '8px',
+                    })
+                    .appendTo($div);
+            }
+        }
+    });
 
     // Title -------------------------------------------------------------------
 
     $('<div>')
         .css({
-            marginTop: '-2px'
+            marginTop: '-2px',
         })
         .append(
             Ox.Editable({
-                    editable: isEditable,
+                    editable: canEdit,
-                    tooltip: isEditable ? 'Doubleclick to edit' : '',
+                    tooltip: canEdit ? 'Doubleclick to edit' : '',
                     value: data.title
                 })
                 .css({
@@ -160,17 +229,140 @@ pandora.ui.infoView = function(data) {
                     }
                 })
         )
-        .appendTo($text);
+        .appendTo($center);
 
-    if(data.description || isEditable) {
+    // Location, Date & Language -----------------------------------------------
+
+    if (canEdit) {
+        var $div = $('<div>').css(css).css({marginTop: '12px'}).appendTo($center);
+        ['location', 'date', 'language'].forEach(function(key, i) {
+            i && $('<div>').css({float: 'left'}).html(';&nbsp;').appendTo($div);
             $('<div>')
+                .css({float: 'left'})
+                .html(formatKey(key).replace('</span>', '&nbsp;</span>'))
+                .appendTo($div);
+            Ox.Editable({
+                    clickLink: pandora.clickLink,
+                    format: function(value) {
+                        return formatValue(value.split(', '), key)
+                    },
+                    placeholder: formatLight('unknown'),
+                    tooltip: 'Doubleclick to edit',
+                    value: listKeys.indexOf(key) >= 0
+                          ? (data[key] || []).join(', ')
+                          : data[key] || ''
+                })
+                .css({float: 'left'})
+                .bindEvent({
+                    submit: function(event) {
+                        editMetadata(key, event.value);
+                    }
+                })
+                .appendTo($div);
+        });
+        $('<br>').appendTo($center);
+    } else if (data.location || data.date || data.language) {
+        var html = [];
+        ['location', 'date', 'language'].forEach(function(key) {
+            if (data[key]) {
+                html.push(
+                    formatKey(key)
+                    + formatValue(data[key], key)
+                )
+            }
+        });
+        $('<div>').css(css).html(html.join('; ')).appendTo($center);
+    }
+
+    // Director, Cinematographer and Featuring ---------------------------------
+
+    if (canEdit) {
+        var $div = $('<div>').css(css).appendTo($center);
+        ['director', 'cinematographer', 'featuring'].forEach(function(key, i) {
+            i && $('<div>').css({float: 'left'}).html(';&nbsp;').appendTo($div);
+            $('<div>')
+                .css({float: 'left'})
+                .html(formatKey(key).replace('</span>', '&nbsp;</span>'))
+                .appendTo($div);
+            Ox.Editable({
+                    clickLink: pandora.clickLink,
+                    format: function(value) {
+                        return formatValue(value.split(', '), 'name')
+                    },
+                    placeholder: formatLight('unknown'),
+                    tooltip: 'Doubleclick to edit',
+                    value: listKeys.indexOf(key) >= 0
+                          ? (data[key] || []).join(', ')
+                          : data[key] || ''
+                })
+                .css({float: 'left'})
+                .bindEvent({
+                    submit: function(event) {
+                        editMetadata(key, event.value);
+                    }
+                })
+                .appendTo($div);
+        });
+        $('<br>').appendTo($center);
+    } else if (data.director || data.cinematographer || data.featuring) {
+        var html = [];
+        ['director', 'cinematographer', 'featuring'].forEach(function(key) {
+            if (data[key].length) {
+                html.push(
+                    formatKey(key)
+                    + formatValue(data[key], key)
+                )
+            }
+        });
+        $('<div>').css(css).html(html.join('; ')).appendTo($center);
+    }
+
+    // Topic -------------------------------------------------------------------
+
+    if (canEdit) {
+        var $div = $('<div>').css(css).appendTo($center),
+            key = 'topic';
+        $('<div>')
+            .css({float: 'left'})
+            .html(formatKey('Topics').replace('</span>', '&nbsp;</span>'))
+            .appendTo($div);
+        Ox.Editable({
+                clickLink: pandora.clickLink,
+                format: function(value) {
+                    return formatValue(value.split(', '), key)
+                },
+                placeholder: formatLight('unknown'),
+                tooltip: 'Doubleclick to edit',
+                value: listKeys.indexOf(key) >= 0
+                      ? (data[key] || []).join(', ')
+                      : data[key] || ''
+            })
+            .css({float: 'left'})
+            .bindEvent({
+                submit: function(event) {
+                    editMetadata(key, event.value);
+                }
+            })
+            .appendTo($div);
+        $('<br>').appendTo($center);
+        
+    } else if (data.topic) {
+        var html = formatKey('topics') + formatValue(data.topic, 'topic');
+        $('<div>').css(css).html(html).appendTo($center);
+    }
+
+    // Description -------------------------------------------------------------
+
+    if (canEdit) {
+        $('<div>')
+            .css({marginTop: '16px'})
             .append(
                 Ox.Editable({
                     clickLink: pandora.clickLink,
-                    editable: isEditable,
+                    editable: canEdit,
                     maxHeight: Infinity,
                     placeholder: formatLight('No description'),
-                    tooltip: isEditable ? 'Doubleclick to edit' : '',
+                    tooltip: canEdit ? 'Doubleclick to edit' : '',
                     type: 'textarea',
                     value: data.description || '',
                     //width: 300
@@ -182,109 +374,49 @@ pandora.ui.infoView = function(data) {
                 })
                 .css(css)
             )
-            .appendTo($text);
+            .appendTo($center);
+    } else if(data.description) {
+        $('<div>').css(css).html(data.description).appendTo($center);
     }
 
-    var listKeys = ['language', 'topic', 'director', 'cinematographer', 'features', 'groups',
+    // License ---------------------------------------------------------------
-                    'license'];
+    $div = $('<div>').css(css).css({marginTop: '16px'}).appendTo($center);
-    $('<div>').html('<br>').appendTo($text);
+    if (canEdit) {
-    [
-        'source',
-        'project',
-        'year',
-        'date',
-        'location',
-        'director',
-        'cinematographer',
-        'features',
-        'language',
-        'topic',
-        'license',
-        'user',
-    ].forEach(function(key) {
-
-        var $div = $('<div>').appendTo($text),
-            value = listKeys.indexOf(key) >= 0
-                          ? (data[key] || []).join(', ')
-                          : data[key] || '';
-        if (isEditable || value) {
         $('<div>')
-                .html(
+            .css({float: 'left'})
-                    formatKey({
+            .html(formatKey('license').replace('</span>', '&nbsp;</span>'))
-                        categorty: 'categories',
-                    }[key] || key).replace('</span>', '&nbsp;</span>')
-                )
             .appendTo($div);
         Ox.Editable({
-                clickLink: pandora.clickLink,
+            placeholder: formatLight('No License'),
-                format: function(value) {
+            tooltip: 'Doubleclick to edit',
-                    return listKeys.indexOf(key) >= 0
+            value: data.license.join(', '),
-                        ? formatValue(value.split(', '), {
-                            'director': 'name',
-                            'cinematographer': 'name',
-                            'features': 'name',
-                        }[key] || key)
-                        : value;
-                },
-                placeholder: formatLight('unknown'),
-                editable: isEditable,
-                tooltip: isEditable ? 'Doubleclick to edit' : '',
-                value: listKeys.indexOf(key) >= 0
-                      ? (data[key] || []).join(', ')
-                      : data[key] || ''
         })
         .bindEvent({
             submit: function(event) {
-                    editMetadata(key, event.value);
+                editMetadata('license', event.value);
             }
         })
-            .css(css)
-            .appendTo($div);
-            if(pandora.site.itemKeys.filter(function(item) {
-                if (item.id == key)
-                    return item.description
-                }).length > 0
-                && (isEditable || data[key + 'description'])) {
-                $('<div>')
-                    .append(
-                        descriptions[key] = Ox.Editable({
-                            clickLink: pandora.clickLink,
-                            placeholder: formatLight('No ' + Ox.toTitleCase(key) + ' Description'),
-                            editable: isEditable,
-                            tooltip: isEditable ? 'Doubleclick to edit' : '',
-                            type: 'textarea',
-                            value: data[key + 'description']|| ''
-                        })
-                        .bindEvent({
-                            submit: function(event) {
-                                editMetadata(key + 'description', event.value);
-                            }
-                        })
-                        .css(css)
-                    ).css({
-                        'padding-top': '4px',
-                        'padding-bottom': '4px'
-                    })
         .appendTo($div);
+    } else if(data.license) {
+        $div.html(
+            formatKey('License')
+            + data.license.join(', ')
+        );
     }
-        }
-    });
 
-    $('<div>').css({height: '16px'}).appendTo($text);
+    // User, Created & Modified ------------------------------------------------
-    [
-        'created',
-        'accessed',
-        'modified',
-    ].forEach(function(key) {
-        $('<span>')
-        .css({padding: '4px'})
-        .html(
-            formatKey(key) + data[key]
-        )
-        .appendTo($text);
-    });
 
-    $('<div>').css({height: '16px'}).appendTo($text);
+    $div = $('<div>').css(css).css({marginTop: '16px'}).appendTo($center);
+    html = [];
+    ['user', 'created', 'modified'].forEach(function(key) {
+        data[key] && html.push(
+            formatKey(key == 'modified' ? 'Last Modified' : key)
+            + (key == 'user' ? data.user : Ox.formatDate(data[key], '%F %T'))
+        );
+    });
+    $div.html(html.join('; '));
+
+    $('<div>').css({height: '16px'}).appendTo($center);
 
     // Hue, Saturation, Lightness, Volume --------------------------------------
 
@@ -297,18 +429,20 @@ pandora.ui.infoView = function(data) {
                     data[key] || 0, key == 'volume' ? 'lightness' : key
                 ).css({textAlign: 'right'})
             )
-            .appendTo($statistics);
+            .appendTo($right);
     });
 
     // Rights Level ------------------------------------------------------------
 
+    if (canEdit) {
         var $rightsLevel = $('<div>');
         $('<div>')
             .css({marginBottom: '4px'})
             .append(formatKey('Rights Level', true))
             .append($rightsLevel)
-        .appendTo($statistics);
+            .appendTo($right);
         renderRightsLevel();
+    }
 
     // Groups, Notes ---------------------------------------------------------
 
@@ -329,7 +463,7 @@ pandora.ui.infoView = function(data) {
                         }
                     })
             )
-            .appendTo($statistics);
+            .appendTo($right);
 
         $('<div>')
             .css({marginBottom: '4px'})
@@ -349,18 +483,18 @@ pandora.ui.infoView = function(data) {
                         }
                     })
             )
-            .appendTo($statistics);
+            .appendTo($right);
 
     }
 
-    $('<div>').css({height: '16px'}).appendTo($statistics);
+    $('<div>').css({height: '16px'}).appendTo($right);
 
     function editMetadata(key, value) {
         if (value != data[key]) {
             var edit = {id: data.id};
             if (key == 'title') {
                 edit[key] = value;
-            } else if(listKeys.indexOf(key) > -1) {
+            } else if (listKeys.indexOf(key) > -1) {
                 edit[key] = value ? value.split(', ') : [];
             } else {
                 edit[key] = value;
@@ -368,7 +502,7 @@ pandora.ui.infoView = function(data) {
             pandora.api.edit(edit, function(result) {
                 data[key] = value;
                 descriptions[key] && descriptions[key].options({
-                    value: result.data[key+'description']
+                    value: result.data[key + 'description']
                 });
 
                 Ox.Request.clearCache(); // fixme: too much? can change filter/list etc
@@ -565,7 +699,10 @@ pandora.ui.infoView = function(data) {
             width: iconSize + 'px',
             height: iconSize / 2 + 'px'
         }, 250);
-        $text.animate({
+        $data.animate({
+            top: margin + iconHeight + margin + 'px'
+        }, 250);
+        $center.animate({
             left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
         }, 250);
         pandora.UI.set({infoIconSize: iconSize});
@@ -573,9 +710,8 @@ pandora.ui.infoView = function(data) {
 
     that.reload = function() {
         var src = src = '/' + data.id + '/' + (
-            ui.icons == 'posters'
+                ui.icons == 'posters' ? 'poster' : 'icon'
-            ? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon'
+            ) + '512.jpg?' + Ox.uid();
-        ) + '512.jpg?' + Ox.uid()
         $icon.attr({src: src});
         $reflectionIcon.attr({src: src});
         iconSize = iconSize == 256 ? 512 : 256;
@@ -586,9 +722,7 @@ pandora.ui.infoView = function(data) {
     };
 
     that.resize = function() {
-        var height = pandora.$ui.contentPanel.size(1);
+
-        $list && $list.css({height: height + 'px'});
-        $data.css({height: height + 'px'});
     };
 
     that.bindEvent({

static/js/pandora/item.js

@@ -167,11 +167,8 @@ pandora.ui.item = function() {
                     pandora.UI.set({annotationsSort: data.sort});
                 },
                 find: function(data) {
-                    var textKey = Ox.getObjectById(pandora.site.layers, 'subtitles')
-                        ? 'subtitles'
-                        : 'annotations';
                     pandora.UI.set('itemFind', data.find ? {
-                        conditions: [{key: textKey, value: data.find, operator: '='}],
+                        conditions: [{key: 'annotations', value: data.find, operator: '='}],
                         operator: '&'
                     } : pandora.site.user.ui.itemFind);
                 },
@@ -319,11 +316,8 @@ pandora.ui.item = function() {
                         });
                     },
                     find: function(data) {
-                        var textKey = Ox.getObjectById(pandora.site.layers, 'subtitles')
-                            ? 'subtitles'
-                            : 'annotations';
                         pandora.UI.set('itemFind', data.find ? {
-                            conditions: [{key: textKey, value: data.find, operator: '='}],
+                            conditions: [{key: 'annotations', value: data.find, operator: '='}],
                             operator: '&'
                         } : pandora.site.user.ui.itemFind);
                     },

static/js/pandora/itemClips.js

@@ -3,7 +3,6 @@
 pandora.ui.itemClips = function(options) {
 
     var self = {},
-        textKey = pandora.getClipTextKey(),
         that = Ox.Element()
             .css({
                 height: '192px',
@@ -27,20 +26,24 @@ pandora.ui.itemClips = function(options) {
 
     self.options.clips.forEach(function(clip, i) {
         Ox.Log('', 'CLIP', clip)
-        var id = self.options.id + '/' + clip['in'],
+        var annotations = clip.annotations.sort(function(a, b) {
-            title = Ox.map(clip.annotations, function(annotation) {
+                var layerA = pandora.site.clipLayers.indexOf(a.layer),
-                if(textKey == 'subtitles') {
+                    layerB = pandora.site.clipLayers.indexOf(b.layer);
-                    return annotation.layer == 'subtitles' ? annotation.value : 0;
+                return layerA < layerB ? -1
-                }
+                    : layerA > layerB ? 1
-                return annotation.value;
+                    : a.value < b.value ? -1
+                    : a.value > b.value ? 1
+                    : 0;
             }),
             url = '/' + self.options.id + '/' + self.height + 'p' + clip['in'] + '.jpg',
             $item = Ox.IconItem({
                 imageHeight: self.height,
                 imageWidth: self.width,
-                id: id,
+                id: clip.id,
                 info: Ox.formatDuration(clip['in']) + ' - ' + Ox.formatDuration(clip.out),
-                title: title[0] || '',
+                title: annotations.map(function(annotation) {
+                    return Ox.stripTags(annotation.value);
+                }).join('; '),
                 url: url,
             })
             .addClass('OxInfoIcon')
@@ -50,13 +53,15 @@ pandora.ui.itemClips = function(options) {
                     : i == self.options.clips.length - 1 ? '2px -2px 2px 2px'
                     : '2px'
             })
-            .data({'in': clip['in'], out: clip.out});
+            .data(Ox.extend(annotations.length ? {
+                annotation: annotations[0].id.split('/')[1],
+            } : {}, {'in': clip['in'], out: clip.out}));
         $item.$element.find('.OxTarget').addClass('OxSpecialTarget');
         that.append($item);
     });
 
     function doubleclick(data) {
-        var $item, $target = $(data.target), item, points, set;
+        var $item, $target = $(data.target), annotation, item, points, set;
         if ($target.parent().parent().is('.OxSpecialTarget')) {
             // for videos, the click registers deeper inside
             $target = $target.parent().parent();
@@ -64,13 +69,16 @@ pandora.ui.itemClips = function(options) {
         if ($target.is('.OxSpecialTarget')) {
             $item = $target.parent().parent();
             item = self.options.id;
+            annotation = $item.data('annotation');
             points = [$item.data('in'), $item.data('out')];
             set = {};
-            set['videoPoints.' + item] = {
+            set['videoPoints.' + item] = Ox.extend(annotation ? {
+                annotation: annotation
+            } : {}, {
                 'in': points[0],
                 out: points[1],
                 position: points[0]
-            };
+            });
             pandora.UI.set(set);
         }
     }

static/js/pandora/menu.js

@@ -226,10 +226,13 @@ pandora.ui.mainMenu = function() {
                 }
             },
             click: function(data) {
-                if ([
+                if (Ox.merge(
-                    'home', 'about', 'news', 'tour', 'faq', 'terms', 'rights', 'contact', 'software',
+                    ['home', 'software'],
-                    'signup', 'signin', 'signout', 'preferences', 'tv', 'help'
+                    pandora.site.sitePages.map(function(page) {
-                ].indexOf(data.id) > -1) {
+                        return page.id;
+                    }),
+                    ['signup', 'signin', 'signout', 'preferences', 'tv', 'help']
+                ).indexOf(data.id) > 1) {
                     pandora.UI.set({page: data.id});
                 } else if ([
                     'newlist', 'newlistfromselection', 'newsmartlist', 'newsmartlistfromresults'

static/js/pandora/utils.js

@@ -247,7 +247,7 @@ pandora.enableDragAndDrop = function($list, canMove) {
         },
         draganddroppause: function(data) {
             var event = data._event, scroll,
-                $parent, $grandparent, $panel, $bar, title;
+                $parent, $grandparent, $panel, title;
             // fixme: should be named showLists in the user ui prefs!
             if (!pandora.user.ui.showSidebar) {
                 if (event.clientX < 16 && event.clientY >= 44
@@ -261,10 +261,12 @@ pandora.enableDragAndDrop = function($list, canMove) {
                 $panel = $parent.is('.OxCollapsePanel') ? $parent
                     : $grandparent.is('.OxCollapsePanel') ? $grandparent : null;
                 if ($panel) {
-                    $bar = $panel.children('.OxBar');
+                    title = $panel.children('.OxBar').children('.OxTitle')
-                    title = $bar.children('.OxTitle')
                         .html().split(' ')[0].toLowerCase();
-                    !pandora.user.ui.showFolder.items[title] && $bar.trigger('dblclick');
+                    // !pandora.user.ui.showFolder.items[title] && $bar.trigger('dblclick');
+                    if (!pandora.user.ui.showFolder.items[title]) {
+                        Ox.UI.elements[$panel.data('oxid')].options({collapsed: false});
+                    }
                 }
                 if (!scrollInterval) {
                     //Ox.Log('', 'AT TOP', isAtListsTop(event), 'AT BOTTOM', isAtListsBottom(event))
@@ -496,12 +498,6 @@ pandora.getClipsQuery = function() {
     return clipsQuery;
 };
 
-pandora.getClipTextKey = function() {
-    return Ox.getObjectById(pandora.site.layers, 'subtitles')
-        ? 'subtitles'
-        : 'annotations';
-};
-
 (function() {
     var itemTitles = {};
     pandora.getDocumentTitle = function(itemTitle) {