mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 05:38:31 +00:00
somewhat fixed chat now
This commit is contained in:
steveseguin
parent
1a9d9e2d3c
commit
9c60f5f970
22
index.html
22
index.html
@ -132,19 +132,19 @@
|
||||
<div id="head7" class="hidden" data-translate="director-muted-you">The director has muted you.</div>
|
||||
<div id="head8" class="hidden" data-translate="director-video-muted-you">The director has disabled your camera temporarily.</div>
|
||||
</div>
|
||||
<div id="chatModule" class="hidden">
|
||||
<a target="popup" id="popOutChat" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
|
||||
<div id="chatBody">
|
||||
<div class="inMessage" id="welcomeMsg" data-translate='welcome-to-vdo-ninja-chat'>
|
||||
Welcome to the chat! You can send text messages directly to connected peers from here.
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
|
||||
<button class="chatBarInputButton" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
|
||||
</div>
|
||||
<div id="controlButtons" class="hidden">
|
||||
<div class="controlPositioning">
|
||||
<div id="obsState" class="hidden" >ACTIVE</div>
|
||||
<div id="chatModule" class="hidden">
|
||||
<a target="popup" id="popOutChat" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
|
||||
<div id="chatBody">
|
||||
<div class="inMessage" id="welcomeMsg" data-translate='welcome-to-vdo-ninja-chat'>
|
||||
Welcome to the chat! You can send text messages directly to connected peers from here.
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
|
||||
<button class="chatBarInputButton" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
|
||||
</div>
|
||||
<div id="subControlButtons">
|
||||
|
||||
<div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" aria-label="Blind all guests in room" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="blindAllGuests(this, event)" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
|
||||
@ -2480,6 +2480,6 @@
|
||||
// If you wish to change branding, blank offers a good clean start.
|
||||
<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
|
||||
-->
|
||||
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=602"></script>
|
||||
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=603"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
11
lib.js
11
lib.js
@ -3632,13 +3632,12 @@ function updateMixerRun(e=false){ // this is the main auto-mixing code. It's a
|
||||
}
|
||||
|
||||
var h = window.innerHeight - hi;
|
||||
|
||||
if (session.dedicatedControlBarSpace || window.innerHeight<=700 ){ // # This needs to be reviewed.
|
||||
if (document.getElementById("controlButtons") && !session.overlayControls){
|
||||
var h = window.innerHeight - hi - document.getElementById("controlButtons").offsetHeight;
|
||||
} else {
|
||||
var h = window.innerHeight - hi;
|
||||
}
|
||||
if (document.getElementById("subControlButtons") && !session.overlayControls){
|
||||
if (!document.getElementById("subControlButtons").yOffset || (document.getElementById("subControlButtons").yOffset>-10)){
|
||||
h = window.innerHeight - hi - document.getElementById("subControlButtons").offsetHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var arW = 16.0;
|
||||
|
||||
195
main.css
195
main.css
@ -1791,19 +1791,77 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
|
||||
/* ////// Icon resizing for mobile subControl bar ////// */
|
||||
|
||||
@media only screen and (max-height: 500px) {
|
||||
#subControlButtons {
|
||||
position: unset;
|
||||
min-width: unset;
|
||||
}
|
||||
#subControlButtons > div {
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
margin: 4px;
|
||||
}
|
||||
#SubControlButtons > div i {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.inMessage {
|
||||
color: #000;
|
||||
margin: 3px;
|
||||
border-radius: 5px;
|
||||
background: #FFF;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
.actionMessage {
|
||||
color: #000;
|
||||
margin: 3px;
|
||||
border-radius: 5px;
|
||||
background: #FFF;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
.outMessage {
|
||||
color: #000;
|
||||
border-radius: 5px;
|
||||
background: #BCF;
|
||||
padding: 5px;
|
||||
text-align: right;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#chatBody {
|
||||
z-index: 12;
|
||||
background-color: #0004;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
overflow-y: scroll;
|
||||
overflow-wrap: anywhere;
|
||||
max-height: min(500px, 70vh);
|
||||
}
|
||||
|
||||
#chatBody::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent; /* make scrollbar transparent */
|
||||
}
|
||||
|
||||
div#chatBody a {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
background-color: #c9c9c9;
|
||||
border: 2px solid black;
|
||||
padding: 2px 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#chatModule {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
max-width: min(500px, 100vh);
|
||||
z-index: 3;
|
||||
margin-bottom: 65px;
|
||||
gap: 0px 5px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#chatInput {
|
||||
color: #000;
|
||||
background-color: #FFFE;
|
||||
width: 70%;
|
||||
padding: 3px;
|
||||
}
|
||||
.chatBarInputButton {
|
||||
width: calc(30% - 5px);
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
@ -1821,16 +1879,19 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 410px) {
|
||||
@media only screen and (max-height: 500px) {
|
||||
|
||||
#subControlButtons > div {
|
||||
min-width: 35px;
|
||||
min-height: 35px;
|
||||
border-radius: 6px;
|
||||
margin: 3px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
margin: 4px;
|
||||
}
|
||||
#SubControlButtons > div i {
|
||||
font-size: 24px;
|
||||
font-size: 28px;
|
||||
}
|
||||
#chatModule{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 410px) {
|
||||
@ -1845,6 +1906,21 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 410px) {
|
||||
#subControlButtons > div {
|
||||
min-width: 35px;
|
||||
min-height: 35px;
|
||||
border-radius: 6px;
|
||||
margin: 3px;
|
||||
}
|
||||
#SubControlButtons > div i {
|
||||
font-size: 24px;
|
||||
}
|
||||
#chatModule{
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 360px) {
|
||||
#subControlButtons > div {
|
||||
min-width: 30px;
|
||||
@ -1867,6 +1943,9 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
#SubControlButtons > div i {
|
||||
font-size: 20px;
|
||||
}
|
||||
#chatModule {
|
||||
margin-bottom: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 320px) {
|
||||
@ -3371,84 +3450,6 @@ input[type=checkbox] {
|
||||
background-size: contain;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.inMessage {
|
||||
color: #000;
|
||||
margin: 3px;
|
||||
border-radius: 5px;
|
||||
background: #FFF;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
.actionMessage {
|
||||
color: #000;
|
||||
margin: 3px;
|
||||
border-radius: 5px;
|
||||
background: #FFF;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
.outMessage {
|
||||
color: #000;
|
||||
border-radius: 5px;
|
||||
background: #BCF;
|
||||
padding: 5px;
|
||||
text-align: right;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#chatBody {
|
||||
z-index: 12;
|
||||
background-color: #0004;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
overflow-y: scroll;
|
||||
overflow-wrap: anywhere;
|
||||
max-height: min(500px, 70vh);
|
||||
}
|
||||
|
||||
#chatBody::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent; /* make scrollbar transparent */
|
||||
}
|
||||
|
||||
div#chatBody a {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
background-color: #c9c9c9;
|
||||
border: 2px solid black;
|
||||
padding: 2px 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#chatModule {
|
||||
bottom: 50px;
|
||||
position: fixed;
|
||||
margin: 10px;
|
||||
align-self: center;
|
||||
width: 574px;
|
||||
min-width: 300px;
|
||||
max-width: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
#chatInput {
|
||||
color: #000;
|
||||
background-color: #FFFE;
|
||||
max-width: 700px;
|
||||
min-width: 320px;
|
||||
width: calc(100% - 89px);
|
||||
font-size: 105%;
|
||||
padding: 3px;
|
||||
border: 3px solid black;
|
||||
}
|
||||
.chatBarInputButton {
|
||||
width: 60px;
|
||||
background-color: #EEE;
|
||||
top: -1px;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.debugStats {
|
||||
font-size: 0.8rem;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user