tuikit-atomicx-vue3 0.1.0

package/dist/components/LiveScenePanel/icons/ScreenIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/LiveScenePanel/index.d.ts

@@ -0,0 +1,3 @@
+import { default as LiveScenePanel } from './index.vue';
+
+export { LiveScenePanel };

package/dist/components/LiveScenePanel/index.js

@@ -0,0 +1,231 @@
+import { defineComponent, ref, computed, onUnmounted, createElementBlock, openBlock, normalizeClass, unref, createVNode, createElementVNode, createBlock, createCommentVNode, Fragment, renderList } from "vue";
+import TUIRoomEngine, { TRTCMediaSourceType, TRTCVideoResolution, TRTCVideoResolutionMode, TUIVideoQuality } from "@tencentcloud/tuiroom-engine-js";
+import LiveSceneSelect from "./LiveSceneSelect.js";
+import { useUIKit, TUIToast, TOAST_TYPE } from "@tencentcloud/uikit-base-component-vue3";
+import CameraSettingDialog from "./CameraSettingDialog.js";
+import { _ as _sfc_main$1 } from "../../MaterialRenameDialog.vue_vue_type_script_setup_true_lang-Cmhf2QX4.js";
+import MaterialItem from "./MaterialItem.js";
+import { useVideoMixerState } from "../../states/VideoMixerState.js";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { useLiveState } from "../../states/LiveState/index.js";
+import { getNanoId } from "../../utils/utils.js";
+import { LiveOrientation } from "../../types/live.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+import { addI18n } from "../../i18n/index.js";
+import { resource } from "./i18n/en-US/index.js";
+import { resource as resource$1 } from "./i18n/zh-CN/index.js";
+const _hoisted_1 = { class: "materials-list" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    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) => {
+      console.log("addCameraMaterial", material);
+      try {
+        await addMediaSource({
+          id: material.id || `${TRTCMediaSourceType.kCamera}_${getNanoId(5)}`,
+          type: material.type || TRTCMediaSourceType.kCamera,
+          ...material
+        });
+        closeCameraSettingDialog();
+      } catch (error) {
+        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, materialOption) => {
+      console.log("updateMaterial", materialOption);
+      await updateMediaSource(material, materialOption);
+      closeCameraSettingDialog();
+      closeMaterialRenameDialog();
+    };
+    const renameMaterial = ref(null);
+    const updateMaterialName = (material) => {
+      renameMaterial.value = material;
+      showMaterialRenameDialog.value = true;
+    };
+    const cameraSettingMediaSource = ref(null);
+    function getCanvasSize(videoResolution, resMode) {
+      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(() => {
+      var _a, _b;
+      if (currentLive.value && ((_a = currentLive.value) == null ? void 0 : _a.layoutTemplate) >= 200 && ((_b = currentLive.value) == null ? void 0 : _b.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) => {
+        var _a, _b;
+        const file = (_b = (_a = e.target) == null ? void 0 : _a.files) == null ? void 0 : _b[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) => {
+      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) => {
+      cameraSettingMediaSource.value = material;
+      showCameraSettingDialog.value = true;
+    };
+    onUnmounted(() => {
+      clearMediaSource();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["live-scene-panel", { "no-material": unref(mediaSourceList).length === 0 }])
+      }, [
+        createVNode(LiveSceneSelect, {
+          displayMode: unref(mediaSourceList).length === 0 ? "panel" : "button",
+          onAddMaterial: selectMaterial
+        }, null, 8, ["displayMode"]),
+        createElementVNode("div", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(mediaSourceList), (material) => {
+            return openBlock(), createBlock(MaterialItem, {
+              key: material.id,
+              material,
+              onCameraSetting: ($event) => updateCameraSetting(material),
+              onRename: ($event) => updateMaterialName(material)
+            }, null, 8, ["material", "onCameraSetting", "onRename"]);
+          }), 128))
+        ]),
+        showCameraSettingDialog.value ? (openBlock(), createBlock(CameraSettingDialog, {
+          key: 0,
+          mediaSource: cameraSettingMediaSource.value,
+          onClose: closeCameraSettingDialog,
+          onAddCameraMaterial: addCameraMaterial,
+          onUpdateCameraMaterial: _cache[0] || (_cache[0] = ($event) => updateMaterial(cameraSettingMediaSource.value, $event))
+        }, null, 8, ["mediaSource"])) : createCommentVNode("", true),
+        showMaterialRenameDialog.value ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 1,
+          material: renameMaterial.value,
+          onClose: closeMaterialRenameDialog,
+          onRename: _cache[1] || (_cache[1] = ($event) => updateMaterial(renameMaterial.value, { name: $event }))
+        }, null, 8, ["material"])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-869f88f0"]]);
+addI18n("en-US", { translation: resource });
+addI18n("zh-CN", { translation: resource$1 });
+export {
+  index as LiveScenePanel
+};

package/dist/components/LiveScenePanel/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/LiveStreamView/DefaultStreamViewUI.js

@@ -0,0 +1,90 @@
+import { defineComponent, computed, createElementBlock, openBlock, createCommentVNode, Fragment, createElementVNode, createVNode, unref, toDisplayString } from "vue";
+import { DeviceStatus } from "../../types/device.js";
+import { CoGuestStatus } from "../../types/coGuest.js";
+import { useCoGuestState } from "../../states/CoGuestState.js";
+import Avatar from "../Avatar/Avatar.js";
+import AudioIcon from "../../baseComp/AudioIcon.js";
+import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "stream-cover" };
+const _hoisted_2 = {
+  key: 0,
+  class: "no-video-container"
+};
+const _hoisted_3 = { class: "user-details" };
+const _hoisted_4 = { class: "username" };
+const _hoisted_5 = {
+  key: 1,
+  class: "empty-position"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "text"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "text"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DefaultStreamViewUI",
+  props: {
+    userInfo: { default: void 0 },
+    containerStyle: { default: void 0 }
+  },
+  setup(__props) {
+    const { t } = useUIKit();
+    const props = __props;
+    const { localCoGuestStatus } = useCoGuestState();
+    const { speakingUsers } = useLiveSeatState();
+    const avatarSize = computed(() => {
+      var _a, _b;
+      const radio = 4.9;
+      if (parseInt(((_a = props.containerStyle) == null ? void 0 : _a.width) || "0") / radio > 80) {
+        return Math.ceil(parseInt(((_b = props.containerStyle) == null ? void 0 : _b.width) || "0") / radio);
+      }
+      return 80;
+    });
+    const displayName = computed(() => {
+      var _a, _b;
+      return ((_a = props.userInfo) == null ? void 0 : _a.userName) || ((_b = props.userInfo) == null ? void 0 : _b.userId);
+    });
+    const isAudioAvailable = computed(() => {
+      var _a;
+      return ((_a = props.userInfo) == null ? void 0 : _a.microphoneStatus) === DeviceStatus.On;
+    });
+    const isVideoAvailable = computed(() => {
+      var _a;
+      return ((_a = props.userInfo) == null ? void 0 : _a.cameraStatus) === DeviceStatus.On;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.userInfo.userId ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          !isVideoAvailable.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            createVNode(unref(Avatar), {
+              class: "avatar",
+              size: avatarSize.value,
+              src: _ctx.userInfo.avatarUrl,
+              alt: displayName.value
+            }, null, 8, ["size", "src", "alt"])
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_3, [
+            createVNode(AudioIcon, {
+              isMuted: !isAudioAvailable.value,
+              audioVolume: unref(speakingUsers).get(_ctx.userInfo.userId) || 0,
+              size: "small"
+            }, null, 8, ["isMuted", "audioVolume"]),
+            createElementVNode("div", _hoisted_4, toDisplayString(displayName.value), 1)
+          ])
+        ], 64)) : createCommentVNode("", true),
+        !_ctx.userInfo.userId ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          unref(localCoGuestStatus) === unref(CoGuestStatus).Connected ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(unref(t)("Waiting for connection")), 1)) : (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(unref(t)("Waiting for connection")), 1))
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const DefaultStreamViewUI = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4b3410c3"]]);
+export {
+  DefaultStreamViewUI as default
+};

