add mediaView.js
This commit is contained in:
rolux
parent
b93d1b1190
commit
495bb5dc83
7 changed files with 127 additions and 223 deletions
|
|
@ -16,6 +16,8 @@ Ox.load('UI', {
|
||||||
theme: 'modern'
|
theme: 'modern'
|
||||||
}, function() {
|
}, function() {
|
||||||
|
|
||||||
|
// fixme: use Ox.extend()
|
||||||
|
|
||||||
Ox.load('Geo', function() {
|
Ox.load('Geo', function() {
|
||||||
|
|
||||||
window.pandora = new Ox.App({url: '/api/'}).bindEvent({
|
window.pandora = new Ox.App({url: '/api/'}).bindEvent({
|
||||||
|
|
@ -72,8 +74,16 @@ Ox.load('Geo', function() {
|
||||||
sortKeys: $.map(data.site.itemKeys, function(key, i) {
|
sortKeys: $.map(data.site.itemKeys, function(key, i) {
|
||||||
return key.columnWidth ? key : null;
|
return key.columnWidth ? key : null;
|
||||||
})
|
})
|
||||||
|
|
||||||
});
|
});
|
||||||
|
pandora.site.itemViews.push(
|
||||||
|
{id: 'files', title: 'Files', admin: 'true'}
|
||||||
|
);
|
||||||
|
pandora.site.media.importPosterFrames && pandora.site.itemViews.push(
|
||||||
|
{id: 'frames', title: 'Frames', admin: 'true'}
|
||||||
|
);
|
||||||
|
pandora.site.media.importMoviePosters && pandora.site.itemViews.push(
|
||||||
|
{id: 'posters', title: 'Posters', admin: 'true'}
|
||||||
|
);
|
||||||
$.extend(pandora.user, {
|
$.extend(pandora.user, {
|
||||||
infoRatio: 16 / 9,
|
infoRatio: 16 / 9,
|
||||||
sectionElement: 'buttons',
|
sectionElement: 'buttons',
|
||||||
|
|
|
||||||
|
|
@ -1,109 +0,0 @@
|
||||||
pandora.ui.framesDialog = function(id) {
|
|
||||||
|
|
||||||
var height = Math.round(window.innerHeight * 0.9),
|
|
||||||
width = Math.round(window.innerWidth * 0.5),
|
|
||||||
listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
|
|
||||||
previewWidth = width - listWidth,
|
|
||||||
previewHeight = height - 48,
|
|
||||||
previewRatio = previewWidth / previewHeight,
|
|
||||||
$preview = Ox.Element(),
|
|
||||||
$panel = Ox.SplitPanel({
|
|
||||||
elements: [
|
|
||||||
{
|
|
||||||
element: Ox.Element(),
|
|
||||||
size: listWidth
|
|
||||||
},
|
|
||||||
{
|
|
||||||
element: $preview
|
|
||||||
}
|
|
||||||
],
|
|
||||||
orientation: 'horizontal'
|
|
||||||
}),
|
|
||||||
that = Ox.Dialog({
|
|
||||||
buttons: [
|
|
||||||
Ox.Button({
|
|
||||||
id: 'done',
|
|
||||||
title: 'Done'
|
|
||||||
}).bindEvent({
|
|
||||||
click: function() {
|
|
||||||
that.close();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
],
|
|
||||||
content: $panel,
|
|
||||||
height: height,
|
|
||||||
padding: 0,
|
|
||||||
title: 'Manage Posters',
|
|
||||||
width: width
|
|
||||||
});
|
|
||||||
|
|
||||||
pandora.api.get({
|
|
||||||
id: id,
|
|
||||||
keys: ['frames']
|
|
||||||
}, function(result) {
|
|
||||||
var frames = result.data.frames,
|
|
||||||
selected = [frames.filter(function(frame) {
|
|
||||||
return frame.selected;
|
|
||||||
})[0]['position']],
|
|
||||||
$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'],
|
|
||||||
title: Ox.formatDuration(data['position'], 'short'),
|
|
||||||
info: '',
|
|
||||||
url: data.url,
|
|
||||||
width: ratio >= 1 ? size : size * ratio
|
|
||||||
};
|
|
||||||
},
|
|
||||||
items: frames,
|
|
||||||
keys: ['id', 'position', 'width', 'height', 'url'],
|
|
||||||
max: 1,
|
|
||||||
min: 1,
|
|
||||||
orientation: 'vertical',
|
|
||||||
selected: selected,
|
|
||||||
size: 128,
|
|
||||||
sort: [{key: 'position', operator: '+'}],
|
|
||||||
unique: 'id'
|
|
||||||
})
|
|
||||||
.css({background: 'rgb(16, 16, 16)'})
|
|
||||||
.bindEvent({
|
|
||||||
select: function(event) {
|
|
||||||
var position = event.ids[0],
|
|
||||||
frame = frames.filter(function(frame) {
|
|
||||||
return frame.id == position;
|
|
||||||
})[0],
|
|
||||||
frameRatio = frame.width / frame.height,
|
|
||||||
frameWidth = frameRatio > previewRatio ? previewWidth : previewHeight * frameRatio,
|
|
||||||
frameHeight = frameRatio < previewRatio ? previewHeight : previewWidth / frameRatio;
|
|
||||||
$preview.html(
|
|
||||||
$('<img>')
|
|
||||||
.attr({
|
|
||||||
src: frame.url
|
|
||||||
})
|
|
||||||
.css({
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: frameWidth + 'px',
|
|
||||||
height: frameHeight + 'px',
|
|
||||||
margin: 'auto'
|
|
||||||
})
|
|
||||||
);
|
|
||||||
pandora.api.setPosterFrame({
|
|
||||||
id: id,
|
|
||||||
position: position
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$panel.replaceElement(0, $list);
|
|
||||||
});
|
|
||||||
|
|
||||||
return that;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
@ -342,6 +342,10 @@ pandora.ui.item = function() {
|
||||||
id: result.data.id
|
id: result.data.id
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
} else if (pandora.user.ui.itemView == 'frames' || pandora.user.ui.itemView == 'posters') {
|
||||||
|
pandora.$ui.contentPanel.replaceElement(1,
|
||||||
|
pandora.$ui.item = pandora.ui.mediaView()
|
||||||
|
);
|
||||||
}
|
}
|
||||||
var director = result.data.director?' ('+result.data.director.join(', ')+')':'';
|
var director = result.data.director?' ('+result.data.director.join(', ')+')':'';
|
||||||
pandora.$ui.total.html(result.data.title + director);
|
pandora.$ui.total.html(result.data.title + director);
|
||||||
|
|
|
||||||
107
static/js/pandora/ui/mediaView.js
Normal file
107
static/js/pandora/ui/mediaView.js
Normal file
|
|
@ -0,0 +1,107 @@
|
||||||
|
pandora.ui.mediaView = function() {
|
||||||
|
|
||||||
|
var item = pandora.user.ui.item,
|
||||||
|
view = pandora.user.ui.itemView,
|
||||||
|
width = pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1,
|
||||||
|
height = pandora.$ui.contentPanel.size(1),
|
||||||
|
listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
|
||||||
|
previewWidth = width - listWidth,
|
||||||
|
previewHeight = height - 48,
|
||||||
|
previewRatio = previewWidth / previewHeight,
|
||||||
|
$preview = Ox.Element(),
|
||||||
|
that = Ox.SplitPanel({
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
element: Ox.Element(),
|
||||||
|
size: listWidth
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: $preview
|
||||||
|
}
|
||||||
|
],
|
||||||
|
orientation: 'horizontal'
|
||||||
|
});
|
||||||
|
|
||||||
|
pandora.api.get({
|
||||||
|
id: item,
|
||||||
|
keys: [view]
|
||||||
|
}, function(result) {
|
||||||
|
var images = result.data[view],
|
||||||
|
selected = [images.filter(function(image) {
|
||||||
|
return image.selected;
|
||||||
|
})[0]['index']],
|
||||||
|
$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: selected,
|
||||||
|
size: 128,
|
||||||
|
sort: [{key: 'index', operator: '+'}],
|
||||||
|
unique: 'index'
|
||||||
|
})
|
||||||
|
.css({background: 'rgb(16, 16, 16)'})
|
||||||
|
.bindEvent({
|
||||||
|
select: function(event) {
|
||||||
|
var index = event.ids[0],
|
||||||
|
image = images.filter(function(image) {
|
||||||
|
return image.index == index;
|
||||||
|
})[0],
|
||||||
|
imageRatio = image.width / image.height,
|
||||||
|
imageWidth = imageRatio > previewRatio ? previewWidth : previewHeight * imageRatio,
|
||||||
|
imageHeight = imageRatio < previewRatio ? previewHeight : previewWidth / imageRatio;
|
||||||
|
$preview.html(
|
||||||
|
$('<img>')
|
||||||
|
.attr({
|
||||||
|
src: image.url
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
width: imageWidth + 'px',
|
||||||
|
height: imageHeight + 'px',
|
||||||
|
margin: 'auto'
|
||||||
|
})
|
||||||
|
);
|
||||||
|
pandora.api[view == 'frames' ? 'setPosterFrame' : 'setPoster'](Ox.extend({
|
||||||
|
id: item
|
||||||
|
}, view == 'frames' ? {
|
||||||
|
position: image.index // api slightly inconsistent
|
||||||
|
} : {
|
||||||
|
source: image.source
|
||||||
|
}), function(result) {
|
||||||
|
$('img[src*="/' + item + '/poster"]').each(function() {
|
||||||
|
var $this = $(this);
|
||||||
|
Ox.print('??', $this.attr('src').split('?')[0] + '?' + Ox.uid())
|
||||||
|
$this.attr({
|
||||||
|
src: $this.attr('src').split('?')[0] + '?' + Ox.uid()
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
that.replaceElement(0, $list);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
return that;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,109 +0,0 @@
|
||||||
pandora.ui.postersDialog = function(id) {
|
|
||||||
|
|
||||||
var height = Math.round(window.innerHeight * 0.9),
|
|
||||||
width = Math.round(window.innerWidth * 0.5),
|
|
||||||
listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
|
|
||||||
previewWidth = width - listWidth,
|
|
||||||
previewHeight = height - 48,
|
|
||||||
previewRatio = previewWidth / previewHeight,
|
|
||||||
$preview = Ox.Element(),
|
|
||||||
$panel = Ox.SplitPanel({
|
|
||||||
elements: [
|
|
||||||
{
|
|
||||||
element: Ox.Element(),
|
|
||||||
size: listWidth
|
|
||||||
},
|
|
||||||
{
|
|
||||||
element: $preview
|
|
||||||
}
|
|
||||||
],
|
|
||||||
orientation: 'horizontal'
|
|
||||||
}),
|
|
||||||
that = Ox.Dialog({
|
|
||||||
buttons: [
|
|
||||||
Ox.Button({
|
|
||||||
id: 'done',
|
|
||||||
title: 'Done'
|
|
||||||
}).bindEvent({
|
|
||||||
click: function() {
|
|
||||||
that.close();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
],
|
|
||||||
content: $panel,
|
|
||||||
height: height,
|
|
||||||
padding: 0,
|
|
||||||
title: 'Manage Posters',
|
|
||||||
width: width
|
|
||||||
});
|
|
||||||
|
|
||||||
pandora.api.get({
|
|
||||||
id: id,
|
|
||||||
keys: ['posters']
|
|
||||||
}, function(result) {
|
|
||||||
var posters = result.data.posters,
|
|
||||||
selected = [posters.filter(function(poster) {
|
|
||||||
return poster.selected;
|
|
||||||
})[0]['source']],
|
|
||||||
$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: data.source,
|
|
||||||
url: data.url,
|
|
||||||
width: ratio >= 1 ? size : size * ratio
|
|
||||||
}
|
|
||||||
},
|
|
||||||
items: posters,
|
|
||||||
keys: ['precedence', 'source', 'width', 'height', 'url'],
|
|
||||||
max: 1,
|
|
||||||
min: 1,
|
|
||||||
orientation: 'vertical',
|
|
||||||
selected: selected,
|
|
||||||
size: 128,
|
|
||||||
sort: [{key: 'precedence', operator: '+'}],
|
|
||||||
unique: 'source'
|
|
||||||
})
|
|
||||||
.css({background: 'rgb(16, 16, 16)'})
|
|
||||||
.bindEvent({
|
|
||||||
select: function(event) {
|
|
||||||
var source = event.ids[0],
|
|
||||||
poster = posters.filter(function(poster) {
|
|
||||||
return poster.source == source;
|
|
||||||
})[0],
|
|
||||||
posterRatio = poster.width / poster.height,
|
|
||||||
posterWidth = posterRatio > previewRatio ? previewWidth : previewHeight * posterRatio,
|
|
||||||
posterHeight = posterRatio < previewRatio ? previewHeight : previewWidth / posterRatio;
|
|
||||||
$preview.html(
|
|
||||||
$('<img>')
|
|
||||||
.attr({
|
|
||||||
src: poster.url
|
|
||||||
})
|
|
||||||
.css({
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: posterWidth + 'px',
|
|
||||||
height: posterHeight + 'px',
|
|
||||||
margin: 'auto'
|
|
||||||
})
|
|
||||||
);
|
|
||||||
pandora.api.setPoster({
|
|
||||||
id: id,
|
|
||||||
source: source
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$panel.replaceElement(0, $list);
|
|
||||||
});
|
|
||||||
|
|
||||||
return that;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
@ -2,12 +2,14 @@
|
||||||
pandora.ui.viewSelect = function() {
|
pandora.ui.viewSelect = function() {
|
||||||
var that = Ox.Select({
|
var that = Ox.Select({
|
||||||
id: 'viewSelect',
|
id: 'viewSelect',
|
||||||
items: !pandora.user.ui.item ? $.map(pandora.site.listViews, function(view) {
|
items: !pandora.user.ui.item ? pandora.site.listViews.map(function(view) {
|
||||||
return $.extend($.extend({}, view), {
|
return $.extend($.extend({}, view), {
|
||||||
checked: pandora.user.ui.lists[pandora.user.ui.list].listView == view.id,
|
checked: pandora.user.ui.lists[pandora.user.ui.list].listView == view.id,
|
||||||
title: 'View ' + view.title
|
title: 'View ' + view.title
|
||||||
});
|
});
|
||||||
}) : $.map(pandora.site.itemViews, function(view) {
|
}) : pandora.site.itemViews.filter(function(view) {
|
||||||
|
return !view.admin || pandora.user.level == 'admin';
|
||||||
|
}).map(function(view) {
|
||||||
return $.extend($.extend({}, view), {
|
return $.extend($.extend({}, view), {
|
||||||
checked: pandora.user.ui.itemView == view.id,
|
checked: pandora.user.ui.itemView == view.id,
|
||||||
title: 'View: ' + view.title
|
title: 'View: ' + view.title
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,5 @@
|
||||||
"js/pandora/ui/appPanel.js",
|
"js/pandora/ui/appPanel.js",
|
||||||
"js/pandora/ui/flipbook.js",
|
"js/pandora/ui/flipbook.js",
|
||||||
"js/pandora/ui/editor.js",
|
"js/pandora/ui/editor.js",
|
||||||
"js/pandora/ui/postersDialog.js",
|
"js/pandora/ui/mediaView.js"
|
||||||
"js/pandora/ui/framesDialog.js"
|
|
||||||
]
|
]
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue