tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

package/dist/components/RoomParticipantList/useParticpantAction/useNameCardAction/index.js

@@ -0,0 +1,61 @@
+import { markRaw as u, h as C, render as h } from "vue";
+import { useUIKit as l, IconEditNameCard as f, TUIToast as c, TOAST_TYPE as s } from "@tencentcloud/uikit-base-component-vue3";
+import { useRoomParticipantState as p } from "../../../../states/RoomParticipantState/index.js";
+import { _ as g } from "../../../../changeNameCardDialog.vue_vue_type_script_setup_true_lang-a4FmKskP.js";
+function N(t) {
+  let e = 0;
+  for (let a = 0; a < t.length; a++) {
+    const n = t.charCodeAt(a);
+    n <= 127 ? e += 1 : n <= 2047 ? e += 2 : n <= 65535 ? e += 3 : e += 4;
+  }
+  return e;
+}
+const { t: i } = l(), { updateParticipantNameCard: y } = p();
+function R({ targetParticipant: t }) {
+  const e = (r) => {
+    const o = N(r) <= 32;
+    return o || c({
+      type: s.WARNING,
+      message: i("ParticipantList.NameMaxLength")
+    }), o;
+  };
+  async function a(r) {
+    if (!e(r))
+      return Promise.reject(new Error("The user name cannot exceed 32 characters"));
+    try {
+      await y({
+        userId: t.userId,
+        nameCard: r
+      }), c({
+        type: s.SUCCESS,
+        message: i("ParticipantList.NameChangeSuccess")
+        // duration: MESSAGE_DURATION.NORMAL,
+      });
+    } catch {
+      c({
+        type: s.ERROR,
+        message: i("ParticipantList.ChangeNameFailed"),
+        duration: 5e3
+      });
+    }
+    return Promise.resolve();
+  }
+  function n() {
+    var d;
+    const o = C(g, {
+      userInfo: t,
+      confirmFunction: a
+    }), m = document.createElement("div");
+    h(o, m), (d = document.getElementById("roomPage")) == null || d.appendChild(m);
+  }
+  return {
+    key: "changeUserNameCard",
+    icon: u(f),
+    label: i("ParticipantList.ChangeName"),
+    handler: n
+  };
+}
+export {
+  N as calculateByteLength,
+  R as useNameCardAction
+};

package/dist/components/RoomParticipantList/useParticpantAction/useTransferOwnerAction.d.ts

@@ -0,0 +1,11 @@
+import { Component } from 'vue';
+import { RoomParticipant } from '../../../types';
+
+export declare function useTransferOwnerAction({ targetParticipant }: {
+    targetParticipant: RoomParticipant;
+}): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+};

package/dist/components/RoomParticipantList/useParticpantAction/useTransferOwnerAction.js

@@ -0,0 +1,54 @@
+import { computed as u, reactive as l, markRaw as p } from "vue";
+import { useUIKit as T, IconTransferOwner as S, TUIMessageBox as O, TUIToast as o, TOAST_TYPE as i } from "@tencentcloud/uikit-base-component-vue3";
+import { useRoomParticipantState as w } from "../../../states/RoomParticipantState/index.js";
+import { useRoomState as d } from "../../../states/RoomState/index.js";
+import { useDeviceState as R } from "../../../states/DeviceState/DeviceState.js";
+import { RoomParticipantRole as v } from "../../../types/participant.js";
+import { DeviceStatus as P } from "../../../types/device.js";
+const { currentRoom: y } = d(), { t: e } = T(), { localParticipant: c, transferOwner: I } = w(), { stopScreenShare: L } = R();
+function E({ targetParticipant: r }) {
+  const n = u(() => r.nameCard || r.userName || r.userId);
+  function f() {
+    O.confirm({
+      title: e("ParticipantList.TransferHostTo", {
+        name: n.value
+      }),
+      content: e(
+        "ParticipantList.TransferHostWarning"
+      ),
+      confirmText: e("ParticipantList.ConfirmTransfer"),
+      cancelText: e("ParticipantList.Cancel"),
+      callback: async (t) => {
+        t === "confirm" && m();
+      }
+    });
+  }
+  async function m() {
+    var t, a, s;
+    if (((t = c.value) == null ? void 0 : t.role) === v.Owner)
+      try {
+        ((a = c.value) == null ? void 0 : a.screenShareStatus) === P.On && ((s = y.value) != null && s.isAllScreenShareDisabled) && L(), await I({
+          userId: r.userId
+        }), o({
+          type: i.SUCCESS,
+          message: e("ParticipantList.TransferHostSuccess", {
+            name: n.value
+          })
+        });
+      } catch {
+        o({
+          type: i.ERROR,
+          message: e("ParticipantList.TransferHostFailed")
+        });
+      }
+  }
+  return l({
+    key: "transferOwner",
+    icon: p(S),
+    label: e("ParticipantList.TransferHost"),
+    handler: f
+  });
+}
+export {
+  E as useTransferOwnerAction
+};

