diff --git a/static/js/pandora.js b/static/js/pandora.js
index 96f3a24c..925266ce 100644
--- a/static/js/pandora.js
+++ b/static/js/pandora.js
@@ -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());
diff --git a/static/js/pandora/URL.js b/static/js/pandora/URL.js
index 01039769..73af136d 100644
--- a/static/js/pandora/URL.js
+++ b/static/js/pandora/URL.js
@@ -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'
diff --git a/static/js/pandora/pandora.js b/static/js/pandora/pandora.js
index b9da2916..f7f879c0 100644
--- a/static/js/pandora/pandora.js
+++ b/static/js/pandora/pandora.js
@@ -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() {
diff --git a/static/js/pandora/ui/info.js b/static/js/pandora/ui/info.js
index 72e499a8..e120e06d 100644
--- a/static/js/pandora/ui/info.js
+++ b/static/js/pandora/ui/info.js
@@ -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: '',
- tooltip: '' + result.data.title + '' + (
- result.data.director ? '
' + 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 = $('