tuikit-atomicx-vue3 3.3.3 → 3.4.1

package/dist/components/StreamView/Layout/FloatLayout.js

@@ -1,17 +1,14 @@
-import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, createElementVNode, normalizeStyle, createCommentVNode, createVNode, unref, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import StreamRegion from "../common/StreamRegion/StreamRegionPC.js";
-import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
-import { useUserState } from "../../../states/UserState/index.js";
-import { useLiveState } from "../../../states/LiveState/index.js";
-import { useRoomEngine } from "../../../hooks/useRoomEngine.js";
-import { DeviceStatus } from "../../../types/device.js";
-import { LiveStatus } from "../../../types/live.js";
-import { SeatStatus } from "../../../types/user.js";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = { class: "main-view" };
-const encodeWidth = 1920;
-const encodeHeight = 1080;
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { defineComponent as q, ref as O, computed as l, onMounted as G, onBeforeUnmount as K, watch as N, createElementBlock as M, openBlock as B, createElementVNode as J, normalizeStyle as T, createCommentVNode as Q, createVNode as W, unref as C, withCtx as H, renderSlot as V, normalizeProps as E, guardReactiveProps as z } from "vue";
+import $ from "../common/StreamRegion/StreamRegionPC.js";
+import { TUIVideoStreamType as v } from "@tencentcloud/tuiroom-engine-js";
+import { useUserState as ee } from "../../../states/UserState/index.js";
+import { useLiveState as te } from "../../../states/LiveState/index.js";
+import { useRoomEngine as re } from "../../../hooks/useRoomEngine.js";
+import { DeviceStatus as h } from "../../../types/device.js";
+import { LiveStatus as A } from "../../../types/live.js";
+import { SeatStatus as oe } from "../../../types/user.js";
+import { _ as ae } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const ie = { class: "main-view" }, _ = 1920, P = 1080, ne = /* @__PURE__ */ q({
   __name: "FloatLayout",
   props: {
     config: { default: () => JSON.stringify({
@@ -20,232 +17,172 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       width: "160px",
       height: "160px"
     }) },
-    filterFn: { type: Function, default: () => true },
+    filterFn: { type: Function, default: () => !0 },
     sortFn: { type: Function, default: () => 0 }
   },
-  setup(__props) {
-    var _a, _b;
-    const { localUser, userListWithVideo } = useUserState();
-    const { currentLive, localLiveStatus } = useLiveState();
-    const roomEngine = useRoomEngine();
-    const props = __props;
-    const streamListContainerRef = ref();
-    const streamListRef = ref();
-    const streamListStyle = ref({
+  setup(X) {
+    var U, k;
+    const { localUser: x, userListWithVideo: Y } = ee(), { currentLive: c, localLiveStatus: b } = te(), w = re(), p = X, s = O(), Z = O(), y = O({
       width: "0",
       height: "0"
     });
-    function stringToNumber(str) {
-      return Number(str.replace("px", ""));
+    function u(t) {
+      return Number(t.replace("px", ""));
     }
-    const toLayoutRadio = computed(() => {
-      return stringToNumber(streamListStyle.value.width) / encodeWidth;
-    });
-    async function handleFloatContainerLayout() {
-      if (!streamListContainerRef.value) {
+    const m = l(() => u(y.value.width) / _);
+    async function D() {
+      if (!s.value)
         return;
-      }
-      const containerRect = streamListContainerRef.value.getBoundingClientRect();
-      const containerWidth = Math.floor(containerRect.width);
-      const containerHeight = Math.floor(containerRect.height);
-      const widthRatio = 16;
-      const heightRatio = 9;
-      let width = containerWidth;
-      let height = containerHeight;
-      const scaleWidth = containerWidth / widthRatio;
-      const scaleHeight = containerHeight / heightRatio;
-      if (scaleWidth > scaleHeight) {
-        width = containerHeight / heightRatio * widthRatio;
-        height = containerHeight;
-      }
-      if (scaleWidth <= scaleHeight) {
-        width = containerWidth;
-        height = containerWidth / widthRatio * heightRatio;
-      }
-      streamListStyle.value.width = `${Math.floor(width)}px`;
-      streamListStyle.value.height = `${Math.floor(height)}px`;
+      const t = s.value.getBoundingClientRect(), r = Math.floor(t.width), e = Math.floor(t.height), o = 16, a = 9;
+      let i = r, n = e;
+      const f = r / o, g = e / a;
+      f > g && (i = e / a * o, n = e), f <= g && (i = r, n = r / o * a), y.value.width = `${Math.floor(i)}px`, y.value.height = `${Math.floor(n)}px`;
     }
-    const resizeObserver = new ResizeObserver(() => {
-      handleFloatContainerLayout();
-    });
-    onMounted(() => {
-      streamListContainerRef.value && resizeObserver.observe(streamListContainerRef.value);
-    });
-    onBeforeUnmount(() => {
-      streamListContainerRef.value && resizeObserver.unobserve(streamListContainerRef.value);
-    });
-    const filterAndSortUserList = computed(() => {
-      const filteredUserList = userListWithVideo.value.filter(props.filterFn);
-      if (props.sortFn) {
-        return filteredUserList.sort(props.sortFn);
-      }
-      return filteredUserList;
-    });
-    const mainUserInfo = computed(() => {
-      const hasScreenUserInfo = filterAndSortUserList.value.find((userInfo) => userInfo.screenStatus === DeviceStatus.On);
-      if (hasScreenUserInfo) {
-        return hasScreenUserInfo;
-      }
-      return filterAndSortUserList.value[0];
+    const R = new ResizeObserver(() => {
+      D();
     });
-    const mainStreamType = computed(() => {
-      return mainUserInfo.value.screenStatus === DeviceStatus.On ? TUIVideoStreamType.kScreenStream : TUIVideoStreamType.kCameraStream;
+    G(() => {
+      s.value && R.observe(s.value);
+    }), K(() => {
+      s.value && R.unobserve(s.value);
     });
-    const floatUserInfo = computed(() => {
-      if (mainStreamType.value === TUIVideoStreamType.kScreenStream) {
-        return filterAndSortUserList.value.find((userInfo) => userInfo.cameraStatus === DeviceStatus.On);
-      } else {
-        return filterAndSortUserList.value.find((userInfo) => {
-          var _a2;
-          return userInfo.cameraStatus === DeviceStatus.On && userInfo.userId !== ((_a2 = mainUserInfo.value) == null ? void 0 : _a2.userId);
-        });
-      }
-    });
-    if (((_a = localUser.value) == null ? void 0 : _a.userId) === ((_b = currentLive.value) == null ? void 0 : _b.liveOwner.userId)) {
-      const floatLayoutConfig = computed(() => {
-        var _a2, _b2;
-        if (!floatUserInfo.value || floatUserInfo.value.cameraStatus !== DeviceStatus.On) {
-          return null;
-        }
-        return {
-          "LocationX": 1540,
+    const S = l(() => {
+      const t = Y.value.filter(p.filterFn);
+      return p.sortFn ? t.sort(p.sortFn) : t;
+    }), L = l(() => {
+      const t = S.value.find((r) => r.screenStatus === h.On);
+      return t || S.value[0];
+    }), I = l(() => L.value.screenStatus === h.On ? v.kScreenStream : v.kCameraStream), d = l(() => I.value === v.kScreenStream ? S.value.find((t) => t.cameraStatus === h.On) : S.value.find((t) => {
+      var r;
+      return t.cameraStatus === h.On && t.userId !== ((r = L.value) == null ? void 0 : r.userId);
+    }));
+    if (((U = x.value) == null ? void 0 : U.userId) === ((k = c.value) == null ? void 0 : k.liveOwner.userId)) {
+      const t = l(() => {
+        var e, o;
+        return !d.value || d.value.cameraStatus !== h.On ? null : {
+          LocationX: 1540,
           // 以画面左上角为原点的 x 坐标
-          "LocationY": 20,
+          LocationY: 20,
           // 以画面左上角为原点的 y 坐标
-          "ImageWidth": 360,
+          ImageWidth: 360,
           // 调整后的画面宽度
-          "ImageHeight": 202,
+          ImageHeight: 202,
           // 调整后的画面高度
-          "ZOrder": 1,
+          ZOrder: 1,
           // 画面层级
-          "StreamType": TUIVideoStreamType.kCameraStream,
+          StreamType: v.kCameraStream,
           // 0 摄像头, 1 屏幕共享, 2 白板, 3 自定义
-          "Member_Account": (_a2 = floatUserInfo.value) == null ? void 0 : _a2.userId,
+          Member_Account: (e = d.value) == null ? void 0 : e.userId,
           // 该路流的用户ID
-          "BackgroundImageUrl": "",
-          "RoomId": (_b2 = currentLive.value) == null ? void 0 : _b2.liveId,
-          "BackgroundColor": "0x1F212C"
+          BackgroundImageUrl: "",
+          RoomId: (o = c.value) == null ? void 0 : o.liveId,
+          BackgroundColor: "0x1F212C"
         };
-      });
-      const layoutConfig = computed(() => {
-        var _a2;
+      }), r = l(() => {
+        var e;
         return {
           // 设置画布大小
-          "VideoEncode": {
-            "Width": encodeWidth,
-            "Height": encodeHeight
+          VideoEncode: {
+            Width: _,
+            Height: P
           },
-          "LayoutMode": 1e3,
+          LayoutMode: 1e3,
           // 0~9 内置布局模板， 1000自定义布局， 只有1000时候才能修改LayoutInfo,目前只支持 0 和 1000
           // 设置画面布局
-          "LayoutInfo": {
-            "LayoutList": floatLayoutConfig.value ? [floatLayoutConfig.value] : [],
-            "MaxUserLayout": {
-              "ZOrder": 0,
+          LayoutInfo: {
+            LayoutList: t.value ? [t.value] : [],
+            MaxUserLayout: {
+              ZOrder: 0,
               //层级
-              "StreamType": mainStreamType.value,
+              StreamType: I.value,
               // 0为摄像头， 1为屏幕共享
-              "Member_Account": mainUserInfo.value.userId,
-              "BackgroundImageUrl": "",
+              Member_Account: L.value.userId,
+              BackgroundImageUrl: "",
               //可以设置看看，可能在最大画面时候没作用
-              "RoomId": (_a2 = currentLive.value) == null ? void 0 : _a2.liveId,
-              "BackgroundColor": "0x1F212C",
-              "LocationX": 0,
+              RoomId: (e = c.value) == null ? void 0 : e.liveId,
+              BackgroundColor: "0x1F212C",
+              LocationX: 0,
               // 以画面左上角为原点的 x 坐标
-              "LocationY": 0,
+              LocationY: 0,
               // 以画面左上角为原点的 y 坐标
-              "ImageWidth": encodeWidth,
+              ImageWidth: _,
               // 调整后的画面宽度
-              "ImageHeight": encodeHeight,
-              "RenderMode": mainStreamType.value === TUIVideoStreamType.kScreenStream ? 2 : 0
+              ImageHeight: P,
+              RenderMode: I.value === v.kScreenStream ? 2 : 0
             }
           }
         };
       });
-      watch(() => layoutConfig.value, async (newVal, oldVal) => {
-        var _a2, _b2;
-        console.error("lixin-debug mix watch layoutConfig change 111", JSON.stringify(newVal), JSON.stringify(oldVal));
-        if (localLiveStatus.value !== LiveStatus.Live || JSON.stringify(newVal) === JSON.stringify(oldVal)) {
+      N(() => r.value, async (e, o) => {
+        var i, n;
+        if (console.error("lixin-debug mix watch layoutConfig change 111", JSON.stringify(e), JSON.stringify(o)), b.value !== A.Live || JSON.stringify(e) === JSON.stringify(o))
           return;
-        }
-        const liveLayoutManager = (_a2 = roomEngine.instance) == null ? void 0 : _a2.getLiveLayoutManager();
-        console.error("lixin-debug mix setLiveStreamLayoutInfo 111", newVal);
-        await (liveLayoutManager == null ? void 0 : liveLayoutManager.setLiveStreamLayoutInfo((_b2 = currentLive.value) == null ? void 0 : _b2.liveId, JSON.stringify(newVal)));
-      }, { immediate: true, deep: true });
-      watch(() => {
-        var _a2;
-        return [localLiveStatus.value, (_a2 = localUser.value) == null ? void 0 : _a2.seatStatus];
-      }, async ([newlocalLiveStatus, newSeatStatus], [oldlocalLiveStatus, oldSeatStatus]) => {
-        var _a2;
-        console.error("lixin-debug mix localLiveStatus 222", newlocalLiveStatus, oldlocalLiveStatus, newSeatStatus, oldSeatStatus);
-        if (newlocalLiveStatus === oldlocalLiveStatus && newSeatStatus === oldSeatStatus) {
-          return;
-        }
-        if (newlocalLiveStatus === LiveStatus.Live && newSeatStatus === SeatStatus.On && localUser.value.userId === ((_a2 = currentLive.value) == null ? void 0 : _a2.liveOwner.userId)) {
-          setTimeout(async () => {
-            var _a3, _b2;
-            const liveLayoutManager = (_a3 = roomEngine.instance) == null ? void 0 : _a3.getLiveLayoutManager();
-            console.error("lixin-debug mix setLiveStreamLayoutInfo 222", layoutConfig.value);
-            await (liveLayoutManager == null ? void 0 : liveLayoutManager.setLiveStreamLayoutInfo((_b2 = currentLive.value) == null ? void 0 : _b2.liveId, JSON.stringify(layoutConfig.value)));
-          }, 1e3);
-        }
+        const a = (i = w.instance) == null ? void 0 : i.getLiveLayoutManager();
+        console.error("lixin-debug mix setLiveStreamLayoutInfo 111", e), await (a == null ? void 0 : a.setLiveStreamLayoutInfo((n = c.value) == null ? void 0 : n.liveId, JSON.stringify(e)));
+      }, { immediate: !0, deep: !0 }), N(() => {
+        var e;
+        return [b.value, (e = x.value) == null ? void 0 : e.seatStatus];
+      }, async ([e, o], [a, i]) => {
+        var n;
+        console.error("lixin-debug mix localLiveStatus 222", e, a, o, i), !(e === a && o === i) && e === A.Live && o === oe.On && x.value.userId === ((n = c.value) == null ? void 0 : n.liveOwner.userId) && setTimeout(async () => {
+          var g, F;
+          const f = (g = w.instance) == null ? void 0 : g.getLiveLayoutManager();
+          console.error("lixin-debug mix setLiveStreamLayoutInfo 222", r.value), await (f == null ? void 0 : f.setLiveStreamLayoutInfo((F = c.value) == null ? void 0 : F.liveId, JSON.stringify(r.value)));
+        }, 1e3);
       });
     }
-    const getFloatStyle = () => {
-      const { top, right, bottom, left, width, height } = JSON.parse(props.config);
+    const j = () => {
+      const { top: t, right: r, bottom: e, left: o, width: a, height: i } = JSON.parse(p.config);
       return {
-        width: stringToNumber(width) * toLayoutRadio.value + "px",
-        height: stringToNumber(height) * toLayoutRadio.value + "px",
-        ...top !== void 0 ? { top: stringToNumber(top) * toLayoutRadio.value + "px" } : {},
-        ...right !== void 0 ? { right: stringToNumber(right) * toLayoutRadio.value + "px" } : {},
-        ...bottom !== void 0 ? { bottom: stringToNumber(bottom) * toLayoutRadio.value + "px" } : {},
-        ...left !== void 0 ? { left: stringToNumber(left) * toLayoutRadio.value + "px" } : {}
+        width: u(a) * m.value + "px",
+        height: u(i) * m.value + "px",
+        ...t !== void 0 ? { top: u(t) * m.value + "px" } : {},
+        ...r !== void 0 ? { right: u(r) * m.value + "px" } : {},
+        ...e !== void 0 ? { bottom: u(e) * m.value + "px" } : {},
+        ...o !== void 0 ? { left: u(o) * m.value + "px" } : {}
       };
     };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "float-layout-container",
-        ref_key: "streamListContainerRef",
-        ref: streamListContainerRef
+    return (t, r) => (B(), M("div", {
+      class: "float-layout-container",
+      ref_key: "streamListContainerRef",
+      ref: s
+    }, [
+      J("div", {
+        class: "float-layout",
+        ref_key: "streamListRef",
+        ref: Z,
+        style: T(y.value)
       }, [
-        createElementVNode("div", {
-          class: "float-layout",
-          ref_key: "streamListRef",
-          ref: streamListRef,
-          style: normalizeStyle(streamListStyle.value)
+        J("div", ie, [
+          W(C($), {
+            "user-info": L.value,
+            "stream-type": I.value
+          }, {
+            streamViewUI: H((e) => [
+              V(t.$slots, "streamViewUI", E(z(e)), void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["user-info", "stream-type"])
+        ]),
+        d.value ? (B(), M("div", {
+          key: 0,
+          class: "float-view",
+          style: T(j())
         }, [
-          createElementVNode("div", _hoisted_1, [
-            createVNode(unref(StreamRegion), {
-              "user-info": mainUserInfo.value,
-              "stream-type": mainStreamType.value
-            }, {
-              streamViewUI: withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "streamViewUI", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
-              ]),
-              _: 3
-            }, 8, ["user-info", "stream-type"])
-          ]),
-          floatUserInfo.value ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: "float-view",
-            style: normalizeStyle(getFloatStyle())
-          }, [
-            createVNode(unref(StreamRegion), {
-              "user-info": floatUserInfo.value,
-              "stream-type": unref(TUIVideoStreamType).kCameraStream
-            }, {
-              streamViewUI: withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "streamViewUI", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
-              ]),
-              _: 3
-            }, 8, ["user-info", "stream-type"])
-          ], 4)) : createCommentVNode("", true)
-        ], 4)
-      ], 512);
-    };
+          W(C($), {
+            "user-info": d.value,
+            "stream-type": C(v).kCameraStream
+          }, {
+            streamViewUI: H((e) => [
+              V(t.$slots, "streamViewUI", E(z(e)), void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["user-info", "stream-type"])
+        ], 4)) : Q("", !0)
+      ], 4)
+    ], 512));
   }
-});
-const FloatLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0fdb5f8b"]]);
+}), pe = /* @__PURE__ */ ae(ne, [["__scopeId", "data-v-0fdb5f8b"]]);
 export {
-  FloatLayout as default
+  pe as default
 };