update embed panel and player

static/js/pandora/embedPanel.js

@@ -1,25 +1,105 @@
 pandora.ui.embedPanel = function() {
 
-    var that, $errorBox, $errorLogo, $errorText;
+    var that = Ox.Element(),
+        data, options,
+        ui = pandora.user.ui,
+        $outerPanel, $innerPanel,
+        $title, $player, $controls, $timeline, $annotations,
+        $errorBox, $errorLogo, $errorText;
 
     if (pandora.user.ui.item) {
 
-        that = Ox.Element();
+        options = getOptions();
 
-        pandora.api.get({id: pandora.user.ui.item, keys: [
+        pandora.api.get({id: ui.item, keys: [
             'duration', 'layers', 'parts', 'posterFrame',
             'rightslevel', 'size', 'title', 'videoRatio'
         ]}, function(result) {
-            Ox.extend(result.data, pandora.getVideoOptions(result.data));
+            data = result.data, innerHeight;
-            that.setElement(
+            Ox.extend(data, pandora.getVideoOptions(data));
-                pandora.$ui.embedPlayer = pandora.ui.embedPlayer(result.data)
+            if (options.matchRatio || options.showAnnotations) {
+                options.height = Math.min(
+                    Math.round(window.innerWidth / data.videoRatio),
+                    window.innerHeight
+                        - (options.title ? 32 : 0)
+                        - (options.showTimeline ? 80 : 0)
+                        - (options.showAnnotations ? 128 : 0)
                 );
+            } else {
+                options.height = window.innerHeight
+                    - (options.title ? 32 : 0)
+                    - (options.showTimeline ? 80 : 0);
+            }
+            innerHeight = options.height
+                + (options.title ? 32 : 0)
+                + (options.showTimeline ? 80 : 0);
+            if (options.title) {
+                $title = Ox.Element()
+                    .css({position: 'absolute'})
+                    .append(
+                        $('<div>')
+                            .css({
+                                marginTop: !options.title.match(/\\n/) ? '8px' : '2px',
+                                textAlign: 'center'
+                            })
+                            .html(options.title.replace(/\\n/g, '<br>'))
+                    );
+            } else {
+                $title = Ox.Element();
+            }
+            $player = pandora.ui.embedPlayer(options, data)
+                .bindEvent({
+                    playing: function(data) {
+                        setPosition(data.position, true);
+                    },
+                    position: function(data) {
+                        setPosition(data.position);
+                    }
+                });
+            $controls = Ox.Element();
+            if (options.showTimeline) {
+                $timeline = Ox.LargeVideoTimeline({
+                        duration: data.duration,
+                        getImageURL: function(type, i) {
+                            return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg';
+                        },
+                        position: options.position,
+                        subtitles: data.subtitles || [],
+                        type: ui.videoTimeline,
+                        width: window.innerWidth - 16
+                    })
+                    .css({
+                        top: '4px',
+                        left: '4px'
+                    })
+                    .bindEvent({
+                        mousedown: that.gainFocus,
+                        position: changeTimeline
+                    })
+                    .appendTo($controls);
+            }
+            $annotations = Ox.Element().html('ANNOTATIONS');
+            $innerPanel = Ox.SplitPanel({
+                elements: [
+                    {element: $title, size: options.title ? 32 : 0},
+                    {element: $player},
+                    {element: $controls, size: options.showTimeline ? 80 : 0}
+                ],
+                orientation: 'vertical'
+            });
+            $outerPanel = Ox.SplitPanel({
+                elements: [
+                    {element: $innerPanel, size: innerHeight},
+                    {element: $annotations}
+                ],
+                orientation: 'vertical'
+            });
+            that.setElement($outerPanel);
         });
 
     } else {
 
-        that = Ox.Element()
+        that.addClass('OxScreen')
-            .addClass('OxScreen')
             .css({
                 position: 'absolute',
                 left: 0,
@@ -59,6 +139,50 @@ pandora.ui.embedPanel = function() {
 
     }
 
+    function changeTimeline(data) {
+        var position = options.playInToOut
+            ? Ox.limit(data.position, options['in'], options.out)
+            : data.position;
+        Ox.print('PPP', position);
+        $player.options({position: position});
+        position != data.position && $timeline.options({position: position});
+        options.showAnnotations && $annotations.options({position: position});
+    }
+
+    function getOptions() {
+        var options = {},
+            defaults = {
+                invertHighlight: true,
+                paused: true,
+                playInToOut: true,
+                width: window.innerWidth
+            };
+        ui.hash.query.forEach(function(condition) {
+            if (condition.key != 'embed') {
+                options[condition.key] = condition.value;                
+            }
+        });
+        options = Ox.extend(
+            {item: ui.item},
+            ui.videoPoints[ui.item] || {},
+            defaults,
+            options
+        );
+        if (!options.position) {
+            options.position = options['in'] || 0;
+        }
+        if (!options['in'] && !options.out) {
+            options.playInToOut = false;
+        }
+        return options;
+    }
+
+    function setPosition(position, playing) {
+        !playing && $player.options({position: position});
+        options.showTimeline && $timeline.options({position: position});
+        options.showAnnotations && $annotations.options({position: position});
+    }
+
     that.display = function() {
         // fixme: move animation into Ox.App
         var animate = $('.OxScreen').length == 0;

static/js/pandora/embedPlayer.js

@@ -1,11 +1,12 @@
-pandora.ui.embedPlayer = function(data) {
+pandora.ui.embedPlayer = function(options, data) {
 
-    var options = getOptions(),
+    var that = Ox.VideoPlayer(Ox.extend({
-        that = Ox.VideoPlayer(Ox.extend({
             censored: data.censored,
             censoredIcon: pandora.site.cantPlay.icon,
             censoredTooltip: pandora.site.cantPlay.text,
-            controlsBottom: ['play', 'volume', 'scale'].concat(
+            controlsBottom: ['play', 'volume'].concat(
+                options.matchRatio ? [] : ['scale']
+            ).concat(
                 Ox.Fullscreen.available ? ['fullscreen'] : []
             ).concat(
                 ['timeline', 'position', 'settings']
@@ -27,6 +28,7 @@ pandora.ui.embedPlayer = function(data) {
             enableVolume: true,
             height: options.height,
             invertHighlight: options.invertHighlight,
+            muted: pandora.user.ui.videoMuted,
             paused: options.paused,
             playInToOut: options.playInToOut,
             position: options.position,
@@ -36,6 +38,7 @@ pandora.ui.embedPlayer = function(data) {
                 : data.posterFrame
             ) +'.jpg',
             resolution: pandora.user.ui.videoResolution,
+            scaleToFill: pandora.user.ui.videoScale == 'fill',
             subtitles: data.subtitles,
             timeline: options.playInToOut ? function(size, i) {
                 return '/' + options.item
@@ -44,6 +47,7 @@ pandora.ui.embedPlayer = function(data) {
             } : '/' + options.item + '/' + 'timeline16p.png',
             title: data.title,
             video: data.video,
+            volume: pandora.user.ui.videoVolume,
             width: options.width
         }, options['in'] ? {
             'in': options['in']
@@ -51,34 +55,6 @@ pandora.ui.embedPlayer = function(data) {
             out: options.out
         } : {}));
 
-    function getOptions() {
-        var ui = pandora.user.ui,
-            defaults = {
-                height: window.innerHeight,
-                invertHighlight: true,
-                paused: true,
-                playInToOut: true,
-                width: window.innerWidth
-            },
-            options,
-            query = {};
-        ui.hash.query.forEach(function(condition) {
-            if (condition.key != 'embed') {
-                query[condition.key] = condition.value;
-            }
-        })
-        options = Ox.extend({
-            item: ui.item
-        }, ui.videoPoints[ui.item] || {}, defaults, query);
-        if (!options.position) {
-            options.position = options['in'] || 0;
-        }
-        if (!options['in'] && !options.out) {
-            options.playInToOut = false;
-        }
-        return options;
-    }
-
     return that;
 
 };