diff --git a/assets/css/components/calls/window.css b/assets/css/components/calls/window.css index cdf35ed6..164477b4 100644 --- a/assets/css/components/calls/window.css +++ b/assets/css/components/calls/window.css @@ -98,6 +98,12 @@ color: rgb(1, 218, 1); } +.call-window .messages-area { + color: white; + margin: 1px 10px; + text-align: center; +} + .call-window .videos-area { display: flex; flex-direction: row; diff --git a/assets/js/components/calls/window.js b/assets/js/components/calls/window.js index 56d9b7bb..7a70f1e9 100644 --- a/assets/js/components/calls/window.js +++ b/assets/js/components/calls/window.js @@ -106,6 +106,13 @@ class CallWindow extends CustomEvents { class: "members-area" }) + // Add message area + this.messageArea = createElem2({ + appendTo: this.rootEl, + type: "div", + class: "messages-area" + }) + // Create videos area this.videosArea = createElem2({ @@ -373,6 +380,9 @@ class CallWindow extends CustomEvents { if(user.userID != userID() && user.ready) await this.PeerReady(user.userID) + // Show appropriate message + this.setMessage("Click on to start to share audio"+ + (this.allowVideo ? " or on to start sharing your camera" : "") + "."); } catch(e) { console.error(e) @@ -505,6 +515,21 @@ class CallWindow extends CustomEvents { this.emitEvent("close"); } + /** + * Display a new message for the window + * + * @param {String} msg New message / null to remove + */ + setMessage(msg) { + if(msg == null) { + this.messageArea.style.display = "none" + } + else { + this.messageArea.style.display = "block"; + this.messageArea.innerHTML = msg; + } + } + /** * Add a member to this call * @@ -608,6 +633,7 @@ class CallWindow extends CustomEvents { */ async toggleStream(isVideo) { + if(isVideo && !this.conv.can_have_video_call) { notify("Video calls can not be done on this conversations!", "danger") return; @@ -766,6 +792,8 @@ class CallWindow extends CustomEvents { */ async startStreaming(includeVideo, shareScreen = false) { + this.setMessage(null) + // Close any previous connection this.closeMainPeer(); this.refreshButtonsState()