tuikit-atomicx-vue3 3.3.4 → 3.4.1

package/dist/states/LiveSeatState/usePlayStream/RTCStreamPlayer.js

@@ -1,111 +1,73 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { TUIVideoStreamType, TRTCVideoFillMode, TRTCVideoRotation, TRTCVideoMirrorType } from "@tencentcloud/tuiroom-engine-js";
-import { useRoomEngine } from "../../../hooks/useRoomEngine.js";
-import { useLoginState } from "../../LoginState.js";
-import { useVideoMixerState } from "../../VideoMixerState.js";
-const roomEngine = useRoomEngine();
-const { loginUserInfo } = useLoginState();
-const { isVideoMixerEnabled } = useVideoMixerState();
-class RTCStreamPlayer {
-  constructor(options) {
-    __publicField(this, "userId");
-    __publicField(this, "streamType");
-    __publicField(this, "container");
-    __publicField(this, "view");
-    __publicField(this, "rect", null);
-    __publicField(this, "isVideoPlaying", false);
-    const { userId, streamType, container, rect } = options;
-    this.userId = userId;
-    this.streamType = streamType;
-    this.container = container;
-    if (rect) {
-      this.rect = rect;
-    }
-    this.createRtcStreamView();
+var y = Object.defineProperty;
+var m = (r, e, t) => e in r ? y(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var s = (r, e, t) => m(r, typeof e != "symbol" ? e + "" : e, t);
+import { TUIVideoStreamType as u, TRTCVideoFillMode as p, TRTCVideoRotation as T, TRTCVideoMirrorType as w } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as V } from "../../../hooks/useRoomEngine.js";
+import { useLoginState as v } from "../../LoginState.js";
+import { useVideoMixerState as I } from "../../VideoMixerState.js";
+const a = V(), { loginUserInfo: h } = v(), { isVideoMixerEnabled: c } = I();
+class S {
+  constructor(e) {
+    s(this, "userId");
+    s(this, "streamType");
+    s(this, "container");
+    s(this, "view");
+    s(this, "rect", null);
+    s(this, "isVideoPlaying", !1);
+    const { userId: t, streamType: i, container: n, rect: o } = e;
+    this.userId = t, this.streamType = i, this.container = n, o && (this.rect = o), this.createRtcStreamView();
   }
   createRtcStreamView() {
-    const view = document.createElement("div");
-    view.id = `rtc_stream_view_${this.userId}_${this.streamType}_${Math.floor(Math.random() * 1e6)}`;
-    view.style.position = "absolute";
-    if (this.rect) {
-      view.style.width = this.rect.width;
-      view.style.height = this.rect.height;
-      view.style.top = this.rect.top;
-      view.style.left = this.rect.left;
-      view.style.zIndex = this.rect.zIndex.toString();
-    }
-    this.container.appendChild(view);
-    this.view = view;
+    const e = document.createElement("div");
+    e.id = `rtc_stream_view_${this.userId}_${this.streamType}_${Math.floor(Math.random() * 1e6)}`, e.style.position = "absolute", this.rect && (e.style.width = this.rect.width, e.style.height = this.rect.height, e.style.top = this.rect.top, e.style.left = this.rect.left, e.style.zIndex = this.rect.zIndex.toString()), this.container.appendChild(e), this.view = e;
   }
-  updateRect(rect) {
-    console.log("RTCStreamPlayer.updateRect", rect);
-    this.rect = rect;
-    this.view.style.width = this.rect.width;
-    this.view.style.height = this.rect.height;
-    this.view.style.top = this.rect.top;
-    this.view.style.left = this.rect.left;
-    this.view.style.zIndex = this.rect.zIndex.toString();
+  updateRect(e) {
+    console.log("RTCStreamPlayer.updateRect", e), this.rect = e, this.view.style.width = this.rect.width, this.view.style.height = this.rect.height, this.view.style.top = this.rect.top, this.view.style.left = this.rect.left, this.view.style.zIndex = this.rect.zIndex.toString();
   }
   async play() {
-    var _a, _b, _c, _d, _e, _f;
-    console.log("RTCStreamPlayer.play", this.isVideoPlaying, this.view);
-    if (this.isVideoPlaying) {
-      return;
-    }
-    if (this.userId === ((_a = loginUserInfo.value) == null ? void 0 : _a.userId) && isVideoMixerEnabled.value) {
-      return;
-    }
-    if (this.userId === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId) && this.streamType === TUIVideoStreamType.kCameraStream) {
-      await ((_c = roomEngine.instance) == null ? void 0 : _c.setLocalVideoView({
-        streamType: this.streamType,
-        view: this.view.id
-      }));
-      this.isVideoPlaying = true;
-    } else {
-      await ((_d = roomEngine.instance) == null ? void 0 : _d.setRemoteVideoView({
-        userId: this.userId,
-        streamType: this.streamType,
-        view: this.view.id
-      }));
-      const trtcCloud = (_e = roomEngine.instance) == null ? void 0 : _e.getTRTCCloud();
-      await (trtcCloud == null ? void 0 : trtcCloud.setRemoteRenderParams(this.userId, this.streamType, {
-        mirrorType: TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
-        rotation: TRTCVideoRotation.TRTCVideoRotation0,
-        fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill
-      }));
-      await ((_f = roomEngine.instance) == null ? void 0 : _f.startPlayRemoteVideo({
-        userId: this.userId,
-        streamType: this.streamType
-      }));
-      this.isVideoPlaying = true;
-    }
+    var e, t, i, n, o, d;
+    if (console.log("RTCStreamPlayer.play", this.isVideoPlaying, this.view), !this.isVideoPlaying && !(this.userId === ((e = h.value) == null ? void 0 : e.userId) && c.value))
+      if (this.userId === ((t = h.value) == null ? void 0 : t.userId) && this.streamType === u.kCameraStream)
+        await ((i = a.instance) == null ? void 0 : i.setLocalVideoView({
+          streamType: this.streamType,
+          view: this.view.id
+        })), this.isVideoPlaying = !0;
+      else {
+        await ((n = a.instance) == null ? void 0 : n.setRemoteVideoView({
+          userId: this.userId,
+          streamType: this.streamType,
+          view: this.view.id
+        }));
+        const l = (o = a.instance) == null ? void 0 : o.getTRTCCloud();
+        await (l == null ? void 0 : l.setRemoteRenderParams(this.userId, this.streamType, {
+          mirrorType: w.TRTCVideoMirrorType_Disable,
+          rotation: T.TRTCVideoRotation0,
+          fillMode: p.TRTCVideoFillMode_Fill
+        })), await ((d = a.instance) == null ? void 0 : d.startPlayRemoteVideo({
+          userId: this.userId,
+          streamType: this.streamType
+        })), this.isVideoPlaying = !0;
+      }
   }
   async stop() {
-    var _a, _b, _c;
-    console.log("RTCStreamPlayer.stop");
-    if (!this.isVideoPlaying) {
-      return;
-    }
-    if (this.userId === ((_a = loginUserInfo.value) == null ? void 0 : _a.userId)) {
-      if (isVideoMixerEnabled.value) {
-        return;
-      }
-      await ((_b = roomEngine.instance) == null ? void 0 : _b.setLocalVideoView({ view: null }));
-    } else {
-      await ((_c = roomEngine.instance) == null ? void 0 : _c.stopPlayRemoteVideo({
-        userId: this.userId,
-        streamType: this.streamType
-      }));
+    var e, t, i;
+    if (console.log("RTCStreamPlayer.stop"), !!this.isVideoPlaying) {
+      if (this.userId === ((e = h.value) == null ? void 0 : e.userId)) {
+        if (c.value)
+          return;
+        await ((t = a.instance) == null ? void 0 : t.setLocalVideoView({ view: null }));
+      } else
+        await ((i = a.instance) == null ? void 0 : i.stopPlayRemoteVideo({
+          userId: this.userId,
+          streamType: this.streamType
+        }));
+      this.isVideoPlaying = !1;
     }
-    this.isVideoPlaying = false;
   }
   async destroy() {
-    await this.stop();
-    this.container.removeChild(this.view);
+    await this.stop(), this.container.removeChild(this.view);
   }
 }
 export {
-  RTCStreamPlayer as default
+  S as default
 };

package/dist/states/LiveSeatState/usePlayStream/index.js

@@ -1,111 +1,59 @@
-import { RTCStreamManager } from "./RTCStreamManager.js";
-import { MixStreamPlayer } from "./MixStreamPlayer.js";
-import { ref, watch } from "vue";
-import { useStreamPosition } from "./useStreamPostion.js";
-import TUIRoomEngine, { TUIRoomEvents } from "@tencentcloud/tuiroom-engine-js";
-import { useRoomEngine } from "../../../hooks/useRoomEngine.js";
-import { useLiveState } from "../../LiveState/index.js";
-import { LiveStatus } from "../../../types/live.js";
-import { DeviceStatus } from "../../../types/device.js";
-const roomEngine = useRoomEngine();
-const { positionList, createResizeObserver, deleteResizeObserver } = useStreamPosition();
-const { localLiveStatus } = useLiveState();
-const isNeedPlayStream = ref(false);
-const containerId = ref(null);
-const mixStreamPlayer = new MixStreamPlayer();
-const rtcStreamManager = new RTCStreamManager();
-let playContainerId = "";
-const mixUserInfo = ref(null);
-const rtcUserInfoList = ref([]);
-async function startPlayStream({ view }) {
-  var _a, _b;
-  playContainerId = view;
-  isNeedPlayStream.value = true;
-  createResizeObserver({ view });
-  if (((_a = mixUserInfo.value) == null ? void 0 : _a.userId) && ((_b = mixUserInfo.value) == null ? void 0 : _b.cameraStatus) === DeviceStatus.On) {
-    await (mixStreamPlayer == null ? void 0 : mixStreamPlayer.start({ view, userInfo: mixUserInfo.value }));
-  } else {
-    if (rtcUserInfoList.value.length > 0) {
-      await (rtcStreamManager == null ? void 0 : rtcStreamManager.start({ view, userList: rtcUserInfoList.value }));
-    }
-  }
+import { RTCStreamManager as p } from "./RTCStreamManager.js";
+import { MixStreamPlayer as m } from "./MixStreamPlayer.js";
+import { ref as i, watch as r } from "vue";
+import { useStreamPosition as I } from "./useStreamPostion.js";
+import h, { TUIRoomEvents as y } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as E } from "../../../hooks/useRoomEngine.js";
+import { useLiveState as O } from "../../LiveState/index.js";
+import { LiveStatus as R } from "../../../types/live.js";
+import { DeviceStatus as c } from "../../../types/device.js";
+const S = E(), { positionList: d, createResizeObserver: C, deleteResizeObserver: L } = I(), { localLiveStatus: U } = O(), n = i(!1), T = i(null), a = new m(), s = new p();
+let f = "";
+const l = i(null), u = i([]);
+async function V({ view: e }) {
+  var t, o;
+  f = e, n.value = !0, C({ view: e }), (t = l.value) != null && t.userId && ((o = l.value) == null ? void 0 : o.cameraStatus) === c.On ? await (a == null ? void 0 : a.start({ view: e, userInfo: l.value })) : u.value.length > 0 && await (s == null ? void 0 : s.start({ view: e, userList: u.value }));
 }
-watch(positionList, (newPositionList) => {
-  rtcUserInfoList.value.forEach((item) => {
-    if (newPositionList.find((positionItem) => positionItem.userId === item.userId)) {
-      item.rect = newPositionList.find((positionItem) => positionItem.userId === item.userId);
-    }
-  });
-  if (isNeedPlayStream.value && rtcUserInfoList.value.length > 0) {
-    rtcStreamManager.update({ userList: rtcUserInfoList.value });
-  }
+r(d, (e) => {
+  u.value.forEach((t) => {
+    e.find((o) => o.userId === t.userId) && (t.rect = e.find((o) => o.userId === t.userId));
+  }), n.value && u.value.length > 0 && s.update({ userList: u.value });
 });
-async function stopPlayStream() {
-  mixStreamPlayer == null ? void 0 : mixStreamPlayer.stop();
-  rtcStreamManager == null ? void 0 : rtcStreamManager.stop();
-  containerId.value = null;
-  isNeedPlayStream.value = false;
-  playContainerId = "";
-  deleteResizeObserver();
+async function b() {
+  a == null || a.stop(), s == null || s.stop(), T.value = null, n.value = !1, f = "", L();
 }
-function handleUserVideoStateChanged(event) {
-  const { userId, hasVideo } = event;
-  if (userId.indexOf("livekit_") === 0) {
-    mixUserInfo.value = hasVideo ? {
-      userId,
-      cameraStatus: DeviceStatus.On
-    } : null;
-  } else {
-    if (hasVideo) {
-      rtcUserInfoList.value.push({ userId, cameraStatus: DeviceStatus.On, rect: positionList.value.find((item) => item.userId === userId) });
-    } else {
-      rtcUserInfoList.value = rtcUserInfoList.value.filter((item) => item.userId !== userId);
-    }
-  }
+function w(e) {
+  const { userId: t, hasVideo: o } = e;
+  t.indexOf("livekit_") === 0 ? l.value = o ? {
+    userId: t,
+    cameraStatus: c.On
+  } : null : o ? u.value.push({ userId: t, cameraStatus: c.On, rect: d.value.find((v) => v.userId === t) }) : u.value = u.value.filter((v) => v.userId !== t);
 }
-watch(() => mixUserInfo.value, (newUserInfo) => {
-  if (!isNeedPlayStream.value) {
-    return;
-  }
-  if (newUserInfo) {
-    mixStreamPlayer.start({ view: playContainerId, userInfo: mixUserInfo.value });
-  } else {
-    mixStreamPlayer.stop();
-  }
+r(() => l.value, (e) => {
+  n.value && (e ? a.start({ view: f, userInfo: l.value }) : a.stop());
 });
-watch(
-  () => rtcUserInfoList.value.length,
-  (newUserListLength, oldUserListLength) => {
-    if (!isNeedPlayStream.value) {
-      return;
-    }
-    if (oldUserListLength === 0 && newUserListLength > 0) {
-      rtcStreamManager == null ? void 0 : rtcStreamManager.start({ view: playContainerId, userList: rtcUserInfoList.value });
-    }
-    if (oldUserListLength > 0 && newUserListLength === 0) {
-      rtcStreamManager == null ? void 0 : rtcStreamManager.stop();
-    }
+r(
+  () => u.value.length,
+  (e, t) => {
+    n.value && (t === 0 && e > 0 && (s == null || s.start({ view: f, userList: u.value })), t > 0 && e === 0 && (s == null || s.stop()));
   }
 );
-watch(
-  () => localLiveStatus.value,
-  (newLiveStatus) => {
-    if (newLiveStatus === LiveStatus.IDLE && isNeedPlayStream.value) {
-      mixUserInfo.value = null;
-      rtcUserInfoList.value = [];
-    }
+r(
+  () => U.value,
+  (e) => {
+    e === R.IDLE && n.value && (l.value = null, u.value = []);
   }
 );
-TUIRoomEngine.once("ready", () => {
-  var _a;
-  (_a = roomEngine.instance) == null ? void 0 : _a.on(TUIRoomEvents.onUserVideoStateChanged, handleUserVideoStateChanged);
+h.once("ready", () => {
+  var e;
+  (e = S.instance) == null || e.on(y.onUserVideoStateChanged, w);
 });
-function usePlayStream() {
+function q() {
   return {
-    startPlayStream,
-    stopPlayStream
+    startPlayStream: V,
+    stopPlayStream: b
   };
 }
 export {
-  usePlayStream
+  q as usePlayStream
 };

package/dist/states/LiveSeatState/usePlayStream/useStreamPostion.js

@@ -1,71 +1,59 @@
-import { ref, computed } from "vue";
-import { useSeatStore } from "../store.js";
-const { seatList, canvas } = useSeatStore();
-const containerSize = ref({
+import { ref as a, computed as s } from "vue";
+import { useSeatStore as h } from "../store.js";
+const { seatList: l, canvas: c } = h(), r = a({
   width: 0,
   height: 0
 });
-let containerId = null;
-function handleStreamContainerSize(entries) {
-  const container = document.getElementById(containerId);
-  containerSize.value.width = container.clientWidth;
-  containerSize.value.height = container.clientHeight;
+let o = null;
+function v(t) {
+  const e = document.getElementById(o);
+  r.value.width = e.clientWidth, r.value.height = e.clientHeight;
 }
-const ro = new ResizeObserver((entries) => {
-  handleStreamContainerSize();
+const d = new ResizeObserver((t) => {
+  v();
 });
-function createResizeObserver({ view }) {
-  if (view) {
-    containerId = view;
-    ro.observe(document.getElementById(containerId));
-  }
+function p({ view: t }) {
+  t && (o = t, d.observe(document.getElementById(o)));
 }
-function deleteResizeObserver() {
-  ro.unobserve(document.getElementById(containerId));
+function w() {
+  d.unobserve(document.getElementById(o));
 }
-const config = computed(() => {
-  var _a;
-  const layoutCanvas = canvas.value;
-  const layoutList = (_a = seatList.value) == null ? void 0 : _a.map((seat) => {
-    var _a2;
-    return { userId: (_a2 = seat.userInfo) == null ? void 0 : _a2.userId, ...seat.region };
+const f = s(() => {
+  var i;
+  const t = c.value, e = (i = l.value) == null ? void 0 : i.map((n) => {
+    var u;
+    return { userId: (u = n.userInfo) == null ? void 0 : u.userId, ...n.region };
   });
-  if (!layoutList) {
-    return {
-      layoutList: []
-    };
-  }
-  return {
-    layoutList: layoutList.map((item) => ({
-      userId: item.userId,
-      x: item.x / layoutCanvas.width,
-      y: item.y / layoutCanvas.width,
-      w: item.w / layoutCanvas.width,
-      h: item.h === layoutCanvas.height ? -1 : item.h / layoutCanvas.width,
-      zOrder: item.zOrder
+  return e ? {
+    layoutList: e.map((n) => ({
+      userId: n.userId,
+      x: n.x / t.width,
+      y: n.y / t.width,
+      w: n.w / t.width,
+      h: n.h === t.height ? -1 : n.h / t.width,
+      zOrder: n.zOrder
     }))
+  } : {
+    layoutList: []
   };
+}), I = s(() => {
+  const { layoutList: t } = f.value;
+  return t.map((e, i) => ({
+    userId: e.userId,
+    left: `${r.value.width * e.x}px`,
+    top: `${r.value.width * e.y}px`,
+    width: `${r.value.width * e.w}px`,
+    height: e.h === -1 ? `${r.value.height}px` : `${r.value.width * e.h}px`,
+    zIndex: e.zOrder
+  }));
 });
-const positionList = computed(() => {
-  const { layoutList } = config.value;
-  return layoutList.map((item, index) => {
-    return {
-      userId: item.userId,
-      left: `${containerSize.value.width * item.x}px`,
-      top: `${containerSize.value.width * item.y}px`,
-      width: `${containerSize.value.width * item.w}px`,
-      height: item.h === -1 ? `${containerSize.value.height}px` : `${containerSize.value.width * item.h}px`,
-      zIndex: item.zOrder
-    };
-  });
-});
-function useStreamPosition() {
+function y() {
   return {
-    positionList,
-    createResizeObserver,
-    deleteResizeObserver
+    positionList: I,
+    createResizeObserver: p,
+    deleteResizeObserver: w
   };
 }
 export {
-  useStreamPosition
+  y as useStreamPosition
 };