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

package/dist/states/VideoMixerState/VideoMixerState.js

@@ -1,17 +1,20 @@
-import { computed as v, ref as C, watch as F } from "vue";
-import L, { TRTCVideoResolutionMode as m, TRTCVideoResolution as u, TUIRoomDeviceMangerEvents as B, TRTCMediaMixingEvent as f, TUIResolutionMode as w, TUIMediaDeviceType as j, TUIMediaDeviceState as H, TRTCMediaSourceType as c, TRTCVideoRotation as E, TRTCVideoMirrorType as I, TRTCVideoFillMode as _ } from "@tencentcloud/tuiroom-engine-js";
-import { useRoomEngine as W } from "../../hooks/useRoomEngine.js";
-import { objectMerge as K } from "../../utils/utils.js";
-import { dataReport as Q } from "../../report/dataReport.js";
-import { MetricsKey as D } from "../../report/MetricsKey.js";
-import { useLiveListState as N } from "../LiveListState/LiveListState.js";
-import { LiveOrientation as R } from "../../types/live.js";
+import { ref as S, computed as y, watch as F } from "vue";
+import B, { TRTCVideoResolutionMode as _, TRTCVideoResolution as u, TRTCMediaSourceType as c, TUIRoomDeviceMangerEvents as H, TRTCMediaMixingEvent as v, TRTCVideoRotation as E, TRTCVideoMirrorType as b, TRTCVideoFillMode as V, TUIResolutionMode as D, TUIMediaDeviceType as W, TUIMediaDeviceState as j } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as K } from "../../hooks/useRoomEngine.js";
+import { dataReport as I } from "../../report/dataReport.js";
+import { MetricsKey as Q } from "../../report/MetricsKey.js";
+import { objectMerge as N } from "../../utils/utils.js";
 import { TUIVideoQuality as a, TUIVideoStreamType as X } from "../../types/types.js";
