From d5d93bdf054b5fbbfabc8466c8c067b7e1ae4bd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Wed, 22 Sep 2021 08:37:37 +0000
Subject: [PATCH] [FIX] mail: remove webRTC component excessive getters

X-original-commit: 9bf4b6c29207b97368f27098df3cfbe79e2b5f0f
Part-of: odoo/odoo#77107
---
 .../rtc_activity_notice.js                    | 13 +------
 .../rtc_activity_notice.xml                   |  6 +--
 .../rtc_call_viewer/rtc_call_viewer.js        | 14 -------
 .../rtc_call_viewer/rtc_call_viewer.xml       |  4 +-
 .../rtc_configuration_menu.js                 | 28 +++-----------
 .../rtc_configuration_menu.xml                | 22 +++++------
 .../rtc_controller/rtc_controller.js          | 14 -------
 .../rtc_controller/rtc_controller.xml         | 38 +++++++++----------
 .../rtc_invitations/rtc_invitations.js        | 15 +-------
 .../rtc_invitations/rtc_invitations.xml       |  4 +-
 10 files changed, 44 insertions(+), 114 deletions(-)

diff --git a/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.js b/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.js
index 404440e3069..a5c947bc88d 100644
--- a/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.js
+++ b/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.js
@@ -6,17 +6,6 @@ const { Component } = owl;
 
 export class RtcActivityNotice extends Component {
 
-    //--------------------------------------------------------------------------
-    // Getters / Setters
-    //--------------------------------------------------------------------------
-
-    /**
-     * @returns {mail.thread|undefined}
-     */
-    get thread() {
-        return this.messaging && this.messaging.mailRtc.channel;
-    }
-
     //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------
@@ -26,7 +15,7 @@ export class RtcActivityNotice extends Component {
      * @param {MouseEvent} ev
      */
     _onClick(ev) {
-        this.thread.open();
+        this.messaging.mailRtc.channel.open();
     }
 
 }
diff --git a/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml b/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml
index bdbcf29b983..23aa4cc6975 100644
--- a/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml
+++ b/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml
@@ -4,11 +4,11 @@
     <t t-name="mail.RtcActivityNotice" owl="1">
         <li class="o_RtcActivityNotice">
             <RtcInvitations/>
-            <t t-if="thread">
-                <t t-set="title">Open conference: <t t-esc="thread.displayName"/></t>
+            <t t-if="messaging.mailRtc.channel">
+                <t t-set="title">Open conference: <t t-esc="messaging.mailRtc.channel.displayName"/></t>
                 <a class="o_RtcActivityNotice_button" t-att-title="title" role="button" t-on-click="_onClick">
                     <div class="o_RtcActivityNotice_buttonContent">
-                        <span class="o_RtcActivityNotice_buttonTitle" t-esc="thread.displayName"/>
+                        <span class="o_RtcActivityNotice_buttonTitle" t-esc="messaging.mailRtc.channel.displayName"/>
                         <i class="o_RtcActivityNotice_outputIndicator fa" t-att-class="{
                             'fa-microphone': !messaging.mailRtc.sendDisplay and !messaging.mailRtc.sendUserVideo,
                             'fa-video-camera': messaging.mailRtc.sendUserVideo,
diff --git a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.js b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.js
index 9313273fefa..2af6d936bf9 100644
--- a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.js
+++ b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.js
@@ -41,20 +41,6 @@ export class RtcCallViewer extends Component {
         return this.messaging.models['mail.rtc_call_viewer'].get(this.props.localId);
     }
 
-    /**
-     * Used to make the component depend on the window size and trigger an
-     * update when the window size changes.
-     *
-     * @returns {Object|undefined}
-     */
-    get windowSize() {
-        const device = this.messaging && this.messaging.device;
-        return device && {
-            innerHeight: device.globalWindowInnerHeight,
-            innerWidth: device.globalWindowInnerWidth,
-        };
-    }
-
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml
index fc014f5c46d..6fbc044891b 100644
--- a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml
+++ b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml
@@ -5,8 +5,8 @@
     <div class="o_RtcCallViewer" t-att-class="{ 'o-fullScreen': rtcCallViewer and rtcCallViewer.isFullScreen, 'o-isMinimized': rtcCallViewer and rtcCallViewer.isMinimized }">
         <t t-if="rtcCallViewer">
 
-            <!-- used to make the template depend on window size -->
-            <t t-set="sizeChangeListener" t-value="windowSize"/>
+            <!-- Used to make the component depend on the window size and trigger an update when the window size changes. -->
+            <t t-set="dummy" t-value="messaging and messaging.device and messaging.device.globalWindowInnerHeight and messaging.device.globalWindowInnerWidth"/>
 
             <!-- Call members display -->
             <div class="o_RtcCallViewer_participantContainer" t-on-click="rtcCallViewer.onClick" t-on-mousemove="rtcCallViewer.onMouseMove">
diff --git a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.js b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.js
index 32324646162..aa05c9938a7 100644
--- a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.js
+++ b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.js
@@ -23,24 +23,6 @@ export class RtcConfigurationMenu extends Component {
         this.state.userDevices = await browser.navigator.mediaDevices.enumerateDevices();
     }
 
-    //--------------------------------------------------------------------------
-    // Getters / Setters
-    //--------------------------------------------------------------------------
-
-    /**
-     * @returns {mail.configuration_menu}
-     */
-    get rtcConfigurationMenu() {
-        return this.messaging && this.messaging.userSetting.rtcConfigurationMenu;
-    }
-
-    /**
-     * @returns {mail.user_setting}
-     */
-    get userSetting() {
-        return this.messaging && this.messaging.userSetting;
-    }
-
     //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------
@@ -50,7 +32,7 @@ export class RtcConfigurationMenu extends Component {
      * @param {Event} ev
      */
     _onChangeDelay(ev) {
-        this.rtcConfigurationMenu.onChangeDelay(ev.target.value);
+        this.messaging.rtcConfigurationMenu.onChangeDelay(ev.target.value);
     }
 
     /**
@@ -58,7 +40,7 @@ export class RtcConfigurationMenu extends Component {
      * @param {Event} ev
      */
     _onChangePushToTalk(ev) {
-        this.rtcConfigurationMenu.onChangePushToTalk();
+        this.messaging.rtcConfigurationMenu.onChangePushToTalk();
     }
 
     /**
@@ -66,7 +48,7 @@ export class RtcConfigurationMenu extends Component {
      * @param {Event} ev
      */
     _onChangeSelectAudioInput(ev) {
-        this.rtcConfigurationMenu.onChangeSelectAudioInput(ev.target.value);
+        this.messaging.rtcConfigurationMenu.onChangeSelectAudioInput(ev.target.value);
     }
 
     /**
@@ -74,7 +56,7 @@ export class RtcConfigurationMenu extends Component {
      * @param {Event} ev
      */
     _onChangeThreshold(ev) {
-        this.rtcConfigurationMenu.onChangeThreshold(ev.target.value);
+        this.messaging.rtcConfigurationMenu.onChangeThreshold(ev.target.value);
     }
 
     /**
@@ -82,7 +64,7 @@ export class RtcConfigurationMenu extends Component {
      * @param {MouseEvent} ev
      */
     _onClickRegisterKeyButton() {
-        this.rtcConfigurationMenu.onClickRegisterKeyButton();
+        this.messaging.rtcConfigurationMenu.onClickRegisterKeyButton();
     }
 }
 
diff --git a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
index da961426636..5cc1d2b9c5d 100644
--- a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
+++ b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
@@ -7,7 +7,7 @@
                 <label class="o_RtcConfigurationMenu_optionLabel" title="Input device" aria-label="Input device">
                     <span class="o_RtcConfigurationMenu_optionName">Input device</span>
                     <div>
-                        <select name="inputDevice" class="o_RtcConfigurationMenu_optionDeviceSelect" t-att-value="userSetting.audioInputDeviceId" t-on-change="_onChangeSelectAudioInput">
+                        <select name="inputDevice" class="o_RtcConfigurationMenu_optionDeviceSelect" t-att-value="messaging.userSetting.audioInputDeviceId" t-on-change="_onChangeSelectAudioInput">
                             <option value="">Browser default</option>
                             <t t-if="state.userDevices" t-foreach="state.userDevices" t-as="device">
                                 <t t-if="device.kind === 'audioinput'">
@@ -21,19 +21,19 @@
             <div class="o_RtcConfigurationMenu_option">
                 <label class="o_RtcConfigurationMenu_optionLabel" title="Use Push-to-talk" aria-label="Use Push-to-talk">
                     <span class="o_RtcConfigurationMenu_optionName">Use Push-to-talk</span>
-                    <input type="checkbox" aria-label="toggle push-to-talk" title="toggle push-to-talk" t-on-change="_onChangePushToTalk" t-att-checked="userSetting.usePushToTalk ? 'checked' : ''"/>
+                    <input type="checkbox" aria-label="toggle push-to-talk" title="toggle push-to-talk" t-on-change="_onChangePushToTalk" t-att-checked="messaging.userSetting.usePushToTalk ? 'checked' : ''"/>
                 </label>
             </div>
-            <t t-if="userSetting.usePushToTalk">
+            <t t-if="messaging.userSetting.usePushToTalk">
                 <div class="o_RtcConfigurationMenu_option">
                     <label class="o_RtcConfigurationMenu_optionLabel" title="Push-to-talk key" aria-label="Push-to-talk key">
                         <span class="o_RtcConfigurationMenu_optionName">Push-to-talk key</span>
                         <span class="o_RtcConfigurationMenu_optionPushToTalkGroup">
-                            <t t-if="userSetting.pushToTalkKey">
-                                <span class="o_RtcConfigurationMenu_optionPushToTalkGroupKey" t-att-class="{ 'o-isRegistering': rtcConfigurationMenu.isRegisteringKey }" t-esc="userSetting.pushToTalkKeyToString()"/>
+                            <t t-if="messaging.userSetting.pushToTalkKey">
+                                <span class="o_RtcConfigurationMenu_optionPushToTalkGroupKey" t-att-class="{ 'o-isRegistering': messaging.userSetting.rtcConfigurationMenu.isRegisteringKey }" t-esc="messaging.userSetting.pushToTalkKeyToString()"/>
                             </t>
                             <button class="o_RtcConfigurationMenu_button" t-on-click="_onClickRegisterKeyButton">
-                                <t t-if="rtcConfigurationMenu.isRegisteringKey">
+                                <t t-if="messaging.userSetting.rtcConfigurationMenu.isRegisteringKey">
                                     <i title="Cancel" aria-label="Cancel" class="fa fa-2x fa-times-circle"/>
                                 </t>
                                 <t t-else="">
@@ -44,13 +44,13 @@
                     </label>
 
                 </div>
-                <div t-if="rtcConfigurationMenu.isRegisteringKey">Press a key to register it as the push-to-talk shortcut</div>
+                <div t-if="messaging.userSetting.rtcConfigurationMenu.isRegisteringKey">Press a key to register it as the push-to-talk shortcut</div>
                 <div class="o_RtcConfigurationMenu_option">
                     <label class="o_RtcConfigurationMenu_optionLabel" title="Delay after releasing push-to-talk" aria-label="Delay after releasing push-to-talk">
                         <span class="o_RtcConfigurationMenu_optionName">Delay after releasing push-to-talk</span>
                         <div class="o_RtcConfigurationMenu_optionInputGroup">
-                        <input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="1" max="2000" step="1" t-att-value="userSetting.voiceActiveDuration" t-on-change="_onChangeDelay"/>
-                        <span class="o_RtcConfigurationMenu_optionInputGroupValue"><t t-esc="userSetting.voiceActiveDuration"/>ms</span>
+                        <input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="1" max="2000" step="1" t-att-value="messaging.userSetting.voiceActiveDuration" t-on-change="_onChangeDelay"/>
+                        <span class="o_RtcConfigurationMenu_optionInputGroupValue"><t t-esc="messaging.userSetting.voiceActiveDuration"/>ms</span>
                         </div>
                     </label>
                 </div>
@@ -60,8 +60,8 @@
                     <label class="o_RtcConfigurationMenu_optionLabel" title="Minimum activity for voice detection" aria-label="Minimum activity for voice detection">
                         <span class="o_RtcConfigurationMenu_optionName">Minimum activity for voice detection</span>
                         <div class="o_RtcConfigurationMenu_optionInputGroup">
-                            <input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="0.001" max="1" step="0.001" t-att-value="userSetting.voiceActivationThreshold" t-on-change="_onChangeThreshold"/>
-                            <span class="o_RtcConfigurationMenu_optionInputGroupValue"><t t-esc="userSetting.voiceActivationThreshold"/></span>
+                            <input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="0.001" max="1" step="0.001" t-att-value="messaging.userSetting.voiceActivationThreshold" t-on-change="_onChangeThreshold"/>
+                            <span class="o_RtcConfigurationMenu_optionInputGroupValue"><t t-esc="messaging.userSetting.voiceActivationThreshold"/></span>
                         </div>
                     </label>
                 </div>
diff --git a/addons/mail/static/src/components/rtc_controller/rtc_controller.js b/addons/mail/static/src/components/rtc_controller/rtc_controller.js
index 0677eba3283..3a84329b1c0 100644
--- a/addons/mail/static/src/components/rtc_controller/rtc_controller.js
+++ b/addons/mail/static/src/components/rtc_controller/rtc_controller.js
@@ -17,20 +17,6 @@ export class RtcController extends Component {
         return this.messaging && this.messaging.models['mail.rtc_controller'].get(this.props.localId);
     }
 
-    /**
-     * @returns {mail.thread}
-     */
-    get rtcSession() {
-        return this.messaging && this.messaging.mailRtc.currentRtcSession;
-    }
-
-    /**
-     * @returns {mail.thread|undefined}
-     */
-    get thread() {
-        return this.rtcController && this.rtcController.callViewer.threadView.thread;
-    }
-
 }
 
 Object.assign(RtcController, {
diff --git a/addons/mail/static/src/components/rtc_controller/rtc_controller.xml b/addons/mail/static/src/components/rtc_controller/rtc_controller.xml
index 080ecd35ab6..ffa2d32658e 100644
--- a/addons/mail/static/src/components/rtc_controller/rtc_controller.xml
+++ b/addons/mail/static/src/components/rtc_controller/rtc_controller.xml
@@ -5,36 +5,36 @@
         <div class="o_RtcController">
             <t t-if="rtcController">
                 <div class="o_RtcController_buttons">
-                    <t t-if="thread.mailRtc and rtcSession">
-                        <t t-if="rtcSession.isMuted"><t t-set="microphoneTitle">Unmute</t></t>
+                    <t t-if="rtcController.callViewer.threadView.thread.mailRtc and messaging.mailRtc.currentRtcSession">
+                        <t t-if="messaging.mailRtc.currentRtcSession.isMuted"><t t-set="microphoneTitle">Unmute</t></t>
                         <t t-else=""><t t-set="microphoneTitle">Mute</t></t>
                         <button class="o_RtcController_button"
-                            t-att-class="{ 'o-isActive': !rtcSession.isMuted, 'o-isSmall': rtcController.isSmall }"
+                            t-att-class="{ 'o-isActive': !messaging.mailRtc.currentRtcSession.isMuted, 'o-isSmall': rtcController.isSmall }"
                             t-att-aria-label="microphoneTitle"
                             t-att-title="microphoneTitle"
                             t-on-click="rtcController.onClickMicrophone">
                             <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
                                 <i class="fa" t-att-class="{
                                     'fa-lg': !rtcController.isSmall,
-                                    'fa-microphone': !rtcSession.isMuted,
-                                    'fa-microphone-slash': rtcSession.isMuted,
-                                    'text-danger': rtcSession.isMuted,
+                                    'fa-microphone': !messaging.mailRtc.currentRtcSession.isMuted,
+                                    'fa-microphone-slash': messaging.mailRtc.currentRtcSession.isMuted,
+                                    'text-danger': messaging.mailRtc.currentRtcSession.isMuted,
                                 }"/>
                             </div>
                         </button>
-                        <t t-if="rtcSession.isDeaf"><t t-set="headphoneTitle">Undeafen</t></t>
+                        <t t-if="messaging.mailRtc.currentRtcSession.isDeaf"><t t-set="headphoneTitle">Undeafen</t></t>
                         <t t-else=""><t t-set="headphoneTitle">Deafen</t></t>
                         <button class="o_RtcController_button"
-                            t-att-class="{ 'o-isActive': !rtcSession.isDeaf, 'o-isSmall': rtcController.isSmall }"
+                            t-att-class="{ 'o-isActive': !messaging.mailRtc.currentRtcSession.isDeaf, 'o-isSmall': rtcController.isSmall }"
                             t-att-aria-label="headphoneTitle"
                             t-att-title="headphoneTitle"
                             t-on-click="rtcController.onClickDeafen">
                             <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
                                 <i class="fa" t-att-class="{
                                     'fa-lg': !rtcController.isSmall,
-                                    'fa-headphones': !rtcSession.isDeaf,
-                                    'fa-deaf': rtcSession.isDeaf,
-                                    'text-danger': rtcSession.isDeaf,
+                                    'fa-headphones': !messaging.mailRtc.currentRtcSession.isDeaf,
+                                    'fa-deaf': messaging.mailRtc.currentRtcSession.isDeaf,
+                                    'text-danger': messaging.mailRtc.currentRtcSession.isDeaf,
                                 }"/>
                             </div>
                         </button>
