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

Embed: hide settings menu when gear icon is tapped (for mobile)

Browse source
This commit is contained in:
Cat 2020-07-17 12:00:31 +02:00 • committed by Thulinma
parent 4d94bf78a8
commit 20bf01d911
7 changed files with 26 additions and 7 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

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

@ -8,7 +8,7 @@ svg.icon.loading{z-index:-1;position:absolute;top:0;left:0;right:0;bottom:0;marg
[data-loading] svg.icon.loading{z-index:2;opacity:1}
[data-loading-css] .mistvideo-controls{display:none}
[data-hidecursor],[data-hidecursor] *,[data-hidecursor] .mistvideo-pointer{cursor:none}
.mistvideo-error{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background-color:$background;align-items:center;justify-content:center;text-align:center;z-index:2;cursor:default;min-height:fit-content;min-width:fit-content}
.mistvideo-error{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background-color:$background;align-items:center;justify-content:center;text-align:center;z-index:2;cursor:default;min-height:fit-content;min-width:fit-content;height:100%}
.mistvideo-error.show{display:flex}
.mistvideo-error .message{max-width:80%}
.mistvideo-error .message .details table{text-align:left}
@ -84,8 +84,9 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
.mistvideo-polling{display:inline-block;position:relative;width:25px;height:25px}
.mistvideo-polling svg.icon.loading{z-index:0;opacity:1}
.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-error[data-passive]{bottom:auto;left:auto;margin:.5em;padding:.5em}
.mistvideo-error[data-passive]{bottom:auto;left:auto;height:auto;margin:.5em;padding:.5em}
.mistvideo-error[data-passive] .message{max-width:none}
.mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}
.mistvideo-error .mistvideo-buttoncontainer .mistvideo-button{white-space:nowrap}

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

@ -8,7 +8,7 @@ svg.icon.loading{z-index:-1;position:absolute;top:0;left:0;right:0;bottom:0;marg
[data-loading] svg.icon.loading{z-index:2;opacity:1}
[data-loading-css] .mistvideo-controls{display:none}
[data-hidecursor],[data-hidecursor] *,[data-hidecursor] .mistvideo-pointer{cursor:none}
.mistvideo-error{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background-color:$background;align-items:center;justify-content:center;text-align:center;z-index:2;cursor:default;min-height:fit-content;min-width:fit-content}
.mistvideo-error{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background-color:$background;align-items:center;justify-content:center;text-align:center;z-index:2;cursor:default;min-height:fit-content;min-width:fit-content;height:100%}
.mistvideo-error.show{display:flex}
.mistvideo-error .message{max-width:80%}
.mistvideo-error .message .details table{text-align:left}
@ -84,8 +84,9 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
.mistvideo-polling{display:inline-block;position:relative;width:25px;height:25px}
.mistvideo-polling svg.icon.loading{z-index:0;opacity:1}
.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-error[data-passive]{bottom:auto;left:auto;margin:.5em;padding:.5em}
.mistvideo-error[data-passive]{bottom:auto;left:auto;height:auto;margin:.5em;padding:.5em}
.mistvideo-error[data-passive] .message{max-width:none}
.mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}
.mistvideo-error .mistvideo-buttoncontainer .mistvideo-button{white-space:nowrap}

2
embed/player.js
View file

@ -402,7 +402,7 @@ function MistVideo(streamName,options) {
averagingSteps: 20, //the amount of measurements that are saved.
threshold: function(){ //returns the score threshold below which the "action" should be taken
if (this.MistVideo.source.type == "webrtc") {
return 0.97;
return 0.95;
}
return 0.75;
},

14
embed/skins.js
View file

@ -306,6 +306,7 @@ MistSkins["default"] = {
//also do something useful
//show submenu
MistVideo.container.setAttribute("data-show-submenu","");
MistVideo.container.removeAttribute("data-hide-submenu");
MistVideo.container.removeAttribute("data-hidecursor");
//onmouseout, hide submenu
var f = function(){
@ -1200,8 +1201,19 @@ MistSkins["default"] = {
}
},
settings: function(){
var MistVideo = this;
var button = this.skin.icons.build("settings");
button.setAttribute("onclick","");
MistUtil.event.addListener(button,"click",function(){
if (MistVideo.container.hasAttribute("data-show-submenu")) {
MistVideo.container.setAttribute("data-hide-submenu",""); //don't show even when hovering
MistVideo.container.removeAttribute("data-show-submenu");
}
else {
MistVideo.container.setAttribute("data-show-submenu","");
MistVideo.container.removeAttribute("data-hide-submenu");
}
});
return button;
},
loop: function(){

4
embed/skins/default.css
View file

@ -109,12 +109,16 @@ svg.icon.timeout {
.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-error[data-passive] {
bottom: auto;
left: auto;
height: auto;
margin: 0.5em;
padding: 0.5em;
}

1
embed/skins/general.css
View file

@ -64,6 +64,7 @@ svg.icon.loading {
cursor: default; /*cursor won't show up if it was hidden because the mousemove event can no longer reach the video element*/
min-height: fit-content; /*overflow if needed*/
min-width: fit-content;
height: 100%;
}
.mistvideo-error.show { display: flex; }
.mistvideo-error .message { max-width: 80%; }