diff --git a/source/Ox.UI/js/Video/ClipPanel.js b/source/Ox.UI/js/Video/ClipPanel.js index f9ce1711..fb5257a9 100644 --- a/source/Ox.UI/js/Video/ClipPanel.js +++ b/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) { - return value + ( - data.director ? ' (' + data.director.join(', ') + ')' : '' - ); - }, + format: self.options.formatTitle, 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) { diff --git a/source/Ox.UI/js/Video/VideoEditPanel.js b/source/Ox.UI/js/Video/VideoEditPanel.js index a7782a58..63c2381d 100644 --- a/source/Ox.UI/js/Video/VideoEditPanel.js +++ b/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,