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

Update video style and start peer connexion

Browse source
This commit is contained in:
gparant 2020-05-01 21:15:00 +02:00
parent dbf0bef149
commit e06b20fe96
7 changed files with 140 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

2
front/dist/index.html vendored
View file

@ -12,8 +12,6 @@
<script src="bundle.js"></script>
<div id="webRtc" class="webrtc">
<div id="activeCam" class="activeCam">
</div>
<div id="myCam" class="myCam">
<video id="myCamVideo" autoplay></video>
</div>
<div class="btn-cam-action active">

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

@ -1,77 +1,44 @@
.webrtc{
display: none;
position: absolute;
right: 0px;
height: 100%;
width: 300px;
}
.webrtc.active{
display: block;
}
.webrtc, .activeCam{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
}
.webrtc, .activeCam{}
.activeCam video{
position: absolute;
width: 100%;
height: 100%;
width: 300px;
height: 20%;
top: 10px;
right: 10px;
margin: 5px;
background-color: white;
}
.activeCam video#myCamVideo{
width: 200px;
height: 100px;
}
/*CSS size for 2 - 3 elements*/
video:nth-child(1):nth-last-child(3),
video:nth-child(2):nth-last-child(2),
video:nth-child(3):nth-last-child(1),
video:nth-child(1):nth-last-child(2),
video:nth-child(2):nth-last-child(1){
width: 50%;
.activeCam video:nth-child(1){
/*this is for camera of user*/
top: 75%;
}
video:nth-child(1):nth-last-child(3),
video:nth-child(2):nth-last-child(2),
video:nth-child(3):nth-last-child(1){
height: 50%;
.activeCam video:nth-child(2){
top: 0%;
}
/*CSS position for 2 elements*/
video:nth-child(1):nth-last-child(2){
left: 0;
.activeCam video:nth-child(3){
top: 25%;
}
video:nth-child(2):nth-last-child(1){
left: 50%;
}
/*CSS position for 3 elements*/
video:nth-child(1):nth-last-child(3){
top: 0;
left: 0;
}
video:nth-child(2):nth-last-child(2){
top: 0;
left: 50%;
}
video:nth-child(3):nth-last-child(1) {
.activeCam video:nth-child(4) {
top: 50%;
left: 25%;
}
.myCam{
height: 200px;
width: 300px;
position: absolute;
right: 10px;
background: black;
border: none;
bottom: 20px;
max-height: 17%;
max-width: 17%;
opacity: 1;
display: block;
transition: opacity 1s;
}
.myCam video{
width: 100%;
height: 100%;
}
/*btn animation*/
.btn-cam-action div{
cursor: pointer;
position: absolute;
@ -79,14 +46,14 @@ video:nth-child(3):nth-last-child(1) {
width: 64px;
height: 64px;
background: #666;
left: 6vw;
box-shadow: 2px 2px 24px #444;
border-radius: 48px;
transform: translateX(calc(-6vw - 96px));
transform: translateY(12vw);
transition-timing-function: ease-in-out;
bottom: 20px;
}
.webrtc:hover .btn-cam-action.active div{
transform: translateX(0);
transform: translateY(0);
}
.btn-cam-action div:hover{
background: #407cf7;
@ -94,16 +61,16 @@ video:nth-child(3):nth-last-child(1) {
transition: 280ms;
}
.btn-micro{
bottom: 277px;
transition: all .3s;
left: 168px;
}
.btn-video{
bottom: 177px;
transition: all .2s;
left: 84px;
}
.btn-call{
bottom: 77px;
transition: all .1s;
left: 0px;
}
.btn-cam-action div img{
height: 32px;
@ -112,6 +79,8 @@ video:nth-child(3):nth-last-child(1) {
left: calc(48px - 35px);
position: relative;
}
/*Phone Animation*/
.phone-open{
position: absolute;
border-radius: 50%;
@ -136,7 +105,6 @@ video:nth-child(3):nth-last-child(1) {
animation: none;
cursor: pointer;
}
@keyframes phone-move {
0% {
left: calc(50% - 70px);