package/dist/components/RoomParticipantList/useParticpantAction/useVideoAction.d.ts

@@ -0,0 +1,19 @@
+import { Component } from 'vue';
+import { RoomParticipant } from '../../../types';
+
+export declare function useMuteVideoAction({ targetParticipant }: {
+    targetParticipant: RoomParticipant;
+}): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+};
+export declare function useUnmuteVideoAction({ targetParticipant }: {
+    targetParticipant: RoomParticipant;
+}): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+};

package/dist/components/RoomParticipantList/useParticpantAction/useVideoAction.js

@@ -0,0 +1,40 @@
+import { computed as c } from "vue";
+import { useUIKit as n, IconVideoOpen as a, TUIToast as m, TOAST_TYPE as u } from "@tencentcloud/uikit-base-component-vue3";
+import { useRoomParticipantState as s } from "../../../states/RoomParticipantState/index.js";
+import { DeviceType as r } from "../../../types/device.js";
+function v({ targetParticipant: e }) {
+  const { closeParticipantDevice: i } = s(), { t } = n();
+  return {
+    key: "muteVideo",
+    icon: a,
+    label: t("ParticipantList.DisableVideo"),
+    handler: async () => {
+      await i({
+        userId: e.userId,
+        deviceType: r.Camera
+      });
+    }
+  };
+}
+function y({ targetParticipant: e }) {
+  const { inviteToOpenDevice: i } = s(), t = c(() => e.nameCard || e.userName || e.userId), { t: o } = n();
+  return {
+    key: "unmuteVideo",
+    icon: a,
+    label: o("ParticipantList.EnableVideo"),
+    handler: async () => {
+      await i({
+        userId: e.userId,
+        device: r.Camera,
+        timeout: 30
+      }), m({
+        type: u.INFO,
+        message: `${o("ParticipantList.InviteCameraSent", { name: t.value })}`
+      });
+    }
+  };
+}
+export {
+  v as useMuteVideoAction,
+  y as useUnmuteVideoAction
+};

package/dist/components/RoomParticipantList/useRoomAction/index.d.ts

@@ -0,0 +1,8 @@
+export default function useRoomActions(): {
+    canOperate: import('vue').ComputedRef<boolean>;
+    roomActionList: import('vue').ComputedRef<{
+        key: string;
+        label: string;
+        handler: () => void;
+    }[]>;
+};

package/dist/components/RoomParticipantList/useRoomAction/index.js

@@ -0,0 +1,20 @@
+import { computed as e } from "vue";
+import { useRoomParticipantState as c } from "../../../states/RoomParticipantState/index.js";
+import a from "./useRoomAudioAction.js";
+import u from "./useRoomScreenAction.js";
+import p from "./useRoomVideoAction.js";
+import { RoomParticipantRole as i } from "../../../types/participant.js";
+const { localParticipant: m } = c();
+function v() {
+  const o = e(() => {
+    var t, r;
+    return ((t = m.value) == null ? void 0 : t.role) === i.Owner || ((r = m.value) == null ? void 0 : r.role) === i.Admin;
+  }), n = e(() => o.value ? [a(), p(), u()] : []);
+  return {
+    canOperate: o,
+    roomActionList: n
+  };
+}
+export {
+  v as default
+};

package/dist/components/RoomParticipantList/useRoomAction/useRoomAudioAction.d.ts

@@ -0,0 +1,5 @@
+export default function useRoomAudioAction(): {
+    key: string;
+    label: string;
+    handler: () => void;
+};

package/dist/components/RoomParticipantList/useRoomAction/useRoomAudioAction.js

