tuikit-atomicx-vue3 3.4.1 → 4.3.0

package/dist/components/LiveCoreView/PlayerControl/PlayerControl.js

@@ -1,168 +0,0 @@
-import $ from "./AudioControl.js";
-import { defineComponent as ee, ref as a, onMounted as te, onBeforeUnmount as oe, createBlock as p, openBlock as C, Transition as ne, withCtx as se, withDirectives as le, createElementVNode as s, normalizeClass as re, unref as o, createVNode as m, vShow as ce } from "vue";
-import { useUIKit as ae, IconPause as ue, IconPlay as ie, IconPictureInPicture as de, IconFullScreen as ve, TUIToast as me, TOAST_TYPE as fe } from "@tencentcloud/uikit-base-component-vue3";
-import { usePlayerControlState as he } from "./PlayerControlState.js";
-import pe from "./MultiResolution.js";
-import { isSafariBrowser as Ce, isFirefoxBrowser as _e } from "./utils/deviceDetection.js";
-import { isMobile as c } from "../../../utils/env.js";
-import { _ as Pe } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const ye = { class: "control-buttons" }, Ee = ["title"], Te = { class: "right-controls" }, Le = { class: "control-btn audio-control-btn" }, we = ["title"], Ie = ["title"], Me = 3e3, ge = /* @__PURE__ */ ee({
-  __name: "PlayerControl",
-  props: {
-    isLandscapeStyleMode: { type: Boolean }
-  },
-  setup(g) {
-    const {
-      isPlaying: f,
-      isFullscreen: _,
-      isPictureInPicture: P,
-      pause: b,
-      resume: S,
-      requestPictureInPicture: x,
-      exitPictureInPicture: A,
-      requestFullscreen: k,
-      exitFullscreen: F,
-      setVolume: h,
-      cleanup: V
-    } = he(), B = g, { t: l } = ae(), y = a(1), z = a(!1), n = a(), r = a(!1), u = a(null), D = () => c ? !(Ce() || _e()) : !0, R = () => {
-      f.value ? b() : S();
-    }, O = async () => {
-      let e = !1;
-      P.value ? e = await A() : e = await x(), e || me({
-        type: fe.ERROR,
-        message: l("The system does not support picture-in-picture mode")
-      });
-    }, N = () => {
-      console.log("handleFullscreen"), _.value ? F() : k();
-    }, U = async (e) => {
-      y.value = e, c && v(), await h(e);
-    }, v = () => {
-      i(), u.value = window.setTimeout(() => {
-        r.value = !1, u.value = null;
-      }, Me);
-    }, i = () => {
-      u.value && (clearTimeout(u.value), u.value = null);
-    }, E = () => {
-      i(), r.value = !0;
-    }, T = () => {
-      v();
-    }, X = () => {
-      if (!c && n.value) {
-        const { parentElement: e } = n.value;
-        e && (e.addEventListener("mouseover", E), e.addEventListener("mouseout", T));
-      }
-    }, Y = () => {
-      if (!c && n.value) {
-        const { parentElement: e } = n.value;
-        e && (e.removeEventListener("mouseover", E), e.removeEventListener("mouseout", T));
-      }
-    }, d = a(null), q = (e, t) => Math.sqrt(Math.pow(t.clientX - e.x, 2) + Math.pow(t.clientY - e.y, 2)), H = (e) => {
-      var t;
-      return ((t = n.value) == null ? void 0 : t.contains(e)) || !1;
-    }, K = (e) => {
-      const t = document.getElementById("live-core-view-container");
-      return (t == null ? void 0 : t.contains(e)) || !1;
-    }, j = () => {
-      i(), v();
-    }, G = () => {
-      r.value = !r.value, r.value && v();
-    }, L = (e) => {
-      if (e.touches.length === 1) {
-        const t = e.touches[0];
-        d.value = {
-          x: t.clientX,
-          y: t.clientY
-        };
-      }
-    }, w = (e) => {
-      if (n.value && n.value.contains(e.target)) {
-        i();
-        return;
-      }
-    }, I = (e) => {
-      if (!d.value)
-        return;
-      const t = e.changedTouches[0];
-      if (q(d.value, t) > 20) {
-        d.value = null;
-        return;
-      }
-      const M = e.target;
-      H(M) ? j() : K(M) ? G() : r.value = !1, d.value = null;
-    }, J = () => {
-      c && (document.addEventListener("touchstart", L, !0), document.addEventListener("touchmove", w, !0), document.addEventListener("touchend", I, !0));
-    }, Q = () => {
-      c && (document.removeEventListener("touchstart", L, !0), document.removeEventListener("touchmove", w, !0), document.removeEventListener("touchend", I, !0));
-    }, W = async (e) => {
-      z.value = e, e ? await h(0) : await h(y.value);
-    }, Z = () => {
-      Q(), Y(), i();
-    };
-    return te(() => {
-      J(), X();
-    }), oe(() => {
-      Z(), V();
-    }), (e, t) => (C(), p(ne, { name: "player-control" }, {
-      default: se(() => [
-        le(s("div", {
-          ref_key: "playerControlRef",
-          ref: n,
-          class: re([
-            "playback-controls",
-            o(c) ? "mobile-mode" : "pc-mode",
-            { "mobile-landscape-mode": B.isLandscapeStyleMode }
-          ])
-        }, [
-          s("div", ye, [
-            s("span", {
-              class: "control-btn play-pause-btn",
-              title: o(f) ? o(l)("Pause") : o(l)("Play"),
-              onClick: R
-            }, [
-              o(f) ? (C(), p(o(ue), {
-                key: 0,
-                size: "20"
-              })) : (C(), p(o(ie), {
-                key: 1,
-                size: "20"
-              }))
-            ], 8, Ee),
-            t[0] || (t[0] = s("div", { class: "center-controls" }, null, -1)),
-            s("div", Te, [
-              m(pe),
-              s("span", Le, [
-                m($, {
-                  class: "audio-control-icon",
-                  "icon-size": 20,
-                  "enable-volume-control": D(),
-                  onVolumeChange: U,
-                  onMutedChange: W
-                }, null, 8, ["enable-volume-control"])
-              ]),
-              s("span", {
-                class: "control-btn",
-                title: o(P) ? o(l)("Exit Picture in Picture") : o(l)("Picture in Picture"),
-                onClick: O
-              }, [
-                m(o(de), { size: "20" })
-              ], 8, we),
-              s("span", {
-                class: "control-btn fullscreen-btn",
-                title: o(_) ? o(l)("Exit Fullscreen") : o(l)("Fullscreen"),
-                onClick: N
-              }, [
-                m(o(ve), { size: "20" })
-              ], 8, Ie)
-            ])
-          ])
-        ], 2), [
-          [ce, r.value]
-        ])
-      ]),
-      _: 1
-    }));
-  }
-}), Re = /* @__PURE__ */ Pe(ge, [["__scopeId", "data-v-307287f1"]]);
-export {
-  Re as default
-};

