tuikit-atomicx-vue3 3.4.2 → 4.3.1

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

@@ -1,14 +1,11 @@
-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({
+import { defineComponent as X, ref as I, computed as n, onMounted as Y, onBeforeUnmount as Z, createElementBlock as R, openBlock as F, createElementVNode as O, normalizeStyle as b, createCommentVNode as D, createVNode as M, unref as L, withCtx as V, renderSlot as $, normalizeProps as B, guardReactiveProps as N } from "vue";
+import { TUIVideoStreamType as u } from "@tencentcloud/tuiroom-engine-js";
+import { useUserState as j } from "../../../states/UserState/index.js";
+import W from "../common/StreamRegion/StreamRegionPC.js";
+import { useLiveListState as q } from "../../../states/LiveListState/LiveListState.js";
+import { DeviceStatus as m } from "../../../types/device.js";
+import { _ as G } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const K = { class: "main-view" }, w = 1920, H = 1080, Q = /* @__PURE__ */ X({
   __name: "FloatLayout",
   props: {
     config: { default: () => JSON.stringify({
@@ -20,46 +17,46 @@ const ie = { class: "main-view" }, _ = 1920, P = 1080, ne = /* @__PURE__ */ q({
     filterFn: { type: Function, default: () => !0 },
     sortFn: { type: Function, default: () => 0 }
   },
-  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({
+  setup(T) {
+    var _, U;
+    const { localUser: z, userListWithVideo: A } = j(), { currentLive: y } = q(), f = T, r = I(), E = I(), v = I({
       width: "0",
       height: "0"
     });
-    function u(t) {
-      return Number(t.replace("px", ""));
+    function a(e) {
+      return Number(e.replace("px", ""));
     }
-    const m = l(() => u(y.value.width) / _);
-    async function D() {
-      if (!s.value)
+    const i = n(() => a(v.value.width) / w);
+    async function J() {
+      if (!r.value)
         return;
-      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 e = r.value.getBoundingClientRect(), t = Math.floor(e.width), o = Math.floor(e.height), s = 16, c = 9;
+      let d = t, S = o;
+      const k = t / s, C = o / c;
+      k > C && (d = o / c * s, S = o), k <= C && (d = t, S = t / s * c), v.value.width = `${Math.floor(d)}px`, v.value.height = `${Math.floor(S)}px`;
     }
-    const R = new ResizeObserver(() => {
-      D();
+    const x = new ResizeObserver(() => {
+      J();
     });
-    G(() => {
-      s.value && R.observe(s.value);
-    }), K(() => {
-      s.value && R.unobserve(s.value);
+    Y(() => {
+      r.value && x.observe(r.value);
+    }), Z(() => {
+      r.value && x.unobserve(r.value);
     });
-    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);
+    const h = n(() => {
+      const e = A.value.filter(f.filterFn);
+      return f.sortFn ? e.sort(f.sortFn) : e;
+    }), p = n(() => {
+      const e = h.value.find((t) => t.screenStatus === m.On);
+      return e || h.value[0];
+    }), g = n(() => p.value.screenStatus === m.On ? u.kScreenStream : u.kCameraStream), l = n(() => g.value === u.kScreenStream ? h.value.find((e) => e.cameraStatus === m.On) : h.value.find((e) => {
+      var t;
+      return e.cameraStatus === m.On && e.userId !== ((t = p.value) == null ? void 0 : t.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 : {
+    if (((_ = z.value) == null ? void 0 : _.userId) === ((U = y.value) == null ? void 0 : U.liveOwner.userId)) {
+      const e = n(() => {
+        var t, o;
+        return !l.value || l.value.cameraStatus !== m.On ? null : {
           LocationX: 1540,
           // 以画面左上角为原点的 x 坐标
           LocationY: 20,
@@ -70,119 +67,119 @@ const ie = { class: "main-view" }, _ = 1920, P = 1080, ne = /* @__PURE__ */ q({
           // 调整后的画面高度
           ZOrder: 1,
           // 画面层级
-          StreamType: v.kCameraStream,
+          StreamType: u.kCameraStream,
           // 0 摄像头, 1 屏幕共享, 2 白板, 3 自定义
-          Member_Account: (e = d.value) == null ? void 0 : e.userId,
+          Member_Account: (t = l.value) == null ? void 0 : t.userId,
           // 该路流的用户ID
           BackgroundImageUrl: "",
-          RoomId: (o = c.value) == null ? void 0 : o.liveId,
+          RoomId: (o = y.value) == null ? void 0 : o.liveId,
           BackgroundColor: "0x1F212C"
         };
-      }), r = l(() => {
-        var e;
-        return {
-          // 设置画布大小
-          VideoEncode: {
-            Width: _,
-            Height: P
-          },
-          LayoutMode: 1e3,
-          // 0~9 内置布局模板， 1000自定义布局， 只有1000时候才能修改LayoutInfo,目前只支持 0 和 1000
-          // 设置画面布局
-          LayoutInfo: {
-            LayoutList: t.value ? [t.value] : [],
-            MaxUserLayout: {
-              ZOrder: 0,
-              //层级
-              StreamType: I.value,
-              // 0为摄像头， 1为屏幕共享
-              Member_Account: L.value.userId,
-              BackgroundImageUrl: "",
-              //可以设置看看，可能在最大画面时候没作用
-              RoomId: (e = c.value) == null ? void 0 : e.liveId,
-              BackgroundColor: "0x1F212C",
-              LocationX: 0,
-              // 以画面左上角为原点的 x 坐标
-              LocationY: 0,
-              // 以画面左上角为原点的 y 坐标
-              ImageWidth: _,
-              // 调整后的画面宽度
-              ImageHeight: P,
-              RenderMode: I.value === v.kScreenStream ? 2 : 0
-            }
-          }
-        };
-      });
-      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 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);
       });
+      n(
+        () => {
+          var t;
+          return (
+            // const userOnSeatListConfig = userListOnSeat.value.map(user => {
+            //   return {
+            //     "LocationX": 0,                   // 以画面左上角为原点的 x 坐标
+            //     "LocationY": 0,                  // 以画面左上角为原点的 y 坐标
+            //     "ImageWidth": 0,               // 调整后的画面宽度
+            //     "ImageHeight": 0,               // 调整后的画面高度
+            //     "ZOrder": 0,                      // 画面层级
+            //     "StreamType": TUIVideoStreamType.kCameraStream,                  // 0 摄像头, 1 屏幕共享, 2 白板, 3 自定义
+            //     "Member_Account": user.userId,     // 该路流的用户ID
+            //     "RoomId": user.roomId,
+            //   }
+            // });
+            {
+              // 设置画布大小
+              VideoEncode: {
+                Width: w,
+                Height: H
+              },
+              LayoutMode: 1e3,
+              // 0~9 内置布局模板， 1000自定义布局， 只有1000时候才能修改LayoutInfo,目前只支持 0 和 1000
+              // 设置画面布局
+              LayoutInfo: {
+                LayoutList: e.value ? [e.value] : [],
+                MaxUserLayout: {
+                  ZOrder: 0,
+                  // 层级
+                  StreamType: g.value,
+                  // 0为摄像头， 1为屏幕共享
+                  Member_Account: p.value.userId,
+                  BackgroundImageUrl: "",
+                  // 可以设置看看，可能在最大画面时候没作用
+                  RoomId: (t = y.value) == null ? void 0 : t.liveId,
+                  BackgroundColor: "0x1F212C",
+                  LocationX: 0,
+                  // 以画面左上角为原点的 x 坐标
+                  LocationY: 0,
+                  // 以画面左上角为原点的 y 坐标
+                  ImageWidth: w,
+                  // 调整后的画面宽度
+                  ImageHeight: H,
+                  RenderMode: g.value === u.kScreenStream ? 2 : 0
+                }
+              }
+            }
+          );
+        }
+      );
     }
-    const j = () => {
-      const { top: t, right: r, bottom: e, left: o, width: a, height: i } = JSON.parse(p.config);
+    const P = () => {
+      const { top: e, right: t, bottom: o, left: s, width: c, height: d } = JSON.parse(f.config);
       return {
-        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" } : {}
+        width: `${a(c) * i.value}px`,
+        height: `${a(d) * i.value}px`,
+        ...e !== void 0 ? { top: `${a(e) * i.value}px` } : {},
+        ...t !== void 0 ? { right: `${a(t) * i.value}px` } : {},
+        ...o !== void 0 ? { bottom: `${a(o) * i.value}px` } : {},
+        ...s !== void 0 ? { left: `${a(s) * i.value}px` } : {}
       };
     };
-    return (t, r) => (B(), M("div", {
-      class: "float-layout-container",
+    return (e, t) => (F(), R("div", {
       ref_key: "streamListContainerRef",
-      ref: s
+      ref: r,
+      class: "float-layout-container"
     }, [
-      J("div", {
-        class: "float-layout",
+      O("div", {
         ref_key: "streamListRef",
-        ref: Z,
-        style: T(y.value)
+        ref: E,
+        class: "float-layout",
+        style: b(v.value)
       }, [
-        J("div", ie, [
-          W(C($), {
-            "user-info": L.value,
-            "stream-type": I.value
+        O("div", K, [
+          M(L(W), {
+            "user-info": p.value,
+            "stream-type": g.value
           }, {
-            streamViewUI: H((e) => [
-              V(t.$slots, "streamViewUI", E(z(e)), void 0, !0)
+            streamViewUI: V((o) => [
+              $(e.$slots, "streamViewUI", B(N(o)), void 0, !0)
             ]),
             _: 3
           }, 8, ["user-info", "stream-type"])
         ]),
-        d.value ? (B(), M("div", {
+        l.value ? (F(), R("div", {
           key: 0,
           class: "float-view",
-          style: T(j())
+          style: b(P())
         }, [
-          W(C($), {
-            "user-info": d.value,
-            "stream-type": C(v).kCameraStream
+          M(L(W), {
+            "user-info": l.value,
+            "stream-type": L(u).kCameraStream
           }, {
-            streamViewUI: H((e) => [
-              V(t.$slots, "streamViewUI", E(z(e)), void 0, !0)
+            streamViewUI: V((o) => [
+              $(e.$slots, "streamViewUI", B(N(o)), void 0, !0)
             ]),
             _: 3
           }, 8, ["user-info", "stream-type"])
-        ], 4)) : Q("", !0)
+        ], 4)) : D("", !0)
       ], 4)
     ], 512));
   }
-}), pe = /* @__PURE__ */ ae(ne, [["__scopeId", "data-v-0fdb5f8b"]]);
+}), se = /* @__PURE__ */ G(Q, [["__scopeId", "data-v-65a6a095"]]);
 export {
-  pe as default
+  se as default
 };

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

@@ -5,9 +5,9 @@ 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 { useLoginState as pe } from "../../../states/LoginState.js";
+import { getNewUserInfo as de } from "../../../states/UserState/store.js";
+import { useDeviceState as ye } from "../../../states/DeviceState/DeviceState.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({
@@ -24,14 +24,14 @@ const i = "16:9", we = /* @__PURE__ */ Q({
   },
   emits: ["stream-view-dblclick"],
   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) || {
+    const { userList: O, userListOnSeat: T, userWithScreenOn: g } = ve(), { microphoneStatus: V, cameraStatus: E } = ye(), { currentRoom: L, localRoomStatus: B } = he(), { loginUserInfo: N } = pe(), 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");
+      const e = de(((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;

package/dist/components/StreamView/index.js

@@ -1,11 +1,10 @@
-import { defineComponent as u, computed as c, createElementBlock as g, openBlock as n, Fragment as d, createBlock as r, createCommentVNode as i, withCtx as f, renderSlot as m, normalizeProps as a, guardReactiveProps as l } from "vue";
-import F from "./Layout/FloatLayout.js";
-import U from "./Layout/GridLayout.js";
-import w from "./Layout/CustomLayout.js";
-import y from "./Layout/MixLayout.js";
-import I from "./Layout/MeetingLayout.js";
-import { innerUserStore as V } from "../../states/UserState/store.js";
-const x = /* @__PURE__ */ u({
+import { defineComponent as c, computed as s, createElementBlock as u, openBlock as n, Fragment as g, createBlock as r, createCommentVNode as f, withCtx as i, renderSlot as m, normalizeProps as l, guardReactiveProps as a } from "vue";
+import { innerUserStore as d } from "../../states/UserState/store.js";
+import F from "./Layout/CustomLayout.js";
+import w from "./Layout/FloatLayout.js";
+import y from "./Layout/GridLayout.js";
+import U from "./Layout/MeetingLayout.js";
+const S = /* @__PURE__ */ c({
   __name: "index",
   props: {
     mode: { default: "grid" },
@@ -14,61 +13,54 @@ const x = /* @__PURE__ */ u({
     sortFn: { type: Function, default: () => 0 }
   },
   setup(e) {
-    const s = c(() => V.mixUserInfo);
-    return (o, k) => (n(), g(d, null, [
-      e.mode === "float" ? (n(), r(F, {
+    return s(() => d.mixUserInfo), (o, V) => (n(), u(g, null, [
+      e.mode === "float" ? (n(), r(w, {
         key: 0,
         config: e.config,
         "filter-fn": e.filterFn,
         "sort-fn": e.sortFn
       }, {
-        streamViewUI: f((t) => [
-          m(o.$slots, "streamViewUI", a(l(t)))
+        streamViewUI: i((t) => [
+          m(o.$slots, "streamViewUI", l(a(t)))
         ]),
         _: 3
-      }, 8, ["config", "filter-fn", "sort-fn"])) : i("", !0),
-      e.mode === "grid" ? (n(), r(U, {
+      }, 8, ["config", "filter-fn", "sort-fn"])) : f("", !0),
+      e.mode === "grid" ? (n(), r(y, {
         key: 1,
         config: e.config,
         "filter-fn": e.filterFn,
         "sort-fn": e.sortFn
       }, {
-        streamViewUI: f((t) => [
-          m(o.$slots, "streamViewUI", a(l(t)))
+        streamViewUI: i((t) => [
+          m(o.$slots, "streamViewUI", l(a(t)))
         ]),
         _: 3
-      }, 8, ["config", "filter-fn", "sort-fn"])) : i("", !0),
-      e.mode === "custom" ? (n(), r(w, {
+      }, 8, ["config", "filter-fn", "sort-fn"])) : f("", !0),
+      e.mode === "custom" ? (n(), r(F, {
         key: 2,
         config: e.config,
         "filter-fn": e.filterFn,
         "sort-fn": e.sortFn
       }, {
-        streamViewUI: f((t) => [
-          m(o.$slots, "streamViewUI", a(l(t)))
+        streamViewUI: i((t) => [
+          m(o.$slots, "streamViewUI", l(a(t)))
         ]),
         _: 3
-      }, 8, ["config", "filter-fn", "sort-fn"])) : i("", !0),
-      e.mode === "meeting" ? (n(), r(I, {
+      }, 8, ["config", "filter-fn", "sort-fn"])) : f("", !0),
+      e.mode === "meeting" ? (n(), r(U, {
         key: 3,
         config: e.config,
         "filter-fn": e.filterFn,
         "sort-fn": e.sortFn
       }, {
-        streamViewUI: f((t) => [
-          m(o.$slots, "streamViewUI", a(l(t)))
+        streamViewUI: i((t) => [
+          m(o.$slots, "streamViewUI", l(a(t)))
         ]),
         _: 3
-      }, 8, ["config", "filter-fn", "sort-fn"])) : i("", !0),
-      s.value ? (n(), r(y, { key: 4 }, {
-        streamViewUI: f((t) => [
-          m(o.$slots, "streamViewUI", a(l(t)))
-        ]),
-        _: 3
-      })) : i("", !0)
+      }, 8, ["config", "filter-fn", "sort-fn"])) : f("", !0)
     ], 64));
   }
 });
 export {
-  x as StreamView
+  S as StreamView
 };