<!doctype html>
<html lang="en">
    <head>
        <!-- Title and Icon -->

        <title id="title">MiroTalk SFU - Room Video Calls, Messaging and Screen Sharing.</title>
        <link id="icon" rel="shortcut icon" href="../images/logo.svg" />
        <link id="appleTouchIcon" rel="apple-touch-icon" href="../images/logo.svg" />

        <!-- Meta Information -->

        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta
            id="description"
            name="description"
            content="MiroTalk SFU powered by WebRTC and mediasoup, Real-time Simple Secure Fast video calls, messaging and screen sharing capabilities in the browser."
        />
        <meta
            id="keywords"
            name="keywords"
            content="webrtc, miro, mediasoup, mediasoup-client, self hosted, voip, sip, real-time communications, chat, messaging, meet, webrtc stun, webrtc turn, webrtc p2p, webrtc sfu, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, sfu, rtc, alternative to, zoom, microsoft teams, google meet, jitsi, meeting"
        />

        <!-- https://ogp.me -->

        <meta id="ogType" property="og:type" content="app-webrtc" />
        <meta id="ogSiteName" property="og:site_name" content="MiroTalk SFU" />
        <meta id="ogTitle" property="og:title" content="Click the link to make a call." />
        <meta
            id="ogDescription"
            property="og:description"
            content="MiroTalk SFU calling provides real-time video calls, messaging and screen sharing."
        />
        <meta id="ogImage" property="og:image" content="https://sfu.mirotalk.com/images/mirotalksfu.png" />

        <!-- StyleSheet -->
        <link rel="stylesheet" href="../css/Room.css" />
        <link rel="stylesheet" href="../css/VideoGrid.css" />
        <link rel="stylesheet" href="../css/GroupChat.css" />

        <!-- https://cdnjs.com/libraries/font-awesome -->

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

        <!-- https://animate.style 4 using for swal fadeIn-Out -->

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

        <!-- Bootstrap 5  https://getbootstrap.com/docs/5.0/components/-->

        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />

        <!-- flatpickr  https://flatpickr.js.org/themes/ -->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
        <link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css" />

        <!--  pickr  https://github.com/simonwep/pickr -->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css" />

        <script defer src="../js/Brand.js"></script>

        <!-- Modern or es5 bundle -->
        <script defer src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>

        <!-- Bootstrap 5 -->

        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"
        ></script>

        <!-- axios -->

        <script async src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

        <script async src="../js/Umami.js"></script>

        <!-- Js scripts https://cdn.jsdelivr.net -->

        <script defer src="/socket.io/socket.io.js"></script>
        <script defer src="../sfu/MediasoupClient.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/xss/dist/xss.min.js"></script>
        <script defer src="../js/LocalStorage.js"></script>
        <script defer src="../js/Rules.js"></script>
        <script defer src="../js/Helpers.js"></script>
        <script defer src="../js/SpeechRec.js"></script>
        <script defer src="../js/Transcription.js"></script>
        <script defer src="../js/VideoGrid.js"></script>
        <script defer src="../js/RoomClient.js"></script>
        <script defer src="../js/Room.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/detectrtc@1.4.1/DetectRTC.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/fabric@5.3.0-browser/dist/fabric.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
        <!-- <script defer src="https://unpkg.com/@popperjs/core@2"></script>
        <script defer src="https://unpkg.com/tippy.js@6"></script> -->
        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy-bundle.umd.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.min.js"></script>
        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
    </head>
    <body onload="initClient()">
        <noscript>You need to enable JavaScript to run this app.</noscript>

        <div id="loadingDiv" class="center pulsate">
            <h1>Loading</h1>
            <img src="../images/loading.gif" style="width: 400px" />
            <pre>
