import { b9 as A, w as d, cv as j, ba as y, f0 as M, bd as I, bf as H, bP as R, ct as N, a0 as l, U as D, f1 as c, V as a, bg as s, cy as O, P as n, bh as p, bi as g, bj as m, bl as z, bn as F, bo as x, bp as $ } from "./684d2f28.js";
import { useRef as P, useState as v, useEffect as J, useContext as f } from "react";
import { ButtonStyleControl as q } from "./9f282d74.js";
import "react-dom";
import "./d6402597.js";
const G = A.video`
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
`, K = {
  autoHeight: d(j, "auto"),
  profilePadding: d(y, "0px"),
  profileBorderRadius: d(y, "0px"),
  videoAspectRatio: d(y, "1 / 1"),
  onEvent: M,
  disabled: I,
  loading: I,
  style: q,
  viewRef: H,
  userId: d(R(""), "{{meeting1.localUser}}"),
  profileImageUrl: d(N, "https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose"),
  noVideoText: R(l("meeting.noVideo"))
};
let w = function() {
  return new D(K, (e) => {
    const u = P(null), S = P(null), [b, E] = v(), [U, k] = v(""), [C, B] = v(!0);
    return J(() => {
      var h;
      if (e.userId.value !== "") {
        let i = JSON.parse((h = e.userId) == null ? void 0 : h.value);
        c.on("user-published", async (t, o) => {
          if (o === "video") {
            const r = await c.subscribe(t, o);
            let V = t.uid + "";
            t.hasVideo && t.uid + "" !== i.user && i.user !== "" && e.onEvent("videoOn"), document.getElementById(V) && r.play(V);
          }
          if (o === "audio") {
            const r = await c.subscribe(t, o);
            t.hasAudio && t.uid + "" !== i.user && i.user !== "" && (i.audiostatus = t.hasVideo, e.onEvent("audioUnmuted")), r.play();
          }
        }), c.on("user-unpublished", (t, o) => {
          var r;
          o === "audio" && !t.hasAudio && t.uid + "" !== i.user && i.user !== "" && (i.audiostatus = t.hasVideo, e.onEvent("audioMuted")), o === "video" && (u.current && ((r = u.current) == null ? void 0 : r.id) === t.uid + "" && (u.current.srcObject = null), !t.hasVideo && t.uid + "" !== i.user && i.user !== "" && e.onEvent("videoOff"));
        }), E(i.user), k(i.userName), B(i.streamingVideo);
      }
    }, [e.userId.value]), /* @__PURE__ */ a(s.Consumer, {
      children: (h) => /* @__PURE__ */ a(O, {
        children: /* @__PURE__ */ n("div", {
          ref: S,
          style: {
            display: "flex",
            alignItems: "center",
            height: "100%",
            overflow: "hidden",
            borderRadius: e.style.radius,
            aspectRatio: e.videoAspectRatio,
            backgroundColor: e.style.background,
            padding: e.style.padding,
            margin: e.style.margin
          },
          children: [b ? /* @__PURE__ */ a(G, {
            onClick: () => e.onEvent("videoClicked"),
            ref: u,
            style: {
              display: `${C ? "flex" : "none"}`,
              aspectRatio: e.videoAspectRatio,
              borderRadius: e.style.radius,
              width: "auto"
            },
            id: b
          }) : /* @__PURE__ */ a(p, {}), /* @__PURE__ */ n("div", {
            style: {
              flexDirection: "column",
              alignItems: "center",
              display: `${!C || b ? "flex" : "none"}`,
              margin: "0 auto",
              padding: e.profilePadding
            },
            children: [/* @__PURE__ */ a("img", {
              alt: "",
              style: {
                borderRadius: e.profileBorderRadius,
                width: "100%",
                overflow: "hidden"
              },
              src: e.profileImageUrl.value
            }), /* @__PURE__ */ a("p", {
              style: {
                margin: "0"
              },
              children: U ?? ""
            })]
          })]
        })
      })
    });
  }).setPropertyViewFn((e) => /* @__PURE__ */ n(p, {
    children: [/* @__PURE__ */ n(g, {
      name: m.basic,
      children: [e.userId.propertyView({
        label: l("meeting.videoId")
      }), e.profileImageUrl.propertyView({
        label: l("meeting.profileImageUrl"),
        placeholder: "https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose"
      })]
    }), (f(s).editorModeStatus === "logic" || f(s).editorModeStatus === "both") && /* @__PURE__ */ n(g, {
      name: m.interaction,
      children: [e.onEvent.getPropertyView(), z(e)]
    }), (f(s).editorModeStatus === "layout" || f(s).editorModeStatus === "both") && /* @__PURE__ */ n(p, {
      children: [/* @__PURE__ */ a(g, {
        name: m.layout,
        children: e.autoHeight.getPropertyView()
      }), /* @__PURE__ */ n(g, {
        name: m.style,
        children: [e.profilePadding.propertyView({
          label: "Profile Image Padding"
        }), e.profileBorderRadius.propertyView({
          label: "Profile Image Border Radius"
        }), e.videoAspectRatio.propertyView({
          label: "Video Aspect Ratio"
        }), e.style.getPropertyView()]
      })]
    })]
  })).build();
}();
w = class extends w {
  autoHeight() {
    return this.children.autoHeight.getView();
  }
};
const _ = F(w, [new x("loading", l("button.loadingDesc")), new x("profileImageUrl", l("meeting.profileImageUrl")), ...$]);
export {
  _ as VideoMeetingStreamComp
};
