elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-11 21:58:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1043 from lindenkron/Mobile-fix

Browse Source 
Settings menu & Apple mobile fixes
This commit is contained in:
Steve Seguin 2023-04-12 18:57:38 -04:00 committed by GitHub
commit 484fde4b4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 404 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
index.html
View File

@ -133,100 +133,112 @@
<div id="head8" class="hidden" data-translate="director-video-muted-you">The director has disabled your camera temporarily.</div>
</div>
<div id="controlButtons" class="hidden">
<div id="obsState" class="hidden" >ACTIVE</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;" >
<i class="toggleSize las la-eye"></i>
</div>
<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" aria-label="Load next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="nextQueue()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="queuetoggle" class="toggleSize las la-stream"></i>
<div id="queueNotification"></div>
</div>
<div id="sharefilebutton" title="Transfer any file to the group" alt="Transfer any file to the group" aria-label="Select file to transfer" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleFileshare()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float" style="cursor: pointer;" >
<i id="filesharetoggle" class="toggleSize las la-file-upload"></i>
<div id="transferNotification"></div>
</div>
<div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" aria-label="Text chat" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleChat()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="chattoggle" class="toggleSize las la-comment-alt"></i>
<div id="chatNotification"></div>
</div>
<div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" alt="Toggle the speaker output." aria-label="Mute Speaker output" title="Mute the Speaker" onclick="toggleSpeakerMute()" tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="mutespeakertoggle" class="toggleSize las la-volume-up" style="position: relative; top: 0.5px;"></i>
</div>
<div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" alt="Mute the Mic" aria-label="Mute Microphone" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;">
<i id="mutetoggle" class="toggleSize las la-microphone" style="position: relative; top: 0.5px;"></i>
</div>
<div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Disable the Camera" alt="Disable the Camera" aria-label="Mute Camera" onclick="toggleVideoMute()" tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;">
<i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-video"></i>
</div>
<div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a Screen with others" alt="Share a Screen with others" aria-label="Share a screen" onclick="screenshareTypeDecider(1)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
<i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-desktop"></i>
</div>
<div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Add a Screen Share" alt="Add a Screen Share" aria-label="Share a screen" onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv"></i>
</div>
<div id="screenshare3button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a Screen with others" alt="Add a Screen Share" aria-label="Share a screen" onclick="screenshareTypeDecider(3)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
<i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv"></i>
</div>
<div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a website with your guests (IFRAME)" aria-label="Share a website" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden" style="cursor: pointer;">
<i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-maximize"></i>
</div>
<div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" aria-label="Share a website" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake hidden" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-close" style="display: inline-block;"></i>
<div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
Stop Sharing Website
</div>
</div>
<div id="fullscreenPage" onmousedown="event.preventDefault(); event.stopPropagation();" title="Full-screen the page" alt="Full-screen the page" aria-label="Full screen" onclick="fullscreenPageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden" style="cursor: pointer;">
<i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-expand-arrows-alt"></i>
</div>
<div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cycle the Cameras" onclick="cycleCameras()" class="hidden float" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Cycle Cameras" alt="Cycle the Cameras">
<i id="settingstoggle" class="toggleSize las la-sync-alt"></i>
</div>
<div id="obscontrolbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="OBS Remote Controller; start/stop and change scenes." onclick="toggleOBSControls();" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Remote OBS control menu" alt="Toggle the Remote OBS Controls Menu">
<i id="obscontroltoggle" class="toggleSize las la-gamepad"></i>
</div>
<div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Room Settings" onclick="toggleRoomSettings();" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu" aria-label="Room settings menu">
<i id="roomsettingstoggle" class="toggleSize las la-users-cog"></i>
</div>
<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Your audio and video Settings" onclick="toggleSettings()" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu" aria-label="Settings menu">
<i id="settingstoggle" class="toggleSize las la-cog"></i>
</div>
<div id="hangupbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" aria-label="Hang up" alt="Hangup the Call" onclick="hangup()" class="hidden float" tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
</div>
<div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-raised="0" title="Alert the host you want to speak" aria-label="Raise hand" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="hidden float" style="cursor: pointer;">
<i class="toggleSize las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div>
<div id="pptbackbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Go back a slide" aria-label="Back a slide" alt="Go back a slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="gobackSlide()" class="hidden float red" style="cursor: pointer;">
<i class="toggleSize las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div>
<div id="pptnextbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Next slide" aria-label="Next slide" alt="Next slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="nextSlide()" class="hidden float" style="cursor: pointer;">
<i class="toggleSize las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div>
<div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Record your stream to disk" aria-label="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="hidden float" style="cursor: pointer;">
<i class="toggleSize las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
</div>
<div id="recordLocalScreenbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Stop screen share recording" aria-label="Stop screen share recording" alt="Stop screen recording" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalScreenStopRecord();" class="hidden float" style="cursor: pointer;">
<small>Stop<br>Screen<br>Record</small>
</div>
<span id="miniPerformer" style="pointer-events: auto;" class="hidden"></span>
<span id="rooms" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
<span id="groups" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;text-align: center;"></span>
<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cancel the Director's Video/Audio" onclick="hangup2()" class="hidden float" tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="stop publishing audio and video" alt="Disconnect Direcotor's cam">
<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
</div>
</div>
<div class="controlPositioning">
<div id="obsState" class="hidden" >ACTIVE</div>
<div id="chatModule" style="display:none;">
<a target="popup" id="popOutChat" style="cursor:pointer;text-align:right;color:#B3C7F9;" 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;" >
<i class="toggleSize las la-eye"></i>
</div>
<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" aria-label="Load next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="nextQueue()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="queuetoggle" class="toggleSize las la-stream"></i>
<div id="queueNotification"></div>
</div>
<div id="sharefilebutton" title="Transfer any file to the group" alt="Transfer any file to the group" aria-label="Select file to transfer" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleFileshare()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float" style="cursor: pointer;" >
<i id="filesharetoggle" class="toggleSize las la-file-upload"></i>
<div id="transferNotification"></div>
</div>
<div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" aria-label="Text chat" onmousedown="event.preventDefault(); event.stopPropagation();" onclick="toggleChat()" tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="chattoggle" class="toggleSize las la-comment-alt"></i>
<div id="chatNotification"></div>
</div>
<div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" alt="Toggle the speaker output." aria-label="Mute Speaker output" title="Mute the Speaker" onclick="toggleSpeakerMute()" tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;" >
<i id="mutespeakertoggle" class="toggleSize las la-volume-up" style="position: relative; top: 0.5px;"></i>
</div>
<div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" alt="Mute the Mic" aria-label="Mute Microphone" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;">
<i id="mutetoggle" class="toggleSize las la-microphone" style="position: relative; top: 0.5px;"></i>
</div>
<div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Disable the Camera" alt="Disable the Camera" aria-label="Mute Camera" onclick="toggleVideoMute()" tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="hidden float" style="cursor: pointer;">
<i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-video"></i>
</div>
<div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a Screen with others" alt="Share a Screen with others" aria-label="Share a screen" onclick="screenshareTypeDecider(1)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
<i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-desktop"></i>
</div>
<div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Add a Screen Share" alt="Add a Screen Share" aria-label="Share a screen" onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv"></i>
</div>
<div id="screenshare3button" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a Screen with others" alt="Add a Screen Share" aria-label="Share a screen" onclick="screenshareTypeDecider(3)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
<i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-tv"></i>
</div>
<div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Share a website with your guests (IFRAME)" aria-label="Share a website" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden" style="cursor: pointer;">
<i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-maximize"></i>
</div>
<div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" aria-label="Share a website" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake hidden" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-close" style="display: inline-block;"></i>
<div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
Stop Sharing Website
</div>
</div>
<div id="fullscreenPage" onmousedown="event.preventDefault(); event.stopPropagation();" title="Full-screen the page" alt="Full-screen the page" aria-label="Full screen" onclick="fullscreenPageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float hidden" style="cursor: pointer;">
<i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-expand-arrows-alt"></i>
</div>
<div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cycle the Cameras" onclick="cycleCameras()" class="hidden float" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Cycle Cameras" alt="Cycle the Cameras">
<i id="settingstoggle" class="toggleSize las la-sync-alt"></i>
</div>
<div id="obscontrolbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="OBS Remote Controller; start/stop and change scenes." onclick="toggleOBSControls();" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Remote OBS control menu" alt="Toggle the Remote OBS Controls Menu">
<i id="obscontroltoggle" class="toggleSize las la-gamepad"></i>
</div>
<div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Room Settings" onclick="toggleRoomSettings();" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu" aria-label="Room settings menu">
<i id="roomsettingstoggle" class="toggleSize las la-users-cog"></i>
</div>
<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Your audio and video Settings" onclick="toggleSettings()" class="hidden float" tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu" aria-label="Settings menu">
<i id="settingstoggle" class="toggleSize las la-cog"></i>
</div>
<div id="hangupbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" aria-label="Hang up" alt="Hangup the Call" onclick="hangup()" class="hidden float" tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
</div>
<div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-raised="0" title="Alert the host you want to speak" aria-label="Raise hand" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="hidden float" style="cursor: pointer;">
<i class="toggleSize las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div>
<div id="pptbackbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Go back a slide" aria-label="Back a slide" alt="Go back a slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="gobackSlide()" class="hidden float red" style="cursor: pointer;">
<i class="toggleSize las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div>
<div id="pptnextbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Next slide" aria-label="Next slide" alt="Next slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="nextSlide()" class="hidden float" style="cursor: pointer;">
<i class="toggleSize las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i>
</div>
<div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Record your stream to disk" aria-label="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="hidden float" style="cursor: pointer;">
<i class="toggleSize las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
</div>
<div id="recordLocalScreenbutton" onmousedown="event.preventDefault(); event.stopPropagation();" data-state="0" title="Stop screen share recording" aria-label="Stop screen share recording" alt="Stop screen recording" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalScreenStopRecord();" class="hidden float" style="cursor: pointer;">
<small>Stop<br>Screen<br>Record</small>
</div>
<span id="miniPerformer" style="pointer-events: auto;" class="hidden"></span>
<span id="rooms" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
<span id="groups" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;text-align: center;"></span>
<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Cancel the Director's Video/Audio" onclick="hangup2()" class="hidden float" tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="stop publishing audio and video" alt="Disconnect Direcotor's cam">
<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<span id="miniTaskBar" style="float: right; bottom: 0px;right:0; position:fixed; display:flex;">
<div id="closedList_connectUsers" class="hidden" onclick="getById('connectUsers').classList.remove('hidden');getById('closedList_connectUsers').classList.add('hidden');">
@ -411,8 +423,8 @@
<span><i class="las la-headphones"></i><span data-translate="you-are-using-headphones-earphones">You are using headphones / earphones</span></span>
</div>
<div id="videoMenu" class="videoMenu">
<span style="padding-right:2px;display:inline-block;position:relative;top:1px;"><i class="las la-video"></i><span data-translate="video-source"> Video Source </span></span>
<span style="display:inline-block;padding-top: 5px;">
<span style="display:inline-block;position:relative;padding: 7px 0px;"><i class="las la-video"></i><span data-translate="video-source"> Video Source </span></span>
<span style="display:flex;align-items: center;">
<select id="videoSourceSelect" alt="Video source list"></select>
<span id="gear_webcam" onclick="toggle(document.getElementById('videoSettings'));">
<i class="las la-cog" style="font-size: 140%; vertical-align: middle;" aria-hidden="true"></i>
@ -2046,19 +2058,7 @@
</li>
</ul>
</nav>
<div id="chatModule" style="display:none;text-align:right">
<a target="popup" id="popOutChat" style="cursor:pointer;text-align:right;color:#B3C7F9;" 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="roomSettings" class="customModelPopup" style="display:none; user-select: none;">
<div class="promptModalInner">
<span class='modalClose' onclick="toggleRoomSettings();">×</span>

