fix(SIP): get dial-in info from signaling settings

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/RightSidebar/RightSidebar.vue

@@ -68,9 +68,7 @@
 				<InformationOutline :size="20" />
 			</template>
 			<SetGuestUsername v-if="!getUserId" />
-			<SipSettings v-if="showSIPSettings"
-				:meeting-id="conversation.token"
-				:attendee-pin="conversation.attendeePin" />
+			<SipSettings v-if="showSIPSettings" :conversation="conversation" />
 			<div v-if="!getUserId" id="app-settings">
 				<div id="app-settings-header">
 					<NcButton type="tertiary" @click="showSettings">

src/components/RightSidebar/SipSettings.vue

@@ -3,52 +3,52 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import { t } from '@nextcloud/l10n'
+
+import { EventBus } from '../../services/EventBus.ts'
+import { Conversation, SignalingSettings } from '../../types/index.ts'
+import { readableNumber } from '../../utils/readableNumber.ts'
+
+const props = defineProps<{
+	conversation: Conversation,
+}>()
+
+const dialInInfo = ref(t('spreed', 'Loading …'))
+const meetingId = computed(() => readableNumber(props.conversation.token))
+const attendeePin = computed(() => readableNumber(props.conversation.attendeePin))
+
+onMounted(() => {
+	EventBus.on('signaling-settings-updated', setDialInInfoFromSettings)
+})
+onBeforeUnmount(() => {
+	EventBus.off('signaling-settings-updated', setDialInInfoFromSettings)
+})
+
+/**
+ * @param payload emitted payload (array)
+ * @param payload."0" received signaling settings upon joining
+ */
+function setDialInInfoFromSettings([settings]: [SignalingSettings]) {
+	dialInInfo.value = settings.sipDialinInfo
+}
+</script>
+
 <template>
 	<div class="sip-settings">
 		<h3>{{ t('spreed', 'Dial-in information') }}</h3>
 		<p>{{ dialInInfo }}</p>
 
 		<h3>{{ t('spreed', 'Meeting ID') }}</h3>
-		<p>{{ readableNumber(meetingId) }}</p>
+		<p>{{ meetingId }}</p>
 
 		<h3>{{ t('spreed', 'Your PIN') }}</h3>
-		<p>{{ readableNumber(attendeePin) }}</p>
+		<p>{{ attendeePin }}</p>
 	</div>
 </template>
 
-<script>
-import { loadState } from '@nextcloud/initial-state'
-import { t } from '@nextcloud/l10n'
-
-import { readableNumber } from '../../utils/readableNumber.ts'
-
-export default {
-	name: 'SipSettings',
-
-	props: {
-		attendeePin: {
-			type: String,
-			required: true,
-		},
-		meetingId: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			dialInInfo: loadState('spreed', 'sip_dialin_info'),
-		}
-	},
-
-	methods: {
-		t,
-		readableNumber,
-	}
-}
-</script>
-
 <style lang="scss" scoped>
 .sip-settings {
 	h3 {

src/types/index.ts

@@ -55,6 +55,9 @@ export type Notification<T = Record<string, RichObject & Record<string, unknown>
 	actions: NotificationAction[],
 }
 
+// Signaling
+export type SignalingSettings = components['schemas']['SignalingSettings']
+
 // Conversations
 export type Conversation = components['schemas']['Room']
 

src/utils/signaling.js

@@ -124,6 +124,7 @@ Signaling.Base.prototype.setSettings = function(settings) {
 	}
 
 	this.settings = settings
+	this._trigger('settingsUpdated', [this.settings])
 
 	if (this._pendingUpdateSettingsPromise) {
 		this._pendingUpdateSettingsPromise.resolve()
@@ -364,6 +365,8 @@ function Internal(settings) {
 	}.bind(this), 500)
 
 	this._joinCallAgainOnceDisconnected = false
+	// FIXME: Signaling.Base.prototype._trigger() isn't working yet, but we only need to emit event
+	EventBus.emit('signaling-settings-updated', [settings])
 }
 
 Internal.prototype = new Signaling.Base()
@@ -611,6 +614,8 @@ function Standalone(settings, urls) {
 	this.joinedUsers = {}
 	this.rooms = []
 	this.connect()
+	// FIXME: Signaling.Base.prototype._trigger() isn't working yet, but we only need to emit event
+	EventBus.emit('signaling-settings-updated', [settings])
 }
 
 Standalone.prototype = new Signaling.Base()