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

Add live camera settings to the chat settings modal

Browse Source
This commit is contained in:
Noah 2023-08-11 18:42:06 -07:00
parent ef496b5642
commit 4ee6c106d2
2 changed files with 109 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/static/js/BareRTC.js
View File

@ -312,8 +312,25 @@ const app = Vue.createApp({
status() {
// Send presence updates to the server.
this.sendMe();
},
// Webcam preferences that the user can edit while live.
"webcam.nsfw": function() {
if (this.webcam.active) {
this.sendMe();
}
},
"webcam.mutual": function() {
if (this.webcam.active) {
this.sendMe();
}
},
"webcam.mutualOpen": function() {
if (this.webcam.active) {
this.sendMe();
}
},
},
computed: {
chatHistory() {
if (this.channels[this.channel] == undefined) {
@ -630,6 +647,10 @@ const app = Vue.createApp({
}
}
// Hang up on mutual cameras, if they changed their setting while we
// are already watching them.
this.unMutualVideo();
// Has the back-end server forgotten we are on video? This can
// happen if we disconnect/reconnect while we were streaming.
if (this.webcam.active && !(this.whoMap[this.username]?.video & this.VideoFlag.Active)) {

88
web/templates/chat.html
View File

@ -82,7 +82,12 @@
</li>
<li :class="{'is-active': settingsModal.tab==='sounds'}">
<a href="#" @click.prevent="settingsModal.tab='sounds'">
Sound effects
Sounds
</a>
</li>
<li :class="{'is-active': settingsModal.tab==='webcam'}">
<a href="#" @click.prevent="settingsModal.tab='webcam'">
Camera
</a>
</li>
</ul>
@ -247,6 +252,87 @@
</div>
</div>
<!-- Webcam preferences -->
<div v-if="settingsModal.tab==='webcam'">
<h3 class="subtitle mb-2">
Camera Settings
</h3>
<p class="block mb-1 is-size-7">
The settings on this tab will be relevant only when you are already
broadcasting your camera. They allow you to modify your broadcast settings
while you are already live (for example, to change your mutual camera
preference or select another audio/video device to broadcast from).
</p>
<p class="block mb-1" v-if="config.permitNSFW">
<label class="label">Explicit</label>
</p>
<div class="field" v-if="config.permitNSFW">
<label class="checkbox"
:class="{'cursor-notallowed': !webcam.active}">
<input type="checkbox"
v-model="webcam.nsfw"
:disabled="!webcam.active">
Mark my camera as featuring explicit content
</label>
</div>
<p class="block mb-1">
<label class="label">Mutual webcam options</label>
</p>
<div class="field mb-1">
<label class="checkbox"
:class="{'cursor-notallowed': !webcam.active}">
<input type="checkbox"
v-model="webcam.mutual"
:disabled="!webcam.active">
People must be sharing their own camera before they can open mine
</label>
</div>
<div class="field">
<label class="checkbox"
:class="{'cursor-notallowed': !webcam.active}">
<input type="checkbox"
v-model="webcam.mutualOpen"
:disabled="!webcam.active">
When someone opens my camera, I also open their camera automatically
</label>
</div>
<h3 class="subtitle mb-2" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
Webcam Devices
</h3>
<div class="columns is-mobile" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
<div class="column">
<label class="label">Video source</label>
<div class="select is-fullwidth">
<select v-model="webcam.videoDeviceID" @change="startVideo({changeCamera: true, force: true})">
<option v-for="(d, i) in webcam.videoDevices"
:value="d.id">
[[ d.label || `Camera ${i}` ]]
</option>
</select>
</div>
</div>
<div class="column">
<label class="label">Audio source</label>
<div class="select is-fullwidth">
<select v-model="webcam.audioDeviceID" @change="startVideo({changeCamera: true, force: true})">
<option v-for="(d, i) in webcam.audioDevices"
:value="d.id">
[[ d.label || `Microphone ${i}` ]]
</option>
</select>
</div>
</div>
</div>
</div>
</div>
<footer class="card-footer">
<div class="card-footer-item">