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

Embed: improved display of UI for small player widths

Browse source 
- 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
This commit is contained in:
Cat 2021-08-11 10:43:23 +02:00 • committed by Thulinma
parent 124ae55037
commit a73a3f4ecd
5 changed files with 23 additions and 6 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

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

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

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

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

20
embed/skins.js
View file

@ -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
if (("size" in this) && (this.size.width > 200) || ((!this.info.hasVideo || (this.source.type.split("/")[1] == "audio")))) {
//show the fullscreen and loop buttons here 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;
@ -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();

5
embed/skins/default.css
View file

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