-const M = W(), { currentLive: h } = N(), S = v(() => {
-  var e, i;
-  return h.value && ((e = h.value) == null ? void 0 : e.layoutTemplate) >= 200 && ((i = h.value) == null ? void 0 : i.layoutTemplate) <= 599 ? R.Landscape : R.Portrait;
-});
-function $(e) {
+import { LiveOrientation as R } from "../../types/live.js";
+import { useLiveListState as $ } from "../LiveListState/LiveListState.js";
+let f, m, h;
+function z() {
+  f || (f = K(), m = $().currentLive, h = y(() => {
+    var i, o;
+    return m.value && ((i = m.value) == null ? void 0 : i.layoutTemplate) >= 200 && ((o = m.value) == null ? void 0 : o.layoutTemplate) <= 599 ? R.Landscape : R.Portrait;
+  }));
+}
+function Z(e) {
   return {
     [a.kVideoQuality_1080p]: {
       fps: 20,
@@ -31,7 +34,7 @@ function $(e) {
     }
   }[e];
 }
-function z(e) {
+function U(e) {
   return {
     [a.kVideoQuality_1080p]: {
       width: 1920,
@@ -51,7 +54,7 @@ function z(e) {
     }
   }[e];
 }
-function Z(e) {
+function q(e) {
   return {
     [u.TRTCVideoResolution_480_270]: { width: 480, height: 270 },
     [u.TRTCVideoResolution_640_360]: { width: 640, height: 360 },
@@ -60,14 +63,14 @@ function Z(e) {
     [u.TRTCVideoResolution_1920_1080]: { width: 1920, height: 1080 }
   }[e] || { width: 1280, height: 720 };
 }
-const y = C(a.kVideoQuality_720p), q = v(() => {
-  const { width: e, height: i } = z(y.value);
-  return S.value === R.Portrait ? i : e;
-}), G = v(() => {
-  const { width: e, height: i } = z(y.value);
-  return S.value === R.Portrait ? e : i;
+const M = S(a.kVideoQuality_720p), G = y(() => {
+  const { width: e, height: i } = U(M.value);
+  return h.value === R.Portrait ? i : e;
+}), J = y(() => {
+  const { width: e, height: i } = U(M.value);
+  return h.value === R.Portrait ? e : i;
 });
-function J(e) {
+function Y(e) {
   return {
     [a.kVideoQuality_1080p]: u.TRTCVideoResolution_1920_1080,
     [a.kVideoQuality_720p]: u.TRTCVideoResolution_1280_720,
@@ -75,7 +78,7 @@ function J(e) {
     [a.kVideoQuality_360p]: u.TRTCVideoResolution_640_360
   }[e];
 }
-function Y(e) {
+function ee(e) {
   return {
     [u.TRTCVideoResolution_1920_1080]: a.kVideoQuality_1080p,
     [u.TRTCVideoResolution_1280_720]: a.kVideoQuality_720p,
@@ -83,27 +86,27 @@ function Y(e) {
     [u.TRTCVideoResolution_640_360]: a.kVideoQuality_360p
   }[e];
 }
-function ee(e) {
+function ie(e) {
   return {
-    [m.TRTCVideoResolutionModePortrait]: w.kResolutionMode_Portrait,
-    [m.TRTCVideoResolutionModeLandscape]: w.kResolutionMode_Landscape
+    [_.TRTCVideoResolutionModePortrait]: D.kResolutionMode_Portrait,
+    [_.TRTCVideoResolutionModeLandscape]: D.kResolutionMode_Landscape
   }[e];
 }
-const T = v(() => {
-  const { fps: e, bitrate: i } = $(y.value);
+const T = y(() => {
+  const { fps: e, bitrate: i } = Z(M.value);
   return {
     videoEncoderParams: {
-      videoResolution: J(y.value),
-      resMode: S.value === R.Portrait ? m.TRTCVideoResolutionModePortrait : m.TRTCVideoResolutionModeLandscape,
+      videoResolution: Y(M.value),
+      resMode: h.value === R.Portrait ? _.TRTCVideoResolutionModePortrait : _.TRTCVideoResolutionModeLandscape,
       videoFps: e,
       videoBitrate: i
     }
   };
-}), g = C(!1), d = C([]), V = v(() => d.value.find((e) => e.isSelected) || null);
+}), g = S(!1), d = S([]), C = y(() => d.value.find((e) => e.isSelected) || null);
 let s;
 function k(e) {
-  if (V.value) {
-    const i = d.value.find((o) => o.id === V.value.id) || null;
+  if (C.value) {
+    const i = d.value.find((o) => o.id === C.value.id) || null;
     i && (i.isSelected = !1);
   }
   if (e) {
@@ -111,44 +114,37 @@ function k(e) {
     i && (i.isSelected = !0);
   }
 }
-async function O() {
+async function P() {
   var e;
-  T.value && await ((e = M.instance) == null ? void 0 : e.updateVideoQualityEx({
+  T.value && await ((e = f.instance) == null ? void 0 : e.updateVideoQualityEx({
     streamType: X.kCameraStream,
     encoderParams: {
-      videoResolution: Y(T.value.videoEncoderParams.videoResolution),
+      videoResolution: ee(T.value.videoEncoderParams.videoResolution),
       fps: T.value.videoEncoderParams.videoFps,
       bitrate: T.value.videoEncoderParams.videoBitrate,
-      resolutionMode: ee(T.value.videoEncoderParams.resMode)
+      resolutionMode: ie(T.value.videoEncoderParams.resMode)
     }
   }));
 }
-F(
-  () => T.value,
-  async () => {
-    await s && s.updatePublishParams(T.value), await O();
-  },
-  { immediate: !0, deep: !0 }
-);
 let p = 1;
-function P(e) {
+function L(e) {
   var i, o;
   if (e.type === c.kCamera || e.type === c.kScreen) {
     let t, r;
-    e.type === c.kCamera ? (t = ((i = e.camera) == null ? void 0 : i.resolution) || u.TRTCVideoResolution_1280_720, r = _.TRTCVideoFillMode_Fill) : e.type === c.kScreen && (t = ((o = e.screen) == null ? void 0 : o.resolution) || u.TRTCVideoResolution_1920_1080, r = _.TRTCVideoFillMode_Fit);
-    const { width: n, height: l } = Z(t), b = Math.min(q.value / n, G.value / l), A = {
+    e.type === c.kCamera ? (t = ((i = e.camera) == null ? void 0 : i.resolution) || u.TRTCVideoResolution_1280_720, r = V.TRTCVideoFillMode_Fill) : e.type === c.kScreen && (t = ((o = e.screen) == null ? void 0 : o.resolution) || u.TRTCVideoResolution_1920_1080, r = V.TRTCVideoFillMode_Fit);
+    const { width: n, height: l } = q(t), w = Math.min(G.value / n, J.value / l), O = {
       rect: {
         left: 0,
         top: 0,
-        right: n * b,
-        bottom: l * b
+        right: n * w,
+        bottom: l * w
       },
       zOrder: p,
       fillMode: r,
-      mirror: I.TRTCVideoMirrorType_Disable,
+      mirror: b.TRTCVideoMirrorType_Disable,
       rotation: E.TRTCVideoRotation_0
     };
-    return p += 1, A;
+    return p += 1, O;
   }
   if (e.type === c.kText) {
     const t = {
@@ -171,19 +167,19 @@ function P(e) {
         bottom: 300
       },
       zOrder: p,
-      fillMode: _.TRTCVideoFillMode_Fit,
-      mirror: I.TRTCVideoMirrorType_Disable,
+      fillMode: V.TRTCVideoFillMode_Fit,
+      mirror: b.TRTCVideoMirrorType_Disable,
       rotation: E.TRTCVideoRotation_0
     };
     return p += 1, t;
   }
   return null;
 }
-async function ie(e) {
+async function te(e) {
   var i, o, t, r;
   if (e.type === c.kCamera) {
-    const n = D.T_METRICS_STATE_API_VIDEO_MIXER_ADD_MEDIA_CAMERA_COUNT;
-    Q.reportCount(n);
+    const n = Q.T_METRICS_STATE_API_VIDEO_MIXER_ADD_MEDIA_CAMERA_COUNT;
+    I.reportCount(n);
     try {
       (await navigator.mediaDevices.getUserMedia({ audio: !1, video: !0 })).getVideoTracks()[0].stop();
     } catch (l) {
@@ -191,79 +187,84 @@ async function ie(e) {
     }
   }
   if (e.type === c.kScreen) {
-    const n = D.T_METRICS_STATE_API_VIDEO_MIXER_ADD_MEDIA_SCREEN_COUNT;
-    Q.reportCount(n);
+    const n = Q.T_METRICS_STATE_API_VIDEO_MIXER_ADD_MEDIA_SCREEN_COUNT;
+    I.reportCount(n);
   }
-  e.layout ? e.layout = Object.assign({}, P(e), e.layout) : e.layout = P(e), e.type === c.kText && (e.text = {
+  e.layout ? e.layout = { ...L(e), ...e.layout } : e.layout = L(e), e.type === c.kText && (e.text = {
     content: ((i = e.text) == null ? void 0 : i.content) || "",
     color: (o = e.text) == null ? void 0 : o.fontColor,
     font: `${(t = e.text) == null ? void 0 : t.fontSize}px ${(r = e.text) == null ? void 0 : r.fontFamily}`
   }), await s.addMediaSource(e), d.value.push(e), k(e);
 }
-async function te(e, i) {
-  const o = K(e, i);
+async function oe(e, i) {
+  const o = N(e, i);
   await s.updateMediaSource(o), e.isSelected && k(o);
   const t = d.value.findIndex((r) => r.id === e.id);
   t !== -1 && (d.value[t] = o);
 }
-async function oe(e) {
+async function ae(e) {
   await s.removeMediaSource(e), d.value = d.value.filter((i) => i.id !== e.id);
 }
-function ae() {
-  g.value = !0, U();
-}
 function ne() {
+  z(), g.value = !0, A();
+}
+function de() {
   d.value.forEach(async (e) => {
     await s.removeMediaSource(e);
   }), d.value = [];
 }
-async function de(e) {
+async function re(e) {
   const { deviceId: i, type: o, state: t } = e;
-  o === j.kMediaDeviceTypeVideoCamera && t === H.kMediaDeviceStateAdd && d.value.filter((n) => {
+  o === W.kMediaDeviceTypeVideoCamera && t === j.kMediaDeviceStateAdd && d.value.filter((n) => {
     var l;
     return ((l = n.camera) == null ? void 0 : l.cameraId) === i;
   }).forEach(async (n) => {
     await s.updateMediaSource(n);
   });
 }
-async function U() {
+async function A() {
   var i, o;
-  if (!M.instance) return;
-  ((i = M.instance) == null ? void 0 : i.getMediaDeviceManager()).on(B.onDeviceChanged, de), s = (o = M.instance) == null ? void 0 : o.getTRTCCloud().getMediaMixingManager(), s.updatePublishParams(T.value), s.on(f.onSourceSelected, (t) => {
+  if (!f.instance)
+    return;
+  ((i = f.instance) == null ? void 0 : i.getMediaDeviceManager()).on(H.onDeviceChanged, re), s = (o = f.instance) == null ? void 0 : o.getTRTCCloud().getMediaMixingManager(), s.updatePublishParams(T.value), s.on(v.onSourceSelected, (t) => {
     k(t);
-  }), s.on(f.onSourceDisconnected, (t) => {
+  }), s.on(v.onSourceDisconnected, (t) => {
     t && t.id && (d.value = d.value.filter((r) => r.id !== t.id));
-  }), s.on(f.onSourceMoved, (t, r) => {
+  }), s.on(v.onSourceMoved, (t, r) => {
     const n = d.value.find((l) => l.id === t.id && l.type === t.type) || null;
     n && (n.layout.rect = r);
-  }), s.on(f.onSourceResized, (t, r) => {
+  }), s.on(v.onSourceResized, (t, r) => {
     const n = d.value.find((l) => l.id === t.id && l.type === t.type) || null;
     n && (n.layout.rect = r);
-  }), s.on(f.onRightButtonClicked, (t) => {
+  }), s.on(v.onRightButtonClicked, (t) => {
   });
 }
-L.once("ready", async () => {
-  g.value && await U();
-});
 let x = !1;
-function re() {
-  x || (L.once("ready", async () => {
-    await O();
+function ue() {
+  x || (z(), F(
+    () => T.value,
+    async () => {
+      await s && s.updatePublishParams(T.value), await P();
+    },
+    { immediate: !0, deep: !0 }
+  ), B.once("ready", async () => {
+    await P(), g.value && await A();
   }), x = !0);
 }
-function ve() {
-  return re(), {
+function ye() {
+  return ue(), {
     isVideoMixerEnabled: g,
-    publishVideoQuality: y,
+    publishVideoQuality: M,
     mediaSourceList: d,
-    activeMediaSource: V,
-    enableLocalVideoMixer: ae,
-    addMediaSource: ie,
-    updateMediaSource: te,
-    removeMediaSource: oe,
-    clearMediaSource: ne
+    activeMediaSource: C,
+    enableLocalVideoMixer: ne,
+    addMediaSource: te,
+    updateMediaSource: oe,
+    removeMediaSource: ae,
+    clearMediaSource: de
   };
 }
 export {
-  ve as useVideoMixerState
+  g as isVideoMixerEnabled,
+  ye as useVideoMixerState
 };

package/dist/states/VideoMixerState/index.d.ts

@@ -1 +1,2 @@
 export { useVideoMixerState } from './VideoMixerState';
+export { isVideoMixerEnabled } from './VideoMixerState';

package/dist/states/VideoMixerState/index.js

@@ -1,4 +1,5 @@
-import { useVideoMixerState as r } from "./VideoMixerState.js";
+import { isVideoMixerEnabled as o, useVideoMixerState as r } from "./VideoMixerState.js";
 export {
+  o as isVideoMixerEnabled,
   r as useVideoMixerState
 };

package/dist/states/VirtualBackgroundState/VirtualBackgroundState.d.ts

@@ -0,0 +1,52 @@
+import { VirtualBackgroundEvent, VirtualBackgroundConfig, VirtualBackgroundEventCallback } from '../../types/virtualBackground';
+
+/**
+ * 虚拟背景状态管理
+ * @memberof module:VirtualBackgroundState
+ * @returns {
+ *   virtualBackgroundConfig: 虚拟背景配置
+ *   isSupported: 检查是否支持虚拟背景
+ *   initVirtualBackground: 初始化虚拟背景
+ *   setVirtualBackground: 设置虚拟背景（测试模式）
+ *   saveVirtualBackground: 保存虚拟背景配置
+ *   subscribeEvent: 订阅虚拟背景事件
+ *   unsubscribeEvent: 取消订阅虚拟背景事件
+ * }
+ * @example
+ * const {
+ *   virtualBackgroundConfig,
+ *   isSupported,
+ *   initVirtualBackground,
+ *   setVirtualBackground,
+ *   saveVirtualBackground,
+ *   subscribeEvent,
+ *   unsubscribeEvent,
+ * } = useVirtualBackgroundState();
+ *
+ * // 检查是否支持虚拟背景
+ * if (isSupported()) {
+ *   // 初始化虚拟背景
+ *   await initVirtualBackground({ assetsPath: '/path/to/assets' });
+ *
+ *   // 设置虚拟背景
+ *   await setVirtualBackground({
+ *     enable: true,
+ *     type: 'image',
+ *     source: '/path/to/background.jpg'
+ *   });
+ *
+ *   // 保存虚拟背景配置
+ *   await saveVirtualBackground();
+ * }
+ */
+export declare function useVirtualBackgroundState(): {
+    virtualBackgroundConfig: import('vue').Ref<VirtualBackgroundConfig | undefined, VirtualBackgroundConfig | undefined>;
+    isSupported: () => any;
+    initVirtualBackground: (params?: {
+        assetsPath: string;
+    }) => Promise<void>;
+    setVirtualBackground: (params: VirtualBackgroundConfig) => Promise<void>;
+    saveVirtualBackground: () => Promise<void>;
+    subscribeEvent: (event: VirtualBackgroundEvent, callback: VirtualBackgroundEventCallback) => void;
+    unsubscribeEvent: (event: VirtualBackgroundEvent, callback: VirtualBackgroundEventCallback) => void;
+};

package/dist/states/VirtualBackgroundState/VirtualBackgroundState.js

@@ -0,0 +1,99 @@
+import { ref as c, watch as p } from "vue";
+import { TUILogin as v } from "@tencentcloud/tui-core";
+import { TRTCCloud as S } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as V } from "../../hooks/useRoomEngine.js";
+import { dataReport as B } from "../../report/dataReport.js";
+import { MetricsKey as I } from "../../report/MetricsKey.js";
+import { VirtualBackgroundEvent as m } from "../../types/virtualBackground.js";
+import { useRoomState as A } from "../RoomState/index.js";
+import { useDeviceState as E } from "../DeviceState/DeviceState.js";
+import { DeviceStatus as s } from "../../types/device.js";
+const l = V(), { currentRoom: w } = A(), { cameraStatus: k } = E(), u = c(!1), n = c(), i = c(), R = () => S.getPlugin("VirtualBackground").isSupported(), a = /* @__PURE__ */ new Map(), y = (t, r) => {
+  var o;
+  a.has(t) || a.set(t, []), (o = a.get(t)) == null || o.push(r);
+}, h = (t, r) => {
+  const o = a.get(t);
+  o && (o.splice(o.indexOf(r), 1), o.length === 0 && a.delete(t));
+}, C = (t) => {
+  const r = a.get(t);
+  r && r.forEach((o) => {
+    try {
+      o();
+    } catch (e) {
+      console.error(`Error in event callback for ${t}:`, e);
+    }
+  });
+}, D = async (t) => {
+  var o;
+  const r = (o = l.instance) == null ? void 0 : o.getTRTCCloud();
+  r != null && r.useVirtualBackground && (await r.useVirtualBackground(t == null ? void 0 : t.assetsPath), u.value = !0);
+}, d = async (t) => {
+  var f;
+  if (!u.value) {
+    console.warn("Virtual background not initialized, skip setVirtualBackground");
+    return;
+  }
+  const { SDKAppID: r, userID: o, userSig: e } = v.getContext();
+  await ((f = l.instance) == null ? void 0 : f.getTRTCCloud()).callExperimentalAPI(
+    JSON.stringify({ api: "enableTestVirtualBackground", params: {
+      userId: o,
+      userSig: e,
+      sdkAppId: r,
+      ...t,
+      onAbort: () => {
+        C(m.onAbort);
+      }
+    } })
+  ), n.value = t;
+}, g = async () => {
+  var e;
+  if (!u.value) {
+    console.warn("Virtual background not initialized, skip saveVirtualBackground");
+    return;
+  }
+  if (!n.value)
+    throw new Error("Virtual background config not set");
+  const { SDKAppID: t, userID: r, userSig: o } = v.getContext();
+  i.value = { ...n.value }, k.value === s.On && (await ((e = l.instance) == null ? void 0 : e.getTRTCCloud()).callExperimentalAPI(
+    JSON.stringify({ api: "enableVirtualBackground", params: {
+      userId: r,
+      userSig: o,
+      sdkAppId: t,
+      ...i.value,
+      onAbort: () => {
+        C(m.onAbort);
+      }
+    } })
+  ), n.value = void 0);
+}, O = async () => {
+  try {
+    await d({ enable: !1 }), await g();
+  } catch (t) {
+    console.error("Reset virtual background failed:", t);
+  } finally {
+    i.value = void 0, n.value = void 0;
+  }
+};
+p(() => {
+  var t;
+  return (t = w.value) == null ? void 0 : t.roomId;
+}, (t) => {
+  t || O();
+});
+p(k, async (t, r) => {
+  t === s.On && r === s.Off && u.value && (n.value || await d({ enable: !1 }), await g());
+});
+function G() {
+  return B.reportCount(I.T_METRICS_STATE_VIRTUAL_BACKGROUND_STATE_COUNT), {
+    virtualBackgroundConfig: i,
+    isSupported: R,
+    initVirtualBackground: D,
+    setVirtualBackground: d,
+    saveVirtualBackground: g,
+    subscribeEvent: y,
+    unsubscribeEvent: h
+  };
+}
+export {
+  G as useVirtualBackgroundState
+};

package/dist/states/VirtualBackgroundState/index.d.ts

@@ -0,0 +1 @@
+export * from './VirtualBackgroundState';

package/dist/states/VirtualBackgroundState/index.js

@@ -0,0 +1,4 @@
+import { useVirtualBackgroundState as a } from "./VirtualBackgroundState.js";
+export {
+  a as useVirtualBackgroundState
+};