Merge branch 'demo' into FLUID-4775

Conflicts: js/MenuButton.js js/VideoPlayer.js js/VideoPlayer_controllers.js tests/html/VideoPlayerIntervalEventsConductor-integrationTest.html tests/js/VideoPlayerTests.js Resolved, but not working yet.
michelled · Oct 16, 2012 · 9520aee · 9520aee
2 parents e94ab88 + f497543
commit 9520aee
Show file tree

Hide file tree

Showing 53 changed files with 4,110 additions and 2,656 deletions.
diff --git a/css/VideoPlayer.css b/css/VideoPlayer.css
@@ -25,7 +25,8 @@
     width: 100%;
     height: 100%;
 }
-.fl-videoPlayer-video-element:focus {
+.fl-videoPlayer-video-element:focus,
+.fl-videoPlayer-transcript-element-selected {
     outline: solid 3px #3195C7;
 }
 .fl-theme-uio-yb .fl-videoPlayer-video-element:focus { outline-color: #FFFF00; }
@@ -40,6 +41,7 @@
 .fl-videoPlayer-tooltip {
     position    : absolute;
     padding     : 3px 5px;
+    z-index     : 1000; /* Tooltips should be always shown above any other videoPlayer html element */
 }
 .fl-theme-uio-yb .fl-videoPlayer-tooltip,
 .fl-theme-uio-by .fl-videoPlayer-tooltip,
@@ -55,7 +57,7 @@
 /***********
  * Buttons *
  ***********/
- 
+
 .fl-videoPlayer-button {
     width: 30px;
     height: 30px;
@@ -89,6 +91,14 @@
 }
 
 .fl-videoPlayer-controller-buttons * {
+    display: inline-block;
+}
+
+.fl-videoPlayer-optional {
+    display: none;
+}
+.fl-videoPlayer-fullscreen.fl-videoPlayer-optional,
+.fl-videoPlayer-fullscreen-on.fl-videoPlayer-optional {
     display: inline;
 }
 
@@ -256,8 +266,8 @@ a.fl-videoPlayer-button-wrapper {
     border-style: solid;
     border-color: #c2c2c2;
     position: absolute;
-    bottom: 19px; /* 20px is right on FF */
-    right: 1px; /* 5px is right on FF */
+    bottom: 30px;
+    right: 0px;
     width: 25%;
     background-color: #F2F2F2;
 }
@@ -536,10 +546,10 @@ ul.fl-videoPlayer-transcripts-languageList li {
     position: absolute;
     width: 100%;
 }
-.fl-theme-uio-yb .fl-videoPlayer-overlay,
-.fl-theme-uio-wb .fl-videoPlayer-overlay,
-.fl-theme-uio-by .fl-videoPlayer-overlay,
-.fl-theme-uio-bw .fl-videoPlayer-overlay {
+.fl-theme-uio-yb .fl-videoPlayer-overlay, .fl-theme-uio-yb .fl-videoPlayer-captionArea, .fl-theme-uio-yb .captionator-cue-canvas,
+.fl-theme-uio-wb .fl-videoPlayer-overlay, .fl-theme-uio-wb .fl-videoPlayer-captionArea, .fl-theme-uio-wb .captionator-cue-canvas,
+.fl-theme-uio-by .fl-videoPlayer-overlay, .fl-theme-uio-by .fl-videoPlayer-captionArea, .fl-theme-uio-by .captionator-cue-canvas,
+.fl-theme-uio-bw .fl-videoPlayer-overlay, .fl-theme-uio-bw .fl-videoPlayer-captionArea, .fl-theme-uio-bw .captionator-cue-canvas {
     background-color: transparent !important;
 }
 .fl-videoPlayer-caption-captionText {
@@ -634,8 +644,14 @@ ul.fl-videoPlayer-transcripts-languageList li {
 .captionator-cue-canvas {
     pointer-events:none;
     color: #FFFFFF;
+    position: relative !important;
+    font-size: inherit !important;
+    line-height: inherit !important;
 }
 
+.captionator-cue {
+    line-height: inherit !important;
+}
 
 /********************
  * UIO theme styling 

diff --git a/demos/Mammals.css b/demos/Mammals.css
@@ -3,7 +3,6 @@ body {
     font-family: "Helvetica Neue",Arial,"Liberation Sans",FreeSans,sans-serif;
     color: #333333;
     font-size: .9em;
-    line-height: 1.4em;
 }
 
 nav li {
@@ -191,10 +190,6 @@ footer a {
     max-width: 100%;
 }
 
-.fl-videoPlayer-captionArea {
-    background-color: #000000;
-    color: #FFFFFF;
-}
 
 .fl-videoPlayer-main {
     border: 2px solid #808080;

diff --git a/demos/VideoPlayer.html b/demos/VideoPlayer.html
@@ -62,12 +62,19 @@ <h1>Infusion HTML 5 Video Player</h1>
         </div>
 
         <script>
-            var uiOptions = fluid.uiOptions.fatPanel(".flc-uiOptions", {
+            var uiOptions = fluid.uiOptions.fatPanel.withMediaPanel(".flc-uiOptions", {
                 prefix: "../lib/infusion/components/uiOptions/html/",
                 components: {
                     relay: {
                         type: "fluid.videoPlayer.relay"
                     }
+                },
+                templateLoader: {
+                    options: {
+                        templates: {
+                            mediaControls: "../html/UIOptionsTemplate-media.html"
+                        }
+                    }
                 }
             });
 
@@ -89,35 +96,35 @@ <h1>Infusion HTML 5 Video Player</h1>
                     ],
                     captions: [
                         {
-                            src: "http://www.universalsubtitles.org/api/1.0/subtitles/?video_url=http://www.youtube.com/watch?v=_VxQEPw1x9E&language=en",
-                            type: "jsonp/vtt",
+                            src: "http://www.youtube.com/watch?v=_VxQEPw1x9E&language=en",
+                            type: "text/amarajson",
                             srclang: "en",
-                            label: "English",
+                            label: "English"
                         },
                         {
                             src: "videos/ReorganizeFuture/ReorganizeFuture.fr.vtt",
                             type: "text/vtt",
                             srclang: "fr",
-                            label: "French",
+                            label: "French"
                         }
                     ],
                     transcripts: [
                         {
                             // TO TEST the transcript processing of Universal Subtitles files for transcripts,
                             // substititute the following two lines
-                            // src: "http://www.universalsubtitles.org/api/1.0/subtitles/?video_url=http://www.youtube.com/watch?v=_VxQEPw1x9E&language=en",
-                            // type: "jsonp/vtt",
+                            src: "http://www.youtube.com/watch?v=_VxQEPw1x9E&language=en",
+                            type: "text/amarajson",
 
-                            src: "videos/ReorganizeFuture/ReorganizeFuture.transcripts.en.json",
-                            type: "JSONcc",
+                            //src: "videos/ReorganizeFuture/ReorganizeFuture.transcripts.en.json",
+                            //type: "JSONcc",
                             srclang: "en",
-                            label: "English",
+                            label: "English"
                         },
                         {
                             src: "videos/ReorganizeFuture/ReorganizeFuture.transcripts.fr.json",
                             type: "JSONcc",
                             srclang: "fr",
-                            label: "French",
+                            label: "French"
                         }
                     ]
                 }