Move talk global settings to settings dialog

src/App.vue

@@ -33,6 +33,7 @@
 			:show-chat-in-sidebar="isInCall" />
 		<PreventUnload :when="warnLeaving" />
 		<UploadEditor />
+		<SettingsDialog />
 	</Content>
 </template>
 
@@ -63,6 +64,7 @@ import isInCall from './mixins/isInCall'
 import talkHashCheck from './mixins/talkHashCheck'
 import { generateUrl } from '@nextcloud/router'
 import UploadEditor from './components/UploadEditor'
+import SettingsDialog from './components/SettingsDialog/SettingsDialog'
 
 export default {
 	name: 'App',
@@ -73,6 +75,7 @@ export default {
 		PreventUnload,
 		RightSidebar,
 		UploadEditor,
+		SettingsDialog,
 	},
 
 	mixins: [

src/components/LeftSidebar/LeftSidebar.vue

@@ -84,21 +84,19 @@
 		</template>
 
 		<template #footer>
-			<AppNavigationSettings>
-				<label>{{ t('spreed', 'Default location for attachments') }}</label>
-				<input
-					type="text"
-					:value="attachmentFolder"
-					:disabled="attachmentFolderLoading"
-					@click="selectAttachmentFolder">
-			</AppNavigationSettings>
+			<div id="app-settings">
+				<div id="app-settings-header">
+					<button class="settings-button" @click="showSettings">
+						{{ t('spreed', 'Settings') }}
+					</button>
+				</div>
+			</div>
 		</template>
 	</AppNavigation>
 </template>
 
 <script>
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
 import Caption from '../Caption'
 import ConversationsList from './ConversationsList/ConversationsList'
 import ConversationsOptionsList from '../ConversationsOptionsList'
@@ -110,19 +108,16 @@ import {
 	createGroupConversation, createOneToOneConversation,
 	searchPossibleConversations,
 } from '../../services/conversationsService'
-import { setAttachmentFolder } from '../../services/settingsService'
 import { CONVERSATION } from '../../constants'
 import { loadState } from '@nextcloud/initial-state'
 import NewGroupConversation from './NewGroupConversation/NewGroupConversation'
-import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
 
 export default {
 
 	name: 'LeftSidebar',
 
 	components: {
 		AppNavigation,
-		AppNavigationSettings,
 		Caption,
 		ConversationsList,
 		ConversationsOptionsList,
@@ -141,7 +136,6 @@ export default {
 			contactsLoading: false,
 			isCirclesEnabled: loadState('talk', 'circles_enabled'),
 			canStartConversations: loadState('talk', 'start_conversations'),
-			attachmentFolderLoading: true,
 		}
 	},
 
@@ -192,10 +186,6 @@ export default {
 			}
 			return t('spreed', 'Other sources')
 		},
-
-		attachmentFolder() {
-			return this.$store.getters.getAttachmentFolder()
-		},
 	},
 
 	beforeMount() {
@@ -207,10 +197,6 @@ export default {
 		})
 	},
 
