tuikit-atomicx-vue3 0.1.0

package/dist/components/VideoSetting/VideoMediaControl.js

@@ -0,0 +1,94 @@
+import { defineComponent, inject, ref, withDirectives, createElementBlock, openBlock, createVNode, unref, withCtx, Fragment, createBlock, vShow } from "vue";
+import { IconCameraOn, IconCameraOff } from "@tencentcloud/uikit-base-component-vue3";
+import IconButton from "../../baseComp/IconButton.js";
+import VideoSettingTab from "./VideoSettingTab.js";
+import { useI18n } from "../../locales/index.js";
+import vClickOutside from "../../directives/vClickOutside.js";
+import { DeviceError, DeviceStatus, MediaSettingDisplayMode } from "../../types/device.js";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { useUserState } from "../../states/UserState/index.js";
+import { useRoomState } from "../../states/RoomState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "video-control-container" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VideoMediaControl",
+  emits: ["click-icon"],
+  setup(__props, { emit: __emit }) {
+    const videoSettingProps = inject("videoSettingProps");
+    const emits = __emit;
+    const { cameraStatus, cameraLastError, isCameraTesting, startCameraDeviceTest, stopCameraDeviceTest, openLocalCamera, closeLocalCamera } = useDeviceState();
+    const { localUser } = useUserState();
+    const { currentRoom } = useRoomState();
+    const { t } = useI18n();
+    const showVideoSettingTab = ref(false);
+    async function handleClickIcon() {
+      var _a;
+      showVideoSettingTab.value = false;
+      emits("click-icon");
+      if (!currentRoom.value) {
+        if (isCameraTesting.value) {
+          await stopCameraDeviceTest();
+        } else {
+          await startCameraDeviceTest({ view: "video-preview" });
+        }
+        return;
+      }
+      if (((_a = localUser.value) == null ? void 0 : _a.cameraStatus) === DeviceStatus.On) {
+        await closeLocalCamera();
+      } else {
+        await openLocalCamera();
+      }
+    }
+    function handleMore() {
+      showVideoSettingTab.value = !showVideoSettingTab.value;
+    }
+    function handleHideVideoSettingTab() {
+      if (showVideoSettingTab.value) {
+        showVideoSettingTab.value = false;
+      }
+    }
+    return (_ctx, _cache) => {
+      var _a;
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(IconButton, {
+          title: unref(t)("Camera"),
+          "has-more": ((_a = unref(videoSettingProps)) == null ? void 0 : _a.displayMode) === unref(MediaSettingDisplayMode).IconWithPanel,
+          disabled: unref(cameraStatus) === unref(DeviceStatus).OffNeedPermission,
+          "is-not-support": unref(cameraLastError) !== unref(DeviceError).NoError,
+          onClickIcon: handleClickIcon,
+          onClickMore: handleMore
+        }, {
+          default: withCtx(() => [
+            !unref(currentRoom) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              unref(isCameraTesting) ? (openBlock(), createBlock(unref(IconCameraOn), {
+                key: 0,
+                size: "24"
+              })) : (openBlock(), createBlock(unref(IconCameraOff), {
+                key: 1,
+                size: "24"
+              }))
+            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              unref(cameraStatus) === unref(DeviceStatus).On ? (openBlock(), createBlock(unref(IconCameraOn), {
+                key: 0,
+                size: "24"
+              })) : (openBlock(), createBlock(unref(IconCameraOff), {
+                key: 1,
+                size: "24"
+              }))
+            ], 64))
+          ]),
+          _: 1
+        }, 8, ["title", "has-more", "disabled", "is-not-support"]),
+        withDirectives(createVNode(VideoSettingTab, { class: "video-tab" }, null, 512), [
+          [vShow, showVideoSettingTab.value]
+        ])
+      ])), [
+        [unref(vClickOutside), handleHideVideoSettingTab]
+      ]);
+    };
+  }
+});
+const VideoMediaControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-817b8c43"]]);
+export {
+  VideoMediaControl as default
+};