package/dist/components/LiveCoreView/PlayerControl/PlayerControlState.js

@@ -1,267 +0,0 @@
-import { ref as m, computed as _, watch as ae } from "vue";
-import { TUIVideoQuality as E, TRTCCloud as V } from "@tencentcloud/tuiroom-engine-js";
-import { useRoomEngine as le } from "../../../hooks/useRoomEngine.js";
-import { useLiveState as oe } from "../../../states/LiveState/index.js";
-import { useLiveSeatState as se } from "../../../states/LiveSeatState/index.js";
-import { getDeviceType as re, getCurrentOrientation as R, shouldRotateToLandscapeForFullscreen as ie, hadLandscapeRotationToUndo as ce } from "./utils/deviceDetection.js";
-import { OrientationManager as F, StyleManager as I, FullscreenMode as k, FullscreenManager as D } from "./utils/fullscreenManager.js";
-import { EventListenerManager as ue, DOMElementGetter as i } from "./utils/domHelpers.js";
-import { LiveStatus as de } from "../../../types/live.js";
-var pe = /* @__PURE__ */ ((s) => (s.CONTAIN = "contain", s.COVER = "cover", s.FILL = "fill", s))(pe || {}), ve = ((s) => (s[s.R360P = E.kVideoQuality_360p] = "R360P", s[s.R540P = E.kVideoQuality_540p] = "R540P", s[s.R720P = E.kVideoQuality_720p] = "R720P", s[s.R1080P = E.kVideoQuality_1080p] = "R1080P", s))(ve || {});
-const r = m(!0), N = m(
-  "contain"
-  /* CONTAIN */
-), d = m(!1), L = m(!1), P = m(!1), g = m(1), z = m([]), v = m(), me = "[LiveCoreView]ResolutionInitialized", h = le();
-function Ve() {
-  const { localLiveStatus: s } = oe(), { canvas: f } = se(), o = new ue(), x = `player-control-${Date.now()}`, p = _(
-    () => f.value ? f.value.width > f.value.height : !1
-  ), S = _(
-    () => f.value ? f.value.width < f.value.height : !1
-  ), c = re(), u = async (e, n, a) => {
-    try {
-      return await e();
-    } catch (t) {
-      return console.error(`${n} operation failed:`, t), a;
-    }
-  }, b = () => {
-    const e = i.getVideoElement();
-    if (e) {
-      const n = e.volume;
-      Math.abs(g.value - n) > 0.01 && (console.log(`Syncing volume state: ${g.value} -> ${n}`), g.value = n);
-    }
-  }, y = () => {
-    const e = i.getVideoElement();
-    if (e) {
-      const n = !e.paused && !e.ended;
-      r.value !== n && (console.log(`Syncing playing state: ${r.value} -> ${n}`), r.value = n);
-    }
-  }, M = async () => u(async () => {
-    const e = i.getVideoElement();
-    if (!e)
-      throw new Error("Video element not found");
-    return i.hasTcPlayerElement() ? await e.play() : V.subCloudMap.forEach((a) => {
-      const t = a == null ? void 0 : a._trtc;
-      t == null || t.callExperimentalAPI("resumeRemotePlayer", { userId: "*" });
-    }), r.value = !0, console.log("Video playback resumed"), !0;
-  }, "Resume playback", !1), Q = async () => u(async () => {
-    const e = i.getVideoElement();
-    if (!e)
-      throw new Error("Video element not found");
-    return i.hasTcPlayerElement() ? await e.pause() : V.subCloudMap.forEach((a) => {
-      const t = a == null ? void 0 : a._trtc;
-      t == null || t.callExperimentalAPI("pauseRemotePlayer", { userId: "*" });
-    }), r.value = !1, console.log("Video playback paused"), !0;
-  }, "Pause playback", !1), U = (e) => {
-    if (!d.value || !p.value)
-      return;
-    const n = i.getAllElements();
-    if (!n.view) {
-      console.warn("live-core-view element not found for orientation change handling");
-      return;
-    }
-    console.log("Handling orientation change:", {
-      newOrientation: e,
-      deviceType: c,
-      isLandscapeStream: p.value,
-      isFullscreen: d.value
-    }), I.smartApplyLandscapeStyles(n.view, e);
-  }, G = async () => u(async () => {
-    const e = i.getAllElements(), n = i.validateElements(e);
-    if (!n.isValid)
-      throw new Error(`Missing required DOM elements: ${n.missingElements.join(", ")}`);
-    const a = R(), t = ie(c, p.value);
-    console.log("Request fullscreen:", {
-      deviceType: c,
-      currentOrientation: a,
-      streamType: p.value ? "landscape stream" : S.value ? "portrait stream" : "unknown",
-      shouldRotate: t,
-      reason: t ? "Mobile device in portrait with landscape stream" : a === "landscape" ? "Already in landscape orientation" : p.value ? "Desktop device or other reason" : "Not a landscape stream"
-    });
-    const l = await D.requestFullscreen(
-      e.container,
-      e.view,
-      c,
-      S.value,
-      t
-    );
-    return l.success ? (d.value = !0, console.log(`Fullscreen request successful (${l.mode})`)) : console.error("Fullscreen request failed:", l.error), L.value = l.shouldRotateToLandscape, l;
-  }, "Request fullscreen", { success: !1, mode: k.CSS_SIMULATED, shouldRotateToLandscape: !1 }), T = async () => u(async () => {
-    const e = i.getAllElements();
-    if (!e.view)
-      throw new Error("live-core-view element not found");
-    const n = R(), a = ce(c, p.value);
-    console.log("Exit fullscreen:", {
-      deviceType: c,
-      currentOrientation: n,
-      streamType: p.value ? "landscape stream" : S.value ? "portrait stream" : "unknown",
-      hadLandscapeRotation: a,
-      reason: a ? "Mobile device with landscape stream in landscape mode" : n === "portrait" ? "Already in portrait orientation" : p.value ? "Desktop device or other reason" : "Not a landscape stream"
-    });
-    const t = await D.exitFullscreen(
-      e.view,
-      c,
-      a
-    );
-    return t.mode === k.CSS_SIMULATED && (d.value = !1), t.success ? console.log(`Fullscreen exit successful (${t.mode})`) : console.error("Fullscreen exit failed:", t.error), L.value = !1, t;
-  }, "Exit fullscreen", { success: !1, mode: k.CSS_SIMULATED, shouldRotateToLandscape: !1 }), H = async () => u(async () => {
-    const e = i.getVideoElement();
-    if (!e)
-      throw new Error("Video element not found");
-    if (!e.requestPictureInPicture)
-      throw new Error("Picture-in-picture not supported in current environment");
-    return C(), await e.requestPictureInPicture(), console.log("Picture-in-picture request successful"), !0;
-  }, "Request picture-in-picture", !1), A = async () => u(async () => {
-    if (!document.exitPictureInPicture)
-      throw new Error("Exit picture-in-picture not supported in current environment");
-    return await document.exitPictureInPicture(), console.log("Picture-in-picture exit successful"), !0;
-  }, "Exit picture-in-picture", !1), $ = async (e) => u(async () => {
-    if (!h.instance)
-      throw new Error("Room engine instance not available");
-    return await h.instance.callExperimentalAPI(
-      JSON.stringify({
-        api: "switchPlaybackQuality",
-        params: {
-          quality: e,
-          autoSwitch: !1
-        }
-      })
-    ), r.value || (r.value = !0), v.value = e, console.log(`Resolution switched to: ${e}`), !0;
-  }, "Switch resolution", !1), O = async (e) => u(async () => {
-    if (!h.instance)
-      throw new Error("Room engine instance not available");
-    const n = await h.instance.callExperimentalAPI(
-      JSON.stringify({
-        api: "queryPlaybackQualityList",
-        params: {
-          roomId: e
-        }
-      })
-    );
-    return console.log(`Retrieved resolution list for room ${e}:`, n), n || [];
-  }, "Get resolution list", []), J = async (e, n = !0) => {
-    try {
-      const a = `${me}_${e}`, t = localStorage.getItem(a) === "true", l = await O(e);
-      if (z.value = l, l.length === 0) {
-        console.warn("No resolutions available for room:", e);
-        return;
-      }
-      (!v.value || !l.includes(v.value)) && (v.value = l[0]);
-      const w = n && !t && v.value !== void 0;
-      w && (await $(v.value), localStorage.setItem(a, "true")), console.log(`Resolution initialized for room ${e}:`, {
-        availableResolutions: l,
-        currentResolution: v.value,
-        applied: w,
-        hasInitialized: t
-      });
-    } catch (a) {
-      console.error("Failed to initialize resolution:", a);
-    }
-  }, j = async (e) => u(async () => {
-    var a;
-    if (e < 0 || e > 1)
-      throw new Error("Volume value must be between 0-1");
-    const n = V.subCloudMap;
-    return e === 0 ? n.forEach((t) => {
-      const l = t == null ? void 0 : t._trtc;
-      l == null || l.muteRemoteAudio("*", !0);
-    }) : n.forEach((t) => {
-      const l = t == null ? void 0 : t._trtc;
-      l == null || l.muteRemoteAudio("*", !1);
-    }), (a = h.instance) == null || a.setAudioPlayoutVolume({ volume: e * 100 }), g.value = e, console.log(`Video volume set to: ${e}`), !0;
-  }, "Set volume", !1), K = async (e) => u(async () => (N.value = e, console.log(`Fill mode changed to: ${e}`), !0), "Change fill mode", !1), q = () => {
-    try {
-      const e = i.getAllElements();
-      if (!e.view) {
-        console.warn("live-core-view element not found for fullscreen exit cleanup");
-        return;
-      }
-      console.log("Executing fullscreen exit style cleanup:", {
-        deviceType: c,
-        hasLandscapeStream: p.value,
-        currentOrientation: R()
-      }), I.removeFullscreenStyles(e.view), I.removeLandscapeStyles(e.view), c !== "desktop" && F.unlockOrientation().catch((n) => {
-        console.warn("Failed to unlock orientation during cleanup:", n);
-      }), L.value = !1, console.log("Fullscreen exit style cleanup completed");
-    } catch (e) {
-      console.error("Fullscreen exit style cleanup failed:", e);
-    }
-  }, X = () => {
-    const e = () => {
-      const a = !!document.fullscreenElement, t = d.value;
-      console.log("Fullscreen state change:", {
-        fullscreenElement: document.fullscreenElement,
-        isCurrentlyFullscreen: a,
-        previousValue: t,
-        deviceType: c,
-        changeType: a ? "entered" : "exited"
-      }), d.value = a, t && !a && (console.log("Detected passive fullscreen exit, executing style cleanup"), q());
-    };
-    o.addListener("fullscreenchange", document, "fullscreenchange", e), o.addListener("webkitfullscreenchange", document, "webkitfullscreenchange", e), o.addListener("mozfullscreenchange", document, "mozfullscreenchange", e), o.addListener("MSFullscreenChange", document, "MSFullscreenChange", e);
-    const n = () => {
-      document.visibilityState === "visible" && d.value && (document.fullscreenElement || (console.log("Detected fullscreen state inconsistency via visibilitychange, executing cleanup"), d.value = !1, q()));
-    };
-    o.addListener("visibilitychange", document, "visibilitychange", n);
-  }, C = () => {
-    const e = i.getVideoElement();
-    if (!e) return;
-    const n = () => {
-      console.log("Entered picture-in-picture mode"), P.value = !0;
-    }, a = () => {
-      console.log("Left picture-in-picture mode"), P.value = !1, setTimeout(M, 300);
-    }, t = () => {
-      console.log("Video play event detected"), r.value = !0;
-    }, l = () => {
-      console.log("Video pause event detected"), r.value = !1;
-    }, w = () => {
-      console.log("Video ended event detected"), r.value = !1;
-    }, B = () => {
-      console.log("Video load start event detected"), r.value = !e.paused;
-    }, W = () => {
-      console.log("Video can play event detected"), r.value = !e.paused;
-    }, Y = () => {
-      console.log("Video seeking event detected"), y();
-    }, ee = () => {
-      console.log("Video seeked event detected"), y();
-    }, te = () => {
-      Math.random() < 0.1 && y();
-    }, ne = () => {
-      console.log("Video volume change event detected"), y(), b();
-    };
-    o.addListener("enterpictureinpicture", e, "enterpictureinpicture", n), o.addListener("leavepictureinpicture", e, "leavepictureinpicture", a), o.addListener("play", e, "play", t), o.addListener("pause", e, "pause", l), o.addListener("ended", e, "ended", w), o.addListener("loadstart", e, "loadstart", B), o.addListener("canplay", e, "canplay", W), o.addListener("seeking", e, "seeking", Y), o.addListener("seeked", e, "seeked", ee), o.addListener("timeupdate", e, "timeupdate", te), o.addListener("volumechange", e, "volumechange", ne);
-  }, Z = () => {
-    console.log("Cleaning up player control state..."), F.removeOrientationListener(x), o.removeAllListeners(), console.log(`Cleaned up ${o.getListenerCount()} event listeners`);
-  };
-  return X(), C(), F.addOrientationListener(x, U), y(), b(), ae(s, (e) => {
-    e === de.Ended && (T(), A(), r.value = !0, d.value = !1, P.value = !1, g.value = 1);
-  }), {
-    // State
-    isPlaying: r,
-    currentFillMode: N,
-    isFullscreen: d,
-    isLandscapeStyleMode: L,
-    isPictureInPicture: P,
-    currentVolume: g,
-    // Resolution state
-    resolutionList: z,
-    currentResolution: v,
-    // Methods
-    resume: M,
-    pause: Q,
-    requestFullscreen: G,
-    exitFullscreen: T,
-    requestPictureInPicture: H,
-    exitPictureInPicture: A,
-    switchResolution: $,
-    getResolutionList: O,
-    initializeResolution: J,
-    setVolume: j,
-    changeFillMode: K,
-    // Cleanup
-    cleanup: Z
-  };
-}
-export {
-  pe as FillMode,
-  ve as Resolution,
-  Ve as usePlayerControlState
-};

