视频布局（Web）

<template>
  <div class="room-view-wrapper">
    <RoomView :layout-template="RoomLayoutTemplate.GridLayout" />
  </div>
</template>

<script setup lang="ts">
import { RoomLayoutTemplate, RoomView } from 'tuikit-atomicx-vue3/room';
</script>

<style scoped>
/* 必须为 RoomView 父容器明确设置宽高 */
.room-view-wrapper { width: 100%; height: 100%; }
</style>

<template>
  <div class="room-view-wrapper">
    <RoomView :layout-template="RoomLayoutTemplate.MobileLayout" />
  </div>
</template>

<script setup lang="ts">
import { RoomLayoutTemplate, RoomView } from 'tuikit-atomicx-vue3/room';
</script>

<style scoped>
/* 必须为 RoomView 父容器明确设置宽高 */
.room-view-wrapper { width: 100%; height: 100%; }
</style>

<template>
  <RoomView :layout-template="currentLayout">
    <template #participantViewUI="{ participant, streamType }">
      <ParticipantViewUI
        :participant="participant"
        :stream-type="streamType"
      />
    </template>
  </RoomView>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  RoomLayoutTemplate,
  RoomView,
} from 'tuikit-atomicx-vue3/room';
import ParticipantViewUI from './ParticipantViewUI.vue';

const currentLayout = ref(RoomLayoutTemplate.GridLayout);
</script>

<template>
  <div
    class="participant-view-ui"
    :class="{ 'camera-off': shouldShowCameraPlaceholder }"
  >
    <div v-if="shouldShowCameraPlaceholder" class="camera-placeholder">
      {{ displayName }}
    </div>
    <div class="participant-info">
      <span class="user-name">{{ displayName }}</span>
      <span v-if="isOwner && isCameraStream" class="role-tag">房主</span>
      <span v-if="isScreenStream" class="stream-tag">{{ displayName }} 正在屏幕分享</span>
      <span v-else class="device-tag">{{ isMicrophoneOn ? '麦克风已开' : '麦克风已关' }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {
  DeviceStatus,
  RoomParticipantRole,
  VideoStreamType,
} from 'tuikit-atomicx-vue3/room';
import type { RoomParticipant } from 'tuikit-atomicx-vue3/room';

const props = defineProps<{
  participant: RoomParticipant;
  streamType: VideoStreamType;
}>();

const displayName = computed(() => props.participant.nameCard || props.participant.userName || props.participant.userId);
const isOwner = computed(() => props.participant.role === RoomParticipantRole.Owner && props.streamType === VideoStreamType.Camera);
const isCameraStream = computed(() => props.streamType === VideoStreamType.Camera);
const isScreenStream = computed(() => props.streamType === VideoStreamType.Screen);
const isMicrophoneOn = computed(() => props.participant.microphoneStatus === DeviceStatus.On);
const shouldShowCameraPlaceholder = computed(() => isCameraStream.value && props.participant.cameraStatus !== DeviceStatus.On);
</script>

<style scoped>
/* 必须设置 pointer-events 属性值为 none，否则会拦截底层视频画面的双击、拖拽交互！ */
.participant-view-ui { position: absolute; inset: 0; pointer-events: none; }
.participant-view-ui.camera-off { background: #1f2937; }
.camera-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-size: 16px; }
.participant-info { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); padding: 4px 8px; color: #fff; background: rgb(0 0 0 / 50%); border-radius: 12px; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>

<template>
  <RoomView :layout-template="currentLayout" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { RoomView, RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';

const currentLayout = ref(RoomLayoutTemplate.GridLayout);

function switchToGridLayout() {
  currentLayout.value = RoomLayoutTemplate.GridLayout;
}

function switchToSpeakerLayout() {
  currentLayout.value = RoomLayoutTemplate.SidebarLayout;
}
</script>

<template>
  <RoomView :layout-template="currentLayout" />
</template>

<script setup>
import { ref, watch } from 'vue';
import {
  RoomLayoutTemplate,
  useRoomParticipantState,
} from 'tuikit-atomicx-vue3/room';

const currentLayout = ref(RoomLayoutTemplate.GridLayout);

const { participantList, participantWithScreen } = useRoomParticipantState();

watch(participantWithScreen, (newVal, oldVal) => {
  if (newVal && !oldVal) {
    currentLayout.value = RoomLayoutTemplate.SidebarLayout;
  }
});

watch(
  () => participantList.value.length + (participantWithScreen.value ? 1 : 0),
  (count) => {
    if (count === 1) {
      currentLayout.value = RoomLayoutTemplate.GridLayout;
    }
  },
);
</script>