package/dist/components/VideoSetting/VideoMediaControl.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "click-icon": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onClick-icon"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/VideoSetting/VideoPreview.js

@@ -0,0 +1,47 @@
+import { defineComponent, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, createBlock, unref, toDisplayString } from "vue";
+import { IconLoading } from "@tencentcloud/uikit-base-component-vue3";
+import { useI18n } from "../../locales/index.js";
+import TUIRoomEngine from "@tencentcloud/tuiroom-engine-js";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "video-preview-container" };
+const _hoisted_2 = { class: "attention-info" };
+const _hoisted_3 = {
+  key: 0,
+  class: "off-camera-info"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VideoPreview",
+  setup(__props) {
+    const { t } = useI18n();
+    const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
+    onMounted(async () => {
+      TUIRoomEngine.once("ready", () => {
+        startCameraDeviceTest({ view: "video-preview" });
+      });
+    });
+    onUnmounted(async () => {
+      await stopCameraDeviceTest();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _cache[0] || (_cache[0] = createElementVNode("div", {
+          id: "video-preview",
+          class: "video-preview"
+        }, null, -1)),
+        createElementVNode("div", _hoisted_2, [
+          !unref(isCameraTesting) && !unref(isCameraTestLoading) ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(t)("Off Camera")), 1)) : createCommentVNode("", true),
+          unref(isCameraTestLoading) ? (openBlock(), createBlock(unref(IconLoading), {
+            key: 1,
+            size: "36",
+            class: "loading"
+          })) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+const VideoPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c8d74200"]]);
+export {
+  VideoPreview as default
+};

package/dist/components/VideoSetting/VideoPreview.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/VideoSetting/VideoProfile.js

@@ -0,0 +1,54 @@
+import { defineComponent, computed, watch, createBlock, openBlock, unref, isRef, withCtx, createElementBlock, Fragment, renderList } from "vue";
+import SelectPC from "../../baseComp/Select/SelectPC.js";
+import OptionPC from "../../baseComp/Option/OptionPC.js";
+import { useI18n } from "../../locales/index.js";
+import { TUIVideoQuality } from "@tencentcloud/tuiroom-engine-js";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VideoProfile",
+  setup(__props) {
+    const { t } = useI18n();
+    const videoQualityList = computed(() => [
+      { label: t("Low Definition"), value: TUIVideoQuality.kVideoQuality_360p },
+      {
+        label: t("Standard Definition"),
+        value: TUIVideoQuality.kVideoQuality_540p
+      },
+      { label: t("High Definition"), value: TUIVideoQuality.kVideoQuality_720p },
+      {
+        label: t("Super Definition"),
+        value: TUIVideoQuality.kVideoQuality_1080p
+      }
+    ]);
+    const { localVideoQuality, updateVideoQuality } = useDeviceState();
+    watch(localVideoQuality, (val) => {
+      updateVideoQuality({ quality: val });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(SelectPC), {
+        modelValue: unref(localVideoQuality),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localVideoQuality) ? localVideoQuality.value = $event : null),
+        placeholder: "placeholder",
+        class: "select",
+        teleported: false,
+        "popper-append-to-body": false
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(videoQualityList.value, (item, index) => {
+            return openBlock(), createBlock(unref(OptionPC), {
+              key: index,
+              label: item.label,
+              value: item.value
+            }, null, 8, ["label", "value"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+const VideoProfile = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-eee0ba5d"]]);
+export {
+  VideoProfile as default
+};

package/dist/components/VideoSetting/VideoProfile.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/VideoSetting/VideoRequestDialog.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../../VideoRequestDialog.vue_vue_type_script_setup_true_lang-CnE-LwNh.js";
+export {
+  _sfc_main as default
+};

package/dist/components/VideoSetting/VideoRequestDialog.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/VideoSetting/VideoSettingTab.js

@@ -0,0 +1,71 @@
+import { defineComponent, inject, watch, createElementBlock, openBlock, createCommentVNode, unref, createElementVNode, createVNode, toDisplayString, isRef } from "vue";
+import CameraSelect from "./CameraSelect.js";
+import VideoProfile from "./VideoProfile.js";
+import VideoPreview from "./VideoPreview.js";
+import TuiSwitch from "../../baseComp/TuiSwitch.js";
+import { useI18n } from "../../locales/index.js";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "video-tab" };
+const _hoisted_2 = {
+  key: 0,
+  class: "item-setting"
+};
+const _hoisted_3 = { class: "title" };
+const _hoisted_4 = {
+  key: 1,
+  class: "item-setting"
+};
+const _hoisted_5 = { class: "title" };
+const _hoisted_6 = {
+  key: 2,
+  class: "item-setting"
+};
+const _hoisted_7 = { class: "title" };
+const _hoisted_8 = {
+  key: 3,
+  class: "mirror-container"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VideoSettingTab",
+  setup(__props) {
+    const { t } = useI18n();
+    const { isLocalMirror, switchMirror } = useDeviceState();
+    const videoSettingProps = inject("videoSettingProps");
+    watch(
+      isLocalMirror,
+      async (val) => {
+        switchMirror({ mirror: val });
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        ((_a = unref(videoSettingProps)) == null ? void 0 : _a.supportSwitchCamera) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createElementVNode("span", _hoisted_3, toDisplayString(unref(t)("Camera")), 1),
+          createVNode(CameraSelect)
+        ])) : createCommentVNode("", true),
+        ((_b = unref(videoSettingProps)) == null ? void 0 : _b.supportVideoPreview) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          createElementVNode("span", _hoisted_5, toDisplayString(unref(t)("Preview")), 1),
+          createVNode(VideoPreview, { class: "video-preview" })
+        ])) : createCommentVNode("", true),
+        ((_c = unref(videoSettingProps)) == null ? void 0 : _c.supportSwitchResolution) ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          createElementVNode("span", _hoisted_7, toDisplayString(unref(t)("Resolution")), 1),
+          createVNode(VideoProfile)
+        ])) : createCommentVNode("", true),
+        ((_d = unref(videoSettingProps)) == null ? void 0 : _d.supportSwitchMirror) ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          createElementVNode("span", null, toDisplayString(unref(t)("Mirror")), 1),
+          createVNode(TuiSwitch, {
+            modelValue: unref(isLocalMirror),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(isLocalMirror) ? isLocalMirror.value = $event : null)
+          }, null, 8, ["modelValue"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const VideoSettingTab = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-95abbd8e"]]);
+export {
+  VideoSettingTab as default
+};

package/dist/components/VideoSetting/VideoSettingTab.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/VideoSetting/index.d.ts

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

package/dist/components/VideoSetting/index.js

@@ -0,0 +1,39 @@
+import { defineComponent, provide, reactive, createElementBlock, openBlock, createBlock, createCommentVNode } from "vue";
+import VideoMediaControl from "./VideoMediaControl.js";
+import { _ as _sfc_main$1 } from "../../VideoRequestDialog.vue_vue_type_script_setup_true_lang-CnE-LwNh.js";
+import VideoSettingTab from "./VideoSettingTab.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    displayMode: {},
+    supportSwitchCamera: { type: Boolean, default: true },
+    supportSwitchResolution: { type: Boolean, default: true },
+    supportVideoPreview: { type: Boolean, default: true },
+    supportSwitchMirror: { type: Boolean, default: true }
+  },
+  emits: ["click-icon"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    function handleVideoMediaClick() {
+      emits("click-icon");
+    }
+    const props = __props;
+    provide("videoSettingProps", reactive(props));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        _ctx.displayMode === "Icon" || _ctx.displayMode === "IconWithPanel" ? (openBlock(), createBlock(VideoMediaControl, {
+          key: 0,
+          onClickIcon: handleVideoMediaClick
+        })) : createCommentVNode("", true),
+        _ctx.displayMode === "Panel" ? (openBlock(), createBlock(VideoSettingTab, { key: 1 })) : createCommentVNode("", true),
+        _ctx.displayMode !== "Panel" ? (openBlock(), createBlock(_sfc_main$1, { key: 2 })) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const VideoSetting = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ea3e0b27"]]);
+export {
+  VideoSetting,
+  VideoSetting as default
+};

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

@@ -0,0 +1,40 @@
+import { VideoSettingProps } from '../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VideoSettingProps>, {
+    supportSwitchCamera: boolean;
+    supportSwitchResolution: boolean;
+    supportVideoPreview: boolean;
+    supportSwitchMirror: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "click-icon": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VideoSettingProps>, {
+    supportSwitchCamera: boolean;
+    supportSwitchResolution: boolean;
+    supportVideoPreview: boolean;
+    supportSwitchMirror: boolean;
+}>>> & Readonly<{
+    "onClick-icon"?: ((...args: any[]) => any) | undefined;
+}>, {
+    supportSwitchCamera: boolean;
+    supportVideoPreview: boolean;
+    supportSwitchResolution: boolean;
+    supportSwitchMirror: boolean;
+}, {}, {}, {}, 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/VideoSettingPanel/CameraSelect.js

@@ -0,0 +1,72 @@
+import { defineComponent, ref, watch, onBeforeMount, createBlock, openBlock, unref, withCtx, createElementBlock, Fragment, renderList } from "vue";
+import { TUISelect, TUIOption } from "@tencentcloud/uikit-base-component-vue3";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CameraSelect",
+  props: {
+    onChange: {},
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    var _a;
+    const { cameraList, currentCamera, setCurrentCamera, getCameraList } = useDeviceState();
+    const props = __props;
+    const currentDeviceId = ref((_a = currentCamera.value) == null ? void 0 : _a.deviceId);
+    watch(
+      () => {
+        var _a2;
+        return (_a2 = currentCamera.value) == null ? void 0 : _a2.deviceId;
+      },
+      (val) => {
+        if (currentDeviceId.value !== val) {
+          currentDeviceId.value = val;
+        }
+      },
+      { immediate: true }
+    );
+    async function handleChange(deviceId) {
+      var _a2, _b, _c;
+      props.onChange && props.onChange(deviceId);
+      try {
+        await setCurrentCamera({
+          deviceId
+        });
+      } catch (error) {
+        if (((_a2 = currentCamera.value) == null ? void 0 : _a2.deviceId) && cameraList.value.map((item) => item.deviceId).includes((_b = currentCamera.value) == null ? void 0 : _b.deviceId)) {
+          currentDeviceId.value = (_c = currentCamera.value) == null ? void 0 : _c.deviceId;
+        }
+      }
+    }
+    onBeforeMount(async () => {
+      await getCameraList();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TUISelect), {
+        modelValue: currentDeviceId.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentDeviceId.value = $event),
+        placeholder: "placeholder",
+        class: "select",
+        disabled: _ctx.disabled,
+        teleported: false,
+        "popper-append-to-body": false,
+        onChange: handleChange
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(cameraList), (item) => {
+            return openBlock(), createBlock(unref(TUIOption), {
+              key: item.deviceId,
+              label: item.deviceName,
+              value: item.deviceId
+            }, null, 8, ["label", "value"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue", "disabled"]);
+    };
+  }
+});
+const CameraSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-227f6582"]]);
+export {
+  CameraSelect as default
+};

package/dist/components/VideoSettingPanel/CameraSelect.vue.d.ts

@@ -0,0 +1,29 @@
+interface Props {
+    onChange?: (id: string) => void;
+    disabled?: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    disabled: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    disabled: boolean;
+}>>> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, 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/VideoSettingPanel/VideoPreview.js

@@ -0,0 +1,47 @@
+import { defineComponent, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, createBlock, unref, toDisplayString } from "vue";
+import { IconLoading } from "@tencentcloud/uikit-base-component-vue3";
+import { useI18n } from "../../locales/index.js";
+import TUIRoomEngine from "@tencentcloud/tuiroom-engine-js";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "video-preview-container" };
+const _hoisted_2 = { class: "attention-info" };
+const _hoisted_3 = {
+  key: 0,
+  class: "off-camera-info"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VideoPreview",
+  setup(__props) {
+    const { t } = useI18n();
+    const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
+    onMounted(async () => {
+      TUIRoomEngine.once("ready", () => {
+        startCameraDeviceTest({ view: "video-preview" });
+      });
+    });
+    onUnmounted(async () => {
+      await stopCameraDeviceTest();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _cache[0] || (_cache[0] = createElementVNode("div", {
+          id: "video-preview",
+          class: "video-preview"
+        }, null, -1)),
+        createElementVNode("div", _hoisted_2, [
+          !unref(isCameraTesting) && !unref(isCameraTestLoading) ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(t)("Off Camera")), 1)) : createCommentVNode("", true),
+          unref(isCameraTestLoading) ? (openBlock(), createBlock(unref(IconLoading), {
+            key: 1,
+            size: "36",
+            class: "loading"
+          })) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+const VideoPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-33b33ca9"]]);
+export {
+  VideoPreview as default
+};

package/dist/components/VideoSettingPanel/VideoPreview.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/VideoSettingPanel/VideoProfile.js

@@ -0,0 +1,53 @@
+import { defineComponent, computed, watch, createBlock, openBlock, unref, isRef, withCtx, createElementBlock, Fragment, renderList } from "vue";
+import { TUISelect, TUIOption } from "@tencentcloud/uikit-base-component-vue3";
+import { useI18n } from "../../locales/index.js";
+import { TUIVideoQuality } from "@tencentcloud/tuiroom-engine-js";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VideoProfile",
+  setup(__props) {
+    const { t } = useI18n();
+    const videoQualityList = computed(() => [
+      { label: t("Low Definition"), value: TUIVideoQuality.kVideoQuality_360p },
+      {
+        label: t("Standard Definition"),
+        value: TUIVideoQuality.kVideoQuality_540p
+      },
+      { label: t("High Definition"), value: TUIVideoQuality.kVideoQuality_720p },
+      {
+        label: t("Super Definition"),
+        value: TUIVideoQuality.kVideoQuality_1080p
+      }
+    ]);
+    const { localVideoQuality, updateVideoQuality } = useDeviceState();
+    watch(localVideoQuality, (val) => {
+      updateVideoQuality({ quality: val });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TUISelect), {
+        modelValue: unref(localVideoQuality),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localVideoQuality) ? localVideoQuality.value = $event : null),
+        placeholder: "placeholder",
+        class: "select",
+        teleported: false,
+        "popper-append-to-body": false
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(videoQualityList.value, (item, index) => {
+            return openBlock(), createBlock(unref(TUIOption), {
+              key: index,
+              label: item.label,
+              value: item.value
+            }, null, 8, ["label", "value"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+const VideoProfile = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a2b6951d"]]);
+export {
+  VideoProfile as default
+};

package/dist/components/VideoSettingPanel/VideoProfile.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/VideoSettingPanel/i18n/en-US/index.d.ts

@@ -0,0 +1,7 @@
+export declare const resource: {
+    Camera: string;
+    'Select device': string;
+    Preview: string;
+    'Video profile': string;
+    Resolution: string;
+};

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

@@ -0,0 +1,10 @@
+const resource = {
+  Camera: "Camera",
+  "Select device": "Select device",
+  Preview: "Preview",
+  "Video profile": "Video profile",
+  Resolution: "Resolution"
+};
+export {
+  resource
+};

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

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

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

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

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

@@ -0,0 +1,7 @@
+export declare const resource: {
+    Camera: string;
+    'Select device': string;
+    Preview: string;
+    'Video profile': string;
+    Resolution: string;
+};

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

@@ -0,0 +1,10 @@
+const resource = {
+  Camera: "摄像头",
+  "Select device": "选择设备",
+  Preview: "预览",
+  "Video profile": "视频设置",
+  Resolution: "分辨率"
+};
+export {
+  resource
+};