forked from 0x2620/pandora
rename files to documents and use media for media files
This commit is contained in:
j
parent
aaa153e19d
commit
8da6badf4c
27 changed files with 1010 additions and 856 deletions
|
|
@ -1,13 +1,13 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
'use strict';
|
||||
|
||||
pandora.ui.deleteFileDialog = function(file, callback) {
|
||||
pandora.ui.deleteDocumentDialog = function(file, callback) {
|
||||
|
||||
var that = pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'keep',
|
||||
title: Ox._('Keep File')
|
||||
title: Ox._('Keep Document')
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
that.close();
|
||||
|
|
@ -15,19 +15,19 @@ pandora.ui.deleteFileDialog = function(file, callback) {
|
|||
}),
|
||||
Ox.Button({
|
||||
id: 'delete',
|
||||
title: Ox._('Delete File')
|
||||
title: Ox._('Delete Document')
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
that.close();
|
||||
pandora.api.removeFile({
|
||||
pandora.api.removeDocument({
|
||||
id: file
|
||||
}, callback);
|
||||
}
|
||||
})
|
||||
],
|
||||
keys: {enter: 'delete', escape: 'keep'},
|
||||
text: Ox._('Are you sure you want to delete the file "{0}"?', [file]),
|
||||
title: Ox._('Delete File')
|
||||
text: Ox._('Are you sure you want to delete the document "{0}"?', [file]),
|
||||
title: Ox._('Delete Document')
|
||||
});
|
||||
|
||||
return that;
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
pandora.ui.filesDialog = function() {
|
||||
pandora.ui.documentsDialog = function() {
|
||||
|
||||
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
|
||||
dialogWidth = Math.round(window.innerWidth * 0.9),
|
||||
|
|
@ -19,13 +19,13 @@ pandora.ui.filesDialog = function() {
|
|||
.bindEvent({
|
||||
click: function() {
|
||||
$reloadButton.options({disabled: true});
|
||||
Ox.Request.clearCache('findFiles');
|
||||
Ox.Request.clearCache('findDocuments');
|
||||
$list.reloadList(true);
|
||||
}
|
||||
}),
|
||||
|
||||
$userCheckbox = Ox.Checkbox({
|
||||
title: Ox._('Only show my files'),
|
||||
title: Ox._('Only show my documents'),
|
||||
value: false
|
||||
})
|
||||
.css({float: 'left', margin: '4px 2px'})
|
||||
|
|
@ -146,7 +146,7 @@ pandora.ui.filesDialog = function() {
|
|||
}
|
||||
],
|
||||
columnsVisible: true,
|
||||
items: pandora.api.findFiles,
|
||||
items: pandora.api.findDocuments,
|
||||
keys: ['ratio'],
|
||||
query: {conditions: [], operator: '&'},
|
||||
scrollbarVisible: true,
|
||||
|
|
@ -179,7 +179,7 @@ pandora.ui.filesDialog = function() {
|
|||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
pandora.ui.embedFileDialog(
|
||||
pandora.ui.embedDocumentDialog(
|
||||
$list.options('selected')[0]
|
||||
).open();
|
||||
}
|
||||
|
|
@ -209,8 +209,8 @@ pandora.ui.filesDialog = function() {
|
|||
$itemToolbar = Ox.Bar({size: 24}),
|
||||
|
||||
$deleteButton = Ox.Button({
|
||||
title: Ox._('Delete File...'),
|
||||
width: 96
|
||||
title: Ox._('Delete Document...'),
|
||||
width: 128
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.hide()
|
||||
|
|
@ -221,8 +221,8 @@ pandora.ui.filesDialog = function() {
|
|||
|
||||
$uploadButton = Ox.FileButton({
|
||||
maxFiles: 1,
|
||||
title: Ox._('Upload File...'),
|
||||
width: 96
|
||||
title: Ox._('Upload Document...'),
|
||||
width: 128
|
||||
})
|
||||
.css({float: 'right', margin: '4px'})
|
||||
.bindEvent({
|
||||
|
|
@ -284,7 +284,7 @@ pandora.ui.filesDialog = function() {
|
|||
|
||||
$itemLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: Ox._('No file selected'),
|
||||
title: Ox._('No document selected'),
|
||||
width: getLabelWidth()
|
||||
})
|
||||
.css({
|
||||
|
|
@ -312,7 +312,7 @@ pandora.ui.filesDialog = function() {
|
|||
minWidth: 512,
|
||||
padding: 0,
|
||||
removeOnClose: true,
|
||||
title: Ox._('Manage Files'),
|
||||
title: Ox._('Manage Documents'),
|
||||
width: dialogWidth
|
||||
}),
|
||||
|
||||
|
|
@ -331,13 +331,13 @@ pandora.ui.filesDialog = function() {
|
|||
|
||||
that.superClose = that.close;
|
||||
that.close = function() {
|
||||
Ox.Request.clearCache('findFiles');
|
||||
Ox.Request.clearCache('findDocuments');
|
||||
that.superClose();
|
||||
};
|
||||
|
||||
function deleteFile() {
|
||||
pandora.ui.deleteFileDialog($list.options('selected')[0], function() {
|
||||
Ox.Request.clearCache('findFiles');
|
||||
pandora.ui.deleteDocumentDialog($list.options('selected')[0], function() {
|
||||
Ox.Request.clearCache('findDocuments');
|
||||
$list.reloadList();
|
||||
}).open();
|
||||
}
|
||||
|
|
@ -364,7 +364,7 @@ pandora.ui.filesDialog = function() {
|
|||
function renderForm() {
|
||||
var file = $list.value(selected),
|
||||
editable = file.user == pandora.user.username
|
||||
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
|
||||
|| pandora.site.capabilities.canEditMedia[pandora.user.level];
|
||||
return Ox.Form({
|
||||
items: [
|
||||
Ox.Input({
|
||||
|
|
@ -428,7 +428,7 @@ pandora.ui.filesDialog = function() {
|
|||
if (event.id == 'name') {
|
||||
$list.value(file.id, 'id', result.data.id);
|
||||
}
|
||||
Ox.Request.clearCache('findFiles');
|
||||
Ox.Request.clearCache('findDocuments');
|
||||
$list.reloadList();
|
||||
});
|
||||
}
|
||||
|
|
@ -438,7 +438,7 @@ pandora.ui.filesDialog = function() {
|
|||
function renderPreview() {
|
||||
var isImage = Ox.contains(['jpg', 'png'], selected.split('.').pop()),
|
||||
size = getPreviewSize(),
|
||||
src = '/files/' + selected + (isImage ? '' : '.jpg');
|
||||
src = '/documents/' + selected + (isImage ? '' : '.jpg');
|
||||
return Ox.ImageElement({
|
||||
height: size.height,
|
||||
src: src,
|
||||
|
|
@ -453,7 +453,7 @@ pandora.ui.filesDialog = function() {
|
|||
function selectFile() {
|
||||
var file = $list.value(selected),
|
||||
editable = file.user == pandora.user.username
|
||||
|| pandora.site.capabilities.canEditFiles[pandora.user.level];
|
||||
|| pandora.site.capabilities.canEditMedia[pandora.user.level];
|
||||
$embedButton[selected ? 'show' : 'hide']();
|
||||
$closeButton[selected ? 'show' : 'hide']();
|
||||
setLabel();
|
||||
|
|
@ -471,7 +471,7 @@ pandora.ui.filesDialog = function() {
|
|||
$itemLabel.options({
|
||||
title: selected
|
||||
? selected.split(':').slice(1).join(':')
|
||||
: Ox._('No file selected'),
|
||||
: Ox._('No document selected'),
|
||||
width: getLabelWidth()
|
||||
});
|
||||
}
|
||||
|
|
@ -517,9 +517,9 @@ pandora.ui.filesDialog = function() {
|
|||
}
|
||||
|
||||
function uploadFile(data) {
|
||||
pandora.ui.uploadFileDialog(data.files[0], function(file) {
|
||||
Ox.Request.clearCache('findFiles');
|
||||
pandora.api.findFiles({
|
||||
pandora.ui.uploadDocumentDialog(data.files[0], function(file) {
|
||||
Ox.Request.clearCache('findDocuments');
|
||||
pandora.api.findDocuments({
|
||||
positions: [file.id],
|
||||
query: $list.options('query'),
|
||||
sort: $list.options('sort'),
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
'use strict';
|
||||
|
||||
pandora.ui.embedFileDialog = function(id) {
|
||||
pandora.ui.embedDocumentDialog = function(id) {
|
||||
|
||||
var isImage = Ox.contains(['jpg', 'png'], selected.split('.').pop()),
|
||||
url = 'http' + (pandora.site.site.https ? 's' : '') + '://'
|
||||
+ pandora.site.site.url + '/files/' + id,
|
||||
+ pandora.site.site.url + '/documents/' + id,
|
||||
|
||||
$content = Ox.Element()
|
||||
.css({margin: '16px'})
|
||||
|
|
@ -1,582 +0,0 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
|
||||
'use strict';
|
||||
|
||||
pandora.ui.filesView = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
id: ''
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
self.filesQuery = {
|
||||
conditions: [{
|
||||
key: 'id',
|
||||
value: self.options.id,
|
||||
operator: '=='
|
||||
}]
|
||||
};
|
||||
self.numberOfItems = 0;
|
||||
self.selected = [];
|
||||
self.wasChecked = false;
|
||||
|
||||
self.$toolbar = Ox.Bar({
|
||||
size: 24
|
||||
});
|
||||
|
||||
self.$menu = Ox.MenuButton({
|
||||
items: [
|
||||
{
|
||||
disabled: true,
|
||||
id: 'ignore',
|
||||
title: Ox._('Ignore Selected Files')
|
||||
},
|
||||
{},
|
||||
{
|
||||
disabled: !pandora.site.capabilities.canRemoveItems[pandora.user.level],
|
||||
id: 'delete',
|
||||
title: Ox._('Delete {0}...', [Ox._(pandora.site.itemName.singular)])
|
||||
}
|
||||
],
|
||||
title: 'set',
|
||||
type: 'image'
|
||||
})
|
||||
.css({
|
||||
float: 'left',
|
||||
margin: '4px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
if (data.id == 'ignore') {
|
||||
ignoreFiles();
|
||||
} else if (data.id == 'delete') {
|
||||
deleteItem();
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
self.$saveButton = Ox.Button({
|
||||
disabled: true,
|
||||
title: Ox._('Save Changes'),
|
||||
width: 128
|
||||
})
|
||||
.css({
|
||||
float: 'right',
|
||||
margin: '4px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: saveChanges
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
self.$filesList = Ox.TableList({
|
||||
columns: [
|
||||
{
|
||||
clickable: function(data) {
|
||||
return !data.encoding;
|
||||
},
|
||||
format: function(value, data) {
|
||||
return $('<img>')
|
||||
.attr({
|
||||
src: data.encoding
|
||||
? Ox.UI.getImageURL('symbolSync')
|
||||
: data.wanted
|
||||
? Ox.UI.getImageURL('symbolUpload')
|
||||
: Ox.UI.getImageURL('symbolCheck')
|
||||
})
|
||||
.css({
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
padding: '3px',
|
||||
opacity: (value || data.wanted) ? 1 : 0
|
||||
});
|
||||
},
|
||||
id: 'selected',
|
||||
operator: '-',
|
||||
title: Ox._('Status'),
|
||||
titleImage: 'check',
|
||||
tooltip: function (data) {
|
||||
return data.encoding
|
||||
? Ox._('Processing video on server')
|
||||
: data.instances.filter(function(i) {return i.ignore; }).length > 0
|
||||
? Ox._('Use this file')
|
||||
: Ox._('Dont use this file');
|
||||
},
|
||||
visible: true,
|
||||
width: 16
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'users',
|
||||
operator: '+',
|
||||
title: Ox._('Users'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'path',
|
||||
operator: '+',
|
||||
title: Ox._('Path'),
|
||||
visible: true,
|
||||
width: 360
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'version',
|
||||
operator: '+',
|
||||
title: Ox._('Version'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'part',
|
||||
operator: '+',
|
||||
title: Ox._('Part'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'partTitle',
|
||||
operator: '+',
|
||||
title: Ox._('Part Title'),
|
||||
visible: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'language',
|
||||
operator: '+',
|
||||
title: Ox._('Language'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'extension',
|
||||
operator: '+',
|
||||
title: Ox._('Extension'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'type',
|
||||
operator: '+',
|
||||
title: Ox._('Type'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: {type: 'value', args: ['B']},
|
||||
id: 'size',
|
||||
operator: '-',
|
||||
title: Ox._('Size'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: {type: 'resolution', args: ['px']},
|
||||
id: 'resolution',
|
||||
operator: '-',
|
||||
title: Ox._('Resolution'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: {type: 'duration', args: [0, 'short']},
|
||||
id: 'duration',
|
||||
operator: '-',
|
||||
title: Ox._('Duration'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'id',
|
||||
operator: '+',
|
||||
title: Ox._('ID'),
|
||||
visible: false,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'instances',
|
||||
operator: '+',
|
||||
title: Ox._('Instances'),
|
||||
visible: false,
|
||||
width: 120
|
||||
}
|
||||
],
|
||||
columnsMovable: true,
|
||||
columnsRemovable: true,
|
||||
columnsResizable: true,
|
||||
columnsVisible: true,
|
||||
id: 'files',
|
||||
items: function(data, callback) {
|
||||
pandora.api.findMedia(Ox.extend(data, {
|
||||
query: self.filesQuery
|
||||
}), callback);
|
||||
},
|
||||
keys: ['encoding', 'instances', 'wanted'],
|
||||
scrollbarVisible: true,
|
||||
sort: [{key: 'path', operator: '+'}],
|
||||
unique: 'id'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
if (data.key == 'selected') {
|
||||
var ignored = self.$filesList.value(data.id, 'instances')
|
||||
.filter(function(i) {return i.ignore; }).length > 0;
|
||||
pandora.api.editMedia({
|
||||
files: [{
|
||||
id: data.id,
|
||||
ignore: !ignored
|
||||
}]
|
||||
}, function(result) {
|
||||
Ox.Request.clearCache();
|
||||
self.$filesList.reloadList();
|
||||
});
|
||||
}
|
||||
},
|
||||
'delete': function(data) {
|
||||
var ids = data.ids.filter(function(id) {
|
||||
return self.$filesList.value(id, 'instances').length == 0;
|
||||
});
|
||||
if (ids.length > 0 && pandora.user.level == 'admin') {
|
||||
pandora.api.removeMedia({
|
||||
ids: ids
|
||||
}, function(result) {
|
||||
Ox.Request.clearCache();
|
||||
self.$filesList.reloadList();
|
||||
});
|
||||
}
|
||||
},
|
||||
init: function(data) {
|
||||
self.numberOfItems = data.items;
|
||||
},
|
||||
select: selectFiles,
|
||||
submit: function(data) {
|
||||
var value = self.$filesList.value(data.id, data.key);
|
||||
if (data.value != value && !(data.value === '' && value === null)) {
|
||||
self.$saveButton.options({disabled: false});
|
||||
self.$filesList.value(data.id, data.key, data.value || null);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
self.$instancesList = Ox.TableList({
|
||||
columns: [
|
||||
{
|
||||
align: 'left',
|
||||
id: 'user',
|
||||
operator: '+',
|
||||
title: Ox._('User'),
|
||||
visible: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'volume',
|
||||
operator: '+',
|
||||
title: Ox._('Volume'),
|
||||
visible: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'path',
|
||||
operator: '+',
|
||||
title: Ox._('Path'),
|
||||
visible: true,
|
||||
width: 480
|
||||
},
|
||||
],
|
||||
columnsMovable: true,
|
||||
columnsRemovable: true,
|
||||
columnsResizable: true,
|
||||
columnsVisible: true,
|
||||
id: 'files',
|
||||
items: [],
|
||||
scrollbarVisible: true,
|
||||
sort: [{key: 'user', operator: '+'}],
|
||||
unique: 'path'
|
||||
})
|
||||
.bindEvent({
|
||||
open: openFiles
|
||||
});
|
||||
|
||||
self.$movieLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: Ox._('Move selected files to another {0}',
|
||||
[Ox._(pandora.site.itemName.singular.toLowerCase())]),
|
||||
width: 240
|
||||
})
|
||||
.css({margin: '8px'});
|
||||
|
||||
['title', 'director', 'year', 'id'].forEach(function(key) {
|
||||
var itemKey = Ox.getObjectById(pandora.site.itemKeys, key);
|
||||
self['$' + key + 'Input'] = Ox.Input({
|
||||
label: Ox._(key == 'id' ? 'ID'
|
||||
: itemKey ? itemKey.title : Ox.toTitleCase(key)),
|
||||
labelWidth: 64,
|
||||
width: 240
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
var conditions, matches;
|
||||
if (key == 'id' && data.value.substr(0, 2) != '0x') {
|
||||
if (pandora.site.site.id == '0xdb') {
|
||||
matches = data.value.match(/\d{7}/);
|
||||
} else {
|
||||
matches = data.value.match(/[A-Z]+/);
|
||||
}
|
||||
data.value = matches ? matches[0] : '';
|
||||
self.$idInput.value(data.value);
|
||||
}
|
||||
if (data.value.length) {
|
||||
conditions = {};
|
||||
['id', 'title', 'director', 'year'].map(function(key) {
|
||||
var value = self['$' + key + 'Input'].value();
|
||||
if (value.length) {
|
||||
conditions[key] = key == 'director' ? value.split(', ') : value;
|
||||
}
|
||||
});
|
||||
pandora.api.findId(conditions, function(result) {
|
||||
var length = result.data.items.length;
|
||||
if (length == 0) {
|
||||
if (key != 'id') {
|
||||
self.$idInput.value('');
|
||||
}
|
||||
} else if (result.data.items.length == 1) {
|
||||
['title', 'director', 'year', 'id'].forEach(function(key) {
|
||||
self['$' + key + 'Input'].value(
|
||||
key == 'director'
|
||||
? result.data.items[0][key].join(', ')
|
||||
: result.data.items[0][key]
|
||||
);
|
||||
});
|
||||
} else {
|
||||
self.$idInput.value('');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
self.$switch = Ox.Checkbox({
|
||||
title: Ox._('Switch to this {0} after moving files',
|
||||
[Ox._(pandora.site.itemName.singular.toLowerCase())]),
|
||||
value: false,
|
||||
width: 240
|
||||
});
|
||||
|
||||
self.$movieForm = Ox.Form({
|
||||
items: [
|
||||
self.$titleInput,
|
||||
self.$directorInput,
|
||||
self.$yearInput,
|
||||
self.$idInput,
|
||||
self.$switch
|
||||
],
|
||||
width: 240
|
||||
})
|
||||
.css({margin: '8px'});
|
||||
|
||||
self.$clearButton = Ox.Button({
|
||||
title: Ox._('Clear Form'),
|
||||
width: 116
|
||||
})
|
||||
.css({margin: '0 4px 4px 8px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
['title', 'director', 'year', 'id'].forEach(function(key) {
|
||||
self['$' + key + 'Input'].value('');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
self.$moveButton = Ox.Button({
|
||||
disabled: true,
|
||||
title: Ox._('Move Files'),
|
||||
width: 116
|
||||
})
|
||||
.css({margin: '0 4px 4px 4px'})
|
||||
.bindEvent({
|
||||
click: moveFiles
|
||||
});
|
||||
|
||||
|
||||
self.$moviePanel = Ox.Element()
|
||||
.append(self.$movieLabel)
|
||||
.append(self.$movieForm)
|
||||
.append(self.$clearButton)
|
||||
.append(self.$moveButton);
|
||||
|
||||
that.setElement(Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$toolbar,
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: self.$filesList
|
||||
},
|
||||
{
|
||||
element: self.$instancesList,
|
||||
size: 80
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
},
|
||||
{
|
||||
collapsible: true,
|
||||
element: self.$moviePanel,
|
||||
size: 256
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
})
|
||||
);
|
||||
|
||||
function deleteItem(data) {
|
||||
pandora.api.get({
|
||||
id: pandora.user.ui.item,
|
||||
keys: ['id', 'title']
|
||||
},function(result) {
|
||||
pandora.ui.deleteItemDialog(result.data).open();
|
||||
});
|
||||
}
|
||||
|
||||
function ignoreFiles() {
|
||||
pandora.api.editMedia({
|
||||
files: self.selected.map(function(id) {
|
||||
return {id: id, ignore: true};
|
||||
})
|
||||
}, function(result) {
|
||||
Ox.Request.clearCache();
|
||||
self.$filesList.reloadList();
|
||||
});
|
||||
}
|
||||
|
||||
function moveFiles(data) {
|
||||
var data = {
|
||||
ids: self.selected,
|
||||
itemId: self.$idInput.value()
|
||||
};
|
||||
['title', 'director', 'year'].forEach(function(key) {
|
||||
data[key] = self['$' + key + 'Input'].value();
|
||||
});
|
||||
self.$moveButton.options(
|
||||
{disabled: true, title: Ox._('Moving Files...')}
|
||||
);
|
||||
pandora.api.moveMedia(data, function(result) {
|
||||
if (
|
||||
pandora.user.ui.item == self.options.id
|
||||
&& pandora.user.ui.itemView == 'files'
|
||||
) {
|
||||
Ox.Request.clearCache(); // fixme: remove
|
||||
if (self.$switch.value()) {
|
||||
pandora.UI.set({item: result.data.itemId});
|
||||
pandora.updateItemContext();
|
||||
} else {
|
||||
self.$filesList.reloadList();
|
||||
self.$instancesList.reloadList();
|
||||
self.$moveButton.options(
|
||||
{disabled: false, title: Ox._('Move Files')}
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openFiles(data) {
|
||||
data.ids.length == 1 && pandora.api.parsePath({
|
||||
path: self.$instancesList.value(data.ids[0], 'path')
|
||||
}, function(result) {
|
||||
['title', 'director', 'year'].forEach(function(key) {
|
||||
if (result.data[key]) {
|
||||
self['$' + key + 'Input'].value(
|
||||
key == 'director'
|
||||
? result.data[key].join(', ')
|
||||
: result.data[key]
|
||||
);
|
||||
}
|
||||
});
|
||||
updateForm();
|
||||
self.$titleInput.triggerEvent('change', {value: result.data['title']});
|
||||
});
|
||||
}
|
||||
|
||||
function selectFiles(data) {
|
||||
self.selected = data.ids;
|
||||
self.$instancesList.options({
|
||||
items: data.ids.length == 1
|
||||
? self.$filesList.value(data.ids[0], 'instances') : []
|
||||
});
|
||||
updateForm();
|
||||
}
|
||||
|
||||
function saveChanges() {
|
||||
self.$saveButton.options({disabled: true, title: Ox._('Saving Changes...')});
|
||||
pandora.api.findMedia({
|
||||
keys: ['id'],
|
||||
query: self.filesQuery
|
||||
}, function(result) {
|
||||
pandora.api.editMedia({
|
||||
files: result.data.items.map(function(item) {
|
||||
[
|
||||
'version', 'part', 'partTitle', 'language', 'extension'
|
||||
].forEach(function(key) {
|
||||
Ox.extend(item, key, self.$filesList.value(item.id, key));
|
||||
})
|
||||
return item;
|
||||
})
|
||||
}, function(result) {
|
||||
self.$saveButton.options({title: Ox._('Save Changes')});
|
||||
Ox.Request.clearCache(); // fixme: remove
|
||||
self.$filesList.reloadList();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateForm() {
|
||||
if (self.selected.length == self.numberOfItems) {
|
||||
self.wasChecked = self.$switch.value();
|
||||
self.$switch.options({
|
||||
disabled: true,
|
||||
value: true
|
||||
});
|
||||
} else {
|
||||
self.$switch.options({
|
||||
disabled: false,
|
||||
value: self.wasChecked
|
||||
});
|
||||
}
|
||||
self.$moveButton.options({
|
||||
disabled: self.selected.length == 0
|
||||
});
|
||||
self.$menu[
|
||||
self.selected.length == 0 ? 'disableItem' : 'enableItem'
|
||||
]('ignore');
|
||||
}
|
||||
|
||||
that.reload = function() {
|
||||
self.$filesList.reloadList();
|
||||
}
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
@ -116,10 +116,10 @@ pandora.ui.item = function() {
|
|||
Ox.Container().append(pandora.$ui.item)
|
||||
);
|
||||
|
||||
} else if (pandora.user.ui.itemView == 'files') {
|
||||
} else if (pandora.user.ui.itemView == 'media') {
|
||||
|
||||
pandora.$ui.contentPanel.replaceElement(1,
|
||||
pandora.$ui.item = pandora.ui.filesView({
|
||||
pandora.$ui.item = pandora.ui.mediaView({
|
||||
id: result.data.id
|
||||
})
|
||||
);
|
||||
|
|
@ -127,7 +127,7 @@ pandora.ui.item = function() {
|
|||
} else if (pandora.user.ui.itemView == 'frames' || pandora.user.ui.itemView == 'posters') {
|
||||
|
||||
pandora.$ui.contentPanel.replaceElement(1,
|
||||
pandora.$ui.item = pandora.ui.mediaView().bindEvent({
|
||||
pandora.$ui.item = pandora.ui.PostersView().bindEvent({
|
||||
resize: function() {
|
||||
pandora.$ui.item.resize();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ pandora.ui.mainMenu = function() {
|
|||
{ id: 'findsimilar', title: Ox._('Find Similar Clips...'), keyboard: 'alt control f', disabled: !pandora.getItemIdAndPosition() }
|
||||
] },
|
||||
{ id: 'dataMenu', title: Ox._('Data'), items: [
|
||||
{ id: 'files', title: Ox._('Manage Files...'), disabled: !pandora.site.capabilities.canManageFiles[pandora.user.level] },
|
||||
{ id: 'documents', title: Ox._('Manage Documents...'), disabled: !pandora.site.capabilities.canManageDocuments[pandora.user.level] },
|
||||
{},
|
||||
{ id: 'titles', title: Ox._('Manage Titles...'), disabled: !pandora.site.capabilities.canManageTitlesAndNames[pandora.user.level] },
|
||||
{ id: 'names', title: Ox._('Manage Names...'), disabled: !pandora.site.capabilities.canManageTitlesAndNames[pandora.user.level] },
|
||||
|
|
@ -374,8 +374,8 @@ pandora.ui.mainMenu = function() {
|
|||
pandora.$ui.filterDialog = pandora.ui.filterDialog().open();
|
||||
} else if (data.id == 'findsimilar') {
|
||||
pandora.$ui.sequencesDialog = pandora.ui.sequencesDialog().open();
|
||||
} else if (data.id == 'files') {
|
||||
pandora.$ui.filesDialog = pandora.ui.filesDialog().open();
|
||||
} else if (data.id == 'documents') {
|
||||
pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open();
|
||||
} else if (data.id == 'titles') {
|
||||
(pandora.$ui.titlesDialog || (
|
||||
pandora.$ui.titlesDialog = pandora.ui.titlesDialog()
|
||||
|
|
|
|||
|
|
@ -1,160 +1,582 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
|
||||
'use strict';
|
||||
|
||||
pandora.ui.mediaView = function() {
|
||||
pandora.ui.mediaView = function(options, self) {
|
||||
|
||||
var item = pandora.user.ui.item,
|
||||
view = pandora.user.ui.itemView,
|
||||
listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
|
||||
selectedImage = {};
|
||||
$preview = Ox.Element(),
|
||||
that = Ox.SplitPanel({
|
||||
elements: [
|
||||
var self = self || {},
|
||||
that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
id: ''
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
self.filesQuery = {
|
||||
conditions: [{
|
||||
key: 'id',
|
||||
value: self.options.id,
|
||||
operator: '=='
|
||||
}]
|
||||
};
|
||||
self.numberOfItems = 0;
|
||||
self.selected = [];
|
||||
self.wasChecked = false;
|
||||
|
||||
self.$toolbar = Ox.Bar({
|
||||
size: 24
|
||||
});
|
||||
|
||||
self.$menu = Ox.MenuButton({
|
||||
items: [
|
||||
{
|
||||
element: Ox.Element(),
|
||||
size: listWidth
|
||||
disabled: true,
|
||||
id: 'ignore',
|
||||
title: Ox._('Ignore Selected Media')
|
||||
},
|
||||
{},
|
||||
{
|
||||
disabled: !pandora.site.capabilities.canRemoveItems[pandora.user.level],
|
||||
id: 'delete',
|
||||
title: Ox._('Delete {0}...', [Ox._(pandora.site.itemName.singular)])
|
||||
}
|
||||
],
|
||||
title: 'set',
|
||||
type: 'image'
|
||||
})
|
||||
.css({
|
||||
float: 'left',
|
||||
margin: '4px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
if (data.id == 'ignore') {
|
||||
ignoreFiles();
|
||||
} else if (data.id == 'delete') {
|
||||
deleteItem();
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
self.$saveButton = Ox.Button({
|
||||
disabled: true,
|
||||
title: Ox._('Save Changes'),
|
||||
width: 128
|
||||
})
|
||||
.css({
|
||||
float: 'right',
|
||||
margin: '4px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: saveChanges
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
self.$filesList = Ox.TableList({
|
||||
columns: [
|
||||
{
|
||||
clickable: function(data) {
|
||||
return !data.encoding;
|
||||
},
|
||||
format: function(value, data) {
|
||||
return $('<img>')
|
||||
.attr({
|
||||
src: data.encoding
|
||||
? Ox.UI.getImageURL('symbolSync')
|
||||
: data.wanted
|
||||
? Ox.UI.getImageURL('symbolUpload')
|
||||
: Ox.UI.getImageURL('symbolCheck')
|
||||
})
|
||||
.css({
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
padding: '3px',
|
||||
opacity: (value || data.wanted) ? 1 : 0
|
||||
});
|
||||
},
|
||||
id: 'selected',
|
||||
operator: '-',
|
||||
title: Ox._('Status'),
|
||||
titleImage: 'check',
|
||||
tooltip: function (data) {
|
||||
return data.encoding
|
||||
? Ox._('Processing video on server')
|
||||
: data.instances.filter(function(i) {return i.ignore; }).length > 0
|
||||
? Ox._('Use this file')
|
||||
: Ox._('Dont use this file');
|
||||
},
|
||||
visible: true,
|
||||
width: 16
|
||||
},
|
||||
{
|
||||
element: $preview
|
||||
align: 'left',
|
||||
id: 'users',
|
||||
operator: '+',
|
||||
title: Ox._('Users'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'path',
|
||||
operator: '+',
|
||||
title: Ox._('Path'),
|
||||
visible: true,
|
||||
width: 360
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'version',
|
||||
operator: '+',
|
||||
title: Ox._('Version'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'part',
|
||||
operator: '+',
|
||||
title: Ox._('Part'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'partTitle',
|
||||
operator: '+',
|
||||
title: Ox._('Part Title'),
|
||||
visible: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'language',
|
||||
operator: '+',
|
||||
title: Ox._('Language'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'extension',
|
||||
operator: '+',
|
||||
title: Ox._('Extension'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'type',
|
||||
operator: '+',
|
||||
title: Ox._('Type'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: {type: 'value', args: ['B']},
|
||||
id: 'size',
|
||||
operator: '-',
|
||||
title: Ox._('Size'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: {type: 'resolution', args: ['px']},
|
||||
id: 'resolution',
|
||||
operator: '-',
|
||||
title: Ox._('Resolution'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
format: {type: 'duration', args: [0, 'short']},
|
||||
id: 'duration',
|
||||
operator: '-',
|
||||
title: Ox._('Duration'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'id',
|
||||
operator: '+',
|
||||
title: Ox._('ID'),
|
||||
visible: false,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'instances',
|
||||
operator: '+',
|
||||
title: Ox._('Instances'),
|
||||
visible: false,
|
||||
width: 120
|
||||
}
|
||||
],
|
||||
columnsMovable: true,
|
||||
columnsRemovable: true,
|
||||
columnsResizable: true,
|
||||
columnsVisible: true,
|
||||
id: 'files',
|
||||
items: function(data, callback) {
|
||||
pandora.api.findMedia(Ox.extend(data, {
|
||||
query: self.filesQuery
|
||||
}), callback);
|
||||
},
|
||||
keys: ['encoding', 'instances', 'wanted'],
|
||||
scrollbarVisible: true,
|
||||
sort: [{key: 'path', operator: '+'}],
|
||||
unique: 'id'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
if (data.key == 'selected') {
|
||||
var ignored = self.$filesList.value(data.id, 'instances')
|
||||
.filter(function(i) {return i.ignore; }).length > 0;
|
||||
pandora.api.editMedia({
|
||||
files: [{
|
||||
id: data.id,
|
||||
ignore: !ignored
|
||||
}]
|
||||
}, function(result) {
|
||||
Ox.Request.clearCache();
|
||||
self.$filesList.reloadList();
|
||||
});
|
||||
}
|
||||
},
|
||||
'delete': function(data) {
|
||||
var ids = data.ids.filter(function(id) {
|
||||
return self.$filesList.value(id, 'instances').length == 0;
|
||||
});
|
||||
if (ids.length > 0 && pandora.user.level == 'admin') {
|
||||
pandora.api.removeMedia({
|
||||
ids: ids
|
||||
}, function(result) {
|
||||
Ox.Request.clearCache();
|
||||
self.$filesList.reloadList();
|
||||
});
|
||||
}
|
||||
},
|
||||
init: function(data) {
|
||||
self.numberOfItems = data.items;
|
||||
},
|
||||
select: selectFiles,
|
||||
submit: function(data) {
|
||||
var value = self.$filesList.value(data.id, data.key);
|
||||
if (data.value != value && !(data.value === '' && value === null)) {
|
||||
self.$saveButton.options({disabled: false});
|
||||
self.$filesList.value(data.id, data.key, data.value || null);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
self.$instancesList = Ox.TableList({
|
||||
columns: [
|
||||
{
|
||||
align: 'left',
|
||||
id: 'user',
|
||||
operator: '+',
|
||||
title: Ox._('User'),
|
||||
visible: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'volume',
|
||||
operator: '+',
|
||||
title: Ox._('Volume'),
|
||||
visible: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'path',
|
||||
operator: '+',
|
||||
title: Ox._('Path'),
|
||||
visible: true,
|
||||
width: 480
|
||||
},
|
||||
],
|
||||
columnsMovable: true,
|
||||
columnsRemovable: true,
|
||||
columnsResizable: true,
|
||||
columnsVisible: true,
|
||||
id: 'files',
|
||||
items: [],
|
||||
scrollbarVisible: true,
|
||||
sort: [{key: 'user', operator: '+'}],
|
||||
unique: 'path'
|
||||
})
|
||||
.bindEvent({
|
||||
open: openFiles
|
||||
});
|
||||
|
||||
self.$movieLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: Ox._('Move selected files to another {0}',
|
||||
[Ox._(pandora.site.itemName.singular.toLowerCase())]),
|
||||
width: 240
|
||||
})
|
||||
.css({margin: '8px'});
|
||||
|
||||
['title', 'director', 'year', 'id'].forEach(function(key) {
|
||||
var itemKey = Ox.getObjectById(pandora.site.itemKeys, key);
|
||||
self['$' + key + 'Input'] = Ox.Input({
|
||||
label: Ox._(key == 'id' ? 'ID'
|
||||
: itemKey ? itemKey.title : Ox.toTitleCase(key)),
|
||||
labelWidth: 64,
|
||||
width: 240
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
var conditions, matches;
|
||||
if (key == 'id' && data.value.substr(0, 2) != '0x') {
|
||||
if (pandora.site.site.id == '0xdb') {
|
||||
matches = data.value.match(/\d{7}/);
|
||||
} else {
|
||||
matches = data.value.match(/[A-Z]+/);
|
||||
}
|
||||
data.value = matches ? matches[0] : '';
|
||||
self.$idInput.value(data.value);
|
||||
}
|
||||
if (data.value.length) {
|
||||
conditions = {};
|
||||
['id', 'title', 'director', 'year'].map(function(key) {
|
||||
var value = self['$' + key + 'Input'].value();
|
||||
if (value.length) {
|
||||
conditions[key] = key == 'director' ? value.split(', ') : value;
|
||||
}
|
||||
});
|
||||
pandora.api.findId(conditions, function(result) {
|
||||
var length = result.data.items.length;
|
||||
if (length == 0) {
|
||||
if (key != 'id') {
|
||||
self.$idInput.value('');
|
||||
}
|
||||
} else if (result.data.items.length == 1) {
|
||||
['title', 'director', 'year', 'id'].forEach(function(key) {
|
||||
self['$' + key + 'Input'].value(
|
||||
key == 'director'
|
||||
? result.data.items[0][key].join(', ')
|
||||
: result.data.items[0][key]
|
||||
);
|
||||
});
|
||||
} else {
|
||||
self.$idInput.value('');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
self.$switch = Ox.Checkbox({
|
||||
title: Ox._('Switch to this {0} after moving files',
|
||||
[Ox._(pandora.site.itemName.singular.toLowerCase())]),
|
||||
value: false,
|
||||
width: 240
|
||||
});
|
||||
|
||||
self.$movieForm = Ox.Form({
|
||||
items: [
|
||||
self.$titleInput,
|
||||
self.$directorInput,
|
||||
self.$yearInput,
|
||||
self.$idInput,
|
||||
self.$switch
|
||||
],
|
||||
width: 240
|
||||
})
|
||||
.css({margin: '8px'});
|
||||
|
||||
self.$clearButton = Ox.Button({
|
||||
title: Ox._('Clear Form'),
|
||||
width: 116
|
||||
})
|
||||
.css({margin: '0 4px 4px 8px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
['title', 'director', 'year', 'id'].forEach(function(key) {
|
||||
self['$' + key + 'Input'].value('');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
self.$moveButton = Ox.Button({
|
||||
disabled: true,
|
||||
title: Ox._('Move Media'),
|
||||
width: 116
|
||||
})
|
||||
.css({margin: '0 4px 4px 4px'})
|
||||
.bindEvent({
|
||||
click: moveFiles
|
||||
});
|
||||
|
||||
|
||||
self.$moviePanel = Ox.Element()
|
||||
.append(self.$movieLabel)
|
||||
.append(self.$movieForm)
|
||||
.append(self.$clearButton)
|
||||
.append(self.$moveButton);
|
||||
|
||||
that.setElement(Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$toolbar,
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: self.$filesList
|
||||
},
|
||||
{
|
||||
element: self.$instancesList,
|
||||
size: 80
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
},
|
||||
{
|
||||
collapsible: true,
|
||||
element: self.$moviePanel,
|
||||
size: 256
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
})
|
||||
);
|
||||
|
||||
function deleteItem(data) {
|
||||
pandora.api.get({
|
||||
id: pandora.user.ui.item,
|
||||
keys: ['id', 'title']
|
||||
},function(result) {
|
||||
pandora.ui.deleteItemDialog(result.data).open();
|
||||
});
|
||||
|
||||
that.resize = function() {
|
||||
selectedImage.url && renderPreview();
|
||||
}
|
||||
|
||||
pandora.api.get({
|
||||
id: item,
|
||||
keys: [view]
|
||||
}, function(result) {
|
||||
var images = result.data[view];
|
||||
selectedImage = images.filter(function(image) {
|
||||
return image.selected;
|
||||
})[0];
|
||||
var $list = Ox.IconList({
|
||||
item: function(data, sort, size) {
|
||||
var ratio = data.width / data.height;
|
||||
size = size || 128;
|
||||
return {
|
||||
height: ratio <= 1 ? size : size / ratio,
|
||||
id: data['id'],
|
||||
info: data.width + ' x ' + data.height + ' px',
|
||||
title: view == 'frames' ? Ox.formatDuration(data.position) : data.source,
|
||||
url: data.url,
|
||||
width: ratio >= 1 ? size : size * ratio
|
||||
}
|
||||
},
|
||||
items: images,
|
||||
keys: view == 'frames'
|
||||
? ['index', 'position', 'width', 'height', 'url']
|
||||
: ['index', 'source', 'width', 'height', 'url'],
|
||||
max: 1,
|
||||
min: 1,
|
||||
orientation: 'vertical',
|
||||
selected: [selectedImage['index']],
|
||||
size: 128,
|
||||
sort: [{key: 'index', operator: '+'}],
|
||||
unique: 'index'
|
||||
})
|
||||
.css({background: 'rgb(16, 16, 16)'})
|
||||
.bindEvent({
|
||||
select: function(event) {
|
||||
var index = event.ids[0];
|
||||
selectedImage = images.filter(function(image) {
|
||||
return image.index == index;
|
||||
})[0];
|
||||
renderPreview(selectedImage);
|
||||
pandora.api[view == 'frames' ? 'setPosterFrame' : 'setPoster'](Ox.extend({
|
||||
id: item
|
||||
}, view == 'frames' ? {
|
||||
position: selectedImage.index // api slightly inconsistent
|
||||
} : {
|
||||
source: selectedImage.source
|
||||
}), function(result) {
|
||||
var imageRatio = selectedImage.width / selectedImage.height;
|
||||
$('img[src*="/' + item + '/poster"]').each(function() {
|
||||
var $this = $(this),
|
||||
size = Math.max($this.width(), $this.height()),
|
||||
src = $this.attr('src').split('?')[0] + '?' + Ox.uid();
|
||||
$('<img>')
|
||||
.attr({src: src})
|
||||
.load(function() {
|
||||
$this.attr({src: src});
|
||||
view == 'posters' && $this.css(imageRatio < 1 ? {
|
||||
width: Math.round(size * imageRatio) + 'px',
|
||||
height: size + 'px'
|
||||
} : {
|
||||
width: size + 'px',
|
||||
height: Math.round(size / imageRatio) + 'px'
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
that.replaceElement(0, $list);
|
||||
renderPreview();
|
||||
});
|
||||
function ignoreFiles() {
|
||||
pandora.api.editMedia({
|
||||
files: self.selected.map(function(id) {
|
||||
return {id: id, ignore: true};
|
||||
})
|
||||
}, function(result) {
|
||||
Ox.Request.clearCache();
|
||||
self.$filesList.reloadList();
|
||||
});
|
||||
}
|
||||
|
||||
function renderPreview() {
|
||||
var previewWidth = pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1 - listWidth,
|
||||
previewHeight = pandora.$ui.contentPanel.size(1),
|
||||
previewRatio = previewWidth / previewHeight,
|
||||
imageRatio = selectedImage.width / selectedImage.height,
|
||||
imageWidth = imageRatio > previewRatio ? previewWidth : Math.round(previewHeight * imageRatio),
|
||||
imageHeight = imageRatio < previewRatio ? previewHeight : Math.round(previewWidth / imageRatio),
|
||||
imageLeft = Math.floor((previewWidth - imageWidth) / 2),
|
||||
imageTop = Math.floor((previewHeight - imageHeight) / 2);
|
||||
$preview.html(
|
||||
$('<img>')
|
||||
.attr({
|
||||
src: selectedImage.url
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: imageLeft + 'px',
|
||||
top: imageTop + 'px',
|
||||
width: imageWidth + 'px',
|
||||
height: imageHeight + 'px'
|
||||
})
|
||||
function moveFiles(data) {
|
||||
var data = {
|
||||
ids: self.selected,
|
||||
itemId: self.$idInput.value()
|
||||
};
|
||||
['title', 'director', 'year'].forEach(function(key) {
|
||||
data[key] = self['$' + key + 'Input'].value();
|
||||
});
|
||||
self.$moveButton.options(
|
||||
{disabled: true, title: Ox._('Moving Media...')}
|
||||
);
|
||||
if (view == 'frames') {
|
||||
var left = Math.floor((imageWidth - imageHeight) / 2),
|
||||
right = Math.ceil((imageWidth - imageHeight) / 2);
|
||||
$('<div>')
|
||||
.addClass('OxPosterMarker OxPosterMarkerLeft')
|
||||
.css({
|
||||
display: 'block',
|
||||
left: imageLeft + 'px',
|
||||
top: imageTop + 'px',
|
||||
width: left + 'px',
|
||||
height: imageHeight + 'px'
|
||||
})
|
||||
.appendTo($preview.$element);
|
||||
$('<div>')
|
||||
.addClass('OxPosterMarker OxPosterMarkerCenter')
|
||||
.css({
|
||||
display: 'block',
|
||||
left: imageLeft + left + 'px',
|
||||
top: imageTop + 'px',
|
||||
width: imageHeight - 2 + 'px',
|
||||
height: imageHeight - 2 + 'px'
|
||||
})
|
||||
.appendTo($preview.$element);
|
||||
$('<div>')
|
||||
.addClass('OxPosterMarker OxPosterMarkerRight')
|
||||
.css({
|
||||
display: 'block',
|
||||
left: imageLeft + left + imageHeight + 'px',
|
||||
top: imageTop + 'px',
|
||||
width: right + 'px',
|
||||
height: imageHeight + 'px'
|
||||
})
|
||||
.appendTo($preview.$element);
|
||||
}
|
||||
pandora.api.moveMedia(data, function(result) {
|
||||
if (
|
||||
pandora.user.ui.item == self.options.id
|
||||
&& pandora.user.ui.itemView == 'files'
|
||||
) {
|
||||
Ox.Request.clearCache(); // fixme: remove
|
||||
if (self.$switch.value()) {
|
||||
pandora.UI.set({item: result.data.itemId});
|
||||
pandora.updateItemContext();
|
||||
} else {
|
||||
self.$filesList.reloadList();
|
||||
self.$instancesList.reloadList();
|
||||
self.$moveButton.options(
|
||||
{disabled: false, title: Ox._('Move Media')}
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openFiles(data) {
|
||||
data.ids.length == 1 && pandora.api.parsePath({
|
||||
path: self.$instancesList.value(data.ids[0], 'path')
|
||||
}, function(result) {
|
||||
['title', 'director', 'year'].forEach(function(key) {
|
||||
if (result.data[key]) {
|
||||
self['$' + key + 'Input'].value(
|
||||
key == 'director'
|
||||
? result.data[key].join(', ')
|
||||
: result.data[key]
|
||||
);
|
||||
}
|
||||
});
|
||||
updateForm();
|
||||
self.$titleInput.triggerEvent('change', {value: result.data['title']});
|
||||
});
|
||||
}
|
||||
|
||||
function selectFiles(data) {
|
||||
self.selected = data.ids;
|
||||
self.$instancesList.options({
|
||||
items: data.ids.length == 1
|
||||
? self.$filesList.value(data.ids[0], 'instances') : []
|
||||
});
|
||||
updateForm();
|
||||
}
|
||||
|
||||
function saveChanges() {
|
||||
self.$saveButton.options({disabled: true, title: Ox._('Saving Changes...')});
|
||||
pandora.api.findMedia({
|
||||
keys: ['id'],
|
||||
query: self.filesQuery
|
||||
}, function(result) {
|
||||
pandora.api.editMedia({
|
||||
files: result.data.items.map(function(item) {
|
||||
[
|
||||
'version', 'part', 'partTitle', 'language', 'extension'
|
||||
].forEach(function(key) {
|
||||
Ox.extend(item, key, self.$filesList.value(item.id, key));
|
||||
})
|
||||
return item;
|
||||
})
|
||||
}, function(result) {
|
||||
self.$saveButton.options({title: Ox._('Save Changes')});
|
||||
Ox.Request.clearCache(); // fixme: remove
|
||||
self.$filesList.reloadList();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateForm() {
|
||||
if (self.selected.length == self.numberOfItems) {
|
||||
self.wasChecked = self.$switch.value();
|
||||
self.$switch.options({
|
||||
disabled: true,
|
||||
value: true
|
||||
});
|
||||
} else {
|
||||
self.$switch.options({
|
||||
disabled: false,
|
||||
value: self.wasChecked
|
||||
});
|
||||
}
|
||||
self.$moveButton.options({
|
||||
disabled: self.selected.length == 0
|
||||
});
|
||||
self.$menu[
|
||||
self.selected.length == 0 ? 'disableItem' : 'enableItem'
|
||||
]('ignore');
|
||||
}
|
||||
|
||||
that.reload = function() {
|
||||
self.$filesList.reloadList();
|
||||
}
|
||||
return that;
|
||||
|
||||
}
|
||||
};
|
||||
|
|
|
|||
160
static/js/pandora/postersView.js
Normal file
160
static/js/pandora/postersView.js
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
'use strict';
|
||||
|
||||
pandora.ui.posterView = function() {
|
||||
|
||||
var item = pandora.user.ui.item,
|
||||
view = pandora.user.ui.itemView,
|
||||
listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
|
||||
selectedImage = {};
|
||||
$preview = Ox.Element(),
|
||||
that = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.Element(),
|
||||
size: listWidth
|
||||
},
|
||||
{
|
||||
element: $preview
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
});
|
||||
|
||||
that.resize = function() {
|
||||
selectedImage.url && renderPreview();
|
||||
}
|
||||
|
||||
pandora.api.get({
|
||||
id: item,
|
||||
keys: [view]
|
||||
}, function(result) {
|
||||
var images = result.data[view];
|
||||
selectedImage = images.filter(function(image) {
|
||||
return image.selected;
|
||||
})[0];
|
||||
var $list = Ox.IconList({
|
||||
item: function(data, sort, size) {
|
||||
var ratio = data.width / data.height;
|
||||
size = size || 128;
|
||||
return {
|
||||
height: ratio <= 1 ? size : size / ratio,
|
||||
id: data['id'],
|
||||
info: data.width + ' x ' + data.height + ' px',
|
||||
title: view == 'frames' ? Ox.formatDuration(data.position) : data.source,
|
||||
url: data.url,
|
||||
width: ratio >= 1 ? size : size * ratio
|
||||
}
|
||||
},
|
||||
items: images,
|
||||
keys: view == 'frames'
|
||||
? ['index', 'position', 'width', 'height', 'url']
|
||||
: ['index', 'source', 'width', 'height', 'url'],
|
||||
max: 1,
|
||||
min: 1,
|
||||
orientation: 'vertical',
|
||||
selected: [selectedImage['index']],
|
||||
size: 128,
|
||||
sort: [{key: 'index', operator: '+'}],
|
||||
unique: 'index'
|
||||
})
|
||||
.css({background: 'rgb(16, 16, 16)'})
|
||||
.bindEvent({
|
||||
select: function(event) {
|
||||
var index = event.ids[0];
|
||||
selectedImage = images.filter(function(image) {
|
||||
return image.index == index;
|
||||
})[0];
|
||||
renderPreview(selectedImage);
|
||||
pandora.api[view == 'frames' ? 'setPosterFrame' : 'setPoster'](Ox.extend({
|
||||
id: item
|
||||
}, view == 'frames' ? {
|
||||
position: selectedImage.index // api slightly inconsistent
|
||||
} : {
|
||||
source: selectedImage.source
|
||||
}), function(result) {
|
||||
var imageRatio = selectedImage.width / selectedImage.height;
|
||||
$('img[src*="/' + item + '/poster"]').each(function() {
|
||||
var $this = $(this),
|
||||
size = Math.max($this.width(), $this.height()),
|
||||
src = $this.attr('src').split('?')[0] + '?' + Ox.uid();
|
||||
$('<img>')
|
||||
.attr({src: src})
|
||||
.load(function() {
|
||||
$this.attr({src: src});
|
||||
view == 'posters' && $this.css(imageRatio < 1 ? {
|
||||
width: Math.round(size * imageRatio) + 'px',
|
||||
height: size + 'px'
|
||||
} : {
|
||||
width: size + 'px',
|
||||
height: Math.round(size / imageRatio) + 'px'
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
that.replaceElement(0, $list);
|
||||
renderPreview();
|
||||
});
|
||||
|
||||
function renderPreview() {
|
||||
var previewWidth = pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1 - listWidth,
|
||||
previewHeight = pandora.$ui.contentPanel.size(1),
|
||||
previewRatio = previewWidth / previewHeight,
|
||||
imageRatio = selectedImage.width / selectedImage.height,
|
||||
imageWidth = imageRatio > previewRatio ? previewWidth : Math.round(previewHeight * imageRatio),
|
||||
imageHeight = imageRatio < previewRatio ? previewHeight : Math.round(previewWidth / imageRatio),
|
||||
imageLeft = Math.floor((previewWidth - imageWidth) / 2),
|
||||
imageTop = Math.floor((previewHeight - imageHeight) / 2);
|
||||
$preview.html(
|
||||
$('<img>')
|
||||
.attr({
|
||||
src: selectedImage.url
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: imageLeft + 'px',
|
||||
top: imageTop + 'px',
|
||||
width: imageWidth + 'px',
|
||||
height: imageHeight + 'px'
|
||||
})
|
||||
);
|
||||
if (view == 'frames') {
|
||||
var left = Math.floor((imageWidth - imageHeight) / 2),
|
||||
right = Math.ceil((imageWidth - imageHeight) / 2);
|
||||
$('<div>')
|
||||
.addClass('OxPosterMarker OxPosterMarkerLeft')
|
||||
.css({
|
||||
display: 'block',
|
||||
left: imageLeft + 'px',
|
||||
top: imageTop + 'px',
|
||||
width: left + 'px',
|
||||
height: imageHeight + 'px'
|
||||
})
|
||||
.appendTo($preview.$element);
|
||||
$('<div>')
|
||||
.addClass('OxPosterMarker OxPosterMarkerCenter')
|
||||
.css({
|
||||
display: 'block',
|
||||
left: imageLeft + left + 'px',
|
||||
top: imageTop + 'px',
|
||||
width: imageHeight - 2 + 'px',
|
||||
height: imageHeight - 2 + 'px'
|
||||
})
|
||||
.appendTo($preview.$element);
|
||||
$('<div>')
|
||||
.addClass('OxPosterMarker OxPosterMarkerRight')
|
||||
.css({
|
||||
display: 'block',
|
||||
left: imageLeft + left + imageHeight + 'px',
|
||||
top: imageTop + 'px',
|
||||
width: right + 'px',
|
||||
height: imageHeight + 'px'
|
||||
})
|
||||
.appendTo($preview.$element);
|
||||
}
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
'use strict';
|
||||
|
||||
pandora.ui.uploadFileDialog = function(file, callback) {
|
||||
pandora.ui.uploadDocumentDialog = function(file, callback) {
|
||||
|
||||
var extension = file.name.split('.').pop().toLowerCase(),
|
||||
|
||||
|
|
@ -65,7 +65,7 @@ pandora.ui.uploadFileDialog = function(file, callback) {
|
|||
filename: filename
|
||||
},
|
||||
file: file,
|
||||
url: '/api/upload/file/',
|
||||
url: '/api/upload/document/',
|
||||
})
|
||||
.bindEvent({
|
||||
done: function(data) {
|
||||
|
|
@ -89,7 +89,7 @@ pandora.ui.uploadFileDialog = function(file, callback) {
|
|||
return errorDialog(Ox._('Supported file types are GIF, JPG, PNG and PDF.'));
|
||||
} else {
|
||||
Ox.oshash(file, function(oshash) {
|
||||
pandora.api.findFiles({
|
||||
pandora.api.findDocuments({
|
||||
keys: ['id'],
|
||||
query: {
|
||||
conditions: [{key: 'oshash', value: oshash, operator: '=='}],
|
||||
|
|
@ -1031,7 +1031,7 @@ pandora.getSpan = function(state, str, callback) {
|
|||
|
||||
pandora.getStatusText = function(data) {
|
||||
var ui = pandora.user.ui,
|
||||
canSeeFiles = pandora.site.capabilities.canSeeFiles[pandora.user.level],
|
||||
canSeeMedia = pandora.site.capabilities.canSeeMedia[pandora.user.level],
|
||||
canSeeSize = pandora.site.capabilities.canSeeSize[pandora.user.level],
|
||||
itemName = ui.listView == 'clip'
|
||||
? (data.items == 1 ? Ox._('Clip') : Ox._('Clips'))
|
||||
|
|
@ -1043,7 +1043,7 @@ pandora.getStatusText = function(data) {
|
|||
} else if (data.duration) {
|
||||
parts.push(Ox.formatDuration(data.duration, 'short'));
|
||||
}
|
||||
if (canSeeFiles) {
|
||||
if (canSeeMedia) {
|
||||
data.files && parts.push(
|
||||
Ox.formatCount(data.files, 'file')
|
||||
);
|
||||
|
|
@ -1052,7 +1052,7 @@ pandora.getStatusText = function(data) {
|
|||
if (canSeeSize) {
|
||||
data.size && parts.push(Ox.formatValue(data.size, 'B'));
|
||||
}
|
||||
if (canSeeFiles) {
|
||||
if (canSeeMedia) {
|
||||
data.pixels && parts.push(Ox.formatValue(data.pixels, 'px'));
|
||||
}
|
||||
return parts.join(', ');
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ pandora.ui.viewSelect = function() {
|
|||
sortKey = !ui.item ? 'listSort' : 'itemSort',
|
||||
viewKey = !ui.item ? 'listView' : 'itemView',
|
||||
items = pandora.site[viewKey + 's'].filter(function(view) {
|
||||
return view.id != 'data' && view.id != 'files';
|
||||
return view.id != 'data' && view.id != 'media';
|
||||
}).map(function(view) {
|
||||
return {id: view.id, title: Ox._('View {0}', [Ox._(view.title)])};
|
||||
}),
|
||||
|
|
@ -19,7 +19,7 @@ pandora.ui.viewSelect = function() {
|
|||
items = items.concat([
|
||||
{},
|
||||
{id: 'data', title: Ox._('View Data')},
|
||||
{id: 'files', title: Ox._('View Files')}
|
||||
{id: 'media', title: Ox._('View Media')}
|
||||
]);
|
||||
}
|
||||
that = Ox.Select({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue