tuikit-atomicx-vue3 4.4.0 → 4.5.1

package/dist/components/RoomView/GridLayout.js

@@ -0,0 +1,119 @@
+import { defineComponent as A, inject as B, ref as m, computed as t, watch as _, createElementBlock as p, openBlock as s, createElementVNode as v, createCommentVNode as E, normalizeStyle as C, Fragment as F, renderList as G, createBlock as U, unref as n, withCtx as j, renderSlot as q, mergeProps as W, withDirectives as S, createVNode as k, vShow as T } from "vue";
+import { IconArrowStrokeTurnPage as P } from "@tencentcloud/uikit-base-component-vue3";
+import { useRoomParticipantState as H } from "../../states/RoomParticipantState/index.js";
+import { RoomParticipantView as J } from "../RoomParticipantView/index.js";
+import { useRoomView as K } from "./useRoomView.js";
+import { useStreamItemDimensions as O } from "./useStreamItemDimensions.js";
+import { VideoStreamType as Q, FillMode as X } from "../../types/participant.js";
+import { _ as Y } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const Z = {
+  key: 0,
+  class: "turn-page-container"
+}, L = 3, M = 3, ee = /* @__PURE__ */ A({
+  __name: "GridLayout",
+  emits: ["stream-double-click"],
+  setup(te, { emit: R }) {
+    const b = R, x = B("showToolbar"), { participantWithScreen: h } = H(), { participantCameraList: d } = K(), a = m(0), i = t(() => L * M);
+    function V(e) {
+      b("stream-double-click", e);
+    }
+    const o = t(() => {
+      const e = [];
+      return h.value && e.push({ participant: h.value, streamType: Q.Screen }), d.value.length > 0 && e.push(...d.value), e;
+    }), g = t(
+      () => Math.ceil(o.value.length / i.value)
+    ), u = t(() => o.value.slice(a.value * i.value, (a.value + 1) * i.value)), l = t(() => {
+      const e = o.value.length;
+      return Math.min(Math.ceil(Math.sqrt(e)), L);
+    }), c = t(() => {
+      const e = o.value.length;
+      return Math.min(Math.ceil(e / l.value), M);
+    }), f = m(null), { itemStyle: w } = O({
+      containerRef: f,
+      columns: l,
+      rows: c,
+      itemCount: t(() => u.value.length),
+      gap: 8,
+      aspectRatio: 16 / 9,
+      watchDependencies: [
+        () => l.value,
+        () => c.value,
+        () => u.value.length
+      ]
+    }), y = m({});
+    _(() => w.value, (e) => {
+      !e.width || !e.height || (y.value = {
+        width: `${Math.ceil(parseInt(e.width, 10) * l.value + (l.value - 1) * 8)}px`,
+        height: `${Math.ceil(parseInt(e.height, 10) * c.value + (c.value - 1) * 8)}px`
+      });
+    }, { immediate: !0 }), _(
+      () => o.value.length,
+      (e) => {
+        a.value > 0 && a.value > Math.ceil(e / i.value) - 1 && (a.value = Math.ceil(e / i.value) - 1);
+      }
+    );
+    const D = t(
+      () => g.value > 1
+    ), I = t(
+      () => a.value > 0
+    ), $ = t(
+      () => a.value < g.value - 1
+    );
+    function N() {
+      a.value -= 1;
+    }
+    function z() {
+      a.value += 1;
+    }
+    return (e, ae) => (s(), p("div", {
+      id: "streamContainer",
+      ref_key: "streamListContainerRef",
+      ref: f,
+      class: "stream-container-grid"
+    }, [
+      v("div", {
+        style: C(y.value),
+        class: "stream-list-content"
+      }, [
+        (s(!0), p(F, null, G(u.value, (r) => (s(), U(n(J), {
+          key: `${r.participant.userId}_${r.streamType}`,
+          style: C(n(w)),
+          class: "participant-view",
+          participant: r.participant,
+          "stream-type": r.streamType,
+          "fill-mode": n(X).Fill,
+          onDblclick: (re) => V(r)
+        }, {
+          participantViewUI: j(() => [
+            q(e.$slots, "participantViewUI", W({ ref_for: !0 }, { participant: r.participant, streamType: r.streamType }), void 0, !0)
+          ]),
+          _: 2
+        }, 1032, ["style", "participant", "stream-type", "fill-mode", "onDblclick"]))), 128))
+      ], 4),
+      n(x) && D.value ? (s(), p("div", Z, [
+        S(v("div", {
+          class: "turn-page-arrow-container left-container",
+          onClick: N
+        }, [
+          k(n(P), { size: "20" })
+        ], 512), [
+          [T, I.value]
+        ]),
+        S(v("div", {
+          class: "turn-page-arrow-container right-container",
+          onClick: z
+        }, [
+          k(n(P), {
+            class: "turn-page-right",
+            size: "20"
+          })
+        ], 512), [
+          [T, $.value]
+        ])
+      ])) : E("", !0)
+    ], 512));
+  }
+}), pe = /* @__PURE__ */ Y(ee, [["__scopeId", "data-v-bfc86d0d"]]);
+export {
+  pe as default
+};

