replace Flipbook with VideoPreview

static/js/pandora/URL.js

@@ -104,11 +104,11 @@ pandora.URL = (function() {
             } else if (pandora.user.ui.sitePage != oldUserUI.sitePage) {
                 pandora.$ui.mainPanel.replaceElement(1, pandora.$ui.rightPanel = pandora.ui.rightPanel());
             } else if (!pandora.user.ui.item || !oldUserUI.item) {
+                pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
                 pandora.$ui.mainPanel.replaceElement(1, pandora.$ui.rightPanel = pandora.ui.rightPanel());
-                pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
             } else {
-                pandora.$ui.contentPanel.replaceElement(1, pandora.ui.item());
                 pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
+                pandora.$ui.contentPanel.replaceElement(1, pandora.ui.item());
             }
             // fixme: should be 'editor', not 'timeline'
             if (

static/js/pandora/ui/flipbook.js

@@ -1,26 +0,0 @@
-// vim: et:ts=4:sw=4:sts=4:ft=javascript
-pandora.ui.flipbook = function(item) {
-    var that = Ox.Flipbook({
-        }).bindEvent('click', function(event, data) {
-            pandora.UI.set('videoPosition|' + item, data.position);
-            pandora.URL.set(item + '/timeline');
-        });
-        pandora.api.get({id: item, keys: ['duration', 'posterFrame']}, function(result) {
-            var duration = result.data.duration,
-                posterFrame = result.data.posterFrame || parseInt(duration/2),
-                steps = 24,
-                framePrefix = '/' + item + '/' + that.height() + 'p',
-                frames = {};
-            Ox.range(0, duration, duration/steps).forEach(function(position) {
-                position = parseInt(position);
-                frames[position] = framePrefix + position + '.jpg';
-            });
-            that.options({
-                frames: frames,
-                icon: framePrefix + posterFrame + '.jpg',
-                duration: duration
-            });
-        });
-    return that;
-};
-

static/js/pandora/ui/info.js

@@ -1,53 +1,36 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
-pandora.ui.info = function() {
+pandora.ui.info = function(id) {
+    id = id || pandora.user.ui.item;
+    Ox.print('ID', id)
     var that = Ox.Element()
-        .append(
-            pandora.$ui.infoStill = Ox.Element()
-                .css({
-                    position: 'absolute',
-                    left: 0,
-                    top: 0,
-                    height: '96px'
-                })
-        )
-        .append(
-            pandora.$ui.infoTimeline = Ox.Element('<img>')
-                .css({
-                    position: 'absolute',
-                    left: 0,
-                    bottom: 0,
-                    height: '16px'
-                })
-        )
         .bindEvent({
             toggle: function(event, data) {
                 pandora.UI.set({showInfo: !data.collapsed});
                 pandora.resizeFolders();
             }
         });
-    if (pandora.user.ui.item) {
+    if (id) {
-        pandora.api.get({
+        pandora.api.get({id: id, keys:['stream']}, function(result) {
-            id: pandora.user.ui.item,
+            var video = result.data.stream;
-            keys: ['stream']
+                height = Math.round(pandora.user.ui.sidebarSize / video.aspectRatio) + 16;
-        }, function(result) {
+            pandora.$ui.videoPreview && pandora.$ui.videoPreview.removeElement();
-            pandora.user.infoRatio = result.data.stream.aspectRatio;
+            pandora.$ui.videoPreview = pandora.ui.videoPreview({
-            var width = that.width() || 256,
+                id: id,
-                height = width / pandora.user.infoRatio + 16;
+                video: video
-            pandora.$ui.infoStill.removeElement();
+            }).appendTo(pandora.$ui.info);
-            pandora.$ui.infoStill = pandora.ui.flipbook(pandora.user.ui.item)
+            pandora.user.infoRatio = video.aspectRatio;
-                                  .appendTo(that.$element);
+            resize(height);
-            pandora.$ui.infoStill.css({
-                'height': (height-16) + 'px'
-            });
-            that.css({
-                height: height  + 'px'
-            });
-            pandora.resizeFolders();
-            !pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -height});
-            pandora.$ui.leftPanel.size(2, height);
         });
-        pandora.$ui.infoTimeline.attr({
+    } else if (pandora.$ui.leftPanel) {
-            src: '/' + pandora.user.ui.item + '/timeline16p.png'
+        resize(32);
+    }
+    function resize(height) {
+        !pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -height});
+        pandora.$ui.leftPanel.size(2, height);
+        that.animate({
+            height: height + 'px'
+        }, 250, function() {
+            pandora.resizeFolders();
         });
     }
     return that;

static/js/pandora/ui/leftPanel.js

@@ -21,6 +21,7 @@ pandora.ui.leftPanel = function() {
         })
         .bindEvent({
             resize: function(event, data) {
+                Ox.print('LEFT PANEL RESIZE')
                 var infoSize = Math.round(data / pandora.user.infoRatio) + 16;
                 pandora.user.ui.sidebarSize = data;
                 if (data < pandora.site.sectionButtonsWidth && pandora.$ui.sectionButtons) {
@@ -34,6 +35,10 @@ pandora.ui.leftPanel = function() {
                 }
                 !pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -infoSize});
                 pandora.$ui.leftPanel.size(2, infoSize);
+                pandora.$ui.videoPreview && pandora.$ui.videoPreview.options({
+                    frameHeight: infoSize - 16,
+                    frameWidth: data
+                });
                 pandora.resizeFolders();
             },
             resizeend: function(event, data) {

static/js/pandora/ui/list.js

@@ -343,7 +343,6 @@ pandora.ui.list = function(view) { // fixme: remove view argument
                     operator: '|'
                 }
             }, function(result) {
-                Ox.print('-- preview item', result.data.items[0])
                 var item = result.data.items[0],
                     title = item.title + ' (' + item.director + ')'
                     ratio = item.poster.width / item.poster.height,
@@ -419,27 +418,7 @@ pandora.ui.list = function(view) { // fixme: remove view argument
                 pandora.$ui.mainMenu.disableItem('copy');
                 pandora.$ui.mainMenu.disableItem('openmovie');            
             }
-            if (data.ids.length == 1) {
+            pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info(data.ids[0]));
-                pandora.user.ui.listItem = data.ids[0];
-                pandora.api.get({id: data.ids[0], keys:['stream']}, function(result) {
-                    pandora.user.infoRatio = result.data.stream.aspectRatio;
-                    var height = pandora.$ui.info.width() / pandora.user.infoRatio + 16;
-                    if(pandora.$ui.infoStill) pandora.$ui.infoStill.removeElement();
-                    pandora.$ui.infoStill = pandora.ui.flipbook(data.ids[0])
-                                                  .appendTo(pandora.$ui.info.$element);
-                    pandora.$ui.infoStill.css({
-                       'height': (height - 16) + 'px'
-                    });
-                    !pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -height});
-                    pandora.$ui.leftPanel.size(2, height);
-                    pandora.$ui.info.animate({
-                        height: height + 'px'
-                    }, 250, function() {
-                        pandora.resizeFolders();
-                    });
-                });
-                pandora.$ui.infoTimeline.attr('src', '/' + data.ids[0] + '/timeline16p.png')
-            }
             pandora.api.find({
                 query: {
                     conditions: $.map(data.ids, function(id, i) {

static/js/pandora/ui/videoPreview.js

@@ -0,0 +1,34 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
+
+pandora.ui.videoPreview = function(data) {
+    var frameWidth = pandora.user.ui.sidebarSize,
+        frameHeight = Math.round(frameWidth / data.video.aspectRatio),
+        that = Ox.VideoPreview({
+            duration: data.video.duration,
+            getFrame: function(position) {
+                var width = pandora.user.ui.sidebarSize,
+                    height = Math.round(width / pandora.user.infoRatio),
+                    resolution = Ox.filter(data.video.resolutions, function(resolution, i) {
+                        return resolution >= height || i == data.video.resolutions.length - 1;
+                    })[0];
+                return '/' + data.id + '/' + resolution + 'p' + (
+                    Ox.isUndefined(position) ? '' : position
+                ) + '.jpg';
+            },
+            frameHeight: frameHeight,
+            frameWidth: frameWidth,
+            timeline: '/' + data.id + '/timeline16p.png',
+        })
+        .bindEvent({
+            click: function(event) {
+                pandora.URL.set(
+                    '/' + data.id + '/timeline/' + Ox.formatDuration(event.position, 2)
+                );
+            }
+        });
+    function getResolution() {
+        return 
+    }
+    return that;
+};
+

static/json/pandora.json

@@ -38,7 +38,7 @@
   "js/pandora/ui/backButton.js", 
   "js/pandora/ui/leftPanel.js", 
   "js/pandora/ui/appPanel.js", 
-  "js/pandora/ui/flipbook.js", 
+  "js/pandora/ui/videoPreview.js", 
   "js/pandora/ui/editor.js",
   "js/pandora/ui/infoView.js",
   "js/pandora/ui/mediaView.js"