Embed: improved display of UI for small player widths

- increased "small player" threshold from 200 to 300px
- hide totalTime element when below threshold
- text-overflow: ellipsis for currentTime element, put content in title attribute

embed/min/skins/default.css

@@ -90,6 +90,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
 .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-currentTime{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .mistvideo-videobackground{position:absolute;width:100%;height:100%;z-index:-1;filter:blur(1cm)}
 .mistvideo-videobackground *{position:absolute;filter:opacity(0);transition:filter 0s 2s;width:100%;height:100%}
 .mistvideo-videobackground [data-front]{z-index:1;filter:opacity(1);transition:filter 2s}

embed/min/skins/dev.css

@@ -90,6 +90,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
 .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-currentTime{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .mistvideo-videobackground{position:absolute;width:100%;height:100%;z-index:-1;filter:blur(1cm)}
 .mistvideo-videobackground *{position:absolute;filter:opacity(0);transition:filter 0s 2s;width:100%;height:100%}
 .mistvideo-videobackground [data-front]{z-index:1;filter:opacity(1);transition:filter 2s}

embed/skins.js

@@ -83,7 +83,16 @@ MistSkins["default"] = {
               classes: ["mistvideo-pointer"]
             },
             {type: "currentTime"},
-            {type: "totalTime"},
+            {
+              if: function(){
+                //show the total time if the player size is larger than 300px
+                if (("size" in this) && (this.size.width > 300) || ((!this.info.hasVideo || (this.source.type.split("/")[1] == "audio")))) {
+                  return true;
+                }
+                return false;
+              },
+              then: {type: "totalTime"}
+            },
             {
               type: "container",
               classes: ["mistvideo-align-right"],
@@ -110,8 +119,8 @@ MistSkins["default"] = {
                 },
                 {
                   if: function(){
-                    //show the fullscreen and loop buttons here if the player size is larger than 200px
+                    //show the fullscreen and loop buttons here if the player size is larger than 300px
-                    if (("size" in this) && (this.size.width > 200) || ((!this.info.hasVideo || (this.source.type.split("/")[1] == "audio")))) {
+                    if (("size" in this) && (this.size.width > 300) || ((!this.info.hasVideo || (this.source.type.split("/")[1] == "audio")))) {
                       return true;
                     }
                     return false;
@@ -176,7 +185,7 @@ MistSkins["default"] = {
         {
           if: function(){
             //only show the fullscreen and loop buttons here if the player size is less than 200px
-            if (("size" in this) && (this.size.width <= 200)) {
+            if (("size" in this) && (this.size.width <= 300)) {
               return true;
             }
             return false;
@@ -611,7 +620,7 @@ MistSkins["default"] = {
         MistUtil.class.add(this.container,"hasControls");
         
         var container = this.UI.buildStructure(this.skin.structure.controls);
-        if (MistUtil.isTouchDevice()) {
+        if (MistUtil.isTouchDevice() && (this.size.width > 300)) {
           container.style.zoom = 1.5;
         }
         return container;
@@ -1172,6 +1181,7 @@ MistSkins["default"] = {
       container.set = function(){
         var v = MistVideo.player.api.currentTime;
         text.nodeValue = formatTime(v);
+        container.setAttribute("title",text.nodeValue);
       };
       container.set();
       

embed/skins/default.css

@@ -126,6 +126,11 @@ svg.icon.timeout {
 .mistvideo[data-show-submenu] .mistvideo-controls {
   bottom: 0;
 }
+.mistvideo-currentTime {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .mistvideo-videobackground {
   position: absolute;
   width: 100%;