@omg-dev/pwa 0.4.34 → 0.4.37

package/dist/auto.mjs

@@ -1,4 +1,4 @@
-import { a as countVisit, c as isInIframe, f as setAutoShown, l as isIosInstallPlatform, m as wasAutoShown, n as VibesInstallPrompt, o as detectPlatform, s as isDismissed, u as isStandalone } from "./react-FTnyFbZ_.mjs";
+import { a as countVisit, c as isInIframe, f as setAutoShown, l as isIosInstallPlatform, m as wasAutoShown, n as VibesInstallPrompt, o as detectPlatform, s as isDismissed, u as isStandalone } from "./react-BHavFwjG.mjs";
 import { jsx } from "react/jsx-runtime";
 import { createRoot } from "react-dom/client";
 //#region src/auto.tsx

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import { a as countVisit, c as isInIframe, d as promptNativeInstall, i as useInstallPrompt, l as isIosInstallPlatform, n as VibesInstallPrompt, o as detectPlatform, p as setDismissed, r as defaultAppName, s as isDismissed, t as InstallGuide, u as isStandalone } from "./react-FTnyFbZ_.mjs";
+import { a as countVisit, c as isInIframe, d as promptNativeInstall, i as useInstallPrompt, l as isIosInstallPlatform, n as VibesInstallPrompt, o as detectPlatform, p as setDismissed, r as defaultAppName, s as isDismissed, t as InstallGuide, u as isStandalone } from "./react-BHavFwjG.mjs";
 export { InstallGuide, VibesInstallPrompt, countVisit, defaultAppName, detectPlatform, isDismissed, isInIframe, isIosInstallPlatform, isStandalone, promptNativeInstall, setDismissed, useInstallPrompt };

package/dist/{react-FTnyFbZ_.mjs → react-BHavFwjG.mjs}

@@ -262,13 +262,36 @@ const CSS = `
   display: flex; flex-direction: column; align-items: center; gap: 10px;
   margin: 0; padding: 0;
 }
-.vpwa-video {
-  display: block; width: auto; max-width: 100%;
-  height: min(56dvh, 520px); max-height: 520px;
+.vpwa-video-frame {
+  position: relative; overflow: hidden;
+  width: min(100%, 31.5dvh, 292.5px);
+  aspect-ratio: 9 / 16;
   border: 1px solid var(--border, var(--vpwa-border)); border-radius: 18px;
-  background: #000; object-fit: contain;
+  background: #000;
   box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
 }
+.vpwa-video {
+  display: block; width: 100%; height: 100%;
+  object-fit: cover;
+}
+.vpwa-video-loading {
+  position: absolute; inset: 0;
+  display: flex; align-items: flex-end; justify-content: center;
+  padding: 20px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.48), transparent 42%);
+  pointer-events: none;
+}
+.vpwa-video-loading span {
+  color: transparent; font-size: 12px; font-weight: 600; line-height: 1;
+  letter-spacing: 0.01em;
+  background: linear-gradient(100deg, rgba(255,255,255,0.46) 20%, #fff 45%, rgba(255,255,255,0.46) 70%);
+  background-size: 220% 100%; background-clip: text; -webkit-background-clip: text;
+  animation: vpwa-text-shimmer 1.6s ease-in-out infinite;
+}
+@keyframes vpwa-text-shimmer {
+  from { background-position: 100% 0; }
+  to { background-position: -100% 0; }
+}
 .vpwa-video-guide figcaption {
   max-width: 32rem; color: var(--muted-foreground, var(--vpwa-muted));
   font-size: 12px; line-height: 1.45; text-align: center;
@@ -314,6 +337,7 @@ const CSS = `
 }
 @media (prefers-reduced-motion: reduce) {
   .vpwa-target { animation: none; }
+  .vpwa-video-loading span { animation: none; color: rgba(255,255,255,0.82); }
   .vpwa-sheet, .vpwa-backdrop, .vpwa-banner { transition: none; }
 }
 
