FLUID-4825: Merge conflict resolved.

fluid-project · Dec 11, 2012 · 5b269a0 · 5b269a0
2 parents 4240662 + 4539572
commit 5b269a0
Show file tree

Hide file tree

Showing 13 changed files with 113 additions and 114 deletions.
diff --git a/css/VideoPlayer.css b/css/VideoPlayer.css
@@ -1,5 +1,6 @@
 .fl-videoPlayer {
     font-family: sans-serif;
+    height: 22.5em;
 }
 
 /*
@@ -9,6 +10,7 @@
 .fl-videoPlayer-main {
     position: relative;
     display: inline-block;
+    height: inherit;
 }
 
 /*
@@ -17,15 +19,16 @@
 
 .fl-videoPlayer-video {
     float: left;
-	height: inherit;
+    height: inherit;
 }
 
 .fl-videoPlayer-video-element {
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    height: inherit;
+    width: 29.75em;
 }
+
 .fl-videoPlayer-video-element:focus,
 .fl-videoPlayer-transcript-element-selected {
     outline: solid 3px #3195C7;
@@ -272,13 +275,12 @@ a.fl-videoPlayer-button-wrapper {
 .fl-videoPlayer-volumeControl {
     display: none;
     z-index: 1000;
-    border-width: 5px 11px;
+    border-width: 5px 0.55em;
     border-style: solid;
     border-color: #c2c2c2;
     position: absolute;
     bottom: 1.8em;
-    left: 20%;
-    width: 25%;
+    left: 0;
     height: 6em;
     background: none;
     background-color: #F2F2F2;
@@ -333,7 +335,6 @@ a.fl-videoPlayer-button-wrapper {
 }
 .fl-videoPlayer-volumeControl .ui-slider-handle {
     height: 10%;
-    left: -75%;
     margin-bottom: 0;
 }
 
@@ -424,7 +425,6 @@ ul.fl-videoPlayer-transcripts-languageList li {
     top: 1px;
     position: absolute;
     width: 100%;
-    pointer-events:none;
 }
 
 /* progress bar */
@@ -451,8 +451,8 @@ ul.fl-videoPlayer-transcripts-languageList li {
     height: 100%;
     width: 100%;
     background-color: #F2F2F2;
-    opacity: 0.3;
-    filter: alpha(opacity=30);
+    opacity: 0.7;
+    filter: alpha(opacity=70);
 }
 
 /************
@@ -475,6 +475,7 @@ ul.fl-videoPlayer-transcripts-languageList li {
 
 .fl-videoPlayer-scrubber {
     width: 100%;
+    z-index: 999;
 }
 .fl-videoPlayer-scrubber.ui-slider-horizontal {
     height: 1em;
@@ -556,7 +557,7 @@ ul.fl-videoPlayer-transcripts-languageList li {
 .fl-videoPlayer-overlay {
     bottom: 0em;
     position: absolute;
-    width: 100%;
+    width: 29.75em;
     pointer-events: none;
 }
 .fl-theme-uio-yb .fl-videoPlayer-overlay, .fl-theme-uio-yb .fl-videoPlayer-captionArea, .fl-theme-uio-yb .captionator-cue-canvas,

diff --git a/demos/Mammals.css b/demos/Mammals.css
@@ -188,6 +188,7 @@ footer a {
     margin-bottom: 1em;
     text-align: center;
     max-width: 100%;
+    height: 31.25em;
 }
 
 
@@ -196,7 +197,6 @@ footer a {
     background-color: #808080;
 }
 
-.fl-videoPlayer-video {
-    width: 500px;
-    height: 500px;
+.fl-videoPlayer-video-element, .fl-videoPlayer-overlay {
+    width: 31.25em;
 }
diff --git a/demos/Mammals.js b/demos/Mammals.js
@@ -62,7 +62,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                         },
                         {
                             src: "http://www.youtube.com/v/0jw74pfWfxA",
-                            type: "youtube"
+                            type: "video/youtube"
                         }
                     ],
                     captions: [
@@ -111,7 +111,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                         },
                         {
                             src: "http://www.youtube.com/v/h_oHNP50FGM",
-                            type: "youtube"
+                            type: "video/youtube"
                         }
                     ],
                     captions: [
@@ -155,14 +155,14 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                         {
                             src: "videos/PolarMammalAdaptations/PolarMammalAdaptations.mp4",
                             type: "video/mp4"
-                        }, 
+                        },
                         {
                             src: "videos/PolarMammalAdaptations/PolarMammalAdaptations.webm",
                             type: "video/webm"
                         },
                         {
                             src: "http://www.youtube.com/v/3_3p2ylZDAE",
-                            type: "youtube"
+                            type: "video/youtube"
                         }
                     ],
                     captions: [

diff --git a/demos/VideoPlayer.html b/demos/VideoPlayer.html
@@ -90,8 +90,8 @@ <h1>Infusion HTML 5 Video Player</h1>
                             type: "video/webm"
                         },
                         {
-                            src: "http://www.youtube.com/v/_VxQEPw1x9E&hl=en&fs=1",
-                            type: "youtube"
+                            src: "http://www.youtube.com/v/_VxQEPw1x9E",
+                            type: "video/youtube"
                         }
                     ],
                     captions: [

diff --git a/js/MenuButton.js b/js/MenuButton.js
@@ -210,6 +210,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         fluid.videoPlayer.languageMenu.setUpKeyboardA11y(that);
 
         that.container.attr("role", "menu");
+        that.container.css("z-index", 9999);
         that.hideMenu();
         that.updateTracks();
         that.updateShowHide();

diff --git a/js/VideoPlayer.js b/js/VideoPlayer.js
@@ -250,12 +250,6 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                 args: ["{arguments}.captions.1"]
             }
         },
-        invokers: {
-            resize: {
-                funcName: "fluid.videoPlayer.resize",
-                args: "{videoPlayer}"
-            }  
-        },
         selectors: {
             videoPlayer: ".flc-videoPlayer-main",
             video: ".flc-videoPlayer-video",
@@ -270,7 +264,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             turnCaptionsOff: "Turn Captions OFF",
             transcriptsOff: "Transcripts OFF",
             turnTranscriptsOff: "Turn Transcripts OFF",
-            videoTitlePreface: "Video"
+            videoTitlePreface: "Video: "
         },
         selectorsToIgnore: ["overlay", "caption", "videoPlayer", "transcript", "video", "videoContainer"],
         keyBindings: fluid.videoPlayer.defaultKeys,
@@ -292,7 +286,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             },
             currentTime: 0,
             totalTime: 0,
-            buffered: undefined,        // a TimeRanges object (http://www.whatwg.org/specs/web-apps/current-work/#time-ranges) set through browser events
+            bufferEnd: 0,
             displayCaptions: false,
             displayTranscripts: false,
             fullscreen: false,
@@ -410,8 +404,6 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         });
 
         that.events.onLoadedMetadata.addListener(function () {
-            that.resize();
-
             bindKeyboardControl(that);
         });
     };
@@ -435,7 +427,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                         controls: "true"
                     }
                 }]
-            }
+            };
         }
 
         // Keep the selector to render "fluid.videoPlayer.controllers"
@@ -548,7 +540,12 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                 } else if (key === "videoPlayer") {
                     that.container.append(res[key].resourceText);
                     that.refreshView();
-                    that.locate("video").attr("aria-label", that.options.strings.videoTitlePreface + ": " + that.options.videoTitle);
+                    var video = that.locate("video");
+                    video.attr("aria-label", that.options.strings.videoTitlePreface + that.options.videoTitle);
+                    // Setting the width and height attributes to respect the CSS API for setting the size of the video
+                    // This is required for cross browser sizing of the video
+                    video.attr("width", video.css("width"));
+                    video.attr("height", video.css("height"));
 
                     bindVideoPlayerDOMEvents(that);
                     //create all the listeners to the model
@@ -599,33 +596,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         }
         return ret + min + ":" + sec;
     };
-
-    // Function which modifies containers and their sizes
-    fluid.videoPlayer.resize = function (that) {
-        var video = that.locate("video");
-        var videoPlayer = that.locate("videoPlayer");
-        var overlay = that.locate("overlay");
-
-        // Get the video sizes first
-        // ToDo: A video wrapper container is used for video scaling. The video width/height are determined by the wrapper container
-        // rather then the video itself. This solution needs a re-consideration once we decide on scaling the video through css or
-        // API.
-//        var videoWidth = video[0].videoWidth;
-//        var videoHeight = video[0].videoHeight;
-        var videoWidth = video.width();
-        var videoHeight = video.height();
-
-        // Set height on the controller area. To make overlay to show up exactly at the bottom of the video regardless to UIO settings
-        videoPlayer.css({height: videoHeight});
-
-        // Set the width of the overlay to be the width of the video, otherwise, the controller bar spreads into transcript area
-        overlay.css({width: videoWidth});
-
-        // Save the video width/height in the model so they are accessible by the sub-components
-        that.model.videoWidth = videoWidth;
-        that.model.videoHeight = videoHeight;
-    };
-
+
     /*********************************************************************************
      * Event Binder:                                                                 *
      * Shared by all video player component whenever an event binder component is    *
@@ -652,19 +623,19 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
     });
 
     /*******************************************************************
-     * Converts seconds into a WebVTT Timestamp:  HH:MM:SS.mmm
-     * @seconds:  time in seconds expressed as a floating point number
+     * Converts milliseconds into a WebVTT Timestamp:  HH:MM:SS.mmm
+     * @millis:  time in milliseconds expressed as a floating point number
      *******************************************************************/
