Embed: fake fullscreen mode for when the fullscreen api is not available

embed/min/skins/default.css

@@ -21,7 +21,7 @@ select>option{background-color:$background}
 0%{transform:rotate(0)}
 100%{transform:rotate(360deg)}
 }
-[data-fullscreen]{position:fixed;top:0;left:0;right:0;bottom:0;width:100%!important;height:100%!important}
+[data-fullscreen]{position:fixed;top:0;left:0;right:0;bottom:0;width:100%!important;height:100%!important;background-color:#111!important;z-index:999}
 video{display:block;flex-shrink:0}
 table{color:inherit;font-size:inherit;font-style:inherit}
 audio:not([controls]){display:block!important}

embed/min/skins/dev.css

@@ -21,7 +21,7 @@ select>option{background-color:$background}
 0%{transform:rotate(0)}
 100%{transform:rotate(360deg)}
 }
-[data-fullscreen]{position:fixed;top:0;left:0;right:0;bottom:0;width:100%!important;height:100%!important}
+[data-fullscreen]{position:fixed;top:0;left:0;right:0;bottom:0;width:100%!important;height:100%!important;background-color:#111!important;z-index:999}
 video{display:block;flex-shrink:0}
 table{color:inherit;font-size:inherit;font-style:inherit}
 audio:not([controls]){display:block!important}
@@ -115,6 +115,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
 .mistvideo-decodingIssues>*>:last-child{margin-right:.5em}
 .mistvideo-decodingIssues{display:flex;flex-flow:row wrap;justify-content:space-between}
 .mistvideo-decodingIssues label{position:relative}
+.mistvideo-decodingIssues label .mistvideo-description{font-size:.9em}
 .mistvideo-decodingIssues label .value{font-size:.8em}
 svg.icon.graph{position:absolute;right:0;top:0;bottom:0;width:6em}
 select{border-radius:0}

embed/skins.js

@@ -1282,40 +1282,70 @@ MistSkins["default"] = {
     fullscreen: function(){
       if ((!("setSize" in this.player)) || (!this.info.hasVideo) || (this.source.type.split("/")[1] == "audio")) { return; }
       
+      var MistVideo = this;
+      
       //determine which functions to use.. 
       var requestfuncs = ["requestFullscreen","webkitRequestFullscreen","mozRequestFullScreen","msRequestFullscreen"];
       var funcs = false;
       for (var i in requestfuncs) {
         if (requestfuncs[i] in document.body) {
           funcs = {};
-          funcs.request = requestfuncs[i];
+          funcs.request = function(){ return MistVideo.container[requestfuncs[i]](); }
           
           var cancelfuncs = ["exitFullscreen","webkitCancelFullScreen","mozCancelFullScreen","msExitFullscreen"];
           var elementfuncs = ["fullscreenElement","webkitFullscreenElement","mozFullScreenElement","msFullscreenElement"];
           var eventname = ["fullscreenchange","webkitfullscreenchange","mozfullscreenchange","MSFullscreenChange"];
-          funcs.cancel = cancelfuncs[i];
+          funcs.cancel = function() { return document[cancelfuncs[i]](); };
-          funcs.element = elementfuncs[i];
+          funcs.element = function() { return document[elementfuncs[i]]; };
           funcs.event = eventname[i];
           break;
         }
       }
-      if (!funcs) { return;}
+      if (!funcs) {
+        //fake fullscreen mode!
+        funcs = {
+          request: "fakeRequestFullScreen",
+          cancel: "fakeCancelFullScreen",
+          element: "fakeFullScreenElement",
+          event: "fakefullscreenchange"
+        };
+        var keydownfunc = function(e){
+          switch (e.key) {
+            case "Escape": {
+              funcs.cancel();
+              break;
+            }
+          }
+        };
+        funcs.request = function(){
+          funcs.element = function(){ return MistVideo.container; };
+          MistUtil.event.send(funcs.event,null,document);
+          document.addEventListener("keydown",keydownfunc);
+          return true;
+        }
+        funcs.cancel = function(){
+          funcs.element = function(){ return null; }
+          document.removeEventListener("keydown",keydownfunc);
+          MistUtil.event.send(funcs.event,null,document);
+          return true;
+        }
+        funcs.element = function(){ return null; }
+      }
       
       var button = this.skin.icons.build("fullscreen");
-      var MistVideo = this;
       
       function onclick(){
-        if (document[funcs.element]) {
+        if (funcs.element()) {
-          document[funcs.cancel]();
+          funcs.cancel();
         }
         else {
-          MistVideo.container[funcs.request]();
+          funcs.request();
         }
       }
       MistUtil.event.addListener(button,"click",onclick);
       MistUtil.event.addListener(MistVideo.video,"dblclick",onclick);
       MistUtil.event.addListener(document,funcs.event, function() {
-        if (document[funcs.element] == MistVideo.container) {
+        if (funcs.element() == MistVideo.container) {
           MistVideo.container.setAttribute("data-fullscreen","");
         }
         else if (MistVideo.container.hasAttribute("data-fullscreen")) {
@@ -2377,7 +2407,7 @@ MistSkins.dev = {
                     var r = [];
                     for (var i in result) {
                       if (result[i]) {
-                        r.push(i[0]+Math.round(result[i]*1e3));
+                        r.push(i[0]+":"+Math.round(result[i]*1e3));
                       }
                     }
                     if (r.length) { resolve(r.join(" ")); }

embed/skins/dev.css

@@ -68,6 +68,9 @@
 .mistvideo-decodingIssues label {
   position: relative;
 }
+.mistvideo-decodingIssues label .mistvideo-description {
+  font-size: 0.9em;
+}
 .mistvideo-decodingIssues label .value {
   font-size: 0.8em;
 }

embed/skins/general.css

@@ -112,6 +112,8 @@ select > option {
   bottom: 0;
   width: 100% !important;
   height: 100% !important;
+  background-color: #111 !important;
+  z-index: 999;
 }
 video {
   display: block;