@tencentcloud/roomkit-electron-vue3 2.3.3

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

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <tui-badge
+      :hidden="applyToAnchorList.length === 0"
+      :value="applyToAnchorList.length"
+      :max="10"
+      type="danger"
+    >
+      <icon-button
+        :title="t('Apply to stage')"
+        :icon="StageApplicationIcon"
+        :is-active="sidebarName === 'apply'"
+        @click-icon="toggleManageStage"
+      />
+    </tui-badge>
+    <master-apply-control v-show="showApplyUserList"></master-apply-control>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import IconButton from '../common/base/IconButton.vue';
+import StageApplicationIcon from '../common/icons/StageApplicationIcon.vue';
+import { useBasicStore } from '../../stores/basic';
+import { useRoomStore } from '../../stores/room';
+import { useI18n } from '../../locales';
+import TuiBadge from '../common/base/Badge.vue';
+import { isMobile } from '../../utils/environment';
+import MasterApplyControl from './ApplyControl/MasterApplyControl/index.vue';
+import useMasterApplyControl from '../../hooks/useMasterApplyControl';
+
+const { t } = useI18n();
+
+const basicStore = useBasicStore();
+const roomStore = useRoomStore();
+const { handleShowNotification } = useMasterApplyControl();
+const { sidebarName, showApplyUserList } = storeToRefs(basicStore);
+const { applyToAnchorList } = storeToRefs(roomStore);
+
+function toggleManageStage() {
+  if (!isMobile) {
+    basicStore.setShowApplyUserList(!showApplyUserList.value);
+  } else {
+    if (basicStore.isSidebarOpen && basicStore.sidebarName === 'apply') {
+      basicStore.setSidebarOpenStatus(false);
+      basicStore.setSidebarName('');
+      return;
+    }
+    basicStore.setSidebarOpenStatus(true);
+    basicStore.setSidebarName('apply');
+  }
+}
+
+handleShowNotification();
+
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <div v-if="moreControlConfig.visible" class="more-control-container">
+    <icon-button
+      :is-active="sidebarName === 'more'"
+      :title="t('More')"
+      :icon="MoreIcon"
+      @click-icon="toggleMoreSidebar"
+    >
+    </icon-button>
+  </div>
+</template>
+<script setup lang="ts">
+import IconButton from '../../common/base/IconButton.vue';
+import MoreIcon from '../../common/icons/MoreIcon.vue';
+import userMoreControl from './useMoreControlHooks';
+import { roomService } from '../../../services';
+
+const moreControlConfig = roomService.getComponentConfig('MoreControl');
+const {
+  t,
+  basicStore,
+  sidebarName,
+} = userMoreControl();
+
+function toggleMoreSidebar() {
+  if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === 'more') {
+    basicStore.setSidebarOpenStatus(false);
+    basicStore.setSidebarName('');
+    return;
+  }
+  basicStore.setSidebarOpenStatus(true);
+  basicStore.setSidebarName('more');
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

package/src/TUIRoom/components/RoomFooter/MoreControl/useMoreControlHooks.ts

@@ -0,0 +1,21 @@
+import { computed } from 'vue';
+import { useBasicStore } from '../../../stores/basic';
+import { storeToRefs } from 'pinia';
+import { useI18n } from '../../../locales';
+import { ICON_NAME } from '../../../constants/icon';
+
+export default function useControl() {
+  const { t } = useI18n();
+
+  const basicStore = useBasicStore();
+  const { sidebarName } = storeToRefs(basicStore);
+
+  const iconName = computed(() => (sidebarName.value === 'more' ? ICON_NAME.MoreActive : ICON_NAME.More));
+
+  return {
+    t,
+    basicStore,
+    iconName,
+    sidebarName,
+  };
+}