package/dist/components/LiveStreamView/DefaultStreamViewUI.vue.d.ts

@@ -0,0 +1,51 @@
+import { SeatUserInfo } from '../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    userInfo?: SeatUserInfo;
+    containerStyle?: {
+        width: string;
+        height: string;
+        top: string;
+        left: string;
+    };
+}>, {
+    containerStyle: undefined;
+    userInfo: undefined;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    userInfo?: SeatUserInfo;
+    containerStyle?: {
+        width: string;
+        height: string;
+        top: string;
+        left: string;
+    };
+}>, {
+    containerStyle: undefined;
+    userInfo: undefined;
+}>>> & Readonly<{}>, {
+    userInfo: SeatUserInfo;
+    containerStyle: {
+        width: string;
+        height: string;
+        top: string;
+        left: string;
+    };
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/LiveStreamView/i18n/en-US/index.d.ts

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

package/dist/components/LiveStreamView/i18n/en-US/index.js

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

package/dist/components/LiveStreamView/i18n/index.d.ts

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

package/dist/components/LiveStreamView/i18n/index.js

@@ -0,0 +1,6 @@
+import { resource } from "./zh-CN/index.js";
+import { resource as resource2 } from "./en-US/index.js";
+export {
+  resource2 as enUSResource,
+  resource as zhCNResource
+};

package/dist/components/LiveStreamView/i18n/zh-CN/index.d.ts

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

package/dist/components/LiveStreamView/i18n/zh-CN/index.js

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

package/dist/components/LiveStreamView/index.d.ts

@@ -0,0 +1,4 @@
+import { default as LiveStreamView } from './index.vue';
+import { default as DefaultStreamViewUI } from './DefaultStreamViewUI.vue';
+
+export { LiveStreamView, DefaultStreamViewUI };