add rudimentary support for viewing edit clips as grid

source/Ox.UI/js/Video/ClipPanel.js

@@ -8,6 +8,7 @@ Ox.ClipPanel = function(options, self) {
             clips: [],
             duration: 0,
             editable: false,
+            getClipImageURL: null,
             'in': 0,
             out: 0,
             position: 0,
@@ -182,7 +183,9 @@ Ox.ClipPanel = function(options, self) {
     }
 
     function getList() {
-        var $list = self.options.view == 'list' ? Ox.TableList({
+        var $list;
+        if (self.options.view == 'list') {
+            $list = Ox.TableList({
                 columns: [
                     {
                         align: 'right',
@@ -253,7 +256,42 @@ Ox.ClipPanel = function(options, self) {
                 sort: self.options.sort,
                 sortable: isSortable(),
                 unique: 'id'
-        }) : Ox.Element();
+            });
+        } else {
+            $list = Ox.IconList({
+                fixedRatio: pandora.site.video.previewRatio,
+                item: function(data, sort, size) {
+                    size = size || 128; // fixme: is this needed?
+                    var ratio = 16/9, //data.videoRatio,
+                        fixedRatio = pandora.site.video.previewRatio,
+                        width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio),
+                        height = Math.round(width / ratio),
+                        info,
+                        title = data.item,
+                        url = self.options.getClipImageURL(data.id, width, height);
+                    if (['text', 'position', 'duration', 'random'].indexOf(sort[0].key) > -1) {
+                        info = Ox.formatDuration(data['in']) + ' - '
+                            + Ox.formatDuration(data.out);
+                    } else {
+                        info = Ox.formatDuration(data['in']) + ' - '
+                            + Ox.formatDuration(data.out);
+                    }
+                    return {
+                        height: height,
+                        id: data.id,
+                        info: info,
+                        title: title,
+                        url: url,
+                        width: width
+                    };
+                },
+                items: self.options.clips,
+                keys: ['id', 'in', 'out'],
+                orientation: 'both',
+                sort: self.options.sort,
+                unique: 'id'
+            });
+        }
         $list.bindEvent({
             copy: function(data) {
                 that.triggerEvent('copy', data);

source/Ox.UI/js/Video/VideoEditPanel.js

@@ -17,6 +17,7 @@ Ox.VideoEditPanel = function(options, self) {
             editable: false,
             enableSubtitles: false,
             fullscreen: false,
+            getClipImageURL: null,
             getLargeTimelineURL: null,
             height: 0,
             'in': 0,
@@ -242,6 +243,7 @@ Ox.VideoEditPanel = function(options, self) {
             clips: Ox.clone(self.options.clips),
             duration: self.options.duration,
             editable: self.options.editable,
+            getClipImageURL: self.options.getClipImageURL,
             'in': self.options['in'],
             out: self.options.out,
             position: self.options.position,