@@ -711,17 +735,19 @@ function stepsFor(platform) {
 		case "unsupported": return null;
 	}
 }
-function InstallGuide({ open, onClose, appName, iosVideoSrc }) {
+function InstallGuide({ open, onClose, appName, iosVideoSrc, iosVideoPoster }) {
 	const { platform, canPrompt, installed, promptInstall } = useInstallPrompt();
 	const name = appName ?? defaultAppName();
 	const [mounted, setMounted] = useState(open);
 	const [shown, setShown] = useState(false);
 	const [videoFailed, setVideoFailed] = useState(false);
+	const [videoLoading, setVideoLoading] = useState(true);
 	useEffect(() => {
 		ensureStyles();
 		if (open) {
 			setMounted(true);
 			setVideoFailed(false);
+			setVideoLoading(true);
 			const raf = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)));
 			return () => cancelAnimationFrame(raf);
 		}
@@ -771,19 +797,29 @@ function InstallGuide({ open, onClose, appName, iosVideoSrc }) {
 	});
 	else if (isIosInstallPlatform(platform) && iosVideoSrc && !videoFailed) body = /* @__PURE__ */ jsxs("figure", {
 		className: "vpwa-video-guide",
-		children: [/* @__PURE__ */ jsx("video", {
-			className: "vpwa-video",
-			src: iosVideoSrc,
-			autoPlay: true,
-			controls: true,
-			controlsList: "nodownload noremoteplayback",
-			disablePictureInPicture: true,
-			loop: true,
-			muted: true,
-			playsInline: true,
-			preload: "auto",
-			"aria-label": "iOS Add to Home Screen walkthrough",
-			onError: () => setVideoFailed(true)
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "vpwa-video-frame",
+			children: [/* @__PURE__ */ jsx("video", {
+				className: "vpwa-video",
+				src: iosVideoSrc,
+				poster: iosVideoPoster,
+				autoPlay: true,
+				disablePictureInPicture: true,
+				loop: true,
+				muted: true,
+				playsInline: true,
+				preload: "auto",
+				"aria-label": "iOS Add to Home Screen walkthrough",
+				onCanPlay: () => setVideoLoading(false),
+				onPlaying: () => setVideoLoading(false),
+				onWaiting: () => setVideoLoading(true),
+				onError: () => setVideoFailed(true)
+			}), videoLoading ? /* @__PURE__ */ jsx("div", {
+				className: "vpwa-video-loading",
+				role: "status",
+				"aria-label": "Loading walkthrough video",
+				children: /* @__PURE__ */ jsx("span", { children: "Loading walkthrough…" })
+			}) : null]
 		}), /* @__PURE__ */ jsx("figcaption", { children: "Open your browser’s Share menu, choose Add to Home Screen, then tap Add." })]
 	});
 	else if (steps) body = /* @__PURE__ */ jsx("ol", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omg-dev/pwa",
-  "version": "0.4.34",
+  "version": "0.4.37",
   "type": "module",
   "exports": {
     ".": {

package/src/react.tsx

@@ -171,12 +171,15 @@ export function InstallGuide({
   onClose,
   appName,
   iosVideoSrc,
+  iosVideoPoster,
 }: {
   open: boolean
   onClose: () => void
   appName?: string
   /** Optional iOS walkthrough video. Static steps remain the load-failure fallback. */
   iosVideoSrc?: string
+  /** Optional poster shown while the iOS walkthrough video loads. */
+  iosVideoPoster?: string
 }) {
   const { platform, canPrompt, installed, promptInstall } = useInstallPrompt()
   const name = appName ?? defaultAppName()
@@ -185,12 +188,14 @@ export function InstallGuide({
   const [mounted, setMounted] = useState(open)
   const [shown, setShown] = useState(false)
   const [videoFailed, setVideoFailed] = useState(false)
+  const [videoLoading, setVideoLoading] = useState(true)
 
   useEffect(() => {
     ensureStyles()
     if (open) {
       setMounted(true)
       setVideoFailed(false)
+      setVideoLoading(true)
       const raf = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)))
       return () => cancelAnimationFrame(raf)
     }
@@ -244,20 +249,29 @@ export function InstallGuide({
   } else if (isIosInstallPlatform(platform) && iosVideoSrc && !videoFailed) {
     body = (
       <figure className="vpwa-video-guide">
-        <video
-          className="vpwa-video"
-          src={iosVideoSrc}
-          autoPlay
-          controls
-          controlsList="nodownload noremoteplayback"
-          disablePictureInPicture
-          loop
-          muted
-          playsInline
-          preload="auto"
-          aria-label="iOS Add to Home Screen walkthrough"
-          onError={() => setVideoFailed(true)}
-        />
+        <div className="vpwa-video-frame">
+          <video
+            className="vpwa-video"
+            src={iosVideoSrc}
+            poster={iosVideoPoster}
+            autoPlay
+            disablePictureInPicture
+            loop
+            muted
+            playsInline
+            preload="auto"
+            aria-label="iOS Add to Home Screen walkthrough"
+            onCanPlay={() => setVideoLoading(false)}
+            onPlaying={() => setVideoLoading(false)}
+            onWaiting={() => setVideoLoading(true)}
+            onError={() => setVideoFailed(true)}
+          />
+          {videoLoading ? (
+            <div className="vpwa-video-loading" role="status" aria-label="Loading walkthrough video">
+              <span>Loading walkthrough…</span>
+            </div>
+          ) : null}
+        </div>
         <figcaption>
           Open your browser’s Share menu, choose Add to Home Screen, then tap Add.
         </figcaption>

package/src/styles.ts

@@ -115,13 +115,36 @@ const CSS = `
   display: flex; flex-direction: column; align-items: center; gap: 10px;
   margin: 0; padding: 0;
 }
-.vpwa-video {
-  display: block; width: auto; max-width: 100%;
-  height: min(56dvh, 520px); max-height: 520px;
+.vpwa-video-frame {
+  position: relative; overflow: hidden;
+  width: min(100%, 31.5dvh, 292.5px);
+  aspect-ratio: 9 / 16;
   border: 1px solid var(--border, var(--vpwa-border)); border-radius: 18px;
-  background: #000; object-fit: contain;
+  background: #000;
   box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
 }
+.vpwa-video {
+  display: block; width: 100%; height: 100%;
+  object-fit: cover;
+}
+.vpwa-video-loading {
+  position: absolute; inset: 0;
+  display: flex; align-items: flex-end; justify-content: center;
+  padding: 20px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.48), transparent 42%);
+  pointer-events: none;
+}
+.vpwa-video-loading span {
+  color: transparent; font-size: 12px; font-weight: 600; line-height: 1;
+  letter-spacing: 0.01em;
+  background: linear-gradient(100deg, rgba(255,255,255,0.46) 20%, #fff 45%, rgba(255,255,255,0.46) 70%);
+  background-size: 220% 100%; background-clip: text; -webkit-background-clip: text;
+  animation: vpwa-text-shimmer 1.6s ease-in-out infinite;
+}
+@keyframes vpwa-text-shimmer {
+  from { background-position: 100% 0; }
+  to { background-position: -100% 0; }
+}
 .vpwa-video-guide figcaption {
   max-width: 32rem; color: var(--muted-foreground, var(--vpwa-muted));
   font-size: 12px; line-height: 1.45; text-align: center;
@@ -167,6 +190,7 @@ const CSS = `
 }
 @media (prefers-reduced-motion: reduce) {
   .vpwa-target { animation: none; }
+  .vpwa-video-loading span { animation: none; color: rgba(255,255,255,0.82); }
   .vpwa-sheet, .vpwa-backdrop, .vpwa-banner { transition: none; }
 }