clips view (experimental)

static/js/pandora/ui/list.js

@@ -183,7 +183,93 @@ pandora.ui.list = function() {
     } else if (view == 'info') {
         that = Ox.Element().css({margin: '16px'}).html(view + ' results view still missing.');
     } else if (view == 'clips') {
-        that = Ox.Element().css({margin: '16px'}).html(view + ' results view still missing.');
+        that = Ox.InfoList({
+            borderRadius: pandora.user.ui.icons == 'posters' ? 0 : 16,
+            defaultRatio: pandora.user.ui.icons == 'posters' ? 5/8 : 1,
+            draggable: true,
+            id: 'list',
+            item: function(data, sort, size) {
+                size = 128;
+                var ui = pandora.user.ui,
+                    ratio = ui.icons == 'posters'
+                        ? (ui.showSitePoster ? 5/8 : data.posterRatio) : 1,
+                    url = '/' + data.id + '/' + (
+                        ui.icons == 'posters'
+                        ? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon'
+                    ) + size + '.jpg',
+                    format, info, sortKey = sort[0].key;
+                if (['title', 'director'].indexOf(sortKey) > -1) {
+                    info = data['year'];
+                } else {
+                    format = pandora.getSortKeyData(sortKey).format;
+                    info = format
+                        ? Ox['format' + Ox.toTitleCase(format.type)]
+                            .apply(this, Ox.merge([data[sortKey]], format.args || []))
+                        : data[sortKey];
+                }
+                return {
+                    icon: {
+                        height: Math.round(ratio <= 1 ? size : size / ratio),
+                        id: data.id,
+                        info: info,
+                        title: data.title + (data.director.length ? ' (' + data.director.join(', ') + ')' : ''),
+                        url: url,
+                        width: Math.round(ratio >= 1 ? size : size * ratio)
+                    },
+                    info: {
+                        css: {height: '192px'},
+                        element: Ox.IconList,
+                        id: data.id,
+                        options: {
+                            item: function(data, sort, size) {
+                                size = size || 128; // fixme: is this needed?
+                                var width = data.videoRatio > 1 ? size : Math.round(size * data.videoRatio),
+                                    height = data.videoRatio > 1 ? Math.round(size / data.videoRatio) : size;
+                                    url = '/' + data.id.split('/')[0] + '/' + height + 'p' + data['in'] + '.jpg';
+                                return {
+                                    height: height,
+                                    id: data.id,
+                                    info: Ox.formatDuration(data['in']) + ' - ' + Ox.formatDuration(data.out),
+                                    title: '',
+                                    url: url,
+                                    width: width
+                                };
+                            },
+                            items: pandora.getClipPoints(data.duration, 5).map(function(points) {
+                                return Ox.extend(points, {
+                                    id: data.id + '/' + points['in'],
+                                    videoRatio: data.videoRatio
+                                });
+                            }),
+                            max: 1,
+                            orientation: 'horizontal',
+                            size: 128,
+                            sort: [{key: 'in', operator: '+'}],
+                            unique: 'id'
+                        }
+                    }
+                };
+            },
+            items: function(data, callback) {
+                pandora.api.find(Ox.extend(data, {
+                    query: pandora.user.ui.find,
+                    // clipsQuery: ...
+                }), callback);
+            },
+            keys: ['director', 'duration', 'id', 'posterRatio', 'title', 'videoRatio', 'year'],
+            selected: pandora.user.ui.listSelection,
+            size: 192,
+            sort: pandora.user.ui.listSort,
+            unique: 'id'
+        })
+        .bindEvent({
+            key_left: function() {
+                // ...
+            },
+            key_right: function() {
+                // ...
+            }
+        });
     } else if (view == 'timelines') {
         that = Ox.InfoList({
             borderRadius: pandora.user.ui.icons == 'posters' ? 0 : 16,
@@ -208,7 +294,7 @@ pandora.ui.list = function() {
                         ? Ox['format' + Ox.toTitleCase(format.type)]
                             .apply(this, Ox.merge([data[sortKey]], format.args || []))
                         : data[sortKey];
-                }                
+                }
                 return {
                     icon: {
                         height: Math.round(ratio <= 1 ? size : size / ratio),
@@ -219,15 +305,10 @@ pandora.ui.list = function() {
                         width: Math.round(ratio >= 1 ? size : size * ratio)
                     },
                     info: {
-                        /*
+                        css: {marginTop: '2px'},
-                        css: {
-                            margin: '4px'
-                        },
-                        */
                         element: Ox.BlockVideoTimeline,
                         events: {
                             position: function(event) {
-                                //that.options({selected: [data.id]});
                                 pandora.$ui.videoPreview.options({
                                     position: event.position
                                 });
@@ -237,18 +318,21 @@ pandora.ui.list = function() {
                         id: data.id,
                         options: {
                             duration: data.duration,
+                            // find: '...',
                             getImageURL: function(i) {
                                 return '/' + data.id + '/timeline16p' + i + '.png';
                             },
                             position: pandora.user.ui.videoPoints[data.id]
-                                ? pandora.user.ui.videoPoints[data.id].position : 0
+                                ? pandora.user.ui.videoPoints[data.id].position : 0,
+                            // subtitles: data.subtitles
                         }
                     }
                 };
             },
             items: function(data, callback) {
                 pandora.api.find(Ox.extend(data, {
-                    query: pandora.user.ui.find
+                    query: pandora.user.ui.find,
+                    // clipsQuery: ...
                 }), callback);
             },
             keys: ['director', 'duration', 'id', 'posterRatio', 'title', 'year'],
@@ -256,7 +340,15 @@ pandora.ui.list = function() {
             size: 192,
             sort: pandora.user.ui.listSort,
             unique: 'id'
-        });        
+        })
+        .bindEvent({
+            key_left: function() {
+                // ...
+            },
+            key_right: function() {
+                // ...
+            }
+        });
     } else if (view == 'maps') {
         that = Ox.Element().css({margin: '16px'}).html(view + ' results view still missing.');
     } else if (view == 'calendars') {
@@ -277,7 +369,7 @@ pandora.ui.list = function() {
             });
     }
 
-    if (['list', 'grid', 'timelines'].indexOf(view) > -1) {
+    if (['list', 'grid', 'clips', 'timelines'].indexOf(view) > -1) {
 
         pandora.enableDragAndDrop(that, true);
 

static/js/pandora/utils.js

@@ -416,6 +416,14 @@ pandora.exitFullscreen = function() {
     pandora.user.ui.showBrowser && pandora.$ui.contentPanel.size(0, 112 + Ox.UI.SCROLLBAR_SIZE);
 };
 
+pandora.getClipPoints = function(duration, number) {
+    var step = Math.max(Math.floor((duration - 5) / 60 / (number + 1)), 1) * 60;
+    Ox.print('STEP', step)
+    return Ox.range(step, duration - 4.999, step).map(function(position) {
+        return {'in': position, 'out': position + 5};
+    });
+};
+
 pandora.getFoldersHeight = function() {
     var height = 0;
     pandora.site.sectionFolders[pandora.user.ui.section].forEach(function(folder, i) {