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] svg.icon.loading{z-index:2;opacity:1}
[data-loading-css] .mistvideo-controls{display:none} [data-loading-css] .mistvideo-controls{display:none}
[data-hidecursor],[data-hidecursor] *,[data-hidecursor] .mistvideo-pointer{cursor: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.show{display:flex}
.mistvideo-error .message{max-width:80%} .mistvideo-error .message{max-width:80%}
.mistvideo-error .message .details table{text-align:left} .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{display:inline-block;position:relative;width:25px;height:25px}
.mistvideo-polling svg.icon.loading{z-index:0;opacity:1} .mistvideo-polling svg.icon.loading{z-index:0;opacity:1}
.mistvideo[data-show-submenu] .mistvideo-submenu{right:5px} .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[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[data-passive] .message{max-width:none}
.mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center} .mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}
.mistvideo-error .mistvideo-buttoncontainer .mistvideo-button{white-space:nowrap} .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] svg.icon.loading{z-index:2;opacity:1}
[data-loading-css] .mistvideo-controls{display:none} [data-loading-css] .mistvideo-controls{display:none}
[data-hidecursor],[data-hidecursor] *,[data-hidecursor] .mistvideo-pointer{cursor: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.show{display:flex}
.mistvideo-error .message{max-width:80%} .mistvideo-error .message{max-width:80%}
.mistvideo-error .message .details table{text-align:left} .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{display:inline-block;position:relative;width:25px;height:25px}
.mistvideo-polling svg.icon.loading{z-index:0;opacity:1} .mistvideo-polling svg.icon.loading{z-index:0;opacity:1}
.mistvideo[data-show-submenu] .mistvideo-submenu{right:5px} .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[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[data-passive] .message{max-width:none}
.mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center} .mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}
.mistvideo-error .mistvideo-buttoncontainer .mistvideo-button{white-space:nowrap} .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. averagingSteps: 20, //the amount of measurements that are saved.
threshold: function(){ //returns the score threshold below which the "action" should be taken threshold: function(){ //returns the score threshold below which the "action" should be taken
if (this.MistVideo.source.type == "webrtc") { if (this.MistVideo.source.type == "webrtc") {
return 0.97; return 0.95;
} }
return 0.75; return 0.75;
}, },

14
embed/skins.js
View file

@ -306,6 +306,7 @@ MistSkins["default"] = {
//also do something useful //also do something useful
//show submenu //show submenu
MistVideo.container.setAttribute("data-show-submenu",""); MistVideo.container.setAttribute("data-show-submenu","");
MistVideo.container.removeAttribute("data-hide-submenu");
MistVideo.container.removeAttribute("data-hidecursor"); MistVideo.container.removeAttribute("data-hidecursor");
//onmouseout, hide submenu //onmouseout, hide submenu
var f = function(){ var f = function(){
@ -1200,8 +1201,19 @@ MistSkins["default"] = {
} }
}, },
settings: function(){ settings: function(){
var MistVideo = this;
var button = this.skin.icons.build("settings"); 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; return button;
}, },
loop: function(){ loop: function(){

4
embed/skins/default.css
View file

@ -109,12 +109,16 @@ svg.icon.timeout {
.mistvideo[data-show-submenu] .mistvideo-submenu { .mistvideo[data-show-submenu] .mistvideo-submenu {
right: 5px; right: 5px;
} }
.mistvideo[data-hide-submenu] .mistvideo-submenu {
right: -1000px !important;
}
.mistvideo[data-show-submenu] .mistvideo-controls { .mistvideo[data-show-submenu] .mistvideo-controls {
bottom: 0; bottom: 0;
} }
.mistvideo-error[data-passive] { .mistvideo-error[data-passive] {
bottom: auto; bottom: auto;
left: auto; left: auto;
height: auto;
margin: 0.5em; margin: 0.5em;
padding: 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*/ 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-height: fit-content; /*overflow if needed*/
min-width: fit-content; min-width: fit-content;
height: 100%;
} }
.mistvideo-error.show { display: flex; } .mistvideo-error.show { display: flex; }
.mistvideo-error .message { max-width: 80%; } .mistvideo-error .message { max-width: 80%; }