package/dist/components/LiveCoreView/PlayerControl/utils/domHelpers.js

@@ -1,99 +0,0 @@
-var E = Object.defineProperty;
-var c = (i, e, t) => e in i ? E(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var l = (i, e, t) => c(i, typeof e != "symbol" ? e + "" : e, t);
-const n = {
-  LIVE_CORE_VIEW_CONTAINER: ".live-core-view-container",
-  LIVE_CORE_VIEW: ".live-core-view",
-  VIDEO_ELEMENT: "#atomicx-live-stream-content video",
-  TCPLAYER_ELEMENT: ".tcplayer"
-};
-class r {
-  /**
-   * Get live-core-view-container element
-   */
-  static getLiveCoreViewContainer() {
-    return document.querySelector(n.LIVE_CORE_VIEW_CONTAINER);
-  }
-  /**
-   * Get live-core-view element
-   */
-  static getLiveCoreView() {
-    return document.querySelector(n.LIVE_CORE_VIEW);
-  }
-  /**
-   * Get video element
-   */
-  static getVideoElement() {
-    return document.querySelector(n.VIDEO_ELEMENT);
-  }
-  /**
-   * Get all required DOM elements
-   */
-  static getAllElements() {
-    return {
-      container: r.getLiveCoreViewContainer(),
-      view: r.getLiveCoreView(),
-      video: r.getVideoElement()
-    };
-  }
-  /**
-   * Check if tcplayer element exists in live-core-view-container
-   */
-  static hasTcPlayerElement() {
-    const e = r.getLiveCoreViewContainer();
-    return e ? e.querySelector(n.TCPLAYER_ELEMENT) !== null : !1;
-  }
-  /**
-   * Get tcplayer element from live-core-view-container
-   */
-  static getTcPlayerElement() {
-    const e = r.getLiveCoreViewContainer();
-    return e ? e.querySelector(n.TCPLAYER_ELEMENT) : null;
-  }
-  /**
-   * Validate if elements exist
-   */
-  static validateElements(e) {
-    const t = [];
-    return e.container === null && t.push("live-core-view-container"), e.view === null && t.push("live-core-view"), e.video === null && t.push("video"), {
-      isValid: t.length === 0,
-      missingElements: t
-    };
-  }
-}
-class v {
-  constructor() {
-    l(this, "listeners", /* @__PURE__ */ new Map());
-  }
-  /**
-   * Add event listener
-   */
-  addListener(e, t, s, o) {
-    this.removeListener(e), t.addEventListener(s, o), this.listeners.set(e, { element: t, event: s, handler: o });
-  }
-  /**
-   * Remove specified event listener
-   */
-  removeListener(e) {
-    const t = this.listeners.get(e);
-    t && (t.element.removeEventListener(t.event, t.handler), this.listeners.delete(e));
-  }
-  /**
-   * Remove all event listeners
-   */
-  removeAllListeners() {
-    for (const [e] of this.listeners)
-      this.removeListener(e);
-  }
-  /**
-   * Get current listener count
-   */
-  getListenerCount() {
-    return this.listeners.size;
-  }
-}
-export {
-  r as DOMElementGetter,
-  n as DOM_SELECTORS,
-  v as EventListenerManager
-};

package/dist/components/LiveCoreView/index.d.ts

@@ -1,4 +0,0 @@
-import { default as DefaultStreamViewUI } from './DefaultStreamViewUI.vue';
-import { default as LiveCoreView } from './index.vue';
-
-export { LiveCoreView, DefaultStreamViewUI };

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

@@ -1,89 +0,0 @@
-import { defineComponent as I, ref as S, computed as y, reactive as C, watch as k, onMounted as T, onBeforeUnmount as $, createElementBlock as i, openBlock as u, createBlock as w, createCommentVNode as L, unref as s, withCtx as h, renderSlot as U, normalizeProps as b, guardReactiveProps as P, createElementVNode as z, Fragment as R, renderList as V, normalizeStyle as F, createVNode as B } from "vue";
-import { TUIVideoStreamType as E } from "@tencentcloud/tuiroom-engine-js";
-import { useLiveState as M } from "../../../states/LiveState/index.js";
-import N from "../common/StreamRegion/StreamRegionPC.js";
-import O from "../common/StreamCover/index.js";
-import { innerUserStore as c } from "../../../states/UserState/store.js";
-import { _ as H } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const W = { class: "mix-layout-container" }, A = /* @__PURE__ */ I({
-  __name: "MixLayout",
-  props: {
-    config: {},
-    filterFn: { type: Function },
-    sortFn: { type: Function }
-  },
-  setup(j) {
-    const { currentLive: a } = M(), r = S(), x = y(() => a.value && a.value.layoutTemplateParams.canvas ? `${a.value.layoutTemplateParams.canvas.width}:${a.value.layoutTemplateParams.canvas.height}` : "16:9"), l = y(() => a.value && a.value.layoutTemplateParams.layoutList ? a.value.layoutTemplateParams.layoutList : []), n = C({});
-    k(() => l.value.length, () => {
-      p();
-    }, { deep: !0 });
-    const m = new ResizeObserver(() => {
-      r.value && p();
-    });
-    T(() => {
-      r.value && m.observe(r.value);
-    }), $(() => {
-      r.value && m.unobserve(r.value);
-    });
-    function p() {
-      l.value.forEach((e) => {
-        v(e);
-      });
-    }
-    function v(e) {
-      var f, d;
-      const o = `${e.userId}-${e.streamType}`;
-      if (!r.value) {
-        n[o] = {};
-        return;
-      }
-      const t = (f = r.value) == null ? void 0 : f.clientWidth, g = (d = r.value) == null ? void 0 : d.clientHeight;
-      n[o] = {
-        left: t * e.x + "px",
-        top: t * e.y + "px",
-        width: t * e.width + "px",
-        height: e.height === -1 ? g + "px" : t * e.height + "px",
-        zIndex: e.zOrder,
-        backgroundColor: e.backgroundColor
-      };
-    }
-    function _(e) {
-      const o = `${e.userId}-${e.streamType}`;
-      return n[o] || v(e), n[o];
-    }
-    return (e, o) => (u(), i("div", W, [
-      s(c).mixUserInfo ? (u(), w(s(N), {
-        key: 0,
-        "user-info": s(c).mixUserInfo,
-        "stream-type": s(E).kCameraStream,
-        "aspect-ratio": x.value
-      }, {
-        "stream-cover": h(() => [
-          z("div", {
-            class: "mix-stream-cover",
-            ref_key: "streamCoverRef",
-            ref: r
-          }, [
-            (u(!0), i(R, null, V(l.value, (t) => (u(), i("div", {
-              class: "mix-stream-cover-item",
-              key: `${t.userId}-${t.streamType}`,
-              style: F(_(t))
-            }, [
-              B(O, {
-                "user-info": s(c).getUserInfo({ userId: t.userId }),
-                "stream-type": t.streamType
-              }, null, 8, ["user-info", "stream-type"])
-            ], 4))), 128))
-          ], 512)
-        ]),
-        streamViewUI: h((t) => [
-          U(e.$slots, "streamViewUI", b(P(t)), void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["user-info", "stream-type", "aspect-ratio"])) : L("", !0)
-    ]));
-  }
-}), Y = /* @__PURE__ */ H(A, [["__scopeId", "data-v-526bec15"]]);
-export {
-  Y as default
-};

package/dist/components/StreamView/Layout/MixLayout.vue.d.ts

@@ -1,31 +0,0 @@
-import { UserInfo } from '../../../types';
-import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
-
-interface Props {
-    config?: string;
-    filterFn?: (userInfo: UserInfo, index: number) => boolean;
-    sortFn?: (userInfoA: UserInfo, userInfoB: UserInfo) => number;
-}
-declare function __VLS_template(): {
-    streamViewUI?(_: {
-        userInfo: UserInfo;
-        streamType: TUIVideoStreamType;
-    }): any;
-};
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};