@@ -81,37 +81,37 @@
                             </t>
                         </Popover>
                     </t>
-                    <t t-if="!thread.mailRtc">
+                    <t t-if="!rtcController.callViewer.threadView.thread.mailRtc">
                         <button class="o_RtcController_button o_RtcController_callToggle"
                             t-att-class="{ 'o-isSmall': rtcController.isSmall }"
                             aria-label="Join Video Call"
                             title="Join Video Call"
-                            t-att-disabled="thread.hasPendingRtcRequest"
+                            t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
                             t-on-click="rtcController.onClickToggleVideoCall">
                             <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
                                 <i class="fa fa-video-camera" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
                             </div>
                         </button>
                     </t>
-                    <t t-if="thread">
-                        <t t-if="thread.rtcInvitingSession and !thread.mailRtc">
+                    <t t-if="rtcController.callViewer.threadView.thread">
+                        <t t-if="rtcController.callViewer.threadView.thread.rtcInvitingSession and !rtcController.callViewer.threadView.thread.mailRtc">
                             <button class="o_RtcController_button o_RtcController_callToggle o-isActive"
                                 t-att-class="{ 'o-isSmall': rtcController.isSmall }"
                                 aria-label="Reject"
                                 title="Reject"
-                                t-att-disabled="thread.hasPendingRtcRequest"
+                                t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
                                 t-on-click="rtcController.onClickRejectCall">
                                 <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
                                     <i class="fa fa-phone" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
                                 </div>
                             </button>
                         </t>
