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

382 lines
12 KiB
JavaScript

'use strict';
Ox.ClipPanel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
clips: [],
duration: 0,
editable: false,
getClipImageURL: null,
'in': 0,
out: 0,
position: 0,
selected: [],
sort: [],
sortOptions: [],
view: 'list',
width: 0
})
.options(options || {})
.update({
clips: function() {
self.$list.options({
items: Ox.clone(self.options.clips),
sort: self.options.sort,
sortable: isSortable()
});
updateStatus();
},
duration: updateStatus,
height: function() {
self.$list.size();
},
selected: function() {
self.$list.options({selected: self.options.selected});
},
sort: function() {
updateSortElement();
self.$list.options({
sort: self.options.sort,
sortable: isSortable(),
});
}
})
.bindEvent({
resize: function() {
self.$list.size();
}
});
self.$menubar = Ox.Bar({
size: 24
})
.bindEvent({
doubleclick: function(e) {
if ($(e.target).is('.OxBar')) {
self.$list.animate({scrollTop: 0}, 250);
}
}
});
self.$menu = Ox.MenuButton({
items: [
{group: 'view', min: 1, max: 1, items: [
{id: 'list', title: Ox._('View as List'), checked: self.options.view == 'list'},
{id: 'grid', title: Ox._('View as Grid'), checked: self.options.view == 'grid'},
]},
{},
{id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: true},
{id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: true},
{id: 'dereference', title: Ox._('Make Selected Clips Static'), disabled: true}
],
title: 'set',
tooltip: Ox._('Options'),
type: 'image'
})
.css({
float: 'left',
margin: '4px 2px 4px 4px'
})
.bindEvent({
change: function(data) {
if (data.id == 'view') {
self.options.view = data.checked[0].id;
self.$panel.replaceElement(1, self.$list = getList());
that.triggerEvent('view', {view: self.options.view});
}
},
click: function(data) {
}
})
.appendTo(self.$menubar),
self.$sortSelect = Ox.Select({
items: self.options.sortOptions,
value: self.options.sort[0].key,
width: 100 + Ox.UI.SCROLLBAR_SIZE
})
.bindEvent({
change: function(data) {
self.options.sort = [{
key: data.value,
operator: Ox.getObjectById(
self.options.sortOptions, data.value
).operator
}];
updateSortElement();
that.triggerEvent('sort', self.options.sort);
}
});
self.$orderButton = Ox.Button({
overlap: 'left',
title: getButtonTitle(),
tooltip: getButtonTooltip(),
type: 'image'
})
.bindEvent({
click: function() {
self.options.sort = [{
key: self.options.sort[0].key,
operator: self.options.sort[0].operator == '+' ? '-' : '+'
}];
updateSortElement();
that.triggerEvent('sort', self.options.sort);
}
});
self.$sortElement = Ox.FormElementGroup({
elements: [self.$sortSelect, self.$orderButton],
float: 'right'
})
.css({
float: 'right',
margin: '4px 4px 4px 2px'
})
.appendTo(self.$menubar);
self.$list = getList();
self.$statusbar = Ox.Bar({
size: 16
});
self.$status = Ox.Element()
.css({
marginTop: '2px',
fontSize: '9px',
textAlign: 'center',
textOverflow: 'ellipsis'
})
.appendTo(self.$statusbar);
that.setElement(
self.$panel = Ox.SplitPanel({
elements: [
{
element: self.$menubar,
size: 24
},
{
element: self.$list
},
{
element: self.$statusbar,
size: 16
}
],
orientation: 'vertical'
})
);
updateStatus();
function editClip(data) {
var value = self.$list.value(data.id, data.key);
if (data.value != value && !(data.value === '' && value === null)) {
self.$list.value(data.id, data.key, data.value || null);
that.triggerEvent('edit', data);
}
}
function getButtonTitle() {
return self.options.sort[0].operator == '+' ? 'up' : 'down';
}
function getButtonTooltip() {
return Ox._(self.options.sort[0].operator == '+' ? 'Ascending' : 'Descending');
}
function getList() {
var $list;
if (self.options.view == 'list') {
$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);
},
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({
draggable: true,
fixedRatio: pandora.site.video.previewRatio,
item: function(data, sort, size) {
size = size || 128; // fixme: is this needed?
var ratio = data.videoRatio,
fixedRatio = pandora.site.video.previewRatio,
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: self.options.sort,
unique: 'id'
});
}
$list.bindEvent({
copy: function(data) {
that.triggerEvent('copy', data);
},
copyadd: function(data) {
that.triggerEvent('copyadd', data);
},
'delete': function(data) {
that.triggerEvent('remove', data);
},
move: function(data) {
data.ids.forEach(function(id, index) {
self.$list.value(id, 'index', index);
});
that.triggerEvent('move', data);
},
open: function(data) {
that.triggerEvent('open', data);
},
paste: function() {
that.triggerEvent('paste');
},
select: function(data) {
that.triggerEvent('select', data);
},
sort: function(data) {
self.options.sort = [data];
updateSortElement();
self.$list.options({sortable: isSortable()});
that.triggerEvent('sort', self.options.sort);
},
submit: function(data) {
data.value = Ox.parseDuration(data.value);
self.$list.value(data.id, data.key, data.value);
that.triggerEvent('edit', data);
}
});
return $list;
}
function isEditable(data) {
return self.options.editable && !data.annotation;
}
function isSortable() {
return self.options.editable
&& self.options.sort && self.options.sort.length
&& self.options.sort[0].key == 'index'
&& self.options.sort[0].operator == '+';
}
function updateSortElement() {
self.$sortSelect.options({
value: self.options.sort[0].key,
});
self.$orderButton.options({
title: getButtonTitle(),
tooltip: getButtonTooltip(),
});
}
function updateStatus() {
self.$status.html(
Ox.toTitleCase(Ox.formatCount(self.options.clips.length, 'Clip'))
+ ', ' + Ox.formatDuration(self.options.duration, 3)
);
}
that.updateItem = function(id, data) {
['in', 'out', 'duration'].forEach(function(key) {
self.$list.value(id, key, data[key]);
});
};
return that;
};