apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Fix bug in mute user modal

Browse Source
This commit is contained in:
Noah 2024-10-27 12:29:01 -07:00
parent f2629ecb06
commit 98bf0d9e84
2 changed files with 151 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.vue
View File

@ -1374,6 +1374,23 @@ export default {
} }
} }
// Common callback handler after the confirmation box.
const callback = () => {
// Hang up videos both ways.
this.closeVideo(username);
this.sendMute(username, mute);
if (mute) {
this.ChatClient(
`You have muted <strong>${username}</strong> and will no longer see their chat messages, ` +
`and they will not see whether your webcam is active. You may unmute them via the Who Is Online list.`);
} else {
this.ChatClient(
`You have unmuted <strong>${username}</strong> and can see their chat messages from now on.`,
);
}
};
if (mute) { if (mute) {
this.modalConfirm({ this.modalConfirm({
title: `Mute ${username}`, title: `Mute ${username}`,
@ -1383,6 +1400,7 @@ export default {
`not be able to see whether your webcam is active until you unmute them.`, `not be able to see whether your webcam is active until you unmute them.`,
}).then(() => { }).then(() => {
this.muted[username] = true; this.muted[username] = true;
callback();
}); });
} else { } else {
this.modalConfirm({ this.modalConfirm({
@ -1393,22 +1411,9 @@ export default {
`they may be able to watch your webcam now if you are broadcasting!`, `they may be able to watch your webcam now if you are broadcasting!`,
}).then(() => { }).then(() => {
delete this.muted[username]; delete this.muted[username];
callback();
}); });
} }
// Hang up videos both ways.
this.closeVideo(username);
this.sendMute(username, mute);
if (mute) {
this.ChatClient(
`You have muted <strong>${username}</strong> and will no longer see their chat messages, ` +
`and they will not see whether your webcam is active. You may unmute them via the Who Is Online list.`);
} else {
this.ChatClient(
`You have unmuted <strong>${username}</strong> and can see their chat messages from now on.`,
);
}
}, },
sendMute(username, mute) { sendMute(username, mute) {
this.client.send({ this.client.send({

152
web/templates/about.html
View File

@ -43,7 +43,10 @@
<hr> <hr>
<h1>Help &amp; Support</h1> <h1 id="help">
Help &amp; Support
<a href="#help" class="fa fa-paragraph is-size-6"></a>
</h1>
<ul> <ul>
<li><a href="#tour">Tour of the user interface</a></li> <li><a href="#tour">Tour of the user interface</a></li>
@ -54,7 +57,10 @@
<li><a href="#troubleshooting">Troubleshooting</a></li> <li><a href="#troubleshooting">Troubleshooting</a></li>
</ul> </ul>
<h1 id="tour">Tour of the user interface</h1> <h1 id="tour">
Tour of the user interface
<a href="#tour" class="fa fa-paragraph is-size-6"></a>
</h1>
<div class="has-text-centered mb-4"> <div class="has-text-centered mb-4">
<img src="/static/img/screenshot.png" width="1269" height="582" alt="Screenshot of the user interface on desktop"> <img src="/static/img/screenshot.png" width="1269" height="582" alt="Screenshot of the user interface on desktop">
@ -200,9 +206,15 @@
<hr> <hr>
<h1 id="features">Feature Highlights</h1> <h1 id="features">
Feature Highlights
<a href="#features" class="fa fa-paragraph is-size-6"></a>
</h1>
<h3 id="emoji-reactions">Emoji Reactions</h3> <h3 id="emoji-reactions">
Emoji Reactions
<a href="#emoji-reactions" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
You may add emoji reactions to chat messages by clicking on the You may add emoji reactions to chat messages by clicking on the
@ -218,7 +230,10 @@
reaction by clicking on it. reaction by clicking on it.
</p> </p>
<h3>Muting spammy users</h3> <h3 id="mute">
Muting spammy users
<a href="#mute" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
If somebody on chat is bothering you, you may <strong>mute</strong> their messages by clicking If somebody on chat is bothering you, you may <strong>mute</strong> their messages by clicking
@ -244,7 +259,10 @@
session (until you log off). session (until you log off).
</p> </p>
<h3 id="markdown">Styling Your Messages</h3> <h3 id="markdown">
Styling Your Messages
<a href="#markdown" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
BareRTC supports Markdown syntax for your chat messages. You can make text <strong>bold</strong> BareRTC supports Markdown syntax for your chat messages. You can make text <strong>bold</strong>
@ -264,9 +282,15 @@
<hr> <hr>
<h1 id="video-sharing">Video Sharing How-To's</h1> <h1 id="video-sharing">
Video Sharing How-To's
<a href="#video-sharing" class="fa fa-paragraph is-size-6"></a>
</h1>
<h3 id="webcam">About webcam sharing</h3> <h3 id="webcam">
About webcam sharing
<a href="#webcam" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
The WebRTC technology used by this chat room allows for direct, <strong>peer to peer</strong> The WebRTC technology used by this chat room allows for direct, <strong>peer to peer</strong>
@ -293,7 +317,10 @@
way so that they may be banned from the chat room. way so that they may be banned from the chat room.
</p> </p>
<h3>How do I go on video?</h3> <h3 id="broadcast">
How do I go on video?
<a href="#broadcast" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
To share your webcam, click on the green To share your webcam, click on the green
@ -326,14 +353,20 @@
</li> </li>
</ul> </ul>
<h3>How do I stop my camera?</h3> <h3 id="stop-webcam">
How do I stop my camera?
<a href="#stop-webcam" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
When you are broadcasting, the red "<i class="fa fa-stop"></i> Stop" button at the top of the When you are broadcasting, the red "<i class="fa fa-stop"></i> Stop" button at the top of the
page will turn your camera off. page will turn your camera off.
</p> </p>
<h3>How do I mute my camera's microphone?</h3> <h3 id="mute-microphone">
How do I mute my camera's microphone?
<a href="#mute-microphone" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
The button to <i class="fa fa-mute"></i> Mute will be at the top of the page next to the The button to <i class="fa fa-mute"></i> Mute will be at the top of the page next to the
@ -341,7 +374,10 @@
your own webcam video preview to toggle the mute that way. Either button works! your own webcam video preview to toggle the mute that way. Either button works!
</p> </p>
<h3>How do I see who is watching me?</h3> <h3 id="watching">
How do I see who is watching me?
<a href="#watching" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
You may click on the <button type="button" class="button is-small is-info is-outlined ml-1 px-1"> You may click on the <button type="button" class="button is-small is-info is-outlined ml-1 px-1">
@ -355,7 +391,10 @@
You may also click on the <i class="fa fa-eye"></i> Watching tab in the Who's Online list. You may also click on the <i class="fa fa-eye"></i> Watching tab in the Who's Online list.
</p> </p>
<h3>How do I stop somebody from watching me?</h3> <h3 id="boot">
How do I stop somebody from watching me?
<a href="#boot" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
On the Who's Online list, click on the <i class="fa fa-eye"></i> Watching tab to see who On the Who's Online list, click on the <i class="fa fa-eye"></i> Watching tab to see who
@ -379,9 +418,64 @@
sure that you have booted them! sure that you have booted them!
</p> </p>
<h3 id="video-size">
How do I make videos larger on my screen?
<a href="#video-size" class="fa fa-paragraph is-size-6"></a>
</h3>
<p>
There are a few methods available to change the size of videos on the chat room,
depending on whether your device has a mouse cursor or is a touch screen (such as a tablet).
</p>
<p>
Options that may work with all devices (with mouse or touch screen):
</p>
<ul>
<li>
Chat Settings: by clicking on the blue menu button on the top-right corner of the page, the
Display tab has a "Video size" dropdown with some options to change the size of all videos
open on your screen.
</li>
<li>
On wide screens (such as an iPad in landscape orientation): when you have videos open, look
for the <i class="fa fa-magnifying-glass-plus"></i> <i class="fa fa-magnifying-glass-minus"></i>
buttons in the header just above the video dock. Clicking on these buttons will scale the docked
videos larger or smaller (in similar increments as the Chat Settings dropdown).
</li>
</ul>
<p>
If you are on a device with a mouse cursor, such as a desktop or a laptop with a touchpad, there
are a couple of ways to resize individual videos how you see fit:
</p>
<ul>
<li>
When videos are docked in the top of the page, hover your mouse over the bottom-right corner
of a video. It should show a 'resize' cursor, and you can click and drag from the bottom-right
corner to resize the video.
</li>
<li>
Videos can also be "popped out" of the dock at the top of the page. The pop-out button appears
on top of videos, next to the mute audio button. When popped out, you can drag videos anywhere
on the page and you can resize them by dragging from any edge except the top.
</li>
</ul>
<p>
And finally: you can put a video "full screen" too. In the control buttons at the bottom of each
video (beginning with the mute audio button), the one on the right will toggle the video into a
full screen view.
</p>
<hr> <hr>
<h1 id="browsers">Supported Browsers</h1> <h1 id="browsers">
Supported Browsers
<a href="#browsers" class="fa fa-paragraph is-size-6"></a>
</h1>
<p> <p>
All features of the chat room, including webcam sharing, should generally work on all current All features of the chat room, including webcam sharing, should generally work on all current
@ -391,7 +485,10 @@
<hr> <hr>
<h1 id="privacy">Privacy</h1> <h1 id="privacy">
Privacy
<a href="#privacy" class="fa fa-paragraph is-size-6"></a>
</h1>
<p> <p>
Some of the privacy considerations with this chat room include: Some of the privacy considerations with this chat room include:
@ -438,15 +535,24 @@
<hr> <hr>
<h1 id="troubleshooting">Troubleshooting</h1> <h1 id="troubleshooting">
Troubleshooting
<a href="#troubleshooting" class="fa fa-paragraph is-size-6"></a>
</h1>
<p> <p>
This section contains some troubleshooting advice for issues commonly experienced in the chat room. This section contains some troubleshooting advice for issues commonly experienced in the chat room.
</p> </p>
<h2>Webcam Sharing</h2> <h2 id="webcam-troubleshooting">
Webcam Sharing
<a href="#webcam-troubleshooting" class="fa fa-paragraph is-size-6"></a>
</h2>
<h3>Permission Denied, or NotAllowedError</h3> <h3 id="NotAllowedError">
Permission Denied, or NotAllowedError
<a href="#NotAllowedError" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
If you see an error message from <strong class="has-text-danger">ChatClient</strong> that says If you see an error message from <strong class="has-text-danger">ChatClient</strong> that says
@ -555,7 +661,10 @@
<li>For more information, try: <a href="https://support.microsoft.com/en-us/windows/manage-app-permissions-for-your-camera-in-windows-87ebc757-1f87-7bbf-84b5-0686afb6ca6b">https://support.microsoft.com/en-us/windows/manage-app-permissions-for-your-camera-in-windows-87ebc757-1f87-7bbf-84b5-0686afb6ca6b</a></li> <li>For more information, try: <a href="https://support.microsoft.com/en-us/windows/manage-app-permissions-for-your-camera-in-windows-87ebc757-1f87-7bbf-84b5-0686afb6ca6b">https://support.microsoft.com/en-us/windows/manage-app-permissions-for-your-camera-in-windows-87ebc757-1f87-7bbf-84b5-0686afb6ca6b</a></li>
</ul> </ul>
<h3>Other Webcam Errors</h3> <h3 id="other-webcam-errors">
Other Webcam Errors
<a href="#other-webcam-errors" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
The most common error is a Permission Error as described above, but there are some less common The most common error is a Permission Error as described above, but there are some less common
@ -587,7 +696,10 @@
be the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">Mozilla documentation for getUserMedia.</a> be the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">Mozilla documentation for getUserMedia.</a>
</p> </p>
<h3>Other peoples' webcams don't load</h3> <h3 id="webcam-not-loading">
Other peoples' webcams don't load
<a href="#webcam-not-loading" class="fa fa-paragraph is-size-6"></a>
</h3>
<p> <p>
It may sometimes happen that you clicked to watch somebody else's webcam on chat, and their video doesn't It may sometimes happen that you clicked to watch somebody else's webcam on chat, and their video doesn't