Skip to content

Commit ca5eba2

Browse files
thoronwenThulinma
thoronwen
authored and
Thulinma
committed
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
1 parent 720f4b5 commit ca5eba2

6 files changed

Lines changed: 111 additions & 12 deletions

File tree

‎embed/min/player.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎embed/min/skins/default.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ svg.icon .spin,svg.icon.spin{animation:mistvideo-spin 1.5s infinite linear;trans
8080
.mistvideo-progress .bar{height:inherit;width:0;position:absolute;border-right:inherit;background-color:$accent;z-index:2;transition:width .2s}
8181
.mistvideo-progress .buffer{height:inherit;width:0;position:absolute;background-color:$semiFill}
8282
.mistvideo-progress .bar:after{content:'';border:5px solid $accent;border-radius:5px;position:absolute;right:-5px;top:50%;transform:translateY(-50%)}
83+
.mistvideo-progress .mistvideo-tooltip .mistvideo-realtime{text-align:center;display:block}
8384
.mistvideo-play[data-state=playing] svg.play{display:none}
8485
.mistvideo-play[data-state=paused] svg.pause{display:none}
8586
.mistvideo-main{align-items:center}
@@ -95,6 +96,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
9596
.mistvideo[data-hide-submenu] .mistvideo-submenu{right:-1000px!important}
9697
.mistvideo[data-show-submenu] .mistvideo-controls{bottom:0}
9798
.mistvideo-currentTime{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
99+
.mistvideo-currentTime .mistvideo-realtime,.mistvideo-progress .mistvideo-realtime{opacity:.6}
98100
.mistvideo-videobackground{position:absolute;width:100%;height:100%;z-index:-1;filter:blur(1cm)}
99101
.mistvideo-videobackground *{position:absolute;filter:opacity(0);transition:filter 0s 2s;width:100%;height:100%}
100102
.mistvideo-videobackground [data-front]{z-index:1;filter:opacity(1);transition:filter 2s}

‎embed/min/skins/dev.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ svg.icon .spin,svg.icon.spin{animation:mistvideo-spin 1.5s infinite linear;trans
8080
.mistvideo-progress .bar{height:inherit;width:0;position:absolute;border-right:inherit;background-color:$accent;z-index:2;transition:width .2s}
8181
.mistvideo-progress .buffer{height:inherit;width:0;position:absolute;background-color:$semiFill}
8282
.mistvideo-progress .bar:after{content:'';border:5px solid $accent;border-radius:5px;position:absolute;right:-5px;top:50%;transform:translateY(-50%)}
83+
.mistvideo-progress .mistvideo-tooltip .mistvideo-realtime{text-align:center;display:block}
8384
.mistvideo-play[data-state=playing] svg.play{display:none}
8485
.mistvideo-play[data-state=paused] svg.pause{display:none}
8586
.mistvideo-main{align-items:center}
@@ -95,6 +96,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
9596
.mistvideo[data-hide-submenu] .mistvideo-submenu{right:-1000px!important}
9697
.mistvideo[data-show-submenu] .mistvideo-controls{bottom:0}
9798
.mistvideo-currentTime{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
99+
.mistvideo-currentTime .mistvideo-realtime,.mistvideo-progress .mistvideo-realtime{opacity:.6}
98100
.mistvideo-videobackground{position:absolute;width:100%;height:100%;z-index:-1;filter:blur(1cm)}
99101
.mistvideo-videobackground *{position:absolute;filter:opacity(0);transition:filter 0s 2s;width:100%;height:100%}
100102
.mistvideo-videobackground [data-front]{z-index:1;filter:opacity(1);transition:filter 2s}

‎embed/skins.js‎

Lines changed: 96 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -913,7 +913,7 @@ MistSkins["default"] = {
913913

914914
//control video states
915915
container.getPos = function(e){
916-
var perc = MistUtil.getPos(this,e);
916+
var perc = isNaN(e) ? MistUtil.getPos(this,e) : e;
917917
if (MistVideo.info.type == "live") {
918918
//live mode: seek in DVR window
919919
var bufferWindow = getBufferWindow();
@@ -952,14 +952,8 @@ MistSkins["default"] = {
952952
return;
953953
}
954954

955-
if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
956-
tooltip.setText(MistUtil.format.ago(new Date(MistVideo.info.unixoffset + secs*1e3)));
957-
}
958-
else {
959-
tooltip.setText(MistUtil.format.time(secs));
960-
}
955+
tooltip.setDisplay(secs);
961956
tooltip.style.opacity = 1;
962-
963957

964958
var perc = MistUtil.getPos(this,e);// e.clientX - this.getBoundingClientRect().left;
965959
var pos = {bottom:20};
@@ -974,6 +968,51 @@ MistSkins["default"] = {
974968
}
975969
tooltip.setPos(pos);
976970
};
971+
var realtime = document.createElement("span");
972+
realtime.setAttribute("class","mistvideo-realtime");
973+
var realtimetext = document.createTextNode("");
974+
realtime.appendChild(realtimetext);
975+
976+
tooltip.setDisplay = function(secs){
977+
if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
978+
var range = container.getPos(1) - container.getPos(0); //seconds between start and end of seekbar
979+
var ago = new Date().getTime()*1e-3 - (MistVideo.info.unixoffset*1e-3 + container.getPos(1)); //seconds away from "live"
980+
var scale = Math.max(range,ago);
981+
982+
var str = "" ;
983+
if (MistVideo.info.type == "live") {
984+
if (scale < 60) {
985+
str = MistUtil.format.ago(new Date(MistVideo.info.unixoffset + secs*1e3));
986+
}
987+
else {
988+
var secsago = new Date().getTime()*1e-3 - (MistVideo.info.unixoffset*1e-3 + secs);
989+
if (secsago < 48*3600) {
990+
//also show a negative timestamp that indicates how long ago this was
991+
str += " - "+MistUtil.format.time(secsago);
992+
}
993+
}
994+
}
995+
else {
996+
str += MistUtil.format.time(secs);
997+
}
998+
if (scale >= 60) {
999+
//show when this was
1000+
realtimetext.nodeValue = " at "+MistUtil.format.ago(new Date(MistVideo.info.unixoffset + secs*1e3),scale*1e3);
1001+
var f = document.createDocumentFragment();
1002+
f.appendChild(document.createTextNode(str));
1003+
f.appendChild(realtime);
1004+
tooltip.setHtml(f);
1005+
}
1006+
else {
1007+
realtimetext.nodeValue = "";
1008+
tooltip.setText(str);
1009+
}
1010+
1011+
}
1012+
else {
1013+
tooltip.setText(MistUtil.format.time(secs));
1014+
}
1015+
};
9771016
MistUtil.event.addListener(margincontainer,"mousemove",function(e){
9781017
container.moveTooltip(e);
9791018
});
@@ -1256,7 +1295,12 @@ MistSkins["default"] = {
12561295

12571296
var container = document.createElement("div");
12581297
var text = document.createTextNode("");
1298+
var realtime = document.createElement("span");
1299+
realtime.setAttribute("class","mistvideo-realtime");
12591300
container.appendChild(text);
1301+
container.appendChild(realtime);
1302+
var realtimetext = document.createTextNode("");
1303+
realtime.appendChild(realtimetext);
12601304

12611305
var video = MistVideo.player.api;
12621306
var formatTime = MistUtil.format.time;
@@ -1265,7 +1309,26 @@ MistSkins["default"] = {
12651309
var t;
12661310
if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
12671311
var d = new Date(MistVideo.info.unixoffset + v*1e3);
1268-
t = MistUtil.format.ago(d);
1312+
var ago = new Date() - d;
1313+
realtimetext.nodeValue = "";
1314+
if (MistVideo.info.type == "live") {
1315+
if (ago < 60e3){
1316+
t = MistUtil.format.ago(d);
1317+
}
1318+
else if (ago < 12*3600e3) {
1319+
//show a negative time stamp
1320+
t = "- " + MistUtil.format.time(ago*1e-3);
1321+
}
1322+
else {
1323+
t = MistUtil.format.ago(d);
1324+
}
1325+
}
1326+
else {
1327+
t = formatTime(v);
1328+
if ((ago > 60e3) && (MistVideo.size.width >= 600)) {
1329+
realtimetext.nodeValue = " (at "+MistUtil.format.ago(d)+")";
1330+
}
1331+
}
12691332
container.setAttribute("title",MistUtil.format.ago(d,34560e6));
12701333
}
12711334
else {
@@ -1306,7 +1369,7 @@ MistSkins["default"] = {
13061369
}
13071370
this.style.display = "";
13081371

1309-
if (MistVideo.options.useDateTime && MistVideo.info && MistVideo.info.unixoffset) {
1372+
if (MistVideo.options.useDateTime && MistVideo.info && ((MistVideo.info.type == "live") && MistVideo.info.unixoffset)) {
13101373
var t = new Date(duration*1e3 + MistVideo.info.unixoffset)
13111374
text.nodeValue = MistUtil.format.ago(t);
13121375
container.setAttribute("title",MistUtil.format.ago(t,34560e6)); //format as if more than a year ago
@@ -2222,12 +2285,34 @@ MistSkins["default"] = {
22222285
},
22232286
tooltip: function(){
22242287
var container = document.createElement("div");
2225-
2288+
2289+
var mode = "text";
22262290
var textNode = document.createTextNode("");
22272291
container.appendChild(textNode);
22282292
container.setText = function(text){
22292293
textNode.nodeValue = text;
2294+
if (mode != "text") {
2295+
container.removeChild(htmlNode);
2296+
container.appendChild(textNode);
2297+
mode = "text";
2298+
}
22302299
};
2300+
var htmlNode = document.createElement("div");
2301+
htmlNode.empty = function(){
2302+
htmlNode.innerText = "";
2303+
for (var i = htmlNode.children.length - 1; i >= 0; i--) {
2304+
htmlNode.removeChild(htmlNode.children[i]);
2305+
}
2306+
};
2307+
container.setHtml = function(ele){
2308+
htmlNode.empty();
2309+
htmlNode.appendChild(ele);
2310+
if (mode != "html") {
2311+
container.removeChild(textNode);
2312+
container.appendChild(htmlNode);
2313+
mode = "html";
2314+
}
2315+
}
22312316

22322317
var triangle = document.createElement("div");
22332318
container.triangle = triangle;

‎embed/skins/default.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@
8080
top: 50%;
8181
transform: translateY(-50%);
8282
}
83+
.mistvideo-progress .mistvideo-tooltip .mistvideo-realtime {
84+
text-align: center;
85+
display: block;
86+
}
8387

8488
.mistvideo-play[data-state="playing"] svg.play {
8589
display: none;
@@ -155,6 +159,10 @@ svg.icon.timeout {
155159
overflow: hidden;
156160
text-overflow: ellipsis;
157161
}
162+
.mistvideo-currentTime .mistvideo-realtime,
163+
.mistvideo-progress .mistvideo-realtime {
164+
opacity: 0.6;
165+
}
158166
.mistvideo-videobackground {
159167
position: absolute;
160168
width: 100%;

‎embed/util.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ var MistUtil = {
3737
//format a date nicely depending on how long ago it was
3838
//if the range param [ms] is specified, use that to choose how to format the date string
3939

40+
if (isNaN(date.getTime())) { return ""; }
41+
4042
var ago = range ? range : new Date().getTime() - date.getTime();
4143
var out = "";
4244
var negative = (ago < 0);

0 commit comments

Comments
 (0)