improving frames and posters view

static/js/pandora.js

@@ -163,6 +163,8 @@ Ox.load('Geo', function() {
                 height: pandora.$ui.contentPanel.size(1),
                 width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1
             });
+            pandora.user.ui.itemView == 'frames' && pandora.$ui.item.resize();
+            pandora.user.ui.itemView == 'posters' && pandora.$ui.item.resize();
         }
     }
 

static/js/pandora/ui/item.js

@@ -344,7 +344,11 @@ pandora.ui.item = function() {
             );
         } else if (pandora.user.ui.itemView == 'frames' || pandora.user.ui.itemView == 'posters') {
             pandora.$ui.contentPanel.replaceElement(1,
-                pandora.$ui.item = pandora.ui.mediaView()
+                pandora.$ui.item = pandora.ui.mediaView().bindEvent({
+                    resize: function() {
+                        pandora.$ui.item.resize();
+                    }
+                })
             );
         }
         var director = result.data.director?' ('+result.data.director.join(', ')+')':'';

static/js/pandora/ui/mediaView.js

@@ -2,12 +2,8 @@ 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,
+        selectedImage = {};
-        previewHeight = height - 48,
-        previewRatio = previewWidth / previewHeight,
         $preview = Ox.Element(),
         that = Ox.SplitPanel({
             elements: [
@@ -22,15 +18,19 @@ pandora.ui.mediaView = function() {
             orientation: 'horizontal'
         });
 
+    that.resize = function() {
+        selectedImage.url && renderPreview();
+    }
+
     pandora.api.get({
         id: item,
         keys: [view]
     }, function(result) {
-        var images = result.data[view],
+        var images = result.data[view];
-            selected = [images.filter(function(image) {
+        selectedImage = images.filter(function(image) {
             return image.selected;
-            })[0]['index']],
+        })[0];
-            $list = Ox.IconList({
+        var $list = Ox.IconList({
                     item: function(data, sort, size) {
                         var ratio = data.width / data.height;
                         size = size || 128;
@@ -50,7 +50,7 @@ pandora.ui.mediaView = function() {
                     max: 1,
                     min: 1,
                     orientation: 'vertical',
-                    selected: selected,
+                    selected: [selectedImage['index']],
                     size: 128,
                     sort: [{key: 'index', operator: '+'}],
                     unique: 'index'
@@ -58,49 +58,100 @@ pandora.ui.mediaView = function() {
                 .css({background: 'rgb(16, 16, 16)'})
                 .bindEvent({
                     select: function(event) {
-                        var index = event.ids[0],
+                        var index = event.ids[0];
-                            image = images.filter(function(image) {
+                        selectedImage = images.filter(function(image) {
                             return image.index == index;
-                            })[0],
+                        })[0];
-                            imageRatio = image.width / image.height,
+                        renderPreview(selectedImage);
-                            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
+                            position: selectedImage.index // api slightly inconsistent
                         } : {
-                            source: image.source
+                            source: selectedImage.source
                         }), function(result) {
+                            var imageRatio = selectedImage.width / selectedImage.height;
                             $('img[src*="/' + item + '/poster"]').each(function() {
-                                var $this = $(this);
+                                var $this = $(this),
-                                Ox.print('??', $this.attr('src').split('?')[0] + '?' + Ox.uid())
+                                    size = Math.max($this.width(), $this.height()),
-                                $this.attr({
+                                    src = $this.attr('src').split('?')[0] + '?' + Ox.uid();
-                                    src: $this.attr('src').split('?')[0] + '?' + Ox.uid()
+                                $('<img>')
+                                    .attr({src: src})
+                                    .load(function() {
+                                        $this.attr({src: src});
+                                        view == 'posters' && $this.css(imageRatio < 1 ? {
+                                            width: Math.round(size * imageRatio) + 'px',
+                                            height: size + 'px'
+                                        } : {
+                                            width: size + 'px',
+                                            height: Math.round(size / imageRatio) + 'px'
+                                        });
                                     });
                             });
                         });
                     }
                 });
         that.replaceElement(0, $list);
+        renderPreview();
     });
 
+    function renderPreview() {
+        var previewWidth = pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1 - listWidth,
+            previewHeight = pandora.$ui.contentPanel.size(1),
+            previewRatio = previewWidth / previewHeight,        
+            imageRatio = selectedImage.width / selectedImage.height,
+            imageWidth = imageRatio > previewRatio ? previewWidth : Math.round(previewHeight * imageRatio),
+            imageHeight = imageRatio < previewRatio ? previewHeight : Math.round(previewWidth / imageRatio),
+            imageLeft = Math.floor((previewWidth - imageWidth) / 2),
+            imageTop = Math.floor((previewHeight - imageHeight) / 2);
+        $preview.html(
+            $('<img>')
+                .attr({
+                    src: selectedImage.url
+                })
+                .css({
+                    position: 'absolute',
+                    left: imageLeft + 'px',
+                    top: imageTop + 'px',
+                    width: imageWidth + 'px',
+                    height: imageHeight + 'px',
+                })
+        );
+        if (view == 'frames') {
+            var left = Math.floor((imageWidth - imageHeight) / 2),
+                right = Math.ceil((imageWidth - imageHeight) / 2);
+            $('<div>')
+                .addClass('OxPosterMarker OxPosterMarkerLeft')
+                .css({
+                    display: 'block',
+                    left: imageLeft + 'px',
+                    top: imageTop + 'px',
+                    width: left + 'px',
+                    height: imageHeight + 'px'
+                })
+                .appendTo($preview.$element);
+            $('<div>')
+                .addClass('OxPosterMarker OxPosterMarkerCenter')
+                .css({
+                    display: 'block',
+                    left: imageLeft + left + 'px',
+                    top: imageTop + 'px',
+                    width: imageHeight - 2 + 'px',
+                    height: imageHeight - 2 + 'px'
+                })
+                .appendTo($preview.$element);
+            $('<div>')
+                .addClass('OxPosterMarker OxPosterMarkerRight')
+                .css({
+                    display: 'block',
+                    left: imageLeft + left + imageHeight + 'px',
+                    top: imageTop + 'px',
+                    width: right + 'px',
+                    height: imageHeight + 'px'
+                })
+                .appendTo($preview.$element);
+        }
+    }
 
     return that;
 

static/js/pandora/ui/rightPanel.js

@@ -51,6 +51,8 @@ pandora.ui.rightPanel = function() {
                     pandora.user.ui.itemView == 'timeline' && pandora.$ui.editor.options({
                         width: data
                     });
+                    pandora.user.ui.itemView == 'frames' && pandora.$ui.item.resize();
+                    pandora.user.ui.itemView == 'posters' && pandora.$ui.item.resize();
                 }
             }
         });