@@ -0,0 +1,51 @@
+import { reactive as r, computed as p, defineComponent as u } from "vue";
+import { useUIKit as m, TUIMessageBox as A, TUIToast as d, TOAST_TYPE as f } from "@tencentcloud/uikit-base-component-vue3";
+import { useRoomParticipantState as T } from "../../../states/RoomParticipantState/index.js";
+import { useRoomState as b } from "../../../states/RoomState/index.js";
+import { DeviceType as P } from "../../../types/device.js";
+const { currentRoom: o } = b(), { disableAllDevices: M } = T();
+function U() {
+  const { t: i } = m();
+  let e = !1;
+  function l() {
+    var t, a, n;
+    e = !((t = o.value) != null && t.isAllMicrophoneDisabled), A.confirm({
+      title: (a = o.value) != null && a.isAllMicrophoneDisabled ? i("ParticipantList.UnmuteAll") : i("ParticipantList.MuteAllTip"),
+      content: (n = o.value) != null && n.isAllMicrophoneDisabled ? i("ParticipantList.UnmuteAllDesc") : i("ParticipantList.MicDisabledTip"),
+      confirmText: i("ParticipantList.Confirm"),
+      cancelText: i("ParticipantList.Cancel"),
+      callback: async (s) => {
+        s === "confirm" && c();
+      }
+    });
+  }
+  async function c() {
+    var t;
+    if (((t = o.value) == null ? void 0 : t.isAllMicrophoneDisabled) === e) {
+      const a = i(e ? "ParticipantList.AudioDisabled" : "ParticipantList.AudioEnabled");
+      d({
+        type: f.SUCCESS,
+        message: a
+      });
+      return;
+    }
+    await M({
+      deviceType: P.Microphone,
+      disable: e
+    });
+  }
+  return r({
+    key: "RoomAudioAction",
+    icon: u({}),
+    label: p(
+      () => {
+        var t;
+        return (t = o.value) != null && t.isAllMicrophoneDisabled ? i("ParticipantList.UnmuteAll") : i("ParticipantList.MuteAll");
+      }
+    ),
+    handler: l
+  });
+}
+export {
+  U as default
+};

package/dist/components/RoomParticipantList/useRoomAction/useRoomScreenAction.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'vue';
+
+export default function useRoomScreenAction(): {
+    key: string;
+    label: string;
+    icon: Component;
+    handler: () => void;
+};

package/dist/components/RoomParticipantList/useRoomAction/useRoomScreenAction.js

@@ -0,0 +1,60 @@
+import { reactive as m, computed as c } from "vue";
+import { useUIKit as p, IconAllMembersShareScreen as u, IconHostShareScreen as f, TUIMessageBox as h } from "@tencentcloud/uikit-base-component-vue3";
+import { useRoomParticipantState as d } from "../../../states/RoomParticipantState/index.js";
+import { useRoomState as A } from "../../../states/RoomState/index.js";
+import { RoomParticipantRole as v } from "../../../types/participant.js";
+import { DeviceType as l } from "../../../types/device.js";
+const { participantWithScreen: t, disableAllDevices: P, closeParticipantDevice: b } = d(), { currentRoom: i } = A();
+function x() {
+  const { t: r } = p();
+  let a = !1;
+  async function n() {
+    await P({
+      deviceType: l.ScreenShare,
+      disable: a
+    });
+  }
+  function s() {
+    var e;
+    if (a = !((e = i.value) != null && e.isAllScreenShareDisabled), !t.value || t.value.role === v.GeneralUser) {
+      n();
+      return;
+    }
+    h.confirm({
+      title: r(
+        "ParticipantList.ConfirmHostAdminOnlyShare"
+      ),
+      content: r(
+        "ParticipantList.TerminateOtherShare"
+      ),
+      confirmText: r("ParticipantList.Confirm"),
+      cancelText: r("ParticipantList.Cancel"),
+      callback: async (S) => {
+        var o;
+        S === "confirm" && (await b({
+          userId: (o = t.value) == null ? void 0 : o.userId,
+          deviceType: l.ScreenShare
+        }), n());
+      }
+    });
+  }
+  return m({
+    key: "AllScreenShareAction",
+    label: c(
+      () => {
+        var e;
+        return (e = i.value) != null && e.isAllScreenShareDisabled ? r("ParticipantList.AllCanShare") : r("ParticipantList.HostAdminOnlyShare");
+      }
+    ),
+    icon: c(
+      () => {
+        var e;
+        return (e = i.value) != null && e.isAllScreenShareDisabled ? u : f;
+      }
+    ),
+    handler: s
+  });
+}
+export {
+  x as default
+};