package/src/TUIRoom/components/RoomFooter/ScreenShareControl/Index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="screen-share-control-container">
+    <icon-button
+      ref="btnStopRef"
+      :is-active="isSharing"
+      :class="{ outlined: isSharing }"
+      :title="title"
+      :disabled="screenShareDisabled"
+      @click-icon="toggleScreenShare"
+    >
+      <stop-screen-share-icon v-if="isSharing"></stop-screen-share-icon>
+      <screen-share-icon v-else></screen-share-icon>
+    </icon-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 size="default" @click="stopScreenShare">{{ t('End sharing') }}</tui-button>
+          <tui-button class="button" type="primary" size="default" @click="showStopShareRegion = false">{{ t('Cancel') }}</tui-button>
+        </span>
+      </template>
+    </Dialog>
+
+    <screen-window-select-dialog
+      :visible="selectDialogVisible"
+      :screen-list="screenList"
+      :window-list="windowList"
+      @on-confirm="onConfirmScreenShare"
+      @on-close="selectDialogVisible = false"
+    />
+    <Dialog
+      v-model="showPermissionVisible"
+      :title="t('Grant permission to screen recording')"
+      :modal="true"
+      :append-to-body="true"
+      width="480px"
+      :close-on-click-modal="true"
+      :append-to-room-container="true"
+    >
+      <div>
+        {{
+          t(
+            'Due to macOS 10.15 system requirements, please check the current application in "System Preferences - Security & Privacy - Screen Recording".',
+          )
+        }}
+      </div>
+      <template #footer>
+        <tui-button size="default" @click="onPermissionScreenShare">
+          {{ t('Open the system preferences settings') }}
+        </tui-button>
+        <tui-button class="button" type="primary" size="default" @click="showPermissionVisible = false">
+          {{ t('Cancel') }}
+        </tui-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, computed, onUnmounted, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useI18n } from '../../../locales';
+import IconButton from '../../common/base/IconButton.vue';
+import TUIRoomEngine, { TUIRoomEvents, TRTCScreenCaptureSourceType, TRTCScreenCaptureSourceInfo } from '@tencentcloud/tuiroom-engine-electron';
+import ScreenWindowSelectDialog from './ScreenWindowSelectDialog.vue';
+import ScreenShareIcon from '../../common/icons/ScreenShareIcon.vue';
+import StopScreenShareIcon from '../../common/icons/StopScreenShareIcon.vue';
+import { useRoomStore } from '../../../stores/room';
+import useGetRoomEngine from '../../../hooks/useRoomEngine';
+import TUIMessage from '../../common/base/Message';
+import { MESSAGE_DURATION } from '../../../constants/message';
+import eventBus from '../../../hooks/useMitt';
+import Dialog from '../../common/base/Dialog/index.vue';
+import TuiButton from '../../common/base/Button.vue';
+import logger from '../../../utils/common/logger';
+
+const { t } = useI18n();
+
+const roomStore = useRoomStore();
+const { isAudience, hasOtherScreenShare } = storeToRefs(roomStore);
+const roomEngine = useGetRoomEngine();
+
+const logPrefix = '[ScreenShareControl]';
+
+const btnStopRef = ref();
+const isSharing: Ref<boolean> = ref(false);
+const showPermissionVisible: Ref<boolean> = ref(false);
+const showStopShareRegion: Ref<boolean> = ref(false);
+
+const screenShareDisabled = computed(() => isAudience.value);
+const title = computed(() => (isSharing.value ? t('End sharing') : t('Share screen')));
+
+const selectDialogVisible: Ref<boolean> = ref(false);
+const screenList: Ref<Array<TRTCScreenCaptureSourceInfo>> = ref([]);
+const windowList: Ref<Array<TRTCScreenCaptureSourceInfo>> = ref([]);
+
+async function toggleScreenShare() {
+  if (isSharing.value) {
+    showStopShareRegion.value = true;
+    return;
+  }
+
+  if (isAudience.value) {
+    TUIMessage({
+      type: 'warning',
+      message: t('You currently do not have sharing permission, please raise your hand to apply for sharing permission first'),
+      duration: MESSAGE_DURATION.LONG,
+    });
+    return;
+  }
+
+  if (hasOtherScreenShare.value) {
+    TUIMessage({
+      type: 'warning',
+      message: t('Another user is currently sharing the screen, screen sharing is not possible.'),
+      duration: MESSAGE_DURATION.LONG,
+    });
+    return;
+  }
+  if (!(window as any).isHasScreen && process.platform === 'darwin') {
+    showPermissionVisible.value = true;
+  }
+  if (!isSharing.value && !selectDialogVisible.value) {
+    const screenCaptureList: any = await roomEngine.instance?.getScreenSharingTarget();
+    screenList.value = screenCaptureList.filter((screen: TRTCScreenCaptureSourceInfo) =>
+        screen.type === TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeScreen, // eslint-disable-line
+    );
+    windowList.value = screenCaptureList.filter((screen: TRTCScreenCaptureSourceInfo) => screen.type === TRTCScreenCaptureSourceType.TRTCScreenCaptureSourceTypeWindow);
+    selectDialogVisible.value = true;
+  }
+}
+
+async function onPermissionScreenShare() {
+  const { shell } = require('electron');
+  shell.openExternal('x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture');
+  showPermissionVisible.value = false;
+}
+
+async function onConfirmScreenShare(screenInfo: TRTCScreenCaptureSourceInfo) {
+  if (hasOtherScreenShare.value) {
+    TUIMessage({
+      type: 'warning',
+      message: t('Another user is currently sharing the screen, screen sharing is not possible.'),
+      duration: MESSAGE_DURATION.LONG,
+    });
+    return;
+  }
+  await roomEngine.instance?.startScreenSharingElectron({ targetId: screenInfo.sourceId });
+  isSharing.value = true;
+  selectDialogVisible.value = false;
+}
+
+async function stopScreenShare() {
+  if (isSharing.value) {
+    try {
+      await roomEngine.instance?.stopScreenSharingElectron();
+      showStopShareRegion.value = false;
+      isSharing.value = false;
+    } catch (error) {
+      logger.error(`${logPrefix}stopScreenShare error:`, error);
+    }
+  }
+}
+
+/** Received a stop screen sharing event
+ * (user clicked the ‘’End Sharing‘’ button that comes with the browser or was kicked off the stage by the moderator in speak on stage mode)*/
+function screenCaptureStopped() {
+  isSharing.value = false;
+}
+
+eventBus.on('ScreenShare:stopScreenShare', stopScreenShare);
+TUIRoomEngine.once('ready', () => {
+  roomEngine.instance?.on(TUIRoomEvents.onUserScreenCaptureStopped, screenCaptureStopped);
+});
+
+onUnmounted(() => {
+  eventBus.off('ScreenShare:stopScreenShare', stopScreenShare);
+  roomEngine.instance?.off(TUIRoomEvents.onUserScreenCaptureStopped, screenCaptureStopped);
+});
+</script>
+
+<style lang="scss" scoped>
+.screen-share-control-container {
+  position: relative;
+}
+.stop-share-region {
+  width: 131px;
+  height: 48px;
+  background: var(--stop-share-region-bg-color);
+  border-radius: 4px;
+  position: absolute;
+  top: -58px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--color-font);
+}
+.stop-share-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+}
+.button {
+  margin-left: 12px;
+}
+</style>

