hydrar/mistserver
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Cat 2023-12-07 14:55:51 +01:00 • committed by Thulinma
parent 720f4b5d05
commit ca5eba2e92
6 changed files with 111 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
embed/min/player.js
View file

File diff suppressed because one or more lines are too long

2
embed/min/skins/default.css
View file

@ -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}

2
embed/min/skins/dev.css
View file

@ -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}

107
embed/skins.js
View file

@ -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.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};
@ -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;

8
embed/skins/default.css
View file

@ -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%;

2
embed/util.js
View file

@ -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);