0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add rudimentary support for viewing edit clips as grid

Browse source
This commit is contained in:
rlx 2013-07-15 11:34:11 +00:00
parent f27f11ab58
commit 7bdf8d8c0b
2 changed files with 109 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

176
source/Ox.UI/js/Video/ClipPanel.js
View file

@ -8,6 +8,7 @@ Ox.ClipPanel = function(options, self) {
clips: [], clips: [],
duration: 0, duration: 0,
editable: false, editable: false,
getClipImageURL: null,
'in': 0, 'in': 0,
out: 0, out: 0,
position: 0, position: 0,
@ -182,78 +183,115 @@ Ox.ClipPanel = function(options, self) {
} }
function getList() { function getList() {
var $list = self.options.view == 'list' ? Ox.TableList({ var $list;
columns: [ if (self.options.view == 'list') {
{ $list = Ox.TableList({
align: 'right', columns: [
id: 'index', {
operator: '+', align: 'right',
title: Ox._('Index'), id: 'index',
visible: false, operator: '+',
width: 60 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);
}, },
id: 'in', {
operator: '+', id: 'id',
title: Ox._('In'), operator: '+',
visible: true, title: Ox._('ID'),
width: 90 unique: true,
}, visible: false,
{ width: 60
align: 'right',
editable: isEditable,
format: function(value) {
return Ox.formatDuration(value, 3);
}, },
id: 'out', {
operator: '+', id: 'item',
title: Ox._('Out'), operator: '+',
visible: true, title: Ox._(pandora.site.itemName.singular),
width: 90 visible: true,
}, width: 60
{
align: 'right',
editable: isEditable,
format: function(value) {
return Ox.formatDuration(value, 3);
}, },
id: 'duration', {
operator: '+', align: 'right',
title: Ox._('Duration'), editable: isEditable,
visible: true, format: function(value) {
width: 90 return Ox.formatDuration(value, 3);
} },
], id: 'in',
columnsMovable: true, operator: '+',
columnsRemovable: true, title: Ox._('In'),
columnsResizable: true, visible: true,
columnsVisible: true, width: 90
items: Ox.clone(self.options.clips), },
scrollbarVisible: true, {
sort: self.options.sort, align: 'right',
sortable: isSortable(), editable: isEditable,
unique: 'id' format: function(value) {
}) : Ox.Element(); 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({ $list.bindEvent({
copy: function(data) { copy: function(data) {
that.triggerEvent('copy', data); that.triggerEvent('copy', data);

2
source/Ox.UI/js/Video/VideoEditPanel.js
View file

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