tuikit-atomicx-vue3 3.3.4 → 3.4.1

package/dist/components/LiveCoreView/CoreViewDecorate/BattleUserDecorate.js

@@ -0,0 +1,66 @@
+import { defineComponent as I, ref as S, computed as m, onMounted as U, onUnmounted as V, createElementBlock as n, createCommentVNode as B, openBlock as s, Fragment as D, renderList as C, normalizeStyle as G, createElementVNode as i, normalizeClass as M, unref as p, toDisplayString as w } from "vue";
+import { useBattleState as T } from "../../../states/BattleState.js";
+import { useLiveState as Z } from "../../../states/LiveState/index.js";
+import { TUILiveBattleManagerEvents as c } from "@tencentcloud/tuiroom-engine-js";
+import { CoHostLayoutTemplate as y } from "../../../types/coHost.js";
+import { _ as k } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const z = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_18421_20177)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%200.70166L14.9282%204.52622V12.1753L8%2015.9999L1.0718%2012.1753V4.52622L8%200.70166Z'%20fill='%23EF6428'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%200L14.9282%203.82456V11.4737L8%2015.2982L1.0718%2011.4737V3.82456L8%200Z'%20fill='url(%23paint0_linear_18421_20177)'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.99957%201.69971L13.3882%204.67437V10.6237L7.99957%2013.5983L2.61096%2010.6237V4.67437L7.99957%201.69971Z'%20fill='%23FFD37A'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_18421_20177'%20x1='0'%20y1='0'%20x2='0'%20y2='15.2982'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FFAE5F'/%3e%3cstop%20offset='1'%20stop-color='%23FF8C3C'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_18421_20177'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", O = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_18421_20178)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%200.69458L14.9282%204.48401V12.0629L8%2015.8523L1.0718%2012.0629V4.48401L8%200.69458Z'%20fill='%237D9AC6'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%200L14.9282%203.78943V11.3683L8%2015.1577L1.0718%2011.3683V3.78943L8%200Z'%20fill='url(%23paint0_linear_18421_20178)'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.99957%201.68311L13.3882%204.63044V10.5251L7.99957%2013.4724L2.61096%2010.5251V4.63044L7.99957%201.68311Z'%20fill='url(%23paint1_linear_18421_20178)'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_18421_20178'%20x1='0'%20y1='0'%20x2='0'%20y2='15.1577'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23E6F1FE'/%3e%3cstop%20offset='1'%20stop-color='%23B7C6E2'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_18421_20178'%20x1='1.77734'%20y1='1.68311'%20x2='1.77734'%20y2='13.4724'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EDF6FF'/%3e%3cstop%20offset='1'%20stop-color='%23E1F0FF'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_18421_20178'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", P = {
+  key: 0,
+  class: "battle-user-decorate-container"
+}, A = {
+  key: 0,
+  class: "battle-decorate"
+}, H = ["src"], R = { class: "battle-level" }, W = { class: "battle-score-value" }, N = /* @__PURE__ */ I({
+  __name: "BattleUserDecorate",
+  props: {
+    seatListWithRealSize: {}
+  },
+  setup(f) {
+    const b = f, { currentLive: v } = Z(), { battleUsers: F, battleScore: d, subscribeEvent: h, unsubscribeEvent: _ } = T(), u = S(!1), x = m(() => {
+      var o, l;
+      const t = ((o = v.value) == null ? void 0 : o.layoutTemplate) === y.HostDynamicGrid && F.value.length > 2, r = ((l = v.value) == null ? void 0 : l.layoutTemplate) === y.HostDynamic1v6, e = t || r;
+      return b.seatListWithRealSize.length > 0 && u.value && e;
+    }), E = m(() => [...d.value.values()].sort((t, r) => r - t));
+    function a(t) {
+      return E.value.indexOf(d.value.get(t) || 0) + 1;
+    }
+    function g() {
+      u.value = !0;
+    }
+    function L() {
+      setTimeout(() => {
+        u.value = !1;
+      }, 5e3);
+    }
+    return U(() => {
+      h(c.onBattleStarted, g), h(c.onBattleEnded, L);
+    }), V(() => {
+      _(c.onBattleStarted, g), _(c.onBattleEnded, L);
+    }), (t, r) => x.value ? (s(), n("div", P, [
+      (s(!0), n(D, null, C(f.seatListWithRealSize, (e, o) => {
+        var l;
+        return s(), n("div", {
+          key: `seat-${o}`,
+          style: G(e.region)
+        }, [
+          a(e.userInfo.userId) > 0 ? (s(), n("div", A, [
+            i("div", {
+              class: M(["battle-badge-container", a(e.userInfo.userId) === 1 ? "top-badge" : "ordinary-badge"])
+            }, [
+              i("img", {
+                src: a(e.userInfo.userId) === 1 ? p(z) : p(O),
+                alt: "battle-badge",
+                class: "battle-badge"
+              }, null, 8, H),
+              i("span", R, w(a(e.userInfo.userId)), 1)
+            ], 2),
+            i("span", W, w(((l = p(d)) == null ? void 0 : l.get(e.userInfo.userId)) || 0), 1)
+          ])) : B("", !0)
+        ], 4);
+      }), 128))
+    ])) : B("", !0);
+  }
+}), X = /* @__PURE__ */ k(N, [["__scopeId", "data-v-643ef0a9"]]);
+export {
+  X as default
+};

package/dist/components/LiveCoreView/CoreViewDecorate/BattleUserDecorate.vue.d.ts

@@ -0,0 +1,35 @@
+import { SeatUserInfo } from '../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    seatListWithRealSize: Array<{
+        userInfo: SeatUserInfo;
+        region: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+        };
+    }>;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    seatListWithRealSize: Array<{
+        userInfo: SeatUserInfo;
+        region: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+        };
+    }>;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+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;
+    };
+};

package/dist/components/LiveCoreView/CoreViewDecorate/CoHostDecorate.js

@@ -0,0 +1,54 @@
+import { defineComponent as D, ref as d, onUnmounted as S, watch as C, computed as I, createElementBlock as H, createCommentVNode as T, unref as e, openBlock as g, createElementVNode as r, createVNode as w, toDisplayString as f } from "vue";
+import { useUIKit as B, IconChevronRight as k } from "@tencentcloud/uikit-base-component-vue3";
+import { useBattleState as x } from "../../../states/BattleState.js";
+import { convertSecondsToHMS as N } from "../../../utils/utils.js";
+import { useCoHostState as y } from "../../../states/CoHostState/CoHostState.js";
+import { CoHostStatus as u } from "../../../types/coHost.js";
+import { _ as E } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const M = {
+  key: 0,
+  class: "co-host-decorate"
+}, U = { class: "co-host-decorate-content" }, V = { class: "co-host-status" }, $ = { class: "co-host-time" }, b = /* @__PURE__ */ D({
+  __name: "CoHostDecorate",
+  setup(z) {
+    const { coHostStatus: m } = y(), { currentBattleInfo: p } = x(), { t: _ } = B(), o = d(0), a = d(Date.now());
+    let n = null;
+    S(() => {
+      i();
+    });
+    function v() {
+      i(), n = setInterval(() => {
+        a.value = Date.now();
+      }, 1e3);
+    }
+    function i() {
+      n && (clearInterval(n), n = null);
+    }
+    C(m, (t) => {
+      t === u.Connected && (o.value = Date.now(), a.value = Date.now(), v()), t === u.Disconnected && (o.value = 0, i());
+    }, { immediate: !0 });
+    function l(t) {
+      return t.toString().padStart(2, "0");
+    }
+    const h = I(() => {
+      if (o.value === 0)
+        return "00:00";
+      const t = Math.floor((a.value - o.value) / 1e3), { minutes: s, seconds: c } = N(t);
+      return `${l(s)}:${l(c)}`;
+    });
+    return (t, s) => {
+      var c;
+      return e(m) === e(u).Connected && !((c = e(p)) != null && c.battleId) ? (g(), H("div", M, [
+        s[0] || (s[0] = r("div", { class: "co-host-decorate-container" }, null, -1)),
+        r("div", U, [
+          r("span", V, f(e(_)("co-Hosting")), 1),
+          r("span", $, f(h.value), 1),
+          w(e(k), { size: "10" })
+        ])
+      ])) : T("", !0);
+    };
+  }
+}), J = /* @__PURE__ */ E(b, [["__scopeId", "data-v-d6dae3fa"]]);
+export {
+  J as default
+};

package/dist/components/LiveCoreView/CoreViewDecorate/CoHostDecorate.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/LiveCoreView/CoreViewDecorate/LiveCoreDecorate.js

@@ -0,0 +1,35 @@
+import { defineComponent as d, ref as v, watch as f, computed as a, createElementBlock as o, openBlock as n, Fragment as L, createCommentVNode as u, createVNode as p, normalizeStyle as g } from "vue";
+import x from "./BattleDecorate.js";
+import _ from "./BattleUserDecorate.js";
+import { _ as z } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const S = {
+  key: 0,
+  class: "live-core-decorate"
+}, W = /* @__PURE__ */ d({
+  __name: "LiveCoreDecorate",
+  props: {
+    seatListWithRealSize: {}
+  },
+  setup(s) {
+    const r = s, i = v(!1);
+    f(() => r.seatListWithRealSize, (e) => {
+      e.length > 0 && (i.value = !0);
+    });
+    const l = a(() => r.seatListWithRealSize.reduce((e, t) => Math.min(e, parseInt(t.region.top)), 1 / 0)), c = a(() => r.seatListWithRealSize.reduce((e, t) => Math.min(e, parseInt(t.region.left)), 1 / 0)), h = a(() => r.seatListWithRealSize.reduce((e, t) => Math.max(e, parseInt(t.region.top) + parseInt(t.region.height) - l.value), 0)), m = a(() => r.seatListWithRealSize.reduce((e, t) => Math.max(e, parseInt(t.region.left) + parseInt(t.region.width) - c.value), 0));
+    return (e, t) => (n(), o(L, null, [
+      i.value ? (n(), o("div", S, [
+        p(_, { seatListWithRealSize: s.seatListWithRealSize }, null, 8, ["seatListWithRealSize"])
+      ])) : u("", !0),
+      i.value ? (n(), o("div", {
+        key: 1,
+        class: "live-core-decorate-cover-stream",
+        style: g({ top: `${l.value}px`, height: `${h.value}px`, left: `${c.value}px`, width: `${m.value}px` })
+      }, [
+        p(x)
+      ], 4)) : u("", !0)
+    ], 64));
+  }
+}), D = /* @__PURE__ */ z(W, [["__scopeId", "data-v-bd899db7"]]);
+export {
+  D as default
+};

package/dist/components/LiveCoreView/CoreViewDecorate/LiveCoreDecorate.vue.d.ts

@@ -0,0 +1,35 @@
+import { SeatUserInfo } from '../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    seatListWithRealSize: Array<{
+        userInfo: SeatUserInfo;
+        region: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+        };
+    }>;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    seatListWithRealSize: Array<{
+        userInfo: SeatUserInfo;
+        region: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+        };
+    }>;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+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;
+    };
+};

package/dist/components/LiveCoreView/DefaultStreamViewUI.js

