add panel control when fullscreen

dev/audioplayer_control/control.css

-button.loop{width:10em}#visualizer{text-align:center}#video{text-align:center}video#videoControl{width:50%;height:20%}canvas#can{width:50%;height:20%}video::-webkit-media-controls-enclosure{display:none!important}progress.bar{position:inherit;display:block;height:1em;width:100%;-moz-border-radius:.5em;-webkit-border-radius:.5em;border-radius:.5em;-moz-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;-webkit-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444}
+button.loop{width:10em}#visualizer{text-align:center}#video{text-align:center}video#videoControl{width:50%;height:20%}canvas#can{width:50%;height:20%}progress.bar{position:inherit;display:block;height:1em;width:100%;-moz-border-radius:.5em;-webkit-border-radius:.5em;border-radius:.5em;-moz-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;-webkit-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444}
\ No newline at end of file

dev/audioplayer_control/control.js

@@ -117,8 +117,9 @@
             }
         };
         showTime = function() {
-            bar_context.value = that.audio.currentTime;
-            time_context.innerHTML = timeFormat(that.audio.duration - that.audio.currentTime);
+            bar_context.value = that.video.currentTime;
+            time_context.innerHTML = timeFormat(that.video.duration - that.video.currentTime);
+            that.video.volume = 0;
         };
         if (that.type !== "video/mp4") {
             canvas.style.display = "";
@@ -253,6 +254,8 @@
                 } else {
                     requestFullScreen();
                 }
+            }), loopEventListener(video, "play", false, function(event) {
+                g.audio.currentTime = g.video.currentTime;
             }), loopEventListener(bar_context, "mousemove", false, function(event) {
                 var time = getTime(bar_context, event.clientX);
                 box_context.style.left = (event.clientX - 20) / 16 + "em";

src/audioplayer_control/control.js

@@ -159,9 +159,10 @@
       }
     };
     showTime = function () {
-      bar_context.value = that.audio.currentTime;
-      time_context.innerHTML = timeFormat(that.audio.duration -
-                                          that.audio.currentTime);
+      bar_context.value = that.video.currentTime;
+      time_context.innerHTML = timeFormat(that.video.duration -
+                                          that.video.currentTime);
+      that.video.volume = 0;
     };
     if (that.type !== "video/mp4") {
       canvas.style.display = "";
@@ -347,6 +348,9 @@
               }
             }),
 
+            loopEventListener(video, "play", false, function (event) {
+              g.audio.currentTime = g.video.currentTime;
+            }),
 
             loopEventListener(bar_context, "mousemove",
                               false, function (event) {

src/audioplayer_control/control.less

@@ -18,9 +18,9 @@ canvas#can{
 }
 
 
-video::-webkit-media-controls-enclosure {
-   display: none !important;
-}
+//video::-webkit-media-controls-enclosure {
+//   display: none !important;
+//}
 progress.bar {
     position: inherit;
     display: block;