260
lib.js
View File

@ -2010,7 +2010,7 @@ function makeMiniDraggableElement(elmnt) {
try {
elmnt.dragElement = false;
elmnt.style.bottom = "auto";
// elmnt.style.bottom = "auto";
elmnt.style.cursor = "grab";
elmnt.stashonmouseup = null;
@ -2168,110 +2168,192 @@ function makeMiniDraggableElement(elmnt) {
elmnt.ontouchstart = dragMouseDown;
}
function makeDraggableElement(elmnt, absolute=false) {
function makeDraggableElement(element) {
let isDragging = false;
let initialX;
let currentX;
let xOffset = 0;
let initialY;
let currentY;
let yOffset = 0;
element.addEventListener('mousedown', dragStart);
document.addEventListener('mouseup', dragEnd);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
document.addEventListener('mousemove', drag);
isDragging = true;
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
document.removeEventListener('mousemove', drag);
isDragging = false;
updateMixer();
}
function drag(e) {
if (isDragging) {
currentX = (e.clientX - initialX);
currentY = (e.clientY - initialY);
// Get the dimensions of the viewport
let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
// Get the dimensions of the object
let elementWidth = element.offsetWidth;
let elementHeight = element.offsetHeight;
// console.log('elementWidth:\n',elementWidth)
// console.log('elementHeight:\n',elementHeight)
// Calculate the boundaries
let maxX = vw - elementWidth;
let maxY = vh - elementHeight;
let minX = 0;
let minY = 0;
// Calculate real boundaries (parent position: fixed issues)
let topOffset = 0;
let leftOffset = 0;
let elementOffset = element;
while (elementOffset) {
topOffset += elementOffset.offsetTop;
leftOffset += elementOffset.offsetLeft;
elementOffset = elementOffset.offsetParent;
}
// Adjust the position if it's going beyond the boundaries
let realX = currentX + leftOffset;
let realY = currentY + topOffset;
if (realX > maxX) {
currentX = maxX - leftOffset;
} else if (realX < minX) {
currentX = minX - leftOffset;
}
if (realY > maxY) {
currentY = maxY - topOffset;
} else if (realY < minY) {
currentY = minY - topOffset;
}
// Update the position and offset
xOffset = currentX;
yOffset = currentY;
element.style.transform = `translate(${currentX}px, ${currentY}px)`;
}
}
if (session.disableMouseEvents){return;}
// if (session.disableMouseEvents){return;}
try {
elmnt.dragElement = false;
elmnt.style.bottom = "auto";
elmnt.style.cursor = "grab";
elmnt.stashonmouseup = null;
elmnt.stashonmousemove = null;
} catch (e) {
errorlog(e);
return;
}
var pos1 = 0;
var pos2 = 0;
var pos3 = 0;
var pos4 = 0;
var timestamp = false;
// try {
// elmnt.dragElement = false;
// elmnt.style.bottom = "auto";
// elmnt.style.cursor = "grab";
// elmnt.stashonmouseup = null;
// elmnt.stashonmousemove = null;
// } catch (e) {
// errorlog(e);
// return;
// }
// var pos1 = 0;
// var pos2 = 0;
// var pos3 = 0;
// var pos4 = 0;
// var timestamp = false;
var enterEventCount = 0;
var leaveEventCount = 0;
// var enterEventCount = 0;
// var leaveEventCount = 0;
function dragMouseDown(e) {
timestamp = Date.now();
// function dragMouseDown(e) {
// timestamp = Date.now();
e = e || window.event;
e.preventDefault();
// e = e || window.event;
// e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
//elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events.
//elmnt.stashonmousemove = document.onmousemove;
//elmnt.stashonclick = document.onclick;
// pos3 = e.clientX;
// pos4 = e.clientY;
// //elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events.
// //elmnt.stashonmousemove = document.onmousemove;
// //elmnt.stashonclick = document.onclick;
document.onmouseup = function(event){closeDragElement(event, elmnt);};
// document.onmouseup = function(event){closeDragElement(event, elmnt);};
document.onmousemove = function(event){elementDrag(elmnt,event);};
// document.onmousemove = function(event){elementDrag(elmnt,event);};
if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
// if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
elmnt.onmouseleave = function(event){
leaveEventCount+=1;
elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
closeDragElement(evt1, ele);}
,100, elmnt, event);
};
elmnt.onmouseenter = function(event){
enterEventCount+=1;
if (enterEventCount>=leaveEventCount){
if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
} else {
if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){
clearTimeout(elmnt.stopDragTimeout);
elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
// elmnt.onmouseleave = function(event){
// leaveEventCount+=1;
// elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
// closeDragElement(evt1, ele);}
// ,100, elmnt, event);
// };
// elmnt.onmouseenter = function(event){
// enterEventCount+=1;
// if (enterEventCount>=leaveEventCount){
// if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
// } else {
// if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){
// clearTimeout(elmnt.stopDragTimeout);
// elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
closeDragElement(evt1, ele);}
,100, elmnt, event);
}
}
};
// closeDragElement(evt1, ele);}
// ,100, elmnt, event);
// }
// }
// };
}
function elementDrag(ele,e) {
// }
// function elementDrag(ele,e) {
e = e || window.event;
if (("buttons" in e) && (e.buttons!==1)){return;}
// e = e || window.event;
// if (("buttons" in e) && (e.buttons!==1)){return;}
e.preventDefault();
// e.preventDefault();
ele.dragElement = true;
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// ele.dragElement = true;
// pos1 = pos3 - e.clientX;
// pos2 = pos4 - e.clientY;
// pos3 = e.clientX;
// pos4 = e.clientY;
var topDrag = (ele.offsetTop - pos2 );
if (absolute){
if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){
topDrag = (-3 + (window.innerHeight - ele.clientHeight));
}
} else {
if (topDrag > -3){
topDrag = -3;
}
}
ele.style.top = topDrag + "px";
ele.style.left = (ele.offsetLeft - pos1) + "px";
// var topDrag = (ele.offsetTop - pos2 );
// if (absolute){
// if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){
// topDrag = (-3 + (window.innerHeight - ele.clientHeight));
// }
// } else {
// if (topDrag > -3){
// topDrag = -3;
// }
// }
// ele.style.top = topDrag + "px";
// ele.style.left = (ele.offsetLeft - pos1) + "px";
}
function closeDragElement(event=false, ele=false) {
document.onmouseup = null;
document.onmousemove = null
ele.onmouseleave = null;
ele.onmouseenter = null;
enterEventCount = 0;
leaveEventCount = 0;
updateMixer();
//document.onclick = elmnt.stashonclick;
}
// }
// function closeDragElement(event=false, ele=false) {
// document.onmouseup = null;
// document.onmousemove = null
// ele.onmouseleave = null;
// ele.onmouseenter = null;
// enterEventCount = 0;
// leaveEventCount = 0;
// updateMixer();
// //document.onclick = elmnt.stashonclick;
// }
elmnt.onmousedown = dragMouseDown;
// elmnt.onmousedown = dragMouseDown;
}
function removeStorage(cname){
@ -10520,7 +10602,7 @@ function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle
session.chat = true;
getById("chattoggle").className = "las la-comment-dots toggleSize";
getById("chatbutton").className = "float";
getById("chatModule").style.display = "block";
getById("chatModule").style.display = "flex";
getById("chatInput").focus(); // give it keyboard focus
} else {
session.chat = false;
@ -10537,7 +10619,7 @@ function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle
if (getById("chatNotification").value) {
getById("chatNotification").value = 0;
}
getById("chatNotification").classList.remove("notification");
getById("chatNotification").classList.remove("notification", "red");
}
function directorAdvanced(ele) {
@ -22734,7 +22816,7 @@ function addDownloadLink(fileList, UUID, pc){
} else {
getById("chatNotification").value = 1;
}
getById("chatNotification").classList.add("notification");
getById("chatNotification").classList.add("notification", "red");
}
//if (session.broadcastChannel !== false) {
@ -29470,7 +29552,7 @@ function getChatMessage(msg, label = false, director = false, overlay = false) {
} else {
getById("chatNotification").value = 1;
}
getById("chatNotification").classList.add("notification");
getById("chatNotification").classList.add("notification", "red");
}

