Skip to content

Commit

Permalink
Embed: unixoffset: display negative timeoffset when <48h in the seekb…
Browse files Browse the repository at this point in the history 
…ar, <12h on the currentTime counter and use the same time formatting for the full seekbar
  • Loading branch information
@thoronwen @m1tk4
thoronwen authored and m1tk4 committed Jun 15, 2024
1 parent cad8470 commit e0cd658
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 12 deletions.
2 changes: 1 addition & 1 deletion embed/min/player.js
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions embed/min/skins/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down
2 changes: 2 additions & 0 deletions embed/min/skins/dev.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down
107 changes: 96 additions & 11 deletions embed/skins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -952,14 +952,8 @@ MistSkins["default"] = {
return;
}

if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
tooltip.setText(MistUtil.format.ago(new Date(MistVideo.info.unixoffset + secs*1e3)));
}
else {
tooltip.setText(MistUtil.format.time(secs));
}
tooltip.setDisplay(secs);
tooltip.style.opacity = 1;


var perc = MistUtil.getPos(this,e);// e.clientX - this.getBoundingClientRect().left;
var pos = {bottom:20};
Expand All @@ -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);
});
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions embed/skins/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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%;
Expand Down
2 changes: 2 additions & 0 deletions embed/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit e0cd658

Please sign in to comment.