https://getatoz.com/assets/MediaGallery.LQoWBTwR.js

1import { importShared } from './__federation_fn_import._gQOYU1h.js';
2import { j as jsxRuntimeExports, M as Model } from './index.D0TJ7u1W.js';
3
4const React = await importShared('react');
5const {useState,useEffect,useMemo} = React;
6const MediaGallery = ({ modalType, properties, open, closeModal }) => {
7  const otherImages = properties?.medias?.filter(
8    (o) => o.type === "image" && o.title?.toLowerCase() === "other"
9  ) || [];
10  const floorPlan = properties?.units?.flatMap((unit) => unit?.floorPlans || []) || [];
11  const videos = properties?.medias?.filter(
12    (o) => o.type === "video" && o.title?.toLowerCase() === "video"
13  ) || [];
14  const [activeTab, setActiveTab] = useState(modalType || "images");
15  const [active, setActive] = useState(null);
16  useEffect(() => {
17    if (modalType) {
18      setActiveTab(modalType);
19    }
20  }, [modalType]);
21  const allMedia = useMemo(() => {
22    if (activeTab === "images") return otherImages;
23    if (activeTab === "videos") return videos;
24    return floorPlan;
25  }, [activeTab, otherImages, videos, floorPlan]);
26  useEffect(() => {
27    if (!allMedia?.length) {
28      setActive(null);
29      return;
30    }
31    const existsInCurrent = active && allMedia.some((m) => m.id === active.id);
32    if (!existsInCurrent) {
33      setActive(allMedia[0]);
34    }
35  }, [allMedia, open, active]);
36  const tabs = [
37    { key: "images", label: "Images" },
38    { key: "videos", label: "Videos" },
39    { key: "floor", label: "Floor Plans" }
40  ];
41  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
42    Model,
43    {
44      isOpen: open,
45      onRequestClose: closeModal,
46      contentLabel: "Media Gallery",
47      className: "relative bg-white rounded-2xl max-w-[1000px] w-full h-[80vh] md:h-[95vh] mx-auto p-4 outline-none shadow-2xl flex flex-col",
48      overlayClassName: "fixed inset-0 bg-black/60 flex justify-center items-center z-50 px-2 md:px-4",
49      children: [

50        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between border-b mb-2 pb-2", children: [
51          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
52            /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-md md:text-lg font-semibold text-gray-900", children: "Media Gallery" }),
53            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[8px] md:text-xs text-gray-500 mt-0.5", children: "Browse property images, videos, and floor plans" })
54          ] }),
55          /* @__PURE__ */ jsxRuntimeExports.jsx(
56            "button",
57            {
58              onClick: closeModal,
59              className: "inline-flex items-center justify-center w-9 h-9 rounded-full border border-gray-200 hover:border-gray-400 hover:bg-gray-100 transition",
60              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-2xl leading-none", children: "×" })
61            }
62          )
63        ] }),
64        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-3 pb-2 ", children: tabs.map((t) => {
65          const isActive = activeTab === t.key;
66          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
67            "button",
68            {
69              onClick: () => setActiveTab(t.key),
70              className: `relative px-4 py-2 text-xs md:text-sm font-medium transition-all
71                ${isActive ? "text-[#002B5B]" : "text-gray-500 hover:text-black"}`,
72              children: [
73                t.label,
74                isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute left-1/2 -bottom-[2px] -translate-x-1/2 w-10 h-[3px] rounded-full bg-[#002B5B]" })
75              ]
76            },
77            t.key
78          );
79        }) }),

80        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col gap-2 md:gap-4 min-h-0 ", children: [
81          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full  flex-1 flex items-center justify-center  overflow-hidden", children: [
82            !active && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-gray-500 text-sm", children: [
83              "No ",
84              activeTab === "floor" ? "floor plans" : activeTab,
85              " available"
86            ] }),
87            active && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
88              active?.title?.toLowerCase() === "floor plan" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-auto h-full ", children: [
89                /* @__PURE__ */ jsxRuntimeExports.jsx(
90                  "img",
91                  {
92                    src: active.url,
93                    alt: active.title || "Floor plan",
94                    className: "max-h-full max-w-full object-contain border rounded-xl shadow-md"
95                  }
96                ),

