tuikit-atomicx-vue3 0.1.0

package/src/components/LiveScenePanel/index.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="live-scene-panel" :class="{ 'no-material': mediaSourceList.length === 0 }">
+    <LiveSceneSelect :displayMode="mediaSourceList.length === 0 ? 'panel' : 'button'" @addMaterial="selectMaterial" />
+    <!-- 素材列表区域 -->
+    <div class="materials-list">
+      <template v-for="material in mediaSourceList" :key="material.id">
+        <MaterialItem
+          :material="material"
+          @cameraSetting="updateCameraSetting(material)"
+          @rename="updateMaterialName(material)"
+        />
+      </template>
+    </div>
+
+    <!-- 摄像头设置弹窗 -->
+    <CameraSettingDialog
+      v-if="showCameraSettingDialog"
+      :mediaSource="cameraSettingMediaSource"
+      @close="closeCameraSettingDialog"
+      @addCameraMaterial="addCameraMaterial"
+      @updateCameraMaterial="updateMaterial(cameraSettingMediaSource, $event)"
+    />
+
+    <MaterialRenameDialog
+      v-if="showMaterialRenameDialog"
+      :material="renameMaterial"
+      @close="closeMaterialRenameDialog"
+      @rename="updateMaterial(renameMaterial, { name: $event })"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TUIRoomEngine, {
+  TRTCMediaSourceType,
+  TRTCVideoResolution,
+  TRTCVideoResolutionMode,
+  TUIVideoQuality,
+} from '@tencentcloud/tuiroom-engine-js';
+import LiveSceneSelect from './LiveSceneSelect.vue';
+import { TUIToast, TOAST_TYPE, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { onUnmounted, ref, computed } from 'vue';
+import CameraSettingDialog from './CameraSettingDialog.vue';
+import MaterialRenameDialog from './MaterialRenameDialog.vue';
+import MaterialItem from './MaterialItem.vue';
+import { useVideoMixerState } from '../../states/VideoMixerState';
+import { useDeviceState } from '../../states/DeviceState';
+import { useLiveState } from '../../states/LiveState';
+import { getNanoId } from '../../utils/utils';
+import { LiveOrientation, MediaSource } from '../../types';
+const { t } = useUIKit();
+
+const { currentLive } = useLiveState();
+const { mediaSourceList, publishVideoQuality, addMediaSource, updateMediaSource, clearMediaSource } = useVideoMixerState();
+const { getCameraList } = useDeviceState();
+
+TUIRoomEngine.once('ready', async () => {
+  await getCameraList();
+});
+
+// 状态数据
+const showMaterialDialog = ref(false);
+const showCameraSettingDialog = ref(false);
+const showMaterialRenameDialog = ref(false);
+
+const closeMaterialDialog = () => {
+  showMaterialDialog.value = false;
+};
+
+const closeCameraSettingDialog = () => {
+  showCameraSettingDialog.value = false;
+};
+
+const closeMaterialRenameDialog = () => {
+  showMaterialRenameDialog.value = false;
+};
+
+const addCameraMaterial = async (material: Partial<MediaSource>) => {
+  console.log('addCameraMaterial', material);
+  try {
+    await addMediaSource({
+      id: material.id || `${TRTCMediaSourceType.kCamera}_${getNanoId(5)}`,
+      type: material.type || TRTCMediaSourceType.kCamera,
+      ...material,
+    });
+    closeCameraSettingDialog();
+  } catch (error: any) {
+    if (error.name === 'NotAllowedError' && error.message.includes('Permission denied')) {
+      TUIToast({
+        type: TOAST_TYPE.WARNING,
+        message: t('Please check the current browser camera permission'),
+      });
+    }
+  }
+};
+
+const updateMaterial = async (material: MediaSource, materialOption: Partial<MediaSource>) => {
+  console.log('updateMaterial', materialOption);
+  await updateMediaSource(material, materialOption);
+  closeCameraSettingDialog();
+  closeMaterialRenameDialog();
+};
+
+const renameMaterial = ref<MediaSource | null>(null);
+const updateMaterialName = (material: MediaSource) => {
+  renameMaterial.value = material;
+  showMaterialRenameDialog.value = true;
+};
+
+const cameraSettingMediaSource = ref<MediaSource | null>(null);
+
+function getCanvasSize(
+  videoResolution: TUIVideoQuality,
+  resMode: TRTCVideoResolutionMode
+): { width: number; height: number } {
+  const sizeMap = {
+    [TUIVideoQuality.kVideoQuality_360p]: { width: 640, height: 360 },
+    [TUIVideoQuality.kVideoQuality_540p]: { width: 960, height: 540 },
+    [TUIVideoQuality.kVideoQuality_720p]: { width: 1280, height: 720 },
+    [TUIVideoQuality.kVideoQuality_1080p]: { width: 1920, height: 1080 },
+  };
+  let { width, height } = sizeMap[videoResolution];
+  if (resMode === TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait) {
+    [width, height] = [height, width];
+  }
+  return { width, height };
+}
+
+const currentLiveOrientation = computed(() => {
+  if (currentLive.value
+    && currentLive.value?.layoutTemplate >= 200 && currentLive.value?.layoutTemplate <= 599) {
+    return LiveOrientation.Landscape;
+  }
+  return LiveOrientation.Portrait;
+});
+
+function addImageMaterial() {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+  input.onchange = async e => {
+    const file = (e.target as HTMLInputElement)?.files?.[0];
+    if (!file) return;
+    const url = URL.createObjectURL(file);
+    const image = new Image();
+    image.src = url;
+    image.onload = async () => {
+      const imageWidth = image.width;
+      const imageHeight = image.height;
+      const { width: canvasWidth, height: canvasHeight } = getCanvasSize(
+        publishVideoQuality.value,
+        currentLiveOrientation.value === LiveOrientation.Landscape ? TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape : TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait
+      );
+      const scale = Math.min(canvasWidth / imageWidth, canvasHeight / imageHeight);
+      await addMediaSource({
+        id: `${TRTCMediaSourceType.kImage}_${getNanoId(5)}`,
+        type: TRTCMediaSourceType.kImage,
+        name: t('Image'),
+        image: {
+          url,
+        },
+        layout: {
+          rect: {
+            left: 0,
+            top: 0,
+            right: image.width * scale,
+            bottom: image.height * scale,
+          },
+        },
+      });
+      URL.revokeObjectURL(url);
+    };
+  };
+  input.click();
+}
+
+const selectMaterial = async (type: TRTCMediaSourceType) => {
+  closeMaterialDialog();
+  console.log('添加素材:', type);
+
+  switch (type) {
+    case TRTCMediaSourceType.kCamera:
+      cameraSettingMediaSource.value = null;
+      showCameraSettingDialog.value = true;
+      break;
+    case TRTCMediaSourceType.kScreen:
+      await addMediaSource({
+        id: `${TRTCMediaSourceType.kScreen}_${getNanoId(5)}`,
+        type: TRTCMediaSourceType.kScreen,
+        name: t('Screen'),
+        screen: {
+          resolution: TRTCVideoResolution.TRTCVideoResolution_1920_1080,
+          fps: 15,
+        },
+      });
+      break;
+    case TRTCMediaSourceType.kImage:
+      addImageMaterial();
+      break;
+    case TRTCMediaSourceType.kVideo:
+      await addMediaSource({
+        id: `${TRTCMediaSourceType.kVideo}_${getNanoId(5)}`,
+        type: TRTCMediaSourceType.kVideo,
+        name: t('Video'),
+        video: {
+          url: 'https://cdn.pixabay.com/video/2025/05/06/277097_tiny.mp4',
+        },
+      });
+      break;
+    case TRTCMediaSourceType.kText:
+      await addMediaSource({
+        id: `${TRTCMediaSourceType.kText}_${getNanoId(5)}`,
+        type: TRTCMediaSourceType.kText,
+        name: t('Text'),
+        text: {
+          content: 'Hello, World!',
+          fontSize: 32,
+          fontColor: 'red',
+          fontFamily: 'Arial',
+          fontWeight: 700,
+        },
+      });
+      break;
+    default:
+      TUIToast({
+        type: TOAST_TYPE.WARNING,
+        message: t('This type of material is not supported yet'),
+      });
+      break;
+  }
+};
+
+const updateCameraSetting = (material: MediaSource) => {
+  cameraSettingMediaSource.value = material;
+  showCameraSettingDialog.value = true;
+};
+
+onUnmounted(() => {
+  clearMediaSource();
+})
+</script>
+
+<style lang="scss" scoped>
+.live-scene-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  &.no-material {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.materials-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 20px;
+  width: 100%;
+}
+
+.actions-section {
+  display: flex;
+  gap: 8px;
+  border-radius: 6px;
+  background: #1a1a1a;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+
+  .add-material-btn {
+    border: none;
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    .add-icon {
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+
+  .clear-btn {
+    color: red;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+}
+</style>

package/src/components/LiveStreamView/DefaultStreamViewUI.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="stream-cover">
+    <template v-if="userInfo.userId">
+      <div class="no-video-container" v-if="!isVideoAvailable">
+        <Avatar class="avatar" :size="avatarSize" :src="userInfo.avatarUrl" :alt="displayName" />
+      </div>
+      <div class="user-details">
+        <AudioIcon
+          :isMuted="!isAudioAvailable"
+          :audioVolume="speakingUsers.get(userInfo.userId) || 0"
+          size="small"
+        />
+        <div class="username">{{ displayName }}</div>
+      </div>
+    </template>
+    <div v-if="!userInfo.userId" class="empty-position">
+      <div class="text" v-if="localCoGuestStatus === CoGuestStatus.Connected">{{ t('Waiting for connection') }}</div>
+      <div class="text" v-else>{{ t('Waiting for connection') }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { DeviceStatus, SeatUserInfo, CoGuestStatus } from '../../types';
+import { useCoGuestState } from '../../states/CoGuestState';
+import { Avatar } from '../Avatar';
+import AudioIcon from '../../baseComp/AudioIcon.vue';
+import { useLiveSeatState } from '../../states/LiveSeatState';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+const { t } = useUIKit();
+const props = withDefaults(
+  defineProps<{
+    userInfo?: SeatUserInfo;
+    containerStyle?: {
+      width: string;
+      height: string;
+      top: string;
+      left: string;
+    };
+  }>(),
+  {
+    containerStyle: undefined,
+    userInfo: undefined,
+  }
+);
+
+const { localCoGuestStatus } = useCoGuestState();
+const { speakingUsers } = useLiveSeatState();
+
+const avatarSize = computed(() => {
+  // The avatar size for background mixing is region.width / 5
+  const radio = 4.9;
+  if (parseInt(props.containerStyle?.width || '0') / radio > 80) {
+    return Math.ceil(parseInt(props.containerStyle?.width || '0') / radio);
+  }
+  return 80;
+});
+
+const displayName = computed(() => {
+  return props.userInfo?.userName || props.userInfo?.userId;
+});
+
+const isAudioAvailable = computed(() => {
+  return props.userInfo?.microphoneStatus === DeviceStatus.On;
+});
+
+const isVideoAvailable = computed(() => {
+  return props.userInfo?.cameraStatus === DeviceStatus.On;
+});
+</script>
+
+<style lang="scss" scoped>
+.stream-cover {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  border: 1px solid var(--uikit-color-black-6);
+
+  .no-video-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .avatar {
+      border: 2px solid rgba(255, 255, 255, 0.6);
+    }
+  }
+
+  .user-details {
+    text-align: center;
+    position: absolute;
+    bottom: 6px;
+    left: 6px;
+    display: flex;
+    background-color: rgba(34, 38, 46, 0.40);
+    padding: 2px 6px;
+    border-radius: 20px;
+    max-width: 80%;
+    box-sizing: border-box;
+
+    .username {
+      font-size: 16px;
+      font-weight: 500;
+      margin-left: 4px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .empty-position {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: var(--uikit-color-gray-2);
+    color: #fff;
+    font-weight: bold;
+    pointer-events: auto;
+
+    .number {
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+
+    .text {
+      font-size: 14px;
+    }
+  }
+}
+</style>

package/src/components/LiveStreamView/i18n/en-US/index.ts

@@ -0,0 +1,4 @@
+export const resource = {
+  'No video': 'No video',
+  'Waiting for connection': 'Waiting for connection',
+};

package/src/components/LiveStreamView/i18n/index.ts

@@ -0,0 +1,2 @@
+export { resource as zhCNResource } from './zh-CN/index';
+export { resource as enUSResource } from './en-US/index';

package/src/components/LiveStreamView/i18n/zh-CN/index.ts

@@ -0,0 +1,4 @@
+export const resource = {
+  'No video': '暂无画面',
+  'Waiting for connection': '等待连线',
+};

package/src/components/LiveStreamView/index.ts

@@ -0,0 +1,8 @@
+import LiveStreamView from './index.vue';
+import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
+import { addI18n } from '../../i18n';
+import { enUSResource, zhCNResource } from './i18n';
+addI18n('en-US', { translation: enUSResource });
+addI18n('zh-CN', { translation: zhCNResource });
+
+export { LiveStreamView, DefaultStreamViewUI };