Use all available space for videos and images 27/9827/2 submit/tizen/20130906.201120
authorRusty Lynch <rusty.lynch@intel.com>
Fri, 6 Sep 2013 18:13:03 +0000 (11:13 -0700)
committerRusty Lynch <rusty.lynch@intel.com>
Fri, 6 Sep 2013 18:16:33 +0000 (11:16 -0700)
Automatically hide/show controls when a video plays/pauses and fixup
the css to no longer shrink the size of the video and images

Change-Id: I043e5bc36ecdc0943da1714747c4ad7e07491b60
Signed-off-by: Rusty Lynch <rusty.lynch@intel.com>
css/main.css
index.html
js/main.js

index 1e6ea75..8f1dd37 100644 (file)
@@ -72,12 +72,12 @@ html
 {
        position:absolute;
        display:none;
-       width: 90%;
-       height: 80%;
-       left: 5%;
-       right: 5%;
-       top: 10%;
-       bottom: 10%;
+       width: 100%;
+       height: 100%;
+       left: 0%;
+       right: 0%;
+       top: 0%;
+       bottom: 0%;
 }
 
 #imagePlayer
@@ -85,12 +85,12 @@ html
        position:absolute;
        background-size: contain;
        display:none;
-       width: 90%;
-       height: 78%;
-       left: 5%;
-       right: 5%;
-       top: 11%;
-       bottom: 10%;
+       width: 100%;
+       height: 100%;
+       left: 0%;
+       right: 0%;
+       top: 0%;
+       bottom: 0%;
 }
 
 #mediaList
index 4c2dd47..4960bfa 100644 (file)
        </head>
        <body>
        <div id="background"></div>
+               <audio id="audioPlayer" class="player" onended="nextButtonClick()" oncanplaythrough="playLoadedMedia()">
+
+                       <source id=audioSrc type="audio/mpeg">
+               </audio>
+
+               <video id="videoPlayer" onClick="playButtonClick()" class="player">
+                       <source id=videoSrc>
+               </video>
+
+               <div id="imagePlayer" onClick="nextButtonClick()" class="player"></div>
+
+               <div id="mediaList">
+                  <ul id=mediaListItems>
+                  </ul>
+               </div>
+
                <div id="mainMenuButtons">
                        <img id="mainMusicButton" class="mainButton" src="images/musicButton.png" onClick="changeMenu(this.id)">
                        <img id="mainVideoButton" class="mainButton" src="images/videoButton.png" onClick="changeMenu(this.id)">
 
                <canvas id="mediaName" style="position:absolute; z-index : 0"></canvas>
 
-
-
-               <audio id="audioPlayer" class="player" onended="nextButtonClick()" oncanplaythrough="playLoadedMedia()">
-
-                       <source id=audioSrc type="audio/mpeg">
-               </audio>
-
-               <video id="videoPlayer" onClick="playButtonClick()" class="player">
-                       <source id=videoSrc>
-               </video>
-
-               <div id="imagePlayer" onClick="nextButtonClick()" class="player"></div>
-
-               <div id="mediaList">
-                  <ul id=mediaListItems>
-                  </ul>
-               </div>
-
        </body>
 </html>
index c94be64..28abc2f 100644 (file)
@@ -945,6 +945,13 @@ function init()
                        }
                }
        });
+
+    document.getElementById('videoPlayer').addEventListener("playing", function() {
+        $("#navigationButtons").hide();
+    }, false);
+    document.getElementById('videoPlayer').addEventListener("pause", function() {
+        $("#navigationButtons").show();
+    }, false);
 }
 
 $(document).ready(function () {