@tencentcloud/roomkit-electron-vue3 2.3.3

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

@@ -0,0 +1,243 @@
+<template>
+  <div class="manage-member-container">
+    <div class="manage-member-header">
+      <div class="search-container">
+        <svg-icon :icon="SearchIcon"></svg-icon>
+        <input v-model="searchText" class="search-input" :placeholder="t('Search Member')">
+      </div>
+      <tui-button class="invite-button" type="primary" @click="handleInvite">
+        <template #icon>
+          <invite-solid-icon></invite-solid-icon>
+        </template>
+        <span class="invite-content">{{ t('Invite') }}</span>
+      </tui-button>
+    </div>
+    <div
+      v-if="roomStore.isSpeakAfterTakingSeatMode"
+      class="apply-count"
+      @click="handleToggleStaged"
+    >
+      <span :class="['apply-staged', {'apply-count-active': isOnStateTabActive }]">{{ alreadyStaged }}</span>
+      <span :class="['apply-not-stage', { 'apply-count-active': !isOnStateTabActive }]">{{ notStaged }}</span>
+    </div>
+    <div v-if="applyToAnchorList.length > 0 && !isGeneralUser" class="apply-on-stage-info">
+      <svg-icon :icon="ApplyTipsIcon" class="apply-icon"></svg-icon>
+      <div class="apply-info"> {{ applyToAnchorUserContent }} </div>
+      <div class="apply-check" @click="showApplyUserList">{{ t('Check') }}</div>
+    </div>
+    <div id="memberListContainer" class="member-list-container">
+      <member-item v-for="(userInfo) in filteredUserList" :key="userInfo.userId" :user-info="userInfo"></member-item>
+    </div>
+    <div v-if="!isGeneralUser" class="global-setting">
+      <tui-button class="button" size="default" @click="toggleManageAllMember(ManageControlType.AUDIO)">
+        {{ isMicrophoneDisableForAllUser ? t('Enable all audios') : t('Disable all audios') }}
+      </tui-button>
+      <tui-button class="button" size="default" @click="toggleManageAllMember(ManageControlType.VIDEO)">
+        {{ isCameraDisableForAllUser ? t('Enable all videos') : t('Disable all videos') }}
+      </tui-button>
+    </div>
+    <Dialog
+      v-model="showManageAllUserDialog"
+      :title="dialogTitle"
+      width="480px"
+      :modal="true"
+      :append-to-room-container="true"
+    >
+      <span>
+        {{ dialogContent }}
+      </span>
+      <template #footer>
+        <tui-button size="default" @click="doToggleManageAllMember">{{ t('Confirm') }}</tui-button>
+        <tui-button class="cancel-button" size="default" type="primary" @click="showManageAllUserDialog = false">
+          {{ t('Cancel') }}
+        </tui-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { storeToRefs } from 'pinia';
+import MemberItem from '../ManageMember/MemberItem/index.vue';
+import SvgIcon from '../common/base/SvgIcon.vue';
+import SearchIcon from '../common/icons/SearchIcon.vue';
+import ApplyTipsIcon from '../common/icons/ApplyTipsIcon.vue';
+import InviteSolidIcon from '../common/icons/InviteSolidIcon.vue';
+import Dialog from '../common/base/Dialog/index.vue';
+import { useRoomStore } from '../../stores/room';
+import useIndex from './useIndexHooks';
+import TuiButton from '../common/base/Button.vue';
+
+const roomStore = useRoomStore();
+
+const {
+  applyToAnchorList,
+  isMicrophoneDisableForAllUser,
+  isCameraDisableForAllUser,
+  isGeneralUser,
+} = storeToRefs(roomStore);
+
+const {
+  t,
+  searchText,
+  handleInvite,
+  showApplyUserList,
+  showManageAllUserDialog,
+  dialogTitle,
+  dialogContent,
+  toggleManageAllMember,
+  doToggleManageAllMember,
+  ManageControlType,
+  alreadyStaged,
+  notStaged,
+  filteredUserList,
+  isOnStateTabActive,
+  handleToggleStaged,
+  applyToAnchorUserContent,
+} = useIndex();
+
+</script>
+
+<style lang="scss" scoped>
+
+.tui-theme-black .search-container {
+  --background-color: rgba(79, 88, 107, 0.30);
+  --font-color: #636A7E;
+}
+.tui-theme-white .search-container {
+  --background-color: var(--background-color-3);
+  --font-color: var(--font-color-1);
+}
+
+  .manage-member-container {
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .manage-member-header {
+      padding: 23px 20px 0 20px;
+      display: flex;
+      justify-content: space-around;
+      .search-container {
+        height: 32px;
+        border-radius: 16px;
+        padding: 0 16px;
+        background-color: var(--background-color);
+        color: var(--font-color-1);
+        display: flex;
+        align-items: center;
+        flex: 1;
+        .search-input {
+          margin-left: 8px;
+          font-size: 14px;
+          outline: none;
+          border: none;
+          background: none;
+          width: 100%;
+          color: var(--font-color-1);
+        }
+      }
+      .invite-button {
+        width: 85px;
+        height: 32px;
+        margin-left: 10px;
+        line-height: 16px;
+        .invite-content {
+          margin-left: 3px;
+        }
+      }
+    }
+    .apply-count {
+      height: 36px;
+      border-radius: 20px;
+      margin: 16px 20px 0 20px;
+      background-color: var(--background-color-11);
+      position: relative;
+      display: flex;
+      cursor: pointer;
+      .apply-staged,
+      .apply-not-stage {
+        position: absolute;
+        left: 0;
+        top: 3px;
+        width: 50%;
+        height: 80%;
+        filter: drop-shadow(0px 2px 4px rgba(32, 77, 141, 0.03)) drop-shadow(0px 6px 10px rgba(32, 77, 141, 0.06))
+                drop-shadow(0px 3px 14px rgba(32, 77, 141, 0.05));
+        border-radius: 20px;
+        transform: translateX(4px);
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        flex-wrap: wrap;
+        color: var(--font-color-1);
+        font-size: 14px;
+        font-weight: 400;
+      }
+      .apply-not-stage {
+        top: 50%;
+        left: 50%;
+        width: 176px;
+        height: 30px;
+        transform: translateY(-50%);
+      }
+      .apply-count-active {
+        background-color: var(--background-color-12);
+      }
+    }
+    .apply-on-stage-info {
+      width: 100%;
+      height: 60px;
+      background-color: var(--background-color-8);
+      padding: 0 20px 0 32px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      .apply-icon {
+        color: var(--font-color-2);
+      }
+      .apply-info {
+        font-weight: 400;
+        font-size: 14px;
+        color: var(--font-color-8);
+        padding-left: 4px;
+        flex: 1;
+      }
+      .apply-check {
+        text-align: center;
+        line-height: 32px;
+        font-weight: 400;
+        font-size: 14px;
+        color: var(--active-color-2);
+        cursor: pointer;
+      }
+      &::after {
+        content: "";
+        position: absolute;
+        left: 5%;
+        bottom: 0;
+        width: 90%;
+        height: 1px;
+        background-color: var(--stroke-color-2);
+      }
+    }
+  .member-list-container {
+    flex: 1;
+    margin-top: 10px;
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  .global-setting {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px;
+  }
+}
+.cancel-button {
+  margin-left: 12px;
+}
+</style>

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

@@ -0,0 +1,186 @@
+import { Ref, computed, nextTick, ref, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import useGetRoomEngine from '../../hooks/useRoomEngine';
+import { UserInfo, useRoomStore } from '../../stores/room';
+import { useBasicStore } from '../../stores/basic';
+import { useI18n } from '../../locales';
+import { TUIMediaDevice } from '@tencentcloud/tuiroom-engine-electron';
+import TUIMessage from '../common/base/Message/index';
+import { MESSAGE_DURATION } from '../../constants/message';
+import { isMobile } from '../../utils/environment';
+
+export default function useIndex() {
+  const roomEngine = useGetRoomEngine();
+
+  const { t } = useI18n();
+
+  const basicStore = useBasicStore();
+  const roomStore = useRoomStore();
+  const {
+    userList,
+    anchorUserList,
+    applyToAnchorList,
+    isOnStateTabActive,
+  } = storeToRefs(roomStore);
+
+  const audienceUserList = computed(() => userList.value.filter(user => !anchorUserList.value.includes(user)));
+
+  const searchText = ref('');
+
+  function handleToggleStaged() {
+    isOnStateTabActive.value = !isOnStateTabActive.value;
+    roomStore.setOnStageTabStatus(isOnStateTabActive.value);
+  }
+
+  const filteredUserList = computed(() => {
+    let list: UserInfo[] = [];
+    if (roomStore.isFreeSpeakMode) {
+      list = userList.value;
+    } else if (roomStore.isSpeakAfterTakingSeatMode) {
+      list = isOnStateTabActive.value ? anchorUserList.value : audienceUserList.value;
+    }
+    if (!searchText.value) {
+      return list;
+    }
+    return list.filter((item: UserInfo) => item.userName?.includes(searchText.value) || item.userId.includes(searchText.value));
+  });
+  const alreadyStaged = computed(() => `${t('Already on stage')} (${(anchorUserList.value.length)})`);
+  const notStaged = computed(() => `${t('Not on stage')} (${(audienceUserList.value.length)})`);
+
+  function handleInvite() {
+    basicStore.setSidebarName('invite');
+  }
+
+  const audioManageInfo = computed(() => (roomStore.isMicrophoneDisableForAllUser ? t('Lift all mute') : t('All mute')));
+  const videoManageInfo = computed(() => (roomStore.isCameraDisableForAllUser ? t('Lift stop all video') : t('All stop video')));
+
+  const showManageAllUserDialog: Ref<boolean> = ref(false);
+  const dialogContent: Ref<string> = ref('');
+  const dialogTitle: Ref<string> = ref('');
+  const dialogActionInfo: Ref<string> = ref('');
+  let stateForAllAudio: boolean = false;
+  let stateForAllVideo: boolean = false;
+
+  enum ManageControlType {
+    AUDIO = 'audio',
+    VIDEO = 'video',
+  }
+  const currentControlType: Ref<ManageControlType> = ref(ManageControlType.AUDIO);
+
+  async function toggleManageAllMember(type: ManageControlType) {
+    showManageAllUserDialog.value = true;
+    currentControlType.value = type;
+    switch (type) {
+      case ManageControlType.AUDIO:
+        dialogTitle.value = roomStore.isMicrophoneDisableForAllUser
+          ? t('Enable all audios') : t('All current and new members will be muted');
+        dialogContent.value = roomStore.isMicrophoneDisableForAllUser
+          ? t('After unlocking, users can freely turn on the microphone')
+          : t('Members will not be able to open the microphone');
+        stateForAllAudio =  !roomStore.isMicrophoneDisableForAllUser;
+        // Mini program update view
+        await nextTick();
+        dialogActionInfo.value = audioManageInfo.value;
+        break;
+      case ManageControlType.VIDEO:
+        dialogTitle.value = roomStore.isCameraDisableForAllUser
+          ? t('Enable all videos') : t('All and new members will be banned from the camera');
+        dialogContent.value = roomStore.isCameraDisableForAllUser
+          ? t('After unlocking, users can freely turn on the camera')
+          : t('Members will not be able to open the camera');
+        stateForAllVideo = !roomStore.isCameraDisableForAllUser;
+        // Mini program update view
+        await nextTick();
+        dialogActionInfo.value = videoManageInfo.value;
+        break;
+      default:
+        break;
+    }
+  }
+
+  async function doToggleManageAllMember() {
+    switch (currentControlType.value) {
+      case ManageControlType.AUDIO:
+        toggleAllAudio();
+        break;
+      case ManageControlType.VIDEO:
+        toggleAllVideo();
+        break;
+      default:
+        break;
+    }
+    showManageAllUserDialog.value = false;
+  }
+  function showApplyUserList() {
+    if (isMobile) {
+      basicStore.setSidebarOpenStatus(true);
+      basicStore.setSidebarName('apply');
+    } else {
+      basicStore.setShowApplyUserList(true);
+    }
+  }
+
+  async function toggleAllAudio() {
+    if (roomStore.isMicrophoneDisableForAllUser === stateForAllAudio) {
+      const tipMessage = stateForAllAudio ? t('All audios disabled') : t('All audios enabled');
+      TUIMessage({
+        type: 'success',
+        message: tipMessage,
+        duration: MESSAGE_DURATION.NORMAL,
+      });
+      return;
+    }
+    await roomEngine.instance?.disableDeviceForAllUserByAdmin({
+      isDisable: stateForAllAudio,
+      device: TUIMediaDevice.kMicrophone,
+    });
+    roomStore.setMicrophoneDisableState(stateForAllAudio);
+  }
+
+  async function toggleAllVideo() {
+    if (roomStore.isCameraDisableForAllUser === stateForAllVideo) {
+      const tipMessage = stateForAllVideo ? t('All videos disabled') : t('All videos enabled');
+      TUIMessage({
+        type: 'success',
+        message: tipMessage,
+        duration: MESSAGE_DURATION.NORMAL,
+      });
+      return;
+    }
+    await roomEngine.instance?.disableDeviceForAllUserByAdmin({
+      isDisable: stateForAllVideo,
+      device: TUIMediaDevice.kCamera,
+    });
+    roomStore.setCameraDisableState(stateForAllVideo);
+  }
+
+  const applyToAnchorUserContent = computed(() => {
+    const userName = applyToAnchorList.value[0]?.userName || applyToAnchorList.value[0]?.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 {
+    showApplyUserList,
+    searchText,
+    handleInvite,
+    t,
+    toggleManageAllMember,
+    doToggleManageAllMember,
+    audioManageInfo,
+    videoManageInfo,
+    showManageAllUserDialog,
+    dialogContent,
+    dialogTitle,
+    dialogActionInfo,
+    ManageControlType,
+    alreadyStaged,
+    notStaged,
+    filteredUserList,
+    isOnStateTabActive,
+    handleToggleStaged,
+    applyToAnchorUserContent,
+  };
+}

package/src/TUIRoom/components/RoomContent/LocalScreenStream/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="local-screen-container">
+    <div :class="['local-screen-control-container', { mini: isMiniRegion }]">
+      <div class="local-screen-info">
+        <svg-icon :icon="ScreenSharingIcon"></svg-icon>
+        <span class="text">{{ t('You are sharing the screen...') }}</span>
+      </div>
+      <tui-button size="default" class="stop-button" @click="openStopConfirmDialog">
+        {{ t('End sharing') }}
+      </tui-button>
+      <Dialog
+        v-model="showStopShareRegion"
+        width="420px"
+        :title="t('End sharing')"
+        :modal="true"
+        :close-on-click-modal="true"
+        :append-to-room-container="true"
+      >
+        <span>
+          {{ t('Others will no longer see your screen after you stop sharing. Are you sure you want to stop?') }}</span>
+        <template #footer>
+          <span>
+            <tui-button class="dialog-button" size="default" @click="stopScreenSharing">{{ t('End sharing') }}</tui-button>
+            <tui-button type="primary" size="default" @click="showStopShareRegion = false">{{ t('Cancel') }}</tui-button>
+          </span>
+        </template>
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import SvgIcon from '../../common/base/SvgIcon.vue';
+import ScreenSharingIcon from '../../common/icons/ScreenSharingIcon.vue';
+import TuiButton from '../../common/base/Button.vue';
+import Dialog from '../../common/base/Dialog/index.vue';
+import eventBus from '../../../hooks/useMitt';
+import { useI18n } from '../../../locales';
+const { t } = useI18n();
+const showStopShareRegion = ref(false);
+
+interface Props {
+  isMiniRegion: boolean;
+}
+
+defineProps<Props>();
+
+function openStopConfirmDialog() {
+  showStopShareRegion.value = true;
+}
+
+function stopScreenSharing() {
+  showStopShareRegion.value = false;
+  eventBus.emit('ScreenShare:stopScreenShare');
+}
+</script>
+
+<style lang="scss" scoped>
+
+.tui-theme-white .local-screen-container {
+  --local-screen-stream-bg-color: rgba(228, 232, 238, 0.40);
+}
+
+.tui-theme-black .local-screen-container {
+  --local-screen-stream-bg-color: rgba(34, 38, 46, 0.50);
+}
+
+.local-screen-container {
+  width: 100%;
+  height: 100%;
+  background-color: var(--background-color-1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &::before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    background-color: var(--local-screen-stream-bg-color);
+  }
+  .local-screen-control-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--screen-font-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &.mini {
+      transform: translate(-50%, -50%) scale(0.7);
+    }
+    .local-screen-info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .text {
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        white-space: nowrap;
+      }
+    }
+    .stop-button {
+      margin-top: 30px;
+      background-color: var(--red-color-3);
+      border: 1.5px solid var(--red-color-3);
+    }
+  }
+}
+.dialog-button {
+  margin-right: 12px;
+}
+</style>