Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improvement feature circle discussion (#977)

Browse source 
* Improvment circle discussion
 - Change to lissen start event of WebRTC connection

* Update help allow navigator and waring message
 - Show warning message.
 - Use help camera allow setting to show modal and help user.
 - Change feature to show the modal only when user have need the information on allow navigator access

* Create soud for video discussion
This commit is contained in:
grégoire parant 2021-05-05 01:49:04 +02:00 • committed by GitHub
parent 83159a121f
commit 71eb3f3b69
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 434 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

2
front/dist/resources/html/EnableCameraScene.html vendored
View file

@ -48,7 +48,7 @@
text-align: center;
margin: 0;
position: absolute;
top: 44vh;
top: 40vh;
width: 100%;
}
#enableCameraScene button {

7
front/dist/resources/html/helpCameraSettings.html vendored
View file

@ -60,6 +60,9 @@
font-size: 8px;
margin: 0px 20px;
}
#helpCameraSettings section p a{
font-size: 8px;
}
#helpCameraSettings section p.err{
color: #ff0000;
}
@ -95,6 +98,10 @@
<p>If you prefer to continue without allowing camera and microphone access, click on Continue</p>
<p id='browserHelpSetting'></p>
</section>
<!--<section class="text-center">
<p>If your problem persist, please contact us: <a id="mailto" href="mailto:workadventure@thecodingmachine.com?subject=Support camera and microphone settings" target="_blank"> workadventure@thecodingmachine.com</a>.</p>
</section>-->
</section>
<section class="action">
<a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
<button type="submit" id="helpCameraSettingsFormContinue">Continue</button>

18
front/dist/resources/style/mobile-style.scss vendored
View file

@ -23,27 +23,17 @@
}
.btn-cam-action {
min-width: 150px;
&:hover{
transform: translateY(20px);
}
div {
margin: 0 1%;
&:hover {
background-color: #666;
}
bottom: 30px;
&.btn-micro {
right: 0;
}
&.btn-monitor {
right: 130px;
}
&.btn-video {
right: 65px;
}
margin-bottom: 30px;
}
}

94
front/dist/resources/style/style.css vendored
View file

@ -98,7 +98,7 @@ body .message-info.warning{
}
.video-container button.report:hover {
width: 150px;
width: 160px;
}
.video-container button.report img{
@ -126,6 +126,7 @@ body .message-info.warning{
.video-container video{
height: 100%;
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
}
.video-container video:focus{
@ -141,7 +142,7 @@ body .message-info.warning{
right: 15px;
bottom: 30px;
border-radius: 15px 15px 15px 15px;
max-height: 200px;
max-height: 20%;
}
video#myCamVideo{
@ -153,19 +154,60 @@ video#myCamVideo{
/*height: 113px;*/
}
.sound-progress{
display: none;
position: absolute;
right: 14px;
top: calc(50% - 5px);
}
.sound-progress.active{
display: table-column;
}
.sound-progress span{
position: absolute;
color: black;
background-color: #00000020;
width: 5px;
height: 5px;
border-radius: 50%;
}
.sound-progress span.active{
background-color: #00c3ff66
}
.sound-progress span:nth-child(1){
top: calc(50% + 20px);
}
.sound-progress span:nth-child(2){
top: calc(50% + 10px);
}
.sound-progress span:nth-child(3){
top: calc(50% - 0px);
}
.sound-progress span:nth-child(4){
top: calc(50% - 10px);
}
.sound-progress span:nth-child(5){
top: calc(50% - 20px);
}
.btn-cam-action {
pointer-events: all;
position: absolute;
bottom: 0px;
right: 0px;
width: 450px;
height: 150px;
display: inline-flex;
bottom: 10px;
right: 15px;
width: 15vw;
height: 40px;
text-align: center;
align-content: center;
align-items: center;
justify-content: center;
justify-items: center;
}
/*btn animation*/
.btn-cam-action div{
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
position: absolute;
/*position: absolute;*/
border: solid 0px black;
width: 44px;
height: 44px;
@ -174,7 +216,8 @@ video#myCamVideo{
border-radius: 48px;
transform: translateY(20px);
transition-timing-function: ease-in-out;
bottom: 20px;
margin-bottom: 20px;
margin: 0 4%;
}
.btn-cam-action div.disabled {
background: #d75555;
@ -193,17 +236,17 @@ video#myCamVideo{
.btn-micro{
pointer-events: auto;
transition: all .3s;
right: 44px;
/*right: 44px;*/
}
.btn-video{
pointer-events: auto;
transition: all .25s;
right: 134px;
/*right: 134px;*/
}
.btn-monitor{
pointer-events: auto;
transition: all .2s;
right: 224px;
/*right: 224px;*/
}
.btn-copy{
pointer-events: auto;
@ -497,7 +540,7 @@ input[type=range]:focus::-ms-fill-upper {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
pointer-events: all;
/* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */
}
@ -533,7 +576,7 @@ input[type=range]:focus::-ms-fill-upper {
.sidebar {
flex: 0 0 25%;
display: flex;
pointer-events: none;
pointer-events: all;
}
.sidebar > div {
@ -547,6 +590,10 @@ input[type=range]:focus::-ms-fill-upper {
margin: 0%;
}
.sidebar > div video {
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
}
/* Let's make sure videos are vertically centered if they need to be cropped */
.media-container {
display: flex;
@ -1111,17 +1158,34 @@ div.action{
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
div.action.info,
div.action.warning,
div.action.danger{
transition: all 1s ease;
animation: mymove 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
div.action p.action-body{
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
padding: 10px;
background-color: #2d2d2dba;
color: #fff;
font-size: 14px;
font-weight: 500;
text-align: center;
max-width: 250px;
margin-left: calc(50% - 125px);
max-width: 350px;
margin-left: calc(50% - 175px);
border-radius: 15px;
}
div.action.warning p.action-body{
background-color: #ff9800eb;
color: #000;
}
div.action.danger p.action-body{
background-color: #da0000e3;
color: #000;
}
.popUpElement{
font-family: 'Press Start 2P';
text-align: left;