add rudimentary support for viewing edit clips as grid
This commit is contained in:
rlx
parent
f27f11ab58
commit
7bdf8d8c0b
2 changed files with 109 additions and 69 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue