Merge remote-tracking branch 'alexn/FLUID-4619' into demo

* alexn/FLUID-4619: FLUID-4619: Removed fl-videoPlayer-captionArea-up FLUID-4619: Removing commented out code from videoPlayer.css and videoPlayer.js files. Fixing styling of the transcript area by removing its horizontal scroll and fixing its height. FLUID-4619: Changing captionator's dynamic styling, changing videoPlayer HTML markup and CSS so that caption div and controller div is in the same container. Hence, captions slides up and down automatically when controller bar hides/shows/ FLUID-4619: Better placement of the captions when the controllers hide and show. FLUID-4619: Made the controllers show on focus and on mouse enter. FLUID-4619: Experimental code with hiding/showing controls
amb26 · Feb 27, 2012 · 72115b2 · 72115b2
2 parents a21d842 + d14c3c4
commit 72115b2
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 57 deletions.
diff --git a/css/VideoPlayer.css b/css/VideoPlayer.css
@@ -37,7 +37,6 @@
 
 .fl-videoPlayer-controller {
     width:100%;
-    position: absolute;
     bottom: 0;
 }
 
@@ -297,12 +296,15 @@ ul.fl-videoPlayer-transcripts-languageList .fl-videoPlayer-transcript-selected {
  */
 
 .fl-videoPlayer-captionArea {
-/*     This just a quick hack to make captions appear above the scrub bar before we make a proper divs */
-    bottom: 6em;
-    position: relative;
     text-align:center;
 }
 
+.fl-videoPlayer-overlay {
+    bottom: 0em;
+    position: absolute;
+    width: 100%;
+}
+
 .fl-videoPlayer-caption-captionText {
     color: white;
     background-color: black;
@@ -316,6 +318,7 @@ ul.fl-videoPlayer-transcripts-languageList .fl-videoPlayer-transcript-selected {
     z-index: 101;   /* To make our div showin on top since captionator has 100 so */
 }
 
+
 /*
  * Transcript area
  */
@@ -341,9 +344,10 @@ ul.fl-videoPlayer-transcripts-languageList .fl-videoPlayer-transcript-selected {
     margin-top: 2em;
     word-spacing: 0.1em;
     padding: 1em;
-    overflow: scroll;
+    overflow-x: hidden;
+    overflow-y: scroll;
     cursor: pointer;
-    height: 83%;
+    height: 78%;
     width: 85%;
 }
 .fl-videoPlayer-transcript-element-highlight {

diff --git a/demos/Mammals.css b/demos/Mammals.css
@@ -194,6 +194,4 @@ footer a {
 .fl-videoPlayer-captionArea {
     background-color: #000000;
     color: #FFFFFF;
-    /* This just a quick hack to make captions appear above the scrub bar before we make a proper divs */
-    bottom: 6.8em;
 }
diff --git a/html/videoPlayer_template.html b/html/videoPlayer_template.html
@@ -1,54 +1,59 @@
 <div class="flc-videoPlayer-video-controller-area fl-videoPlayer-video-controller-area">
     <div class="flc-videoPlayer-videoContainer fl-videoPlayer-video">
-        <video class="flc-videoPlayer-video"></video>
-        <div class="flc-videoPlayer-captionArea fl-videoPlayer-captionArea fl-force-left"></div>
+        <video class="flc-videoPlayer-video"></video>  
     </div>
-    <div class="flc-videoPlayer-controller fl-videoPlayer-controller">
 
-        <div class="flc-videoPlayer-scrubberContainer fl-videoPlayer-scrubberContainer">
-            <div class="flc-videoPlayer-scrubber fl-videoPlayer-scrubber">
-                <a class="ui-slider-handle" href="#">
-                    <span>
-                        <span class="flc-videoPlayer-current fl-videoPlayer-time fl-videoPlayer-current"></span>/<span class="flc-videoPlayer-total fl-videoPlayer-time fl-videoPlayer-total"></span>
-                    </span>
-                </a>
-            </div>
-        </div>
-
-        <div class="fl-videoPlayer-controller-buttons">
-            <div class="fl-videoPlayer-controller-buttons-main">
-                <button type="button" class="flc-videoPlayer-play fl-videoPlayer-button fl-videoPlayer-play"></button>
-
-                <div class="flc-videoPlayer-volumeContainer fl-videoPlayer-volumeContainer">
-                    <button type="button" class="flc-videoPlayer-mute fl-videoPlayer-button fl-videoPlayer-mute"></button>
-                    <div class="flc-videoPlayer-volumeControl"></div>
+    <div class="flc-videoPlayer-overlay fl-videoPlayer-overlay">
+
+        <div class="flc-videoPlayer-captionArea fl-videoPlayer-captionArea"></div>
+
+        <div class="flc-videoPlayer-controller fl-videoPlayer-controller">
+
+            <div class="flc-videoPlayer-scrubberContainer fl-videoPlayer-scrubberContainer">
+                <div class="flc-videoPlayer-scrubber fl-videoPlayer-scrubber">
+                    <a class="ui-slider-handle" href="#">
+                        <span>
+                            <span class="flc-videoPlayer-current fl-videoPlayer-time fl-videoPlayer-current"></span>/<span class="flc-videoPlayer-total fl-videoPlayer-time fl-videoPlayer-total"></span>
+                        </span>
+                    </a>
                 </div>
             </div>
 
-            <div class="fl-videoPlayer-controller-buttons-secondary">
-                <div class="flc-videoPlayer-captionControls-container">
-                    <a class="flc-videoPlayer-captions-button fl-videoPlayer-button-wrapper" href="#">
-                        <!-- Placing a button inside the anchor is a workaround for FLUID-4606 -->
-                        <button class="fl-videoPlayer-button fl-videoPlayer-captions-button"></button>
-                    </a>
-                    <ul class="flc-videoPlayer-captions-languageMenu fl-videoPlayer-languageMenu">
-                        <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
-                        <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
-                    </ul>
+            <div class="fl-videoPlayer-controller-buttons">
+                <div class="fl-videoPlayer-controller-buttons-main">
+                    <button type="button" class="flc-videoPlayer-play fl-videoPlayer-button fl-videoPlayer-play"></button>
+
+                    <div class="flc-videoPlayer-volumeContainer fl-videoPlayer-volumeContainer">
+                        <button type="button" class="flc-videoPlayer-mute fl-videoPlayer-button fl-videoPlayer-mute"></button>
+                        <div class="flc-videoPlayer-volumeControl"></div>
+                    </div>
                 </div>
-
-                <div class="flc-videoPlayer-transcriptControls-container">
-                    <a class="flc-videoPlayer-transcripts-button fl-videoPlayer-button-wrapper" href="#">
-                        <!-- Placing a button inside the anchor is a workaround for FLUID-4606 -->
-                        <button class="fl-videoPlayer-button fl-videoPlayer-transcripts-button"></button>
-                    </a>
-                    <ul class="flc-videoPlayer-transcripts-languageMenu fl-videoPlayer-languageMenu">
-                        <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
-                        <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
-                    </ul>
+
+                <div class="fl-videoPlayer-controller-buttons-secondary">
+                    <div class="flc-videoPlayer-captionControls-container">
+                        <a class="flc-videoPlayer-captions-button fl-videoPlayer-button-wrapper" href="#">
+                            <!-- Placing a button inside the anchor is a workaround for FLUID-4606 -->
+                            <button class="fl-videoPlayer-button fl-videoPlayer-captions-button"></button>
+                        </a>
+                        <ul class="flc-videoPlayer-captions-languageMenu fl-videoPlayer-languageMenu">
+                            <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
+                            <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
+                        </ul>
+                    </div>
+
+                    <div class="flc-videoPlayer-transcriptControls-container">
+                        <a class="flc-videoPlayer-transcripts-button fl-videoPlayer-button-wrapper" href="#">
+                            <!-- Placing a button inside the anchor is a workaround for FLUID-4606 -->
+                            <button class="fl-videoPlayer-button fl-videoPlayer-transcripts-button"></button>
+                        </a>
+                        <ul class="flc-videoPlayer-transcripts-languageMenu fl-videoPlayer-languageMenu">
+                            <li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
+                            <li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
+                        </ul>
+                    </div>
+
+                    <button id="fullscreen" type="button" class="flc-videoPlayer-fullscreen fl-videoPlayer-button fl-videoPlayer-fullscreen"></button>
                 </div>
-
-                <button id="fullscreen" type="button" class="flc-videoPlayer-fullscreen fl-videoPlayer-button fl-videoPlayer-fullscreen"></button>
             </div>
         </div>
     </div>

diff --git a/js/VideoPlayer.js b/js/VideoPlayer.js
@@ -135,7 +135,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             },
             html5Captionator: {
                 type: "fluid.videoPlayer.html5Captionator",
-                container: "{videoPlayer}.dom.videoContainer",
+                container: "{videoPlayer}.dom.videoControllersContainer",
                 createOnEvent: "onHTML5BrowserDetected",
                 options: {
                     model: "{videoPlayer}.model",
@@ -329,8 +329,14 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         var video = that.locate("video");
         video.fluid("tabbable");
         video.fluid("activatable", [that.play, opts]);
-        //Only problem now when navigating in the controller the keyboard shortcuts are not available anymore
-        video.focus();
+    };
+
+    var showControllers = function (that) {
+        that.locate("controllers").slideDown();
+    };
+
+    var hideControllers = function (that) {
+        that.locate("controllers").delay(500).slideUp();
     };
 
     var bindVideoPlayerDOMEvents = function (that) {
@@ -339,6 +345,19 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             ev.preventDefault();
             that.play();
         });
+
+        that.locate("videoControllersContainer").mouseenter(function () {
+            showControllers(that);
+        });
+
+        that.container.mouseleave(function () {
+            hideControllers(that);
+        });
+
+        video.focus(function () {
+            showControllers(that);
+        });
+
         video.bind("loadedmetadata", function () {
             var videoControllersContainer = that.locate("videoControllersContainer");
             //that shouldn't be usefull but the video is too big if it's not used
@@ -516,6 +535,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                 }
             }
 
+            that.locate("controllers").hide();
             that.events.onReady.fire(that);
         });
 

diff --git a/lib/captionator/js/captionator.js b/lib/captionator/js/captionator.js
@@ -1407,7 +1407,8 @@
 				captionator.applyStyles(DOMNode,{
 					"width": "auto",
 					"position": "static",
-					"display": "inline-block",
+/* 					FLUID-4619: Removing this line to place caption cue and videoPlayer controller into one div */
+/* 					"display": "inline-block", */
 					"padding": "1em"
 				});
 
@@ -1559,7 +1560,8 @@
 					}
 
 					captionator.applyStyles(characterSpan,{
-						"position": "absolute",
+/* 					FLUID-4619: Removing this line to place caption cue and videoPlayer controller into one div */
+/* 						"position": "absolute", */
 						"top": characterY + "px",
 						"left": characterX + "px"
 					});
@@ -1582,13 +1584,15 @@
 			}
 
 			captionator.applyStyles(DOMNode,{
-				"position": "absolute",
+/* 				FLUID-4619: Removing this line to place caption cue and videoPlayer controller into one div */
+/* 				"position": "absolute", */
 				"overflow": "hidden",
 				"width": cueWidth + "px",
 				"height": cueHeight + "px",
 				"top": cueY + "px",
 				"left": cueX + "px",
-				"padding": cuePaddingTB + "px " + cuePaddingLR + "px",
+				// FLUID-4619 removing second padding so that caption cue does not go outside of the video container
+				"padding": cuePaddingTB + "px ",// + cuePaddingLR + "px",
 				"textAlign": cueAlignment,
 				"backgroundColor": "rgba(" + cueBackgroundColour.join(",") + ")",
 				"direction": captionator.checkDirection(String(cueObject.text)),