tuikit-atomicx-vue3 4.4.0 → 4.5.0

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

@@ -0,0 +1,99 @@
+declare const RoomParticipantView: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        participant: {
+            type: import('vue').PropType<import('../..').RoomParticipant>;
+            required: true;
+        };
+        streamType: {
+            type: import('vue').PropType<import('../..').VideoStreamType>;
+            required: true;
+        };
+        fillMode: {
+            type: import('vue').PropType<import('../..').FillMode>;
+        };
+        lazyLoad: {
+            type: import('vue').PropType<{
+                enable: boolean;
+                viewport?: string | HTMLDivElement;
+            }>;
+        };
+        onStreamLoading: {
+            type: import('vue').PropType<() => void>;
+        };
+        onStreamPlaying: {
+            type: import('vue').PropType<() => void>;
+        };
+        onStreamError: {
+            type: import('vue').PropType<(error: any) => void>;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        participant: {
+            type: import('vue').PropType<import('../..').RoomParticipant>;
+            required: true;
+        };
+        streamType: {
+            type: import('vue').PropType<import('../..').VideoStreamType>;
+            required: true;
+        };
+        fillMode: {
+            type: import('vue').PropType<import('../..').FillMode>;
+        };
+        lazyLoad: {
+            type: import('vue').PropType<{
+                enable: boolean;
+                viewport?: string | HTMLDivElement;
+            }>;
+        };
+        onStreamLoading: {
+            type: import('vue').PropType<() => void>;
+        };
+        onStreamPlaying: {
+            type: import('vue').PropType<() => void>;
+        };
+        onStreamError: {
+            type: import('vue').PropType<(error: any) => void>;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    participant: {
+        type: import('vue').PropType<import('../..').RoomParticipant>;
+        required: true;
+    };
+    streamType: {
+        type: import('vue').PropType<import('../..').VideoStreamType>;
+        required: true;
+    };
+    fillMode: {
+        type: import('vue').PropType<import('../..').FillMode>;
+    };
+    lazyLoad: {
+        type: import('vue').PropType<{
+            enable: boolean;
+            viewport?: string | HTMLDivElement;
+        }>;
+    };
+    onStreamLoading: {
+        type: import('vue').PropType<() => void>;
+    };
+    onStreamPlaying: {
+        type: import('vue').PropType<() => void>;
+    };
+    onStreamError: {
+        type: import('vue').PropType<(error: any) => void>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        participantViewUI?(_: {}): any;
+    };
+});
+export { RoomParticipantView };

package/dist/components/RoomParticipantView/index.js

@@ -0,0 +1,32 @@
+import { defineComponent as e, createElementBlock as o, openBlock as n, createVNode as r, renderSlot as i } from "vue";
+import m from "./StreamPlay.js";
+import { _ as l } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const c = { class: "atomicx-participant-view" }, p = /* @__PURE__ */ e({
+  __name: "index",
+  props: {
+    participant: {},
+    streamType: {},
+    fillMode: {},
+    lazyLoad: {},
+    onStreamLoading: { type: Function },
+    onStreamPlaying: { type: Function },
+    onStreamError: { type: Function }
+  },
+  setup(t) {
+    return (a, s) => (n(), o("div", c, [
+      r(m, {
+        participant: t.participant,
+        "stream-type": t.streamType,
+        "fill-mode": t.fillMode,
+        "lazy-load": t.lazyLoad,
+        "on-stream-loading": t.onStreamLoading,
+        "on-stream-playing": t.onStreamPlaying,
+        "on-stream-error": t.onStreamError
+      }, null, 8, ["participant", "stream-type", "fill-mode", "lazy-load", "on-stream-loading", "on-stream-playing", "on-stream-error"]),
+      i(a.$slots, "participantViewUI", {}, void 0, !0)
+    ]));
+  }
+}), d = /* @__PURE__ */ l(p, [["__scopeId", "data-v-c1fab7d2"]]), u = d;
+export {
+  u as RoomParticipantView
+};

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

@@ -0,0 +1,34 @@
+import { RoomParticipant, VideoStreamType, FillMode } from '../../types';
+
+interface Props {
+    participant: RoomParticipant;
+    streamType: VideoStreamType;
+    fillMode?: FillMode;
+    lazyLoad?: {
+        enable: boolean;
+        viewport?: string | HTMLDivElement;
+    };
+    onStreamLoading?: () => void;
+    onStreamPlaying?: () => void;
+    onStreamError?: (error: any) => void;
+}
+declare function __VLS_template(): {
+    participantViewUI?(_: {}): 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;
+    };
+};

package/dist/components/RoomView/ArrowStroke.js

@@ -0,0 +1,43 @@
+import { defineComponent as i, computed as l, createElementBlock as k, openBlock as m, normalizeClass as r, createElementVNode as e, createVNode as w, unref as d } from "vue";
+import { IconArrowStrokeLeft as f } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as p } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const u = /* @__PURE__ */ i({
+  __name: "ArrowStroke",
+  props: {
+    strokePosition: {},
+    arrowDirection: {},
+    hasStroke: { type: Boolean }
+  },
+  emits: ["click-arrow"],
+  setup(o, { emit: s }) {
+    const c = o, a = s, n = l(
+      () => `arrow-stroke-container-${c.strokePosition}`
+    );
+    function t() {
+      a("click-arrow");
+    }
+    return (h, S) => (m(), k("div", {
+      class: r(n.value)
+    }, [
+      e("div", {
+        class: r(["stroke-content", { "has-stroke": o.hasStroke }])
+      }, [
+        e("div", {
+          class: "arrow-content",
+          onClick: t
+        })
+      ], 2),
+      e("div", {
+        class: r(["arrow", { "has-stroke": o.hasStroke }]),
+        onClick: t
+      }, [
+        w(d(f), {
+          class: r(["arrow-stroke-icon", o.arrowDirection])
+        }, null, 8, ["class"])
+      ], 2)
+    ], 2));
+  }
+}), A = /* @__PURE__ */ p(u, [["__scopeId", "data-v-163ee86c"]]);
+export {
+  A as default
+};

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

@@ -0,0 +1,20 @@
+interface Props {
+    strokePosition: string;
+    arrowDirection: string;
+    hasStroke: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "click-arrow": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
+    "onClick-arrow"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, 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/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
+};