-    fluid.videoPlayer.secondsToHmsm = function (seconds) {
-        seconds = parseFloat(seconds);
+    fluid.videoPlayer.millisToHmsm = function (millis) {
+        var seconds = parseFloat(millis) / 1000;
         seconds = seconds < 0 || isNaN(seconds) ? 0 : seconds;
 
         var hours = parseInt(seconds / 3600);
         var minutes = parseInt(seconds / 60) % 60;
         seconds = (seconds % 60).toFixed(3);
 
         // Return result of type HH:MM:SS.mmm
-        return "" + (hours < 10 ? "0" + hours : hours) + ":"
+        return (hours < 10 ? "0" + hours : hours) + ":"
             + (minutes < 10 ? "0" + minutes : minutes) + ":"
             + (seconds  < 10 ? "0" + seconds : seconds);
     };
@@ -681,8 +652,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         var vtt = "WEBVTT";
 
         for (var i = 0; i < json.length; i++) {
-            var startTime = fluid.videoPlayer.secondsToHmsm(json[i].start_time);
-            var endTime = fluid.videoPlayer.secondsToHmsm(json[i].end_time);
+            var startTime = fluid.videoPlayer.millisToHmsm(json[i].start_time);
+            var endTime = fluid.videoPlayer.millisToHmsm(json[i].end_time);
             vtt = vtt.concat("\n\n", startTime, " --> ", endTime, "\n", json[i].text);
         }
 

diff --git a/js/VideoPlayer_controllers.js b/js/VideoPlayer_controllers.js
@@ -248,7 +248,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
 
         // Bind to the video's timeupdate event so we can programmatically update the slider.
         that.applier.modelChanged.addListener("currentTime", that.updateCurrent);
-        that.applier.modelChanged.addListener("buffered", that.updateBuffered);
+        that.applier.modelChanged.addListener("bufferEnd", that.updateBuffered);
 
         that.applier.modelChanged.addListener("canPlay", function () {
             var scrubber = that.locate("scrubber");
@@ -325,10 +325,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
     var bufferCompleted = false;
 
     fluid.videoPlayer.controllers.scrubber.updateBuffered = function (that) {
-        // "model.buffered" is a TimeRanges object set by the browser timeupdate event 
-        //    (http://www.whatwg.org/specs/web-apps/current-work/#time-ranges)
-        var bufferedExists = that.model.buffered && (that.model.buffered.length > 0);
-        var lastBufferedTime = bufferedExists ? that.model.buffered.end(that.model.buffered.length - 1) : 0;
+        var lastBufferedTime = that.model.bufferEnd;
         var totalTime = that.model.totalTime;
 
         // Turn on buffer progress update if the re-buffering is triggered, for instance, 
@@ -389,7 +386,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         createScrubberMarkup(that);
         bindScrubberDOMEvents(that);
         bindScrubberModel(that);
-        
+
         that.events.onScrubberReady.fire();
     };
 

diff --git a/js/VideoPlayer_media.js b/js/VideoPlayer_media.js
@@ -52,7 +52,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             "video/webm": "fluid.videoPlayer.media.createSourceMarkup.html5SourceTag",
             "video/ogg": "fluid.videoPlayer.media.createSourceMarkup.html5SourceTag",
             "video/ogv": "fluid.videoPlayer.media.createSourceMarkup.html5SourceTag",
-            "youtube": "fluid.videoPlayer.media.createSourceMarkup.youTubePlayer"
+            "video/youtube": "fluid.videoPlayer.media.createSourceMarkup.html5SourceTag"
         },
         sources: []
     });
@@ -63,13 +63,6 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             sourceTag.attr(mediaSource);
             videoPlayer.container.append(sourceTag);
             return sourceTag;
-        },
-        youTubePlayer: function (videoPlayer, mediaSource) {
-            var placeholder = $("<div/>"),
-                id = fluid.allocateSimpleId(placeholder);
-            videoPlayer.container.append(placeholder);
-            swfobject.embedSWF(mediaSource.src, id, "425", "356", "8");
-            return placeholder;
         }
     };
 
@@ -198,13 +191,16 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
 
     fluid.videoPlayer.media.preInit = function (that) {
         that.updateCurrentTime = function (currentTime, buffered) {
+            // buffered is a TimeRanges object (http://www.whatwg.org/specs/web-apps/current-work/#time-ranges)
+            var bufferEnd = buffered ? buffered.end(buffered.length - 1) : 0;
+
             that.applier.fireChangeRequest({
                 path: "currentTime", 
                 value: currentTime
             });
             that.applier.fireChangeRequest({
-                path: "buffered", 
-                value: buffered
+                path: "bufferEnd",
+                value: bufferEnd
             });
         };
 

diff --git a/js/VideoPlayer_transcript.js b/js/VideoPlayer_transcript.js
@@ -171,7 +171,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         var inTimeMillis;
         if (track.text) {
             // this is a Universal Subtitles format file
-            inTimeMillis = that.convertSecsToMilli(track.start_time);
+            inTimeMillis = track.start_time;
         } else {
             // a WebVTT compatible json format file
             inTimeMillis = that.convertToMilli(track.inTime);
@@ -270,7 +270,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             // Handle Universal Subtitles JSON files for transcripts
             if (transcriptSource.type === "text/amarajson") {
                 fluid.videoPlayer.fetchAmaraJson(transcriptSource.src, function (data) {
-                    fluid.videoPlayer.transcript.parseTranscriptFile(that, data, currentIndex, that.convertSecsToMilli, "text", "start_time", "end_time");
+                    fluid.videoPlayer.transcript.parseTranscriptFile(that, data, currentIndex, fluid.identity, "text", "start_time", "end_time");
                 });
             } else {
                 var opts = {