260
main.css
View File

@ -249,11 +249,6 @@ button.hint {
visibility: hidden;
}
/* #screenshare3button.green{
animation: pulse 5s infinite;
} */
/* Clicked buttons overwrite */
.red {
background-color: #840000 !important;
@ -296,15 +291,6 @@ button.hint {
background-color: #5c7785 !important;
}
/* button.red {
-webkit-app-region: no-drag;
padding: 10px;
margin: 10px 0px;
cursor: pointer;
border-radius: 2px;
color: white;
} */
button {
-webkit-app-region: no-drag;
padding: 7px 10px 6px 6px;
@ -1167,16 +1153,15 @@ hr {
}
.notification {
position: relative;
top: -40px;
right: -33px;
padding: 2px 0;
border-radius: 50%;
background: red;
color: white;
width: 11px;
height: 11px;
margin: 0;
position: absolute;
top: -4px;
right: -4px;
padding: 2px 0;
border-radius: 50%;
color: white;
width: 11px;
height: 11px;
margin: 0;
}
.queueNotification {
position: relative;
@ -1222,9 +1207,10 @@ button.glyphicon-button.active.focus {
position: fixed;
z-index: 995;
padding: 0px 10px;
bottom: 0;
bottom: 10px;
padding: 0 10px;
border: 0;
min-height: 52px;
min-height: 0; /* Must have a min-height or drag-drop doesn't work */
pointer-events: none;
width: 100%;
justify-content: center;
@ -1235,6 +1221,16 @@ button.glyphicon-button.active.focus {
display: none;
}
.controlPositioning {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
align-items: center;
}
#subControlButtons {
display: flex;
position: absolute;
@ -1246,8 +1242,9 @@ button.glyphicon-button.active.focus {
align-items: center;
justify-content: center;
flex-wrap: wrap;
bottom: 3px;
bottom: 0px;
min-width: 230px;
cursor: grab;
}
#subControlButtons:empty{
@ -1270,6 +1267,11 @@ button.glyphicon-button.active.focus {
border-radius: 4px;
}
/* Set for the notification button to use as offset */
#chatbutton {
position: relative;
}
#container.vidcon {
height:100%;
@ -1295,10 +1297,6 @@ button.glyphicon-button.active.focus {
}
@media only screen and (max-width: 640px){
#controlButtons {
/* transform: scale(0.9); */
}
.labelSmall {
display:inherit;
padding:5px;
@ -1323,17 +1321,6 @@ button.glyphicon-button.active.focus {
margin-right: 1px;
}
}
@media only screen and (max-width: 400px){
#controlButtons {
/* transform: scale(0.8); */
}
}
@media only screen and (max-width: 300px){
#controlButtons {
/* transform: scale(0.7); */
}
}
.orange{
background-color: #8d5e1a
@ -1403,9 +1390,6 @@ button.btnArmTransferRoom.selected{
#gridlayout>#container.vidcon {
height:85%
}
#controlButtons {
/* transform: scale(0.9); */
}
#header{
min-height:0px;
}
@ -1423,9 +1407,6 @@ button.btnArmTransferRoom.selected{
#gridlayout>#container.vidcon {
height:78%
}
#controlButtons {
/* transform: scale(0.8); */
}
}
@media only screen and (max-height: 190px){
#gridlayout>#container.vidcon {
@ -1436,9 +1417,6 @@ button.btnArmTransferRoom.selected{
#gridlayout>#container.vidcon {
height:70%
}
#controlButtons {
/* transform: scale(0.7); */
}
}
@media only screen and (max-height: 120px){
#gridlayout>#container.vidcon {
@ -1803,6 +1781,73 @@ input[type=range]:focus::-ms-fill-upper {
}
/* ////// Icon resizing for mobile subControl bar ////// */
@media only screen and (max-width: 500px) {
#subControlButtons {
position: unset;
min-width: unset;
}
#subControlButtons > div {
min-width: 40px;
min-height: 40px;
margin: 4px;
}
#SubControlButtons > div i {
font-size: 28px;
}
}
@media only screen and (max-width: 410px) {
#subControlButtons > div {
min-width: 35px;
min-height: 35px;
border-radius: 6px;
margin: 3px;
}
#SubControlButtons > div i {
font-size: 24px;
}
}
@media only screen and (max-width: 360px) {
#subControlButtons > div {
min-width: 30px;
min-height: 30px;
border-radius: 4px;
margin: 3px;
}
#SubControlButtons > div i {
font-size: 20px;
}
}
@media only screen and (max-width: 320px) {
#subControlButtons > div {
min-width: 28px;
min-height: 28px;
border-radius: 4px;
margin: 3px;
}
#SubControlButtons > div i {
font-size: 18px;
}
}
@media only screen and (max-width: 280px) {
#subControlButtons > div {
min-width: 25px;
min-height: 25px;
border-radius: 4px;
margin: 3px;
}
#SubControlButtons > div i {
font-size: 16px;
}
}
/* //////////////////////////////////// */
@media only screen and (max-height: 650px) {
body {
@ -1848,9 +1893,8 @@ input[type=range]:focus::-ms-fill-upper {
#fakeguest2{
display: none!important;
}
#subControlButtons {
position: unset;
min-width: unset;
#chatModule {
margin-bottom: 5px !important;
}
}
@media only screen and (max-width: 292px) {
@ -1925,11 +1969,6 @@ input[type=range]:focus::-ms-fill-upper {
min-width: 90% !important;
overflow: hidden !important;
}
/* #popupSelector {
padding: 20px 5px 0px 15px !important;
font-size: 92%;
width: 385px !important
} */
.popupSelector_constraints{
margin:25px 15% 0 1%;
}
@ -1949,19 +1988,8 @@ input[type=range]:focus::-ms-fill-upper {
.popupSelector_constraints{
margin:20px 12% 0 2%;
}
/* #popupSelector {
padding: 0 0 20px 0 !important;
} */
}
/* @media only screen and (max-height: 330px) {
#popupSelector {
font-size: 92%;
}
} */
#popupSelector_user_settings label{
color:white;
text-shadow: 0px 0px 6px #000000FF;
@ -2998,10 +3026,9 @@ button.toggleSettings{
}
#videoSourceSelect {
display: inline-block;
flex: 1;
vertical-align: middle;
font-size: 100%;
max-width: 260px;
border: solid 1px #AAA;
border-radius: 4px;
}
@ -3146,6 +3173,7 @@ button.toggleSettings{
vertical-align: middle;
text-align: left;
}
#videoMenu3{
background-color: #f3f3f3;
width: 450px;
@ -3290,23 +3318,20 @@ input[type=checkbox] {
}
.outMessage {
color: #000;
margin: 3px;
border-radius: 5px;
background: #BCF;
padding: 5px;
text-align: right;
margin: 10px 3px;
margin-bottom: 5px;
}
#chatBody {
z-index: 12;
background-color: #0004;
width: 100%;
border-radius: 5px;
padding: 1px 7px;
overflow-y:scroll;
overflow-wrap: anywhere;
max-height: 800px;
line-height: 22px;
z-index: 12;
background-color: #0004;
width: 100%;
border-radius: 5px;
overflow-y: scroll;
overflow-wrap: anywhere;
max-height: 500px;
}
#chatBody::-webkit-scrollbar {
@ -3325,31 +3350,24 @@ div#chatBody a {
}
#chatModule {
bottom: 50px;
position: fixed;
margin: 10px;
align-self: center;
width: 574px;
min-width: 300px;
max-width: 100%;
z-index:3;
display: flex;
flex-wrap: wrap;
z-index: 3;
width: 100%;
max-width: 500px;
z-index: 3;
margin-bottom: 65px;
gap: 0px 5px;
}
#chatInput {
color: #000;
background-color: #FFFE;
max-width: 700px;
min-width: 320px;
width: calc(100% - 89px);
font-size: 105%;
width: 70%;
padding: 3px;
border: 3px solid black;
}
.chatBarInputButton {
width:60px;
background-color:#EEE;
top: -1px;
position: relative;
margin-right: 10px;
width: calc(30% - 5px);
margin: unset;
}
.debugStats {
@ -3447,32 +3465,7 @@ div#chatBody a {
font-weight: bold;
border-bottom: 2px solid #364c84;
}
@media only screen and (max-width: 390px) {
#chatBody {
z-index: 12;
background-color: #FFF1;
width: 100%;
border-radius: 5px;
padding: 1px 7px;
margin: 0px;
}
#chatModule {
bottom: 50px;
position: fixed;
margin: 0px;
align-self: center;
width: 400px;
max-width: 100%;
}
#chatInput {
max-width: 99%;
min-width: 240px;
margin-left: 11px;
font-size: 100%;
}
}
.directorMargins {
margin: var(--director-margin);
}
@ -4980,9 +4973,6 @@ body.darktheme .form-group .multiselect {
body.darktheme h2 {
color: #DDD;
}
body.darktheme button {
/* filter: brightness(0.70); */
}
body.darktheme .column .las {
color: var(--discord-text);
}
@ -5023,9 +5013,9 @@ body.darktheme select{
background-color: var(--discord-grey-7);
color: var(--discord-text);
}
body.darktheme .white {
/* body.darktheme .white {
color: var(--discord-text);
}
} */
body.darktheme .directorsgrid .vidcon {
background-color: var(--discord-grey-3);
color: var(--discord-text);
@ -5056,7 +5046,8 @@ body.darktheme .actionMessage {
background-color: #b1b1b1;
}
body.darktheme #chatInput{
background-color:#ccc;
background-color: var(--discord-grey-7);
color: var(--discord-text)
}
body.darktheme .popup-message{
background-color: #9b9b9b !important;
@ -5148,9 +5139,6 @@ body.darktheme .invite_setting_group_links a {
color:#d2e5ff!important;
}
/* ---- BASIC CSS CLASSES ---- */
.pressed {
background: #1e0000 !important;