tuikit-atomicx-vue3 3.3.4 → 3.4.2

package/dist/components/StreamMixer/LocalMixer/MixerControl.js

@@ -1,136 +1,104 @@
-import { defineComponent, computed, createElementBlock, openBlock, Fragment, renderList, withModifiers, normalizeStyle, normalizeClass, createElementVNode, createBlock, resolveDynamicComponent, toDisplayString } from "vue";
-import { TRTCVideoMirrorType, TRTCVideoRotation } from "@tencentcloud/tuiroom-engine-js";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
-import { useVideoMixerState } from "../../../states/VideoMixerState.js";
-import CameraMirror from "../icons/CameraMirror.js";
-import Delete from "../icons/Delete.js";
-import Down from "../icons/Down.js";
-import Rotation from "../icons/Rotation.js";
-import Up from "../icons/Up.js";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = ["onClick"];
-const _hoisted_2 = { class: "mixer-control-item-icon" };
-const _hoisted_3 = { class: "mixer-control-item-name" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { defineComponent as M, computed as d, createElementBlock as m, openBlock as c, Fragment as O, renderList as V, withModifiers as z, normalizeStyle as p, normalizeClass as w, createElementVNode as y, createBlock as k, resolveDynamicComponent as b, toDisplayString as h } from "vue";
+import { TRTCVideoMirrorType as v, TRTCVideoRotation as i } from "@tencentcloud/tuiroom-engine-js";
+import { useUIKit as D } from "@tencentcloud/uikit-base-component-vue3";
+import { useVideoMixerState as S } from "../../../states/VideoMixerState.js";
+import I from "../icons/CameraMirror.js";
+import g from "../icons/Delete.js";
+import A from "../icons/Down.js";
+import B from "../icons/Rotation.js";
+import E from "../icons/Up.js";
+import { _ as L } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const Z = ["onClick"], U = { class: "mixer-control-item-icon" }, j = { class: "mixer-control-item-name" }, F = /* @__PURE__ */ M({
   __name: "MixerControl",
-  setup(__props) {
-    const { activeMediaSource, mediaSourceList, updateMediaSource, removeMediaSource } = useVideoMixerState();
-    const { t } = useUIKit();
-    function handleMouseDown(event) {
-      event.stopPropagation();
+  setup(K) {
+    const { activeMediaSource: t, mediaSourceList: T, updateMediaSource: a, removeMediaSource: C } = S(), { t: n } = D();
+    function R(o) {
+      o.stopPropagation();
     }
-    const orderMediaSourceList = computed(() => [...mediaSourceList.value].sort((a, b) => a.layout.zOrder - b.layout.zOrder));
-    const isActiveMediaSourceTop = computed(() => {
-      var _a, _b;
-      return ((_a = activeMediaSource.value) == null ? void 0 : _a.id) === ((_b = orderMediaSourceList.value[0]) == null ? void 0 : _b.id);
-    });
-    const isActiveMediaSourceBottom = computed(() => {
-      var _a, _b;
-      return ((_a = activeMediaSource.value) == null ? void 0 : _a.id) === ((_b = orderMediaSourceList.value[orderMediaSourceList.value.length - 1]) == null ? void 0 : _b.id);
-    });
-    const controlList = computed(() => [
+    const l = d(() => [...T.value].sort((o, e) => o.layout.zOrder - e.layout.zOrder)), _ = d(() => {
+      var o, e;
+      return ((o = t.value) == null ? void 0 : o.id) === ((e = l.value[0]) == null ? void 0 : e.id);
+    }), f = d(() => {
+      var o, e;
+      return ((o = t.value) == null ? void 0 : o.id) === ((e = l.value[l.value.length - 1]) == null ? void 0 : e.id);
+    }), x = d(() => [
       {
         name: "mirror",
-        text: t("Mirror"),
-        icon: CameraMirror,
+        text: n("Mirror"),
+        icon: I,
         onClick: () => {
-          const currentMirror = activeMediaSource.value.layout.mirror;
-          updateMediaSource(activeMediaSource.value, {
+          const o = t.value.layout.mirror;
+          a(t.value, {
             layout: {
-              mirror: currentMirror === TRTCVideoMirrorType.TRTCVideoMirrorType_Enable ? TRTCVideoMirrorType.TRTCVideoMirrorType_Disable : TRTCVideoMirrorType.TRTCVideoMirrorType_Enable
+              mirror: o === v.TRTCVideoMirrorType_Enable ? v.TRTCVideoMirrorType_Disable : v.TRTCVideoMirrorType_Enable
             }
           });
         }
       },
       {
         name: "rotate",
-        text: t("Rotate"),
-        icon: Rotation,
+        text: n("Rotate"),
+        icon: B,
         onClick: () => {
-          const currentRotation = activeMediaSource.value.layout.rotation || TRTCVideoRotation.TRTCVideoRotation0;
-          const rotationObj = {
-            [TRTCVideoRotation.TRTCVideoRotation0]: TRTCVideoRotation.TRTCVideoRotation90,
-            [TRTCVideoRotation.TRTCVideoRotation90]: TRTCVideoRotation.TRTCVideoRotation180,
-            [TRTCVideoRotation.TRTCVideoRotation180]: TRTCVideoRotation.TRTCVideoRotation270,
-            [TRTCVideoRotation.TRTCVideoRotation270]: TRTCVideoRotation.TRTCVideoRotation0
-          };
-          const rotation = rotationObj[currentRotation];
-          updateMediaSource(activeMediaSource.value, { layout: { rotation } });
+          const o = t.value.layout.rotation || i.TRTCVideoRotation0, r = {
+            [i.TRTCVideoRotation0]: i.TRTCVideoRotation90,
+            [i.TRTCVideoRotation90]: i.TRTCVideoRotation180,
+            [i.TRTCVideoRotation180]: i.TRTCVideoRotation270,
+            [i.TRTCVideoRotation270]: i.TRTCVideoRotation0
+          }[o];
+          a(t.value, { layout: { rotation: r } });
         }
       },
       {
         name: "up",
-        text: t("Move Up"),
-        icon: Up,
-        disable: isActiveMediaSourceBottom.value,
+        text: n("Move Up"),
+        icon: E,
+        disable: f.value,
         onClick: async () => {
-          const currentIndex = orderMediaSourceList.value.findIndex((item) => item.id === activeMediaSource.value.id);
-          const nextMediaSource = orderMediaSourceList.value[currentIndex + 1];
-          const activeZOrder = activeMediaSource.value.layout.zOrder;
-          const nextZOrder = nextMediaSource == null ? void 0 : nextMediaSource.layout.zOrder;
-          if (nextMediaSource) {
-            await updateMediaSource(activeMediaSource.value, { layout: { zOrder: 999 } });
-            await updateMediaSource(nextMediaSource, { layout: { zOrder: activeZOrder } });
-            await updateMediaSource(activeMediaSource.value, { layout: { zOrder: nextZOrder } });
-          } else {
-            console.error(t("Already at top"));
-          }
+          const o = l.value.findIndex((u) => u.id === t.value.id), e = l.value[o + 1], r = t.value.layout.zOrder, s = e == null ? void 0 : e.layout.zOrder;
+          e ? (await a(t.value, { layout: { zOrder: 999 } }), await a(e, { layout: { zOrder: r } }), await a(t.value, { layout: { zOrder: s } })) : console.error(n("Already at top"));
         }
       },
       {
         name: "down",
-        text: t("Move Down"),
-        icon: Down,
-        disable: isActiveMediaSourceTop.value,
+        text: n("Move Down"),
+        icon: A,
+        disable: _.value,
         onClick: async () => {
-          const currentIndex = orderMediaSourceList.value.findIndex((item) => item.id === activeMediaSource.value.id);
-          const nextMediaSource = orderMediaSourceList.value[currentIndex - 1];
-          const activeZOrder = activeMediaSource.value.layout.zOrder;
-          const nextZOrder = nextMediaSource == null ? void 0 : nextMediaSource.layout.zOrder;
-          if (nextMediaSource) {
-            await updateMediaSource(activeMediaSource.value, { layout: { zOrder: 0 } });
-            await updateMediaSource(nextMediaSource, { layout: { zOrder: activeZOrder } });
-            await updateMediaSource(activeMediaSource.value, { layout: { zOrder: nextZOrder } });
-          } else {
-            console.error(t("Already at bottom"));
-          }
+          const o = l.value.findIndex((u) => u.id === t.value.id), e = l.value[o - 1], r = t.value.layout.zOrder, s = e == null ? void 0 : e.layout.zOrder;
+          e ? (await a(t.value, { layout: { zOrder: 0 } }), await a(e, { layout: { zOrder: r } }), await a(t.value, { layout: { zOrder: s } })) : console.error(n("Already at bottom"));
         }
       },
       {
         name: "delete",
-        text: t("Delete"),
-        icon: Delete,
+        text: n("Delete"),
+        icon: g,
         style: "color: red",
         onClick: () => {
-          removeMediaSource(activeMediaSource.value);
+          C(t.value);
         }
       }
     ]);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "mixer-control",
-        onMousedown: handleMouseDown
+    return (o, e) => (c(), m("div", {
+      class: "mixer-control",
+      onMousedown: R
+    }, [
+      (c(!0), m(O, null, V(x.value, (r) => (c(), m("div", {
+        key: r.name,
+        class: w(["mixer-control-item", { disable: r.disable }]),
+        style: p(r.style),
+        onClick: z(r.onClick, ["stop"])
       }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(controlList.value, (control) => {
-          return openBlock(), createElementBlock("div", {
-            key: control.name,
-            class: normalizeClass(["mixer-control-item", { "disable": control.disable }]),
-            style: normalizeStyle(control.style),
-            onClick: withModifiers(control.onClick, ["stop"])
-          }, [
-            createElementVNode("div", _hoisted_2, [
-              (openBlock(), createBlock(resolveDynamicComponent(control.icon), {
-                style: normalizeStyle([{ "width": "100%", "height": "100%" }, control.style])
-              }, null, 8, ["style"]))
-            ]),
-            createElementVNode("span", _hoisted_3, toDisplayString(control.text), 1)
-          ], 14, _hoisted_1);
-        }), 128))
-      ], 32);
-    };
+        y("div", U, [
+          (c(), k(b(r.icon), {
+            style: p([{ width: "100%", height: "100%" }, r.style])
+          }, null, 8, ["style"]))
+        ]),
+        y("span", j, h(r.text), 1)
+      ], 14, Z))), 128))
+    ], 32));
   }
-});
-const MixerControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6c6a65c2"]]);
+}), $ = /* @__PURE__ */ L(F, [["__scopeId", "data-v-6c6a65c2"]]);
 export {
-  MixerControl as default
+  $ as default
 };

