tuikit-atomicx-vue3 3.3.3 → 3.4.1

package/dist/components/StreamView/common/StreamList/index.js

@@ -1,9 +1,9 @@
-import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, createBlock, unref, withCtx, renderSlot, mergeProps } from "vue";
-import StreamRegion from "../StreamRegion/StreamRegionPC.js";
-import { getContentSize } from "../../../../utils/domOperation.js";
-import { isUndefined } from "../../../../utils/utils.js";
-import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { defineComponent as E, ref as g, computed as i, watch as Q, nextTick as T, onMounted as U, onBeforeUnmount as D, createElementBlock as P, openBlock as R, normalizeClass as J, createElementVNode as F, normalizeStyle as _, Fragment as Y, renderList as j, createBlock as A, unref as G, withCtx as K, renderSlot as X, mergeProps as Z } from "vue";
+import ee from "../StreamRegion/StreamRegionPC.js";
+import { getContentSize as $ } from "../../../../utils/domOperation.js";
+import { isUndefined as h } from "../../../../utils/utils.js";
+import { _ as te } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const ae = /* @__PURE__ */ E({
   __name: "index",
   props: {
     streamInfoList: {},
@@ -19,191 +19,131 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     streamPlayMode: {}
   },
   emits: ["stream-view-dblclick"],
-  setup(__props, { emit: __emit }) {
-    const emits = __emit;
-    const props = __props;
-    const streamListContainerRef = ref();
-    const streamListRef = ref();
-    const streamListConfig = computed(() => {
-      const parsedConfig = JSON.parse(props.config);
+  setup(w, { emit: b }) {
+    const z = b, n = w, o = g(), H = g(), t = i(() => {
+      const e = JSON.parse(n.config);
       return {
-        maxRows: isUndefined(parsedConfig.maxRows) ? 3 : parsedConfig.maxRows,
-        maxColumns: isUndefined(parsedConfig.maxColumns) ? 3 : parsedConfig.maxColumns,
-        rowSpacing: isUndefined(parsedConfig.rowSpacing) ? 8 : parsedConfig.rowSpacing,
-        columnSpacing: isUndefined(parsedConfig.columnSpacing) ? 8 : parsedConfig.columnSpacing
+        maxRows: h(e.maxRows) ? 3 : e.maxRows,
+        maxColumns: h(e.maxColumns) ? 3 : e.maxColumns,
+        rowSpacing: h(e.rowSpacing) ? 8 : e.rowSpacing,
+        columnSpacing: h(e.columnSpacing) ? 8 : e.columnSpacing
       };
-    });
-    const isEqualPointsLayout = computed(
-      () => streamListConfig.value.maxColumns !== 0 && streamListConfig.value.maxRows !== 0
-    );
-    const isHorizontalInfinityLayout = computed(() => streamListConfig.value.maxColumns === 0);
-    const isVerticalInfinityLayout = computed(() => streamListConfig.value.maxRows === 0);
-    const validStreamInfoList = computed(() => {
-      var _a;
-      return (_a = props.streamInfoList) == null ? void 0 : _a.filter(
-        (item) => item && item.userInfo.userId && !isUndefined(item.streamType)
+    }), S = i(
+      () => t.value.maxColumns !== 0 && t.value.maxRows !== 0
+    ), L = i(() => t.value.maxColumns === 0), C = i(() => t.value.maxRows === 0), W = i(() => {
+      var e;
+      return (e = n.streamInfoList) == null ? void 0 : e.filter(
+        (a) => a && a.userInfo.userId && !h(a.streamType)
       );
     });
-    function handleLayout() {
-      if (isHorizontalInfinityLayout.value) {
-        handleHorizontalInfinityLayout();
+    function x() {
+      if (L.value) {
+        V();
         return;
       }
-      if (isVerticalInfinityLayout.value) {
-        handleVerticalInfinityLayout();
+      if (C.value) {
+        B();
         return;
       }
-      if (isEqualPointsLayout.value) {
-        handleEqualPointsLayout();
+      if (S.value) {
+        O();
         return;
       }
     }
-    const streamListStyle = ref({
+    const v = g({
       width: "0",
       height: "0"
-    });
-    const streamStyle = ref({
+    }), l = g({
       width: "0",
       height: "0"
-    });
-    const widthRatio = computed(() => {
-      var _a, _b;
-      if (!props.aspectRatio || ((_a = props.aspectRatio) == null ? void 0 : _a.indexOf(":")) < 0) {
-        return 0;
-      }
-      return Number((_b = props.aspectRatio) == null ? void 0 : _b.split(":")[0]);
-    });
-    const heightRatio = computed(() => {
-      if (!props.aspectRatio || props.aspectRatio.indexOf(":") < 0) {
-        return 0;
-      }
-      return Number(props.aspectRatio.split(":")[1]);
-    });
-    const column = computed(() => {
-      if (streamListConfig.value.maxColumns === Infinity) {
-        return streamListConfig.value.maxColumns;
-      }
-      return Math.min(
-        Math.ceil(Math.sqrt(props.streamInfoList.length)),
-        streamListConfig.value.maxColumns
-      );
-    });
-    const row = computed(() => {
-      if (streamListConfig.value.maxRows === Infinity) {
-        return streamListConfig.value.maxRows;
-      }
-      return Math.min(
-        Math.ceil(props.streamInfoList.length / column.value),
-        streamListConfig.value.maxRows
-      );
-    });
-    watch(
-      () => [column.value, row.value],
+    }), r = i(() => {
+      var e, a;
+      return !n.aspectRatio || ((e = n.aspectRatio) == null ? void 0 : e.indexOf(":")) < 0 ? 0 : Number((a = n.aspectRatio) == null ? void 0 : a.split(":")[0]);
+    }), u = i(() => !n.aspectRatio || n.aspectRatio.indexOf(":") < 0 ? 0 : Number(n.aspectRatio.split(":")[1])), c = i(() => t.value.maxColumns === 1 / 0 ? t.value.maxColumns : Math.min(
+      Math.ceil(Math.sqrt(n.streamInfoList.length)),
+      t.value.maxColumns
+    )), f = i(() => t.value.maxRows === 1 / 0 ? t.value.maxRows : Math.min(
+      Math.ceil(n.streamInfoList.length / c.value),
+      t.value.maxRows
+    ));
+    Q(
+      () => [c.value, f.value],
       async () => {
-        await nextTick();
-        handleLayout();
+        await T(), x();
       },
-      { immediate: true }
+      { immediate: !0 }
     );
-    async function handleEqualPointsLayout() {
-      if (!streamListContainerRef.value) {
+    async function O() {
+      if (!o.value)
         return;
+      const e = o.value.getBoundingClientRect(), a = Math.floor(e.width), s = Math.floor(e.height), m = (a - (c.value - 1) * t.value.columnSpacing) / c.value, d = (s - (f.value - 1) * t.value.rowSpacing) / f.value;
+      let p = m, y = d;
+      if (r.value && u.value) {
+        const I = m / r.value, k = d / u.value;
+        I > k && (p = Math.floor(d / u.value * r.value), y = Math.floor(d)), I <= k && (p = Math.floor(m), y = Math.floor(m / r.value * u.value));
       }
-      const containerRect = streamListContainerRef.value.getBoundingClientRect();
-      const containerWidth = Math.floor(containerRect.width);
-      const containerHeight = Math.floor(containerRect.height);
-      const contentWidth = (containerWidth - (column.value - 1) * streamListConfig.value.columnSpacing) / column.value;
-      const contentHeight = (containerHeight - (row.value - 1) * streamListConfig.value.rowSpacing) / row.value;
-      let width = contentWidth;
-      let height = contentHeight;
-      if (widthRatio.value && heightRatio.value) {
-        const scaleWidth = contentWidth / widthRatio.value;
-        const scaleHeight = contentHeight / heightRatio.value;
-        if (scaleWidth > scaleHeight) {
-          width = Math.floor(contentHeight / heightRatio.value * widthRatio.value);
-          height = Math.floor(contentHeight);
-        }
-        if (scaleWidth <= scaleHeight) {
-          width = Math.floor(contentWidth);
-          height = Math.floor(contentWidth / widthRatio.value * heightRatio.value);
-        }
-      }
-      streamStyle.value.width = `${width}px`;
-      streamStyle.value.height = `${height}px`;
-      streamListStyle.value.width = `${Math.ceil(column.value * width + (column.value - 1) * streamListConfig.value.columnSpacing)}px`;
-      streamListStyle.value.height = `${Math.ceil(row.value * height + (row.value - 1) * streamListConfig.value.rowSpacing)}px`;
+      l.value.width = `${p}px`, l.value.height = `${y}px`, v.value.width = `${Math.ceil(c.value * p + (c.value - 1) * t.value.columnSpacing)}px`, v.value.height = `${Math.ceil(f.value * y + (f.value - 1) * t.value.rowSpacing)}px`;
     }
-    function handleHorizontalInfinityLayout() {
-      streamListStyle.value = {};
-      const contentHeight = getContentSize(streamListContainerRef.value).height;
-      const contentWidth = contentHeight * widthRatio.value / heightRatio.value;
-      streamStyle.value.width = `${contentWidth}px`;
-      streamStyle.value.height = `${contentHeight}px`;
+    function V() {
+      v.value = {};
+      const e = $(o.value).height, a = e * r.value / u.value;
+      l.value.width = `${a}px`, l.value.height = `${e}px`;
     }
-    function handleVerticalInfinityLayout() {
-      streamListStyle.value = {};
-      const contentWidth = getContentSize(streamListContainerRef.value).width;
-      const contentHeight = contentWidth * heightRatio.value / widthRatio.value;
-      streamStyle.value.width = `${contentWidth}px`;
-      streamStyle.value.height = `${contentHeight}px`;
+    function B() {
+      v.value = {};
+      const e = $(o.value).width, a = e * u.value / r.value;
+      l.value.width = `${e}px`, l.value.height = `${a}px`;
     }
-    function handleStreamDblClick(streamInfo) {
-      emits("stream-view-dblclick", streamInfo);
+    function N(e) {
+      z("stream-view-dblclick", e);
     }
-    const resizeObserver = new ResizeObserver(() => {
-      handleLayout();
-    });
-    onMounted(() => {
-      handleLayout();
-      resizeObserver.observe(streamListContainerRef.value);
+    const M = new ResizeObserver(() => {
+      x();
     });
-    onBeforeUnmount(() => {
-      resizeObserver.unobserve(streamListContainerRef.value);
+    U(() => {
+      x(), M.observe(o.value);
+    }), D(() => {
+      M.unobserve(o.value);
     });
-    function handleWheel(event) {
-      streamListContainerRef.value.scrollLeft += event.deltaY;
+    function q(e) {
+      o.value.scrollLeft += e.deltaY;
     }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "streamListContainerRef",
-        ref: streamListContainerRef,
-        class: normalizeClass({
-          "horizontal-infinity-layout": isHorizontalInfinityLayout.value,
-          "vertical-infinity-layout": isVerticalInfinityLayout.value,
-          "equal-points-layout": isEqualPointsLayout.value
-        })
+    return (e, a) => (R(), P("div", {
+      ref_key: "streamListContainerRef",
+      ref: o,
+      class: J({
+        "horizontal-infinity-layout": L.value,
+        "vertical-infinity-layout": C.value,
+        "equal-points-layout": S.value
+      })
+    }, [
+      F("div", {
+        class: "stream-list",
+        ref_key: "streamListRef",
+        ref: H,
+        style: _(v.value),
+        onWheel: q
       }, [
-        createElementVNode("div", {
-          class: "stream-list",
-          ref_key: "streamListRef",
-          ref: streamListRef,
-          style: normalizeStyle(streamListStyle.value),
-          onWheel: handleWheel
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(validStreamInfoList.value, (streamInfo) => {
-            return openBlock(), createBlock(unref(StreamRegion), {
-              class: "stream-list-item",
-              key: `${streamInfo.userInfo.userId}_${streamInfo.streamType}`,
-              "user-info": streamInfo.userInfo,
-              "stream-type": streamInfo.streamType,
-              streamInfo,
-              style: normalizeStyle(streamStyle.value),
-              streamPlayMode: _ctx.streamPlayMode,
-              streamPlayQuality: _ctx.streamPlayQuality,
-              onStreamViewDblclick: handleStreamDblClick
-            }, {
-              streamViewUI: withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, slotProps), void 0, true)
-              ]),
-              _: 3
-            }, 8, ["user-info", "stream-type", "streamInfo", "style", "streamPlayMode", "streamPlayQuality"]);
-          }), 128))
-        ], 36)
-      ], 2);
-    };
+        (R(!0), P(Y, null, j(W.value, (s) => (R(), A(G(ee), {
+          class: "stream-list-item",
+          key: `${s.userInfo.userId}_${s.streamType}`,
+          "user-info": s.userInfo,
+          "stream-type": s.streamType,
+          streamInfo: s,
+          style: _(l.value),
+          streamPlayMode: w.streamPlayMode,
+          streamPlayQuality: w.streamPlayQuality,
+          onStreamViewDblclick: N
+        }, {
+          streamViewUI: K((m) => [
+            X(e.$slots, "streamViewUI", Z({ ref_for: !0 }, m), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["user-info", "stream-type", "streamInfo", "style", "streamPlayMode", "streamPlayQuality"]))), 128))
+      ], 36)
+    ], 2));
   }
-});
-const StreamList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9e6fa961"]]);
+}), re = /* @__PURE__ */ te(ae, [["__scopeId", "data-v-9e6fa961"]]);
 export {
-  StreamList as default
+  re as default
 };

package/dist/components/StreamView/common/StreamPlay/index.js

@@ -1,116 +1,76 @@
-import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, nextTick } from "vue";
-import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
-import { StreamPlayMode, StreamPlayQuality, MediaManager } from "../../manager/mediaManager.js";
-import { getNanoId } from "../../../../utils/utils.js";
-import { useUserState } from "../../../../states/UserState/index.js";
-import { DeviceStatus } from "../../../../types/device.js";
-import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = ["id"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { defineComponent as P, ref as w, computed as l, watch as p, onMounted as k, onBeforeUnmount as g, createElementBlock as M, openBlock as V, nextTick as O } from "vue";
+import { TUIVideoStreamType as a } from "@tencentcloud/tuiroom-engine-js";
+import { StreamPlayMode as y, StreamPlayQuality as c, MediaManager as x } from "../../manager/mediaManager.js";
+import { getNanoId as C } from "../../../../utils/utils.js";
+import { useUserState as D } from "../../../../states/UserState/index.js";
+import { DeviceStatus as I } from "../../../../types/device.js";
+import { _ as L } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const N = ["id"], R = /* @__PURE__ */ P({
   __name: "index",
   props: {
     userInfo: {},
     streamType: {},
-    streamPlayQuality: { default: StreamPlayQuality.Default },
-    streamPlayMode: { default: StreamPlayMode.PLAY }
+    streamPlayQuality: { default: c.Default },
+    streamPlayMode: { default: y.PLAY }
   },
-  setup(__props) {
-    const { localUser } = useUserState();
-    const mediaManager = new MediaManager();
-    const props = __props;
-    const playRegionDomRef = ref();
-    const nanoId = getNanoId(5);
-    const playRegionDomId = computed(
-      () => `${props.userInfo.userId}_${props.streamType}_${nanoId}`
-    );
-    const isNeedPlayStream = computed(
-      () => props.streamPlayMode !== StreamPlayMode.STOP && (props.streamType === TUIVideoStreamType.kCameraStream && props.userInfo.cameraStatus === DeviceStatus.On || props.streamType === TUIVideoStreamType.kScreenStream && props.userInfo.screenStatus === DeviceStatus.On) || props.userInfo.userId.indexOf("livekit_") === 0
-    );
-    const streamTypeToFetch = computed(() => {
-      var _a;
-      const { userId } = props.userInfo;
-      const streamType = props.streamType;
-      if (streamType === TUIVideoStreamType.kScreenStream) {
-        return TUIVideoStreamType.kScreenStream;
-      }
-      if (props.streamPlayQuality === StreamPlayQuality.HIGH || userId === ((_a = localUser.value) == null ? void 0 : _a.userId)) {
-        return TUIVideoStreamType.kCameraStream;
-      }
-      if (props.streamPlayQuality === StreamPlayQuality.LOW) {
-        return TUIVideoStreamType.kCameraStreamLow;
-      }
-      return TUIVideoStreamType.kCameraStream;
+  setup(S) {
+    const { localUser: v } = D(), i = new x(), e = S, s = w(), T = C(5), _ = l(
+      () => `${e.userInfo.userId}_${e.streamType}_${T}`
+    ), t = l(
+      () => e.streamPlayMode !== y.STOP && (e.streamType === a.kCameraStream && e.userInfo.cameraStatus === I.On || e.streamType === a.kScreenStream && e.userInfo.screenStatus === I.On) || e.userInfo.userId.indexOf("livekit_") === 0
+    ), m = l(() => {
+      var r;
+      const { userId: o } = e.userInfo;
+      return e.streamType === a.kScreenStream ? a.kScreenStream : e.streamPlayQuality === c.HIGH || o === ((r = v.value) == null ? void 0 : r.userId) ? a.kCameraStream : e.streamPlayQuality === c.LOW ? a.kCameraStreamLow : a.kCameraStream;
     });
-    async function startPlayVideo() {
-      await nextTick();
-      if (isNeedPlayStream.value) {
-        await mediaManager.startPlayVideo({
-          userId: props.userInfo.userId,
-          streamType: streamTypeToFetch.value,
-          view: playRegionDomRef.value,
-          observerViewInVisible: props.streamPlayMode === StreamPlayMode.PLAY_IN_VISIBLE
-        });
-      }
+    async function u() {
+      await O(), t.value && await i.startPlayVideo({
+        userId: e.userInfo.userId,
+        streamType: m.value,
+        view: s.value,
+        observerViewInVisible: e.streamPlayMode === y.PLAY_IN_VISIBLE
+      });
     }
-    async function stopPlayVideo() {
-      await mediaManager.stopPlayVideo({
-        userId: props.userInfo.userId,
-        streamType: streamTypeToFetch.value,
-        view: playRegionDomRef.value
+    async function d() {
+      await i.stopPlayVideo({
+        userId: e.userInfo.userId,
+        streamType: m.value,
+        view: s.value
       });
     }
-    watch(
+    return p(
       () => [
-        props.userInfo.userId,
-        props.streamType,
-        isNeedPlayStream.value
+        e.userInfo.userId,
+        e.streamType,
+        t.value
       ],
-      async (val, oldVal) => {
-        if (JSON.stringify(val) === JSON.stringify(oldVal)) {
+      async (o, n) => {
+        if (JSON.stringify(o) === JSON.stringify(n))
           return;
-        }
-        const [oldUserId, oldStreamType] = oldVal;
-        if (oldUserId !== props.userInfo.userId || oldStreamType !== props.streamType) {
-          mediaManager.stopPlayVideo({
-            userId: oldUserId,
-            streamType: oldStreamType,
-            view: playRegionDomRef.value
-          });
-        }
-        if (isNeedPlayStream.value) {
-          await startPlayVideo();
-        } else {
-          await stopPlayVideo();
-        }
+        const [r, f] = n;
+        (r !== e.userInfo.userId || f !== e.streamType) && i.stopPlayVideo({
+          userId: r,
+          streamType: f,
+          view: s.value
+        }), t.value ? await u() : await d();
       }
-    );
-    watch(
-      () => streamTypeToFetch,
+    ), p(
+      () => m,
       async () => {
-        if (isNeedPlayStream.value) {
-          await startPlayVideo();
-        }
-      }
-    );
-    onMounted(async () => {
-      if (isNeedPlayStream.value) {
-        await startPlayVideo();
+        t.value && await u();
       }
-    });
-    onBeforeUnmount(async () => {
-      await stopPlayVideo();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "playRegionDomRef",
-        ref: playRegionDomRef,
-        id: playRegionDomId.value,
-        class: "stream-play-container"
-      }, null, 8, _hoisted_1);
-    };
+    ), k(async () => {
+      t.value && await u();
+    }), g(async () => {
+      await d();
+    }), (o, n) => (V(), M("div", {
+      ref_key: "playRegionDomRef",
+      ref: s,
+      id: _.value,
+      class: "stream-play-container"
+    }, null, 8, N));
   }
-});
-const StreamPlay = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3392cbdc"]]);
+}), E = /* @__PURE__ */ L(R, [["__scopeId", "data-v-3392cbdc"]]);
 export {
-  StreamPlay as default
+  E as default
 };

package/dist/components/StreamView/common/StreamRegion/StreamRegionPC.js

@@ -1,9 +1,9 @@
-import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, createElementVNode, normalizeStyle, createVNode, renderSlot, createBlock, createCommentVNode } from "vue";
-import StreamPlay from "../StreamPlay/index.js";
-import StreamCover from "../StreamCover/index.js";
-import { getContentSize } from "../../../../utils/domOperation.js";
-import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { defineComponent as w, ref as f, computed as y, watch as T, onMounted as b, onBeforeUnmount as k, createElementBlock as C, openBlock as d, createElementVNode as _, normalizeStyle as P, createVNode as B, renderSlot as v, createBlock as N, createCommentVNode as $ } from "vue";
+import x from "../StreamPlay/index.js";
+import z from "../StreamCover/index.js";
+import { getContentSize as h } from "../../../../utils/domOperation.js";
+import { _ as V } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const M = /* @__PURE__ */ w({
   __name: "StreamRegionPC",
   props: {
     userInfo: {},
@@ -14,97 +14,65 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     supportTouchScale: { type: Boolean }
   },
   emits: ["stream-view-dblclick"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const streamRegionContainerRef = ref();
-    const streamStyle = ref({ width: "", height: "" });
-    const widthRatio = computed(() => {
-      if (!props.aspectRatio || props.aspectRatio.indexOf(":") < 0) {
-        return 0;
-      }
-      return Number(props.aspectRatio.split(":")[0]);
-    });
-    const heightRatio = computed(() => {
-      if (!props.aspectRatio || props.aspectRatio.indexOf(":") < 0) {
-        return 0;
-      }
-      return Number(props.aspectRatio.split(":")[1]);
-    });
-    watch(() => props.aspectRatio, () => {
-      handleStreamRegionSize();
+  setup(R, { emit: g }) {
+    const e = R, I = g, a = f(), n = f({ width: "", height: "" }), o = y(() => !e.aspectRatio || e.aspectRatio.indexOf(":") < 0 ? 0 : Number(e.aspectRatio.split(":")[0])), s = y(() => !e.aspectRatio || e.aspectRatio.indexOf(":") < 0 ? 0 : Number(e.aspectRatio.split(":")[1]));
+    T(() => e.aspectRatio, () => {
+      m();
     });
-    function handleStreamRegionSize() {
-      if (!streamRegionContainerRef.value) {
+    function m() {
+      if (!a.value)
         return;
+      const t = h(a.value).width, r = h(a.value).height;
+      let i = t, l = r;
+      if (o.value && s.value) {
+        const c = t / o.value, p = r / s.value;
+        c > p && (i = r / s.value * o.value, l = r), c <= p && (i = t, l = t / o.value * s.value);
       }
-      const containerWidth = getContentSize(streamRegionContainerRef.value).width;
-      const containerHeight = getContentSize(streamRegionContainerRef.value).height;
-      let width = containerWidth;
-      let height = containerHeight;
-      if (widthRatio.value && heightRatio.value) {
-        const scaleWidth = containerWidth / widthRatio.value;
-        const scaleHeight = containerHeight / heightRatio.value;
-        if (scaleWidth > scaleHeight) {
-          width = containerHeight / heightRatio.value * widthRatio.value;
-          height = containerHeight;
-        }
-        if (scaleWidth <= scaleHeight) {
-          width = containerWidth;
-          height = containerWidth / widthRatio.value * heightRatio.value;
-        }
-      }
-      streamStyle.value.width = `${width}px`;
-      streamStyle.value.height = `${height}px`;
+      n.value.width = `${i}px`, n.value.height = `${l}px`;
     }
-    function handleStreamDblClick() {
-      emits("stream-view-dblclick", { userInfo: props.userInfo, streamType: props.streamType });
+    function S() {
+      I("stream-view-dblclick", { userInfo: e.userInfo, streamType: e.streamType });
     }
-    const ro = new ResizeObserver(() => {
-      handleStreamRegionSize();
-    });
-    onMounted(() => {
-      ro.observe(streamRegionContainerRef.value);
-    });
-    onBeforeUnmount(() => {
-      ro.unobserve(streamRegionContainerRef.value);
+    const u = new ResizeObserver(() => {
+      m();
     });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "stream-region-container",
-        ref_key: "streamRegionContainerRef",
-        ref: streamRegionContainerRef
+    return b(() => {
+      u.observe(a.value);
+    }), k(() => {
+      u.unobserve(a.value);
+    }), (t, r) => (d(), C("div", {
+      class: "stream-region-container",
+      ref_key: "streamRegionContainerRef",
+      ref: a
+    }, [
+      _("div", {
+        class: "stream-region",
+        onDblclick: S,
+        style: P(n.value)
       }, [
-        createElementVNode("div", {
-          class: "stream-region",
-          onDblclick: handleStreamDblClick,
-          style: normalizeStyle(streamStyle.value)
-        }, [
-          createVNode(StreamPlay, {
-            "user-info": props.userInfo,
-            "stream-type": props.streamType,
-            "stream-play-mode": props.streamPlayMode,
-            "stream-play-quality": props.streamPlayQuality
-          }, null, 8, ["user-info", "stream-type", "stream-play-mode", "stream-play-quality"]),
-          renderSlot(_ctx.$slots, "stream-cover", {
-            userInfo: props.userInfo,
-            streamType: props.streamType
-          }, void 0, true),
-          !_ctx.$slots.streamCover ? (openBlock(), createBlock(StreamCover, {
-            key: 0,
-            userInfo: props.userInfo,
-            "stream-type": props.streamType
-          }, null, 8, ["userInfo", "stream-type"])) : createCommentVNode("", true),
-          renderSlot(_ctx.$slots, "streamViewUI", {
-            userInfo: props.userInfo,
-            streamType: props.streamType
-          }, void 0, true)
-        ], 36)
-      ], 512);
-    };
+        B(x, {
+          "user-info": e.userInfo,
+          "stream-type": e.streamType,
+          "stream-play-mode": e.streamPlayMode,
+          "stream-play-quality": e.streamPlayQuality
+        }, null, 8, ["user-info", "stream-type", "stream-play-mode", "stream-play-quality"]),
+        v(t.$slots, "stream-cover", {
+          userInfo: e.userInfo,
+          streamType: e.streamType
+        }, void 0, !0),
+        t.$slots.streamCover ? $("", !0) : (d(), N(z, {
+          key: 0,
+          userInfo: e.userInfo,
+          "stream-type": e.streamType
+        }, null, 8, ["userInfo", "stream-type"])),
+        v(t.$slots, "streamViewUI", {
+          userInfo: e.userInfo,
+          streamType: e.streamType
+        }, void 0, !0)
+      ], 36)
+    ], 512));
   }
-});
-const StreamRegion = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8a52e36a"]]);
+}), Q = /* @__PURE__ */ V(M, [["__scopeId", "data-v-8a52e36a"]]);
 export {
-  StreamRegion as default
+  Q as default
 };