extended video demo

demos/video/js/video.js

@@ -2,37 +2,154 @@ Ox.load('UI', {
     debug: true,
     theme: 'modern'
 }, function() {
-    var id = '0393109';
+    var id = '0393109',
-    var url = 'http://next.0xdb.org/' + id + '/96p.webm?' + Ox.random(1000000);
+        poster = 'http://next.0xdb.org/' + id + '/poster.jpg',
-    var timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png';
+        timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png',
-    Ox.UI.$body.css({
+        url = 'http://next.0xdb.org/' + id + '/96p.webm',
-        padding: '16px'
+        videoSize = getVideoSize(),
-    });
+        $videos = [
             Ox.VideoPlayer({
-        controls: ['play', 'mute', 'size', 'scale', 'timeline', 'position'],
+                    controls: ['play', 'mute', 'scale', 'timeline', 'position'],
-        height: 96 * 384/180,//96 * 256/180,
+                    enableKeyboard: true,
+                    focus: 'mouseenter',
+                    height: 192,
                     logoLink: 'http://next.0xdb.org/' + id,
                     logoTitle: 'Watch on 0xdb',
                     logo: 'png/logo.png',
                     paused: true,
-        scaleToFill: true,
+                    poster: poster,
+                    showIconOnLoad: true,
+                    showProgress: false,
                     subtitles: 'srt/' + id + '.srt',
                     timeline: timeline,
                     title: '<b>Brick</b> - Rian Johnson - 2005',
-        video: url,
+                    video: url + '?' +  + Ox.random(1000000),
-        width: 500//384//256
+                    width: 360
-    }).appendTo(Ox.UI.$body);
+                })
-    /*
+                .css({
-    var id = '0133093';
+                    margin: '16px'
-    var url = 'http://next.0xdb.org/' + id + '/96p.webm?' + Ox.random(1000000);
+                }),        
-    var timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png';
             Ox.VideoPlayer({
-        height: 96 * 256/230,
+                    height: 192,
+                    'in': 3128.725, 
+                    //keepIconVisible: true,
+                    out: 3130.725,
+                    paused: true,
+                    playInToOut: true,
+                    //preload: 'none',
+                    showIcon: true,
+                    showIconOnLoad: true,
                     timeline: timeline,
-        url: url,
+                    video: url + '?' +  + Ox.random(1000000),
-        width: 256
+                    width: 360
-    }).css({
+                })
-        left: '300px'
+                .css({
+                    margin: '16px'
+                }),
+            Ox.VideoPlayer({
+                    controls: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
+                    externalControls: true,
+                    height: videoSize.height,
+                    'in': 3128.725, 
+                    out: 3130.725,
+                    paused: true,
+                    showMilliseconds: 2,
+                    subtitles: 'srt/' + id + '.srt',
+                    timeline: timeline,
+                    video: url + '?' +  + Ox.random(1000000),
+                    width: videoSize.width
+                })
+                .css({
+                    margin: '16px'
+                })
+        ];
+    window.$videos = $videos
+    Ox.SplitPanel({
+        elements: [
+            {
+                element: Ox.SplitPanel({
+                        elements: [
+                            {
+                                element: Ox.Element()
+                                    .append($videos[0])
+                                    .bindEvent({
+                                        resize: function(foo, size) {
+                                            $videos[0].options({height: size - 32});
+                                        }
+                                    }),
+                                size: 224,
+                                resizable: true,
+                                resize: [100, 400]
+                            },
+                            {
+                                element: Ox.Element()
+                            }
+                        ],
+                        orientation: 'vertical'
+                    })
+                    .bindEvent({
+                        resize: function(foo, size) {
+                            $videos[0].options({width: size - 32});
+                        }
+                    }),
+                size: 392,
+                resizable: true,
+                resize: [200, 600]
+            },
+            {
+                element: Ox.Element()
+                    .append($videos[1])
+                    .bindEvent({
+                        resize: resizeVideo
+                    })
+            },
+            {
+                element: Ox.SplitPanel({
+                        elements: [
+                            {
+                                element: Ox.Element()
+                                    .append($videos[2])
+                                    .bindEvent({
+                                        resize: function(foo, size) {
+                                            $videos[2].options({height: size - 48});
+                                        }
+                                    }),
+                                size: 240,
+                                resizable: true,
+                                resize: [100, 400]
+                            },
+                            {
+                                element: Ox.Element()
+                            }
+                        ],
+                        orientation: 'vertical'
+                    })
+                    .bindEvent({
+                        resize: function(foo, size) {
+                            $videos[2].options({width: size - 32});
+                        }
+                    }),
+                size: 392,
+                resizable: true,
+                resize: [200, 600]
+            }
+        ],
+        orientation: 'horizontal'
     }).appendTo(Ox.UI.$body);
-    */
+
+    function getVideoSize() {
+        var size = {},
+            widths = $videos ? $videos[0].options('width') + $videos[2].options('width') : 720
+        size.width = window.innerWidth - widths - 98;
+        size.height = Math.round(size.width / 180 * 96);
+        return size;
+    }
+    function resizeVideo() {
+        var size = getVideoSize();
+        $videos[1].options({
+            width: size.width,
+            height: size.height
+        });
+    }
+
 });

source/Ox.UI/css/Ox.UI.css

@@ -1647,7 +1647,6 @@ Video
     margin-left: 4px;
 }
 
-
 .OxVideoPlayer > .OxBar .OxInputGroup {
     //width: 98px;
 }

source/Ox.UI/js/Window/Ox.Tooltip.js

@@ -34,8 +34,13 @@ Ox.Tooltip = function(options, self) {
         return that;
     };
 
+    // can pass event instead of x/y
     that.show = function(x, y) {
         var left, top, width, height;
+        if (arguments.length == 1) {
+            y = arguments[0].clientY;
+            x = arguments[0].clientX;
+        }
         $('.OxTooltip').remove(); // fixme: don't use DOM
         that.appendTo(Ox.UI.$body);
         width = that.width();

source/Ox.UI/themes/modern/css/modern.css

@@ -459,6 +459,12 @@ Video
     background: rgb(48, 48, 48);
 }
 
+.OxThemeModern .OxVideo.OxFocus {
+    -moz-box-shadow: 0 0 2px rgb(128, 128, 128);
+    -webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
+}
+
+
 .OxThemeModern .OxVideoPlayer {
     background: rgb(0, 0, 0);
 }