-                        <t t-if="thread.mailRtc"><t t-set="phoneTitle">Disconnect</t></t>
+                        <t t-if="rtcController.callViewer.threadView.thread.mailRtc"><t t-set="phoneTitle">Disconnect</t></t>
                         <t t-else=""><t t-set="phoneTitle">Join Call</t></t>
                         <button class="o_RtcController_button o_RtcController_callToggle"
                             t-att-aria-label="phoneTitle"
-                            t-att-class="{ 'o-isActive': !!thread.mailRtc, 'o-isSmall': rtcController.isSmall }"
-                            t-att-disabled="thread.hasPendingRtcRequest"
+                            t-att-class="{ 'o-isActive': !!rtcController.callViewer.threadView.thread.mailRtc, 'o-isSmall': rtcController.isSmall }"
+                            t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
                             t-att-title="phoneTitle"
                             t-on-click="rtcController.onClickToggleAudioCall">
                             <div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
diff --git a/addons/mail/static/src/components/rtc_invitations/rtc_invitations.js b/addons/mail/static/src/components/rtc_invitations/rtc_invitations.js
index c05cfd26103..b4c4af978df 100644
--- a/addons/mail/static/src/components/rtc_invitations/rtc_invitations.js
+++ b/addons/mail/static/src/components/rtc_invitations/rtc_invitations.js
@@ -4,20 +4,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
 const { Component } = owl;
 
