tuikit-atomicx-vue3-electron 5.2.0 → 5.2.1

package/dist/states/VideoMixerState/VideoMixerState.js

@@ -1,91 +1,105 @@
-import { computed as M, ref as b, watch as H } from "vue";
-import W, { TRTCVideoResolutionMode as L, TRTCVideoResolution as d, TRTCMediaMixingEvent as f, TRTCMediaSourceType as s, TRTCCameraCaptureMode as V } from "@tencentcloud/tuiroom-engine-electron";
-import X from "../../hooks/useRoomEngine.js";
-import { objectMerge as q } from "../../utils/utils.js";
-import { dataReport as G } from "../../report/dataReport.js";
-import { AtomicMetrics as J } from "../../report/MetricsKey.js";
-import { LiveOrientation as g } from "../../types/live.js";
-import { TUIVideoQuality as u } from "../../types/types.js";
-import { useLiveListState as K } from "../LiveListState/LiveListState.js";
-const T = "[VideoMixerState]";
-let S;
-const { currentLive: R } = K(), k = M(() => {
+import { computed as g, ref as k, watch as X } from "vue";
+import q, { TRTCVideoResolutionMode as v, TRTCVideoResolution as u, TUIVideoStreamType as G, TRTCMediaMixingEvent as m, TUIResolutionMode as B, TRTCMediaSourceType as p, TRTCCameraCaptureMode as _ } from "@tencentcloud/tuiroom-engine-electron";
+import J from "../../hooks/useRoomEngine.js";
+import { objectMerge as K } from "../../utils/utils.js";
+import { dataReport as N } from "../../report/dataReport.js";
+import { AtomicMetrics as Y } from "../../report/MetricsKey.js";
+import { LiveOrientation as T } from "../../types/live.js";
+import { TUIVideoQuality as n } from "../../types/types.js";
+import { useLiveListState as ee } from "../LiveListState/LiveListState.js";
+const S = "[VideoMixerState]";
+let R;
+const { currentLive: y } = ee(), P = g(() => {
   var e, o;
-  return R.value && ((e = R.value) == null ? void 0 : e.layoutTemplate) >= 200 && ((o = R.value) == null ? void 0 : o.layoutTemplate) <= 599 ? g.Landscape : g.Portrait;
+  return y.value && ((e = y.value) == null ? void 0 : e.layoutTemplate) >= 200 && ((o = y.value) == null ? void 0 : o.layoutTemplate) <= 599 ? T.Landscape : T.Portrait;
 });
-function O() {
-  S || (S = X());
+function D() {
+  R || (R = J());
 }
-function N(e) {
+function oe(e) {
   return {
-    [u.kVideoQuality_1080p]: {
+    [n.kVideoQuality_1080p]: {
       fps: 30,
       bitrate: 3e3
     },
-    [u.kVideoQuality_720p]: {
+    [n.kVideoQuality_720p]: {
       fps: 30,
       bitrate: 1800
     },
-    [u.kVideoQuality_540p]: {
+    [n.kVideoQuality_540p]: {
       fps: 30,
       bitrate: 1200
     },
-    [u.kVideoQuality_360p]: {
+    [n.kVideoQuality_360p]: {
       fps: 30,
       bitrate: 800
     }
   }[e];
 }
-function D(e) {
+function j(e) {
   return {
-    [u.kVideoQuality_1080p]: {
+    [n.kVideoQuality_1080p]: {
       width: 1920,
       height: 1080
     },
-    [u.kVideoQuality_720p]: {
+    [n.kVideoQuality_720p]: {
       width: 1280,
       height: 720
     },
-    [u.kVideoQuality_540p]: {
+    [n.kVideoQuality_540p]: {
       width: 960,
       height: 540
     },
-    [u.kVideoQuality_360p]: {
+    [n.kVideoQuality_360p]: {
       width: 640,
       height: 360
     }
   }[e];
 }
-function v(e) {
+function V(e) {
   return {
-    [d.TRTCVideoResolution_480_270]: { width: 480, height: 270 },
-    [d.TRTCVideoResolution_640_360]: { width: 640, height: 360 },
-    [d.TRTCVideoResolution_960_540]: { width: 960, height: 540 },
-    [d.TRTCVideoResolution_1280_720]: { width: 1280, height: 720 },
-    [d.TRTCVideoResolution_1920_1080]: { width: 1920, height: 1080 }
+    [u.TRTCVideoResolution_480_270]: { width: 480, height: 270 },
+    [u.TRTCVideoResolution_640_360]: { width: 640, height: 360 },
+    [u.TRTCVideoResolution_960_540]: { width: 960, height: 540 },
+    [u.TRTCVideoResolution_1280_720]: { width: 1280, height: 720 },
+    [u.TRTCVideoResolution_1920_1080]: { width: 1920, height: 1080 }
   }[e] || { width: 1280, height: 720 };
 }
-const m = b(u.kVideoQuality_1080p), y = M(() => {
-  const { width: e, height: o } = D(m.value);
-  return k.value === g.Portrait ? o : e;
-}), w = M(() => {
-  const { width: e, height: o } = D(m.value);
-  return k.value === g.Portrait ? e : o;
+const M = k(n.kVideoQuality_1080p), C = g(() => {
+  const { width: e, height: o } = j(M.value);
+  return P.value === T.Portrait ? o : e;
+}), w = g(() => {
+  const { width: e, height: o } = j(M.value);
+  return P.value === T.Portrait ? e : o;
 });
-function Y(e) {
+function ie(e) {
+  return {
+    [n.kVideoQuality_1080p]: u.TRTCVideoResolution_1920_1080,
+    [n.kVideoQuality_720p]: u.TRTCVideoResolution_1280_720,
+    [n.kVideoQuality_540p]: u.TRTCVideoResolution_960_540,
+    [n.kVideoQuality_360p]: u.TRTCVideoResolution_640_360
+  }[e];
+}
+function te(e) {
+  return {
+    [u.TRTCVideoResolution_1920_1080]: n.kVideoQuality_1080p,
+    [u.TRTCVideoResolution_1280_720]: n.kVideoQuality_720p,
+    [u.TRTCVideoResolution_960_540]: n.kVideoQuality_540p,
+    [u.TRTCVideoResolution_640_360]: n.kVideoQuality_360p
+  }[e];
+}
+function ae(e) {
   return {
-    [u.kVideoQuality_1080p]: d.TRTCVideoResolution_1920_1080,
-    [u.kVideoQuality_720p]: d.TRTCVideoResolution_1280_720,
-    [u.kVideoQuality_540p]: d.TRTCVideoResolution_960_540,
-    [u.kVideoQuality_360p]: d.TRTCVideoResolution_640_360
+    [v.TRTCVideoResolutionModePortrait]: B.kResolutionMode_Portrait,
+    [v.TRTCVideoResolutionModeLandscape]: B.kResolutionMode_Landscape
   }[e];
 }
-const I = M(() => {
-  const { fps: e, bitrate: o } = N(m.value);
+const c = g(() => {
+  const { fps: e, bitrate: o } = oe(M.value);
   return {
     videoEncoderParams: {
-      videoResolution: Y(m.value),
-      resMode: k.value === g.Portrait ? L.TRTCVideoResolutionModePortrait : L.TRTCVideoResolutionModeLandscape,
+      videoResolution: ie(M.value),
+      resMode: P.value === T.Portrait ? v.TRTCVideoResolutionModePortrait : v.TRTCVideoResolutionModeLandscape,
       videoFps: e,
       videoBitrate: o,
       minVideoBitrate: o,
@@ -94,11 +108,11 @@ const I = M(() => {
     canvasColor: 0,
     selectedBorderColor: 16776960
   };
-}), x = b(!1), r = b([]), _ = M(() => r.value.find((e) => e.isSelected) || null);
+}), Q = k(!1), r = k([]), b = g(() => r.value.find((e) => e.isSelected) || null);
 let t;
-async function P(e, o = !1) {
-  if (_.value) {
-    const i = r.value.find((a) => a.sourceId === _.value.sourceId) || null;
+async function x(e, o = !1) {
+  if (b.value) {
+    const i = r.value.find((a) => a.sourceId === b.value.sourceId) || null;
     i && (i.isSelected = !1, o || await t.updateMediaSource(i));
   }
   if (e) {
@@ -106,159 +120,171 @@ async function P(e, o = !1) {
     i && (i.isSelected = !0, o || await t.updateMediaSource(i));
   }
 }
-let z = 1;
-function ee() {
-  return z += 1, z - 1;
+async function E() {
+  var e;
+  c.value && await ((e = R.instance) == null ? void 0 : e.updateVideoQualityEx({
+    streamType: G.kCameraStream,
+    encoderParams: {
+      videoResolution: te(c.value.videoEncoderParams.videoResolution),
+      fps: c.value.videoEncoderParams.videoFps,
+      bitrate: c.value.videoEncoderParams.videoBitrate,
+      resolutionMode: ae(c.value.videoEncoderParams.resMode)
+    }
+  }));
 }
-function C(e, o, i) {
-  const a = { ...e }, n = a.right - a.left, c = a.bottom - a.top;
-  if (n > o || c > i) {
-    const h = n * i > c * o ? o / n : i / c;
-    a.right = Math.round(n * h), a.bottom = Math.round(c * h);
+let U = 1;
+function re() {
+  return U += 1, U - 1;
+}
+function I(e, o, i) {
+  const a = { ...e }, d = a.right - a.left, s = a.bottom - a.top;
+  if (d > o || s > i) {
+    const h = d * i > s * o ? o / d : i / s;
+    a.right = Math.round(d * h), a.bottom = Math.round(s * h);
   }
   return a;
 }
-function ie(e) {
-  if (e.sourceType === s.kCamera && e.camera) {
-    const { width: o, height: i } = v(e.camera.resolution);
-    return C({
+function ne(e) {
+  if (e.sourceType === p.kCamera && e.camera) {
+    const { width: o, height: i } = V(e.camera.resolution);
+    return I({
       left: 0,
       top: 0,
       right: o,
       bottom: i
-    }, y.value, w.value);
-  } else if (e.sourceType === s.kScreen) {
+    }, C.value, w.value);
+  } else if (e.sourceType === p.kScreen) {
     if (e.width && e.height)
-      return C({
+      return I({
         left: 0,
         top: 0,
         right: e.width,
         bottom: e.height
-      }, y.value, w.value);
-  } else if (e.sourceType === s.kImage)
-    return C(e.rect, y.value, w.value);
+      }, C.value, w.value);
+  } else if (e.sourceType === p.kImage)
+    return I(e.rect, C.value, w.value);
   return { left: 0, top: 0, right: 640, bottom: 360 };
 }
-function oe(e) {
+function de(e) {
   return r.value.some((o) => o.sourceId === e.sourceId && o.sourceType === e.sourceType);
 }
-function U(e) {
-  if (oe(e))
+function A(e) {
+  if (de(e))
     throw new Error("Media source already existed");
 }
-async function te(e) {
+async function ue(e) {
   var o;
-  if (console.log("[VideoMixerState]addMediaSource:", e), t || await j(), !t)
+  if (console.log("[VideoMixerState]addMediaSource:", e), t || await F(), !t)
     throw new Error("Failed to initialize MediaSourceManager. Please ensure TUIRoomEngine is ready.");
-  if (G.reportAtomicMetrics(J.LIVE_VIDEO_MIXER_STORE), U(e), e.rect = ie(e), e.zOrder = ee(), r.value.push(e), await t.addMediaSource(e), e.sourceType === s.kCamera && ((o = e.camera) != null && o.resolution)) {
-    const i = v(e.camera.resolution);
+  if (N.reportAtomicMetrics(Y.LIVE_VIDEO_MIXER_STORE), A(e), e.rect = ne(e), e.zOrder = re(), r.value.push(e), await t.addMediaSource(e), e.sourceType === p.kCamera && ((o = e.camera) != null && o.resolution)) {
+    const i = V(e.camera.resolution);
     await t.setCameraCaptureParam(e.sourceId, {
-      mode: V.TRTCCameraCaptureManual,
+      mode: _.TRTCCameraCaptureManual,
       width: i.width,
       height: i.height,
       colorSpace: e.colorSpace,
       colorRange: e.colorRange
     });
   }
-  P(e);
+  x(e);
 }
-async function ae(e, o) {
-  var n, c, h;
+async function le(e, o) {
+  var d, s, h;
   if (!t)
     throw new Error("Failed to initialize MediaSourceManager. Please ensure TUIRoomEngine is ready.");
-  const i = q(e, o);
+  const i = K(e, o);
   if (e.sourceId !== i.sourceId) {
     if (console.log("[VideoMixerState] sourceId changed, replacing media source:", {
       oldSourceId: e.sourceId,
       newSourceId: i.sourceId
-    }), U(i), await t.removeMediaSource(e), await t.addMediaSource(i), i.sourceType === s.kCamera && ((n = i.camera) != null && n.resolution)) {
-      const l = v(i.camera.resolution);
+    }), A(i), await t.removeMediaSource(e), await t.addMediaSource(i), i.sourceType === p.kCamera && ((d = i.camera) != null && d.resolution)) {
+      const l = V(i.camera.resolution);
       await t.setCameraCaptureParam(i.sourceId, {
-        mode: V.TRTCCameraCaptureManual,
+        mode: _.TRTCCameraCaptureManual,
         width: l.width,
         height: l.height,
         colorSpace: i.colorSpace,
         colorRange: i.colorRange
       });
     }
-    const p = r.value.findIndex((l) => l.sourceId === e.sourceId);
-    p !== -1 && (r.value[p] = i);
+    const f = r.value.findIndex((l) => l.sourceId === e.sourceId);
+    f !== -1 && (r.value[f] = i);
   } else {
-    if (console.log("[VideoMixerState] sourceId unchanged, updating media source:", i), await t.updateMediaSource(i), i.sourceType === s.kCamera && ((c = i.camera) != null && c.resolution)) {
-      const l = (h = e.camera) == null ? void 0 : h.resolution, E = i.camera.resolution, $ = l !== E, F = i.colorSpace !== e.colorSpace, Z = i.colorRange !== e.colorRange;
-      if ($ || F || Z) {
-        const Q = v(E);
+    if (console.log("[VideoMixerState] sourceId unchanged, updating media source:", i), await t.updateMediaSource(i), i.sourceType === p.kCamera && ((s = i.camera) != null && s.resolution)) {
+      const l = (h = e.camera) == null ? void 0 : h.resolution, z = i.camera.resolution, Z = l !== z, H = i.colorSpace !== e.colorSpace, W = i.colorRange !== e.colorRange;
+      if (Z || H || W) {
+        const L = V(z);
         await t.setCameraCaptureParam(i.sourceId, {
-          mode: V.TRTCCameraCaptureManual,
-          width: Q.width,
-          height: Q.height,
+          mode: _.TRTCCameraCaptureManual,
+          width: L.width,
+          height: L.height,
           colorSpace: i.colorSpace,
           colorRange: i.colorRange
         });
       }
     }
-    const p = r.value.findIndex((l) => l.sourceId === e.sourceId);
-    p !== -1 && (r.value[p] = i);
+    const f = r.value.findIndex((l) => l.sourceId === e.sourceId);
+    f !== -1 && (r.value[f] = i);
   }
-  e.isSelected && P(i);
+  e.isSelected && x(i);
 }
-async function re(e) {
+async function ce(e) {
   t && await t.removeMediaSource(e), r.value = r.value.filter((o) => o.sourceId !== e.sourceId);
 }
-function ne() {
+function se() {
   r.value.forEach(async (e) => {
     await t.removeMediaSource(e);
   }), r.value = [];
 }
-function j() {
-  console.log(`${T}enableLocalVideoMixer`), O(), x.value = !0, A();
+function F() {
+  console.log(`${S}enableLocalVideoMixer`), D(), Q.value = !0, $();
 }
-async function A() {
+async function $() {
   var e;
-  console.log(`${T}initMediaSourceManager`), S.instance && (t = (e = S.instance) == null ? void 0 : e.getTRTCCloud().getMediaMixingManager(), await t.startPublish(), await t.updatePublishParams(I.value), t.on(f.onSourceSelected, (o) => {
-    P(o, !0);
-  }), t.on(f.onSourceDisconnected, (o) => {
+  console.log(`${S}initMediaSourceManager`), R.instance && (t = (e = R.instance) == null ? void 0 : e.getTRTCCloud().getMediaMixingManager(), await t.startPublish(), await t.updatePublishParams(c.value), await E(), t.on(m.onSourceSelected, (o) => {
+    x(o, !0);
+  }), t.on(m.onSourceDisconnected, (o) => {
     o && o.sourceId && (r.value = r.value.filter((i) => i.sourceId !== o.sourceId));
-  }), t.on(f.onSourceMoved, (o, i) => {
-    const a = r.value.find((n) => n.sourceId === o.sourceId && n.sourceType === o.sourceType) || null;
+  }), t.on(m.onSourceMoved, (o, i) => {
+    const a = r.value.find((d) => d.sourceId === o.sourceId && d.sourceType === o.sourceType) || null;
     a && (a.rect = i);
-  }), t.on(f.onSourceResized, (o, i) => {
-    const a = r.value.find((n) => n.sourceId === o.sourceId && n.sourceType === o.sourceType) || null;
+  }), t.on(m.onSourceResized, (o, i) => {
+    const a = r.value.find((d) => d.sourceId === o.sourceId && d.sourceType === o.sourceType) || null;
     a && (a.rect = i);
-  }), t.on(f.onRightButtonClicked, (o) => {
+  }), t.on(m.onRightButtonClicked, (o) => {
   }));
 }
-H(
-  () => I.value,
+X(
+  () => c.value,
   async () => {
-    t && (await t.startPublish(), await t.updatePublishParams(I.value));
+    t && (await t.startPublish(), await t.updatePublishParams(c.value), await E());
   },
   { immediate: !0, deep: !0 }
 );
-let B = !1;
-function ue() {
-  if (console.log(`${T}initVideoMixerState`), B) {
-    console.log(`${T}initVideoMixerState already inited`);
+let O = !1;
+function pe() {
+  if (console.log(`${S}initVideoMixerState`), O) {
+    console.log(`${S}initVideoMixerState already inited`);
     return;
   }
-  O(), W.once("ready", async () => {
-    x.value && await A();
-  }), B = !0;
+  D(), q.once("ready", async () => {
+    await E(), Q.value && await $();
+  }), O = !0;
 }
-function Me() {
-  return ue(), {
-    isVideoMixerEnabled: x,
-    publishVideoQuality: m,
+function Ve() {
+  return pe(), {
+    isVideoMixerEnabled: Q,
+    publishVideoQuality: M,
     mediaSourceList: r,
-    activeMediaSource: _,
-    enableLocalVideoMixer: j,
-    addMediaSource: te,
-    updateMediaSource: ae,
-    removeMediaSource: re,
-    clearMediaSource: ne
+    activeMediaSource: b,
+    enableLocalVideoMixer: F,
+    addMediaSource: ue,
+    updateMediaSource: le,
+    removeMediaSource: ce,
+    clearMediaSource: se
   };
 }
 export {
-  x as isVideoMixerEnabled,
-  Me as useVideoMixerState
+  Q as isVideoMixerEnabled,
+  Ve as useVideoMixerState
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3-electron",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",