-	mounted() {
-		this.attachmentFolderLoading = false
-	},
-
 	methods: {
 		debounceFetchSearchResults: debounce(function() {
 			if (this.isSearching) {
@@ -259,33 +245,8 @@ export default {
 			this.searchText = ''
 		},
 
-		selectAttachmentFolder() {
-			const picker = getFilePickerBuilder(t('spreed', 'Select default location for attachments'))
-				.setMultiSelect(false)
-				.setModal(true)
-				.setType(1)
-				.addMimeTypeFilter('httpd/unix-directory')
-				.allowDirectories()
-				.startAt(this.attachmentFolder)
-				.build()
-			picker.pick()
-				.then(async(path) => {
-					console.debug(`Path '${path}' selected for talk attachments`)
-					if (path !== '' && !path.startsWith('/')) {
-						throw new Error(t('spreed', 'Invalid path selected'))
-					}
-
-					const oldFolder = this.attachmentFolder
-					this.attachmentFolderLoading = true
-					try {
-						this.$store.commit('setAttachmentFolder', path)
-						await setAttachmentFolder(path)
-					} catch (exception) {
-						showError(t('spreed', 'Error while setting attachment folder'))
-						this.$store.commit('setAttachmentFolder', oldFolder)
-					}
-					this.attachmentFolderLoading = false
-				})
+		showSettings() {
+			EventBus.$emit('show-settings', true)
 		},
 	},
 }

src/components/MediaDevicesPreview.vue

@@ -250,16 +250,19 @@ export default {
 	},
 
 	watch: {
-		enabled(enabled) {
-			if (this.enabled) {
-				this.mediaDevicesManager.enableDeviceEvents()
-				this.updateAudioStream()
-				this.updateVideoStream()
-			} else {
-				this.mediaDevicesManager.disableDeviceEvents()
-				this.stopAudioStream()
-				this.stopVideoStream()
-			}
+		enabled: {
+			handler: function(enabled) {
+				if (this.enabled) {
+					this.mediaDevicesManager.enableDeviceEvents()
+					this.updateAudioStream()
+					this.updateVideoStream()
+				} else {
+					this.mediaDevicesManager.disableDeviceEvents()
+					this.stopAudioStream()
+					this.stopVideoStream()
+				}
+			},
+			immediate: true,
 		},
 
 		audioInputId(audioInputId) {
@@ -475,7 +478,6 @@ export default {
 <style lang="scss" scoped>
 .preview {
 	display: flex;
-	justify-content: center;
 
 	.icon {
 		background-size: 64px;
@@ -527,14 +529,15 @@ export default {
 }
 
 .preview-video {
+	margin-top: 24px;
 	.preview-not-available .icon {
-		margin-top: 64px;
+		margin-top: 16px;
 		margin-bottom: 16px;
 	}
 
 	video {
 		display: block;
-		max-height: 192px;
+		width: 100%;
 	}
 }
 </style>

src/components/MediaDevicesSelector.vue

@@ -20,7 +20,9 @@
 
 <template>
 	<div class="media-devices-selector">
-		<label :for="deviceSelectorId">{{ deviceSelectorLabel }}</label>
+		<h3 class="media-devices-selector__heading" :for="deviceSelectorId">
+			{{ deviceSelectorLabel }}
+		</h3>
 		<Multiselect :id="deviceSelectorId"
 			v-model="deviceSelectedOption"
 			:options="deviceOptions"
@@ -77,11 +79,11 @@ export default {
 
 		deviceSelectorLabel() {
 			if (this.kind === 'audioinput') {
-				return t('spreed', 'Microphone:')
+				return t('spreed', 'Microphone')
 			}
 
 			if (this.kind === 'videoinput') {
-				return t('spreed', 'Camera:')
+				return t('spreed', 'Camera')
 			}
 
 			return null
@@ -158,16 +160,14 @@ export default {
 
 <style lang="scss" scoped>
 .media-devices-selector {
-	display: flex;
-	align-items: center;
-
-	margin-top: 5px;
-	margin-bottom: 5px;
+	margin-top: 28px;
+	margin-bottom: 8px;
+	&__heading {
+		font-weight: bold;
+	}
 
 	.multiselect {
-		flex-grow: 1;
-
-		margin-left: 5px;
+		width: 100%;
 	}
 }
 </style>

src/components/RightSidebar/RightSidebar.vue

@@ -60,13 +60,13 @@
 				:id="conversation.token"
 				type="room"
 				:name="conversation.displayName" />
-		</AppSidebarTab>
-		<AppSidebarTab
-			id="preview"
-			:order="4"
-			:name="t('spreed', 'Preview')"
-			icon="icon-video">
-			<MediaDevicesPreview :enabled="!showChatInSidebar && activeTab === 'preview'" />
+			<div id="app-settings">
+				<div id="app-settings-header">
+					<button class="settings-button" @click="showSettings">
+						{{ t('spreed', 'Settings') }}
+					</button>
+				</div>
+			</div>
 		</AppSidebarTab>
 	</AppSidebar>
 </template>
@@ -75,7 +75,6 @@
 import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
 import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
 import ChatView from '../ChatView'
-import MediaDevicesPreview from '../MediaDevicesPreview'
 import { CollectionList } from 'nextcloud-vue-collections'
 import BrowserStorage from '../../services/BrowserStorage'
 import { CONVERSATION, WEBINAR, PARTICIPANT } from '../../constants'
@@ -87,6 +86,7 @@ import {
 } from '../../services/conversationsService'
 import isInLobby from '../../mixins/isInLobby'
 import SetGuestUsername from '../SetGuestUsername'
+import { EventBus } from '../../services/EventBus'
 
 export default {
 	name: 'RightSidebar',
@@ -95,7 +95,6 @@ export default {
 		AppSidebarTab,
 		ChatView,
 		CollectionList,
-		MediaDevicesPreview,
 		ParticipantsTab,
 		SetGuestUsername,
 	},
@@ -247,6 +246,10 @@ export default {
 			this.$store.dispatch('isRenamingConversation', false)
 		},
 
+		showSettings() {
+			EventBus.$emit('show-settings', true)
+		},
+
 	},
 }
 </script>