package/dist/components/RoomParticipantList/useRoomAction/useRoomVideoAction.d.ts

@@ -0,0 +1,5 @@
+export default function useRoomVideoAction(): {
+    key: string;
+    label: string;
+    handler: () => void;
+};

package/dist/components/RoomParticipantList/useRoomAction/useRoomVideoAction.js

@@ -0,0 +1,50 @@
+import { reactive as c, computed as m } from "vue";
+import { useUIKit as d, TUIMessageBox as p, TUIToast as A, TOAST_TYPE as b } from "@tencentcloud/uikit-base-component-vue3";
+import { useRoomParticipantState as u } from "../../../states/RoomParticipantState/index.js";
+import { useRoomState as f } from "../../../states/RoomState/index.js";
+import { DeviceType as V } from "../../../types/device.js";
+const { currentRoom: a } = f(), { disableAllDevices: T } = u();
+function y() {
+  const { t: i } = d();
+  let t = !1;
+  function s() {
+    var e, o, l;
+    t = !((e = a.value) != null && e.isAllCameraDisabled), p.confirm({
+      title: (o = a.value) != null && o.isAllCameraDisabled ? i("ParticipantList.EnableAllVideo") : i("ParticipantList.DisableAllVideoTip"),
+      content: (l = a.value) != null && l.isAllCameraDisabled ? i("ParticipantList.EnableAllVideoDesc") : i("ParticipantList.CameraDisabledTip"),
+      confirmText: i("ParticipantList.Confirm"),
+      cancelText: i("ParticipantList.Cancel"),
+      callback: async (r) => {
+        r === "confirm" && n();
+      }
+    });
+  }
+  async function n() {
+    var e;
+    if (((e = a.value) == null ? void 0 : e.isAllCameraDisabled) === t) {
+      const o = i(t ? "ParticipantList.VideoDisabled" : "ParticipantList.VideoEnabled");
+      A({
+        type: b.SUCCESS,
+        message: o
+      });
+      return;
+    }
+    await T({
+      deviceType: V.Camera,
+      disable: t
+    });
+  }
+  return c({
+    key: "AllVideoAction",
+    label: m(
+      () => {
+        var e;
+        return (e = a.value) != null && e.isAllCameraDisabled ? i("ParticipantList.EnableAllVideo") : i("ParticipantList.DisableAllVideo");
+      }
+    ),
+    handler: s
+  });
+}
+export {
+  y as default
+};

package/dist/components/RoomParticipantView/StreamPlay.js

@@ -0,0 +1,74 @@
+import { defineComponent as f, ref as I, computed as _, watch as d, nextTick as w, onMounted as T, onBeforeUnmount as v, createElementBlock as S, openBlock as g } from "vue";
+import { getNanoId as M } from "../../utils/utils.js";
+import { useStreamPlayManager as L } from "./StreamPlayManager/index.js";
+import { FillMode as b } from "../../types/participant.js";
+import { _ as z } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const F = ["id"], P = /* @__PURE__ */ f({
+  __name: "StreamPlay",
+  props: {
+    participant: {},
+    streamType: {},
+    fillMode: { default: b.Fill },
+    lazyLoad: { default: () => ({
+      enable: !0,
+      viewport: "body"
+    }) },
+    enableTouchScale: { type: Boolean, default: !1 },
+    onStreamLoading: { type: Function, default: () => {
+    } },
+    onStreamPlaying: { type: Function, default: () => {
+    } },
+    onStreamError: { type: Function, default: () => {
+    } }
+  },
+  setup(c) {
+    const { bindView: o, unbindView: n, setStreamConfig: m } = L(), e = c, a = I(), u = M(5), y = _(
+      () => `${e.participant.userId}_${e.streamType}_${u}`
+    );
+    return d(
+      () => [e.participant.userId, e.streamType],
+      async (i, s) => {
+        const [t, r] = s || [], [l, p] = i;
+        t && r && (t !== l || r !== p) && (await w(), await n({
+          userId: t,
+          streamType: r,
+          view: a.value
+        }), await o({
+          userId: l,
+          streamType: p,
+          view: a.value,
+          lazyLoad: e.lazyLoad
+        }));
+      }
+    ), d(() => e.fillMode, async () => {
+      m({
+        userId: e.participant.userId,
+        streamType: e.streamType,
+        renderParams: {
+          fillMode: e.fillMode
+        }
+      });
+    }), T(async () => {
+      a.value && await o({
+        userId: e.participant.userId,
+        streamType: e.streamType,
+        view: a.value,
+        lazyLoad: e.lazyLoad
+      });
+    }), v(async () => {
+      a.value && await n({
+        userId: e.participant.userId,
+        streamType: e.streamType,
+        view: a.value
+      });
+    }), (i, s) => (g(), S("div", {
+      id: y.value,
+      ref_key: "playRegionDomRef",
+      ref: a,
+      class: "stream-play-container"
+    }, null, 8, F));
+  }
+}), D = /* @__PURE__ */ z(P, [["__scopeId", "data-v-c3a418cd"]]);
+export {
+  D as default
+};

