Add live camera settings to the chat settings modal
This commit is contained in:
parent
ef496b5642
commit
4ee6c106d2
|
|
@ -312,7 +312,24 @@ const app = Vue.createApp({
|
||||||
status() {
|
status() {
|
||||||
// Send presence updates to the server.
|
// Send presence updates to the server.
|
||||||
this.sendMe();
|
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: {
|
computed: {
|
||||||
chatHistory() {
|
chatHistory() {
|
||||||
|
|
@ -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
|
// Has the back-end server forgotten we are on video? This can
|
||||||
// happen if we disconnect/reconnect while we were streaming.
|
// happen if we disconnect/reconnect while we were streaming.
|
||||||
if (this.webcam.active && !(this.whoMap[this.username]?.video & this.VideoFlag.Active)) {
|
if (this.webcam.active && !(this.whoMap[this.username]?.video & this.VideoFlag.Active)) {
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,12 @@
|
||||||
</li>
|
</li>
|
||||||
<li :class="{'is-active': settingsModal.tab==='sounds'}">
|
<li :class="{'is-active': settingsModal.tab==='sounds'}">
|
||||||
<a href="#" @click.prevent="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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -247,6 +252,87 @@
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<footer class="card-footer">
|
<footer class="card-footer">
|
||||||
<div class="card-footer-item">
|
<div class="card-footer-item">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user