@ericchen1990/pano-view 2.1.0 → 2.2.0

package/dist/index.cjs

@@ -769,7 +769,7 @@ function useHotspotAccessibilityLayer() {
       "button",
       {
         "aria-label": entry.label,
-        className: "sr-only",
+        className: "pano-sr-only",
         onBlur: () => entry.onFocusChange(false),
         onClick: (event) => entry.activate(event.nativeEvent),
         onFocus: () => entry.onFocusChange(true),
@@ -1478,9 +1478,6 @@ function DefaultContextMenuPanel({
     fontSize: resolved.fontSize,
     minWidth: resolved.minWidth,
     padding: resolved.padding,
-    pointerEvents: "auto",
-    position: "relative",
-    userSelect: "none",
     ...style
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -1488,7 +1485,7 @@ function DefaultContextMenuPanel({
     {
       ref: menuRef,
       "aria-label": "Panorama context menu",
-      className: cn("relative select-none", className),
+      className: cn("pano-context-menu", className),
       onKeyDown: handleKeyDown,
       role: "menu",
       style: panelStyle,
@@ -1498,7 +1495,7 @@ function DefaultContextMenuPanel({
           "div",
           {
             "aria-hidden": true,
-            className: "pointer-events-none absolute inset-0 z-0",
+            className: "pano-context-menu-backdrop",
             style: {
               background: resolved.background,
               borderRadius: resolved.borderRadius,
@@ -1506,7 +1503,7 @@ function DefaultContextMenuPanel({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative z-[1]", children: visibleItems.map((item, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pano-context-menu-items", children: visibleItems.map((item, index) => {
           if (!isActionItem(item)) {
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
@@ -1544,7 +1541,7 @@ function DefaultContextMenuPanel({
             {
               "aria-disabled": disabled || void 0,
               className: cn(
-                "flex w-full items-center gap-2 rounded text-left",
+                "pano-context-menu-item",
                 itemClassName,
                 item.className
               ),
@@ -1579,7 +1576,7 @@ function DefaultContextMenuPanel({
                   "span",
                   {
                     "aria-hidden": true,
-                    className: "inline-flex shrink-0 items-center justify-center",
+                    className: "pano-context-menu-item-icon",
                     style: {
                       height: iconSize,
                       width: iconSize
@@ -1630,7 +1627,7 @@ function PositionedMenuShell({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
-      className: "absolute z-20",
+      className: "pano-context-menu-shell",
       ref: shellRef,
       style: {
         left: offset.left,
@@ -2747,7 +2744,7 @@ function usePanoChromeOverlay() {
   const overlay = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
-      className: "pointer-events-none absolute inset-0 z-[15]",
+      className: "pano-chrome-overlay",
       "data-pano-chrome-overlay": "",
       ref: setOverlayNode
     }
@@ -2839,14 +2836,7 @@ function PanoVideoCaptionsOverlay({
     return null;
   }
   const wrapperStyle = {
-    bottom: snapshot.captionAppearance.bottom,
-    display: "flex",
-    justifyContent: "center",
-    left: 0,
-    pointerEvents: "none",
-    position: "absolute",
-    right: 0,
-    zIndex: 1
+    bottom: snapshot.captionAppearance.bottom
   };
   const textStyle = {
     background: snapshot.captionAppearance.background,
@@ -2865,7 +2855,7 @@ function PanoVideoCaptionsOverlay({
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
-      className: "pointer-events-none absolute inset-x-0 z-1 flex justify-center",
+      className: "pano-video-captions",
       "data-pano-video-captions": "",
       style: wrapperStyle,
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: textStyle, children: snapshot.captionText })
@@ -3100,7 +3090,7 @@ function ChromeButton({
     "button",
     {
       "aria-label": label,
-      className: "inline-flex min-h-7 min-w-7 items-center justify-center rounded",
+      className: "pano-video-chrome-button",
       disabled,
       id,
       onClick,
@@ -3108,18 +3098,7 @@ function ChromeButton({
         event.stopPropagation();
       },
       style: {
-        alignItems: "center",
-        background: "transparent",
-        border: "none",
-        borderRadius: 4,
-        color: appearance.color,
-        cursor: disabled ? "default" : "pointer",
-        display: "inline-flex",
-        height: 28,
-        justifyContent: "center",
-        minWidth: 28,
-        opacity: disabled ? 0.45 : 1,
-        padding: 4
+        color: appearance.color
       },
       title: label,
       type: "button",
@@ -3164,7 +3143,7 @@ function ChromeMenuSurface({
     "div",
     {
       "aria-labelledby": labelledBy,
-      className: "absolute right-0 flex min-w-28 flex-col p-1",
+      className: "pano-video-chrome-menu",
       id,
       role,
       style: {
@@ -3188,7 +3167,7 @@ function ChromeMenuRadioItem({
     "button",
     {
       "aria-checked": active,
-      className: "rounded px-2.5 py-1.5 text-left whitespace-nowrap",
+      className: "pano-video-chrome-menu-item",
       onClick,
       role: "menuitemradio",
       style: {
@@ -3212,7 +3191,7 @@ function ChromeMenuActionItem({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
-      className: "flex items-center justify-between gap-3 rounded px-2.5 py-1.5 text-left whitespace-nowrap",
+      className: "pano-video-chrome-menu-action",
       onClick,
       role: "menuitem",
       style: {
@@ -3233,17 +3212,10 @@ function ChromeMenuActionItem({
 function ChromeMenuSectionLabel({
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "div",
-    {
-      className: "px-2.5 pt-2 pb-1 uppercase opacity-70",
-      style: { fontSize: 10, letterSpacing: "0.08em" },
-      children
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pano-video-chrome-menu-label", children });
 }
 function ChromeMenuDivider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "my-1 h-px bg-white/10" });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pano-video-chrome-menu-divider" });
 }
 function CaptionsMenu({
   appearance,
@@ -3264,7 +3236,7 @@ function CaptionsMenu({
       labelledBy,
       role: "menu",
       children: panel === "tracks" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex max-h-48 flex-col overflow-y-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-chrome-menu-list", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             ChromeMenuRadioItem,
             {
@@ -3372,7 +3344,7 @@ function VerticalVolumeSlider({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      className: "absolute left-1/2 flex min-w-11 -translate-x-1/2 flex-col items-center rounded-[14px]",
+      className: "pano-video-volume-popover",
       style: {
         background: "rgba(12, 12, 12, 0.92)",
         bottom: `calc(100% + ${CHROME_POPOVER_GAP}px)`,
@@ -3387,7 +3359,7 @@ function VerticalVolumeSlider({
           "span",
           {
             "aria-hidden": true,
-            className: "mb-3.5 font-bold leading-none [font-variant-numeric:tabular-nums]",
+            className: "pano-video-volume-percent",
             style: {
               color: appearance.color,
               fontSize: VOLUME_POP_FONT_SIZE
@@ -3426,7 +3398,7 @@ function VerticalVolumeSlider({
                 },
                 ref: trackRef,
                 role: "slider",
-                className: "relative cursor-pointer rounded-[999px]",
+                className: "pano-video-volume-track",
                 style: {
                   background: "rgba(255, 255, 255, 0.14)",
                   borderRadius: 999,
@@ -3523,7 +3495,7 @@ function VolumeControl({
     "div",
     {
       "data-pano-video-volume": "",
-      className: "relative",
+      className: "pano-video-volume",
       onBlur: (event) => {
         if (event.currentTarget.contains(event.relatedTarget)) {
           return;
@@ -3854,7 +3826,7 @@ function PanoVideoControlsHud({
     transition: "opacity 160ms ease",
     zIndex: 2
   };
-  const rateButton = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", "data-pano-video-menu": "rate", children: [
+  const rateButton = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "rate", children: [
     !compact && menu === "rate" ? menuNode : null,
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChromeButton,
@@ -3864,11 +3836,11 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("rate");
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "px-0.5 text-[11px]", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pano-video-chrome-label", id: `${barId}-rate-btn`, children: snapshot.playbackRate === 1 ? "1x" : `${snapshot.playbackRate}x` })
       }
     )
   ] });
-  const variantButton = canSwitchVariant ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", "data-pano-video-menu": "variant", children: [
+  const variantButton = canSwitchVariant ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "variant", children: [
     !compact && menu === "variant" ? menuNode : null,
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChromeButton,
@@ -3878,11 +3850,11 @@ function PanoVideoControlsHud({
         onClick: () => {
           toggleMenu("variant");
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "px-0.5 text-[11px]", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pano-video-chrome-label", id: `${barId}-variant-btn`, children: snapshot.variants.find((variant) => variant.id === snapshot.variantId)?.label ?? "Quality" })
       }
     )
   ] }) : null;
-  const captionsButton = showCaptionsMenu ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", "data-pano-video-menu": "captions", children: [
+  const captionsButton = showCaptionsMenu ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "captions", children: [
     !compact && menu === "captions" ? menuNode : null,
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChromeButton,
@@ -3899,7 +3871,7 @@ function PanoVideoControlsHud({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      className: "absolute right-2.5 bottom-2.5 left-2.5 z-2 flex items-center gap-2 transition-opacity",
+      className: "pano-video-controls",
       "data-pano-video-controls": "",
       style: barStyle,
       children: [
@@ -3914,7 +3886,7 @@ function PanoVideoControlsHud({
             children: snapshot.playing ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { path: "M5 3.5h2.2v9H5zM8.8 3.5H11v9H8.8z" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { path: "M5 3.2v9.6L13 8z" })
           }
         ),
-        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-8.5 opacity-[0.85] [font-variant-numeric:tabular-nums]", children: formatMediaTime(snapshot.currentTime) }),
+        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pano-video-time", children: formatMediaTime(snapshot.currentTime) }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
@@ -3937,7 +3909,7 @@ function PanoVideoControlsHud({
             value: duration > 0 ? snapshot.currentTime : 0
           }
         ),
-        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-8.5 opacity-[0.85]", children: formatMediaTime(duration) }),
+        hideTime ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pano-video-time", children: formatMediaTime(duration) }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           VolumeControl,
           {
@@ -3954,7 +3926,7 @@ function PanoVideoControlsHud({
             volumeAdjustable: snapshot.volumeAdjustable
           }
         ),
-        compact ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", "data-pano-video-menu": "more", children: [
+        compact ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pano-video-menu", "data-pano-video-menu": "more", children: [
           menu !== null ? menuNode : null,
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             ChromeButton,
@@ -4191,7 +4163,7 @@ function ChromeButton2({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "button",
     {
-      className: "pointer-events-auto border border-white/20 px-3 py-2 font-semibold shadow-lg backdrop-blur-sm",
+      className: "pano-webvr-button",
       onClick,
       style: {
         background: appearance.background,
@@ -4229,19 +4201,19 @@ function SetupPanel({
     "div",
     {
       "aria-label": "Mobile VR setup",
-      className: "pointer-events-auto absolute top-1/2 left-1/2 w-[min(22rem,calc(100%-2rem))] -translate-x-1/2 -translate-y-1/2 border border-white/20 p-5 text-center shadow-2xl backdrop-blur-md",
+      className: "pano-webvr-setup",
       role: "dialog",
       style: panelStyle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "m-0 mb-5 text-2xl font-extrabold", children: appearance.setupTitle ?? "MobileVR Setup" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "mb-5 block font-semibold", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "pano-webvr-setup-title", children: appearance.setupTitle ?? "MobileVR Setup" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "pano-webvr-setup-field", children: [
           "Screen size (inch)",
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pano-webvr-setup-row", children: [
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 "aria-label": "Decrease screen size",
-                className: "text-2xl",
+                className: "pano-webvr-setup-stepper",
                 onClick: () => setScreensize(
                   settings.screensize === "auto" ? 5 : Math.max(3, settings.screensize - 0.1)
                 ),
@@ -4249,12 +4221,12 @@ function SetupPanel({
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { className: "min-w-16 text-xl", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { className: "pano-webvr-setup-value", children: settings.screensize === "auto" ? "Auto" : settings.screensize.toFixed(1) }),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 "aria-label": "Increase screen size",
-                className: "text-2xl",
+                className: "pano-webvr-setup-stepper",
                 onClick: () => setScreensize(
                   settings.screensize === "auto" ? 5 : Math.min(20, settings.screensize + 0.1)
                 ),
@@ -4264,25 +4236,25 @@ function SetupPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("fieldset", { className: "m-0 mb-5 border-0 p-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("legend", { className: "mb-2 font-semibold", children: "VR headset preset" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("fieldset", { className: "pano-webvr-setup-fieldset", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("legend", { className: "pano-webvr-setup-legend", children: "VR headset preset" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pano-webvr-setup-row", children: [
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 "aria-label": "Previous headset preset",
-                className: "text-2xl",
+                className: "pano-webvr-setup-stepper",
                 onClick: () => cycleProfile(-1),
                 type: "button",
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { className: "min-w-32 text-xl", children: WEBVR_PROFILES[settings.profileId].label }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { className: "pano-webvr-setup-value-wide", children: WEBVR_PROFILES[settings.profileId].label }),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 "aria-label": "Next headset preset",
-                className: "text-2xl",
+                className: "pano-webvr-setup-stepper",
                 onClick: () => cycleProfile(1),
                 type: "button",
                 children: "\u203A"
@@ -4314,7 +4286,7 @@ function WebVRChromeBridge({ host }) {
   }
   const appearance = resolveAppearance(chrome);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-4 flex justify-center", children: mode ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pano-webvr-toolbar", children: mode ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pano-webvr-toolbar-actions", children: [
       mode !== "webxr" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         ChromeButton2,
         {
@@ -4342,7 +4314,7 @@ function WebVRChromeBridge({ host }) {
     mode === "fake" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "p",
       {
-        className: "pointer-events-none absolute inset-x-0 bottom-5 m-0 text-center text-xs font-semibold text-white drop-shadow",
+        className: "pano-webvr-hint",
         style: { color: appearance.color },
         children: "Simulated VR Mode \xB7 Click the view to lock the mouse, then move to look around. Use a headset or phone for real VR."
       }
@@ -4688,7 +4660,7 @@ var PanoViewer = (0, import_react22.forwardRef)(
       "div",
       {
         ...divProps,
-        className: cn("relative overflow-hidden", divProps.className),
+        className: cn("pano-viewer", divProps.className),
         "data-pano-viewer": "",
         ref: rootRef,
         "aria-label": ariaLabel,
@@ -4787,12 +4759,9 @@ var PanoViewer = (0, import_react22.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
-              className: "pointer-events-none absolute inset-0 z-15",
+              className: "pano-chrome-overlay",
               "data-pano-chrome-overlay": "",
               ref: setOverlayNode,
-              style: {
-                inset: 0
-              },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   PanoVideoChromeBridge,
@@ -9562,7 +9531,7 @@ function HotspotTooltip({
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PanoHtml, { pointerEvents: "none", style: WRAPPER_STYLE, zIndexRange: [20, 10], children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
-      className: "pointer-events-none flex gap-2 whitespace-nowrap",
+      className: "pano-hotspot-tooltip",
       role: "tooltip",
       style: bubbleStyle,
       children: [
@@ -9570,12 +9539,12 @@ function HotspotTooltip({
           "img",
           {
             alt: content.imageAlt ?? content.text ?? "",
-            className: "block h-auto max-h-[120px] max-w-[220px] rounded object-contain",
+            className: "pano-hotspot-tooltip-image",
             onError: () => setImageFailed(true),
             src: content.image
           }
         ) : null,
-        content.text ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "m-0 overflow-visible whitespace-nowrap leading-[1.4]", children: content.text }) : null
+        content.text ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "pano-hotspot-tooltip-text", children: content.text }) : null
       ]
     }
   ) });
@@ -12120,7 +12089,7 @@ function IframeHotspot({
               "iframe",
               {
                 allow,
-                className: "block h-full w-full border-0",
+                className: "pano-iframe-hotspot",
                 loading,
                 onError: (event) => onError?.(event.nativeEvent),
                 onLoad,