package/dist/components/StreamMixer/LocalMixer/index.js

@@ -1,194 +1,126 @@
-import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, unref, normalizeStyle, toDisplayString } from "vue";
-import TUIRoomEngine, { TUIVideoQuality, TRTCVideoResolutionMode, TRTCVideoRotation } from "@tencentcloud/tuiroom-engine-js";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
-import { useRoomEngine } from "../../../hooks/useRoomEngine.js";
-import { useLiveState } from "../../../states/LiveState/index.js";
-import { useVideoMixerState } from "../../../states/VideoMixerState.js";
-import { debounce } from "../../../utils/utils.js";
-import MixerControl from "./MixerControl.js";
-import { LiveOrientation, LiveStatus } from "../../../types/live.js";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = {
+import { defineComponent as Y, ref as T, computed as Z, watch as _, nextTick as ee, onMounted as te, onBeforeUnmount as oe, createElementBlock as Q, openBlock as S, createElementVNode as W, createBlock as ie, createCommentVNode as A, unref as w, normalizeStyle as ne, toDisplayString as ae } from "vue";
+import le, { TUIVideoQuality as v, TRTCVideoResolutionMode as L, TRTCVideoRotation as V } from "@tencentcloud/tuiroom-engine-js";
+import { useUIKit as re } from "@tencentcloud/uikit-base-component-vue3";
+import { useRoomEngine as se } from "../../../hooks/useRoomEngine.js";
+import { useLiveState as D } from "../../../states/LiveState/index.js";
+import { useVideoMixerState as ce } from "../../../states/VideoMixerState.js";
+import { debounce as ue } from "../../../utils/utils.js";
+import de from "./MixerControl.js";
+import { LiveOrientation as b, LiveStatus as N } from "../../../types/live.js";
+import { _ as me } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const pe = {
   key: 1,
   class: "local-mixer-placeholder"
-};
-const _hoisted_2 = { class: "placeholder-text" };
-const CONTROL_MARGIN_WITH_MEDIA_SOURCE = 6;
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}, he = { class: "placeholder-text" }, d = 6, fe = /* @__PURE__ */ Y({
   __name: "index",
-  setup(__props) {
-    const { t } = useUIKit();
-    const { currentLive } = useLiveState();
-    const mixControlRef = ref(null);
-    const { publishVideoQuality, activeMediaSource, enableLocalVideoMixer, mediaSourceList } = useVideoMixerState();
-    enableLocalVideoMixer();
-    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;
-    });
-    const { localLiveStatus } = useLiveState();
-    const roomEngine = useRoomEngine();
-    const localMixerRef = ref();
-    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 }
+  setup(ve) {
+    const { t: U } = re(), { currentLive: g } = D(), k = T(null), { publishVideoQuality: I, activeMediaSource: c, enableLocalVideoMixer: z, mediaSourceList: $ } = ce();
+    z();
+    const B = Z(() => {
+      var t, e;
+      return g.value && ((t = g.value) == null ? void 0 : t.layoutTemplate) >= 200 && ((e = g.value) == null ? void 0 : e.layoutTemplate) <= 599 ? b.Landscape : b.Portrait;
+    }), { localLiveStatus: G } = D(), x = se(), u = T();
+    function X(t, e) {
+      const i = {
+        [v.kVideoQuality_360p]: { width: 640, height: 360 },
+        [v.kVideoQuality_540p]: { width: 960, height: 540 },
+        [v.kVideoQuality_720p]: { width: 1280, height: 720 },
+        [v.kVideoQuality_1080p]: { width: 1920, height: 1080 }
       };
-      let { width, height } = sizeMap[videoResolution];
-      if (resMode === TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait) {
-        [width, height] = [height, width];
-      }
-      return { width, height };
+      let { width: n, height: o } = i[t];
+      return e === L.TRTCVideoResolutionModePortrait && ([n, o] = [o, n]), { width: n, height: o };
     }
-    const mixControlStyle = ref({
+    const E = T({
       position: "absolute",
       transform: "translate(0px, 0px)"
     });
-    let mixControlWidth;
-    let mixControlHeight;
-    function getMixControlStyle() {
-      if (!localMixerRef.value || !activeMediaSource.value) {
+    let m, r;
+    function p() {
+      if (!u.value || !c.value)
         return;
-      }
-      const { width: canvasWidth, height: canvasHeight } = getCanvasSize(
-        publishVideoQuality.value,
-        currentLiveOrientation.value === LiveOrientation.Landscape ? TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape : TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait
-      );
-      const { width: viewportWidth, height: viewportHeight } = localMixerRef.value.getBoundingClientRect();
-      const scale = Math.max(viewportWidth / canvasWidth, viewportHeight / canvasHeight);
-      const previewWidth = canvasWidth * scale;
-      const previewHeight = canvasHeight * scale;
-      const { top, left, right, bottom } = activeMediaSource.value.layout.rect;
-      const mediaSourceWidth = right - left;
-      const mediaSourceHeight = bottom - top;
-      const rotation = activeMediaSource.value.layout.rotation || TRTCVideoRotation.TRTCVideoRotation0;
-      const mediaSourceTop = top * scale - (previewHeight - viewportHeight) / 2;
-      const mediaSourceLeft = left * scale - (previewWidth - viewportWidth) / 2;
-      let mediaSourceDisplayWidth;
-      let mediaSourceDisplayHeight;
-      if (rotation === TRTCVideoRotation.TRTCVideoRotation0 || rotation === TRTCVideoRotation.TRTCVideoRotation180) {
-        mediaSourceDisplayWidth = mediaSourceWidth * scale;
-        mediaSourceDisplayHeight = mediaSourceHeight * scale;
-      } else {
-        mediaSourceDisplayWidth = mediaSourceHeight * scale;
-        mediaSourceDisplayHeight = mediaSourceWidth * scale;
-      }
-      const controlPosition = calculateOptimalControlPosition(
-        mediaSourceLeft,
-        mediaSourceTop,
-        mediaSourceDisplayWidth,
-        mediaSourceDisplayHeight,
-        viewportWidth,
-        viewportHeight
+      const { width: t, height: e } = X(
+        I.value,
+        B.value === b.Landscape ? L.TRTCVideoResolutionModeLandscape : L.TRTCVideoResolutionModePortrait
+      ), { width: i, height: n } = u.value.getBoundingClientRect(), o = Math.max(i / t, n / e), s = t * o, h = e * o, { top: C, left: a, right: l, bottom: R } = c.value.layout.rect, f = l - a, O = R - C, H = c.value.layout.rotation || V.TRTCVideoRotation0, q = C * o - (h - n) / 2, F = a * o - (s - i) / 2;
+      let y, M;
+      H === V.TRTCVideoRotation0 || H === V.TRTCVideoRotation180 ? (y = f * o, M = O * o) : (y = O * o, M = f * o);
+      const J = K(
+        F,
+        q,
+        y,
+        M,
+        i,
+        n
       );
-      mixControlStyle.value = {
-        ...controlPosition,
+      E.value = {
+        ...J,
         position: "absolute"
       };
     }
-    function calculateOptimalControlPosition(mediaSourceLeft, mediaSourceTop, mediaSourceWidth, mediaSourceHeight, viewportWidth, viewportHeight) {
-      const mediaSourceBottom = mediaSourceTop + mediaSourceHeight;
-      const mediaSourceCenterX = mediaSourceLeft + mediaSourceWidth / 2;
-      let controlLeft = mediaSourceCenterX - mixControlWidth / 2;
-      let controlTop = mediaSourceTop - CONTROL_MARGIN_WITH_MEDIA_SOURCE - mixControlHeight;
-      if (controlLeft < 0) {
-        controlLeft = 0;
-      } else if (controlLeft + mixControlWidth > viewportWidth) {
-        controlLeft = viewportWidth - mixControlWidth;
-      }
-      const topSpaceAvailable = mediaSourceTop;
-      const bottomSpaceAvailable = viewportHeight - mediaSourceBottom;
-      if (controlTop >= 0 && topSpaceAvailable >= mixControlHeight + CONTROL_MARGIN_WITH_MEDIA_SOURCE) {
-        controlTop = Math.min(controlTop, viewportHeight - mixControlHeight);
-      } else if (bottomSpaceAvailable >= mixControlHeight + CONTROL_MARGIN_WITH_MEDIA_SOURCE) {
-        controlTop = Math.max(0, mediaSourceBottom + CONTROL_MARGIN_WITH_MEDIA_SOURCE);
-      } else {
-        controlTop = Math.max(0, mediaSourceTop - mixControlHeight - CONTROL_MARGIN_WITH_MEDIA_SOURCE);
-      }
-      return {
-        transform: `translate(${controlLeft}px, ${controlTop}px)`
+    function K(t, e, i, n, o, s) {
+      const h = e + n;
+      let a = t + i / 2 - m / 2, l = e - d - r;
+      a < 0 ? a = 0 : a + m > o && (a = o - m);
+      const R = e, f = s - h;
+      return l >= 0 && R >= r + d ? l = Math.min(l, s - r) : f >= r + d ? l = Math.max(0, h + d) : l = Math.max(0, e - r - d), {
+        transform: `translate(${a}px, ${l}px)`
       };
     }
-    const debouncedGetMixControlStyle = debounce(getMixControlStyle, 16);
-    watch(() => activeMediaSource.value, async (newVal, oldVal) => {
-      var _a;
-      if (!oldVal && newVal) {
-        await nextTick();
-        const mixControlElement = (_a = mixControlRef.value) == null ? void 0 : _a.$el;
-        const { width, height } = (mixControlElement == null ? void 0 : mixControlElement.getBoundingClientRect()) || { width: 0, height: 0 };
-        mixControlWidth = width;
-        mixControlHeight = height;
+    const j = ue(p, 16);
+    _(() => c.value, async (t, e) => {
+      var i;
+      if (!e && t) {
+        await ee();
+        const n = (i = k.value) == null ? void 0 : i.$el, { width: o, height: s } = (n == null ? void 0 : n.getBoundingClientRect()) || { width: 0, height: 0 };
+        m = o, r = s;
       }
-      getMixControlStyle();
-    }, { immediate: true, deep: true });
-    watch(
-      () => [publishVideoQuality.value, currentLiveOrientation.value],
-      ([newVideoQuality, newOrientation]) => {
-        if (!newVideoQuality || !newOrientation) {
-          return;
-        }
-        getMixControlStyle();
+      p();
+    }, { immediate: !0, deep: !0 }), _(
+      () => [I.value, B.value],
+      ([t, e]) => {
+        !t || !e || p();
       },
-      { immediate: true, deep: true }
+      { immediate: !0, deep: !0 }
     );
-    const re = new ResizeObserver(() => {
-      debouncedGetMixControlStyle();
+    const P = new ResizeObserver(() => {
+      j();
     });
-    onMounted(() => {
-      re.observe(localMixerRef.value);
-      TUIRoomEngine.once("ready", async () => {
-        var _a;
-        const mediaSourceManager = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud().getMediaMixingManager();
-        await mediaSourceManager.bindPreviewArea(document.getElementById("local-video-mixer"));
-        getMixControlStyle();
+    return te(() => {
+      P.observe(u.value), le.once("ready", async () => {
+        var e;
+        await ((e = x.instance) == null ? void 0 : e.getTRTCCloud().getMediaMixingManager()).bindPreviewArea(document.getElementById("local-video-mixer")), p();
+      }), _(G, async (t) => {
+        var i;
+        const e = (i = x.instance) == null ? void 0 : i.getTRTCCloud().getMediaMixingManager();
+        t === N.Live && await (e == null ? void 0 : e.startPublish()), t === N.IDLE && await (e == null ? void 0 : e.stopPublish());
       });
-      watch(localLiveStatus, async (newVal) => {
-        var _a;
-        const mediaSourceManager = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud().getMediaMixingManager();
-        if (newVal === LiveStatus.Live) {
-          await (mediaSourceManager == null ? void 0 : mediaSourceManager.startPublish());
-        }
-        if (newVal === LiveStatus.IDLE) {
-          await (mediaSourceManager == null ? void 0 : mediaSourceManager.stopPublish());
-        }
-      });
-    });
-    onBeforeUnmount(async () => {
-      var _a;
-      re.unobserve(localMixerRef.value);
-      const mediaSourceManager = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud().getMediaMixingManager();
-      await (mediaSourceManager == null ? void 0 : mediaSourceManager.destroy());
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "localMixerRef",
-        ref: localMixerRef,
-        class: "local-mixer-container"
-      }, [
-        _cache[0] || (_cache[0] = createElementVNode("div", {
-          id: "local-video-mixer",
-          class: "local-mixer-content"
-        }, null, -1)),
-        unref(activeMediaSource) ? (openBlock(), createBlock(MixerControl, {
-          key: 0,
-          ref_key: "mixControlRef",
-          ref: mixControlRef,
-          class: "mixer-control",
-          style: normalizeStyle(mixControlStyle.value)
-        }, null, 8, ["style"])) : createCommentVNode("", true),
-        unref(mediaSourceList).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("No video")), 1)
-        ])) : createCommentVNode("", true)
-      ], 512);
-    };
+    }), oe(async () => {
+      var e;
+      P.unobserve(u.value);
+      const t = (e = x.instance) == null ? void 0 : e.getTRTCCloud().getMediaMixingManager();
+      await (t == null ? void 0 : t.destroy());
+    }), (t, e) => (S(), Q("div", {
+      ref_key: "localMixerRef",
+      ref: u,
+      class: "local-mixer-container"
+    }, [
+      e[0] || (e[0] = W("div", {
+        id: "local-video-mixer",
+        class: "local-mixer-content"
+      }, null, -1)),
+      w(c) ? (S(), ie(de, {
+        key: 0,
+        ref_key: "mixControlRef",
+        ref: k,
+        class: "mixer-control",
+        style: ne(E.value)
+      }, null, 8, ["style"])) : A("", !0),
+      w($).length === 0 ? (S(), Q("div", pe, [
+        W("span", he, ae(w(U)("No video")), 1)
+      ])) : A("", !0)
+    ], 512));
   }
-});
-const LocalMixer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9e8c1226"]]);
+}), Le = /* @__PURE__ */ me(fe, [["__scopeId", "data-v-9e8c1226"]]);
 export {
-  LocalMixer as default
+  Le as default
 };

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

@@ -1,4 +1,4 @@
-const resource = {
+const o = {
   // MixerControl.vue
   Mirror: "Mirror",
   Rotate: "Rotate",
@@ -11,5 +11,5 @@ const resource = {
   "No video": "No video"
 };
 export {
-  resource
+  o as resource
 };

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

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

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

@@ -1,4 +1,4 @@
-const resource = {
+const o = {
   // MixerControl.vue
   Mirror: "镜像",
   Rotate: "旋转",
@@ -11,5 +11,5 @@ const resource = {
   "No video": "暂无画面"
 };
 export {
-  resource
+  o as resource
 };

package/dist/components/StreamMixer/icons/CameraMirror.js

@@ -1,36 +1,35 @@
-import { createElementBlock, openBlock, createElementVNode } from "vue";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _sfc_main = {};
-const _hoisted_1 = {
+import { createElementBlock as i, openBlock as e, createElementVNode as l } from "vue";
+import { _ as o } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const a = {}, c = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
   fill: "none"
 };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
+function f(r, t) {
+  return e(), i("svg", c, [...t[0] || (t[0] = [
+    l("path", {
       d: "M7.5 1H8.5V15H7.5V1Z",
       fill: "black",
       "fill-opacity": "0.9",
-      style: { "fill": "black", "fill-opacity": "0.9" }
+      style: { fill: "black", "fill-opacity": "0.9" }
     }, null, -1),
-    createElementVNode("path", {
+    l("path", {
       d: "M14.7193 12.4367C14.7501 12.6777 14.6031 12.906 14.3709 12.9777C14.2988 13 14.196 13 13.9904 13H10.6499C10.5104 13 10.4407 13 10.3831 12.9862C10.2003 12.9423 10.0576 12.7995 10.0137 12.6167C9.99986 12.5592 9.99986 12.4895 9.99986 12.35V5.0008C9.99986 4.47031 9.99986 4.20506 10.0408 4.11027C10.1766 3.79537 10.5819 3.70757 10.8359 3.93804C10.9123 4.00742 11.0221 4.24889 11.2416 4.73183L14.5821 12.081C14.6672 12.2682 14.7098 12.3618 14.7193 12.4367ZM10.9999 12H13.4469L10.9999 6.61661V12Z",
       fill: "black",
       "fill-opacity": "0.9",
-      style: { "fill": "black", "fill-opacity": "0.9" }
+      style: { fill: "black", "fill-opacity": "0.9" }
     }, null, -1),
-    createElementVNode("path", {
+    l("path", {
       d: "M1.62882 12.9777C1.70093 13 1.80374 13 2.00935 13H5.3499C5.48935 13 5.55908 13 5.61662 12.9862C5.79944 12.9423 5.94219 12.7995 5.98608 12.6167C5.9999 12.5592 5.9999 12.4895 5.9999 12.35V5.0008C5.9999 4.47031 5.9999 4.20506 5.95901 4.11027C5.82317 3.79537 5.41786 3.70757 5.16389 3.93804C5.08744 4.00742 4.97768 4.24889 4.75816 4.73183L1.41761 12.081C1.33253 12.2682 1.28999 12.3618 1.28043 12.4367C1.24964 12.6777 1.39664 12.906 1.62882 12.9777ZM4.9999 6.61661V12H2.5529L4.9999 6.61661Z",
       fill: "black",
       "fill-opacity": "0.9",
-      style: { "fill": "black", "fill-opacity": "0.9" }
+      style: { fill: "black", "fill-opacity": "0.9" }
     }, null, -1)
   ])]);
 }
-const CameraMirror = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const p = /* @__PURE__ */ o(a, [["render", f]]);
 export {
-  CameraMirror as default
+  p as default
 };