Embed: tweak for non-touch: hide settings menu when gear icon is tapped (for mobile)

embed/min/skins/default.css

@@ -84,6 +84,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
 .mistvideo-secondaryVideo{z-index:1;position:absolute;right:0;top:0;width:50%;height:50%;max-width:fit-content;max-height:fit-content}
 .mistvideo-polling{display:inline-block;position:relative;width:25px;height:25px}
 .mistvideo-polling svg.icon.loading{z-index:0;opacity:1}
+.mistvideo:not([data-hide-submenu]) .mistvideo-hoverWindow:hover>svg.icon.settings .fill,.mistvideo[data-fullscreen] svg.icon.fullscreen .fill,.mistvideo[data-show-submenu] svg.icon.settings .fill{fill:$accent}
 .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}

embed/min/skins/dev.css

@@ -84,6 +84,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
 .mistvideo-secondaryVideo{z-index:1;position:absolute;right:0;top:0;width:50%;height:50%;max-width:fit-content;max-height:fit-content}
 .mistvideo-polling{display:inline-block;position:relative;width:25px;height:25px}
 .mistvideo-polling svg.icon.loading{z-index:0;opacity:1}
+.mistvideo:not([data-hide-submenu]) .mistvideo-hoverWindow:hover>svg.icon.settings .fill,.mistvideo[data-fullscreen] svg.icon.fullscreen .fill,.mistvideo[data-show-submenu] svg.icon.settings .fill{fill:$accent}
 .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}

embed/player.js

@@ -900,7 +900,7 @@ function MistVideo(streamName,options) {
     });
   }
   
-  if ("WebSocket" in window) {
+  if (false) { //if ("WebSocket" in window) {
     function openSocket() {
       MistVideo.log("Opening stream status stream..");
       var url = MistVideo.options.host.replace(/^http/i,"ws");

embed/skins.js

@@ -677,6 +677,8 @@ MistSkins["default"] = {
       var MistVideo = this;
       
       var button = this.skin.icons.build("fullscreen",16);
+      MistUtil.class.remove(button,"fullscreen");
+      MistUtil.class.add(button,"draggable-icon");
       container.appendChild(button);
       button.style.alignSelf = "flex-end";
       button.style.position = "absolute";
@@ -1204,9 +1206,14 @@ MistSkins["default"] = {
       var MistVideo = this;
       
       var button = this.skin.icons.build("settings");
+      
+      var touchmode = (typeof document.ontouchstart != "undefined");
+      
       MistUtil.event.addListener(button,"click",function(){
         if (MistVideo.container.hasAttribute("data-show-submenu")) {
+          if (touchmode) {
             MistVideo.container.setAttribute("data-hide-submenu",""); //don't show even when hovering
+          }
           MistVideo.container.removeAttribute("data-show-submenu");
         }
         else {

embed/skins/default.css

@@ -111,6 +111,12 @@ svg.icon.timeout {
   z-index: 0;
   opacity: 1;
 }
+.mistvideo:not([data-hide-submenu]) .mistvideo-hoverWindow:hover >svg.icon.settings .fill,
+.mistvideo[data-show-submenu] svg.icon.settings .fill,
+
+.mistvideo[data-fullscreen] svg.icon.fullscreen .fill {
+  fill: $accent;
+}
 .mistvideo[data-show-submenu] .mistvideo-submenu {
   right: 5px;
 }