Skip to content

G
galene
Commit 84948418 authored by Alain Takoudjou's avatar Alain Takoudjou
Browse files
Options

Add initial push to talk version

parent 6669a93a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1031 additions and 804 deletions
static/galene.css
View file @ 84948418
......@@ -12,7 +12,7 @@
.topnav {
padding-left: 0;
height: 3.5rem;
height: 2.5rem;
z-index: 1039;
}
......@@ -153,6 +153,19 @@
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-big, .btn-big:focus {
font-size: 2.5em;
padding: 1rem 2rem;
border-radius: 3rem;
user-select: none;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.btn-big:active {
transition-duration: 0.8s;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.btn {
transition-duration: 0.4s;
}
......@@ -222,6 +235,12 @@
border-color: #ffc107;
}
.btn-big:active {
border-color: #2d773e;
background-color: #dc3545;
border-color: #dc3545;
}
.btn-large {
font-size: 110%;
}
......@@ -241,7 +260,7 @@
}
.coln-left-hide {
flex: 0;
flex: 0;
}
.coln-right {
......@@ -260,7 +279,7 @@
.full-width {
width: calc(100vw - 200px);
height: calc(var(--vh, 1vh) * 100 - 56px);
height: calc(var(--vh, 1vh) * 100 - 40px);
}
.full-width-active {
......@@ -272,8 +291,8 @@
}
.users-header {
height: 3.5rem;
padding: 10px;
height: 2.5rem;
padding: 5px;
background: #610a86;
font-size: .95rem;
font-weight: 500;
......@@ -330,7 +349,7 @@ textarea.form-reply {
}
.form-reply::placeholder {
opacity: .7;
opacity: .7;
}
.select {
......@@ -453,8 +472,8 @@ textarea.form-reply {
}
.collapse-video {
left: inherit;
right: 30px;
bottom: 72px;
top: inherit;
}
.video-controls, .top-video-controls {
......@@ -500,6 +519,10 @@ textarea.form-reply {
text-align: right;
}
.video-off {
color: #e83a4a;
}
.vc-overlay {
background: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 70%) 100%);
}
......@@ -511,7 +534,7 @@ textarea.form-reply {
.video-controls span, .top-video-controls span {
margin-right: 20px;
transition: opacity .7s ease-out;
opacity: 1;
opacity: .7;
cursor: pointer;
}
......@@ -533,6 +556,7 @@ textarea.form-reply {
justify-content: center;
align-items: center;
color: #eaeaea;
display: none;
}
.video-controls .volume {
......@@ -720,7 +744,7 @@ h1 {
}
.invisible {
display: none;
display: none !important;
}
.error {
......@@ -742,7 +766,7 @@ h1 {
}
#optionsdiv input[type="checkbox"] {
vertical-align: middle;
vertical-align: middle;
}
#presentbutton, #unpresentbutton {
......@@ -754,6 +778,13 @@ h1 {
width: 5.8em;
}
#pushtalk {
position: fixed;
bottom: 70px;
right: 30px;
z-index: 1002;
}
#videoselect {
text-align-last: center;
margin-right: 0.4em;
......@@ -872,7 +903,7 @@ h1 {
cursor: ew-resize;
}
#peers {
#peers, #mypeer {
padding: 10px;
display: grid;
grid-template-columns: repeat(1, 1fr);
......@@ -1027,7 +1058,7 @@ legend {
.show-video {
position: absolute;
right: 30px;
bottom: 120px;
top: 10px;
color: white;
width: 50px;
height: 50px;
......@@ -1106,7 +1137,6 @@ legend {
max-width: 200px;
transition: all 0.3s;
background: #ffffff;
border-right: 1px solid #dcdcdc;
}
#left-sidebar .galene-header {
......@@ -1157,7 +1187,7 @@ header .collapse:hover {
#users {
padding: 0;
margin: 0;
height: calc(100% - 84px);
height: calc(100% - 60px);
width: 100%;
position: relative;
display: block;
......@@ -1178,6 +1208,20 @@ header .collapse:hover {
white-space: pre;
}
#users .user-p div {
display: inline-flex;
justify-content: space-between;
width: calc(100% - 25px);
}
#users .user-p span {
text-align: left;
}
#users .user-p span:last-child {
padding: 1px 5px;
}
#left-sidebar.active #users > div {
padding: 10px 5px !important;
}
......@@ -1236,20 +1280,32 @@ header .collapse:hover {
}
.full-width {
height: calc(var(--vh, 1vh) * 100 - 56px);
height: calc(var(--vh, 1vh) * 100 - 40px);
}
.close-chat, .show-chat {
display: none;
}
#pushtalk {
cursor: default;
}
.video-container {
position: fixed;
height: calc(var(--vh, 1vh) * 100 - 56px);
/*position: fixed;
height: calc(var(--vh, 1vh) * 100 - 40px);
top: 56px;
right: 0;
left: 0;
margin-bottom: 60px;
margin-bottom: 60px;*/
height: 100%;
}
.media {
max-height: calc(var(--vh, 1vh) * 50 - 36px);
}
#peers {
display: block;
}
.top-video-controls {
......@@ -1270,24 +1326,27 @@ header .collapse:hover {
}
.coln-left {
flex: 100%;
flex: 50%;
width: 100vw;
/* chat is always visible here */
display: block !important;
}
.coln-right {
flex: none;
flex: 50%;
position: relative;
}
.full-width {
width: 100vw;
flex-wrap: wrap;
flex-direction: column-reverse;
}
#left-sidebar.active {
min-width: 200px;
max-width: 200px;
border-right: 1px solid #dcdcdc;
}
#left-sidebar {
......@@ -1330,6 +1389,13 @@ header .collapse:hover {
border-right: none;
}
#box {
/* 40px header height
53px reply box height
*/
height: calc((var(--vh, 1vh) * 100 - 40px) / 2 - 53px);
}
.dropdown-content {
margin-top: 10px;
}
......@@ -1338,8 +1404,8 @@ header .collapse:hover {
:root{
--contextualMenuBg: #eee;
--contextualMenuShadow: 1px 1px 1px #444; */
--contextualMenuRadius: 0px; */
--contextualMenuShadow: 1px 1px 1px #444;
--contextualMenuRadius: 0px;
--contextualMenuText: black;
--contextualSubMenuBg: #eee;
......
static/galene.html
View file @ 84948418
......@@ -47,11 +47,17 @@
</button>
</li>
<li>
<div id="mutebutton" class="nav-link nav-button">
<div id="mutebutton" class="nav-link nav-button invisible">
<span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span>
<label>Mute</label>
</div>
</li>
<li>
<div id="videoon" class="nav-link nav-button invisible">
<span><i class="fas fa-video-camera" aria-hidden="true"></i></span>
<label>Camera</label>
</div>
</li>
<li>
<div id="sharebutton" class="invisible nav-link nav-button">
<span><i class="fas fa-share-square" aria-hidden="true"></i></span>
......@@ -69,10 +75,24 @@
<div class="row full-width" id="mainrow">
<div class="coln-left" id="left">
<div id="chat">
<div class="video-container invisible" id="myvideo-container">
<div class="chat-btn collapse-video invisible" id="collapse-video">
<i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i>
</div>
<div id="mypeer"></div>
</div>
<div id="chatbox">
<div class="close-chat" id="close-chat" title="Hide chat">
<span class="close-icon"></span>
</div>
<span class="show-video blink invisible" id="show-video">
<i class="fas fa-exchange-alt" aria-hidden="true"></i>
</span>
<button id="pushtalk" class="btn btn-big btn-success invisible">
<i id="pushvideo" class="fas fa-play invisible" aria-hidden="true"></i>
<i id="pushmic" class="fas fa-microphone invisible" aria-hidden="true"></i>
</button>
<div id="box"></div>
<div class="reply">
<form id="inputform">
......@@ -85,20 +105,12 @@
</div>
<div id="resizer"></div>
<div class="coln-right" id="right">
<span class="show-video blink invisible" id="show-video">
<i class="fas fa-exchange-alt" aria-hidden="true"></i>
</span>
<div class="chat-btn show-chat invisible" id="show-chat">
<i class="far fa-comment-alt icon-chat" title="Show chat"></i>
</div>
<div class="chat-btn collapse-video invisible" id="collapse-video">
<i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i>
</div>
<div class="video-container invisible" id="video-container">
<div id="expand-video" class="expand-video">
<div id="peers"></div>
</div>
</div>
<div class="login-container invisible" id="login-container">
<div class="login-box">
<form id="userform" class="userform">
......@@ -110,17 +122,17 @@
autocomplete="current-password" class="form-control"/>
<label>Enable at start:</label>
<div class="present-switch">
<p class="switch-radio">
<input id="presentoff" type="radio" name="presentradio" value="" checked/>
<!--<p class="switch-radio">
<input id="presentoff" type="radio" name="presentradio" value=""/>
<label for="presentoff">Nothing</label>
</p>
</p>-->
<p class="switch-radio">
<input id="presentmike" type="radio" name="presentradio" value="mike"/>
<label for="presentmike">Microphone</label>
<label for="presentmike">Audio only</label>
</p>
<p class="switch-radio">
<input id="presentboth" type="radio" name="presentradio" value="both"/>
<label for="presentboth">Camera and microphone</label>
<input id="presentvideo" type="radio" name="presentradio" value="camera" checked/>
<label for="presentvideo">Audio and Camera</label>
</p>
</div>
<div class="clear"></div>
......@@ -209,9 +221,9 @@
<form id="sendform">
<label for="sendselect" class="sidenav-label-first">Send:</label>
<select id="sendselect" class="select select-inline">
<option value="lowest">lowest</option>
<option value="lowest" selected>lowest</option>
<option value="low">low</option>
<option value="normal" selected>normal</option>
<option value="normal">normal</option>
<option value="unlimited">unlimited</option>
</select>
</form>
......@@ -258,7 +270,7 @@
</span>
</div>
<div class="controls-button controls-right">
<span class="pip" title="Picture In Picture">
<span class="pip invisible" title="Picture In Picture">
<i class="far fa-clone" aria-hidden="true"></i>
</span>
<span class="fullscreen" title="Fullscreen">
......@@ -272,6 +284,10 @@
<div class="controls-button controls-right">
<span class="close-icon video-stop" title="Stop video">
</span>
<span class="change-camera"><i class='fas fa-camera-rotate'></i></span>
</div>
<div class="controls-button controls-left">
<span class="video-off"><i class='fas fa-video-camera'></i></span>
</div>
</div>
</div>
......
static/galene.js
View file @ 84948418
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7