@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/components/RoomContent/StreamRegion/LocalScreenView/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="local-screen-container">
+    <div :class="['local-screen-control-container', { mini: isMiniRegion }]">
+      <div class="local-screen-info">
+        <svg-icon :icon="ScreenSharingIcon" />
+        <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>
+      <tui-button
+        size="default"
+        class="toggle-annotating-button"
+        v-if="isAnnotationWindowVisiable"
+        @click="toggleAnnotationWindow"
+      >
+        {{ annotationSwitchLabel }}
+      </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, defineProps, computed, onMounted, Ref } from 'vue';
+import { ipcRenderer } from 'electron';
+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';
+import { useBasicStore } from '../../../../stores/basic';
+
+const { t } = useI18n();
+const basicStore = useBasicStore();
+const showStopShareRegion = ref(false);
+
+const isAnnotatingStarted: Ref<boolean> = ref(false);
+const isAnnotationWindowVisiable = computed(() => basicStore.isSharingScreen);
+
+const annotationSwitchLabel = computed(() => {
+  return isAnnotatingStarted.value
+    ? t('End annotating')
+    : t('Start annotating');
+});
+interface Props {
+  isMiniRegion: boolean;
+}
+
+defineProps<Props>();
+
+onMounted(() => {
+  isAnnotatingStarted.value = false;
+});
+
+function openStopConfirmDialog() {
+  showStopShareRegion.value = true;
+}
+
+function stopScreenSharing() {
+  showStopShareRegion.value = false;
+  eventBus.emit('ScreenShare:stopScreenShare');
+}
+
+function toggleAnnotationWindow() {
+  if (isAnnotatingStarted.value) {
+    ipcRenderer?.send('annotation:stop-annotating');
+    isAnnotatingStarted.value = false;
+  } else {
+    ipcRenderer?.send('annotation:start-annotating');
+    isAnnotatingStarted.value = true;
+  }
+}
+
+ipcRenderer?.on('annotation:stop-from-annotation-window', () => {
+  isAnnotatingStarted.value = false;
+});
+</script>
+
+<style lang="scss" scoped>
+.local-screen-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--background-color-1);
+
+  &::before {
+    width: 100%;
+    height: 100%;
+    content: '';
+    background-color: var(--local-screen-stream-bg-color);
+  }
+
+  .local-screen-control-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--screen-font-color);
+    transform: translate(-50%, -50%);
+
+    &.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);
+    }
+
+    .toggle-annotating-button {
+      margin-top: 30px;
+      background-color: var(--red-color-3);
+      border: 1.5px solid var(--red-color-3);
+    }
+  }
+}
+
+.tui-theme-white .local-screen-container {
+  --local-screen-stream-bg-color: rgba(228, 232, 238, 0.4);
+}
+
+.tui-theme-black .local-screen-container {
+  --local-screen-stream-bg-color: rgba(34, 38, 46, 0.5);
+}
+
+.dialog-button {
+  margin-right: 12px;
+}
+</style>

package/src/TUIRoom/components/RoomContent/StreamRegion/StreamCover/index.vue