Please allow the camera or microphone
access to use this app.
            </pre>
        </div>

        <section>
            <div id="initUser" class="init-user hidden">
                <!-- <p>Please allow the camera & microphone access to use this app.</p> -->
                <div id="initVideoContainer" class="init-video-container">
                    <video
                        id="initVideo"
                        playsinline="true"
                        autoplay=""
                        class="mirror"
                        poster="../images/loader.gif"
                        style="object-fit: contain"
                    ></video>
                </div>
                <div class="initComands">
                    <button
                        id="initVideoAudioRefreshButton"
                        class="fas fa-rotate"
                        onclick="refreshMyAudioVideoDevices()"
                    ></button>
                    <button id="initVideoButton" class="fas fa-video" onclick="handleVideo(event)"></button>
                    <button id="initAudioButton" class="fas fa-microphone" onclick="handleAudio(event)"></button>
                    <button id="initAudioVideoButton" class="fas fa-eye" onclick="handleAudioVideo(event)"></button>
                    <button
                        id="initStartScreenButton"
                        class="fas fa-desktop hidden"
                        onclick="toggleScreenSharing()"
                    ></button>
                    <button
                        id="initStopScreenButton"
                        class="fas fa-stop-circle hidden"
                        onclick="toggleScreenSharing()"
                    ></button>
                    <select id="initVideoSelect" class="form-select text-light bg-dark"></select>
                    <select id="initMicrophoneSelect" class="form-select text-light bg-dark"></select>
                    <select id="initSpeakerSelect" class="form-select text-light bg-dark"></select>
                </div>
            </div>
        </section>

        <div id="control" class="fadein">
            <button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i></button>
            <button id="hideMeButton" class="hidden"><i id="hideMeIcon" class="fas fa-user"></i></button>
            <button id="swapCameraButton" class="hidden"><i class="fas fa-camera-rotate"></i></button>
            <button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i></button>
            <button id="stopVideoButton" class="hidden"><i class="fas fa-video"></i></button>
            <button id="startAudioButton" class="hidden"><i class="fas fa-microphone-slash"></i></button>
            <button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i></button>
            <button id="startScreenButton" class="hidden"><i class="fas fa-desktop"></i></button>
            <button id="stopScreenButton" class="hidden"><i class="fas fa-stop-circle"></i></button>
            <button id="startRecButton" class="hidden"><i class="fas fa-record-vinyl"></i></button>
            <button id="stopRecButton" style="color: red" class="hidden"><i class="fas fa-record-vinyl"></i></button>
            <button id="raiseHandButton" class="hidden"><i class="fas fa-hand-paper"></i></button>
            <button id="lowerHandButton" class="hidden"><i id="lowerHandIcon" class="fas fa-hand-paper"></i></button>
            <button id="emojiRoomButton" class="hidden"><i class="fas fa-face-smile"></i></button>
            <button id="chatButton" class="hidden"><i class="fas fa-comments"></i></button>
            <button id="transcriptionButton" class="hidden"><i class="fas fa-closed-captioning"></i></button>
            <button id="whiteboardButton" class="hidden"><i class="fas fa-chalkboard-teacher"></i></button>
            <button id="settingsButton" class="hidden"><i class="fas fa-cogs"></i></button>
            <button id="aboutButton" class="hidden"><i class="fas fa-question"></i></button>
            <!-- <button id="restartICE" class="hidden"><i class="fas fa-satellite-dish"></i></button> -->
            <button id="exitButton" class="hidden"><i class="fas fa-right-from-bracket"></i></button>
        </div>

        <div id="emojiPickerContainer" class="roomEmoji fadein">
            <div id="emojiPickerHeader" class="emojiPickerHeader">
                <button id="closeEmojiPickerContainer" class="fas fa-times"></button>
            </div>
        </div>
        <div id="userEmoji" class="userEmoji"></div>

        <section id="mySettings" class="fadein center hidden">
            <header id="mySettingsHeader">
                <button id="mySettingsCloseBtn" class="fas fa-times"></button>
            </header>
            <main class="mySettingsMain">
                <div class="tab">
                    <button id="tabRoomBtn" class="fas fa-home tablinks">
                        <p class="tabButtonText">Room</p>
                    </button>
                    <button id="tabVideoDevicesBtn" class="fas fa-video tablinks">
                        <p class="tabButtonText">Video</p>
                    </button>
                    <button id="tabAudioDevicesBtn" class="fas fa-microphone tablinks">
                        <p class="tabButtonText">Audio</p>
                    </button>
                    <button id="tabModeratorBtn" class="fas fa-m tablinks">
                        <p class="tabButtonText">Moderator</p>
                    </button>
                    <button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks">
                        <p class="tabButtonText">Recording</p>
                    </button>
                    <button id="tabVideoShareBtn" class="fab fa-youtube tablinks">
                        <p class="tabButtonText">Media</p>
                    </button>
                    <button id="tabProfileBtn" class="fas fa-user tablinks">
                        <p class="tabButtonText">Profile</p>
                    </button>
                    <button id="tabAspectBtn" class="fas fa-screwdriver-wrench tablinks">
                        <p class="tabButtonText">Aspect</p>
                    </button>
                    <button id="tabStylingBtn" class="fas fa-palette tablinks">
                        <p class="tabButtonText">Style</p>
                    </button>
                    <button id="tabLanguagesBtn" class="fas fa-globe tablinks">
                        <p class="tabButtonText">Language</p>
                    </button>
                </div>

                <div class="tabActions">
                    <div id="tabRoom" class="tabcontent">
                        <button id="fullScreenButton" class="hidden">
                            <i class="fas fa-expand-alt"></i>
                            <p>Full screen mode</p>
                        </button>
                        <br />
                        <button id="fileShareButton" class="hidden">
                            <i class="fas fa-folder-open"></i>
                            <p>File sharing</p>
                        </button>
                        <br />
                        <button id="lockRoomButton" class="hidden">
                            <i class="fas fa-lock-open"></i>
                            <p>Lock room</p>
                        </button>
                        <button id="unlockRoomButton" class="hidden">
                            <i class="fas fa-lock"></i>
                            <p>Unlock room</p>
                        </button>
                        <hr style="border: 1px solid grey" />
                        <table class="settingsTable">
                            <tr id="broadcastingButton" class="hidden">
                                <td class="custom-width">
                                    <div class="title">
                                        <i class="fa-solid fa-wifi"></i>
                                        <p>Broadcast</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md title">
                                        <input id="switchBroadcasting" class="form-check-input" type="checkbox" />
                                    </div>
                                </td>
                            </tr>
                            <tr id="lobbyButton" class="hidden">
                                <td class="custom-width">
                                    <div class="title">
                                        <i class="fas fa-shield-halved"></i>
                                        <p>Lobby</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md title">
                                        <input id="switchLobby" class="form-check-input" type="checkbox" />
                                    </div>
                                </td>
                            </tr>
                            <tr id="pitchBarButton">
                                <td class="custom-width">
                                    <div class="title">
                                        <i class="fas fa-microphone-lines"></i>
                                        <p>Volume bar</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md">
                                        <input id="switchPitchBar" class="form-check-input" type="checkbox" checked />
                                    </div>
                                </td>
                            </tr>
                            <tr id="soundsButton">
                                <td class="custom-width">
                                    <div class="title">
                                        <i class="fas fa-music"></i>
                                        <p>Sounds</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md">
                                        <input id="switchSounds" class="form-check-input" type="checkbox" checked />
                                    </div>
                                </td>
                            </tr>
                            <tr id="shareOnJoinButton">
                                <td class="custom-width">
                                    <div class="title">
                                        <i class="fas fa-share-alt"></i>
                                        <p>Share</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md">
                                        <input id="switchShare" class="form-check-input" type="checkbox" checked />
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <hr style="border: 1px solid grey" />
                        <table class="settingsTable">
                            <tr>
                                <td>
                                    <div class="title">
                                        <i class="fa-solid fa-person-shelter"></i>
                                        <p id="roomId" style="cursor: pointer">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</p>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div id="sendEmailInvitation" class="hidden">
                                        <div class="title">
                                            <i class="fas fa-envelope-circle-check"></i>
                                            <p id="roomSendEmail" style="cursor: pointer">Send email invitation</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="title">
                                        <i class="fas fa-clock"></i>
                                        <p id="sessionTime">00:00:00</p>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div id="tabVideoDevices" class="tabcontent">
                        <br />
                        <div id="refreshVideoDevices" class="title">
                            <i class="fas fa-rotate"></i>
                            <p>Refresh video devices</p>
                        </div>
                        <br />
                        <div class="title">
                            <i class="fas fa-video"></i>
                            <p>Video Source:</p>
                        </div>
                        <select id="videoSelect" class="form-select text-light bg-dark"></select>
                        <br />
                        <div class="title">
                            <i class="fas fa-palette"></i>
                            <p>Video Quality:</p>
                        </div>
                        <select id="videoQuality" class="form-select text-light bg-dark">
                            <option value="default">🎥&nbsp;Default</option>
                            <option value="qvga">🎥&nbsp;QVGA</option>
                            <option value="vga">🎥&nbsp;VGA</option>
                            <option value="hd">🎥&nbsp;HD</option>
                            <option value="fhd">🎥&nbsp;FULL HD</option>
                            <option value="2k">🎥&nbsp;2k</option>
                            <option value="4k">🎥&nbsp;4K</option>
                        </select>
                        <br />
                        <div class="title">
                            <i class="fa-solid fa-camera"></i>
                            <p>Camera FPS:</p>
                        </div>
                        <br />
                        <select id="videoFps" class="form-select text-light bg-dark">
                            <option value="max">max frame-per-second</option>
                            <option value="30">30 - frame-per-second</option>
                            <option value="15">15 - frame-per-second</option>
                            <option value="5">5 - frame-per-second</option>
                        </select>
                        <br />
                        <div id="ScreenFpsDiv" class="hidden">
                            <div class="title">
                                <i class="fa-solid fa-desktop"></i>
                                <p>Screen FPS:</p>
                            </div>
                            <br />
                            <select id="screenFps" class="form-select text-light bg-dark">
                                <option value="max">max frame-per-second</option>
                                <option value="30">30 - frame-per-second</option>
                                <option value="15">15 - frame-per-second</option>
                                <option value="5">5 - frame-per-second</option>
                            </select>
                        </div>
                    </div>

                    <div id="tabAudioDevices" class="tabcontent">
                        <br />
                        <div id="refreshAudioDevices" class="title">
                            <i class="fas fa-rotate"></i>
                            <p>Refresh audio devices</p>
                        </div>
                        <br />
                        <div class="title">
                            <i class="fas fa-microphone"></i>
                            <p>Microphone:</p>
                        </div>
                        <select id="microphoneSelect" class="form-select text-light bg-dark"></select>
                        <br />
                        <div class="volume-container">
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                            <div class="volume-bar"></div>
                        </div>
                        <br />
                        <div class="dropdown">
                            <button
                                class="dropdown-toggle"
                                type="button"
                                id="micOptionsButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >
                                <i class="fas fa-screwdriver-wrench"></i>
                                <p>Advance options</p>
                            </button>
                            <div class="dropdown-menu text-start" aria-labelledby="micOptionsButton">
                                <!-- onclick="event.stopPropagation()" -->
                                <table class="settingsTable">
                                    <tr id="autoGainControlButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-ear-listen"></i> -->
                                                <p>Auto gain control</p>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-check form-switch form-switch-md">
                                                <input
                                                    id="switchAutoGainControl"
                                                    class="form-check-input"
                                                    type="checkbox"
                                                />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="echoCancellationButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-ear-listen"></i> -->
                                                <p>Echo cancellation</p>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-check form-switch form-switch-md">
                                                <input
                                                    id="switchEchoCancellation"
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    checked
                                                />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="noiseSuppressionButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-ear-listen"></i> -->
                                                <p>Noise suppression</p>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-check form-switch form-switch-md">
                                                <input
                                                    id="switchNoiseSuppression"
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    checked
                                                />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="sampleRateButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-microphone-lines"></i> -->
                                                <p>Sample rate</p>
                                            </div>
                                        </td>
                                        <td>
                                            <select
                                                id="sampleRateSelect"
                                                class="form-select form-select-sm text-light bg-dark"
                                            >
                                                <option value="48000">48000 Hz</option>
                                                <option value="44100">44100 Hz</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr id="sampleSizeButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-microphone-lines"></i> -->
                                                <p>Sample size</p>
                                            </div>
                                        </td>
                                        <td>
                                            <select
                                                id="sampleSizeSelect"
                                                class="form-select form-select-sm text-light bg-dark"
                                            >
                                                <option value="16">16 bits</option>
                                                <option value="32">32 bits</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr id="channelCountButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-microphone-lines"></i> -->
                                                <p>Channel count</p>
                                            </div>
                                        </td>
                                        <td>
                                            <select
                                                id="channelCountSelect"
                                                class="form-select form-select-sm text-light bg-dark"
                                            >
                                                <option value="1">1 (mono)</option>
                                                <option value="2">2 (stereo)</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr id="micLatencyButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fab fa-audible"></i> -->
                                                <p>Latency</p>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="title">
                                                <input
                                                    type="range"
                                                    class="form-range"
                                                    id="micLatencyRange"
                                                    name="latency"
                                                    min="10"
                                                    max="1000"
                                                    value="50"
                                                    step="10"
                                                />
                                                <p><span id="micLatencyValue">50</span>&nbsp;ms</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="micVolumeButton">
                                        <td class="microphone-table-width">
                                            <div class="title">
                                                <!-- <i class="fas fa-volume-high"></i> -->
                                                <p>Volume</p>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <input
                                                    type="range"
                                                    class="form-range"
                                                    id="micVolumeRange"
                                                    name="volume"
                                                    min="0"
                                                    max="100"
                                                    value="100"
                                                    step="10"
                                                />
                                                <p><span id="micVolumeValue">100</span>&nbsp;%</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button class="btn btn-primary" id="applyAudioOptionsButton">
                                                Apply options
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div id="speakerSelectDiv">
                            <hr style="border: 1px solid grey" />
                            <div class="title">
                                <i class="fas fa-headphones"></i>
                                <p>Speaker:</p>
                            </div>
                            <select id="speakerSelect" class="form-select text-light bg-dark"></select>
                            <hr style="border: 1px solid grey" />
                            <button id="speakerTestBtn">
                                <i class="fa-solid fa-circle-play"></i>
                                <p>Test speaker</p>
                            </button>
                            <br />
                        </div>
                        <div id="pushToTalkDiv" class="hidden">
                            <hr style="border: 1px solid grey" />
                            <table class="settingsTable">
                                <tr>
                                    <td class="width-150">
                                        <div class="title">
                                            <i class="fa-solid fa-hand-pointer"></i>
                                            <p>Push to talk</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-switch form-switch-md title">
                                            <input id="switchPushToTalk" class="form-check-input" type="checkbox" />
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <br />
                    </div>

                    <div id="tabModerator" class="tabcontent">
                        <table class="settingsTable">
                            <tr id="everyoneMuteBtn">
                                <td style="width: auto">
                                    <div class="title">
                                        <i class="fas fa-microphone-slash"></i>
                                        <p>Everyone starts muted</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md title">
                                        <input id="switchEveryoneMute" class="form-check-input" type="checkbox" />
                                    </div>
                                </td>
                            </tr>
                            <tr id="everyoneHideBtn">
                                <td style="width: auto">
                                    <div class="title">
                                        <i class="fas fa-video-slash"></i>
                                        <p>Everyone starts hidden</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md">
                                        <input
                                            id="switchEveryoneHidden"
                                            class="form-check-input"
                                            type="checkbox"
                                            checked
                                        />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <hr style="border: 1px solid grey" />
                                </td>
                            </tr>
                            <tr id="everyoneCantUnmuteBtn">
                                <td style="width: auto">
                                    <div class="title">
                                        <i class="fas fa-microphone red"></i>
                                        <p>Everyone can't unmute themselves</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md">
                                        <input
                                            id="switchEveryoneCantUnmute"
                                            class="form-check-input"
                                            type="checkbox"
                                            checked
                                        />
                                    </div>
                                </td>
                            </tr>
                            <tr id="everyoneCantUnhideBtn">
                                <td style="width: auto">
                                    <div class="title">
                                        <i class="fas fa-video red"></i>
                                        <p>Everyone can't unhide themselves</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md">
                                        <input
                                            id="switchEveryoneCantUnhide"
                                            class="form-check-input"
                                            type="checkbox"
                                            checked
                                        />
                                    </div>
                                </td>
                            </tr>
                            <tr id="everyoneCantShareScreenBtn">
                                <td style="width: auto">
                                    <div class="title">
                                        <i class="fas fa-display red"></i>
                                        <p>Everyone can't share screen</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md">
                                        <input
                                            id="switchEveryoneCantShareScreen"
                                            class="form-check-input"
                                            type="checkbox"
                                            checked
                                        />
                                    </div>
                                </td>
                            </tr>
                            <tr id="everyoneCantChatPrivatelyBtn">
                                <td style="width: auto">
                                    <div class="title">
                                        <i class="fa-solid fa-comments red"></i>
                                        <p>Everyone can't chat privately</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md">
                                        <input
                                            id="switchEveryoneCantChatPrivately"
                                            class="form-check-input"
                                            type="checkbox"
                                            checked
                                        />
                                    </div>
                                </td>
                            </tr>
                            <tr id="everyoneCantChatGPTBtn">
                                <td style="width: auto">
                                    <div class="title">
                                        <i class="fa-solid fa-robot red"></i>
                                        <p>Everyone can't use ChatGPT</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md">
                                        <input
                                            id="switchEveryoneCantChatChatGPT"
                                            class="form-check-input"
                                            type="checkbox"
                                            checked
                                        />
                                    </div>
                                </td>
                            </tr>
                            <tr id="disconnectAllOnLeave">
                                <td style="width: auto">
                                    <div class="title">
                                        <i class="fas fa-users-slash red"></i>
                                        <p>Disconnect all upon leaving room</p>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check form-switch form-switch-md">
                                        <input
                                            id="switchDisconnectAllOnLeave"
                                            class="form-check-input"
                                            type="checkbox"
                                        />
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div id="tabRecording" class="tabcontent">
                        <img id="recordingImage" class="hidden" src="../images/recording.png" />
                        <div id="roomRecordingOptions" class="hidden">
                            <hr style="border: 1px solid grey" />
                            <table class="settingsTable">
                                <tr>
                                    <td class="width-180">
                                        <div class="title">
                                            <i class="fa-solid fa-film"></i>
                                            <p>Prioritize H.264</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-switch form-switch-md title">
                                            <input id="switchH264Recording" class="form-check-input" type="checkbox" />
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div id="roomHostOnlyRecording" class="hidden">
                            <hr style="border: 1px solid grey" />
                            <table class="settingsTable">
                                <tr>
                                    <td class="width-180">
                                        <div class="title">
                                            <i class="fa-solid fa-user-shield"></i>
                                            <p>Only host</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-switch form-switch-md title">
                                            <input
                                                id="switchHostOnlyRecording"
                                                class="form-check-input"
                                                type="checkbox"
                                            />
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div id="roomRecordingServer" class="hidden">
                            <table class="settingsTable">
                                <tr>
                                    <td class="width-180">
                                        <div class="title">
                                            <i class="fas fa-cloud-arrow-up"></i>
                                            <p>Server</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-switch form-switch-md title">
                                            <input
                                                id="switchServerRecording"
                                                class="form-check-input"
                                                type="checkbox"
                                            />
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <hr style="border: 1px solid grey" />
                        </div>
                        <button id="pauseRecButton" class="hidden">
                            <i class="far fa-pause-circle"></i>
                            <p>Pause recording</p>
                        </button>
                        <button id="resumeRecButton" class="hidden">
                            <i class="far fa-play-circle"></i>
                            <p>Resume recording</p>
                        </button>
                        <div id="recordingTime" class="hidden">
                            <hr style="border: 1px solid grey" />
                            <table class="settingsTable">
                                <tr>
                                    <td class="custom-width">
                                        <div class="title">
                                            <i style="color: red" class="fa-solid fa-circle pulsate"></i>
                                            <p>REC time:</p>
                                        </div>
                                    </td>
                                    <td id="recordingStatus">0s</td>
                                </tr>
                            </table>
                        </div>
                        <div id="recordingMessage" class="hidden">
                            <div class="title">
                                <i class="fa-solid fa-ban fa-2xl"></i>
                                <p>The presenter has disabled meeting recording.</p>
                            </div>
                        </div>
                        <br />
                        <div id="lastRecordingInfo" class="hidden"></div>
                    </div>

                    <div id="tabVideoShare" class="tabcontent">
                        <button id="videoShareButton">
                            <i class="fab fa-youtube"></i>
                            <p>Share a Video or Audio</p>
                        </button>
                        <br />
                        <button id="videoCloseBtn" class="hidden">
                            <i class="fas fa-times"></i>
                            <p>Close Video or Audio</p>
                        </button>
                        <br />
                    </div>

                    <div id="tabProfile" class="tabcontent">
                        <div>
                            <img id="myProfileAvatar" />
                        </div>
                        <table class="settingsTable">
                            <tr>
                                <td>
                                    <div class="title">
                                        <i class="fa-solid fa-user"></i>
                                        <p>Username:</p>
                                        <p id="userName">UserName</p>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="title">
                                        <i class="fa-solid fa-user-shield"></i>
                                        <p>Presenter:</p>
                                        <p id="isUserPresenter">true</p>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div id="tabAspect" class="tabcontent">
                        <br />
                        <div class="title">
                            <i class="fa-solid fa-tv"></i>
                            <p>Aspect ratio:</p>
                        </div>
                        <br />
                        <select id="BtnAspectRatio" class="form-select text-light bg-dark">
                            <option value="0">default</option>
                            <option value="1">4:3</option>
                            <option value="2">16:9</option>
                            <option value="3">1:1</option>
                            <option value="4">1:2</option>
                        </select>
                        <br />
                        <div class="title">
                            <i class="fa-solid fa-film"></i>
                            <p>Video Object fit:</p>
                        </div>
                        <br />
                        <select id="BtnVideoObjectFit" class="form-select text-light bg-dark">
                            <option value="fill">fill</option>
                            <option value="contain">contain</option>
                            <option value="cover">cover</option>
                            <option value="scale-down">scale-down</option>
                            <option value="none">none</option>
                        </select>
                        <br />
                        <div class="title">
                            <i class="fa-solid fa-circle-play"></i>
                            <p>Video Controls:</p>
                        </div>
                        <br />
                        <select id="BtnVideoControls" class="form-select text-light bg-dark">
                            <option value="off">off</option>
                            <option value="on">on</option>
                        </select>
                        <br />
                    </div>

                    <div id="tabStyling" class="tabcontent">
                        <br />
                        <div class="title">
                            <i class="fa-solid fa-palette"></i>
                            <p>Theme:</p>
                        </div>
                        <br />
                        <select id="selectTheme" class="form-select text-light bg-dark">
                            <option value="dark">⚫ &nbsp;Dark</option>
                            <option value="grey">⚪ &nbsp;Grey</option>
                            <option value="green">🟢 &nbsp;Green</option>
                            <option value="blue">🔵 &nbsp;Blue</option>
                            <option value="red">🔴 &nbsp;Red</option>
                        </select>
                        <br />
                        <div class="title">
                            <i class="fas fa-fill-drip"></i>
                            <p>Custom theme:</p>
                        </div>
                        <br />
                        <input id="themeColorPicker" class="theme-color-picker" type="text" />
                        <br />
                        <div class="inline-check-box">
                            <div class="custom-width">
                                <i class="fas fa-save"></i>
                                <p>Keep custom</p>
                            </div>
                            <div class="form-check form-switch form-switch-md title">
                                <input id="keepCustomTheme" class="form-check-input" type="checkbox" />
                            </div>
                        </div>
                        <br />
                        <div class="title">
                            <i class="fa-solid fa-up-down-left-right"></i>
                            <p>Buttons bar:</p>
                        </div>
                        <br />
                        <select id="BtnsBarPosition" class="form-select text-light bg-dark">
                            <option value="vertical">Vertical</option>
                            <option value="horizontal">Horizontal</option>
                        </select>
                        <br />
                        <div id="pinUnpinGridDiv" class="hidden">
                            <div class="title">
                                <i class="fa-solid fa-map-pin"></i>
                                <p>Pin video position:</p>
                            </div>
                            <br />
                            <select id="pinVideoPosition" class="form-select text-light bg-dark">
                                <option value="vertical">Vertical</option>
                                <option value="horizontal">Horizontal</option>
                                <option value="top">Top</option>
                            </select>
                        </div>
                        <br />
                    </div>

                    <div id="tabLanguages" class="tabcontent">
                        <br />
                        <div class="title">
                            <i class="fa-solid fa-language"></i>
                            <p>Language:</p>
                        </div>
                        <br />
                        <div id="google_translate_element"></div>
                        <br />
                    </div>
                </div>
            </main>
        </section>

        <div id="videoPinMediaContainer"></div>
        <div id="videoMediaContainer">
            <!-- <div class="Camera"></div> -->
        </div>
        <div id="localAudio"></div>
        <div id="remoteAudios"></div>

        <div id="sendFileDiv" class="fadein center">
            <img id="imgShareSend" src="../images/share.png" alt="mirotalksfu-share-send" class="center-img" /><br />
            <div id="sendFileInfo"></div>
            <div id="sendFilePercentage"></div>
            <progress id="sendProgress" max="0" value="0"></progress>
            <button id="sendAbortBtn"><i class="fas fa-stop-circle"></i>&nbsp; Abort</button>
        </div>

        <div id="receiveFileDiv" class="fadein center">
            <img
                id="imgShareReceive"
                src="../images/share.png"
                alt="mirotalksfu-share-receive"
                class="center-img"
            /><br />
            <div id="receiveFileInfo"></div>
            <div id="receiveFilePercentage"></div>
            <progress id="receiveProgress" max="0" value="0"></progress>
            <button id="receiveHideBtn"><i class="fas fa-eye-slash"></i>&nbsp; Hide</button>
        </div>

        <section id="whiteboard" class="fadein center hidden">
            <header id="whiteboardHeader" class="whiteboard-header">
                <div id="whiteboardTitle" class="whiteboard-header-title">
                    <button id="whiteboardCloseBtn" class="fas fa-times"></button>
                    <div class="form-check form-switch form-switch-md" style="margin-left: 10px">
                        <input id="whiteboardLockButton" class="form-check-input" type="checkbox" />
                    </div>
                </div>
                <div id="whiteboardOptions" class="whiteboard-header-options">
                    <button id="whiteboardGhostButton" class="fas fa-circle-half-stroke"></button>
                    <input id="wbBackgroundColorEl" class="whiteboardColorPicker" type="color" value="#000000" />
                    <input id="wbDrawingColorEl" class="whiteboardColorPicker" type="color" value="#FFFFFF" />
                    <button id="whiteboardPencilBtn" class="fas fa-pencil-alt"></button>
                    <button id="whiteboardObjectBtn" class="fas fa-mouse-pointer"></button>
                    <button id="whiteboardUndoBtn" class="fas fa-undo"></button>
                    <button id="whiteboardRedoBtn" class="fas fa-redo"></button>
                    <div class="dropdown">
                        <button
                            class="dropdown-toggle"
                            type="button"
                            id="whiteboardDropDownMenu"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                        >
                            <i class="fas fa-ellipsis-vertical"></i>
                        </button>
                        <div class="dropdown-menu text-start" aria-labelledby="whiteboardDropDownMenu">
                            <button id="whiteboardImgFileBtn" class="far fa-image"></button>
                            <button id="whiteboardPdfFileBtn" class="far fa-file-pdf"></button>
                            <button id="whiteboardImgUrlBtn" class="fas fa-link"></button>
                            <button id="whiteboardTextBtn" class="fas fa-spell-check"></button>
                            <button id="whiteboardLineBtn" class="fas fa-slash"></button>
                            <button id="whiteboardRectBtn" class="far fa-square"></button>
                            <button id="whiteboardTriangleBtn" class="fas">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="1em"
                                    height="1em"
                                    viewBox="0 0 24 24"
                                    fill="#FFFFFF"
                                >
                                    <path d="M12 5.887l8.468 14.113h-16.936l8.468-14.113zm0-3.887l-12 20h24l-12-20z" />
                                </svg>
                            </button>
                            <button id="whiteboardCircleBtn" class="far fa-circle"></button>
                            <button id="whiteboardSaveBtn" class="fas fa-save"></button>
                            <button id="whiteboardEraserBtn" class="fas fa-eraser"></button>
                            <button id="whiteboardCleanBtn" class="fas fa-trash"></button>
                        </div>
                    </div>
                </div>
            </header>
            <main>
                <canvas id="wbCanvas"></canvas>
            </main>
        </section>

        <!-- CHAT ROOM CONTAINER -->
        <section id="chatRoom" class="chat-container container fadein hidden">
            <!-- CHAT APP -->
            <div id="chatApp" class="chat-app">
                <!-- CHAT PEOPLE LIST -->
                <div id="plist" class="people-list">
                    <!-- CHAT LIST OPTIONS -->
                    <div>
                        <button id="chatShareRoomBtn"><i class="fas fa-user-plus"></i> Invite user</button>
                        <button id="chatHideParticipantsList" class="float-right">
                            <i class="fas fa-circle-arrow-left"></i>
                        </button>
                        <button id="participantsRaiseHandBtn" class="float-right">
                            <i class="fas fa-hand-paper"></i>
                        </button>
                        <button id="participantsUnreadMessagesBtn" class="float-right">
                            <i class="fas fa-comments"></i>
                        </button>
                        <button id="participantsSaveBtn" class="float-right hidden">
                            <i class="fas fa-save"></i>
                        </button>
                    </div>
                    <br />

                    <!-- CHAT SEARCH -->
                    <div class="input-group mt5">
                        <span class="input-group-text"><i class="fa fa-search"></i></span>
                        <input
                            id="searchParticipantsFromList"
                            type="text"
                            class="form-control"
                            placeholder="Search..."
                            maxlength="36"
                        />
                    </div>

                    <!-- CHAT LIST -->
                    <ul id="participantsList" class="list-unstyled chat-list mt-2 mb-0"></ul>
                </div>

                <!-- CHAT -->
                <div id="chat" class="chat">
                    <!-- CHAT HEADER -->
                    <div id="chatHeader" class="chat-header clearfix">
                        <div class="w-100">
                            <!-- CHAT ABOUT -->
                            <div id="chatAbout" class="text-start">
                                <img
                                    class="all-participants-img"
                                    id="chatShowParticipantsList"
                                    src="../images/participants.png"
                                    alt="participants"
                                />
                                <a data-toggle="modal" data-target="#view_info">
                                    <img src="../images/all.png" alt="avatar" />
                                </a>
                                <div class="chat-about">
                                    <h6 class="mb-0">Public chat</h6>
                                </div>
                            </div>

                            <!-- CHAT OPTIONS -->
                            <div class="chat-option-buttons">
                                <button id="chatTogglePin" class="hidden">
                                    <i class="fas fa-map-pin"></i>
                                </button>
                                <button id="chatMaxButton" class="hidden">
                                    <i class="fas fa-expand"></i>
                                </button>
                                <button id="chatMinButton" class="hidden">
                                    <i class="fas fa-compress"></i>
                                </button>
                                <!-- CHAT MORE OPTIONS -->
                                <div class="dropdown">
                                    <button
                                        class="dropdown-toggle"
                                        type="button"
                                        id="chatDropDownMenu"
                                        data-bs-toggle="dropdown"
                                        aria-expanded="false"
                                    >
                                        <i class="fas fa-bars"></i>
                                    </button>
                                    <ul class="dropdown-menu text-start" aria-labelledby="chatDropDownMenu">
                                        <li>
                                            <hr class="hr" />
                                            <div class="title ml10">
                                                <i class="fa-solid fa-eye"></i>
                                                <div class="form-check form-switch form-switch-md ml10">
                                                    <input
                                                        class="form-check-input"
                                                        type="checkbox"
                                                        id="showChatOnMsg"
                                                        checked
                                                    />
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <hr class="hr" />
                                            <div id="speechMsgDiv" class="title ml10">
                                                <i class="fas fa-volume-high"></i>
                                                <div class="form-check form-switch form-switch-md ml10">
                                                    <input
                                                        class="form-check-input"
                                                        type="checkbox"
                                                        id="speechIncomingMsg"
                                                    />
                                                </div>
                                            </div>
                                            <hr class="hr" />
                                        </li>
                                        <li>
                                            <button id="chatGhostButton" class="btn-sm">
                                                <i class="fas fa-circle-half-stroke"></i> Toggle bg
                                            </button>
                                        </li>
                                        <li>
                                            <button id="chatSaveButton" class="btn-sm">
                                                <i class="fas fa-save"></i> Save messages
                                            </button>
                                        </li>
                                        <li>
                                            <button id="chatCleanButton" class="btn-sm">
                                                <i class="fas fa-trash"></i> Clean messages
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                                <button id="chatCloseButton">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- CHAT HISTORY -->
                    <div id="chatHistory" class="chat-history">
                        <!-- CHAT MESSAGES -->
                        <ul id="chatGPTMessages" class="mb-0"></ul>
                        <ul id="chatPublicMessages" class="mb-0"></ul>
                        <ul id="chatPrivateMessages" class="mb-0"></ul>

                        <!-- CHAT EMOJI -->
                        <div id="chatEmoji" class="hidden fadein chatEmojiPicker"></div>
                    </div>

                    <!-- CHAT MESSAGE -->
                    <div class="chat-message clearfix">
                        <!-- CHAT MESSAGE INPUT -->
                        <div class="input-group mb-0 w-100">
                            <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fas fa-message"></i></span>
                                <textarea
                                    id="chatMessage"
                                    class="form-control"
                                    placeholder="Enter text here..."
                                    rows="1"
                                ></textarea>
                                <!-- <input 
                                    id="chatMessage" 
                                    type="text" 
                                    class="form-control" 
                                    placeholder="Enter text here..."
                                > -->
                            </div>
                        </div>

                        <!-- CHAT MESSAGE OPTIONS  -->
                        <div class="mt10">
                            <button id="chatEmojiButton" class="float-left mr5 hidden">
                                <i class="fas fa-smile"></i>
                            </button>
                            <button id="chatMarkdownButton" class="float-left mr5 hidden">
                                <i class="fab fa-markdown"></i>
                            </button>
                            <button id="chatSpeechStartButton" class="float-left mr5 hidden">
                                <i class="fas fa-microphone-slash"></i>
                            </button>
                            <button id="chatSpeechStopButton" class="float-left mr5 hidden">
                                <i class="fas fa-microphone"></i>
                            </button>
                            <button id="chatPasteButton" class="float-left mr5 hidden">
                                <i class="fas fa-paste"></i>
                            </button>
                            <button id="chatCleanTextButton" class="float-left mr5 hidden">
                                <i class="fas fa-trash"></i>
                            </button>
                            <button id="chatSendButton" class="float-right hidden">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="transcriptionRoom" class="transcription-room fadein">
            <section id="transcriptionSection" class="transcription">
                <header id="transcriptionHeader" class="transcription-header">
                    <div class="transcription-header-title">
                        <button id="transcriptionSpeechStatus" class="fas fa-microphone-alt"></button>
                        <div style="margin-left: 5px" class="title">
                            <i class="fa-solid fa-infinity"></i>
                            <div style="margin-left: 5px" class="form-check form-switch form-switch-md">
                                <input class="form-check-input" type="checkbox" id="transcriptPersistentMode" />
                            </div>
                        </div>
                    </div>
                    <div class="transcription-header-options">
                        <button id="transcriptionTogglePinBtn" class="fas fa-map-pin"></button>
                        <button id="transcriptionMaxBtn" class=""><i class="fas fa-expand"></i></button>
                        <button id="transcriptionMinBtn" class="hidden"><i class="fas fa-compress"></i></button>
                        <div class="dropdown title">
                            <button
                                class="dropdown-toggle"
                                type="button"
                                id="transcriptionDropDownMenu"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >
                                <i class="fas fa-bars"></i>
                            </button>
                            <ul class="dropdown-menu text-start" aria-labelledby="transcriptionDropDownMenu">
                                <li>
                                    <hr class="hr" />
                                    <div class="title ml5">
                                        <i class="fa-solid fa-eye"></i>
                                        <div style="margin-left: 5px" class="form-check form-switch form-switch-md">
                                            <input
                                                class="form-check-input"
                                                type="checkbox"
                                                id="transcriptShowOnMsg"
                                                checked
                                            />
                                        </div>
                                    </div>
                                    <hr class="hr" />
                                </li>
                                <li>
                                    <button id="transcriptionGhostBtn">
                                        <i class="fas fa-circle-half-stroke"></i> Toggle bg
                                    </button>
                                </li>
                                <li>
                                    <button id="transcriptionSaveBtn"><i class="fas fa-save"></i> Save</button>
                                </li>
                                <li>
                                    <button id="transcriptionCleanBtn"><i class="fas fa-trash"></i> Clean</button>
                                </li>
                            </ul>
                        </div>
                        <button id="transcriptionCloseBtn" class="fas fa-times"></button>
                    </div>
                </header>
                <main id="transcriptionChat" class="transcription-chat"></main>
                <div class="transcription-inputarea">
                    <select id="transcriptionLanguage" class="form-select text-light bg-dark"></select>
                    <select id="transcriptionDialect" class="form-select text-light bg-dark"></select>
                    <button id="transcriptionSpeechStart" class=""><i class="fas fa-play"></i></button>
                    <button id="transcriptionSpeechStop" class="hidden"><i class="fas fa-stop"></i></button>
                </div>
            </section>
        </section>

        <div id="transcriptionPopup" class="transcriptio-popup"></div>

        <section id="lobby" class="fadein center">
            <header id="lobbyHeader" class="lobby-header">
                <div id="lobbyHeaderTitle" class="lobby-header-title">Lobby users</div>
            </header>
            <main>
                <div id="lobbyUsers">
                    <table id="lobbyTb">
                        <tr>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        <tr id="lobbyAll">
                            <td>&nbsp;<i class="fas fa-users fa-lg"></i></td>
                            <td>All</td>
                            <td>
                                <button id="lobbyAcceptAllBtn" onclick="rc.lobbyAcceptAll()">
                                    <i class="fas fa-check"></i>
                                </button>
                            </td>
                            <td>
                                <button id="lobbyRejectAllBtn" onclick="rc.lobbyRejectAll()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </td>
                        </tr>
                    </table>
                </div>
            </main>
        </section>

        <!-- 
            Start Google Translate 
        -->
        <script>
            function googleTranslateElementInit() {
                new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
            }
        </script>
        <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    </body>
</html>
