video edit panel: add formatTitle option

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

@@ -15,6 +15,7 @@ Ox.ClipPanel = function(options, self) {
             clickLink: null,
             duration: 0,
             editable: false,
+            formatTitle: Ox.identity,
             getClipImageURL: null,
             'in': 0,
             itemName: '',
@@ -90,11 +91,7 @@ Ox.ClipPanel = function(options, self) {
         },
         {
             id: 'title',
-            format: function(value, data) {
+            format: self.options.formatTitle,
-                return value + (
-                    data.director ? ' (' + data.director.join(', ') + ')' : ''
-                );
-            },
             operator: '+',
             title: self.options.itemName,
             visible: true,
@@ -314,7 +311,58 @@ Ox.ClipPanel = function(options, self) {
 
     function getList() {
         var $list;
-        if (self.options.view == 'annotations') {
+        if (self.options.view == 'list') {
+            $list = Ox.TableList({
+                columns: self.columns,
+                columnsMovable: true,
+                columnsRemovable: true,
+                columnsResizable: true,
+                columnsVisible: true,
+                items: Ox.clone(self.options.clips),
+                keys: ['director', 'year'],
+                pageLength: 1000,
+                scrollbarVisible: true,
+                selected: self.options.selected,
+                sort: getListSort(),
+                sortable: isSortable(),
+                unique: 'id'
+            });
+        } else if (self.options.view == 'grid') {
+            $list = Ox.IconList({
+                draggable: true,
+                fixedRatio: self.options.clipRatio,
+                item: function(data, sort, size) {
+                    size = size || 128; // fixme: is this needed?
+                    var ratio = data.videoRatio,
+                        fixedRatio = self.options.clipRatio,
+                        width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio),
+                        height = Math.round(width / ratio),
+                        info,
+                        title = self.options.formatTitle(data),
+                        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: getListSort(),
+                unique: 'id'
+            });
+        } else if (self.options.view == 'annotations') {
             $list = Ox.AnnotationPanel({
                     calendarSize: self.options.annotationsCalendarSize,
                     clickLink: self.options.clickLink,
@@ -341,59 +389,6 @@ Ox.ClipPanel = function(options, self) {
                 });
             };
             return $list;
-        } else if (self.options.view == 'list') {
-            $list = Ox.TableList({
-                columns: self.columns,
-                columnsMovable: true,
-                columnsRemovable: true,
-                columnsResizable: true,
-                columnsVisible: true,
-                items: Ox.clone(self.options.clips),
-                keys: ['director'],
-                pageLength: 1000,
-                scrollbarVisible: true,
-                selected: self.options.selected,
-                sort: getListSort(),
-                sortable: isSortable(),
-                unique: 'id'
-            });
-        } else {
-            $list = Ox.IconList({
-                draggable: true,
-                fixedRatio: self.options.clipRatio,
-                item: function(data, sort, size) {
-                    size = size || 128; // fixme: is this needed?
-                    var ratio = data.videoRatio,
-                        fixedRatio = self.options.clipRatio,
-                        width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio),
-                        height = Math.round(width / ratio),
-                        info,
-                        title = data.title + (
-                            data.director ? ' (' + data.director.join(', ') + ')' : ''
-                        ),
-                        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: getListSort(),
-                unique: 'id'
-            });
         }
         $list.bindEvent({
             copy: function(data) {

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

@@ -19,12 +19,14 @@ Ox.VideoEditPanel = function(options, self) {
             duration: 0,
             editable: false,
             enableSubtitles: false,
+            formatTitle: Ox.identity,
             fps: 25,
             fullscreen: false,
             getClipImageURL: null,
             getLargeTimelineURL: null,
             height: 0,
             'in': 0,
+            itemName: '',
             loop: false,
             layers: [],
             muted: false,
@@ -324,6 +326,7 @@ Ox.VideoEditPanel = function(options, self) {
             clickLink: self.options.clickLink,
             duration: self.options.duration,
             editable: self.options.editable,
+            formatTitle: self.options.formatTitle,
             getClipImageURL: self.options.getClipImageURL,
             'in': self.options['in'],
             itemName: self.options.itemName,