package/dist/components/RoomView/GridLayout.vue.d.ts

@@ -0,0 +1,20 @@
+import { VideoStreamType, RoomParticipant } from '../../types';
+
+declare function __VLS_template(): {
+    participantViewUI?(_: {
+        participant: RoomParticipant;
+        streamType: VideoStreamType;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "stream-double-click": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onStream-double-click"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/RoomView/SpeakerLayout.js

@@ -0,0 +1,141 @@
+import { defineComponent as H, inject as J, ref as v, computed as m, watch as K, onUnmounted as O, createElementBlock as f, openBlock as d, normalizeClass as S, createCommentVNode as C, createElementVNode as L, createBlock as _, createVNode as Q, unref as l, normalizeStyle as X, withCtx as g, renderSlot as V, normalizeProps as Y, guardReactiveProps as Z, Fragment as ee, renderList as te, mergeProps as ae } from "vue";
+import { useRoomParticipantState as P } from "../../states/RoomParticipantState/index.js";
+import { RoomParticipantView as R } from "../RoomParticipantView/index.js";
+import re from "./ArrowStroke.js";
+import { useRoomView as ie } from "./useRoomView.js";
+import { useStreamItemDimensions as ne } from "./useStreamItemDimensions.js";
+import { VideoStreamType as p, RoomParticipantEvent as I, FillMode as D, RoomLayoutTemplate as s } from "../../types/participant.js";
+import { _ as oe } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const le = { class: "stream-list-content" }, pe = /* @__PURE__ */ H({
+  __name: "SpeakerLayout",
+  props: {
+    layoutTemplate: {}
+  },
+  emits: ["stream-double-click"],
+  setup($, { emit: E }) {
+    const { participantCameraList: T } = ie(), { subscribeEvent: U, unsubscribeEvent: z } = P(), {
+      localParticipant: F,
+      participantListWithVideo: h,
+      participantWithScreen: n
+    } = P(), B = J("showToolbar"), a = $, N = E, c = v(null), t = m(() => c.value ? c.value : n.value ? { participant: n.value, streamType: p.Screen } : h.value.length > 0 ? {
+      participant: h.value[0],
+      streamType: p.Camera
+    } : { participant: F.value, streamType: p.Camera });
+    function x(e, o) {
+      return e.participant.userId === o.participant.userId && e.streamType === o.streamType;
+    }
+    const A = m(() => {
+      const e = [];
+      return n.value && (t.value && !x({ participant: n.value, streamType: p.Screen }, t.value) ? e.push({ participant: n.value, streamType: p.Screen }) : t.value || e.push({ participant: n.value, streamType: p.Screen })), T.value.length > 0 && e.push(...T.value), e;
+    });
+    function W(e) {
+      c.value = e, N("stream-double-click", e);
+    }
+    const y = v("stream-container-flatten");
+    async function j() {
+      switch (a.layoutTemplate) {
+        case s.SidebarLayout:
+          y.value = "stream-container-right";
+          break;
+        case s.CinemaLayout:
+          y.value = "stream-container-top";
+          break;
+      }
+    }
+    K(
+      () => a.layoutTemplate,
+      () => {
+        j();
+      },
+      { immediate: !0 }
+    );
+    const r = v(!0), k = m(() => {
+      let e = "right";
+      return a.layoutTemplate === s.CinemaLayout && (e = r.value ? "up" : "down"), a.layoutTemplate === s.SidebarLayout && (e = r.value ? "right" : "left"), e;
+    }), M = m(() => {
+      let e = "";
+      return a.layoutTemplate === s.CinemaLayout && (e = "bottom"), a.layoutTemplate === s.SidebarLayout && (e = "left"), e;
+    });
+    function q() {
+      r.value = !r.value;
+    }
+    const w = v(null), { itemStyle: G } = ne({
+      containerRef: w,
+      columns: 1,
+      rows: 1,
+      itemCount: m(() => {
+        var e;
+        return (e = t.value) != null && e.participant ? 1 : 0;
+      }),
+      gap: 0,
+      aspectRatio: 16 / 9,
+      watchDependencies: [
+        () => a.layoutTemplate
+      ]
+    });
+    function b({ userInfo: e }) {
+      var o, u;
+      e.userId === ((u = (o = c.value) == null ? void 0 : o.participant) == null ? void 0 : u.userId) && (c.value = null);
+    }
+    return U(I.onParticipantLeft, b), O(() => {
+      z(I.onParticipantLeft, b);
+    }), (e, o) => {
+      var u;
+      return d(), f("div", {
+        id: "streamContainer",
+        class: S(y.value)
+      }, [
+        (u = t.value) != null && u.participant ? (d(), f("div", {
+          key: 0,
+          ref_key: "enlargedStreamContainerRef",
+          ref: w,
+          class: "enlarged-stream-container"
+        }, [
+          Q(l(R), {
+            class: "participant-view",
+            style: X(l(G)),
+            participant: t.value.participant,
+            "stream-type": t.value.streamType,
+            "fill-mode": l(D).Fill,
+            "lazy-load": { enable: !1 }
+          }, {
+            participantViewUI: g(() => [
+              V(e.$slots, "participantViewUI", Y(Z({ participant: t.value.participant, streamType: t.value.streamType })), void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["style", "participant", "stream-type", "fill-mode"])
+        ], 512)) : C("", !0),
+        L("div", {
+          class: S(["stream-list-container", `${r.value ? "" : "hide-list"}`])
+        }, [
+          L("div", le, [
+            (d(!0), f(ee, null, te(A.value, (i) => (d(), _(l(R), {
+              key: `${i.participant.userId}_${i.streamType}`,
+              class: "participant-view",
+              participant: i.participant,
+              "stream-type": i.streamType,
+              "fill-mode": l(D).Fill,
+              onDblclick: (se) => W(i)
+            }, {
+              participantViewUI: g(() => [
+                V(e.$slots, "participantViewUI", ae({ ref_for: !0 }, { participant: i.participant, streamType: i.streamType }), void 0, !0)
+              ]),
+              _: 2
+            }, 1032, ["participant", "stream-type", "fill-mode", "onDblclick"]))), 128))
+          ])
+        ], 2),
+        l(B) || r.value ? (d(), _(re, {
+          key: 1,
+          class: S([`arrow-stroke-${k.value}`]),
+          "stroke-position": M.value,
+          "arrow-direction": k.value,
+          "has-stroke": r.value,
+          onClickArrow: q
+        }, null, 8, ["class", "stroke-position", "arrow-direction", "has-stroke"])) : C("", !0)
+      ], 2);
+    };
+  }
+}), Te = /* @__PURE__ */ oe(pe, [["__scopeId", "data-v-e7a40d9b"]]);
+export {
+  Te as default
+};

package/dist/components/RoomView/SpeakerLayout.vue.d.ts

@@ -0,0 +1,32 @@
+import { VideoStreamType, RoomLayoutTemplate, RoomParticipant } from '../../types';
+
+interface Props {
+    layoutTemplate: RoomLayoutTemplate;
+}
+declare function __VLS_template(): {
+    participantViewUI?(_: {
+        participant: RoomParticipant;
+        streamType: VideoStreamType;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "stream-double-click": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
+    "onStream-double-click"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,52 @@
+declare const RoomView: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        layoutTemplate: {
+            type: import('vue').PropType<import('../..').RoomLayoutTemplate>;
+            default: import('../..').RoomLayoutTemplate;
+        };
+    }>> & Readonly<{
+        "onStream-double-click"?: ((...args: any[]) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "stream-double-click": (...args: any[]) => void;
+    }, import('vue').PublicProps, {
+        layoutTemplate: import('../..').RoomLayoutTemplate;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        layoutTemplate: {
+            type: import('vue').PropType<import('../..').RoomLayoutTemplate>;
+            default: import('../..').RoomLayoutTemplate;
+        };
+    }>> & Readonly<{
+        "onStream-double-click"?: ((...args: any[]) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        layoutTemplate: import('../..').RoomLayoutTemplate;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    layoutTemplate: {
+        type: import('vue').PropType<import('../..').RoomLayoutTemplate>;
+        default: import('../..').RoomLayoutTemplate;
+    };
+}>> & Readonly<{
+    "onStream-double-click"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "stream-double-click": (...args: any[]) => void;
+}, string, {
+    layoutTemplate: import('../..').RoomLayoutTemplate;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        participantViewUI?(_: {
+            participant: import('../..').RoomParticipant;
+            streamType: import('../..').VideoStreamType;
+        }): any;
+    };
+});
+export { RoomView };

package/dist/components/RoomView/index.js

@@ -0,0 +1,49 @@
+import { defineComponent as b, ref as C, provide as T, createElementBlock as V, openBlock as i, createBlock as u, createCommentVNode as c, unref as m, withCtx as p, renderSlot as s, normalizeProps as d, guardReactiveProps as f } from "vue";
+import v from "./GridLayout.js";
+import L from "./SpeakerLayout.js";
+import { useRoomToolbar as R } from "./useRoomToolbar.js";
+import { RoomLayoutTemplate as t } from "../../types/participant.js";
+import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const _ = /* @__PURE__ */ b({
+  __name: "index",
+  props: {
+    layoutTemplate: { default: t.GridLayout }
+  },
+  emits: ["stream-double-click"],
+  setup(e, { emit: y }) {
+    const l = C(null), { showToolbar: k } = R(l);
+    T("showToolbar", k);
+    const w = y;
+    function n(o) {
+      w("stream-double-click", o);
+    }
+    return (o, I) => (i(), V("div", {
+      ref_key: "roomViewContainerRef",
+      ref: l,
+      class: "room-view-container"
+    }, [
+      e.layoutTemplate === m(t).GridLayout ? (i(), u(v, {
+        key: 0,
+        onStreamDoubleClick: n
+      }, {
+        participantViewUI: p(({ participant: a, streamType: r }) => [
+          s(o.$slots, "participantViewUI", d(f({ participant: a, streamType: r })), void 0, !0)
+        ]),
+        _: 3
+      })) : c("", !0),
+      e.layoutTemplate === m(t).SidebarLayout || e.layoutTemplate === m(t).CinemaLayout ? (i(), u(L, {
+        key: 1,
+        "layout-template": e.layoutTemplate,
+        onStreamDoubleClick: n
+      }, {
+        participantViewUI: p(({ participant: a, streamType: r }) => [
+          s(o.$slots, "participantViewUI", d(f({ participant: a, streamType: r })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["layout-template"])) : c("", !0)
+    ], 512));
+  }
+}), h = /* @__PURE__ */ S(_, [["__scopeId", "data-v-a8b3f9d8"]]), $ = h;
+export {
+  $ as RoomView
+};

package/dist/components/RoomView/index.vue.d.ts

@@ -0,0 +1,46 @@
+import { RoomLayoutTemplate, RoomParticipant, VideoStreamType } from '../../types';
+
+interface Props {
+    layoutTemplate?: RoomLayoutTemplate;
+}
+declare function __VLS_template(): {
+    participantViewUI?(_: {
+        participant: RoomParticipant;
+        streamType: VideoStreamType;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    layoutTemplate: RoomLayoutTemplate;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "stream-double-click": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    layoutTemplate: RoomLayoutTemplate;
+}>>> & Readonly<{
+    "onStream-double-click"?: ((...args: any[]) => any) | undefined;
+}>, {
+    layoutTemplate: RoomLayoutTemplate;
+}, {}, {}, {}, 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_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/RoomView/useRoomToolbar.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+
+export declare function useRoomToolbar(containerRef: Ref<HTMLElement | null>, autoHideDelay?: number, mouseMoveThrottle?: number): {
+    showToolbar: Ref<boolean, boolean>;
+};

package/dist/components/RoomView/useRoomToolbar.js

@@ -0,0 +1,36 @@
+import { ref as u, onMounted as E, onUnmounted as L } from "vue";
+function M(a, d = 5e3, T = 1e3) {
+  const t = u(!0), o = u(null), n = u(null), l = u(!1), r = () => {
+    o.value !== null && (clearTimeout(o.value), o.value = null);
+  }, v = () => {
+    n.value !== null && (clearTimeout(n.value), n.value = null);
+  }, s = () => {
+    r(), o.value = window.setTimeout(() => {
+      t.value = !1;
+    }, d);
+  }, i = () => {
+    t.value = !0, s();
+  }, m = () => {
+    l.value || (t.value = !0, s(), l.value = !0, n.value = window.setTimeout(() => {
+      l.value = !1;
+    }, T));
+  }, c = () => {
+    r(), v(), l.value = !1, t.value = !1;
+  }, f = () => {
+    const e = a.value;
+    e && (e.addEventListener("mouseenter", i), e.addEventListener("mousemove", m), e.addEventListener("mouseleave", c));
+  }, h = () => {
+    const e = a.value;
+    e && (e.removeEventListener("mouseenter", i), e.removeEventListener("mousemove", m), e.removeEventListener("mouseleave", c));
+  };
+  return E(() => {
+    f(), s();
+  }), L(() => {
+    r(), v(), h();
+  }), {
+    showToolbar: t
+  };
+}
+export {
+  M as useRoomToolbar
+};

package/dist/components/RoomView/useRoomView.d.ts

@@ -0,0 +1,13 @@
+import { RoomLayoutTemplate, VideoStreamType, RoomParticipant } from '../../types';
+
+export declare function useRoomView(): {
+    layoutTemplate: import('vue').Ref<RoomLayoutTemplate, RoomLayoutTemplate>;
+    participantCameraList: import('vue').ComputedRef<{
+        participant: RoomParticipant;
+        streamType: VideoStreamType;
+    }[]>;
+    participantStreamList: import('vue').ComputedRef<{
+        participant: RoomParticipant;
+        streamType: VideoStreamType;
+    }[]>;
+};

package/dist/components/RoomView/useRoomView.js

@@ -0,0 +1,40 @@
+import { ref as f, computed as i } from "vue";
+import { useRoomParticipantState as d } from "../../states/RoomParticipantState/index.js";
+import { combineComparators as B, createComparator as a } from "../../utils/compare.js";
+import { RoomLayoutTemplate as h, VideoStreamType as m, RoomParticipantRole as p } from "../../types/participant.js";
+import { DeviceStatus as e } from "../../types/device.js";
+function R() {
+  const c = f(h.GridLayout), { localParticipant: s, participantList: u, participantWithScreen: o } = d(), l = B(
+    a(
+      (t) => t.role === p.Owner
+    ),
+    a(
+      (t) => {
+        var n;
+        return t.userId === ((n = s.value) == null ? void 0 : n.userId);
+      }
+    ),
+    a(
+      (t) => t.role === p.Admin
+    ),
+    a((t) => t.screenShareStatus === e.On),
+    a(
+      (t) => t.cameraStatus === e.On && t.microphoneStatus === e.On
+    ),
+    a((t) => t.cameraStatus === e.On),
+    a((t) => t.microphoneStatus === e.On)
+  ), r = i(
+    () => u.value.sort(l).map((t) => ({ participant: t, streamType: m.Camera }))
+  ), S = i(() => {
+    const t = [];
+    return o.value && t.push({ participant: o.value, streamType: m.Screen }), t.push(...r.value), t;
+  });
+  return {
+    layoutTemplate: c,
+    participantCameraList: r,
+    participantStreamList: S
+  };
+}
+export {
+  R as useRoomView
+};

package/dist/components/RoomView/useStreamItemDimensions.d.ts

@@ -0,0 +1,30 @@
+import { Ref } from 'vue';
+
+export interface StreamItemDimensionsOptions {
+    containerRef: Ref<HTMLElement | null>;
+    columns: Ref<number> | number;
+    rows: Ref<number> | number;
+    itemCount: Ref<number> | number;
+    gap?: number;
+    aspectRatio?: number;
+    watchDependencies?: Array<Ref<unknown> | (() => unknown)>;
+}
+export interface StreamItemStyle {
+    width?: string;
+    height?: string;
+}
+/**
+ * Calculate stream item dimensions maintaining a specific aspect ratio
+ * @param options Configuration options
+ * @returns Reactive style object with width and height
+ */
+export declare function useStreamItemDimensions(options: StreamItemDimensionsOptions): {
+    itemStyle: Ref<{
+        width?: string | undefined;
+        height?: string | undefined;
+    }, StreamItemStyle | {
+        width?: string | undefined;
+        height?: string | undefined;
+    }>;
+    calculateDimensions: () => void;
+};

package/dist/components/RoomView/useStreamItemDimensions.js

@@ -0,0 +1,57 @@
+import { ref as E, onMounted as N, nextTick as W, onUnmounted as $, watch as k } from "vue";
+function j(H) {
+  const {
+    containerRef: n,
+    columns: a,
+    rows: s,
+    itemCount: c,
+    gap: h = 0,
+    aspectRatio: p = 16 / 9,
+    watchDependencies: g = []
+  } = H, r = E({});
+  function e() {
+    if (!n.value)
+      return;
+    const f = n.value, v = f.getBoundingClientRect(), d = typeof a == "number" ? a : a.value, i = typeof s == "number" ? s : s.value;
+    if ((typeof c == "number" ? c : c.value) <= 0 || d <= 0 || i <= 0) {
+      r.value = {};
+      return;
+    }
+    const z = v.width, x = v.height, o = window.getComputedStyle(f), F = parseFloat(o.paddingLeft) || 0, L = parseFloat(o.paddingRight) || 0, S = parseFloat(o.paddingTop) || 0, C = parseFloat(o.paddingBottom) || 0, D = z - F - L, w = x - S - C, M = (d - 1) * h, O = (i - 1) * h, b = (D - M) / d, y = b / p, R = (w - O) / i, T = R * p;
+    let l, u;
+    y <= w / i ? (l = b, u = y) : (l = T, u = R), r.value = {
+      width: `${Math.floor(l)}px`,
+      height: `${Math.floor(u)}px`
+    };
+  }
+  let t = null;
+  function B() {
+    n.value && (t = new ResizeObserver(() => {
+      e();
+    }), t.observe(n.value));
+  }
+  function m() {
+    e();
+  }
+  return N(() => {
+    W(() => {
+      e(), B(), window.addEventListener("resize", m);
+    });
+  }), $(() => {
+    t && (t.disconnect(), t = null), window.removeEventListener("resize", m);
+  }), g.length > 0 && k(
+    g,
+    () => {
+      W(() => {
+        e();
+      });
+    },
+    { deep: !0 }
+  ), {
+    itemStyle: r,
+    calculateDimensions: e
+  };
+}
+export {
+  j as useStreamItemDimensions
+};