@flamingo-stack/openframe-frontend-core 0.0.760 → 0.0.763

package/dist/components/features/walkthrough-video.js

@@ -15,6 +15,7 @@ import { VolumeXmarkIcon } from "../icons-v2-generated/audio-and-visual/volume-x
 import { PauseIcon } from "../icons-v2-generated/media-playback/pause-icon.js";
 import { PlayIcon } from "../icons-v2-generated/media-playback/play-icon.js";
 import { XmarkIcon } from "../icons-v2-generated/signs-and-symbols/xmark-icon.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/button/index.js";
 import { DialogPortal, DialogOverlay } from "../ui/dialog.js";
 import { SquareAvatar } from "../ui/square-avatar.js";
@@ -22,6 +23,7 @@ import { CardHitLayer } from "./card-hit-layer.js";
 import { Video } from "./video.js";
 import { VideoPlayBadge, VideoUnmuteGlyph } from "./video-center-badge.js";
 import { VideoHoverPreviewSurface } from "./video-hover-preview.js";
+const INLINE_CARD_BOX_CLASS = "aspect-video w-full rounded-md border border-ods-border";
 const FIRST_INTERACTION_EVENTS = ["scroll", "pointerdown", "keydown"];
 const isAtEnd = (duration, time) => duration > 0 && duration - time < 1;
 function theaterSeedFromLive(live, fallbackTime, fallbackMuted) {
@@ -451,6 +453,7 @@ function WalkthroughVideo({
         // receives pointer events — the media layer is pointer-events-none, so
         // a group inside it can never match :hover.
         "group/card pointer-events-auto relative overflow-hidden rounded-md border border-ods-border bg-ods-card",
+        inline && INLINE_CARD_BOX_CLASS,
         // The lift is what separates a FLOATING card from the page beneath it;
         // an in-flow block sitting inside a host card needs no shadow at all.
         !inline && "shadow-2xl",
@@ -599,6 +602,7 @@ function WalkthroughVideo({
     }
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    inline && !showCard && !dismissed && /* @__PURE__ */ jsx(InlineWalkthroughVideoSkeleton, { className }),
     showCard && (inline ? (
       // No wrapper: a positioning / z-index / safe-area shell around an
       // in-flow block is exactly what stops it sizing to its container.
@@ -692,7 +696,11 @@ function FloatingWalkthroughVideo(props) {
 function InlineWalkthroughVideo(props) {
   return /* @__PURE__ */ jsx(WalkthroughVideo, { ...props, placement: "inline", appearDelayMs: 0, dismissal: false });
 }
+function InlineWalkthroughVideoSkeleton({ className }) {
+  return /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(INLINE_CARD_BOX_CLASS, className) });
+}
 export {
   FloatingWalkthroughVideo,
-  InlineWalkthroughVideo
+  InlineWalkthroughVideo,
+  InlineWalkthroughVideoSkeleton
 };