@tencentcloud/roomkit-electron-vue3 2.7.2 → 2.8.2

package/src/TUIRoom/components/Stream/MultiStreamView/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div id="streamContainer">
+    <stream-list
+      :streamInfoList="streamInfoList"
+      :column="column"
+      :row="row"
+      :streamPlayMode="StreamPlayMode.PLAY_IN_VISIBLE"
+      :streamPlayQuality="StreamPlayQuality.Default"
+      aspect-ratio="16:9"
+      @stream-view-dblclick="handleStreamDblclick"
+    />
+    <!-- Nine-pane left and right page flip control bar -->
+    <div v-if="showTurnPageControl && showRoomTool" class="turn-page-container">
+      <div
+        v-show="showTurnPageLeftArrow"
+        class="turn-page-arrow-container left-container"
+        @click="handleTurnPageLeft"
+      >
+        <svg-icon :icon="ArrowStrokeTurnPageIcon" />
+      </div>
+      <div
+        v-show="showTurnPageRightArrow"
+        class="turn-page-arrow-container right-container"
+        @click="handleTurnPageRight"
+      >
+        <svg-icon class="turn-page-right" :icon="ArrowStrokeTurnPageIcon" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, defineEmits } from 'vue';
+import ArrowStrokeTurnPageIcon from '../../common/icons/ArrowStrokeTurnPageIcon.vue';
+import SvgIcon from '../../common/base/SvgIcon.vue';
+import StreamList from '../common/StreamList/index.vue';
+import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-electron';
+import {
+  StreamPlayMode,
+  StreamPlayQuality,
+} from '../../../services/manager/mediaManager';
+import useMultiStreamViewHook from './useMultiStreamViewHook';
+import { storeToRefs } from 'pinia';
+import { useBasicStore } from '../../../stores/basic';
+import { StreamInfo } from '../../../stores/room';
+
+const props = defineProps<{
+  maxColumn: number;
+  maxRow: number;
+  fillMode?: 'fill' | 'contain';
+  excludeStreamInfoList?: { userId: string; streamType: TUIVideoStreamType }[];
+}>();
+
+const {
+  column,
+  row,
+  totalPageNumber,
+  isEqualPointsLayout,
+  renderStreamInfoList,
+  equalPointsLayoutStreamList,
+  currentPageIndex,
+} = useMultiStreamViewHook(props);
+
+const basicStore = useBasicStore();
+const { showRoomTool } = storeToRefs(basicStore);
+
+const streamInfoList = computed(() => {
+  if (isEqualPointsLayout.value) {
+    return equalPointsLayoutStreamList.value[currentPageIndex.value];
+  }
+  return renderStreamInfoList.value;
+});
+
+const emits = defineEmits(['stream-view-dblclick']);
+
+function handleStreamDblclick(streamInfo: StreamInfo) {
+  emits('stream-view-dblclick', streamInfo);
+}
+
+const showTurnPageControl = computed(
+  () => isEqualPointsLayout.value && totalPageNumber.value > 1
+);
+const showTurnPageLeftArrow = computed(
+  () => isEqualPointsLayout.value && currentPageIndex.value > 0
+);
+const showTurnPageRightArrow = computed(
+  () =>
+    isEqualPointsLayout.value &&
+    currentPageIndex.value < totalPageNumber.value - 1
+);
+
+/**
+ * Nine grid layout towards the left to turn the page
+ **/
+function handleTurnPageLeft() {
+  currentPageIndex.value = currentPageIndex.value - 1;
+}
+
+/**
+ * Nine grid layout towards the right to turn the page
+ **/
+function handleTurnPageRight() {
+  currentPageIndex.value = currentPageIndex.value + 1;
+}
+</script>
+
+<style lang="scss" scoped>
+.turn-page-container {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 60px;
+  transform: translateY(-50%);
+
+  .turn-page-arrow-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 60px;
+    color: var(--turn-page-arrow-color);
+    cursor: pointer;
+    background: var(--turn-page-background-color);
+    backdrop-filter: blur(2.25px);
+    border-radius: 32px;
+
+    &:hover {
+      background: var(--turn-page-hover-background-color);
+    }
+  }
+
+  .left-container {
+    position: absolute;
+    left: 34px;
+  }
+
+  .right-container {
+    position: absolute;
+    right: 34px;
+  }
+
+  .turn-page-right {
+    transform: rotateY(180deg);
+  }
+}
+
+.tui-theme-black .turn-page-container {
+  --turn-page-background-color: rgba(114, 122, 138, 0.4);
+  --turn-page-hover-background-color: rgba(114, 122, 138, 0.7);
+  --turn-page-arrow-color: #d5e0f2;
+}
+
+.tui-theme-white .turn-page-container {
+  --turn-page-background-color: rgba(114, 122, 138, 0.4);
+  --turn-page-hover-background-color: rgba(114, 122, 138, 0.7);
+  --turn-page-arrow-color: white;
+}
+</style>

package/src/TUIRoom/components/Stream/MultiStreamView/useMultiStreamViewHook.ts

