Embed: hide settings menu when gear icon is tapped (for mobile)

Author: thoronwen

embed/min/player.js

@@ -8,7 +8,7 @@ svg.icon.loading{z-index:-1;position:absolute;top:0;left:0;right:0;bottom:0;marg
 [data-loading] svg.icon.loading{z-index:2;opacity:1}
 [data-loading-css] .mistvideo-controls{display:none}
 [data-hidecursor],[data-hidecursor] *,[data-hidecursor] .mistvideo-pointer{cursor:none}
-.mistvideo-error{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background-color:$background;align-items:center;justify-content:center;text-align:center;z-index:2;cursor:default;min-height:fit-content;min-width:fit-content}
+.mistvideo-error{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background-color:$background;align-items:center;justify-content:center;text-align:center;z-index:2;cursor:default;min-height:fit-content;min-width:fit-content;height:100%}
 .mistvideo-error.show{display:flex}
 .mistvideo-error .message{max-width:80%}
 .mistvideo-error .message .details table{text-align:left}
@@ -84,8 +84,9 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
 .mistvideo-polling{display:inline-block;position:relative;width:25px;height:25px}
 .mistvideo-polling svg.icon.loading{z-index:0;opacity:1}
 .mistvideo[data-show-submenu] .mistvideo-submenu{right:5px}
+.mistvideo[data-hide-submenu] .mistvideo-submenu{right:-1000px!important}
 .mistvideo[data-show-submenu] .mistvideo-controls{bottom:0}
-.mistvideo-error[data-passive]{bottom:auto;left:auto;margin:.5em;padding:.5em}
+.mistvideo-error[data-passive]{bottom:auto;left:auto;height:auto;margin:.5em;padding:.5em}
 .mistvideo-error[data-passive] .message{max-width:none}
 .mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}
 .mistvideo-error .mistvideo-buttoncontainer .mistvideo-button{white-space:nowrap}

embed/min/skins/default.css

@@ -8,7 +8,7 @@ svg.icon.loading{z-index:-1;position:absolute;top:0;left:0;right:0;bottom:0;marg
 [data-loading] svg.icon.loading{z-index:2;opacity:1}
 [data-loading-css] .mistvideo-controls{display:none}
 [data-hidecursor],[data-hidecursor] *,[data-hidecursor] .mistvideo-pointer{cursor:none}
-.mistvideo-error{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background-color:$background;align-items:center;justify-content:center;text-align:center;z-index:2;cursor:default;min-height:fit-content;min-width:fit-content}
+.mistvideo-error{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background-color:$background;align-items:center;justify-content:center;text-align:center;z-index:2;cursor:default;min-height:fit-content;min-width:fit-content;height:100%}
 .mistvideo-error.show{display:flex}
 .mistvideo-error .message{max-width:80%}
 .mistvideo-error .message .details table{text-align:left}
@@ -84,8 +84,9 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
 .mistvideo-polling{display:inline-block;position:relative;width:25px;height:25px}
 .mistvideo-polling svg.icon.loading{z-index:0;opacity:1}
 .mistvideo[data-show-submenu] .mistvideo-submenu{right:5px}
+.mistvideo[data-hide-submenu] .mistvideo-submenu{right:-1000px!important}
 .mistvideo[data-show-submenu] .mistvideo-controls{bottom:0}
-.mistvideo-error[data-passive]{bottom:auto;left:auto;margin:.5em;padding:.5em}
+.mistvideo-error[data-passive]{bottom:auto;left:auto;height:auto;margin:.5em;padding:.5em}
 .mistvideo-error[data-passive] .message{max-width:none}
 .mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}
 .mistvideo-error .mistvideo-buttoncontainer .mistvideo-button{white-space:nowrap}

embed/min/skins/dev.css

@@ -402,7 +402,7 @@ function MistVideo(streamName,options) {
             averagingSteps: 20,           //the amount of measurements that are saved.
             threshold: function(){        //returns the score threshold below which the "action" should be taken
               if (this.MistVideo.source.type == "webrtc") {
-                return 0.97;
+                return 0.95;
               }
               return 0.75;
             },

embed/player.js

@@ -306,6 +306,7 @@ MistSkins["default"] = {
         //also do something useful
         //show submenu
         MistVideo.container.setAttribute("data-show-submenu","");
+        MistVideo.container.removeAttribute("data-hide-submenu");
         MistVideo.container.removeAttribute("data-hidecursor");
         //onmouseout, hide submenu
         var f = function(){
@@ -1200,8 +1201,19 @@ MistSkins["default"] = {
       }
     },
     settings: function(){
+      var MistVideo = this;
+      
       var button = this.skin.icons.build("settings");
-      button.setAttribute("onclick","");
+      MistUtil.event.addListener(button,"click",function(){
+        if (MistVideo.container.hasAttribute("data-show-submenu")) {
+          MistVideo.container.setAttribute("data-hide-submenu",""); //don't show even when hovering
+          MistVideo.container.removeAttribute("data-show-submenu");
+        }
+        else {
+          MistVideo.container.setAttribute("data-show-submenu","");
+          MistVideo.container.removeAttribute("data-hide-submenu");
+        }
+      });
       return button;
     },
     loop: function(){

embed/skins.js

@@ -109,12 +109,16 @@ svg.icon.timeout {
 .mistvideo[data-show-submenu] .mistvideo-submenu {
   right: 5px;
 }
+.mistvideo[data-hide-submenu] .mistvideo-submenu {
+  right: -1000px !important;
+}
 .mistvideo[data-show-submenu] .mistvideo-controls {
   bottom: 0;
 }
 .mistvideo-error[data-passive] {
   bottom: auto;
   left: auto;
+  height: auto;
   margin: 0.5em;
   padding: 0.5em;
 }

embed/skins/default.css

@@ -64,6 +64,7 @@ svg.icon.loading {
   cursor: default; /*cursor won't show up if it was hidden because the mousemove event can no longer reach the video element*/
   min-height: fit-content; /*overflow if needed*/
   min-width: fit-content;
+  height: 100%;
 }
 .mistvideo-error.show { display: flex; }
 .mistvideo-error .message { max-width: 80%; }