forked from 0x2620/pandora
updating info (part 2)
This commit is contained in:
parent
02db844ef0
commit
7d67386f55
7 changed files with 159 additions and 90 deletions
|
@ -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());
|
||||
|
|
|
@ -222,7 +222,9 @@ pandora.URL = (function() {
|
|||
pandora.$ui.mainPanel.replaceElement(1, pandora.$ui.rightPanel = pandora.ui.rightPanel());
|
||||
} else {
|
||||
// item to item
|
||||
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'
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -1,41 +1,27 @@
|
|||
// 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()
|
||||
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 (id) {
|
||||
if (!pandora.user.ui.item && pandora.isClipView(pandora.user.ui.lists[pandora.user.ui.list].listView)) {
|
||||
// Poster
|
||||
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 = Math.min(pandora.user.ui.sidebarSize, 256);
|
||||
height = pandora.getInfoHeight();
|
||||
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.$ui.posterInfo = pandora.ui.posterInfo(Ox.extend(result.data, {id: id}))
|
||||
);
|
||||
pandora.user.infoRatio = 1;
|
||||
});
|
||||
} else {
|
||||
// Video Preview
|
||||
} else if (view == 'video') {
|
||||
pandora.api.get({id: id, keys: ['duration', 'videoRatio']}, function(result) {
|
||||
if (result.data) {
|
||||
pandora.$ui.videoPreview && pandora.$ui.videoPreview.removeElement();
|
||||
|
@ -47,10 +33,107 @@ pandora.ui.info = function(id) {
|
|||
}
|
||||
});
|
||||
}
|
||||
} else if (pandora.$ui.leftPanel) {
|
||||
//pandora.user.infoRatio = 1;
|
||||
//resize(pandora.user.ui.sidebarSize);
|
||||
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)
|
||||
}
|
||||
}
|
||||
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;
|
||||
};
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue