decentral1se/pandora
1
0
Fork 0
forked from 0x2620/pandora
Code Issues Pull requests Projects Releases Wiki Activity

updating info (part 2)

Browse source
This commit is contained in:
rolux 2011-09-18 21:18:05 +00:00
parent 02db844ef0
commit 7d67386f55
7 changed files with 159 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
static/js/pandora.js
View file

@ -51,29 +51,7 @@ Ox.load({
site: data.site,
user: data.user.level == 'guest' ? Ox.clone(data.site.user) : data.user
});
/*
// ---- fixme: remove, server sends wrong data
pandora.site.user.ui.lists = {
"": {
"columns": ["title", "director", "country", "year", "language", "runtime", "genre"],
"columnWidth": {},
"listView": "grid",
"selected": [],
"sort": [
{"key": "director", "operator": ""}
]
}
};
pandora.site.user.ui.groups = [
{"id": "director", "sort": [{"key": "items", "operator": "-"}]},
{"id": "country", "sort": [{"key": "items", "operator": "-"}]},
{"id": "year", "sort": [{"key": "name", "operator": "-"}]},
{"id": "language", "sort": [{"key": "items", "operator": "-"}]},
{"id": "genre", "sort": [{"key": "items", "operator": "-"}]}
];
// ----
*/
Ox.print("USER.UI.LISTS", data.user.ui.lists, "SITE.USER.UI.LISTS", data.site.user.ui.lists)
Ox.extend(pandora.site, {
findKeys: Ox.map(data.site.itemKeys, function(key) {
return key.find ? key : null;
@ -101,7 +79,6 @@ Ox.load({
})
});
Ox.extend(pandora.user, {
infoRatio: 16 / 9,
sectionElement: 'buttons',
selectedMovies: [],
videoFormat: Ox.UI.getVideoFormat(pandora.site.video.formats)
@ -164,6 +141,8 @@ Ox.load({
function resizeWindow() {
pandora.resizeFolders();
pandora.$ui.leftPanel.size(2, pandora.getInfoHeight());
pandora.$ui.info.resizeInfo();
if (!pandora.user.ui.item) {
pandora.$ui.list.size();
pandora.resizeGroups(pandora.$ui.rightPanel.width());

4
static/js/pandora/URL.js
View file

@ -222,7 +222,9 @@ pandora.URL = (function() {
pandora.$ui.mainPanel.replaceElement(1, pandora.$ui.rightPanel = pandora.ui.rightPanel());
} else {
// item to item
pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
if (pandora.user.ui.item != oldUserUI.item) {
pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
}
pandora.$ui.contentPanel.replaceElement(1, pandora.ui.item());
}
// fixme: should be 'video', not 'player'

14
static/js/pandora/pandora.js
View file

@ -298,7 +298,19 @@ pandora.getGroupsSizes = function() {
pandora.getInfoHeight = function() {
// fixme: new, check if it can be used more
return pandora.user.ui.showInfo * pandora.user.ui.sidebarSize / pandora.user.infoRatio;
var isVideoPreview, list
if (!pandora.user.ui.item) {
list = pandora.user.ui.lists[pandora.user.ui.list];
isVideoPreview = list.selected.length && !pandora.isClipView(list.listView);
} else {
isVideoPreview = !pandora.isClipView(pandora.user.ui.itemView, true);
}
return pandora.user.ui.showInfo * Math.min(
isVideoPreview
? pandora.user.ui.sidebarSize / (16/9) + 16
: pandora.user.ui.sidebarSize,
window.innerHeight - 109 // 20 menu + 24 bar + 64 (4 closed folders) + 1 resizebar
);
}
pandora.getListData = function() {

177
static/js/pandora/ui/info.js
View file

@ -1,56 +1,139 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
pandora.ui.info = function(id) {
id = id || pandora.user.ui.item;
var that = Ox.Element()
.bindEvent({
toggle: function(data) {
pandora.UI.set({showInfo: !data.collapsed});
pandora.resizeFolders();
}
});
if (id) {
if (!pandora.user.ui.item && pandora.isClipView(pandora.user.ui.lists[pandora.user.ui.list].listView)) {
// Poster
pandora.api.get({id: id, keys: ['director', 'posterRatio', 'title']}, function(result) {
var ratio = result.data.posterRatio,
height = Math.min(pandora.user.ui.sidebarSize, 256);
that.empty().append(
Ox.Element({
element: '<img>',
tooltip: '<span class="OxBright">' + result.data.title + '</span>' + (
result.data.director ? '<br/>' + result.data.director.join(', ') : ''
)
}).attr({
src: '/' + id + '/poster256.jpg'
}).css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
height: height + 'px',
margin: 'auto'
})
);
pandora.user.infoRatio = 1;
});
} else {
// Video Preview
pandora.api.get({id: id, keys: ['duration', 'videoRatio']}, function(result) {
if (result.data) {
pandora.$ui.videoPreview && pandora.$ui.videoPreview.removeElement();
pandora.$ui.videoPreview = pandora.ui.videoPreview({
id: id,
duration: result.data.duration,
frameRatio: result.data.videoRatio
}).appendTo(pandora.$ui.info);
var list = pandora.user.ui.lists[pandora.user.ui.list],
id = id || pandora.user.ui.item || (list.selected.length ? list.selected[list.selected.length - 1] : null),
view = getView(),
that = Ox.Element()
.css({overflowX: 'hidden', overflowY: 'auto'})
.bindEvent({
toggle: function(data) {
pandora.UI.set({showInfo: !data.collapsed});
pandora.resizeFolders();
}
});
if (view == 'list') {
that.empty().append(pandora.$ui.listInfo = pandora.ui.listInfo(list));
} else if (view == 'poster') {
pandora.api.get({id: id, keys: ['director', 'posterRatio', 'title']}, function(result) {
var ratio = result.data.posterRatio,
height = pandora.getInfoHeight();
that.empty().append(
pandora.$ui.posterInfo = pandora.ui.posterInfo(Ox.extend(result.data, {id: id}))
);
});
} else if (view == 'video') {
pandora.api.get({id: id, keys: ['duration', 'videoRatio']}, function(result) {
if (result.data) {
pandora.$ui.videoPreview && pandora.$ui.videoPreview.removeElement();
pandora.$ui.videoPreview = pandora.ui.videoPreview({
id: id,
duration: result.data.duration,
frameRatio: result.data.videoRatio
}).appendTo(pandora.$ui.info);
}
});
}
pandora.$ui.leftPanel && resize();
function getView() {
return !id ? 'list'
: !pandora.user.ui.item && pandora.isClipView(list.listView) ? 'poster'
: 'video';
}
function resize() {
var height = pandora.getInfoHeight();
if (height != pandora.$ui.leftPanel.size(2)) {
!pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -height});
// fixme: why is this timeout needed?
setTimeout(function() {
pandora.$ui.leftPanel.size(2, height, function() {
pandora.resizeFolders();
});
}, 0)
}
} else if (pandora.$ui.leftPanel) {
//pandora.user.infoRatio = 1;
//resize(pandora.user.ui.sidebarSize);
}
that.resizeInfo = function() {
if (view == 'list') {
pandora.$ui.listInfo.resizeIcon();
} else if (view == 'poster') {
pandora.$ui.posterInfo.resizePoster();
} else if (view == 'video') {
pandora.$ui.videoPreview.options({
height: pandora.getInfoHeight(),
width: pandora.user.ui.sidebarSize
})
}
};
return that;
};
pandora.ui.listInfo = function(data) {
var that = $('<div>').css({padding: '16px', textAlign: 'center'});
var $icon = $('<img>')
.attr({src: !pandora.user.ui.list ? '/static/png/icon256.png' : Ox.UI.getImageURL('symbolIcon')})
.css(getIconCSS())
.appendTo(that);
$('<div>').css({padding: '16px 0 16px 0', fontWeight: 'bold'}).html(!pandora.user.ui.list ? 'All Movies' : pandora.user.ui.list.replace('/', ': ')).appendTo(that);
$('<div>').css({textAlign: 'left'}).html(Ox.repeat('This is the list info text. ', 10)).appendTo(that);
function getIconCSS() {
var size = Math.round(pandora.user.ui.sidebarSize / 2);
return {width: size + 'px', height: size + 'px'};
}
that.resizeIcon = function() {
$icon.css(getIconCSS());
}
return that;
};
pandora.ui.posterInfo = function(data) {
var $poster = $('<img>')
.attr({src: '/' + data.id + '/poster512.jpg'})
.css(getPosterCSS()),
$text = $('<div>')
.css({
width: pandora.user.ui.sidebarSize - 8 + 'px',
height: '12px',
padding: '2px 4px 2px 4px',
fontSize: '9px',
textAlign: 'center',
textOverflow: 'ellipsis',
overflow: 'hidden'
})
.html(
data.title + (
data.director ? ' (' + data.director.join(', ') + ')' : ''
)
);
that = Ox.SplitPanel({
elements: [
{
element: $('<div>').append($poster)
},
{
element: Ox.Bar({size: 16}).append($text),
size: 16
}
],
orientation: 'vertical'
});
function getPosterCSS() {
var css = {},
ratio = pandora.user.ui.sidebarSize / (pandora.user.ui.sidebarSize - 16);
if (data.posterRatio < ratio) {
css.height = pandora.user.ui.sidebarSize - 16;
css.width = Math.round(css.height * data.posterRatio);
css.marginLeft = Math.floor((pandora.user.ui.sidebarSize - css.width) / 2);
} else {
css.width = pandora.user.ui.sizebarSize;
css.height = Math.round(css.width / data.posterRatio);
css.marginTop = Math.floor((pandora.user.ui.sidebarSize - 16 - css.height) / 2);
}
return Ox.map(css, function(value) {
return value + 'px';
});
}
that.resizePoster = function() {
$poster.css(getPosterCSS());
$text.css({width: pandora.user.ui.sidebarSize - 8 + 'px'})
}
return that;
};

20
static/js/pandora/ui/leftPanel.js
View file

@ -13,7 +13,7 @@ pandora.ui.leftPanel = function() {
collapsed: !pandora.user.ui.showInfo,
collapsible: true,
element: pandora.$ui.info = pandora.ui.info(),
size: Math.min(pandora.user.ui.sidebarSize, 256),
size: pandora.getInfoHeight(),
tooltip: 'info'
}
],
@ -22,10 +22,7 @@ pandora.ui.leftPanel = function() {
})
.bindEvent({
resize: function(data) {
Ox.print('LEFT PANEL RESIZE')
var infoSize = Math.min(data.size, 256);
// fixme: don't make a request here:
pandora.UI.set('sidebarSize', data.size);
pandora.user.ui.sidebarSize = data.size;
if (data.size < pandora.site.sectionButtonsWidth && pandora.$ui.sectionButtons) {
pandora.$ui.sectionButtons.removeElement();
delete pandora.$ui.sectionButtons;
@ -36,18 +33,13 @@ pandora.ui.leftPanel = function() {
pandora.$ui.sectionbar.append(pandora.$ui.sectionButtons = pandora.ui.sectionButtons());
}
!pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -infoSize});
pandora.$ui.leftPanel.size(2, infoSize);
if (pandora.$ui.videoPreview) {
pandora.$ui.videoPreview.options({
height: infoSize,
width: data.size
});
} else {
pandora.$ui.info.find('img').css({height: infoSize + 'px'})
}
pandora.$ui.leftPanel.size(2, pandora.getInfoHeight());
pandora.$ui.info.resizeInfo();
pandora.resizeFolders();
},
resizeend: function(data) {
// set to 0 so that UI.set registers a change of the value
pandora.user.ui.sidebarSize = 0;
pandora.UI.set({sidebarSize: data.size});
},
toggle: function(data) {

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

@ -284,7 +284,6 @@ pandora.ui.list = function() { // fixme: remove view argument
$video.trigger('mousedown');
Ox.UI.$window.trigger('mouseup');
}
$video && Ox.print('OPENPREVIEW!!!@!')
that.closePreview();
},
select: function(data) {
@ -334,6 +333,7 @@ pandora.ui.list = function() { // fixme: remove view argument
}, 300);
}
} else {
pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
$('.OxSelectedVideo').removeClass('OxSelectedVideo');
}
}
@ -655,7 +655,7 @@ pandora.ui.list = function() { // fixme: remove view argument
pandora.$ui.mainMenu.disableItem('copy');
pandora.$ui.mainMenu.disableItem('openmovie');
}
pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info(data.ids[0]));
pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
pandora.api.find({
query: {
conditions: data.ids.map(function(id) {

3
static/js/pandora/ui/videoPreview.js
View file

@ -14,7 +14,8 @@ pandora.ui.videoPreview = function(data) {
) + '.jpg';
},
frameRatio: data.frameRatio,
height: Math.min(pandora.user.ui.sidebarSize, 256),
height: pandora.getInfoHeight(),
scaleToFill: true,
timeline: '/' + data.id + '/timeline16p.png',
width: pandora.user.ui.sidebarSize
})