package/dist/components/RoomParticipantView/StreamPlay.vue.d.ts

@@ -0,0 +1,66 @@
+import { FillMode, RoomParticipant, VideoStreamType } from '../../types';
+
+interface Props {
+    participant: RoomParticipant;
+    streamType: VideoStreamType;
+    fillMode?: FillMode;
+    lazyLoad?: {
+        enable: boolean;
+        viewport?: string | HTMLDivElement;
+    };
+    enableTouchScale?: boolean;
+    onStreamLoading?: () => void;
+    onStreamPlaying?: () => void;
+    onStreamError?: (error: Error) => void;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    fillMode: FillMode;
+    enableTouchScale: boolean;
+    draggable: boolean;
+    lazyLoad: () => {
+        enable: boolean;
+        viewport: string;
+    };
+    onStreamLoading: () => void;
+    onStreamPlaying: () => void;
+    onStreamError: () => void;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    fillMode: FillMode;
+    enableTouchScale: boolean;
+    draggable: boolean;
+    lazyLoad: () => {
+        enable: boolean;
+        viewport: string;
+    };
+    onStreamLoading: () => void;
+    onStreamPlaying: () => void;
+    onStreamError: () => void;
+}>>> & Readonly<{}>, {
+    lazyLoad: {
+        enable: boolean;
+        viewport?: string | HTMLDivElement;
+    };
+    fillMode: FillMode;
+    enableTouchScale: boolean;
+    onStreamLoading: () => void;
+    onStreamPlaying: () => void;
+    onStreamError: (error: Error) => void;
+}, {}, {}, {}, 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/RoomParticipantView/StreamPlayManager/LazyLoadManager.d.ts

@@ -0,0 +1,56 @@
+import { VideoStreamType } from '../../../types';
+
+/**
+ * 懒加载管理器 - 负责懒加载和可见性监控
+ * 职责：
+ * 1. 监听 DOM 元素的可见性变化
+ * 2. 管理 IntersectionObserver 实例
+ * 3. 提供可见性状态查询接口
+ */
+export declare class LazyLoadManager {
+    private intersectionObserver;
+    private observerDomMap;
+    private observerRoot;
+    private onVisibilityChange;
+    constructor({ onVisibilityChange }: {
+        onVisibilityChange: (options: {
+            userId: string;
+            streamType: VideoStreamType;
+            isVisible: boolean;
+            target: HTMLElement;
+        }) => void;
+    });
+    initObserver({ root }: {
+        root: string | HTMLDivElement | null;
+    }): void;
+    observe(options: {
+        userId: string;
+        streamType: VideoStreamType;
+        viewElement: HTMLDivElement;
+    }): boolean;
+    /**
+     * 移除 DOM 元素监听
+     */
+    unobserve(viewElement: HTMLDivElement): void;
+    /**
+     * 检查 DOM 元素是否可见
+     */
+    isVisible(viewElement: HTMLDivElement): boolean;
+    /**
+     * 检查指定流是否有可见的视图
+     */
+    hasVisibleView(userId: string, streamType: VideoStreamType): boolean;
+    /**
+     * 交集观察器回调
+     */
+    private intersectionObserverCallback;
+    /**
+     * 清理所有资源
+     */
+    destroy(): void;
+    /**
+     * 获取监听的 DOM 数量
+     */
+    getObservedCount(): number;
+}
+export default LazyLoadManager;