0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

add mediaView.js

Browse source
This commit is contained in:
rolux 2011-06-06 18:40:24 +00:00
parent b93d1b1190
commit 495bb5dc83
7 changed files with 127 additions and 223 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
static/js/pandora.js
View file

@ -16,6 +16,8 @@ Ox.load('UI', {
theme: 'modern'
}, function() {
// fixme: use Ox.extend()
Ox.load('Geo', function() {
window.pandora = new Ox.App({url: '/api/'}).bindEvent({
@ -72,8 +74,16 @@ Ox.load('Geo', function() {
sortKeys: $.map(data.site.itemKeys, function(key, i) {
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, {
infoRatio: 16 / 9,
sectionElement: 'buttons',

109
static/js/pandora/ui/framesDialog.js
View file

@ -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;
};

4
static/js/pandora/ui/item.js
View file

@ -342,6 +342,10 @@ pandora.ui.item = function() {
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(', ')+')':'';
pandora.$ui.total.html(result.data.title + director);

107
static/js/pandora/ui/mediaView.js Normal file
View 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;
}

109
static/js/pandora/ui/postersDialog.js
View file

@ -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;
};

6
static/js/pandora/ui/viewSelect.js
View file

@ -2,12 +2,14 @@
pandora.ui.viewSelect = function() {
var that = Ox.Select({
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), {
checked: pandora.user.ui.lists[pandora.user.ui.list].listView == view.id,
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), {
checked: pandora.user.ui.itemView == view.id,
title: 'View: ' + view.title

3
static/json/pandora.json
View file

@ -40,6 +40,5 @@
"js/pandora/ui/appPanel.js",
"js/pandora/ui/flipbook.js",
"js/pandora/ui/editor.js",
"js/pandora/ui/postersDialog.js",
"js/pandora/ui/framesDialog.js"
"js/pandora/ui/mediaView.js"
]