@@ -0,0 +1,281 @@
+<template>
+  <div
+    class="stream-cover-container"
+    :class="[showVoiceBorder ? 'border' : '']"
+  >
+    <div v-if="streamInfo.isLoading" class="loading-region">
+      <svg-icon :icon="LoadingIcon" class="loading" />
+    </div>
+    <div v-if="!streamInfo.hasVideoStream" class="center-user-info-container">
+      <Avatar class="avatar-region" :img-src="userInfo?.avatarUrl" />
+    </div>
+    <div class="corner-user-info-container">
+      <div
+        v-if="showIcon"
+        :class="showMasterIcon ? 'master-icon' : 'admin-icon'"
+      >
+        <user-icon />
+      </div>
+      <audio-icon
+        v-if="!isScreenStream"
+        :class="['audio-icon', { 'is-mobile': isMobile }]"
+        :user-id="streamInfo.userId"
+        :is-muted="!streamInfo.hasAudioStream"
+        size="small"
+      />
+      <svg-icon
+        v-if="isScreenStream"
+        :icon="ScreenOpenIcon"
+        class="screen-icon"
+      />
+      <span
+        :class="['user-name', isPC ? 'is-pc' : 'is-mobile']"
+        :title="displayName"
+        >{{ displayName }}
+      </span>
+      <span v-if="isScreenStream"> {{ t('is sharing their screen') }} </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps } from 'vue';
+import { StreamInfo, useRoomStore } from '../../../../stores/room';
+import Avatar from '../../../common/Avatar.vue';
+import AudioIcon from '../../../common/AudioIcon.vue';
+import SvgIcon from '../../../common/base/SvgIcon.vue';
+import UserIcon from '../../../common/icons/UserIcon.vue';
+import { useI18n } from '../../../../locales';
+import { TUIRole, TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-electron';
+import { isInnerScene } from '../../../../utils/constants';
+import ScreenOpenIcon from '../../../common/icons/ScreenOpenIcon.vue';
+import { isPC, isMobile } from '../../../../utils/environment';
+import { storeToRefs } from 'pinia';
+import LoadingIcon from '../../../common/icons/LoadingIcon.vue';
+
+const roomStore = useRoomStore();
+
+const { t } = useI18n();
+
+interface Props {
+  streamInfo: StreamInfo;
+  enlargeDomId?: string;
+  changeLargeStream?: boolean;
+}
+const props = defineProps<Props>();
+const { userVolumeObj } = storeToRefs(roomStore);
+const userInfo = computed(() => roomStore.userInfoObj[props.streamInfo.userId]);
+
+const displayName = computed(() => {
+  if (isInnerScene) {
+    return `${roomStore.getDisplayName(props.streamInfo.userId)} | ${props.streamInfo.userId}`;
+  }
+  return roomStore.getDisplayName(props.streamInfo.userId);
+});
+
+const showMasterIcon = computed(() => {
+  const { userId, streamType } = props.streamInfo;
+  return (
+    userId === roomStore.masterUserId &&
+    streamType === TUIVideoStreamType.kCameraStream
+  );
+});
+
+const showAdminIcon = computed(() => {
+  const { userId, streamType } = props.streamInfo;
+  return (
+    roomStore.getUserRole(userId) === TUIRole.kAdministrator &&
+    streamType === TUIVideoStreamType.kCameraStream
+  );
+});
+
+const showVoiceBorder = computed(() => {
+  if (isPC) {
+    return false;
+  }
+  return (
+    props.streamInfo.hasAudioStream &&
+    userVolumeObj.value[props.streamInfo.userId] !== 0
+  );
+});
+
+const showIcon = computed(() => showMasterIcon.value || showAdminIcon.value);
+const isScreenStream = computed(
+  () => props.streamInfo.streamType === TUIVideoStreamType.kScreenStream
+);
+</script>
+
+<style lang="scss" scoped>
+.stream-cover-container {
+  $border-width: 2px;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: $border-width solid transparent;
+  border-radius: 12px;
+
+  &.border {
+    border: $border-width solid #37e858;
+  }
+
+  @keyframes loading-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loading-region {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    .loading {
+      animation: loading-rotate 1.5s linear infinite;
+    }
+  }
+
+  .corner-user-info-container {
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+    display: flex;
+    align-content: center;
+    align-items: center;
+    min-width: 118px;
+    max-width: 100%;
+    height: 32px;
+    padding: 0 10px 0 0;
+    overflow: hidden;
+    font-size: 14px;
+    color: #fff;
+    background: var(--user-info-container-bg-color);
+    border-radius: 16px;
+
+    .user-name {
+      margin-left: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &.is-pc {
+        max-width: 160px;
+      }
+
+      &.is-mobile {
+        max-width: 60px;
+        margin-left: 4px;
+      }
+    }
+
+    .master-icon,
+    .admin-icon {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      margin-left: 0;
+      background-color: var(--active-color-1);
+      border-radius: 50%;
+    }
+
+    .admin-icon {
+      background-color: var(--orange-color);
+    }
+
+    .audio-icon {
+      margin-left: 8px;
+
+      &.is-mobile {
+        max-width: 26px;
+        max-height: 35px;
+        margin-left: 4px;
+      }
+    }
+
+    .screen-icon {
+      background-size: cover;
+      transform: scale(0.8);
+    }
+  }
+
+  .center-user-info-container {
+    position: absolute;
+    top: 0 - $border-width;
+    left: 0 - $border-width;
+    width: calc(100% + $border-width * 2);
+    height: calc(100% + $border-width * 2);
+    background-color: var(--background-color-1);
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      content: '';
+      background-color: var(--user-has-no-camera-bg-color);
+    }
+
+    .avatar-region {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: min(130px, 40%);
+      height: 0;
+      padding-top: min(130px, 40%);
+      transform: translate(-50%, -50%);
+    }
+
+    .user-info {
+      width: 130px;
+      text-align: center;
+
+      .avatar-region {
+        width: 130px;
+        height: 130px;
+        border-radius: 50%;
+      }
+
+      .user-gender-name {
+        svg {
+          vertical-align: bottom;
+        }
+
+        .user-name {
+          display: inline-block;
+          max-width: 100px;
+          margin-left: 6px;
+          overflow: hidden;
+          font-size: 14px;
+          font-weight: 400;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          vertical-align: bottom;
+        }
+      }
+    }
+  }
+}
+
+.tui-theme-white .stream-cover-container {
+  --screen-font-color: #8f9ab2;
+  --user-has-no-camera-bg-color: rgba(228, 232, 238, 0.4);
+  --user-info-container-bg-color: rgba(18, 23, 35, 0.8);
+}
+
+.tui-theme-black .stream-cover-container {
+  --screen-font-color: #b2bbd1;
+  --user-has-no-camera-bg-color: rgba(34, 38, 46, 0.5);
+  --user-info-container-bg-color: rgba(34, 38, 46, 0.8);
+}
+</style>

