Adding CoWebsiteManager + first working version of flex video
This commit is contained in:
David Négrier
parent
83fe024c45
commit
9f6c6e0ce1
6 changed files with 326 additions and 51 deletions
52
front/dist/index.html
vendored
52
front/dist/index.html
vendored
|
|
@ -39,7 +39,53 @@
|
|||
<title>WorkAdventure</title>
|
||||
</head>
|
||||
<body id="body" style="margin: 0">
|
||||
<div id="webRtc" class="webrtc">
|
||||
<div class="main-container">
|
||||
<div id="game" class="game" style="/*background: red;*/">
|
||||
<div id="game-overlay" class="game-overlay" style="/*background: violet*/;">
|
||||
<div id="main-section" class="main-section">
|
||||
<!--<div style="background: lightpink;">a</div>
|
||||
<div style="background: lightpink;">a</div> -->
|
||||
</div>
|
||||
<aside id="sidebar" class="sidebar">
|
||||
<!--<div style="background: lightgreen;">a</div>
|
||||
<div style="background: green;">b</div>
|
||||
<div style="background: darkgreen;">c</div>
|
||||
<div style="background: darkgreen;">d</div>-->
|
||||
</aside>
|
||||
<div id="chat-mode" class="chat-mode three-col" style="display: none;">
|
||||
<!--<div style="background: lightgreen;">a</div>
|
||||
<div style="background: green;">b</div>
|
||||
<div style="background: darkgreen;">c</div>
|
||||
<div style="background: darkolivegreen;">d</div>
|
||||
<div style="background: darkolivegreen;">d</div>
|
||||
<div style="background: darkgreen;">c</div>
|
||||
<div style="background: green;">b</div>
|
||||
<div style="background: lightgreen;">last elem for game</div>-->
|
||||
</div>
|
||||
|
||||
|
||||
<div id="activeCam" class="activeCam">
|
||||
<div id="div-myCamVideo" class="video-container">
|
||||
<video id="myCamVideo" autoplay muted></video>
|
||||
</div>
|
||||
<div class="btn-cam-action">
|
||||
<div class="btn-micro">
|
||||
<img id="microphone" src="resources/logos/microphone.svg">
|
||||
<img id="microphone-close" src="resources/logos/microphone-close.svg">
|
||||
</div>
|
||||
<div class="btn-video">
|
||||
<img id="cinema" src="resources/logos/cinema.svg">
|
||||
<img id="cinema-close" src="resources/logos/cinema-close.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="cowebsite" class="cowebsite"></div>
|
||||
</div>
|
||||
<!--
|
||||
<div id="webRtc" class="webrtc">
|
||||
<div id="activeCam" class="activeCam">
|
||||
<div id="div-myCamVideo" class="video-container">
|
||||
<video id="myCamVideo" autoplay muted></video>
|
||||
|
|
@ -54,11 +100,9 @@
|
|||
<img id="cinema" src="resources/logos/cinema.svg">
|
||||
<img id="cinema-close" src="resources/logos/cinema-close.svg">
|
||||
</div>
|
||||
<!--<div class="btn-call">
|
||||
<img src="resources/logos/phone.svg">
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div id="webRtcSetup" class="webrtcsetup">
|
||||
<img id="webRtcSetupNoVideo" class="background-img" src="resources/logos/cinema-close.svg">
|
||||
<video id="myCamVideoSetup" autoplay muted></video>
|
||||
|
|
|
|||
196
front/dist/resources/style/style.css
vendored
196
front/dist/resources/style/style.css
vendored
|
|
@ -27,7 +27,7 @@ video{
|
|||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.webrtc{
|
||||
/*.webrtc{
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
|
@ -36,21 +36,22 @@ video{
|
|||
}
|
||||
.webrtc.active{
|
||||
display: block;
|
||||
}
|
||||
}*/
|
||||
|
||||
.webrtc, .activeCam{}
|
||||
.activeCam .video-container{
|
||||
position: absolute;
|
||||
height: 25%;
|
||||
/*.webrtc, .activeCam{}*/
|
||||
/*.activeCam*/ .video-container{
|
||||
position: relative;
|
||||
/*height: 25%;
|
||||
top: 10px;
|
||||
margin: 5px;
|
||||
right: -100px;
|
||||
transition: all 0.2s ease;
|
||||
border-color: black;
|
||||
transition: all 0.2s ease;*/
|
||||
/*border-color: black;
|
||||
border-style: solid;
|
||||
border-width: 0.2px;
|
||||
border-width: 0.2px;*/
|
||||
background-color: #00000099;
|
||||
}
|
||||
.activeCam .video-container i{
|
||||
/*.activeCam*/ .video-container i{
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 65px;
|
||||
|
|
@ -63,10 +64,10 @@ video{
|
|||
font-size: 28px;
|
||||
color: white;
|
||||
}
|
||||
.activeCam .video-container img.active{
|
||||
/*.activeCam*/ .video-container img.active{
|
||||
display: block;
|
||||
}
|
||||
.activeCam .video-container img{
|
||||
/*.activeCam*/ .video-container img{
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 15px;
|
||||
|
|
@ -78,34 +79,28 @@ video{
|
|||
padding: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
.activeCam .video-container video{
|
||||
/*.activeCam*/ .video-container video{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.webrtc:hover .activeCam .video-container{
|
||||
/*.webrtc:hover .activeCam .video-container{
|
||||
right: 10px;
|
||||
}
|
||||
.activeCam .video-container#div-myCamVideo{
|
||||
}*/
|
||||
/*.activeCam*/ .video-container#div-myCamVideo{
|
||||
border: none;
|
||||
}
|
||||
.activeCam .video-container video#myCamVideo{
|
||||
width: 200px;
|
||||
height: 113px;
|
||||
/*.activeCam*/
|
||||
|
||||
#div-myCamVideo {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*CSS size for 2 - 3 elements*/
|
||||
.activeCam .video-container:nth-child(1){
|
||||
/*this is for camera of user*/
|
||||
top: 75%;
|
||||
}
|
||||
.activeCam .video-container:nth-child(2){
|
||||
top: 0%;
|
||||
}
|
||||
.activeCam .video-container:nth-child(3){
|
||||
top: 25%;
|
||||
}
|
||||
.activeCam .video-container:nth-child(4) {
|
||||
top: 50%;
|
||||
video#myCamVideo{
|
||||
width: 15vw;
|
||||
/*width: 200px;*/
|
||||
/*height: 113px;*/
|
||||
}
|
||||
|
||||
/*btn animation*/
|
||||
|
|
@ -122,7 +117,7 @@ video{
|
|||
transition-timing-function: ease-in-out;
|
||||
bottom: 20px;
|
||||
}
|
||||
.webrtc:hover .btn-cam-action div{
|
||||
#activeCam:hover .btn-cam-action div{
|
||||
transform: translateY(0);
|
||||
}
|
||||
.btn-cam-action div:hover{
|
||||
|
|
@ -237,3 +232,138 @@ video{
|
|||
.webrtcsetup.active{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* New layout */
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
.main-container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
@media (min-aspect-ratio: 1/1) {
|
||||
.main-container {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.game-overlay {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex-direction: column
|
||||
}
|
||||
}
|
||||
@media (max-aspect-ratio: 1/1) {
|
||||
.main-container {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.game-overlay {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex-direction: row
|
||||
}
|
||||
}
|
||||
|
||||
.game {
|
||||
flex-basis: 100%;
|
||||
position: relative; /* Position relative is needed for the game-overlay. */
|
||||
}
|
||||
|
||||
/* A potentially shared website could appear in an iframe in the cowebsite space. */
|
||||
.cowebsite {
|
||||
flex-basis: 100%;
|
||||
transition: flex-basis 0.5s;
|
||||
}
|
||||
|
||||
/*.cowebsite:hover {
|
||||
flex-basis: 100%;
|
||||
}*/
|
||||
|
||||
.cowebsite iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.game-overlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */
|
||||
}
|
||||
|
||||
.game-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.game-overlay video {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.main-section {
|
||||
flex: 0 0 75%;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
/*align-items: flex-start;*/
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.main-section div {
|
||||
margin: 5%;
|
||||
flex-basis: 90%;
|
||||
/*flex-shrink: 2;*/
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex: 0 0 25%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar > div {
|
||||
height: 15%;
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
.chat-mode {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
.chat-mode div {
|
||||
margin: 1%;
|
||||
}
|
||||
|
||||
.chat-mode.one-col div {
|
||||
flex-basis: 98%;
|
||||
}
|
||||
|
||||
.chat-mode.two-col div {
|
||||
flex-basis: 48%;
|
||||
}
|
||||
|
||||
.chat-mode.three-col div {
|
||||
flex-basis: 31.333333%;
|
||||
}
|
||||
|
||||
.chat-mode.four-col div {
|
||||
flex-basis: 23%;
|
||||
}
|
||||
|
||||
.chat-mode div:last-child {
|
||||
flex-grow: 5;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue