Merge pull request #11058 from nextcloud/backport/10968/stable28

[stable28] fix(AuthSidebar): Order popups

src/PublicShareAuthSidebar.vue

@@ -40,7 +40,7 @@
 
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
-import { emit } from '@nextcloud/event-bus'
+import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 
 import CallView from './components/CallView/CallView.vue'
@@ -54,6 +54,7 @@ import talkHashCheck from './mixins/talkHashCheck.js'
 import { EventBus } from './services/EventBus.js'
 import {
 	leaveConversationSync,
+	setGuestUserName
 } from './services/participantsService.js'
 import { signalingKill } from './utils/webrtc/index.js'
 
@@ -127,24 +128,29 @@ export default {
 	methods: {
 
 		async joinConversation() {
+			const guestStoredName = localStorage.getItem('nick')
+
 			if (getCurrentUser()) {
 				this.$store.dispatch('setCurrentUser', getCurrentUser())
+			} else if (guestStoredName) {
+				this.$store.dispatch('setDisplayName', guestStoredName)
+			} else {
+				subscribe('talk:guest-name:added', this.showGuestMediaSettings)
 			}
 
 			await this.$store.dispatch('joinConversation', { token: this.token })
 
+			// Add guest name to the store, only possible after joining the conversation
+			if (guestStoredName) {
+				await setGuestUserName(this.token, guestStoredName)
+			}
+
 			// Fetching the conversation needs to be done once the user has
 			// joined the conversation (otherwise only limited data would be
 			// received if the user was not a participant of the conversation
 			// yet).
 			await this.fetchCurrentConversation()
 
-			// Joining the call needs to be done once the participant identifier
-			// has been set, which is done once the conversation has been
-			// fetched. MediaSettings are called to set up audio and video devices
-			// and also to give a consent to recording, if set up
-			emit('talk:media-settings:show')
-
 			// FIXME The participant will not be updated with the server data
 			// when the conversation is got again (as "addParticipantOnce" is
 			// used), although that should not be a problem given that only the
@@ -160,6 +166,14 @@ export default {
 				// instead.
 				this.fetchCurrentConversationIntervalId = window.setInterval(this.fetchCurrentConversation, 30000)
 			}
+
+			if (getCurrentUser() || guestStoredName) {
+				// Joining the call needs to be done once the participant identifier
+				// has been set, which is done once the conversation has been
+				// fetched. MediaSettings are called to set up audio and video devices
+				// and also to give a consent to recording, if set up
+				emit('talk:media-settings:show')
+			}
 		},
 
 		async fetchCurrentConversation() {
@@ -187,6 +201,14 @@ export default {
 				this.$store.dispatch('updateToken', '')
 			}
 		},
+
+		async showGuestMediaSettings() {
+			// Guest needs to add their display name right after joining conversation,
+			// before fetching and showing media settings. Then, this latter will be triggered
+			// by the guest name addition event.
+			emit('talk:media-settings:show')
+			unsubscribe('talk:guest-name:added', this.showGuestMediaSettings)
+		}
 	},
 }
 </script>

src/stores/guestName.js

@@ -25,6 +25,7 @@ import Vue from 'vue'
 
 import { setGuestUserName } from '../services/participantsService.js'
 import store from '../store/index.js'
+import { emit } from '@nextcloud/event-bus'
 
 export const useGuestNameStore = defineStore('guestName', {
 	state: () => ({
@@ -112,6 +113,7 @@ export const useGuestNameStore = defineStore('guestName', {
 				} else {
 					localStorage.removeItem('nick')
 				}
+				emit('talk:guest-name:added')
 
 			} catch (error) {
 				store.dispatch('setDisplayName', previousName)