97                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-1 left-1 right-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex max-w-full px-2 py-0.5 rounded-full bg-black/60", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-[10px] text-white leading-tight", children: active.alt || active.title || "Floor plan" }) }) })
98              ] }),
99              active?.type === "image" && active?.title?.toLowerCase() !== "floor plan" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-auto h-full", children: [
100                /* @__PURE__ */ jsxRuntimeExports.jsx(
101                  "img",
102                  {
103                    src: active.url,
104                    alt: active.title || "Image",
105                    className: "max-h-full max-w-full object-contain rounded-xl shadow-md"
106                  }
107                ),
108                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-1 left-1 right-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex max-w-full px-2 py-0.5 rounded-full bg-black/60", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-[10px] text-white leading-tight", children: active.alt || active.title || "Image" }) }) })
109              ] }),
110              active?.type === "video" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-auto ", children: [

111                /* @__PURE__ */ jsxRuntimeExports.jsx(
112                  "video",
113                  {
114                    controls: true,
115                    className: "max-h-full max-w-full rounded-xl object-contain shadow-md",
116                    children: /* @__PURE__ */ jsxRuntimeExports.jsx("source", { src: active.url })
117                  }
118                ),
119                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-1 left-1 right-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex max-w-full px-2 py-0.5 rounded-full bg-black/60", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-[10px] text-white leading-tight", children: active.alt || active.title || "Video" }) }) })
120              ] })
121            ] })
122          ] }),
123          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
124            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-medium text-gray-500 mb-2", children: allMedia.length > 0 ? "Thumbnails" : "No media available" }),

125            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-32 overflow-x-auto overflow-y-hidden flex gap-3 p-1 pr-2 scrollbar-hide", children: allMedia.length > 0 ? allMedia.map((item) => {
126              const isActive = active?.id === item.id;
127              const isVideo = item.type === "video";
128              const isFloorPlan = item.title?.toLowerCase() === "floor plan";
129              return /* @__PURE__ */ jsxRuntimeExports.jsxs(
130                "div",
131                {
132                  onClick: () => {
133                    if (isVideo) setActiveTab("videos");
134                    else if (isFloorPlan) setActiveTab("floor");
135                    else setActiveTab("images");
136                    setActive(item);
137                  },
138                  className: `relative w-36 h-28 cursor-pointer rounded-lg border transition-all overflow-hidden flex-shrink-0
139                      ${isActive ? " ring-1 ring-[#002B5B] scale-[1.03]" : "border-gray-200 hover:border-gray-400 hover:shadow-md"}`,
140                  children: [
141                    isVideo ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [

142                      /* @__PURE__ */ jsxRuntimeExports.jsx("video", { className: "w-full h-full object-cover", children: /* @__PURE__ */ jsxRuntimeExports.jsx("source", { src: item.url }) }),
143                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-black/20 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 rounded-full bg-white/90 flex items-center justify-center shadow", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-[2px] text-xs font-bold", children: "▶" }) }) })
144                    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
145                      "img",
146                      {
147                        src: item.url,
148                        alt: item.title || "Thumbnail",
149                        className: "w-full h-full object-cover"
150                      }
151                    ),
152                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-1 left-1 right-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex max-w-full px-2 py-0.5 rounded-full bg-black/60", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-[10px] text-white leading-tight", children: item.alt || item.title || (isVideo ? "Video" : "Image") }) }) })
153                  ]
154                },
155                item.id || item.url
156              );
157            }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center w-full text-gray-400 text-sm", children: "No thumbnails found" }) })
158          ] })
159        ] })
160      ]
161    }
162  );
163};
164
165export { MediaGallery as M };