@tencentcloud/roomkit-electron-vue3 2.3.3 → 2.4.1

package/src/TUIRoom/components/Chat/ChatEditor/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div :class="['chat-editor', { 'disable': cannotSendMessage }]">
+  <div :class="['chat-editor', { 'disable': isMessageDisabled }]">
     <emoji class="chat-emoji" @choose-emoji="handleChooseEmoji"></emoji>
     <textarea
       ref="editorInputEle"
       v-model="sendMsg"
-      :disabled="cannotSendMessage"
+      :disabled="isMessageDisabled"
       class="content-bottom-input"
-      :placeholder="cannotSendMessage ? t('Muted by the moderator') : t('Type a message')"
+      :placeholder="isMessageDisabled ? t('Muted by the moderator') : t('Type a message')"
       @keyup.enter="sendMessage"
     />
   </div>
@@ -19,7 +19,7 @@ const {
   t,
   editorInputEle,
   sendMsg,
-  cannotSendMessage,
+  isMessageDisabled,
   sendMessage,
   handleChooseEmoji,
 } = useChatEditor();

package/src/TUIRoom/components/Chat/ChatEditor/useChatEditor.ts

@@ -1,4 +1,4 @@
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import TUIMessage from '../../common/base/Message/index';
 
@@ -18,23 +18,15 @@ export default function useChatEditor() {
   const roomStore = useRoomStore();
 
   const { roomId } = storeToRefs(basicStore);
-  const { isMessageDisableByAdmin } = storeToRefs(chatStore);
-  const { isMessageDisableForAllUser } = storeToRefs(roomStore);
+  const { isMessageDisabled } = storeToRefs(chatStore);
   const editorInputEle = ref();
   const sendMsg = ref('');
   const isEmojiToolbarVisible = ref(false);
-  watch(isMessageDisableByAdmin, (value) => {
+  watch(isMessageDisabled, (value) => {
     if (value) {
       sendMsg.value = '';
     }
   });
-
-  watch(isMessageDisableForAllUser, (value) => {
-    if (value) {
-      sendMsg.value = '';
-    }
-  });
-  const cannotSendMessage = computed(() => Boolean(isMessageDisableByAdmin.value || isMessageDisableForAllUser.value));
   const sendMessage = async () => {
     const result = decodeSendTextMsg(sendMsg.value);
     if (result === '') {
@@ -85,8 +77,7 @@ export default function useChatEditor() {
     t,
     editorInputEle,
     sendMsg,
-    isMessageDisableByAdmin,
-    cannotSendMessage,
+    isMessageDisabled,
     sendMessage,
     handleChooseEmoji,
     isEmojiToolbarVisible,

package/src/TUIRoom/components/ManageMember/MemberControl/index.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, nextTick } from 'vue';
 import { useI18n } from '../../../locales';
 import TuiButton from '../../common/base/Button.vue';
 import Dialog from '../../common/base/Dialog/index.vue';
@@ -89,16 +89,16 @@ watch(() => props.showMemberControl, (val) => {
   }
 });
 
-function toggleClickMoreBtn() {
+async function toggleClickMoreBtn() {
   if (showMoreControl.value) {
     showMoreControl.value = false;
   } else {
-    handleDropDownPosition();
+    await handleDropDownPosition();
     showMoreControl.value = true;
   }
 }
 
-function handleDropDownPosition() {
+async function handleDropDownPosition() {
   const { top, bottom } = moreBtnRef.value?.getBoundingClientRect();
   const { top: containerTop, bottom: containerBottom } = document.getElementById('memberListContainer')?.getBoundingClientRect() as DOMRect;
   if (!containerBottom || !containerTop) {
@@ -109,6 +109,7 @@ function handleDropDownPosition() {
   let dropDownContainerHeight = 0;
   if (!showMoreControl.value) {
     operateListRef.value.style = 'display:block;position:absolute;z-index:-1000';
+    await nextTick();
     dropDownContainerHeight = operateListRef.value.offsetHeight;
     operateListRef.value.style = '';
   } else {

package/src/TUIRoom/components/ManageMember/MemberControl/useMemberControlHooks.ts

@@ -40,7 +40,14 @@ export default function useMemberControl(props?: any) {
   });
   const kickOffDialogContent = computed(() => t('whether to kick sb off the room', { name: props.userInfo.userName || props.userInfo.userId }));
   const transferOwnerTitle = computed(() => t('Transfer the roomOwner to sb', { name: props.userInfo.userName || props.userInfo.userId }));
-  const { isFreeSpeakMode, isSpeakAfterTakingSeatMode, localUser, isGeneralUser } = storeToRefs(roomStore);
+  const {
+    isFreeSpeakMode,
+    isSpeakAfterTakingSeatMode,
+    localUser,
+    isGeneralUser,
+    anchorUserList,
+    maxSeatCount,
+  } = storeToRefs(roomStore);
   /**
    * Functions related to the Raise Your Hand function
   **/
@@ -110,21 +117,21 @@ export default function useMemberControl(props?: any) {
   const chatControl = computed(() => ({
     key: 'chatControl',
     icon: ChatForbiddenIcon,
-    title: props.userInfo.isChatMutedByMasterOrAdmin ? t('Enable chat') : t('Disable chat'),
+    title: props.userInfo.isMessageDisabled ? t('Enable chat') : t('Disable chat'),
     func: disableUserChat,
   }));
 
   const transferOwner = computed(() => ({
     key: 'transferOwner',
     icon: TransferOwnerIcon,
-    title: t('Transfer owner'),
+    title: t('Make host'),
     func: () => handleOpenDialog('transferOwner'),
   }));
 
   const setOrRevokeAdmin = computed(() => ({
     key: 'setOrRevokeAdmin',
     icon: props.userInfo.userRole === TUIRole.kAdministrator ?  RevokeAdminIcon : SetAdminIcon,
-    title: props.userInfo.userRole === TUIRole.kAdministrator ? t('Revoke administrator') : t('Set as administrator'),
+    title: props.userInfo.userRole === TUIRole.kAdministrator ? t('Remove administrator') : t('Set as administrator'),
     func: handleSetOrRevokeAdmin,
   }));
 
@@ -159,6 +166,14 @@ export default function useMemberControl(props?: any) {
     if (isInvitingUserToAnchor) {
       cancelInviteUserOnStage(userInfo);
     } else {
+      if (anchorUserList.value.length === maxSeatCount.value) {
+        TUIMessage({
+          type: 'warning',
+          message: `${t('The stage is full')}`,
+          duration: MESSAGE_DURATION.NORMAL,
+        });
+        return;
+      }
       inviteUserOnStage(userInfo);
     }
   }
@@ -263,13 +278,21 @@ export default function useMemberControl(props?: any) {
   /**
    * Allow text chat / Cancel text chat
   **/
-  function disableUserChat(userInfo: UserInfo) {
-    const currentState = userInfo.isChatMutedByMasterOrAdmin;
-    roomStore.setMuteUserChat(userInfo.userId, !currentState);
-    roomEngine.instance?.disableSendingMessageByAdmin({
-      userId: userInfo.userId,
-      isDisable: !currentState,
-    });
+  async function disableUserChat(userInfo: UserInfo) {
+    const { isMessageDisabled } = userInfo;
+    try {
+      await roomEngine.instance?.disableSendingMessageByAdmin({
+        userId: userInfo.userId,
+        isDisable: !isMessageDisabled,
+      });
+      roomStore.setMuteUserChat(userInfo.userId, !isMessageDisabled);
+    } catch (error) {
+      TUIMessage({
+        type: 'error',
+        message: t('Failed to disable chat'),
+        duration: MESSAGE_DURATION.NORMAL,
+      });
+    }
   }
 
   /**
@@ -301,7 +324,7 @@ export default function useMemberControl(props?: any) {
       } catch (error) {
         TUIMessage({
           type: 'error',
-          message: t('Transfer owner failed, please try again.'),
+          message: t('Make host failed, please try again.'),
           duration: MESSAGE_DURATION.NORMAL,
         });
       }
@@ -309,7 +332,7 @@ export default function useMemberControl(props?: any) {
   }
 
   /**
-   * Set/revoke administrator permissions
+   * Set/Remove administrator permissions
    */
   async function handleSetOrRevokeAdmin(userInfo: UserInfo) {
     const newRole = userInfo.userRole === TUIRole.kGeneralUser ? TUIRole.kAdministrator : TUIRole.kGeneralUser;

package/src/TUIRoom/components/ManageMember/useIndexHooks.ts

@@ -155,11 +155,12 @@ export default function useIndex() {
   }
 
   const applyToAnchorUserContent = computed(() => {
-    const userName = applyToAnchorList.value[0]?.userName || applyToAnchorList.value[0]?.userId;
+    const lastIndex = applyToAnchorList.value.length - 1;
+    const userName = applyToAnchorList.value[lastIndex]?.userName || applyToAnchorList.value[lastIndex]?.userId;
     if (applyToAnchorList.value.length === 1) {
       return `${userName} ${t('Applying for the stage')}`;
     }
-    return  `${userName} ${t('and so on number people applying to stage', { number: applyToAnchorList.value.length })}`;
+    return `${userName} ${t('and so on number people applying to stage', { number: applyToAnchorList.value.length })}`;
   });
 
   return {

package/src/TUIRoom/components/RoomFooter/ApplyControl/MemberApplyControl.vue

@@ -153,7 +153,7 @@ async function sendSeatApplication() {
           TUIMessage({ type: 'warning', message: t('Application to go on stage was rejected') });
           break;
         case TUIRequestCallbackType.kRequestTimeout:
-          TUIMessage({ type: 'warning', message: t('Failed to go on stage, invitation has timed out') });
+          TUIMessage({ type: 'warning', message: t('The request to go on stage has timed out') });
           break;
       }
     },
@@ -242,7 +242,7 @@ async function handleInvite(agree: boolean) {
     });
   } catch (error: any) {
     if (error.code === TUIErrorCode.ERR_ALL_SEAT_OCCUPIED) {
-      TUIMessage({ type: 'warning', message: t('The current number of people on stage has reached the limit') });
+      TUIMessage({ type: 'warning', message: t('The stage is full, please contact the host') });
     } else {
       logger.error('Failure of a user to accept/reject a roomOwner invitation', error);
     }

package/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts

@@ -154,7 +154,7 @@ export default function useEndControl() {
             }
             handleUpdateSeatApplicationList();
           }
-          if (chatStore.isMessageDisableByAdmin) {
+          if (chatStore.isMessageDisabled) {
             roomEngine.instance?.disableSendingMessageByAdmin({
               userId,
               isDisable: false,

package/src/TUIRoom/components/RoomFooter/VirtualBackground.vue

@@ -8,11 +8,16 @@
       v-model="isDialogVisible" :title="t('VirtualBackground')" width="600px" :modal="true"
       :append-to-room-container="true" @close="closeSettingPanel"
     >
-      <div id="stream-preview" class="stream-preview"></div>
+      <div id="stream-preview" class="stream-preview">
+        <div v-if="isLoading" class="mask"></div>
+        <div v-if="isLoading" class="spinner"></div>
+      </div>
       <div class="setting">
         <div
-          :class="['setting-item', currentVirtualBackground === 'close' ? 'active' : '']"
-          @click="closeVirtualBackground"
+          :class="[
+            'setting-item', selectedBackground === 'close' ? 'active' : ''
+          ]"
+          @click="applyVirtualBackground('close')"
         >
           <i class="setting-item-icon">
             <img :src="CloseVirtualBackground" alt="close" style="width: 32px;" />
@@ -20,8 +25,10 @@
           <span>{{ t('Close') }}</span>
         </div>
         <div
-          :class="['setting-item', currentVirtualBackground === 'blur' ? 'active' : '']"
-          @click="openBlurredBackground"
+          :class="[
+            'setting-item', selectedBackground === 'blur' ? 'active' : ''
+          ]"
+          @click="applyVirtualBackground('blur')"
         >
           <i class="setting-item-icon">
             <img :src="BlurredBackground" alt="blurred" />
@@ -29,12 +36,20 @@
           <span>{{ t('BlurredBackground') }}</span>
         </div>
       </div>
+      <div class="footer">
+        <TuiButton
+          class="button" :disabled="!isAllowed" @click="confirmVirtualBackground"
+        >
+          {{ t('Save') }}
+        </TuiButton>
+        <TuiButton class="button" type="primary" @click="closeSettingPanel">{{ t('Cancel') }}</TuiButton>
+      </div>
     </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 import IconButton from '../common/base/IconButton.vue';
 import VirtualBackgroundIcon from '../common/icons/VirtualBackgroundIcon.vue';
 import { useI18n } from '../../locales';
@@ -42,41 +57,65 @@ import { roomService } from '../../services';
 import Dialog from '../common/base/Dialog/index.vue';
 import CloseVirtualBackground from '../../assets/imgs/close-virtual-background.png';
 import BlurredBackground from '../../assets/imgs/blurred-background.png';
+import TuiButton from '../common/base/Button.vue';
 
 const { t } = useI18n();
 const componentConfig = roomService.componentManager.getComponentConfig('VirtualBackground');
-
-const currentVirtualBackground = ref<'close' | 'blur'>('close');
+const isAllowed = computed(() => roomService.roomStore.localStream.hasVideoStream);
+const appliedBackground = ref<'close' | 'blur'>('close');
+const selectedBackground = ref<'close' | 'blur'>('close');
 const isDialogVisible = ref(false);
+const isLoading = ref(false);
 const openSettingPanel = async () => {
   roomService.virtualBackground.initVirtualBackground();
   isDialogVisible.value = true;
+  isLoading.value = true;
   await nextTick();
-  roomService.roomEngine.instance?.startCameraDeviceTest({ view: 'stream-preview' });
+  await roomService.roomEngine.instance?.startCameraDeviceTest({ view: 'stream-preview' });
+  await applyVirtualBackground(appliedBackground.value);
+  isLoading.value = false;
 };
-const closeSettingPanel = () => {
+
+const closeSettingPanel = async () => {
   isDialogVisible.value = false;
   roomService.roomEngine.instance?.stopCameraDeviceTest();
+  selectedBackground.value = appliedBackground.value;
 };
 
-const openBlurredBackground = () => {
-  currentVirtualBackground.value = 'blur';
-  roomService.virtualBackground.toggleVirtualBackground(true);
+const confirmVirtualBackground = async () => {
+  if (!isAllowed.value) return;
+  appliedBackground.value = selectedBackground.value;
+  closeSettingPanel();
+  if (selectedBackground.value === 'blur') {
+    await roomService.virtualBackground.toggleVirtualBackground(true);
+  }
+  if (selectedBackground.value === 'close') {
+    await roomService.virtualBackground.toggleVirtualBackground(false);
+  }
 };
-const closeVirtualBackground = () => {
-  currentVirtualBackground.value = 'close';
-  roomService.virtualBackground.toggleVirtualBackground(false);
+
+const applyVirtualBackground = async (type: 'close' | 'blur') => {
+  isLoading.value = true;
+  try {
+    selectedBackground.value = type;
+    await roomService.virtualBackground.toggleTestVirtualBackground(type === 'blur');
+  } finally {
+    isLoading.value = false;
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .stream-preview {
   display: flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
   border-radius: 8px;
   overflow: hidden;
   min-height: 310px;
   background-color: #000;
+  position: relative;
 }
 
 .setting {
@@ -97,6 +136,7 @@ const closeVirtualBackground = () => {
     color: #4F586B;
     font-size: 12px;
     border: 1px solid transparent;
+    cursor: pointer;
 
     &-icon {
       display: flex;
@@ -116,4 +156,48 @@ const closeVirtualBackground = () => {
     color: #fff;
   }
 }
+
+.spinner {
+  z-index: 3;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #1C66E5;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+.mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  z-index: 2;
+}
+
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 10px;
+  padding: 1rem;
+  border-radius: 8px;
+  .button {
+    width: 84px;
+    height: 32px;
+  }
+}
 </style>

package/src/TUIRoom/components/RoomFooter/index/index.vue

@@ -77,8 +77,6 @@ import SettingControl from '../SettingControl.vue';
 import VirtualBackground from '../VirtualBackground.vue';
 import bus from '../../../hooks/useMitt';
 
-import TUIRoomAegis from '../../../utils/aegis';
-
 import useRoomFooter from './useRoomFooterHooks';
 
 const {
@@ -89,7 +87,6 @@ const {
 } = useRoomFooter();
 
 function handleControlClick(name: string) {
-  TUIRoomAegis.reportEvent({ name, ext1: name });
   bus.emit('experience-communication', name);
 }
 </script>

package/src/TUIRoom/components/RoomHeader/RoomInfo/useRoomInfoHooks.ts

@@ -14,7 +14,7 @@ export default function useRoomInfo() {
   const basicStore = useBasicStore();
   const roomStore = useRoomStore();
   const { roomId, isRoomLinkVisible } = storeToRefs(basicStore);
-  const { masterUserId } = storeToRefs(roomStore);
+  const { masterUserId, roomName } = storeToRefs(roomStore);
   const { t } = useI18n();
   const isShowRoomInfo = ref(false);
   const roomType = computed(() => (roomStore.isFreeSpeakMode ? t('Free Speech Room') : t('On-stage Speaking Room')));
@@ -25,7 +25,7 @@ export default function useRoomInfo() {
 
   const isShowRoomInfoTitle = computed(() => masterUserName.value);
 
-  const conferenceTitle = computed(() => `${masterUserName.value}${t('Quick Meeting')}`);
+  const conferenceTitle = computed(() => `${roomName.value}`);
 
   const roomInfoTabList = computed(() => [
     { id: 1, title: 'Host', content: masterUserName.value, copyLink: '', isShowCopyIcon: false, visible: true },

package/src/TUIRoom/components/RoomHeader/index/LayoutControl.vue

@@ -85,7 +85,6 @@ import { LAYOUT } from '../../../constants/render';
 import { useBasicStore } from '../../../stores/basic';
 import { useRoomStore } from '../../../stores/room';
 import { storeToRefs } from 'pinia';
-import TUIRoomAegis from '../../../utils/aegis';
 import { useI18n } from '../../../locales';
 import { IconButtonLayout } from '../../../constants/room';
 import IconButton from '../../common/base/IconButton.vue';
@@ -107,7 +106,6 @@ const layoutControlConfig = roomService.getComponentConfig('LayoutControl');
 
 function handleClick(layout: any) {
   basicStore.setLayout(layout);
-  TUIRoomAegis.reportEvent({ name: 'layout', ext1: layout });
 }
 
 function handleClickLayoutIcon() {

package/src/TUIRoom/components/RoomHeader/index/NetworkInfo.vue

@@ -40,7 +40,6 @@
 import { ref, Ref, onUnmounted, watchEffect, reactive, shallowRef } from 'vue';
 import { useBasicStore } from '../../../stores/basic';
 import { storeToRefs } from 'pinia';
-import TUIRoomAegis from '../../../utils/aegis';
 import { useI18n } from '../../../locales';
 import TUIRoomEngine, { TUIRoomEvents, TUINetwork, TUINetworkQuality } from '@tencentcloud/tuiroom-engine-electron';
 import useRoomEngine from '../../../hooks/useRoomEngine';
@@ -108,7 +107,6 @@ watchEffect(() => {
 
 function handleClickNetworkIcon() {
   showNetworkInfo.value = !showNetworkInfo.value;
-  TUIRoomAegis.reportEvent({ name: 'networkInfo', ext1: 'networkInfo' });
 }
 
 function handleClickOutSide() {

package/src/TUIRoom/components/common/base/MessageBox/index.ts

@@ -10,7 +10,8 @@ export type MessageProps = {
 }
 const MessageBox = ({ title, message, callback, confirmButtonText }: MessageProps) => {
   const container = document.createElement('div');
-  const fullscreenElement = document.fullscreenElement || document.getElementById('roomContainer') || document.body;
+  const fullscreenElement = document.fullscreenElement || document.getElementById('roomContainer') || document.getElementById('pre-conference-container');
+  if (!fullscreenElement) return;
   fullscreenElement.appendChild(container);
 
   const onRemove = () => {

package/src/TUIRoom/conference.vue

@@ -30,7 +30,6 @@ import { isMobile, isWeChat } from './utils/environment';
 import vTap from './directives/vTap';
 import { TUIKickedOutOfRoomReason } from '@tencentcloud/tuiroom-engine-electron';
 
-import TUIRoomAegis from './utils/aegis';
 import { MESSAGE_DURATION } from './constants/message';
 
 import TUIMessageBox from './components/common/base/MessageBox/index';
@@ -134,18 +133,6 @@ onUnmounted(() => {
 });
 
 const { sdkAppId, showHeaderTool } = roomService.basicStore;
-watch(
-  () => sdkAppId,
-  (val: number) => {
-    if (val) {
-      TUIRoomAegis.setSdkAppId(val);
-      TUIRoomAegis.reportEvent({
-        name: 'loaded',
-        ext1: 'loaded-success',
-      });
-    }
-  },
-);
 const tuiRoomClass = computed(() => {
   const roomClassList = ['tui-room', `tui-theme-${roomService.basicStore.defaultTheme}`];
   if (isMobile) {
@@ -310,6 +297,8 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
 .tui-room {
   width: 100%;
   height: 100%;
+  min-width: 850px;
+  min-height: 400px;
   position: relative;
   color: var(--font-color-1);
   background-color: var(--background-color-1);
@@ -339,6 +328,8 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
   &.tui-room-h5 {
     width: 100%;
     height: 100%;
+    min-width: initial;
+    min-height: initial;
   }
 }
 
@@ -355,5 +346,9 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
     width: 80%;
     border-radius: 10px;
   }
+  &.tui-room-h5,.chat-room {
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>

package/src/TUIRoom/extension/RoomMessageCard/RoomMessageCard.vue

@@ -12,7 +12,7 @@
         </div>
         <div class="content-desc">
           <div class="title">
-            {{ `${roomCardData.ownerName || roomCardData.owner}${t('Quick Meeting')}` }}
+            {{ `${roomCardData.ownerName || roomCardData.owner}${t('Quick Conference')}` }}
           </div>
           <ul class="users">
             <template

package/src/TUIRoom/extension/RoomMessageCard/roomMessageCard.scss

@@ -46,6 +46,9 @@
             .title {
                 font-size: 16px;
                 font-weight: 500;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
             }
 
             .users {

package/src/TUIRoom/extension/chatExtension.ts

@@ -233,7 +233,7 @@ export class ChatExtension {
     const chatType: ChatType = params?.chatType;
     const extension: ExtensionInfo = {
       weight: -1,
-      text: this.service?.t('quick meeting') || '快速会议',
+      text: this.service?.t('quick conference') || '快速会议',
       icon: 'https://qcloudimg.tencent-cloud.cn/raw/148ab10dfe654076b41f0d0945bb82e8.png',
       data: {
         name: 'quickRoom',
@@ -318,8 +318,10 @@ export class ChatExtension {
         roomService.basicStore.setScene('chat');
         roomService.componentManager.setComponentConfig({
           SwitchTheme: { visible: false },
+          Language: { visible: false },
           InviteControl: { visible: false },
           RoomLink: { visible: false },
+          UserInfo: { visible: false },
         });
         this.chatContext = TUILogin.getContext();
         this.myProfile =  await this.getMyProfile();