@@ -0,0 +1,107 @@
+import { ref, computed, watch } from 'vue';
+import type { ComputedRef } from 'vue';
+import { StreamInfo, useRoomStore } from '../../../stores/room';
+import { storeToRefs } from 'pinia';
+import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-electron';
+
+export default function useMultiStreamViewHook(props) {
+  const roomStore = useRoomStore();
+  const { streamList } = storeToRefs(roomStore);
+
+  const isHorizontalInfinityLayout = computed(
+    () => props.maxColumn === Infinity
+  );
+  const isVerticalInfinityLayout = computed(() => props.maxRow === Infinity);
+  const isEqualPointsLayout = computed(
+    () => props.maxColumn !== Infinity && props.maxRow !== Infinity
+  );
+
+  const column = computed(() => {
+    if (props.maxColumn === Infinity) {
+      return props.maxColumn;
+    }
+    return Math.min(
+      Math.ceil(Math.sqrt(renderStreamInfoList.value.length)),
+      props.maxColumn
+    );
+  });
+  const row = computed(() => {
+    if (props.maxRow === Infinity) {
+      return props.maxRow;
+    }
+    return Math.min(
+      Math.ceil(renderStreamInfoList.value.length / column.value),
+      props.maxRow
+    );
+  });
+
+  const currentPageIndex = ref(0);
+  const maxCountEveryPage = computed(() => props.maxColumn * props.maxRow);
+
+  const renderStreamInfoList: ComputedRef<StreamInfo[]> = computed(() => {
+    if (props.streamInfoList) {
+      return props.streamInfoList;
+    }
+    return streamList.value.filter(
+      (item1: StreamInfo) =>
+        !props.excludeStreamInfoList?.find(
+          (item2: { userId: string; streamType: TUIVideoStreamType }) =>
+            item2.userId === item1.userId &&
+            item2.streamType === item1.streamType
+        )
+    );
+  });
+
+  watch(
+    () => renderStreamInfoList.value.length,
+    val => {
+      if (isEqualPointsLayout.value) {
+        if (
+          currentPageIndex.value > 0 &&
+          currentPageIndex.value > Math.ceil(val / maxCountEveryPage.value) - 1
+        ) {
+          currentPageIndex.value = Math.ceil(val / maxCountEveryPage.value) - 1;
+        }
+      }
+    }
+  );
+
+  const totalStreamNumber = computed(() => {
+    return streamList.value.length;
+  });
+
+  const equalPointsLayoutStreamList: ComputedRef<StreamInfo[][]> = computed(
+    () => {
+      if (isEqualPointsLayout.value) {
+        return [...new Array(totalPageNumber.value).keys()].map(
+          (pageIndex: number) => {
+            return renderStreamInfoList.value.slice(
+              pageIndex * maxCountEveryPage.value,
+              (pageIndex + 1) * maxCountEveryPage.value
+            );
+          }
+        );
+      }
+      return [[]];
+    }
+  );
+
+  const totalPageNumber = computed(() =>
+    Math.ceil(renderStreamInfoList.value.length / maxCountEveryPage.value)
+  );
+
+  return {
+    column,
+    row,
+    isHorizontalInfinityLayout,
+    isVerticalInfinityLayout,
+    isEqualPointsLayout,
+    maxCountEveryPage,
+    streamList,
+    renderStreamInfoList,
+    equalPointsLayoutStreamList,
+    totalStreamNumber,
+    totalPageNumber,
+    currentPageIndex,
+  };
+}

package/src/TUIRoom/components/Stream/SingleStreamView/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <StreamRegion
+    v-if="streamInfo"
+    :stream-info="streamInfo"
+    :fill-mode="fillMode"
+    :support-touch-scale="supportTouchScale"
+    :stream-play-quality="StreamPlayQuality.HIGH"
+    :aspect-ratio="aspectRatio"
+    @stream-view-dblclick="$emit('stream-view-dblclick')"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref, defineProps, defineEmits } from 'vue';
+import StreamRegion from '../common/StreamRegion/index.vue';
+import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-electron';
+import { isPC } from '../../../utils/environment';
+import { StreamPlayQuality } from '../../../services/manager/mediaManager';
+
+interface Props {
+  streamInfo?: { userId: string; streamType: TUIVideoStreamType };
+  fillMode?: 'fill' | 'contain';
+  supportTouchScale?: boolean;
+}
+defineProps<Props>();
+
+defineEmits(['stream-view-dblclick']);
+
+const aspectRatio = ref(isPC ? '16:9' : 'auto');
+</script>
+
+<style lang="scss" scoped></style>

package/src/TUIRoom/components/Stream/common/LocalScreenView/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="local-screen-container" ref="localScreenContainerRef">
+    <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>
+      <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, onMounted, onBeforeUnmount } 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);
+const localScreenContainerRef = ref();
+const isMiniRegion = ref(false);
+
+function openStopConfirmDialog() {
+  showStopShareRegion.value = true;
+}
+
+function stopScreenSharing() {
+  showStopShareRegion.value = false;
+  eventBus.emit('ScreenShare:stopScreenShare');
+}
+const resizeObserver = new ResizeObserver(() => {
+  isMiniRegion.value = localScreenContainerRef.value?.offsetHeight <= 200;
+});
+onMounted(() => {
+  resizeObserver.observe(localScreenContainerRef.value);
+});
+onBeforeUnmount(() => {
+  resizeObserver.unobserve(localScreenContainerRef.value);
+});
+</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);
+    }
+  }
+}
+
+.tui-theme-white .local-screen-container {
+  --local-screen-stream-bg-color: rgba(228, 232, 238, 0.4);
+  --screen-font-color: #8f9ab2;
+}
+
+.tui-theme-black .local-screen-container {
+  --screen-font-color: #b2bbd1;
+  --local-screen-stream-bg-color: rgba(34, 38, 46, 0.5);
+}
+
+.dialog-button {
+  margin-right: 12px;
+}
+</style>

package/src/TUIRoom/components/{RoomContent/StreamRegion → Stream/common}/StreamCover/index.vue

@@ -46,10 +46,7 @@ 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 { 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';
@@ -272,13 +269,11 @@ const isScreenStream = computed(
 }
 
 .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);
 }