From 7bdf8d8c0b6341a1b19c78962c7bad87f400ee15 Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Mon, 15 Jul 2013 11:34:11 +0000
Subject: [PATCH] add rudimentary support for viewing edit clips as grid

---
 source/Ox.UI/js/Video/ClipPanel.js      | 176 ++++++++++++++----------
 source/Ox.UI/js/Video/VideoEditPanel.js |   2 +
 2 files changed, 109 insertions(+), 69 deletions(-)

diff --git a/source/Ox.UI/js/Video/ClipPanel.js b/source/Ox.UI/js/Video/ClipPanel.js
index f17410a5..32a7f07b 100644
--- a/source/Ox.UI/js/Video/ClipPanel.js
+++ b/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,78 +183,115 @@ Ox.ClipPanel = function(options, self) {
     }
 
     function getList() {
-        var $list = self.options.view == 'list' ? Ox.TableList({
-            columns: [
-                {
-                    align: 'right',
-                    id: 'index',
-                    operator: '+',
-                    title: Ox._('Index'),
-                    visible: false,
-                    width: 60
-                },
-                {
-                    id: 'id',
-                    operator: '+',
-                    title: Ox._('ID'),
-                    unique: true,
-                    visible: false,
-                    width: 60
-                },
-                {
-                    id: 'item',
-                    operator: '+',
-                    title: Ox._(pandora.site.itemName.singular),
-                    visible: true,
-                    width: 60
-                },
-                {
-                    align: 'right',
-                    editable: isEditable,
-                    format: function(value) {
-                        return Ox.formatDuration(value, 3);
+        var $list;
+        if (self.options.view == 'list') {
+            $list = Ox.TableList({
+                columns: [
+                    {
+                        align: 'right',
+                        id: 'index',
+                        operator: '+',
+                        title: Ox._('Index'),
+                        visible: false,
+                        width: 60
                     },
-                    id: 'in',
-                    operator: '+',
-                    title: Ox._('In'),
-                    visible: true,
-                    width: 90
-                },
-                {
-                    align: 'right',
-                    editable: isEditable,
-                    format: function(value) {
-                        return Ox.formatDuration(value, 3);
+                    {
+                        id: 'id',
+                        operator: '+',
+                        title: Ox._('ID'),
+                        unique: true,
+                        visible: false,
+                        width: 60
                     },
-                    id: 'out',
-                    operator: '+',
-                    title: Ox._('Out'),
-                    visible: true,
-                    width: 90
-                },
-                {
-                    align: 'right',
-                    editable: isEditable,
-                    format: function(value) {
-                        return Ox.formatDuration(value, 3);
+                    {
+                        id: 'item',
+                        operator: '+',
+                        title: Ox._(pandora.site.itemName.singular),
+                        visible: true,
+                        width: 60
                     },
-                    id: 'duration',
-                    operator: '+',
-                    title: Ox._('Duration'),
-                    visible: true,
-                    width: 90
-                }
-            ],
-            columnsMovable: true,
-            columnsRemovable: true,
-            columnsResizable: true,
-            columnsVisible: true,
-            items: Ox.clone(self.options.clips),
-            scrollbarVisible: true,
-            sort: self.options.sort,
-            sortable: isSortable(),
-            unique: 'id'
-        }) : Ox.Element();
+                    {
+                        align: 'right',
+                        editable: isEditable,
+                        format: function(value) {
+                            return Ox.formatDuration(value, 3);
+                        },
+                        id: 'in',
+                        operator: '+',
+                        title: Ox._('In'),
+                        visible: true,
+                        width: 90
+                    },
+                    {
+                        align: 'right',
+                        editable: isEditable,
+                        format: function(value) {
+                            return Ox.formatDuration(value, 3);
+                        },
+                        id: 'out',
+                        operator: '+',
+                        title: Ox._('Out'),
+                        visible: true,
+                        width: 90
+                    },
+                    {
+                        align: 'right',
+                        editable: isEditable,
+                        format: function(value) {
+                            return Ox.formatDuration(value, 3);
+                        },
+                        id: 'duration',
+                        operator: '+',
+                        title: Ox._('Duration'),
+                        visible: true,
+                        width: 90
+                    }
+                ],
+                columnsMovable: true,
+                columnsRemovable: true,
+                columnsResizable: true,
+                columnsVisible: true,
+                items: Ox.clone(self.options.clips),
+                scrollbarVisible: true,
+                sort: self.options.sort,
+                sortable: isSortable(),
+                unique: 'id'
+            });
+        } 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);
diff --git a/source/Ox.UI/js/Video/VideoEditPanel.js b/source/Ox.UI/js/Video/VideoEditPanel.js
index a9750b87..d6e3ad0a 100644
--- a/source/Ox.UI/js/Video/VideoEditPanel.js
+++ b/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,