Embed: unixoffset: display negative timeoffset when <48h in the seekbar, <12h on the currentTime counter and use the same time formatting for the full seekbar

embed/min/skins/default.css

@@ -80,6 +80,7 @@ svg.icon .spin,svg.icon.spin{animation:mistvideo-spin 1.5s infinite linear;trans
 .mistvideo-progress .bar{height:inherit;width:0;position:absolute;border-right:inherit;background-color:$accent;z-index:2;transition:width .2s}
 .mistvideo-progress .buffer{height:inherit;width:0;position:absolute;background-color:$semiFill}
 .mistvideo-progress .bar:after{content:'';border:5px solid $accent;border-radius:5px;position:absolute;right:-5px;top:50%;transform:translateY(-50%)}
+.mistvideo-progress .mistvideo-tooltip .mistvideo-realtime{text-align:center;display:block}
 .mistvideo-play[data-state=playing] svg.play{display:none}
 .mistvideo-play[data-state=paused] svg.pause{display:none}
 .mistvideo-main{align-items:center}
@@ -95,6 +96,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
 .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-currentTime .mistvideo-realtime,.mistvideo-progress .mistvideo-realtime{opacity:.6}
 .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

@@ -80,6 +80,7 @@ svg.icon .spin,svg.icon.spin{animation:mistvideo-spin 1.5s infinite linear;trans
 .mistvideo-progress .bar{height:inherit;width:0;position:absolute;border-right:inherit;background-color:$accent;z-index:2;transition:width .2s}
 .mistvideo-progress .buffer{height:inherit;width:0;position:absolute;background-color:$semiFill}
 .mistvideo-progress .bar:after{content:'';border:5px solid $accent;border-radius:5px;position:absolute;right:-5px;top:50%;transform:translateY(-50%)}
+.mistvideo-progress .mistvideo-tooltip .mistvideo-realtime{text-align:center;display:block}
 .mistvideo-play[data-state=playing] svg.play{display:none}
 .mistvideo-play[data-state=paused] svg.pause{display:none}
 .mistvideo-main{align-items:center}
@@ -95,6 +96,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
 .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-currentTime .mistvideo-realtime,.mistvideo-progress .mistvideo-realtime{opacity:.6}
 .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

@@ -913,7 +913,7 @@ MistSkins["default"] = {
       
       //control video states
       container.getPos = function(e){
-        var perc = MistUtil.getPos(this,e);
+        var perc = isNaN(e) ? MistUtil.getPos(this,e) : e;
         if (MistVideo.info.type == "live") {
           //live mode: seek in DVR window
           var bufferWindow = getBufferWindow();
@@ -952,14 +952,8 @@ MistSkins["default"] = {
           return;
         }
         
-        if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
+        tooltip.setDisplay(secs);
-          tooltip.setText(MistUtil.format.ago(new Date(MistVideo.info.unixoffset + secs*1e3)));
-        }
-        else {
-          tooltip.setText(MistUtil.format.time(secs));
-        }
         tooltip.style.opacity = 1;
-
         
         var perc = MistUtil.getPos(this,e);// e.clientX - this.getBoundingClientRect().left;
         var pos = {bottom:20};
@@ -974,6 +968,51 @@ MistSkins["default"] = {
         }
         tooltip.setPos(pos);
       };
+      var realtime = document.createElement("span");
+      realtime.setAttribute("class","mistvideo-realtime");
+      var realtimetext = document.createTextNode("");
+      realtime.appendChild(realtimetext);
+
+      tooltip.setDisplay = function(secs){
+        if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
+          var range = container.getPos(1) - container.getPos(0); //seconds between start and end of seekbar
+          var ago = new Date().getTime()*1e-3 - (MistVideo.info.unixoffset*1e-3 + container.getPos(1)); //seconds away from "live"
+          var scale = Math.max(range,ago);
+
+          var str = "" ;
+          if (MistVideo.info.type == "live") {
+            if (scale < 60) {
+              str = MistUtil.format.ago(new Date(MistVideo.info.unixoffset + secs*1e3));
+            }
+            else {
+              var secsago = new Date().getTime()*1e-3 - (MistVideo.info.unixoffset*1e-3 + secs);
+              if (secsago < 48*3600) {
+                //also show a negative timestamp that indicates how long ago this was
+                str += " - "+MistUtil.format.time(secsago);
+              }
+            }
+          }
+          else {
+            str += MistUtil.format.time(secs);
+          }
+          if (scale >= 60) {
+            //show when this was
+            realtimetext.nodeValue = " at "+MistUtil.format.ago(new Date(MistVideo.info.unixoffset + secs*1e3),scale*1e3);
+            var f = document.createDocumentFragment();
+            f.appendChild(document.createTextNode(str));
+            f.appendChild(realtime);
+            tooltip.setHtml(f);
+          }
+          else {
+            realtimetext.nodeValue = "";
+            tooltip.setText(str);
+          }
+
+        }
+        else {
+          tooltip.setText(MistUtil.format.time(secs));
+        }
+      };
       MistUtil.event.addListener(margincontainer,"mousemove",function(e){
         container.moveTooltip(e);
       });
@@ -1256,7 +1295,12 @@ MistSkins["default"] = {
       
       var container = document.createElement("div");
       var text = document.createTextNode("");
+      var realtime = document.createElement("span");
+      realtime.setAttribute("class","mistvideo-realtime");
       container.appendChild(text);
+      container.appendChild(realtime);
+      var realtimetext = document.createTextNode("");
+      realtime.appendChild(realtimetext);
       
       var video = MistVideo.player.api;
       var formatTime = MistUtil.format.time;
@@ -1265,7 +1309,26 @@ MistSkins["default"] = {
         var t;
         if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
           var d = new Date(MistVideo.info.unixoffset + v*1e3);
-          t = MistUtil.format.ago(d);
+          var ago = new Date() - d;
+          realtimetext.nodeValue = "";
+          if (MistVideo.info.type == "live") {
+            if (ago < 60e3){
+              t = MistUtil.format.ago(d);
+            }
+            else if (ago < 12*3600e3) {
+              //show a negative time stamp
+              t = "- " + MistUtil.format.time(ago*1e-3);
+            }
+            else {
+              t = MistUtil.format.ago(d);
+            }
+          }
+          else {
+            t = formatTime(v);
+            if ((ago > 60e3) && (MistVideo.size.width >= 600)) {
+              realtimetext.nodeValue = " (at "+MistUtil.format.ago(d)+")";
+            }
+          }
           container.setAttribute("title",MistUtil.format.ago(d,34560e6));
         }
         else {
@@ -1306,7 +1369,7 @@ MistSkins["default"] = {
           }
           this.style.display = "";
 
-          if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
+          if (MistVideo.options.useDateTime && MistVideo.info && ((MistVideo.info.type == "live") && MistVideo.info.unixoffset)) {
             var t = new Date(duration*1e3 + MistVideo.info.unixoffset)
             text.nodeValue = MistUtil.format.ago(t);
             container.setAttribute("title",MistUtil.format.ago(t,34560e6)); //format as if more than a year ago
@@ -2222,12 +2285,34 @@ MistSkins["default"] = {
     },
     tooltip: function(){
       var container = document.createElement("div");
-      
+
+      var mode = "text";
       var textNode = document.createTextNode("");
       container.appendChild(textNode);
       container.setText = function(text){
         textNode.nodeValue = text;
+        if (mode != "text") {
+          container.removeChild(htmlNode);
+          container.appendChild(textNode);
+          mode = "text";
+        }
       };
+      var htmlNode = document.createElement("div");
+      htmlNode.empty = function(){
+        htmlNode.innerText = "";
+        for (var i = htmlNode.children.length - 1; i >= 0; i--) {
+          htmlNode.removeChild(htmlNode.children[i]);
+        }
+      };
+      container.setHtml = function(ele){
+        htmlNode.empty();
+        htmlNode.appendChild(ele);
+        if (mode != "html") {
+          container.removeChild(textNode);
+          container.appendChild(htmlNode);
+          mode = "html";
+        }
+      }
       
       var triangle = document.createElement("div");
       container.triangle = triangle;

embed/skins/default.css

@@ -80,6 +80,10 @@
   top: 50%;
   transform: translateY(-50%);
 }
+.mistvideo-progress .mistvideo-tooltip .mistvideo-realtime {
+  text-align: center;
+  display: block;
+}
 
 .mistvideo-play[data-state="playing"] svg.play {
   display: none;
@@ -155,6 +159,10 @@ svg.icon.timeout {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.mistvideo-currentTime .mistvideo-realtime,
+.mistvideo-progress .mistvideo-realtime {
+  opacity: 0.6;
+}
 .mistvideo-videobackground {
   position: absolute;
   width: 100%;

embed/util.js

@@ -37,6 +37,8 @@ var MistUtil = {
       //format a date nicely depending on how long ago it was
       //if the range param [ms] is specified, use that to choose how to format the date string
 
+      if (isNaN(date.getTime())) { return ""; }
+
       var ago = range ? range : new Date().getTime() - date.getTime();
       var out = "";
       var negative = (ago < 0);