feat(MediaSettings): remember silent call per conversation

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Mar 7, 2024 · 70d39f4 · 70d39f4
1 parent 4a7b43b
commit 70d39f4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 25 deletions.
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
@@ -159,32 +159,27 @@
 			<!-- buttons bar at the bottom -->
 			<div class="media-settings__call-buttons">
 				<!-- Silent call -->
-				<NcActions v-if="showSilentCallOption"
-					:container="container"
-					:force-menu="true">
-					<template v-if="!silentCall">
-						<NcActionButton :close-after-click="true"
-							icon="icon-upload"
-							:name="t('spreed', 'Call without notification')"
-							@click="silentCall= true">
-							{{ t('spreed', 'The conversation participants will not be notified about this call') }}
-							<template #icon>
-								<BellOff :size="16" />
-							</template>
-						</NcActionButton>
-					</template>
-					<template v-else>
-						<NcActionButton :close-after-click="true"
-							icon="icon-upload"
-							:name="t('spreed', 'Normal call')"
-							@click="silentCall= false">
-							{{ t('spreed', 'The conversation participants will be notified about this call') }}
-							<template #icon>
-								<Bell :size="16" />
-							</template>
-						</NcActionButton>
-					</template>
+				<NcActions v-if="showSilentCallOption" :container="container" force-menu>
+					<NcActionButton v-if="!silentCall"
+						:name="t('spreed', 'Call without notification')"
+						close-after-click
+						@click="setSilentCall(true)">
+						{{ t('spreed', 'The conversation participants will not be notified about this call') }}
+						<template #icon>
+							<BellOff :size="16" />
+						</template>
+					</NcActionButton>
+					<NcActionButton v-else
+						:name="t('spreed', 'Normal call')"
+						close-after-click
+						@click="setSilentCall(false)">
+						<template #icon>
+							<Bell :size="16" />
+						</template>
+						{{ t('spreed', 'The conversation participants will be notified about this call') }}
+					</NcActionButton>
 				</NcActions>
+
 				<!-- Join call -->
 				<CallButton v-if="!isInCall"
 					class="call-button"
@@ -447,6 +442,7 @@ export default {
 			if (newValue) {
 				this.audioOn = !BrowserStorage.getItem('audioDisabled_' + this.token)
 				this.videoOn = !BrowserStorage.getItem('videoDisabled_' + this.token)
+				this.silentCall = !!BrowserStorage.getItem('silentCall_' + this.token)
 
 				// Set virtual background depending on BrowserStorage's settings
 				if (BrowserStorage.getItem('virtualBackgroundEnabled_' + this.token) === 'true') {
@@ -534,6 +530,16 @@ export default {
 			this.videoDeviceStateChanged = !this.videoDeviceStateChanged
 		},
 
+		setSilentCall(value) {
+			if (value) {
+				BrowserStorage.setItem('silentCall_' + this.token, 'true')
+				this.silentCall = true
+			} else {
+				BrowserStorage.removeItem('silentCall_' + this.token)
+				this.silentCall = false
+			}
+		},
+
 		closeModalAndApplySettings() {
 			if (this.updatedBackground) {
 				this.handleUpdateBackground(this.updatedBackground)

diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
@@ -35,6 +35,7 @@
 			@click="handleClick">
 			<template #icon>
 				<PhoneIcon v-if="isPhoneRoom" :size="20" />
+				<VideoOutlineIcon v-else-if="silentCall" :size="20" />
 				<VideoIcon v-else :size="20" />
 			</template>
 			{{ startCallLabel }}
@@ -99,6 +100,7 @@ import PhoneHangup from 'vue-material-design-icons/PhoneHangup.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 import VideoBoxOff from 'vue-material-design-icons/VideoBoxOff.vue'
 import VideoOff from 'vue-material-design-icons/VideoOff.vue'
+import VideoOutlineIcon from 'vue-material-design-icons/VideoOutline.vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -135,6 +137,7 @@ export default {
 		VideoBoxOff,
 		VideoIcon,
 		VideoOff,
+		VideoOutlineIcon,
 	},
 
 	props: {