@@ -1,177 +1,124 @@
-import { defineComponent, ref, computed, watch, nextTick, onUnmounted, createElementBlock, openBlock, createCommentVNode, Fragment, createVNode, unref, createBlock, createElementVNode, toDisplayString } from "vue";
-import { useCoGuestState } from "../../states/CoGuestState.js";
-import Avatar from "../Avatar/Avatar.js";
-import AudioIcon from "../../baseComp/AudioIcon.js";
-import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
-import { DeviceStatus } from "../../types/device.js";
-import { CoGuestStatus } from "../../types/coGuest.js";
-import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = { class: "stream-cover" };
-const _hoisted_2 = {
+import { defineComponent as U, ref as O, computed as u, watch as R, nextTick as N, onUnmounted as W, createElementBlock as r, openBlock as o, createCommentVNode as v, Fragment as B, createVNode as D, unref as l, createBlock as M, createElementVNode as E, toDisplayString as p } from "vue";
+import { useCoGuestState as G } from "../../states/CoGuestState.js";
+import w from "../Avatar/Avatar.js";
+import F from "../../baseComp/AudioIcon.js";
+import { useLiveSeatState as H } from "../../states/LiveSeatState/index.js";
+import { useUIKit as K } from "@tencentcloud/uikit-base-component-vue3";
+import { DeviceStatus as k } from "../../types/device.js";
+import { CoGuestStatus as T } from "../../types/coGuest.js";
+import { _ as j } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const q = { class: "stream-cover" }, J = {
   key: 0,
   class: "no-video-container"
-};
-const _hoisted_3 = {
+}, P = {
   key: 1,
   class: "mask"
-};
-const _hoisted_4 = {
+}, Q = {
   key: 1,
   class: "user-details"
-};
-const _hoisted_5 = { class: "username" };
-const _hoisted_6 = {
+}, X = { class: "username" }, Y = {
   key: 1,
   class: "empty-position"
-};
-const _hoisted_7 = ["title"];
-const _hoisted_8 = ["title"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}, Z = ["title"], $ = ["title"], S = /* @__PURE__ */ U({
   __name: "DefaultStreamViewUI",
   props: {
     userInfo: {},
     streamViewInfoList: {}
   },
-  setup(__props) {
-    const props = __props;
-    const { t } = useUIKit();
-    const canvasRef = ref(null);
-    const { localCoGuestStatus } = useCoGuestState();
-    const { speakingUsers, seatList } = useLiveSeatState();
-    const seatListWithUser = computed(() => {
-      return seatList.value.filter((item) => item.userInfo && item.userInfo.userId !== "");
-    });
-    const currentStreamViewSize = computed(() => {
-      const currentStreamViewInfo = props.streamViewInfoList.find((item) => {
-        var _a, _b;
-        return ((_a = item.userInfo) == null ? void 0 : _a.userId) === ((_b = props.userInfo) == null ? void 0 : _b.userId);
+  setup(d) {
+    const a = d, { t: h } = K(), i = O(null), { localCoGuestStatus: y } = G(), { speakingUsers: z, seatList: x } = H(), C = u(() => x.value.filter((e) => e.userInfo && e.userInfo.userId !== "")), g = u(() => {
+      const e = a.streamViewInfoList.find((t) => {
+        var n, s;
+        return ((n = t.userInfo) == null ? void 0 : n.userId) === ((s = a.userInfo) == null ? void 0 : s.userId);
       });
-      if (!currentStreamViewInfo) return { width: 0, height: 0 };
-      return {
-        width: parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.width),
-        height: parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.height)
-      };
-    });
-    const avatarSize = computed(() => {
-      const defaultAvatarSize = 54;
-      const minSize = Math.min(currentStreamViewSize.value.width, currentStreamViewSize.value.height);
-      if (minSize < defaultAvatarSize + 10) {
-        return minSize - 10;
-      }
-      return defaultAvatarSize;
-    });
-    const needCanvasMaskList = computed(() => {
-      const currentStreamViewInfo = props.streamViewInfoList.find((item) => {
-        var _a, _b;
-        return ((_a = item.userInfo) == null ? void 0 : _a.userId) === ((_b = props.userInfo) == null ? void 0 : _b.userId);
+      return e ? {
+        width: parseInt(e == null ? void 0 : e.region.width),
+        height: parseInt(e == null ? void 0 : e.region.height)
+      } : { width: 0, height: 0 };
+    }), b = u(() => {
+      const t = Math.min(g.value.width, g.value.height);
+      return t < 64 ? t - 10 : 54;
+    }), f = u(() => {
+      const e = a.streamViewInfoList.find((t) => {
+        var n, s;
+        return ((n = t.userInfo) == null ? void 0 : n.userId) === ((s = a.userInfo) == null ? void 0 : s.userId);
       });
-      if (!currentStreamViewInfo) return [];
-      return props.streamViewInfoList.filter((item) => {
-        const isHigher = item.region.zIndex > (currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.zIndex);
-        const isHorizontalOverlap = parseInt(item.region.left) > parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left) && parseInt(item.region.left) < parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left) + parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.width);
-        const isVerticalOverlap = parseInt(item.region.top) > parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top) && parseInt(item.region.top) < parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top) + parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.height);
-        return isHigher && isHorizontalOverlap && isVerticalOverlap;
-      }).map((item) => {
-        return {
-          left: parseInt(item.region.left) - parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left),
-          top: parseInt(item.region.top) - parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top),
-          width: parseInt(item.region.width),
-          height: parseInt(item.region.height)
-        };
-      });
-    });
-    const drawCanvas = () => {
-      if (!canvasRef.value) return;
-      const canvas = canvasRef.value;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = rect.width;
-      canvas.height = rect.height;
-      ctx.fillStyle = "#1F2024";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      needCanvasMaskList.value.forEach((item) => {
-        ctx.clearRect(item.left, item.top, item.width, item.height);
+      return e ? a.streamViewInfoList.filter((t) => {
+        const n = t.region.zIndex > (e == null ? void 0 : e.region.zIndex), s = parseInt(t.region.left) > parseInt(e == null ? void 0 : e.region.left) && parseInt(t.region.left) < parseInt(e == null ? void 0 : e.region.left) + parseInt(e == null ? void 0 : e.region.width), L = parseInt(t.region.top) > parseInt(e == null ? void 0 : e.region.top) && parseInt(t.region.top) < parseInt(e == null ? void 0 : e.region.top) + parseInt(e == null ? void 0 : e.region.height);
+        return n && s && L;
+      }).map((t) => ({
+        left: parseInt(t.region.left) - parseInt(e == null ? void 0 : e.region.left),
+        top: parseInt(t.region.top) - parseInt(e == null ? void 0 : e.region.top),
+        width: parseInt(t.region.width),
+        height: parseInt(t.region.height)
+      })) : [];
+    }), I = () => {
+      if (!i.value) return;
+      const e = i.value, t = e.getContext("2d");
+      if (!t) return;
+      const n = e.getBoundingClientRect();
+      e.width = n.width, e.height = n.height, t.fillStyle = "#1F2024", t.fillRect(0, 0, e.width, e.height), f.value.forEach((s) => {
+        t.clearRect(s.left, s.top, s.width, s.height);
       });
     };
-    let resizeObserver = null;
-    watch(() => needCanvasMaskList.value.length, async () => {
-      if (needCanvasMaskList.value.length > 0) {
-        await nextTick();
-        if (canvasRef.value) {
-          drawCanvas();
-          resizeObserver = new ResizeObserver(() => {
-            drawCanvas();
-          });
-          resizeObserver.observe(canvasRef.value);
-        }
-      } else {
-        if (resizeObserver && canvasRef.value) {
-          resizeObserver.unobserve(canvasRef.value);
-        }
-      }
-    }, { immediate: true });
-    onUnmounted(() => {
-      if (resizeObserver && canvasRef.value) {
-        resizeObserver.unobserve(canvasRef.value);
-      }
-    });
-    const displayName = computed(() => {
-      var _a, _b;
-      return ((_a = props.userInfo) == null ? void 0 : _a.userName) || ((_b = props.userInfo) == null ? void 0 : _b.userId);
+    let c = null;
+    R(() => f.value.length, async () => {
+      f.value.length > 0 ? (await N(), i.value && (I(), c = new ResizeObserver(() => {
+        I();
+      }), c.observe(i.value))) : c && i.value && c.unobserve(i.value);
+    }, { immediate: !0 }), W(() => {
+      c && i.value && c.unobserve(i.value);
     });
-    const isAudioAvailable = computed(() => {
-      var _a;
-      return ((_a = props.userInfo) == null ? void 0 : _a.microphoneStatus) === DeviceStatus.On;
+    const m = u(() => {
+      var e, t;
+      return ((e = a.userInfo) == null ? void 0 : e.userName) || ((t = a.userInfo) == null ? void 0 : t.userId);
+    }), _ = u(() => {
+      var e;
+      return ((e = a.userInfo) == null ? void 0 : e.microphoneStatus) === k.On;
+    }), A = u(() => {
+      var e;
+      return ((e = a.userInfo) == null ? void 0 : e.cameraStatus) === k.On;
     });
-    const isVideoAvailable = computed(() => {
-      var _a;
-      return ((_a = props.userInfo) == null ? void 0 : _a.cameraStatus) === DeviceStatus.On;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        _ctx.userInfo.userId ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          !isVideoAvailable.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
-            needCanvasMaskList.value.length > 0 ? (openBlock(), createElementBlock("canvas", {
-              key: 0,
-              ref_key: "canvasRef",
-              ref: canvasRef,
-              class: "canvas-mask"
-            }, null, 512)) : (openBlock(), createElementBlock("div", _hoisted_3)),
-            createVNode(unref(Avatar), {
-              class: "avatar",
-              size: avatarSize.value,
-              src: _ctx.userInfo.avatarUrl,
-              alt: displayName.value
-            }, null, 8, ["size", "src", "alt"])
-          ])) : createCommentVNode("", true),
-          seatListWithUser.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_4, [
-            !isAudioAvailable.value ? (openBlock(), createBlock(AudioIcon, {
-              key: 0,
-              class: "audio-icon",
-              isMuted: !isAudioAvailable.value,
-              audioVolume: unref(speakingUsers).get(_ctx.userInfo.userId) || 0
-            }, null, 8, ["isMuted", "audioVolume"])) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_5, toDisplayString(displayName.value), 1)
-          ])) : createCommentVNode("", true)
-        ], 64)) : createCommentVNode("", true),
-        !_ctx.userInfo.userId ? (openBlock(), createElementBlock("div", _hoisted_6, [
-          unref(localCoGuestStatus) === unref(CoGuestStatus).Connected ? (openBlock(), createElementBlock("span", {
+    return (e, t) => (o(), r("div", q, [
+      d.userInfo.userId ? (o(), r(B, { key: 0 }, [
+        A.value ? v("", !0) : (o(), r("div", J, [
+          f.value.length > 0 ? (o(), r("canvas", {
             key: 0,
-            class: "text",
-            title: unref(t)("Waiting for connection")
-          }, toDisplayString(unref(t)("Waiting for connection")), 9, _hoisted_7)) : (openBlock(), createElementBlock("span", {
-            key: 1,
-            class: "text",
-            title: unref(t)("Waiting for connection")
-          }, toDisplayString(unref(t)("Waiting for connection")), 9, _hoisted_8))
-        ])) : createCommentVNode("", true)
-      ]);
-    };
+            ref_key: "canvasRef",
+            ref: i,
+            class: "canvas-mask"
+          }, null, 512)) : (o(), r("div", P)),
+          D(l(w), {
+            class: "avatar",
+            size: b.value,
+            src: d.userInfo.avatarUrl,
+            alt: m.value
+          }, null, 8, ["size", "src", "alt"])
+        ])),
+        C.value.length > 1 ? (o(), r("div", Q, [
+          _.value ? v("", !0) : (o(), M(F, {
+            key: 0,
+            class: "audio-icon",
+            isMuted: !_.value,
+            audioVolume: l(z).get(d.userInfo.userId) || 0
+          }, null, 8, ["isMuted", "audioVolume"])),
+          E("div", X, p(m.value), 1)
+        ])) : v("", !0)
+      ], 64)) : v("", !0),
+      d.userInfo.userId ? v("", !0) : (o(), r("div", Y, [
+        l(y) === l(T).Connected ? (o(), r("span", {
+          key: 0,
+          class: "text",
+          title: l(h)("Waiting for connection")
+        }, p(l(h)("Waiting for connection")), 9, Z)) : (o(), r("span", {
+          key: 1,
+          class: "text",
+          title: l(h)("Waiting for connection")
+        }, p(l(h)("Waiting for connection")), 9, $))
+      ]))
+    ]));
   }
-});
-const DefaultStreamViewUI = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9237082b"]]);
+}), le = /* @__PURE__ */ j(S, [["__scopeId", "data-v-9237082b"]]);
 export {
-  DefaultStreamViewUI as default
+  le as default
 };