package/src/TUIRoom/components/RoomFooter/ScreenShareControl/ScreenWindowPreviewer.vue

@@ -0,0 +1,84 @@
+<template>
+  <li class="screen-window-previewer">
+    <canvas
+      ref="canvasRef"
+      :class="[data.isMinimizeWindow ? 'previewer-mini':'previewer-canvas']"
+      :width="data.thumbBGRA.width"
+      :height="data.thumbBGRA.height"
+      :data-id="data.sourceId"
+    >
+    </canvas>
+    <div class="previewer-name">{{ data.sourceName }}</div>
+  </li>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, Ref } from 'vue';
+import { TRTCScreenCaptureSourceInfo } from '@tencentcloud/tuiroom-engine-electron';
+
+interface Props {
+  data: TRTCScreenCaptureSourceInfo;
+}
+
+// eslint-disable-next-line
+const { data } = defineProps<Props>();
+
+const canvasRef: Ref<HTMLCanvasElement | null> = ref(null);
+
+onMounted(() => {
+  if (canvasRef.value) {
+    if (data.thumbBGRA?.width && data.thumbBGRA?.height && data.thumbBGRA?.buffer) {
+      const ctx: CanvasRenderingContext2D | null = canvasRef.value.getContext('2d');
+      if (ctx !== null) {
+        const img: ImageData = new ImageData(
+          new Uint8ClampedArray(data.thumbBGRA.buffer as any),
+          data.thumbBGRA.width,
+          data.thumbBGRA.height,
+        );
+        ctx.putImageData(img, 0, 0);
+      }
+    }
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.screen-window-previewer {
+  list-style: none;
+  display: inline-block;
+  margin-right: 40px;
+  width: 184px;
+  border-radius: 8px;
+  border: 2px solid #e4eaf7;
+  text-align: center;
+  margin-bottom: 40px;
+  &:hover {
+    border-color: #1c66e5;
+  }
+}
+
+.previewer-canvas,
+.previewer-mini {
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.previewer-mini {
+  width: 110px;
+  height: 110px;
+  padding: 4px;
+}
+
+.previewer-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  padding: 0 20px;
+}
+</style>
+

package/src/TUIRoom/components/RoomFooter/ScreenShareControl/ScreenWindowSelectDialog.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <Dialog
+      :model-value="visible"
+      :title="t('Select a screen or window first')"
+      :modal="true"
+      :append-to-body="true"
+      width="960px"
+      @close="onClose"
+    >
+      <div class="screen-content">
+        <div class="screen-title">{{ t('Screen') }}</div>
+        <ul class="screen-list">
+          <screen-window-previewer
+            v-for="item in screenList"
+            :key="item.sourceId"
+            :data="item"
+            :class="{ selected: item.sourceId === selected?.sourceId }"
+            :title="item.sourceName"
+            @click.native="onSelect(item)"
+          />
+        </ul>
+        <div class="window-title">{{ t('Window') }}</div>
+        <ul class="window-list">
+          <screen-window-previewer
+            v-for="item in windowList"
+            :key="item.sourceId"
+            :data="item"
+            :class="{ selected: item.sourceId === selected?.sourceId }"
+            :title="item.sourceName"
+            @click.native="onSelect(item)"
+          />
+        </ul>
+      </div>
+      <template #footer>
+        <Button size="default" @click.native="start">{{ t('Share') }}</Button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, Ref, watch } from 'vue';
+import TUIMessage from '../../common/base/Message';
+import { TRTCScreenCaptureSourceInfo } from '@tencentcloud/tuiroom-engine-electron';
+import ScreenWindowPreviewer from './ScreenWindowPreviewer.vue';
+import { MESSAGE_DURATION } from '../../../constants/message';
+import { useI18n } from '../../../locales';
+import Dialog from '../../common/base/Dialog/index.vue';
+import Button from '../../common/base/Button.vue';
+
+const { t } = useI18n();
+
+interface Props {
+  visible: boolean;
+  screenList: Array<TRTCScreenCaptureSourceInfo>;
+  windowList: Array<TRTCScreenCaptureSourceInfo>;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['on-confirm', 'on-close']);
+
+const selected: Ref<any> = ref(null);
+
+watch(
+  () => props.screenList.length,
+  () => {
+    if (props.screenList.length > 0) {
+      onSelect(props.screenList[0]);
+    }
+  },
+);
+
+function onSelect(screenInfo: any) {
+  selected.value = screenInfo;
+}
+
+function start() {
+  if (selected?.value) {
+    emit('on-confirm', selected.value);
+  } else {
+    TUIMessage({
+      type: 'warning',
+      message: t('Select a screen or window first'),
+      duration: MESSAGE_DURATION.LONG,
+    });
+  }
+}
+
+function onClose() {
+  emit('on-close', props.visible);
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-content {
+  height: auto;
+  min-width: 200px;
+  max-height: 500px;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.screen-list,
+.window-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 0;
+}
+
+.screen-title,
+.window-title {
+  color: #4f586b;
+  font-size: 14px;
+  font-weight: 400;
+  margin-bottom: 12px;
+}
+.selected {
+  color: #fff;
+  background-color: #1c66e5;
+}
+ul {
+  padding-left: 0;
+}
+</style>

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="setting-control-container">
+    <icon-button
+      :is-active="showSettingDialog"
+      :title="t('Settings')"
+      @click-icon="handleShowSettingDialog"
+    >
+      <setting-icon></setting-icon>
+    </icon-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconButton from '../common/base/IconButton.vue';
+import SettingIcon from '../common/icons/SettingIcon.vue';
+import { useBasicStore } from '../../stores/basic';
+import { storeToRefs } from 'pinia';
+import { useI18n } from '../../locales';
+
+const { t } = useI18n();
+
+const basicStore = useBasicStore();
+const { showSettingDialog } = storeToRefs(basicStore);
+
+function handleShowSettingDialog() {
+  basicStore.setShowSettingDialog(!basicStore.showSettingDialog);
+}
+</script>
+
+<style lang="scss" scoped>
+</style>