package/src/TUIRoom/components/RoomContent/StreamRegion/StreamPlay/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    ref="playRegionDomRef"
+    :id="playRegionDomId"
+    class="stream-play-container"
+  ></div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  defineProps,
+  computed,
+  onMounted,
+  watch,
+  onBeforeUnmount,
+  withDefaults,
+  nextTick,
+} from 'vue';
+import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-electron';
+import { StreamInfo, useRoomStore } from '../../../../stores/room';
+import { roomService } from '../../../../services/roomService';
+import { useBasicStore } from '../../../../stores/basic';
+import { storeToRefs } from 'pinia';
+import { getNanoId } from '../../../../utils/utils';
+
+const mediaManager = roomService.getMediaManager();
+const basicStore = useBasicStore();
+const roomStore = useRoomStore();
+
+const { defaultStreamType, streamInfoObj } = storeToRefs(roomStore);
+
+interface Props {
+  streamInfo: StreamInfo;
+  isEnlarge: boolean;
+  isNeedPlayStream?: boolean;
+  observerViewInVisible?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  isNeedPlayStream: true,
+});
+
+const playRegionDomRef = ref();
+const nanoId = getNanoId(5);
+const playRegionDomId = computed(
+  () => `${props.streamInfo.userId}_${props.streamInfo.streamType}_${nanoId}`
+);
+
+// The stream type to be pulled from the remote user
+const streamTypeToFetch = computed(() => {
+  const { streamType, userId } = props.streamInfo;
+  const { userId: localUserId } = basicStore;
+  if (streamType === TUIVideoStreamType.kScreenStream) {
+    return TUIVideoStreamType.kScreenStream;
+  }
+  if (props.isEnlarge || userId === localUserId) {
+    return TUIVideoStreamType.kCameraStream;
+  }
+  return defaultStreamType.value;
+});
+
+async function startPlayVideo() {
+  if (
+    !streamInfoObj.value[
+      `${props.streamInfo.userId}_${props.streamInfo.streamType}`
+    ] ||
+    !playRegionDomRef.value
+  ) {
+    return;
+  }
+  await nextTick();
+  if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+    await mediaManager.startPlayVideo({
+      userId: props.streamInfo.userId,
+      streamType: streamTypeToFetch.value,
+      view: playRegionDomRef.value,
+      observerViewInVisible: props.observerViewInVisible,
+    });
+  }
+}
+
+async function stopPlayVideo() {
+  await mediaManager.stopPlayVideo({
+    userId: props.streamInfo.userId,
+    streamType: streamTypeToFetch.value,
+    view: playRegionDomRef.value,
+  });
+}
+
+watch(
+  () => [
+    props.streamInfo.userId,
+    props.streamInfo.streamType,
+    props.streamInfo.hasVideoStream,
+    props.isNeedPlayStream,
+  ],
+  async (val, oldVal) => {
+    const [oldUserId, oldStreamType] = oldVal;
+    if (
+      oldUserId !== props.streamInfo.userId ||
+      oldStreamType !== props.streamInfo.streamType
+    ) {
+      // Stops play of the previous stream of the current dom
+      mediaManager.stopPlayVideo({
+        userId: oldUserId as string,
+        streamType: oldStreamType as TUIVideoStreamType,
+        view: playRegionDomRef.value,
+      });
+    }
+    if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+      await startPlayVideo();
+    } else {
+      await stopPlayVideo();
+    }
+  }
+);
+
+watch(
+  () => streamTypeToFetch,
+  async () => {
+    if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+      await startPlayVideo();
+    }
+  }
+);
+
+onMounted(async () => {
+  if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+    await startPlayVideo();
+  }
+});
+
+onBeforeUnmount(async () => {
+  if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+    await stopPlayVideo();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.stream-play-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>