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

* alexn/FLUID-4619: FLUID-4619: Cindy and Alex worked on the cross-browser styling for the videoPlayer (Chrome, Safari and IE9). Removed some of the CSS which is not in use anymore. Styled videoPlayer differently to show properly on Mammals and in basic demo. Decreased number of dynamic css calls in videoPlayer.js and cleaned up the code. Great success! FLUID-4619: Experimental code with a markup redesign as well as proper styling for transcripts and all together videoPlayer container. WARNING: hiding of the overlay area is disabled. Some text is added to the videoPlayer basic demo to test layouts.
amb26 · Feb 29, 2012 · a00d8b4 · a00d8b4
2 parents eaa9dbd + 1d8ba3e
commit a00d8b4
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 54 deletions.
diff --git a/css/VideoPlayer.css b/css/VideoPlayer.css
@@ -7,17 +7,16 @@
 */
 
 .fl-videoPlayer-video-controller-area {
-    float: left;
     position: relative;
+    display: inline-block;
 }
 
 /*
 * Video area
 */
 
 .fl-videoPlayer-video {
-	width: 100%;
-	height: 100%;
+	float: left;
 }
 
 /*
@@ -328,9 +327,11 @@ ul.fl-videoPlayer-transcripts-languageList li {
  */
 
 .fl-videoPlayer-transcriptArea {
-    float: left;
+    float: right;
     border: 1px solid black;
+    height: 100%;
     width: 15em;
+    overflow: hidden; 
 }
 
 .fl-videoPlayer-transcripts-language-dropdown {
@@ -345,20 +346,24 @@ ul.fl-videoPlayer-transcripts-languageList li {
 }
 
 .fl-videoPlayer-transcript-text {
-    margin-top: 2em;
     word-spacing: 0.1em;
-    padding: 1em;
     overflow-x: hidden;
     overflow-y: scroll;
     cursor: pointer;
-    height: 73%;
+    height: 85%;
     width: 85%;
+    text-align: left;
+    padding-left: 1em;
+    padding-right: 1em;
 }
 .fl-videoPlayer-transcript-element-highlight {
     color: white;
     background-color: #0099CC;
     padding: 0.2em;
 }
+.fl-videoPlayer-transcript-controls {
+    height: 15%;
+}
 
 .fl-videoPlayer-transcripts-close-button {
     background: #fff url('../images/default/transcriptclose.png') no-repeat center center;

diff --git a/demos/Mammals.css b/demos/Mammals.css
@@ -118,13 +118,6 @@ section, aside {
     font-size: .88em; 
 }
 
-.fl-videoPlayer {
-    max-width: 100%;
-    margin: auto;
-    padding: .2em;
-    background-color: #808080;
-}
-
 .pic {
     background-color: #F3F3F3;
     border: .1em solid #DDDDDD;
@@ -191,7 +184,19 @@ footer a {
 
 /* Customize video player related styles */
 
+.fl-videoPlayer {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    text-align: center;
+    max-width: 100%;
+}
+
 .fl-videoPlayer-captionArea {
     background-color: #000000;
     color: #FFFFFF;
 }
+
+.fl-videoPlayer-video-controller-area {
+    border: 2px solid #808080;
+    background-color: #808080;
+}
diff --git a/html/videoPlayer_template.html b/html/videoPlayer_template.html
@@ -1,7 +1,6 @@
 <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>
+
+    <video class="flc-videoPlayer-video fl-videoPlayer-video"></video>  
 
     <div class="flc-videoPlayer-overlay fl-videoPlayer-overlay">
 
@@ -57,13 +56,17 @@
             </div>
         </div>
     </div>
-</div>
-
-<div class="flc-videoPlayer-transcriptArea fl-videoPlayer-transcriptArea">
-    <select class="flc-videoPlayer-transcripts-language-dropdown fl-videoPlayer-transcripts-language-dropdown">
-        <option></option>
-    </select>
-    <button type="button" class="flc-videoPlayer-transcripts-close-button fl-videoPlayer-button fl-videoPlayer-transcripts-close-button"></button>
 
-    <div class="flc-videoPlayer-transcript-text fl-videoPlayer-transcript-text"></div>
+    <div class="flc-videoPlayer-transcriptArea fl-videoPlayer-transcriptArea">
+        <div class="fl-videoPlayer-transcript-controls">
+            <select class="flc-videoPlayer-transcripts-language-dropdown fl-videoPlayer-transcripts-language-dropdown">
+                <option></option>
+            </select>
+            <button type="button" class="flc-videoPlayer-transcripts-close-button fl-videoPlayer-button fl-videoPlayer-transcripts-close-button"></button>        
+        </div>
+
+        <div class="flc-videoPlayer-transcript-text fl-videoPlayer-transcript-text"></div>
+    </div>
+
 </div>
+
diff --git a/js/VideoPlayer.js b/js/VideoPlayer.js
@@ -241,20 +241,20 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             onTranscriptHide: "{videoPlayer}.resizeHanlder"
         },
         selectors: {
-            videoContainer: ".flc-videoPlayer-videoContainer",
             video: ".flc-videoPlayer-video",
             caption: ".flc-videoPlayer-captionArea",
             controllers: ".flc-videoPlayer-controller",
             transcript: ".flc-videoPlayer-transcriptArea",
-            videoControllersContainer: ".flc-videoPlayer-video-controller-area"
+            videoControllersContainer: ".flc-videoPlayer-video-controller-area",
+            overlay: ".flc-videoPlayer-overlay"
         },
         strings: {
             captionsOff: "Captions OFF",
             turnCaptionsOff: "Turn Captions OFF",
             transcriptsOff: "Transcripts OFF",
             turnTranscriptsOff: "Turn Transcripts OFF"
         },
-        selectorsToIgnore: ["videoContainer", "caption", "videoControllersContainer", "transcript"],
+        selectorsToIgnore: ["overlay", "caption", "videoControllersContainer", "transcript"],
         keyBindings: defaultKeys,
         produceTree: "fluid.videoPlayer.produceTree",
         controls: "custom",
@@ -554,36 +554,19 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
 
     // Function which modifies containers and their sizes
     fluid.videoPlayer.resize = function (that) {
-        var videoContainer = that.locate("videoContainer");
         var video = that.locate("video");
         var videoControllersContainer = that.locate("videoControllersContainer");
-        var videoWidth, videoHeight;
+        var overlay = that.locate("overlay");
 
-        videoWidth = video[0].videoWidth;
-        videoHeight = video[0].videoHeight;
-
-        // Set the width/height of each container
-        videoContainer.css({
-            width: videoWidth,
-            height: videoHeight
-        });
-
-        videoControllersContainer.css({width: videoWidth});
+        // Get the video sizes first
+        var videoWidth = video[0].videoWidth;
+        var videoHeight = video[0].videoHeight;
 
-        that.locate("transcript").css("height", videoControllersContainer.height() - 2);
-
-        var transcriptWidth = that.locate("transcript").width();
-        if (!that.model.displayTranscripts) {
-            transcriptWidth = 0;
-        }
-
-        // ToDo: A hacky way by adding 3px onto the videoPlayer full container width, 
-        // otherwise, the transcript area gets showed up underneath the controller bar.
-        // Need a better solution.
-        that.container.css({
-            width: videoWidth + transcriptWidth + 3,
-            height: videoControllersContainer.height()
-        });
+        // Set height on the controller area. To make overlay to show up exatly at the bottom of the video regardless to UIO settings
+        videoControllersContainer.css({height: videoHeight});
+
+        // Set the width of the overlay to be the width of the video
+        overlay.css({width: videoWidth});
     };
 
     /*********************************************************************************