Remember user devices preferences on a per conversation basis

Signed-off-by: marco <marcoambrosini@pm.me>

2 files changed, 52 insertions, 1 deletions

diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index e27d2e91d..550cd0841 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -46,6 +46,14 @@
 			<NotificationsSettings :conversation="conversation" />
 		</AppSettingsSection>
 
+		<!-- Devices preview sceren -->
+		<AppSettingsSection
+			:title="t('spreed', 'Device check')">
+			<CheckboxRadioSwitch :checked.sync="showDeviceChecker">
+				{{ t('spreed', 'Always show the device preview screen before joining a call in this conversation.') }}
+			</CheckboxRadioSwitch>
+		</AppSettingsSection>
+
 		<!-- Guest access -->
 		<AppSettingsSection
 			v-if="canFullModerate"
@@ -105,6 +113,8 @@ import DangerZone from './DangerZone'
 import NotificationsSettings from './NotificationsSettings'
 import { showError } from '@nextcloud/dialogs'
 import Description from '../Description/Description'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import BrowserStorage from '../../services/BrowserStorage'
 
 export default {
 	name: 'ConversationSettingsDialog',
@@ -121,6 +131,7 @@ export default {
 		DangerZone,
 		NotificationsSettings,
 		Description,
+		CheckboxRadioSwitch,
 	},
 
 	data() {
@@ -129,7 +140,7 @@ export default {
 			matterbridgeEnabled: loadState('spreed', 'enable_matterbridge'),
 			isEditingDescription: false,
 			isDescriptionLoading: false,
-
+			showDeviceChecker: false,
 		}
 	},
 
@@ -181,9 +192,21 @@ export default {
 		},
 	},
 
+	watch: {
+		showDeviceChecker(newValue) {
+			const browserValue = newValue ? 'true' : 'false'
+			BrowserStorage.setItem('showDeviceChecker' + this.token, browserValue)
+		},
+	},
+
 	mounted() {
 		subscribe('show-conversation-settings', this.handleShowSettings)
 		subscribe('hide-conversation-settings', this.handleHideSettings)
+
+		/**
+		 * Get the deviceChecker value from the browserstorage.
+		 */
+		this.showDeviceChecker = BrowserStorage.getItem('showDeviceChecker' + this.token) === 'true'
 	},
 
 	methods: {
@@ -224,6 +247,7 @@ export default {
 	},
 }
 </script>
+
 <style lang="scss" scoped>
 ::v-deep button.icon {
 	height: 32px;
diff --git a/src/components/DeviceChecker/DeviceChecker.vue b/src/components/DeviceChecker/DeviceChecker.vue
index be6ee6de6..bbb49d40c 100644
--- a/src/components/DeviceChecker/DeviceChecker.vue
+++ b/src/components/DeviceChecker/DeviceChecker.vue
@@ -123,6 +123,10 @@
 						@update:deviceId="videoInputId = $event" />
 				</template>
 			</div>
+			<CheckboxRadioSwitch :checked.sync="showDeviceChecker"
+				class="checkbox">
+				{{ t('spreed', 'Always show this dialog before joining a call in this conversation.') }}
+			</CheckboxRadioSwitch>
 
 			<!-- Join call -->
 			<CallButton
@@ -146,6 +150,8 @@ import VideoOff from 'vue-material-design-icons/VideoOff'
 import { localMediaModel } from '../../utils/webrtc/index'
 import CallButton from '../TopBar/CallButton.vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import BrowserStorage from '../../services/BrowserStorage'
 
 export default {
 	name: 'DeviceChecker',
@@ -161,6 +167,7 @@ export default {
 		Video,
 		VideoOff,
 		CallButton,
+		CheckboxRadioSwitch,
 	},
 
 	mixins: [devices],
@@ -172,6 +179,8 @@ export default {
 			showDeviceSelection: false,
 			audioOn: undefined,
 			videoOn: undefined,
+			showDeviceChecker: true,
+
 		}
 	},
 
@@ -193,6 +202,24 @@ export default {
 		},
 	},
 
+	watch: {
+		modal(newValue) {
+			if (newValue) {
+				this.initializeDevicesMixin()
+			} else {
+				this.stopDevicesMixin()
+			}
+		},
+
+		showDeviceChecker(newValue) {
+			if (newValue) {
+				BrowserStorage.setItem('showDeviceChecker' + this.token, 'true')
+			} else {
+				BrowserStorage.setItem('showDeviceChecker' + this.token, 'false')
+			}
+		},
+	},
+
 	mounted() {
 		subscribe('talk:device-checker:show', this.showModal)
 		subscribe('talk:device-checker:hide', this.closeModal)