tuikit-atomicx-vue3 3.3.3 → 3.4.1

package/dist/components/LiveCoreView/index.js

@@ -1,162 +1,111 @@
-import { addI18n } from "../../i18n/index.js";
-import DefaultStreamViewUI from "./DefaultStreamViewUI.js";
-import { defineComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, createBlock, toDisplayString, unref, normalizeStyle, renderSlot, Fragment, renderList, mergeProps, normalizeProps, Teleport } from "vue";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
-import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
-import { useLiveState } from "../../states/LiveState/index.js";
-import { useLoginState } from "../../states/LoginState.js";
-import { getContentSize } from "../../utils/domOperation.js";
-import PlayerControl from "./PlayerControl/PlayerControl.js";
-import { usePlayerControlState } from "./PlayerControl/PlayerControlState.js";
-import { isMobile } from "../../utils/env.js";
-import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
-import { resource } from "./i18n/en-US/index.js";
-import { resource as resource$1 } from "./i18n/zh-CN/index.js";
-const _hoisted_1 = {
+import { addI18n as G } from "../../i18n/index.js";
+import re from "./DefaultStreamViewUI.js";
+import { defineComponent as ie, useSlots as oe, computed as n, ref as p, onMounted as T, onBeforeUnmount as D, watch as P, createElementBlock as x, openBlock as v, normalizeClass as ne, createCommentVNode as w, createElementVNode as N, createBlock as M, toDisplayString as ue, unref as g, normalizeStyle as A, renderSlot as E, createVNode as se, Fragment as ve, renderList as he, mergeProps as K, normalizeProps as ce, Teleport as de } from "vue";
+import { useUIKit as fe } from "@tencentcloud/uikit-base-component-vue3";
+import { useLiveSeatState as me } from "../../states/LiveSeatState/index.js";
+import { useLiveState as pe } from "../../states/LiveState/index.js";
+import { useLoginState as we } from "../../states/LoginState.js";
+import { getContentSize as j } from "../../utils/domOperation.js";
+import q from "./PlayerControl/PlayerControl.js";
+import ge from "./CoreViewDecorate/LiveCoreDecorate.js";
+import { usePlayerControlState as ye } from "./PlayerControl/PlayerControlState.js";
+import { isMobile as Ie } from "../../utils/env.js";
+import { _ as Se } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { resource as xe } from "./i18n/en-US/index.js";
+import { resource as Ce } from "./i18n/zh-CN/index.js";
+const Le = {
   key: 0,
   class: "live-core-placeholder"
-};
-const _hoisted_2 = { class: "placeholder-text" };
-const _hoisted_3 = {
+}, Ve = { class: "placeholder-text" }, ze = {
   key: 0,
   class: "live-core-ui"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}, Me = /* @__PURE__ */ ie({
   __name: "index",
-  setup(__props) {
-    const { isFullscreen, isLandscapeStyleMode } = usePlayerControlState();
-    const { t } = useUIKit();
-    const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
-    const { currentLive } = useLiveState();
-    const slots = useSlots();
-    const isInStreamMixerComp = computed(() => slots.localVideo);
-    const { loginUserInfo } = useLoginState();
-    const isPlayedVideo = ref(false);
-    const isMounted = ref(false);
-    const isAlignCenter = computed(() => {
-      if (!isInStreamMixerComp.value && isPortraitContainer.value && widthRatio.value < heightRatio.value) {
-        return false;
-      }
-      return true;
-    });
-    const isShowPlayerControl = computed(() => {
-      var _a;
-      return ((_a = currentLive.value) == null ? void 0 : _a.liveId) && !seatList.value.some((item) => {
-        var _a2, _b;
-        return ((_a2 = item.userInfo) == null ? void 0 : _a2.userId) === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
+  setup($e) {
+    const { isFullscreen: X, isLandscapeStyleMode: Y } = ye(), { t: J } = fe(), { seatList: d, canvas: u, startPlayStream: Q, stopPlayStream: Z } = me(), { currentLive: C } = pe(), ee = oe(), L = n(() => ee.localVideo), { loginUserInfo: $ } = we(), b = p(!1), R = p(!1), te = n(() => !(!L.value && V.value && h.value < c.value)), U = n(() => {
+      var e;
+      return ((e = C.value) == null ? void 0 : e.liveId) && !d.value.some((l) => {
+        var t, a;
+        return ((t = l.userInfo) == null ? void 0 : t.userId) === ((a = $.value) == null ? void 0 : a.userId);
       });
     });
-    onMounted(async () => {
-      isMounted.value = true;
-      await startPlayStream({ view: "atomicx-live-stream-content" });
-      isPlayedVideo.value = true;
-    });
-    onBeforeUnmount(async () => {
-      isMounted.value = false;
-      await stopPlayStream();
-      isPlayedVideo.value = false;
+    T(async () => {
+      R.value = !0, await Q({ view: "atomicx-live-stream-content" }), b.value = !0;
+    }), D(async () => {
+      R.value = !1, await Z(), b.value = !1;
     });
-    const isPortraitContainer = ref(true);
-    const liveCoreViewContainerRef = ref();
-    const liveCoreViewContainerSize = ref({
+    const V = p(!0), s = p(), _ = p({
       width: 0,
       height: 0
-    });
-    const originStreamViewStyle = ref({
+    }), r = p({
       width: 0,
       height: 0,
       transformX: 0,
       transformY: 0,
       scale: 1
-    });
-    const ratioLayoutList = 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 };
+    }), k = n(() => {
+      var t;
+      const e = u.value, l = (t = d.value) == null ? void 0 : t.map((a) => {
+        var o;
+        return { userId: (o = a.userInfo) == null ? void 0 : o.userId, ...a.region };
       });
-      if (!layoutList) {
-        return [];
-      }
-      return layoutList.map((item) => ({
-        userId: item.userId,
-        x: item.x / layoutCanvas.width,
-        y: item.y / layoutCanvas.width,
-        width: item.w / layoutCanvas.width,
-        height: item.h === layoutCanvas.height ? -1 : item.h / layoutCanvas.width,
-        zOrder: item.zOrder
-      }));
-    });
-    const streamViewSize = computed(() => {
-      return {
-        width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
-        height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale
-      };
-    });
-    const seatListWithRealSize = computed(() => seatList.value.map((item, index) => {
-      var _a, _b;
-      const ratioLayout = ratioLayoutList.value[index];
-      const isPortraitAndFill = isPortraitContainer.value && fillMode.value === "fill";
-      const isSampleWithCanvas = seatList.value.length === 1 || ((_a = item.region) == null ? void 0 : _a.w) === canvas.value.width && ((_b = item.region) == null ? void 0 : _b.h) === canvas.value.height;
-      if (!isInStreamMixerComp.value && isPortraitAndFill && isSampleWithCanvas) {
-        return {
-          userInfo: item.userInfo,
-          region: {
-            position: "absolute",
-            left: "50%",
-            top: "50%",
-            width: `${liveCoreViewContainerSize.value.width}px`,
-            height: `${liveCoreViewContainerSize.value.height}px`,
-            transform: `translate(-50%, -50%)`,
-            zIndex: Number(ratioLayout.zOrder) || 0
-          }
-        };
-      }
-      return {
-        userInfo: item.userInfo,
+      return l ? l.map((a) => ({
+        userId: a.userId,
+        x: a.x / e.width,
+        y: a.y / e.width,
+        width: a.w / e.width,
+        height: a.h === e.height ? -1 : a.h / e.width,
+        zOrder: a.zOrder
+      })) : [];
+    }), y = n(() => ({
+      width: r.value.width * r.value.scale,
+      height: r.value.height * r.value.scale
+    })), z = n(() => d.value.map((e, l) => {
+      var i, H;
+      const t = k.value[l], a = V.value && I.value === "fill", o = d.value.length === 1 || ((i = e.region) == null ? void 0 : i.w) === u.value.width && ((H = e.region) == null ? void 0 : H.h) === u.value.height;
+      return !L.value && a && o ? {
+        userInfo: e.userInfo,
         region: {
           position: "absolute",
-          left: `${streamViewSize.value.width * ratioLayout.x}px`,
-          top: `${streamViewSize.value.width * ratioLayout.y}px`,
-          width: `${streamViewSize.value.width * ratioLayout.width}px`,
-          height: ratioLayout.height === -1 ? `${streamViewSize.value.height}px` : `${streamViewSize.value.width * ratioLayout.height}px`,
-          zIndex: Number(ratioLayout.zOrder) || 0
+          left: "50%",
+          top: "50%",
+          width: `${_.value.width}px`,
+          height: `${_.value.height}px`,
+          transform: "translate(-50%, -50%)",
+          zIndex: Number(t.zOrder) || 0
+        }
+      } : {
+        userInfo: e.userInfo,
+        region: {
+          position: "absolute",
+          left: `${y.value.width * t.x}px`,
+          top: `${y.value.width * t.y}px`,
+          width: `${Math.ceil(y.value.width * t.width)}px`,
+          height: t.height === -1 ? `${y.value.height}px` : `${y.value.width * t.height}px`,
+          zIndex: Number(t.zOrder) || 0
         }
       };
-    }));
-    const localStreamViewInfo = computed(() => seatListWithRealSize.value.find((item) => {
-      var _a, _b;
-      return ((_a = item == null ? void 0 : item.userInfo) == null ? void 0 : _a.userId) === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
-    }));
-    const needPlayStreamViewInfo = computed(() => {
-      if (isInStreamMixerComp.value) {
-        return seatListWithRealSize.value.filter((item) => {
-          var _a, _b;
-          return ((_a = item.userInfo) == null ? void 0 : _a.userId) !== ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
-        });
-      }
-      return seatListWithRealSize.value;
-    });
-    const visualStreamSize = computed(() => {
-      if (!isPortraitContainer.value && widthRatio.value < heightRatio.value && ratioLayoutList.value.length > 0) {
-        const absoluteLayoutList = ratioLayoutList.value.map((item) => ({
-          userId: item.userId,
-          left: originStreamViewStyle.value.width * item.x,
-          top: originStreamViewStyle.value.width * item.y,
-          width: originStreamViewStyle.value.width * item.width,
-          height: item.height === -1 ? originStreamViewStyle.value.height : originStreamViewStyle.value.width * item.height,
-          zIndex: item.zOrder
-        }));
-        const minX = Math.min(...absoluteLayoutList.map((item) => item.left));
-        const minY = Math.min(...absoluteLayoutList.map((item) => item.top));
-        const maxX = Math.max(...absoluteLayoutList.map((item) => item.left + item.width));
-        const maxY = Math.max(...absoluteLayoutList.map((item) => item.top + item.height));
+    })), ae = n(() => z.value.find((e) => {
+      var l, t;
+      return ((l = e == null ? void 0 : e.userInfo) == null ? void 0 : l.userId) === ((t = $.value) == null ? void 0 : t.userId);
+    })), O = n(() => L.value ? z.value.filter((e) => {
+      var l, t;
+      return ((l = e.userInfo) == null ? void 0 : l.userId) !== ((t = $.value) == null ? void 0 : t.userId);
+    }) : z.value), f = n(() => {
+      if (!V.value && h.value < c.value && k.value.length > 0) {
+        const e = k.value.map((i) => ({
+          userId: i.userId,
+          left: r.value.width * i.x,
+          top: r.value.width * i.y,
+          width: r.value.width * i.width,
+          height: i.height === -1 ? r.value.height : r.value.width * i.height,
+          zIndex: i.zOrder
+        })), l = Math.min(...e.map((i) => i.left)), t = Math.min(...e.map((i) => i.top)), a = Math.max(...e.map((i) => i.left + i.width)), o = Math.max(...e.map((i) => i.top + i.height));
         return {
-          width: maxX - minX,
-          height: maxY - minY,
-          centerX: (minX + maxX) / 2,
-          centerY: (minY + maxY) / 2
+          width: a - l,
+          height: o - t,
+          centerX: (l + a) / 2,
+          centerY: (t + o) / 2
         };
       }
       return {
@@ -166,201 +115,127 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         centerY: 0
       };
     });
-    watch(visualStreamSize, () => {
-      handleStreamListTransform();
+    P(f, () => {
+      W();
     });
-    function handleStreamListTransform() {
-      if (!liveCoreViewContainerRef.value) {
-        return;
-      }
-      if (visualStreamSize.value.width && visualStreamSize.value.height) {
-        const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
-        const containerWidth = Math.floor(containerRect.width);
-        const containerHeight = Math.floor(containerRect.height);
-        const scaleWidth = containerWidth / visualStreamSize.value.width;
-        const scaleHeight = containerHeight / visualStreamSize.value.height;
-        originStreamViewStyle.value.scale = Math.min(scaleWidth, scaleHeight);
-        originStreamViewStyle.value.transformX = originStreamViewStyle.value.width / 2 - visualStreamSize.value.centerX;
-        originStreamViewStyle.value.transformY = originStreamViewStyle.value.height / 2 - visualStreamSize.value.centerY;
-      } else {
-        handleStreamRegionSize();
-        originStreamViewStyle.value.scale = 1;
-        originStreamViewStyle.value.transformX = 0;
-        originStreamViewStyle.value.transformY = 0;
-      }
+    function W() {
+      if (s.value)
+        if (f.value.width && f.value.height) {
+          const e = s.value.getBoundingClientRect(), l = Math.floor(e.width), t = Math.floor(e.height), a = l / f.value.width, o = t / f.value.height;
+          r.value.scale = Math.min(a, o), r.value.transformX = r.value.width / 2 - f.value.centerX, r.value.transformY = r.value.height / 2 - f.value.centerY;
+        } else
+          S(), r.value.scale = 1, r.value.transformX = 0, r.value.transformY = 0;
     }
-    const streamViewStyle = computed(() => {
-      return {
-        width: `${Math.floor(originStreamViewStyle.value.width) * originStreamViewStyle.value.scale}px`,
-        height: `${Math.floor(originStreamViewStyle.value.height) * originStreamViewStyle.value.scale}px`,
-        transform: `translate(${originStreamViewStyle.value.transformX * originStreamViewStyle.value.scale}px, ${originStreamViewStyle.value.transformY * originStreamViewStyle.value.scale}px)`
-      };
-    });
-    const aspectRatio = computed(() => {
-      var _a, _b;
-      if (canvas.value.width && canvas.value.height) {
-        return `${canvas.value.width}:${canvas.value.height}`;
-      }
-      if (currentLive.value && ((_a = currentLive.value) == null ? void 0 : _a.layoutTemplate) >= 200 && ((_b = currentLive.value) == null ? void 0 : _b.layoutTemplate) <= 599) {
-        return "16:9";
-      }
-      return "9:16";
-    });
-    const widthRatio = computed(() => {
-      if (!aspectRatio.value || aspectRatio.value.indexOf(":") < 0) {
-        return 0;
-      }
-      return Number(aspectRatio.value.split(":")[0]);
-    });
-    const heightRatio = computed(() => {
-      if (!aspectRatio.value || aspectRatio.value.indexOf(":") < 0) {
-        return 0;
-      }
-      return Number(aspectRatio.value.split(":")[1]);
-    });
-    const fillMode = ref(
+    const le = n(() => ({
+      width: `${Math.floor(r.value.width) * r.value.scale}px`,
+      height: `${Math.floor(r.value.height) * r.value.scale}px`,
+      transform: `translate(${r.value.transformX * r.value.scale}px, ${r.value.transformY * r.value.scale}px)`
+    })), m = n(() => {
+      var e, l;
+      return u.value.width && u.value.height ? `${u.value.width}:${u.value.height}` : C.value && ((e = C.value) == null ? void 0 : e.layoutTemplate) >= 200 && ((l = C.value) == null ? void 0 : l.layoutTemplate) <= 599 ? "16:9" : "9:16";
+    }), h = n(() => !m.value || m.value.indexOf(":") < 0 ? 0 : Number(m.value.split(":")[0])), c = n(() => !m.value || m.value.indexOf(":") < 0 ? 0 : Number(m.value.split(":")[1])), I = p(
       "fit"
       /* Fit */
     );
-    watch(() => [canvas.value, seatList.value], () => {
-      if (canvas.value.width > canvas.value.height) {
-        fillMode.value = "fit";
-        handleStreamRegionSize();
+    P(() => [u.value, d.value], () => {
+      if (u.value.width > u.value.height) {
+        I.value = "fit", S();
         return;
       }
-      const onlyOneSeat = seatList.value.length === 1;
-      const hasOneFullScreenUser = seatList.value.find((item) => {
-        var _a, _b;
-        return ((_a = item.region) == null ? void 0 : _a.w) === canvas.value.width && ((_b = item.region) == null ? void 0 : _b.h) === canvas.value.height;
+      const e = d.value.length === 1, l = d.value.find((t) => {
+        var a, o;
+        return ((a = t.region) == null ? void 0 : a.w) === u.value.width && ((o = t.region) == null ? void 0 : o.h) === u.value.height;
       });
-      if (!isInStreamMixerComp.value && (onlyOneSeat || hasOneFullScreenUser)) {
-        fillMode.value = "fill";
-      } else {
-        fillMode.value = "fit";
-      }
-      handleStreamRegionSize();
-    }, { deep: true });
-    function handleStreamRegionSize() {
-      if (!liveCoreViewContainerRef.value) {
+      !L.value && (e || l) ? I.value = "fill" : I.value = "fit", S();
+    }, { deep: !0 });
+    function S() {
+      if (!s.value)
         return;
+      const e = j(s.value).width, l = j(s.value).height;
+      let t = e, a = l;
+      if (h.value && c.value) {
+        const o = e / h.value, i = l / c.value;
+        I.value === "fit" ? (o > i && (t = l / c.value * h.value, a = l), o <= i && (t = e, a = e / h.value * c.value)) : (o > i && (t = e, a = e / h.value * c.value), o <= i && (t = l / c.value * h.value, a = l));
       }
-      const containerWidth = getContentSize(liveCoreViewContainerRef.value).width;
-      const containerHeight = getContentSize(liveCoreViewContainerRef.value).height;
-      let width = containerWidth;
-      let height = containerHeight;
-      if (widthRatio.value && heightRatio.value) {
-        const scaleWidth = containerWidth / widthRatio.value;
-        const scaleHeight = containerHeight / heightRatio.value;
-        if (fillMode.value === "fit") {
-          if (scaleWidth > scaleHeight) {
-            width = containerHeight / heightRatio.value * widthRatio.value;
-            height = containerHeight;
-          }
-          if (scaleWidth <= scaleHeight) {
-            width = containerWidth;
-            height = containerWidth / widthRatio.value * heightRatio.value;
-          }
-        } else {
-          if (scaleWidth > scaleHeight) {
-            width = containerWidth;
-            height = containerWidth / widthRatio.value * heightRatio.value;
-          }
-          if (scaleWidth <= scaleHeight) {
-            width = containerHeight / heightRatio.value * widthRatio.value;
-            height = containerHeight;
-          }
-        }
-      }
-      originStreamViewStyle.value.width = width;
-      originStreamViewStyle.value.height = height;
+      r.value.width = t, r.value.height = a;
     }
-    watch(
-      () => aspectRatio.value,
+    P(
+      () => m.value,
       () => {
-        handleStreamRegionSize();
+        S();
       }
     );
-    const getContainerOrientation = () => {
-      if (!liveCoreViewContainerRef.value) {
+    const B = () => {
+      if (!s.value)
         return;
-      }
-      const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
-      isPortraitContainer.value = containerRect.width < containerRect.height;
-      liveCoreViewContainerSize.value = {
-        width: containerRect.width,
-        height: containerRect.height
+      const e = s.value.getBoundingClientRect();
+      V.value = e.width < e.height, _.value = {
+        width: e.width,
+        height: e.height
       };
-    };
-    const ro = new ResizeObserver(() => {
-      getContainerOrientation();
-      handleStreamRegionSize();
-      handleStreamListTransform();
-    });
-    onMounted(() => {
-      ro.observe(liveCoreViewContainerRef.value);
-      getContainerOrientation();
-    });
-    onBeforeUnmount(() => {
-      ro.unobserve(liveCoreViewContainerRef.value);
-    });
-    return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", {
+    }, F = new ResizeObserver(() => {
+      B(), S(), W();
+    });
+    return T(() => {
+      F.observe(s.value), B();
+    }), D(() => {
+      F.unobserve(s.value);
+    }), (e, l) => {
+      var t;
+      return v(), x("div", {
         ref_key: "liveCoreViewContainerRef",
-        ref: liveCoreViewContainerRef,
+        ref: s,
         id: "live-core-view-container",
-        class: normalizeClass(["live-core-view-container", { "align-center": isAlignCenter.value }])
+        class: ne(["live-core-view-container", { "align-center": te.value }])
       }, [
-        !_ctx.$slots.localVideo && !isPlayedVideo.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("No video")), 1)
-        ])) : createCommentVNode("", true),
-        createElementVNode("div", {
+        !e.$slots.localVideo && !b.value ? (v(), x("div", Le, [
+          N("span", Ve, ue(g(J)("No video")), 1)
+        ])) : w("", !0),
+        N("div", {
           class: "live-core-view",
-          style: normalizeStyle(streamViewStyle.value)
+          style: A(le.value)
         }, [
-          _cache[0] || (_cache[0] = createElementVNode("div", {
+          l[0] || (l[0] = N("div", {
             id: "atomicx-live-stream-content",
             class: "stream-content"
           }, null, -1)),
-          needPlayStreamViewInfo.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(needPlayStreamViewInfo.value, (item, index) => {
-              return openBlock(), createElementBlock("div", {
-                key: `seat-${index}`,
-                style: normalizeStyle(item.region)
-              }, [
-                renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, { userInfo: item.userInfo }), void 0, true),
-                !_ctx.$slots.streamViewUI ? (openBlock(), createBlock(DefaultStreamViewUI, {
-                  key: 0,
-                  streamViewInfoList: needPlayStreamViewInfo.value,
-                  userInfo: item.userInfo
-                }, null, 8, ["streamViewInfoList", "userInfo"])) : createCommentVNode("", true)
-              ], 4);
-            }), 128))
-          ])) : createCommentVNode("", true),
-          _ctx.$slots.localVideo && isMounted.value ? renderSlot(_ctx.$slots, "localVideo", normalizeProps(mergeProps({ key: 1 }, { style: (_a = localStreamViewInfo.value) == null ? void 0 : _a.region })), void 0, true) : createCommentVNode("", true)
+          O.value.length > 0 ? (v(), x("div", ze, [
+            (v(!0), x(ve, null, he(O.value, (a, o) => (v(), x("div", {
+              key: `seat-${o}`,
+              style: A(a.region)
+            }, [
+              E(e.$slots, "streamViewUI", K({ ref_for: !0 }, { userInfo: a.userInfo }), void 0, !0),
+              e.$slots.streamViewUI ? w("", !0) : (v(), M(re, {
+                key: 0,
+                streamViewInfoList: O.value,
+                userInfo: a.userInfo
+              }, null, 8, ["streamViewInfoList", "userInfo"]))
+            ], 4))), 128))
+          ])) : w("", !0),
+          e.$slots.localVideo && R.value ? E(e.$slots, "localVideo", ce(K({ key: 1 }, { style: (t = ae.value) == null ? void 0 : t.region })), void 0, !0) : w("", !0),
+          se(ge, { seatListWithRealSize: z.value }, null, 8, ["seatListWithRealSize"])
         ], 4),
-        !unref(isFullscreen) ? (openBlock(), createBlock(Teleport, {
+        g(X) ? w("", !0) : (v(), M(de, {
           key: 1,
           to: "body",
-          disabled: !unref(isMobile)
+          disabled: !g(Ie)
         }, [
-          isShowPlayerControl.value ? (openBlock(), createBlock(PlayerControl, {
+          U.value ? (v(), M(q, {
             key: 0,
-            isLandscapeStyleMode: unref(isLandscapeStyleMode)
-          }, null, 8, ["isLandscapeStyleMode"])) : createCommentVNode("", true)
-        ], 8, ["disabled"])) : createCommentVNode("", true),
-        isShowPlayerControl.value && unref(isFullscreen) ? (openBlock(), createBlock(PlayerControl, {
+            isLandscapeStyleMode: g(Y)
+          }, null, 8, ["isLandscapeStyleMode"])) : w("", !0)
+        ], 8, ["disabled"])),
+        U.value && g(X) ? (v(), M(q, {
           key: 2,
-          isLandscapeStyleMode: unref(isLandscapeStyleMode)
-        }, null, 8, ["isLandscapeStyleMode"])) : createCommentVNode("", true)
+          isLandscapeStyleMode: g(Y)
+        }, null, 8, ["isLandscapeStyleMode"])) : w("", !0)
       ], 2);
     };
   }
-});
-const LiveCoreViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4d9101b9"]]);
-addI18n("en-US", { translation: resource });
-addI18n("zh-CN", { translation: resource$1 });
+}), De = /* @__PURE__ */ Se(Me, [["__scopeId", "data-v-483e9945"]]);
+G("en-US", { translation: xe });
+G("zh-CN", { translation: Ce });
 export {
-  DefaultStreamViewUI,
-  LiveCoreViewComponent as LiveCoreView
+  re as DefaultStreamViewUI,
+  De as LiveCoreView
 };