@tencentcloud/roomkit-electron-vue3 2.8.2 → 2.9.1

package/src/TUIRoom/assets/style/white-theme.scss

@@ -1,162 +0,0 @@
-.tui-theme-white {
-  --background-color-1: #FFF;
-  --background-color-2: #FBFCFE;
-  --background-color-3: #F0F3FA;
-  --background-color-4: #D5E0F2;
-  --background-color-5: transparent;
-  --background-color-6: #BDBDBD;
-  --background-color-7: #F9FAFC;
-  --background-color-8: #FFF;
-  --background-color-9: #F7F9FC;
-  --background-color-10: #E7EAF7;
-  --background-color-11: #F0F3FA;
-  --background-color-12: #FFF;
-  --background-color-13: #F9FAFD;
-  --hover-background-color-1: rgba(213, 224, 242, 0.5);
-  --font-color-1: #4F586B;
-  --font-color-2: #B2BBD1;
-  --font-color-3: #000;
-  --font-color-4: #4F586B;
-  --font-color-5: #4F586B;
-  --font-color-6: #0F1014;
-  --font-color-7: #FFF;
-  --font-color-8: #4F586B;
-  --font-color-9: #969EB4;
-  --font-color-10: #FF643D;
-  --title-color: #0F1014;
-  --stroke-color: #E4EAF7;
-  --stroke-color-2: #EAEFF8;
-  --border-color: #E4E8EE;
-  --border-color-2: #E4E8EE;
-  --disable-color: #F7F9FC;
-  --active-color-1: #1C66E5;
-  --active-color-2: #1C66E5;
-  --green-color: #27C39F;
-  --orange-color: #F06C4B;
-  --white-color: #FFF;
-  --black-color: #000;
-  --red-color: #ED414D;
-  --red-color-2: #F23C5B;
-  --red-color-3: #E5395C;
-  --control-content: #FFF;
-  --background-image-color: transparent;
-  --input-color: #FFF;
-  --create-room-mode-color-bg: #FFF;
-  --user-control-container-color-bg: #E8E8E8;
-  --user-control-container-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px;
-  --stream-container-flatten-bg-color: rgba(242,242,242,1);
-  --room-header-bg-color: #FFF;
-  --room-footer-bg-color: #FFF;
-  --room-network-bg-color: #FFF;
-  --room-audiotab-bg-color: #FFF;
-  --room-videotab-bg-color: #FFF;
-  --stop-share-region-bg-color: #FFF;
-  --setting-dialog-bg-color: #FFF;
-  --icon-arrow-hover: rgba(232, 232, 232, 0.7);
-  --el-dialog-bg-color: #FFF;
-  --tabs-title-font-color: #000;
-  --center-user-info-container-bg-color: #F2F2F2;
-  --stream-info-bg-color: #FFF;
-  --title-color-bg: #666;
-  --title-color-font: #000;
-  --el-dialog-bg-color-select: #FFF;
-  --el-text-color-primary-select: #000;
-  --el-text-color-regular-select: #596174;
-  --el-fill-color-blank-select: #FFF;
-  --el-border-color-select: #C8CACC;
-  --setting-name-color: #000;
-  --el-drawer-header-color: #000;
-  --user-extra-info-bg-color: #006EFF;
-  --user-extra-info-color: #FFF;
-  --member-item-container-hover-bg-color: #F3F3F3;
-  --el-bg-color-select: #FFF;
-  --el-bg-color-overlay-select: #F2F2F2;
-  --el-border-color-light-select: #F2F2F2;
-  --el-fill-color-light-select: rgba(222, 222, 215, 0.7);
-  --input-bg-color: #F2F2F2;
-  --input-font-color: #000;
-  --input-border-color: #F2F2F2;
-  --invite-title-color: #7C85A6;
-  --chat-editor-bg-color: #FFF;
-  --message-list-color: #F6F6F6;
-  --textarea-color: #000;
-  --send-btn-color: #006EFF;
-  --message-color: #006EFF;
-  --stream-container-border: #fff;
-  --apply-list-container-bg-color: #F2F2F2;
-  --apply-list-container-color: #000;
-  --room-sidebar-bg-color: #F2F2F2;
-  --create-room-option: #eee;
-  --create-room-option-tab: #006EFF;
-  --create-room-option-color: #006EFF;
-  --create-room-option-icon: #000;
-  --create-room-option-icon-color:#006EFF;
-  --control-region-bg-color: #EEE;
-  --dialog-tabs-bg-color: #F0F3FA;
-  --divide-line-color: transparent;
-  --divice-line: #dcdcdc;
-  --el-drawer-divide: transparent;
-  --send-btn: #FFF;
-  --invite-region: #000;
-  --layout-list: #EEE;
-  --layout-item: #FFF;
-  --stream-list-container: #EEE;
-  --more-btn-background: #006EFF;
-  --user-operate-list: #EEE;
-  --user-operate-item: #1D1029;
-  --active-blur-background-color: transparent;
-  --divide-line-color-setting: #dcdcdc;
-  --el-disabled-border: #b6b6b6;
-  --el-disabled-background: #dcdcdc;
-  --el-border-lighter: #dcdcdc;
-  --title-active: #666;
-  --mic-bar-color: #babbbe;
-  --more-notice-color: #000;
-  --setting-dialog: 8px;
-  --caret-color: #000;
-  --apply-container-primary: #FFF;
-  --apply-container-outline: #000;
-  --el-drawer-body: #FFF;
-  --input-color-setting: #FFF;
-  --input-color-setting-hover: #f5f7fa;
-  --switch-core-bg: #dcdfe6;
-  --input-color-font: #646366;
-  --input-color-setting-border: #babebe;
-  --el-message-box: #FFF;
-  --el-message-box-title: #000;
-  --el-button-text-color: #646366;
-  --selected-screen-share-dialog: #006EFF;
-
-  /* H5 New Content */
-  --log-out-mobile: rgba(0, 0, 0, 0.7);
-  --log-out: #F9F9F9C7;
-  --log-out-cancel: #FFF;
-  --room-detail: #F5F5F5;
-  --room-detail-background: white;
-  --room-detail-title: black;
-  --choose-type: #E1E1E3;
-  --emoji-background-color:#efecec;
-  --chat-editor-input-color-h5:#dfdcdc;
-  --chat-editor-bg-color-h5: #f1f1f1;
-  --message-list-color-h5: #d4d4d4;
-  --popup-mute-background-color-h5: #ececed;
-  --mute-button-color-h5: #FFF;
-  --member-control-background-color-h5: #F2F2F2;
-  --member-border-color-h5: #FFF;
-  --member-title-content-h5: #5f5c5c;
-  --end-control-text-h5: #CFD4E6;
-  --end-control-title-h5: rgba(37, 37, 37, 0.78);
-  --end-control-cancel-h5: #2C2C2E;
-  --transfer-input-color-h5: #d4d4d4;
-  --popup-background-color-h5: #d4d4d4;
-  --popup-title-color-h5: #141313;
-  --popup-content-color-h5: #636060;
-  --close-cancel-h5: #006EFF;
-  --dialog-title-h5: #2B2E38;
-  --manage-member-button-h5:#006EFF;
-  --message-body-h5: #817e7e;
-  --user-extra-info-bg-color-h5: #006EFF;
-  --user-extra-info-color-h5: #FFF;
-  --apply-container-background-outline-h5: #006EFF;
-  --apply-container-outline-h5: #FFF;
-}

package/src/TUIRoom/components/RoomInvite/InvitationNotification.vue

@@ -1,258 +0,0 @@
-<template>
-  <div v-if="showInvitation" class="invitation-notification-container">
-    <div class="invitation-notification-inviter-container">
-      <div class="invitation-notification-inviter">
-        <Avatar class="avatar" :img-src="invitationInfo.avatarUrl" />
-        <span class="invitation-notification-title">{{
-          t('sb invites you to join the conference', {
-            name: invitationInfo.userName || invitationInfo.userId,
-          })
-        }}</span>
-      </div>
-      <span class="invitation-notification-room-name">{{
-        invitationInfo.roomName
-      }}</span>
-      <div class="invitation-notification-room-info-container">
-        <div class="invitation-notification-room-text-container">
-          <span class="invitation-notification-room-text">
-            {{ t('Host') }}:
-          </span>
-          <span class="invitation-notification-room-text">
-            {{ invitationInfo.roomOwner }}
-          </span>
-        </div>
-        <i class="invitation-notification-room-text-split"></i>
-        <div>
-          <span class="invitation-notification-room-text">
-            {{ t('Attendees') }}:
-          </span>
-          <span class="invitation-notification-room-text">
-            {{ `${invitationInfo.roomMemberCount} ${t('people')}` }}
-          </span>
-        </div>
-      </div>
-    </div>
-    <i class="invitation-notification-bottom-split"></i>
-    <div class="invitation-notification-bottom-container">
-      <span
-        class="invitation-notification-bottom"
-        @click="handleRejectInvitation"
-        >{{ t('Not joining for now') }}
-      </span>
-      <tui-button
-        class="button-item"
-        style="width: 110px"
-        @click="handleEnterRoom"
-      >
-        <svg-icon class="icon" :icon="EnterRoomIcon" />
-        <span class="button-text">{{ t('Enter Now') }}</span>
-      </tui-button>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, defineEmits } from 'vue';
-import Avatar from '../common/Avatar.vue';
-import { useI18n } from '../../locales';
-import EnterRoomIcon from '../common/icons/EnterRoomIcon.vue';
-import SvgIcon from '../common/base/SvgIcon.vue';
-import TuiButton from '../common/base/Button.vue';
-import {
-  TUIConferenceInvitationManagerEvents,
-  TUIInvitation,
-  TUIInvitationRejectedReason,
-  TUIRoomInfo,
-} from '@tencentcloud/tuiroom-engine-electron';
-import { roomService } from '../../services/index';
-const invitationInfo = ref({
-  userId: '',
-  userName: '',
-  avatarUrl: '',
-  roomName: '',
-  roomMemberCount: 0,
-  roomOwner: '',
-  roomId: '',
-});
-const { t } = useI18n();
-const showInvitation = ref(false);
-
-const emits = defineEmits(['join-conference']);
-
-const onReceiveInvitation = (data: {
-  roomInfo: TUIRoomInfo;
-  invitation: TUIInvitation;
-  extensionInfo: string;
-}) => {
-  const { roomInfo, invitation } = data;
-  invitationInfo.value.userId = invitation.inviter.userId;
-  invitationInfo.value.userName = invitation.inviter.userName;
-  invitationInfo.value.avatarUrl = invitation.inviter.avatarUrl;
-  invitationInfo.value.roomName = roomInfo.roomName;
-  invitationInfo.value.roomMemberCount = roomInfo.roomMemberCount;
-  invitationInfo.value.roomOwner = roomInfo.roomOwner;
-  invitationInfo.value.roomId = roomInfo.roomId;
-  setInvitationDisplay(true);
-};
-
-const handleEnterRoom = () => {
-  const { roomId } = invitationInfo.value;
-  roomService.conferenceInvitationManager.accept({ roomId });
-  setInvitationDisplay(false);
-  emits('join-conference', {
-    roomId,
-    roomParam: {
-      isOpenCamera: false,
-      isOpenMicrophone: true,
-    },
-  });
-};
-
-const handleRejectInvitation = () => {
-  const { roomId } = invitationInfo.value;
-  roomService.conferenceInvitationManager.reject({
-    roomId,
-    reason: TUIInvitationRejectedReason.kRejectToEnter,
-  });
-  setInvitationDisplay(false);
-};
-
-const onInvitationTimeout = () => {
-  setInvitationDisplay(false);
-};
-
-const onInvitationHandledByOtherDevice = () => {
-  setInvitationDisplay(false);
-};
-
-const setInvitationDisplay = (options: boolean) => {
-  showInvitation.value = options;
-};
-
-onMounted(() => {
-  roomService.conferenceInvitationManager.on(
-    TUIConferenceInvitationManagerEvents.onReceiveInvitation,
-    onReceiveInvitation
-  );
-  roomService.conferenceInvitationManager.on(
-    TUIConferenceInvitationManagerEvents.onInvitationTimeout,
-    onInvitationTimeout
-  );
-  roomService.conferenceInvitationManager.on(
-    TUIConferenceInvitationManagerEvents.onInvitationHandledByOtherDevice,
-    onInvitationHandledByOtherDevice
-  );
-});
-onUnmounted(() => {
-  roomService.conferenceInvitationManager.off(
-    TUIConferenceInvitationManagerEvents.onReceiveInvitation,
-    onReceiveInvitation
-  );
-  roomService.conferenceInvitationManager.off(
-    TUIConferenceInvitationManagerEvents.onInvitationTimeout,
-    onInvitationTimeout
-  );
-  roomService.conferenceInvitationManager.off(
-    TUIConferenceInvitationManagerEvents.onInvitationHandledByOtherDevice,
-    onInvitationHandledByOtherDevice
-  );
-});
-</script>
-<style scoped lang="scss">
-.invitation-notification-container {
-  position: fixed;
-  top: 40px;
-  right: 20px;
-  padding: 20px 30px 10px 20px;
-  background-color: var(--white-color);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 15px;
-
-  .invitation-notification-inviter {
-    display: flex;
-    align-items: center;
-
-    .invitation-notification-title {
-      overflow: hidden;
-      font-size: 14px;
-      font-weight: 400;
-      color: var(--font-color-4);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .avatar {
-      width: 30px;
-      height: 30px;
-      margin-right: 5px;
-    }
-  }
-
-  .invitation-notification-room-info-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .invitation-notification-room-text {
-      max-width: 20px;
-      overflow: hidden;
-      font-size: 14px;
-      font-weight: 400;
-      color: rgba(79, 88, 107, 1);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .invitation-notification-room-text-split {
-    display: block;
-    width: 1px;
-    height: 14px;
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  .invitation-notification-bottom-split {
-    display: block;
-    width: 100%;
-    height: 1px;
-    margin-top: 15px;
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  .invitation-notification-bottom-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 10px;
-
-    .invitation-notification-bottom {
-      font-size: 14px;
-      font-weight: 500;
-      color: rgba(143, 154, 178, 1);
-      cursor: pointer;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-  }
-
-  .invitation-notification-room-name {
-    display: block;
-    max-width: 300px;
-    padding: 5px 0;
-    overflow: hidden;
-    font-size: 20px;
-    font-weight: 500;
-    color: rgba(34, 38, 46, 1);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .button-text {
-    padding-left: 5px;
-  }
-}
-</style>