tuikit-atomicx-vue3 0.1.0

package/src/components/LiveScenePanel/CameraSettingDialog.vue

@@ -0,0 +1,249 @@
+<template>
+  <TUIDialog
+    :visible="true"
+    width="600px"
+    :confirmText="confirmText"
+    @close="handleClose"
+    @cancel="handleClose"
+    @confirm="handleConfirm"
+    :confirmDisabled="cameraList.length === 0"
+    :title="title"
+    :customClasses="['camera-setting-dialog']"
+  >
+    <div id="video-preview" class="video-preview"></div>
+    <div class="basic-setting">
+      <div class="item-setting">
+        <span class="title">{{ t('Camera') }}</span>
+        <TUISelect class="camera-select" v-model="currentCameraId" @change="handleCameraChange">
+          <TUIOption v-for="item in cameraList" :key="item.deviceId" :value="item.deviceId" :label="item.deviceName" />
+        </TUISelect>
+      </div>
+      <div class="item-setting">
+        <span class="title">{{ t('Resolution') }}</span>
+        <TUISelect class="resolution-select" v-model="currentResolution">
+          <TUIOption v-for="item in videoResolutionList" :key="item.value" :value="item.value" :label="item.label" />
+        </TUISelect>
+      </div>
+      <div class="mirror-container" @click="toggleMirror">
+        <svg-icon :icon="isMirror ? CameraMirror : CameraUnMirror" />
+      </div>
+    </div>
+  </TUIDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { useDeviceState } from '../../states/DeviceState';
+import { MediaSource } from '../../types';
+import {
+  TRTCVideoMirrorType,
+  TRTCVideoResolution,
+  TRTCCloud,
+  TRTCVideoFillMode,
+  TRTCVideoRotation,
+} from '@tencentcloud/tuiroom-engine-js';
+import { TUIDialog, TUISelect, TUIOption, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import SvgIcon from '../../baseComp/SvgIcon.vue';
+import CameraMirror from './icons/CameraMirror.vue';
+import CameraUnMirror from './icons/CameraUnmirror.vue';
+
+const previewTRTCCloud = new TRTCCloud();
+
+const { t } = useUIKit();
+
+const { cameraList } = useDeviceState();
+
+const props = defineProps<{
+  mediaSource: MediaSource | null;
+}>();
+
+const emits = defineEmits(['addCameraMaterial', 'updateCameraMaterial', 'close']);
+
+onUnmounted(async () => {
+  await previewTRTCCloud.stopCameraDeviceTest();
+});
+
+const title = computed(() => {
+  return props.mediaSource ? t('Update Camera') : t('Add Camera');
+});
+
+const confirmText = computed(() => {
+  return props.mediaSource ? t('Update Camera') : t('Add Camera');
+});
+
+const currentCameraId = ref(props.mediaSource?.camera.cameraId || cameraList.value[0]?.deviceId);
+const currentResolution = ref(props.mediaSource?.camera.resolution || TRTCVideoResolution.TRTCVideoResolution_1280_720);
+const currentFps = ref(props.mediaSource?.camera.fps);
+const isMirror: Ref<boolean> = ref(
+  props.mediaSource?.camera.mirror === TRTCVideoMirrorType.TRTCVideoMirrorType_Enable || true
+);
+
+const videoResolutionList = computed(() => [
+  { label: '640x360', value: TRTCVideoResolution.TRTCVideoResolution_640_360 },
+  { label: '960x540', value: TRTCVideoResolution.TRTCVideoResolution_960_540 },
+  { label: '1280x720', value: TRTCVideoResolution.TRTCVideoResolution_1280_720 },
+  { label: '1920x1080', value: TRTCVideoResolution.TRTCVideoResolution_1920_1080 },
+]);
+
+watch(() => cameraList.value, async () => {
+  if (!cameraList.value.find(item => item.deviceId === currentCameraId.value)) {
+    currentCameraId.value = cameraList.value[0]?.deviceId;
+    await previewTRTCCloud.setCurrentCameraDevice(currentCameraId.value);
+  }
+});
+
+onMounted(async () => {
+  if (props.mediaSource?.camera.cameraId) {
+    currentCameraId.value = props.mediaSource.camera.cameraId;
+    await previewTRTCCloud.setCurrentCameraDevice(props.mediaSource.camera.cameraId);
+  } else {
+    currentCameraId.value = cameraList.value[0]?.deviceId;
+    await previewTRTCCloud.setCurrentCameraDevice(cameraList.value[0]?.deviceId);
+  }
+  await previewTRTCCloud.startCameraDeviceTest('video-preview');
+});
+
+watch(
+  () => props.mediaSource,
+  async (mediaSource: any) => {
+    console.log('mediaSource', mediaSource);
+    if (mediaSource) {
+      const cameraConfig = mediaSource.camera;
+      if (currentCameraId.value !== cameraConfig.cameraId) {
+        currentCameraId.value = cameraConfig.cameraId;
+        await previewTRTCCloud.setCurrentCameraDevice(cameraConfig.cameraId);
+      }
+      if (currentResolution.value !== cameraConfig.resolution) {
+        currentResolution.value = cameraConfig.resolution;
+      }
+      if (currentFps.value !== cameraConfig.fps) {
+        currentFps.value = cameraConfig.fps;
+      }
+      isMirror.value = mediaSource.layout.mirror === TRTCVideoMirrorType.TRTCVideoMirrorType_Enable;
+      await previewTRTCCloud.setLocalRenderParams({
+        rotation: TRTCVideoRotation.TRTCVideoRotation_0,
+        fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill,
+        mirrorType: isMirror.value
+          ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable
+          : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+const handleCameraChange = async (newVal: string) => {
+  currentCameraId.value = newVal;
+  await previewTRTCCloud.setCurrentCameraDevice(newVal);
+};
+
+const toggleMirror = () => {
+  isMirror.value = !isMirror.value;
+  previewTRTCCloud.setLocalRenderParams({
+    rotation: TRTCVideoRotation.TRTCVideoRotation_0,
+    fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill,
+    mirrorType: isMirror.value
+      ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable
+      : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
+  });
+};
+
+const handleConfirm = () => {
+  if (!props.mediaSource) {
+    emits('addCameraMaterial', {
+      name: cameraList.value.find(item => item.deviceId === currentCameraId.value)?.deviceName,
+      camera: {
+        cameraId: currentCameraId.value,
+        resolution: currentResolution.value,
+      },
+      layout: {
+        mirror: isMirror.value
+          ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable
+          : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
+      },
+    });
+  } else {
+    const hasCameraNameChanged = props.mediaSource.name !== cameraList.value.find(item => item.deviceId === props.mediaSource.camera.cameraId)?.deviceName;
+    const updateCameraInfo = {
+      camera: {
+        cameraId: currentCameraId.value,
+        resolution: currentResolution.value,
+      },
+      layout: {
+        mirror: isMirror.value
+          ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable
+          : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
+      },
+    }
+    if (!hasCameraNameChanged) {
+      Object.assign(updateCameraInfo, {
+        name: cameraList.value.find(item => item.deviceId === currentCameraId.value)?.deviceName,
+      });
+    }
+    emits('updateCameraMaterial', updateCameraInfo);
+  }
+};
+
+const handleClose = () => {
+  emits('close');
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.camera-setting-dialog) {
+  width: 600px;
+  padding: 20px;
+  .dialog-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 0;
+  }
+}
+
+.video-preview {
+  width: 100%;
+  height: 300px;
+  background-color: #000;
+}
+
+.basic-setting {
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-top: 16px;
+  .item-setting {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    .title {
+      font-size: 14px;
+      color: var(--text-color-secondary);
+      margin-bottom: 12px;
+    }
+  }
+
+  .camera-select {
+    width: 300px;
+  }
+
+  .resolution-select {
+    width: 200px;
+  }
+
+  .mirror-container {
+    width: 42px;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--text-color-secondary);
+    border: 1px solid var(--stroke-color-primary);
+    border-radius: 8px;
+  }
+}
+</style>

package/src/components/LiveScenePanel/LiveSceneSelect.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="live-scene-placeholder" v-if="displayMode === 'panel'">
+    <div class="live-scene-placeholder-content">
+      <span>{{ t('We support you to add rich sources') }}</span>
+      <div class="add-material-list">
+        <div
+          class="add-material-item"
+          @click="handleAddMaterial(item.type)"
+          v-for="item in defaultMaterialList"
+          :key="item.title"
+        >
+          <svg-icon :icon="item.icon" class="icon-container" />
+          <span>{{ item.title }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="live-scene-button"
+    v-if="displayMode === 'button'"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <div class="add-material-button">
+      <svg-icon :icon="AddIcon" class="icon-container" />
+      <span>{{ t('Add') }}</span>
+    </div>
+    <transition name="dropdown">
+      <div class="add-material-list" v-show="isDropdownVisible">
+        <div
+          class="add-material-item"
+          @click="handleAddMaterial(item.type)"
+          v-for="item in defaultMaterialList"
+          :key="item.title"
+        >
+          <svg-icon :icon="item.icon" class="icon-container" />
+          <span>{{ item.title }}</span>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { TRTCMediaSourceType } from '@tencentcloud/tuiroom-engine-js';
+import SvgIcon from '../../baseComp/SvgIcon.vue';
+import AddIcon from './icons/AddIcon.vue';
+import CameraIcon from './icons/CameraIcon.vue';
+import ScreenIcon from './icons/ScreenIcon.vue';
+import ImageIcon from './icons/ImageIcon.vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+const { t } = useUIKit();
+
+const props = defineProps<{
+  displayMode: 'panel' | 'button';
+}>();
+const emits = defineEmits(['addMaterial']);
+
+// 控制下拉列表显示状态
+const isDropdownVisible = ref(false);
+let hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+const defaultMaterialList = [
+  { icon: CameraIcon, title: t('Add Camera'), type: TRTCMediaSourceType.kCamera },
+  { icon: ScreenIcon, title: t('Add Screen Share'), type: TRTCMediaSourceType.kScreen },
+  { icon: ImageIcon, title: t('Add Image'), type: TRTCMediaSourceType.kImage },
+];
+
+// 鼠标进入时显示下拉列表
+const handleMouseEnter = () => {
+  if (hideTimer) {
+    clearTimeout(hideTimer);
+    hideTimer = null;
+  }
+  isDropdownVisible.value = true;
+};
+
+// 鼠标离开时延迟隐藏下拉列表
+const handleMouseLeave = () => {
+  hideTimer = setTimeout(() => {
+    isDropdownVisible.value = false;
+  }, 200); // 200ms 延迟，避免鼠标快速移动时闪烁
+};
+
+// 点击材料项时的处理
+const handleAddMaterial = (type: TRTCMediaSourceType) => {
+  emits('addMaterial', type);
+  // 只在 button 模式下隐藏下拉列表
+  if (props.displayMode === 'button') {
+    isDropdownVisible.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.live-scene-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+
+  .add-material-list {
+    margin-top: 50px;
+    width: 100%;
+    .add-material-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 40px;
+      border-radius: 20px;
+      background-color: #383f4d;
+      color: var(--text-color-primary);
+      font-size: 12px;
+      font-weight: 400;
+      margin-top: 24px;
+      cursor: pointer;
+      gap: 4px;
+      &:hover {
+        background-color: #4f586b;
+      }
+    }
+  }
+}
+
+.live-scene-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  position: relative;
+
+  .add-material-button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 40px;
+    border-radius: 20px;
+    background-color: #383f4d;
+    color: var(--text-color-primary);
+    font-size: 12px;
+    font-weight: 400;
+    cursor: pointer;
+    gap: 4px;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #4f586b;
+    }
+  }
+
+  .add-material-list {
+    width: 100%;
+    padding: 9px;
+    position: absolute;
+    right: 0;
+    top: calc(100% + 10px);
+    z-index: 9;
+    border-radius: 8px;
+    background-color: rgba(45, 50, 62, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+
+    .add-material-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 40px;
+      color: #d5e0f2;
+      font-size: 12px;
+      font-weight: 400;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      gap: 4px;
+
+      &:hover {
+        background-color: rgba(209, 217, 236, 0.1);
+      }
+    }
+  }
+}
+
+// 下拉动画效果
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.3s ease;
+}
+
+.dropdown-enter-from {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95);
+}
+
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95);
+}
+
+.dropdown-enter-to,
+.dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+</style>

