tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

package/src/components/RoomView/SpeakerLayout.vue

@@ -0,0 +1,400 @@
+<template>
+  <div id="streamContainer" :class="streamContainerClass">
+    <div
+      v-if="enlargeStreamInfo?.participant"
+      ref="enlargedStreamContainerRef"
+      class="enlarged-stream-container"
+    >
+      <RoomParticipantView
+        class="participant-view"
+        :style="enlargedStreamStyle"
+        :participant="enlargeStreamInfo.participant"
+        :stream-type="enlargeStreamInfo.streamType"
+        :fill-mode="FillMode.Fill"
+        :lazy-load="{ enable: false }"
+      >
+        <template #participantViewUI>
+          <slot name="participantViewUI" v-bind="{ participant: enlargeStreamInfo.participant, streamType: enlargeStreamInfo.streamType }" />
+        </template>
+      </RoomParticipantView>
+    </div>
+    <div :class="['stream-list-container', `${showSideList ? '' : 'hide-list'}`]">
+      <div class="stream-list-content">
+        <RoomParticipantView
+          v-for="streamInfo in gridStreamInfoList"
+          :key="`${streamInfo.participant.userId}_${streamInfo.streamType}`"
+          class="participant-view"
+          :participant="streamInfo.participant"
+          :stream-type="streamInfo.streamType"
+          :fill-mode="FillMode.Fill"
+          @dblclick="handleStreamViewDblclick(streamInfo)"
+        >
+          <template #participantViewUI>
+            <slot name="participantViewUI" v-bind="{ participant: streamInfo.participant, streamType: streamInfo.streamType }" />
+          </template>
+        </RoomParticipantView>
+      </div>
+    </div>
+    <arrow-stroke
+      v-if="showToolbar || showSideList"
+      :class="[`arrow-stroke-${arrowDirection}`]"
+      :stroke-position="strokePosition"
+      :arrow-direction="arrowDirection"
+      :has-stroke="showSideList"
+      @click-arrow="handleClickIcon"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, inject, onUnmounted } from 'vue';
+import type { Ref } from 'vue';
+import { useRoomParticipantState } from '../../states/RoomParticipantState';
+import { VideoStreamType, FillMode, RoomLayoutTemplate, RoomParticipantEvent } from '../../types';
+import { RoomParticipantView } from '../RoomParticipantView';
+import ArrowStroke from './ArrowStroke.vue';
+import { useRoomView } from './useRoomView';
+import { useStreamItemDimensions } from './useStreamItemDimensions';
+import type { RoomParticipant, RoomUser } from '../../types';
+
+const { participantCameraList } = useRoomView();
+const { subscribeEvent, unsubscribeEvent } = useRoomParticipantState();
+
+const {
+  localParticipant,
+  participantListWithVideo,
+  participantWithScreen,
+} = useRoomParticipantState();
+
+interface Props {
+  layoutTemplate: RoomLayoutTemplate;
+}
+
+const showToolbar = inject<Ref<boolean>>('showToolbar');
+
+const props = defineProps<Props>();
+const emits = defineEmits(['stream-double-click']);
+
+const primaryStreamInfo = ref<{ participant: RoomParticipant; streamType: VideoStreamType } | null>(null);
+
+const enlargeStreamInfo = computed(() => {
+  if (primaryStreamInfo.value) {
+    return primaryStreamInfo.value;
+  }
+  if (participantWithScreen.value) {
+    return { participant: participantWithScreen.value, streamType: VideoStreamType.Screen };
+  }
+  if (participantListWithVideo.value.length > 0) {
+    return {
+      participant: participantListWithVideo.value[0],
+      streamType: VideoStreamType.Camera,
+    };
+  }
+  return { participant: localParticipant.value, streamType: VideoStreamType.Camera };
+});
+
+function isSameStream(stream1: { participant: RoomParticipant; streamType: VideoStreamType }, stream2: { participant: RoomParticipant; streamType: VideoStreamType }) {
+  return stream1.participant.userId === stream2.participant.userId && stream1.streamType === stream2.streamType;
+}
+
+const gridStreamInfoList = computed(() => {
+  const result = [];
+  if (participantWithScreen.value) {
+    if (enlargeStreamInfo.value && !isSameStream({ participant: participantWithScreen.value, streamType: VideoStreamType.Screen }, enlargeStreamInfo.value)) {
+      result.push({ participant: participantWithScreen.value, streamType: VideoStreamType.Screen });
+    } else if (!enlargeStreamInfo.value) {
+      result.push({ participant: participantWithScreen.value, streamType: VideoStreamType.Screen });
+    }
+  }
+  if (participantCameraList.value.length > 0) {
+    result.push(...participantCameraList.value);
+  }
+  return result;
+});
+
+function handleStreamViewDblclick(streamInfo: { participant: RoomParticipant; streamType: VideoStreamType }) {
+  primaryStreamInfo.value = streamInfo;
+  emits('stream-double-click', streamInfo);
+}
+
+const streamContainerClass = ref('stream-container-flatten');
+async function handleLayout() {
+  switch (props.layoutTemplate) {
+    case RoomLayoutTemplate.SidebarLayout:
+      streamContainerClass.value = 'stream-container-right';
+      break;
+    case RoomLayoutTemplate.CinemaLayout:
+      streamContainerClass.value = 'stream-container-top';
+      break;
+    default:
+      break;
+  }
+}
+
+watch(
+  () => props.layoutTemplate,
+  () => {
+    handleLayout();
+  },
+  { immediate: true },
+);
+
+const showSideList = ref(true);
+const arrowDirection = computed(() => {
+  let arrowDirectionValue = 'right';
+  if (props.layoutTemplate === RoomLayoutTemplate.CinemaLayout) {
+    arrowDirectionValue = showSideList.value ? 'up' : 'down';
+  }
+  if (props.layoutTemplate === RoomLayoutTemplate.SidebarLayout) {
+    arrowDirectionValue = showSideList.value ? 'right' : 'left';
+  }
+  return arrowDirectionValue;
+});
+const strokePosition = computed(() => {
+  let strokePositionValue = '';
+  if (props.layoutTemplate === RoomLayoutTemplate.CinemaLayout) {
+    strokePositionValue = 'bottom';
+  }
+  if (props.layoutTemplate === RoomLayoutTemplate.SidebarLayout) {
+    strokePositionValue = 'left';
+  }
+  return strokePositionValue;
+});
+function handleClickIcon() {
+  showSideList.value = !showSideList.value;
+}
+
+const enlargedStreamContainerRef = ref<HTMLElement | null>(null);
+
+const { itemStyle: enlargedStreamStyle } = useStreamItemDimensions({
+  containerRef: enlargedStreamContainerRef,
+  columns: 1,
+  rows: 1,
+  itemCount: computed(() => (enlargeStreamInfo.value?.participant ? 1 : 0)),
+  gap: 0,
+  aspectRatio: 16 / 9,
+  watchDependencies: [
+    () => props.layoutTemplate,
+  ],
+});
+
+function handleParticipantLeft({ userInfo }: { userInfo: RoomUser }) {
+  if (userInfo.userId === primaryStreamInfo.value?.participant?.userId) {
+    primaryStreamInfo.value = null;
+  }
+}
+
+subscribeEvent(RoomParticipantEvent.onParticipantLeft, handleParticipantLeft);
+onUnmounted(() => {
+  unsubscribeEvent(RoomParticipantEvent.onParticipantLeft, handleParticipantLeft);
+});
+
+</script>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+
+.arrow-stroke-right {
+  position: absolute;
+  top: 0;
+  right: 280px;
+}
+
+.arrow-stroke-left {
+  position: absolute;
+  top: 0;
+  right: 12px;
+}
+
+.arrow-stroke-up {
+  position: absolute;
+  top: 175px;
+  left: 0;
+}
+
+.arrow-stroke-down {
+  position: absolute;
+  top: 76px;
+  left: 0;
+}
+
+.stream-container-top {
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .enlarged-stream-container {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    min-height: 0;
+    box-sizing: border-box;
+    padding: 20px;
+    overflow: hidden;
+
+    .enlarged-stream-wrapper {
+      position: relative;
+
+      > * {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .stream-list-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    height: 175px;
+    padding: 20px 40px;
+
+    .stream-list-content {
+      display: flex;
+      max-width: 100%;
+      max-height: 100%;
+      overflow-x: scroll;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      gap: 8px;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      height: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 2px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &.hide-list {
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform: translateY(-166px);
+    }
+  }
+}
+
+.stream-container-right {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  place-content: center space-between;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .enlarged-stream-container {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    width: calc(100% - 280px);
+    height: calc(100%);
+    padding: 25px 20px;
+    overflow: hidden;
+
+    .enlarged-stream-wrapper {
+      position: relative;
+      > * {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .stream-list-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 280px;
+    box-sizing: border-box;
+    height: 100%;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .stream-list-content {
+      max-width: 100%;
+      max-height: 100%;
+      padding: 10px 0;
+      overflow-y: scroll;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      display: flex;
+      flex-wrap: wrap;
+      place-content: flex-start flex-start;
+      gap: 8px;
+    }
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 2px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &.hide-list {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 280px;
+      transform: translateX(270px);
+    }
+
+    &::before {
+      position: absolute;
+      top: 10px;
+      left: 0;
+      width: 100%;
+      height: 40px;
+      content: '';
+      opacity: 0.1;
+    }
+  }
+}
+
+.participant-view {
+  position: relative;
+  flex-shrink: 0;
+  width: 240px;
+  height: 135px;
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+}
+</style>

package/src/components/RoomView/index.ts

@@ -0,0 +1,5 @@
+import RoomViewComponent from './index.vue';
+
+const RoomView = RoomViewComponent;
+
+export { RoomView };

package/src/components/RoomView/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div ref="roomViewContainerRef" class="room-view-container">
+    <GridLayout
+      v-if="layoutTemplate === RoomLayoutTemplate.GridLayout"
+      @stream-double-click="handleStreamDoubleClick"
+    >
+      <template #participantViewUI="{ participant, streamType }">
+        <slot name="participantViewUI" v-bind="{ participant, streamType }" />
+      </template>
+    </GridLayout>
+    <SpeakerLayout
+      v-if="layoutTemplate === RoomLayoutTemplate.SidebarLayout || layoutTemplate === RoomLayoutTemplate.CinemaLayout"
+      :layout-template="layoutTemplate"
+      @stream-double-click="handleStreamDoubleClick"
+    >
+      <template #participantViewUI="{ participant, streamType }">
+        <slot name="participantViewUI" v-bind="{ participant, streamType }" />
+      </template>
+    </SpeakerLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, provide } from 'vue';
+import { RoomLayoutTemplate } from '../../types';
+import GridLayout from './GridLayout.vue';
+import SpeakerLayout from './SpeakerLayout.vue';
+import { useRoomToolbar } from './useRoomToolbar';
+import type { RoomParticipant, VideoStreamType } from '../../types';
+
+interface Props {
+  layoutTemplate?: RoomLayoutTemplate;
+}
+
+withDefaults(defineProps<Props>(), {
+  layoutTemplate: RoomLayoutTemplate.GridLayout,
+});
+
+const roomViewContainerRef = ref<HTMLDivElement | null>(null);
+
+const { showToolbar } = useRoomToolbar(roomViewContainerRef);
+provide('showToolbar', showToolbar);
+
+const emits = defineEmits(['stream-double-click']);
+
+function handleStreamDoubleClick(streamInfo: { participant: RoomParticipant; streamType: VideoStreamType }) {
+  emits('stream-double-click', streamInfo);
+}
+
+</script>
+
+<style lang="scss" scoped>
+.room-view-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/RoomView/useRoomToolbar.ts

@@ -0,0 +1,97 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+import type { Ref } from 'vue';
+
+export function useRoomToolbar(
+  containerRef: Ref<HTMLElement | null>,
+  autoHideDelay = 5000,
+  mouseMoveThrottle = 1000,
+) {
+  const showToolbar = ref(true);
+  const hideToolTimer = ref<number | null>(null);
+  const throttleTimer = ref<number | null>(null);
+  const isThrottled = ref(false);
+
+  const clearHideTimer = () => {
+    if (hideToolTimer.value !== null) {
+      clearTimeout(hideToolTimer.value);
+      hideToolTimer.value = null;
+    }
+  };
+
+  const clearThrottleTimer = () => {
+    if (throttleTimer.value !== null) {
+      clearTimeout(throttleTimer.value);
+      throttleTimer.value = null;
+    }
+  };
+
+  const setHideTimer = () => {
+    clearHideTimer();
+    hideToolTimer.value = window.setTimeout(() => {
+      showToolbar.value = false;
+    }, autoHideDelay);
+  };
+
+  const handleMouseEnter = () => {
+    showToolbar.value = true;
+    setHideTimer();
+  };
+
+  const handleMouseMoveThrottled = () => {
+    if (isThrottled.value) {
+      return;
+    }
+
+    showToolbar.value = true;
+    setHideTimer();
+
+    isThrottled.value = true;
+    throttleTimer.value = window.setTimeout(() => {
+      isThrottled.value = false;
+    }, mouseMoveThrottle);
+  };
+
+  const handleMouseLeave = () => {
+    clearHideTimer();
+    clearThrottleTimer();
+    isThrottled.value = false;
+    showToolbar.value = false;
+  };
+
+  const addEventListeners = () => {
+    const container = containerRef.value;
+    if (!container) {
+      return;
+    }
+
+    container.addEventListener('mouseenter', handleMouseEnter);
+    container.addEventListener('mousemove', handleMouseMoveThrottled);
+    container.addEventListener('mouseleave', handleMouseLeave);
+  };
+
+  const removeEventListeners = () => {
+    const container = containerRef.value;
+    if (!container) {
+      return;
+    }
+
+    container.removeEventListener('mouseenter', handleMouseEnter);
+    container.removeEventListener('mousemove', handleMouseMoveThrottled);
+    container.removeEventListener('mouseleave', handleMouseLeave);
+  };
+
+  onMounted(() => {
+    addEventListeners();
+    setHideTimer();
+  });
+
+  onUnmounted(() => {
+    clearHideTimer();
+    clearThrottleTimer();
+    removeEventListeners();
+  });
+
+  return {
+    showToolbar,
+  };
+}

package/src/components/RoomView/useRoomView.ts

@@ -0,0 +1,48 @@
+import { ref, computed } from 'vue';
+import { useRoomParticipantState } from '../../states/RoomParticipantState';
+import { DeviceStatus, RoomLayoutTemplate, RoomParticipantRole, VideoStreamType } from '../../types';
+import { combineComparators, createComparator } from '../../utils/compare';
+import type { RoomParticipant } from '../../types';
+
+export function useRoomView() {
+  const layoutTemplate = ref<RoomLayoutTemplate>(RoomLayoutTemplate.GridLayout);
+
+  const { localParticipant, participantList, participantWithScreen } = useRoomParticipantState();
+
+  const defaultUserListCompareFunction = combineComparators(
+    createComparator((userInfo: RoomParticipant) =>
+      Boolean(userInfo.role === RoomParticipantRole.Owner),
+    ),
+    createComparator((userInfo: RoomParticipant) =>
+      Boolean(userInfo.userId === localParticipant.value?.userId),
+    ),
+    createComparator((userInfo: RoomParticipant) =>
+      Boolean(userInfo.role === RoomParticipantRole.Admin),
+    ),
+    createComparator((userInfo: RoomParticipant) => Boolean(userInfo.screenShareStatus === DeviceStatus.On)),
+    createComparator((userInfo: RoomParticipant) =>
+      Boolean(userInfo.cameraStatus === DeviceStatus.On && userInfo.microphoneStatus === DeviceStatus.On),
+    ),
+    createComparator((userInfo: RoomParticipant) => Boolean(userInfo.cameraStatus === DeviceStatus.On)),
+    createComparator((userInfo: RoomParticipant) => Boolean(userInfo.microphoneStatus === DeviceStatus.On)),
+  );
+
+  const participantCameraList = computed(
+    () => participantList.value.sort(defaultUserListCompareFunction).map(participant => ({ participant, streamType: VideoStreamType.Camera })),
+  );
+
+  const participantStreamList = computed(() => {
+    const result = [];
+    if (participantWithScreen.value) {
+      result.push({ participant: participantWithScreen.value, streamType: VideoStreamType.Screen });
+    }
+    result.push(...participantCameraList.value);
+    return result;
+  });
+
+  return {
+    layoutTemplate,
+    participantCameraList,
+    participantStreamList,
+  };
+}