From c5bde89971a70a2471c0e39bf1fe7436368544b5 Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Fri, 19 Aug 2011 10:45:36 +0000
Subject: [PATCH] support multipart video

---
 source/Ox.UI/js/Video/Ox.VideoElement.js | 272 ++++++++++++-----------
 source/Ox.UI/js/Video/Ox.VideoPlayer.js  |  85 +++----
 2 files changed, 187 insertions(+), 170 deletions(-)

diff --git a/source/Ox.UI/js/Video/Ox.VideoElement.js b/source/Ox.UI/js/Video/Ox.VideoElement.js
index 56928349..0cfaaf15 100644
--- a/source/Ox.UI/js/Video/Ox.VideoElement.js
+++ b/source/Ox.UI/js/Video/Ox.VideoElement.js
@@ -3,182 +3,196 @@
 Ox.VideoElement = function(options, self) {
 
     self = self || {};
-    var that = Ox.Element('<video>', self)
+    var that = Ox.Element({}, self)
             .defaults({
-                fps: 25,
-                height: 0,
-                loop: false,
-                muted: false,
-                paused: false,
-                playInToOut: false,
-                points: [0, 0],
-                position: 0,
-                poster: '',
-                url: '',
-                width: 0
-            })
-            .options(options || {})
-            .attr({
-                //height: self.options.height,
-                poster: self.options.poster,
-                preload: 'auto',
-                src: self.options.url,
-                //width: self.options.width
-            })
-            .css({
-                height: self.options.height + 'px',
-                width: self.options.width + 'px'
+                autoplay: false,
+                preload: 'none',
+                src: []
             })
+            .options(options || {});
+
+    self.options.src = Ox.isArray(self.options.src) ? self.options.src : [self.options.src];
+
+    Ox.print('VIDEO ELEMENT OPTIONS', self.options)
+
+    self.currentPart = 0;
+    self.duration = 0;
+    self.durations = self.options.src.map(function() {
+        return 0;
+    });
+    self.offsets = [];
+    self.parts = self.options.src.length;
+    self.paused = true;
+
+    self.$videos = self.options.src.map(function(src, i) {
+        return $('<video>')
+            .attr(Ox.extend({
+                preload: 'metadata',
+                src: src
+            }, i == 0 && self.options.autoplay ? {
+                autoplay: 'autoplay'
+            } : {}))
+            .css({position: 'absolute'})
             .bind({
-                ended: ended,
-                canplay: function() {
-                    Ox.print('canplay')
-                },
-                durationchange: function() {
-                    Ox.print('durationchange')
+                ended: function() {
+                    if (i < self.parts - 1) {
+                        setCurrentPart(self.currentPart + 1);
+                        self.video.play();
+                    } else {
+                        that.triggerEvent('ended');
+                    }
                 },
                 loadedmetadata: function() {
-                    Ox.print('loadedmetadata', self.video.duration)
-                    self.video.currentTime = self.options.position;
-                    that.triggerEvent('loadedmetadata', {
-                        video: self.video
-                    });
-                },
-                progress: function() {
-                    that.triggerEvent('progress', {
-                        video: self.video
-                    });
+                    self.durations[i] = self.videos[i].duration;
+                    Ox.print(i, 'lm', self.durations);
+                    if (Ox.every(self.durations)) {
+                        self.duration = Ox.sum(self.durations);
+                        self.offsets = Ox.range(self.parts).map(function(i) {
+                            return Ox.sum(Ox.sub(self.durations, 0, i));
+                        });
+                        Ox.print('s.o', self.offsets)
+                        that.triggerEvent('loadedmetadata');
+                    }
                 },
                 seeked: function() {
                     that.triggerEvent('seeked');
                 },
                 seeking: function() {
                     that.triggerEvent('seeking');
+                },
+                progress: function() {
+                    
                 }
-            });
-
-    $.extend(self, {
-        millisecondsPerFrame: 1000 / self.options.fps,
-        video: that.$element[0]
+            })
+            .hide()
+            .appendTo(that.$element);
     });
+    self.videos = self.$videos.map(function($video) {
+        return $video[0];
+    });
+    self.$video = self.$videos[0].show();
+    self.video = self.$video[0];
 
-    function ended() {
-        that.pause()
-            .triggerEvent('paused', {
-                position: self.options.position
-            });
+    function getCurrentTime() {
+        return self.offsets[self.currentPart] + self.video.currentTime;
     }
 
-    function playing() {
-        var event = 'playing';
-        self.options.position = Math.round(self.video.currentTime * self.options.fps) / self.options.fps;
-        if (self.options.playInToOut && self.options.position >= self.options.points[1])  {
-            event = 'paused';
-            that.position(self.options.points[1]).pause();
+    function getset(key, value) {
+        var ret;
+        if (Ox.isUndefined(value)) {
+            ret = self.video[key]
+        } else {
+            self.video[key] = value;
+            ret = that;
         }
-        that.triggerEvent(event, {
-            position: self.options.position
+        return ret;
+    }
+
+    function setCurrentPart(part) {
+        Ox.print('sCP', part)
+        var css = {};
+        ['left', 'top', 'width', 'height'].forEach(function(key) {
+            css[key] = self.$video.css(key);
         });
+        self.$video.hide();
+        self.video.pause();
+        self.$video = self.$videos[part].css(css).show();
+        self.video = self.$video[0];
+        !self.paused && self.video.play();
+        self.currentPart = part;
+        Ox.print('sCP', part, self.video.src)
     }
 
-    self.setOption = function(key, value) {
-        if (key == 'height') {
-            that.size(self.options.width, value);
-        } else if (key == 'muted') {
-            that[value ? 'mute' : 'unmute']();
-        } else if (key == 'paused') {
-            that[value ? 'pause' : 'play']();
-        } else if (key == 'points') {
-            that.points(value);
-        } else if (key == 'width') {
-            that.size(value, self.options.height);
+    function setCurrentTime(time) {
+        var currentPart, currentTime;
+        Ox.loop(self.parts - 1, -1, -1, function(i) {
+            if (self.offsets[i] <= time) {
+                currentPart = i;
+                currentTime = time - self.offsets[i];
+                return false;
+            }
+        });
+        Ox.print('sCT', time, currentPart, currentTime);
+        if (currentPart != self.currentPart) {
+            setCurrentPart(currentPart);
         }
+        self.video.currentTime = currentTime;
+    }
+
+    that.animate = function() {
+        self.$video.animate.apply(self.$video, arguments);
+        return that;
+    }
+
+    that.buffered = function() {
+        return self.video.buffered;
     };
 
-    that.mute = function() {
-        self.options.muted = true;
-        self.video.muted = true;
+    that.currentTime = function() {
+        var ret;
+        if (arguments.length == 0) {
+            ret = getCurrentTime();
+        } else {
+            setCurrentTime(arguments[0]);
+            ret = that;
+        }
+        return ret;
+    };
+
+    that.css = function() {
+        self.$video.css.apply(self.$video, arguments);
         return that;
     };
 
+    that.duration = function() {
+        return self.duration;
+    };
+
     that.muted = function() {
-        return self.options.muted;
-    }
+        return getset('muted', arguments[0]);
+    };
 
     that.pause = function() {
-        self.options.paused = true;
-        self.options.playInToOut = false;
+        self.paused = true;
         self.video.pause();
-        clearInterval(self.playInterval);
         return that;
     };
 
-    that.paused = function() {
-        return self.options.paused;
-    }
-
     that.play = function() {
-        self.options.paused = false;
+        self.paused = false;
         self.video.play();
-        self.playInterval = setInterval(playing, self.millisecondsPerFrame);
         return that;
     };
 
-    that.playInToOut = function() {
-        self.options.playInToOut = true;
-        that.position(self.options.points[0]);
-        self.options.paused && that.play();
-        return that;
-    };
-
-    that.points = function(points) {
-        self.options.points = points;
-    }
-
-    that.position = function(pos) {
-        // fixme: why not use options??
+    that.src = function() {
+        var ret;
         if (arguments.length == 0) {
-            return self.video.currentTime;
+            ret = self.video.src;
         } else {
-            self.options.position = pos;
-            self.video.currentTime = self.options.position;
-            return that;
+            self.options.src = Ox.isArray(arguments[0]) ? arguments[0] : [arguments[0]];
+            self.videos[currentPart].src = self.options.src[currentPart];
+            self.videos.forEach(function(video, i) {
+                if (i != currentPart) {
+                    video.src = self.options.src[i];
+                }
+            })
+            ret = that;
         }
+        return ret;
     };
 
-    that.size = function(width, height) {
-        // fixme: why options? use css!
-        if (arguments.length == 0) {
-            return {
-                width: self.options.width,
-                height: self.options.height
-            };
-        } else {
-            self.options.width = width;
-            self.options.height = height;
-            that.css({
-                width: width + 'px',
-                height: height + 'px'
-            });
-            return that;
-        }
+    that.videoHeight = function() {
+        return self.video.videoHeight;
     };
 
-    that.toggleMute = function() {
-        self.video.muted = !self.video.muted;
-        return that;
+    that.videoWidth = function() {
+        return self.video.videoWidth;
+    };
+
+    that.volume = function(value) {
+        return getset('volume', arguments[0]);
     }
 
-    that.togglePlay = function() {
-        self.options.paused = !self.options.paused;
-        that[self.options.paused ? 'pause' : 'play']();
-    }
-
-    that.unmute = function() {
-        self.video.muted = false;
-        return that;
-    };
-
     return that;
 
 };
diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
index c4ecd922..210f9c42 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
@@ -24,6 +24,7 @@ Ox.VideoPlayer <f> Generic Video Player
         externalControls <b|false> If true, controls are outside the video
         find <s|''> Query string
         focus <s|'click'> focus on 'click', 'load' or 'mouseover'
+        format <s|''> video format (like 'webm')
         fps <n|25> Frames per second
         fullscreen <b|false> If true, video is in fullscreen
         height <n|144> Height in px (excluding external controls)
@@ -82,6 +83,7 @@ Ox.VideoPlayer = function(options, self) {
             externalControls: false,
             find: '',
             focus: 'click',
+            format: '',
             fps: 25,
             fullscreen: false,
             height: 144,
@@ -131,11 +133,14 @@ Ox.VideoPlayer = function(options, self) {
     if (Ox.isString(self.options.video)) {
         self.video = self.options.video;
     } else {
+        /*
         self.resolutions = Ox.sort(Object.keys(self.options.video));
         if (!(self.options.resolution in self.options.video)) {
             self.options.resolution = self.resolutions[0];
         }
         self.video = self.options.video[self.options.resolution];
+        */
+        self.video = self.options.video(self.options.resolution, self.options.format)
     }
 
     if (self.options.playInToOut) {
@@ -266,19 +271,17 @@ Ox.VideoPlayer = function(options, self) {
             }
         });
 
-        self.$video = $('<video>')
-            .attr(Ox.extend({
-                preload: self.options.preload,
-                src: self.video
-            }, !self.options.paused ? {
-                autoplay: 'autoplay'
-            } : {}/*, self.options.poster ? {
-                poster: self.options.poster
-            } : {}*/))
-            .css({
-                position: 'absolute'
-            })
-            .bind(Ox.extend({
+        self.$video = Ox.VideoElement(
+                Ox.extend({
+                    preload: self.options.preload,
+                    src: self.video
+                }, !self.options.paused ? {
+                    autoplay: 'autoplay'
+                } : {}/*, self.options.poster ? {
+                    poster: self.options.poster
+                } : {}*/)
+            )
+            .bindEvent(Ox.extend({
                 ended: ended,
                 loadedmetadata: loadedmetadata,
                 seeked: seeked,
@@ -288,7 +291,7 @@ Ox.VideoPlayer = function(options, self) {
             } : {}))
             .appendTo(self.$videoContainer);
 
-        self.video = self.$video[0];
+        self.$video.$element.css({position: 'absolute'});
 
     } else {
 
@@ -1119,8 +1122,8 @@ Ox.VideoPlayer = function(options, self) {
         if ($.browser.mozilla) {
             //Ox.print(e, e.layerX - 56)
             return Ox.limit(
-                (e.layerX - 48 - self.barHeight / 2) / self.timelineImageWidth * self.video.duration,
-                0, self.video.duration
+                (e.layerX - 48 - self.barHeight / 2) / self.timelineImageWidth * self.$video.duration(),
+                0, self.$video.duration()
             );
         } else {
             /*Ox.print(e.offsetX, Ox.limit(
@@ -1128,8 +1131,8 @@ Ox.VideoPlayer = function(options, self) {
                 0, self.video.duration
             ))*/
             return Ox.limit(
-                (e.offsetX - self.barHeight / 2) / self.timelineImageWidth * self.video.duration,
-                0, self.video.duration
+                (e.offsetX - self.barHeight / 2) / self.timelineImageWidth * self.$video.duration(),
+                0, self.$video.duration()
             );
         }
     } 
@@ -1177,8 +1180,8 @@ Ox.VideoPlayer = function(options, self) {
         imageData = context.getImageData(0, 0, width, height),
         data = imageData.data;
         self.buffered.forEach(function(range) {
-            var left = Math.round(range[0] * width / self.video.duration),
-                right = Math.round(range[1] * width / self.video.duration);
+            var left = Math.round(range[0] * width / self.$video.duration()),
+                right = Math.round(range[1] * width / self.$video.duration());
             Ox.loop(left, right, function(x) {
                 Ox.loop(height, function(y) {
                     index = x * 4 + y * 4 * width;
@@ -1331,7 +1334,7 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function hideControls() {
-        Ox.print('hideControls');
+        //Ox.print('hideControls');
         clearTimeout(self.interfaceTimeout);
         self.interfaceTimeout = setTimeout(function() {
             if (!self.exitFullscreen && !self.inputHasFocus && !self.mouseIsInControls) {
@@ -1403,8 +1406,8 @@ Ox.VideoPlayer = function(options, self) {
 
         self.loadedMetadata = true;
 
-        self.videoWidth = self.video.videoWidth;
-        self.videoHeight = self.video.videoHeight;
+        self.videoWidth = self.$video.videoWidth();
+        self.videoHeight = self.$video.videoHeight();
         self.videoCSS = getVideoCSS();
         self.posterMarkerCSS = getPosterMarkerCSS();
         self.$video.css(self.videoCSS);
@@ -1414,10 +1417,10 @@ Ox.VideoPlayer = function(options, self) {
         });
 
         self.out = self.options.playInToOut &&
-            self.options.out < self.video.duration ?
-            self.options.out : self.video.duration;
+            self.options.out < self.$video.duration() ?
+            self.options.out : self.$video.duration();
         self.options.duration = self.out - self['in'];
-        self.video.currentTime = self.options.position;
+        self.$video.currentTime(self.options.position);
 
         self.options.paused && self.options.showMarkers && setMarkers();
         self.options.paused && self.playOnLoad && togglePaused('button');
@@ -1469,7 +1472,7 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function playing() {
-        self.options.position = self.video.currentTime;
+        self.options.position = self.$video.currentTime();
         if (
             (self.options.playInToOut || self.playInToOut) &&
             self.options.position >= self.options.out
@@ -1496,7 +1499,7 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function progress() {
-        var buffered = self.video.buffered;
+        var buffered = self.$video.buffered();
         for (var i = 0; i < buffered.length; i++) {
             self.buffered[i] = [buffered.start(i), buffered.end(i)];
             // fixme: firefox weirdness
@@ -1562,7 +1565,7 @@ Ox.VideoPlayer = function(options, self) {
         self.$position && self.$position.html(formatPosition());
         if (self.options.type == 'play') {
             if (self.loadedMetadata && from != 'video') {
-                self.video.currentTime = self.options.position;
+                self.$video.currentTime(self.options.position);
             }
             if (self.iconIsVisible) {
                 self.$playIcon.animate({
@@ -1592,7 +1595,7 @@ Ox.VideoPlayer = function(options, self) {
         }
         self.loadedMetadata = false;
         showLoadingIcon();
-        self.video.src = self.options.video[self.options.resolution];
+        self.$video.src(self.options.video[self.options.resolution]);
         self.$playButton && self.$playButton.options({
             disabled: true
         });
@@ -1691,10 +1694,10 @@ Ox.VideoPlayer = function(options, self) {
         self.options.volume = volume;
         if (!!self.options.volume == self.options.muted) {
             self.options.muted = !self.options.muted;
-            self.video.muted = self.options.muted;
+            self.$video.muted(self.options.muted);
             self.$muteButton.toggleTitle();
         }
-        self.video.volume = self.options.volume;
+        self.$video.volume(self.options.volume);
         self.$volumeButton.attr({
             src: getVolumeImageURL()
         });
@@ -1705,7 +1708,7 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function showControls() {
-        Ox.print('showControls');
+        //Ox.print('showControls');
         clearTimeout(self.interfaceTimeout);
         if (!self.interfaceIsVisible) {
             self.interfaceIsVisible = true;
@@ -1818,7 +1821,7 @@ Ox.VideoPlayer = function(options, self) {
         setPosition(parsePositionInput(self.$positionInput.options('value')));
         if (self.playOnSubmit) {
             togglePaused();
-            self.video.play();
+            self.$video.play();
             self.playOnSubmit = false;
         }
         if (self.focus == 'mouseenter' && !self.mouseHasLeft) {
@@ -1842,7 +1845,7 @@ Ox.VideoPlayer = function(options, self) {
         self.options.fullscreen = !self.options.fullscreen;
         if (!self.options.paused) {
             // video won't keep playing accross detach/append
-            self.video.pause();
+            self.$video.pause();
             playOnFullscreen = true;
         }
         if (self.options.fullscreen) {
@@ -1861,7 +1864,7 @@ Ox.VideoPlayer = function(options, self) {
                 })
                 .appendTo(Ox.UI.$body);
             setSizes(function() {
-                playOnFullscreen && self.video.play();
+                playOnFullscreen && self.$video.play();
                 that.bind({
                     mousemove: function() {
                         showControls();
@@ -1898,7 +1901,7 @@ Ox.VideoPlayer = function(options, self) {
                         zIndex: 1
                     })
                     .appendTo(self.$parent);
-                playOnFullscreen && self.video.play();
+                playOnFullscreen && self.$video.play();
                 self.options.enableKeyboard && that.gainFocus();
                 //showControls();
             });
@@ -1911,10 +1914,10 @@ Ox.VideoPlayer = function(options, self) {
     function toggleMuted(from) {
         showVolume();
         self.options.muted = !self.options.muted;
-        self.video.muted = self.options.muted;
+        self.$video.muted(self.options.muted);
         if (!self.options.muted && !self.options.volume) {
             self.options.volume = 1;
-            self.video.volume = 1;
+            self.$video.volume(1);
         }
         if (self.$muteButton && from != 'button') {
             self.$muteButton.toggleTitle();
@@ -1939,7 +1942,7 @@ Ox.VideoPlayer = function(options, self) {
             paused: self.options.paused
         });
         if (self.options.paused) {
-            self.video.pause();
+            self.$video.pause();
             clearInterval(self.playInterval);
             if (self.options.showIcon) {
                 togglePlayIcon();
@@ -1951,7 +1954,7 @@ Ox.VideoPlayer = function(options, self) {
             if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) {
                 setPosition(self.options['in']);
             }
-            self.video.play();
+            self.$video.play();
             self.playInterval = setInterval(playing, self.millisecondsPerFrame);
             if (self.options.showIcon) {            
                 self.options.showIcon && self.$playIcon.animate({