-export class RtcInvitations extends Component {
-
-    //--------------------------------------------------------------------------
-    // Getters / Setters
-    //--------------------------------------------------------------------------
-
-    /**
-     * @returns {mail.thread[]}
-     */
-    get threads() {
-        return this.messaging && this.messaging.ringingThreads;
-    }
-
-}
+export class RtcInvitations extends Component {}
 
 Object.assign(RtcInvitations, {
     props: {},
diff --git a/addons/mail/static/src/components/rtc_invitations/rtc_invitations.xml b/addons/mail/static/src/components/rtc_invitations/rtc_invitations.xml
index e3b91722614..f5bdbc10be7 100644
--- a/addons/mail/static/src/components/rtc_invitations/rtc_invitations.xml
+++ b/addons/mail/static/src/components/rtc_invitations/rtc_invitations.xml
@@ -3,8 +3,8 @@
 
     <t t-name="mail.RtcInvitations" owl="1">
         <div class="o_RtcInvitations">
-            <t t-if="threads">
-                <t t-foreach="threads" t-as="thread" t-key="thread.localId">
+            <t t-if="messaging.ringingThreads">
+                <t t-foreach="messaging.ringingThreads" t-as="thread" t-key="thread.localId">
                     <RtcInvitationCard threadLocalId="thread.localId"/>
                 </t>
             </t>