tuikit-atomicx-vue3 3.3.3 → 3.4.1

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

@@ -1,17 +1,16 @@
-import { defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, createBlock, unref, withCtx, renderSlot, mergeProps } from "vue";
-import StreamRegion from "../common/StreamRegion/StreamRegionPC.js";
-import { getContentSize } from "../../../utils/domOperation.js";
-import { useUserState } from "../../../states/UserState/index.js";
-import { TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-js";
-import { safelyParse } from "../../../utils/utils.js";
-import { useRoomState } from "../../../states/RoomState.js";
-import { useDeviceState } from "../../../states/DeviceState.js";
-import { useLoginState } from "../../../states/LoginState.js";
-import { getNewUserInfo } from "../../../states/UserState/store.js";
-import { LocalRoomStatus } from "../../../types/room.js";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const aspectRatio = "16:9";
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { defineComponent as Q, computed as n, ref as y, watch as X, nextTick as Z, onMounted as ee, onBeforeUnmount as te, createElementBlock as $, openBlock as x, normalizeClass as ae, createElementVNode as ne, normalizeStyle as U, Fragment as oe, renderList as ie, createBlock as le, unref as re, withCtx as ue, renderSlot as se, mergeProps as ce } from "vue";
+import me from "../common/StreamRegion/StreamRegionPC.js";
+import { getContentSize as z } from "../../../utils/domOperation.js";
+import { useUserState as ve } from "../../../states/UserState/index.js";
+import { TUIVideoStreamType as F } from "@tencentcloud/tuiroom-engine-js";
+import { safelyParse as fe } from "../../../utils/utils.js";
+import { useRoomState as he } from "../../../states/RoomState.js";
+import { useDeviceState as pe } from "../../../states/DeviceState.js";
+import { useLoginState as de } from "../../../states/LoginState.js";
+import { getNewUserInfo as ye } from "../../../states/UserState/store.js";
+import { LocalRoomStatus as ge } from "../../../types/room.js";
+import { _ as Se } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const i = "16:9", we = /* @__PURE__ */ Q({
   __name: "GridLayout",
   props: {
     config: { default: () => JSON.stringify({
@@ -20,216 +19,137 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       rowSpacing: 8,
       columnSpacing: 8
     }) },
-    filterFn: { type: Function, default: () => true },
+    filterFn: { type: Function, default: () => !0 },
     sortFn: { type: Function, default: () => 0 }
   },
   emits: ["stream-view-dblclick"],
-  setup(__props, { emit: __emit }) {
-    const { userList, userListOnSeat, userWithScreenOn } = useUserState();
-    const { microphoneStatus, cameraStatus } = useDeviceState();
-    const { currentRoom, localRoomStatus } = useRoomState();
-    const { loginUserInfo } = useLoginState();
-    const emits = __emit;
-    const props = __props;
-    const gridConfig = computed(() => {
-      return safelyParse(props.config) || {
-        maxRows: 3,
-        maxColumns: 3,
-        rowSpacing: 8,
-        columnSpacing: 8
-      };
-    });
-    const localFakeUser = computed(() => {
-      var _a;
-      const localUser = getNewUserInfo(((_a = loginUserInfo.value) == null ? void 0 : _a.userId) || "local_fake_user");
-      localUser.cameraStatus = cameraStatus.value;
-      localUser.microphoneStatus = microphoneStatus.value;
-      return localUser;
-    });
-    const totalUserList = computed(() => {
-      var _a;
-      if (!currentRoom.value && localRoomStatus.value === LocalRoomStatus.IDLE) {
-        return [localFakeUser.value];
-      }
-      return ((_a = currentRoom.value) == null ? void 0 : _a.isSeatEnabled) ? userListOnSeat.value : userList.value;
-    });
-    const renderUserInfoList = computed(() => {
-      const videoUserList = totalUserList.value.filter(props.filterFn).map((item) => {
-        return {
-          userInfo: item,
-          streamType: TUIVideoStreamType.kCameraStream
-        };
-      });
-      if (userWithScreenOn.value && [userWithScreenOn.value].filter(props.filterFn).length > 0) {
-        videoUserList.unshift({
-          userInfo: userWithScreenOn.value,
-          streamType: TUIVideoStreamType.kScreenStream
-        });
-      }
-      return videoUserList;
-    });
-    const column = computed(() => {
-      if (gridConfig.value.maxColumns === Infinity) {
-        return gridConfig.value.maxColumns;
-      }
-      return Math.min(
-        Math.ceil(Math.sqrt(renderUserInfoList.value.length)),
-        gridConfig.value.maxColumns
-      );
-    });
-    const row = computed(() => {
-      if (gridConfig.value.maxRows === Infinity) {
-        return gridConfig.value.maxRows;
-      }
-      return Math.min(
-        Math.ceil(renderUserInfoList.value.length / column.value),
-        gridConfig.value.maxRows
-      );
-    });
-    const streamListContainerRef = ref();
-    const streamListRef = ref();
-    const isEqualPointsLayout = computed(
-      () => gridConfig.value.maxRows !== Infinity && gridConfig.value.maxColumns !== Infinity
-    );
-    const isHorizontalInfinityLayout = computed(() => gridConfig.value.maxColumns === Infinity);
-    const isVerticalInfinityLayout = computed(() => gridConfig.value.maxRows === Infinity);
-    watch(
-      () => [column.value, row.value],
+  setup(W, { emit: H }) {
+    const { userList: O, userListOnSeat: T, userWithScreenOn: g } = ve(), { microphoneStatus: V, cameraStatus: E } = pe(), { currentRoom: L, localRoomStatus: B } = he(), { loginUserInfo: N } = de(), q = H, S = W, t = n(() => fe(S.config) || {
+      maxRows: 3,
+      maxColumns: 3,
+      rowSpacing: 8,
+      columnSpacing: 8
+    }), D = n(() => {
+      var a;
+      const e = ye(((a = N.value) == null ? void 0 : a.userId) || "local_fake_user");
+      return e.cameraStatus = E.value, e.microphoneStatus = V.value, e;
+    }), P = n(() => {
+      var e;
+      return !L.value && B.value === ge.IDLE ? [D.value] : (e = L.value) != null && e.isSeatEnabled ? T.value : O.value;
+    }), w = n(() => {
+      const e = P.value.filter(S.filterFn).map((a) => ({
+        userInfo: a,
+        streamType: F.kCameraStream
+      }));
+      return g.value && [g.value].filter(S.filterFn).length > 0 && e.unshift({
+        userInfo: g.value,
+        streamType: F.kScreenStream
+      }), e;
+    }), r = n(() => t.value.maxColumns === 1 / 0 ? t.value.maxColumns : Math.min(
+      Math.ceil(Math.sqrt(w.value.length)),
+      t.value.maxColumns
+    )), v = n(() => t.value.maxRows === 1 / 0 ? t.value.maxRows : Math.min(
+      Math.ceil(w.value.length / r.value),
+      t.value.maxRows
+    )), o = y(), G = y(), I = n(
+      () => t.value.maxRows !== 1 / 0 && t.value.maxColumns !== 1 / 0
+    ), R = n(() => t.value.maxColumns === 1 / 0), C = n(() => t.value.maxRows === 1 / 0);
+    X(
+      () => [r.value, v.value],
       async () => {
-        await nextTick();
-        handleLayout();
+        await Z(), _();
       },
-      { immediate: true }
+      { immediate: !0 }
     );
-    function handleLayout() {
-      if (isHorizontalInfinityLayout.value) {
-        handleHorizontalInfinityLayout();
+    function _() {
+      if (R.value) {
+        Y();
         return;
       }
-      if (isVerticalInfinityLayout.value) {
-        handleVerticalInfinityLayout();
+      if (C.value) {
+        j();
         return;
       }
-      if (isEqualPointsLayout.value) {
-        handleEqualPointsLayout();
+      if (I.value) {
+        J();
         return;
       }
     }
-    const streamListStyle = ref({
+    const f = y({
       width: "0",
       height: "0"
-    });
-    const streamStyle = ref({
+    }), l = y({
       width: "0",
       height: "0"
-    });
-    const widthRatio = computed(() => {
-      if ((aspectRatio == null ? void 0 : aspectRatio.indexOf(":")) < 0) {
-        return 0;
-      }
-      return Number(aspectRatio == null ? void 0 : aspectRatio.split(":")[0]);
-    });
-    const heightRatio = computed(() => {
-      if (aspectRatio.indexOf(":") < 0) {
-        return 0;
-      }
-      return Number(aspectRatio.split(":")[1]);
-    });
-    async function handleEqualPointsLayout() {
-      if (!streamListContainerRef.value) {
+    }), u = n(() => (i == null ? void 0 : i.indexOf(":")) < 0 ? 0 : Number(i == null ? void 0 : i.split(":")[0])), s = n(() => i.indexOf(":") < 0 ? 0 : Number(i.split(":")[1]));
+    async function J() {
+      if (!o.value)
         return;
+      const e = o.value.getBoundingClientRect(), a = Math.floor(e.width), c = Math.floor(e.height), m = (a - (r.value - 1) * t.value.columnSpacing) / r.value, h = (c - (v.value - 1) * t.value.rowSpacing) / v.value;
+      let p = m, d = h;
+      if (u.value && s.value) {
+        const M = m / u.value, b = h / s.value;
+        M > b && (p = Math.floor(h / s.value * u.value), d = Math.floor(h)), M <= b && (p = Math.floor(m), d = Math.floor(m / u.value * s.value));
       }
-      const containerRect = streamListContainerRef.value.getBoundingClientRect();
-      const containerWidth = Math.floor(containerRect.width);
-      const containerHeight = Math.floor(containerRect.height);
-      const contentWidth = (containerWidth - (column.value - 1) * gridConfig.value.columnSpacing) / column.value;
-      const contentHeight = (containerHeight - (row.value - 1) * gridConfig.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) * gridConfig.value.columnSpacing)}px`;
-      streamListStyle.value.height = `${Math.ceil(row.value * height + (row.value - 1) * gridConfig.value.rowSpacing)}px`;
+      l.value.width = `${p}px`, l.value.height = `${d}px`, f.value.width = `${Math.ceil(r.value * p + (r.value - 1) * t.value.columnSpacing)}px`, f.value.height = `${Math.ceil(v.value * d + (v.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 Y() {
+      f.value = {};
+      const e = z(o.value).height, a = e * u.value / s.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 j() {
+      f.value = {};
+      const e = z(o.value).width, a = e * s.value / u.value;
+      l.value.width = `${e}px`, l.value.height = `${a}px`;
     }
-    function handleStreamDblClick(userInfo, streamType) {
-      emits("stream-view-dblclick", userInfo, streamType);
+    function A(e, a) {
+      q("stream-view-dblclick", e, a);
     }
-    const resizeObserver = new ResizeObserver(() => {
-      handleLayout();
-    });
-    onMounted(() => {
-      resizeObserver.observe(streamListContainerRef.value);
+    const k = new ResizeObserver(() => {
+      _();
     });
-    onBeforeUnmount(() => {
-      resizeObserver.unobserve(streamListContainerRef.value);
+    ee(() => {
+      k.observe(o.value);
+    }), te(() => {
+      k.unobserve(o.value);
     });
-    function handleWheel(event) {
-      streamListContainerRef.value.scrollLeft += event.deltaY;
+    function K(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) => (x(), $("div", {
+      ref_key: "streamListContainerRef",
+      ref: o,
+      class: ae({
+        "horizontal-infinity-layout": R.value,
+        "vertical-infinity-layout": C.value,
+        "equal-points-layout": I.value
+      })
+    }, [
+      ne("div", {
+        class: "stream-list",
+        ref_key: "streamListRef",
+        ref: G,
+        style: U(f.value),
+        onWheel: K
       }, [
-        createElementVNode("div", {
-          class: "stream-list",
-          ref_key: "streamListRef",
-          ref: streamListRef,
-          style: normalizeStyle(streamListStyle.value),
-          onWheel: handleWheel
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(renderUserInfoList.value, (renderUserInfo) => {
-            return openBlock(), createBlock(unref(StreamRegion), {
-              class: "stream-list-item",
-              key: `${renderUserInfo.userInfo.userId}_${renderUserInfo.streamType}`,
-              userInfo: renderUserInfo.userInfo,
-              "stream-type": renderUserInfo.streamType,
-              style: normalizeStyle(streamStyle.value),
-              onStreamViewDblclick: handleStreamDblClick
-            }, {
-              streamViewUI: withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, slotProps), void 0, true)
-              ]),
-              _: 3
-            }, 8, ["userInfo", "stream-type", "style"]);
-          }), 128))
-        ], 36)
-      ], 2);
-    };
+        (x(!0), $(oe, null, ie(w.value, (c) => (x(), le(re(me), {
+          class: "stream-list-item",
+          key: `${c.userInfo.userId}_${c.streamType}`,
+          userInfo: c.userInfo,
+          "stream-type": c.streamType,
+          style: U(l.value),
+          onStreamViewDblclick: A
+        }, {
+          streamViewUI: ue((m) => [
+            se(e.$slots, "streamViewUI", ce({ ref_for: !0 }, m), void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["userInfo", "stream-type", "style"]))), 128))
+      ], 36)
+    ], 2));
   }
-});
-const GridLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0dc1b2d5"]]);
+}), Fe = /* @__PURE__ */ Se(we, [["__scopeId", "data-v-0dc1b2d5"]]);
 export {
-  GridLayout as default
+  Fe as default
 };