[mirotalkbro] - #10 adding waiting broadcaster...

app/server.js

@@ -8,7 +8,7 @@
  * @license For open source under AGPL-3.0
  * @license For private project or commercial purposes contact us at: [email protected]
  * @author  Miroslav Pejic - [email protected]
- * @version 1.1.14
+ * @version 1.1.15
  */
 
 require('dotenv').config();

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalkbro",
-    "version": "1.1.14",
+    "version": "1.1.15",
     "description": "P2P WebRTC audio, video and screen live broadcast",
     "main": "app/server.js",
     "scripts": {

public/css/common.css

@@ -300,6 +300,20 @@ td button:hover {
     align-items: center;
 }
 
+.overlay {
+    z-index: 1;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 12px;
+    padding: 10px 20px;
+    border-radius: 8px;
+    pointer-events: none;
+    text-align: center;
+}
+
 .fadeIn {
     -webkit-animation: fadeIn ease-in 1;
     -moz-animation: fadeIn ease-in 1;

public/js/utils.js

@@ -309,6 +309,12 @@ function makeDraggable(element, dragObj) {
     }
 }
 
+function hideElement(element) {
+    if (!element.classList.contains('hidden')) {
+        element.classList.add('hidden');
+    }
+}
+
 async function playSound(name) {
     const sound = '../assets/sounds/' + name + '.mp3';
     const audioToPlay = new Audio(sound);

public/js/viewer.js

@@ -10,6 +10,7 @@ console.log('Viewer', {
 
 const body = document.querySelector('body');
 
+const waitingBroadcaster = document.getElementById('waitingBroadcaster');
 const viewerForm = document.getElementById('viewerForm');
 const viewerFormHeader = document.getElementById('viewerFormHeader');
 const viewerButtons = document.getElementById('viewerButtons');
@@ -113,6 +114,7 @@ socket.on('offer', async (id, description, iceServers) => {
     peerConnection.ontrack = (event) => {
         saveRecording();
         attachStream(event.streams[0]);
+        hideElement(waitingBroadcaster);
     };
 
     peerConnection.onicecandidate = (event) => {

public/views/viewer.html

@@ -34,6 +34,7 @@
                 <div class="video-off">
                     <img id="videoOff" class="video-off" src="../assets/images/videoOff.png" />
                 </div>
+                <div id="waitingBroadcaster" class="overlay pulse">Waiting broadcaster...</div>
             </div>
             <label id="recordingLabel" class="pulse">🔴 REC: <span id="recordingTime">0S</span></label>
             <div id="viewerButtons" class="viewer-buttons">