package/src/components/LiveScenePanel/MaterialDialog.vue

@@ -0,0 +1,226 @@
+<template>
+  <div v-if="props.visible" class="material-dialog-overlay" @click="handleClose">
+    <div class="material-dialog" @click.stop>
+      <div class="dialog-header">
+        <h3>{{ t('Add Material') }}</h3>
+        <button class="close-btn" @click="handleClose">×</button>
+      </div>
+
+      <div class="dialog-content">
+        <!-- 外接设备 -->
+        <div class="category-section">
+          <h4>{{ t('External Devices') }}</h4>
+          <div class="material-grid">
+            <div class="material-option" @click="selectMaterial(TRTCMediaSourceType.kCamera)">
+              <div class="option-icon">📹</div>
+              <span class="option-label">{{ t('Camera') }}</span>
+              <div class="status-dot active"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 多媒体 -->
+        <div class="category-section">
+          <h4>{{ t('Multimedia') }}</h4>
+          <div class="material-grid">
+            <div class="material-option" @click="selectMaterial(TRTCMediaSourceType.kVideo)">
+              <div class="option-icon">▶️</div>
+              <span class="option-label">{{ t('Video') }}</span>
+            </div>
+            <div class="material-option" @click="selectMaterial(TRTCMediaSourceType.kImage)">
+              <div class="option-icon">🖼️</div>
+              <span class="option-label">{{ t('Image') }}</span>
+            </div>
+            <div class="material-option" @click="selectMaterial(TRTCMediaSourceType.kText)">
+              <div class="option-icon">📝</div>
+              <span class="option-label">{{ t('Text') }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 画面捕捉 -->
+        <div class="category-section">
+          <h4>{{ t('Screen Capture') }}</h4>
+          <div class="material-grid">
+            <div class="material-option" @click="selectMaterial(TRTCMediaSourceType.kScreen)">
+              <div class="option-icon">🤖</div>
+              <span class="option-label">{{ t('Screen') }}</span>
+              <div class="status-dot active"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TRTCMediaSourceType } from '@tencentcloud/tuiroom-engine-js';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+const { t } = useUIKit();
+
+interface Props {
+  visible: boolean;
+}
+
+interface Emits {
+  (e: 'close'): void;
+  (e: 'select', type: TRTCMediaSourceType): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const handleClose = () => {
+  emit('close');
+};
+
+const selectMaterial = (type: TRTCMediaSourceType) => {
+  emit('select', type);
+};
+</script>
+
+<style lang="scss" scoped>
+.material-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.material-dialog {
+  background: #2d2d2d;
+  border-radius: 12px;
+  width: 600px;
+  max-width: 90vw;
+  max-height: 80vh;
+  overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #404040;
+
+  h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #ffffff;
+  }
+
+  .close-btn {
+    width: 28px;
+    height: 28px;
+    background: none;
+    border: none;
+    color: #9ca3af;
+    cursor: pointer;
+    font-size: 20px;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: #3a3a3a;
+      color: #ffffff;
+    }
+  }
+}
+
+.dialog-content {
+  padding: 20px;
+  max-height: 60vh;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #3a3a3a;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #5a5a5a;
+    border-radius: 3px;
+
+    &:hover {
+      background: #6a6a6a;
+    }
+  }
+}
+
+.category-section {
+  margin-bottom: 24px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  h4 {
+    margin: 0 0 12px 0;
+    font-size: 14px;
+    font-weight: 500;
+    color: #9ca3af;
+  }
+}
+
+.material-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 12px;
+}
+
+.material-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 12px;
+  background: #3a3a3a;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+
+  &:hover {
+    background: #4a4a4a;
+    transform: translateY(-2px);
+  }
+
+  .option-icon {
+    font-size: 32px;
+    margin-bottom: 4px;
+  }
+
+  .option-label {
+    font-size: 12px;
+    color: #ffffff;
+    text-align: center;
+    line-height: 1.2;
+  }
+
+  .status-dot {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+
+    &.active {
+      background: #10b981;
+    }
+  }
+}
+</style>