@thewhateverapp/tile-sdk 0.12.2 → 0.12.4

package/dist/react/overlay/VideoPlayer.d.ts

@@ -59,28 +59,14 @@ export interface CuePoint {
     data?: unknown;
 }
 export interface VideoPlayerProps {
-    /**
-     * Video source URL (HLS playlist or direct video URL).
-     * If not provided, VideoPlayer will auto-fetch from the tile's metadata
-     * using the tileId from NEXT_PUBLIC_TILE_ID environment variable.
-     */
-    src?: string;
-    /** Auto-start playback (default: true, or from tile metadata) */
-    autoplay?: boolean;
-    /** Loop video (default: false, but true in preview mode) */
-    loop?: boolean;
-    /** Start muted (default: true for autoplay compliance) */
-    muted?: boolean;
-    /** Poster image URL (auto-fetched from tile metadata if not provided) */
-    poster?: string;
-    /** Show native controls (default: false) */
-    controls?: boolean;
     /** Children rendered as overlay */
     children?: ReactNode;
     /** Additional class names */
     className?: string;
     /** Video wrapper class names */
     videoClassName?: string;
+    /** Show native controls (default: false) */
+    controls?: boolean;
     /** Cue points for time-based triggers */
     cuePoints?: CuePoint[];
     /** Callback when a cue point is reached */
@@ -93,13 +79,20 @@ export interface VideoPlayerProps {
  * Provides video state and controls to child overlays via context.
  *
  * Features:
+ * - Auto-fetches video URL from tile metadata (no src prop needed!)
  * - HLS streaming with automatic quality adaptation
  * - Time-based cue points for triggering overlays
  * - Visibility-aware playback (plays when visible, pauses when hidden)
- * - Auto-loops in preview mode for testing
- * - Auto-fetches video URL from tile metadata when src is not provided
+ * - Auto-loops by default (can be disabled via tile metadata)
+ *
+ * Usage:
+ * ```tsx
+ * <VideoPlayer className="w-full h-full">
+ *   <YourOverlay />
+ * </VideoPlayer>
+ * ```
  */
-export declare function VideoPlayer({ src: srcProp, autoplay: autoplayProp, loop: loopProp, muted: mutedProp, poster: posterProp, controls, children, className, videoClassName, cuePoints, onCuePoint, onTimeUpdate, }: VideoPlayerProps): React.JSX.Element;
+export declare function VideoPlayer({ controls, children, className, videoClassName, cuePoints, onCuePoint, onTimeUpdate, }: VideoPlayerProps): React.JSX.Element;
 /**
  * Hook to access video state and controls from within VideoPlayer children.
  */

package/dist/react/overlay/VideoPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/VideoPlayer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/VideoPlayer.tsx"],"names":[],"mappings":"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"}

package/dist/react/overlay/VideoPlayer.js

@@ -38,24 +38,25 @@ async function fetchVideoMetadata(tileId) {
     }
 }
 const VideoContext = createContext(null);
-// Detect if we're in preview mode (tile-preview sets this global)
-function isPreviewMode() {
-    if (typeof window === 'undefined')
-        return false;
-    return !!window.__PREVIEW_SESSION_ID__;
-}
 /**
  * VideoPlayer component with HLS streaming support.
  * Provides video state and controls to child overlays via context.
  *
  * Features:
+ * - Auto-fetches video URL from tile metadata (no src prop needed!)
  * - HLS streaming with automatic quality adaptation
  * - Time-based cue points for triggering overlays
  * - Visibility-aware playback (plays when visible, pauses when hidden)
- * - Auto-loops in preview mode for testing
- * - Auto-fetches video URL from tile metadata when src is not provided
+ * - Auto-loops by default (can be disabled via tile metadata)
+ *
+ * Usage:
+ * ```tsx
+ * <VideoPlayer className="w-full h-full">
+ *   <YourOverlay />
+ * </VideoPlayer>
+ * ```
  */
-export function VideoPlayer({ src: srcProp, autoplay: autoplayProp, loop: loopProp, muted: mutedProp, poster: posterProp, controls = false, children, className = '', videoClassName = '', cuePoints = [], onCuePoint, onTimeUpdate, }) {
+export function VideoPlayer({ controls = false, children, className = '', videoClassName = '', cuePoints = [], onCuePoint, onTimeUpdate, }) {
     const videoRef = useRef(null);
     const hlsRef = useRef(null);
     const triggeredCuePointsRef = useRef(new Set());
@@ -63,15 +64,11 @@ export function VideoPlayer({ src: srcProp, autoplay: autoplayProp, loop: loopPr
     // State for auto-fetched metadata
     const [metadata, setMetadata] = useState(null);
     const [metadataError, setMetadataError] = useState(null);
-    // Auto-fetch video metadata if no src provided
+    // Auto-fetch video metadata from tile
     useEffect(() => {
-        if (srcProp) {
-            // src provided directly, no need to fetch
-            return;
-        }
         const tileId = getTileId();
         if (!tileId) {
-            setMetadataError('No video source: src prop not provided and NEXT_PUBLIC_TILE_ID not set');
+            setMetadataError('NEXT_PUBLIC_TILE_ID not set');
             return;
         }
         fetchVideoMetadata(tileId).then((data) => {
@@ -87,14 +84,14 @@ export function VideoPlayer({ src: srcProp, autoplay: autoplayProp, loop: loopPr
                 setMetadataError('Failed to fetch video metadata');
             }
         });
-    }, [srcProp]);
-    // Resolve actual values from props or metadata
-    const src = srcProp || metadata?.videoUrl || null;
-    const autoplay = autoplayProp ?? metadata?.autoplay ?? true;
-    const muted = mutedProp ?? metadata?.muted ?? true;
-    const poster = posterProp || metadata?.thumbnail || undefined;
-    // Auto-enable loop in preview mode unless explicitly set to false
-    const loop = loopProp ?? metadata?.loop ?? isPreviewMode();
+    }, []);
+    // Get values from metadata
+    const src = metadata?.videoUrl || null;
+    const autoplay = metadata?.autoplay ?? true;
+    const muted = metadata?.muted ?? false;
+    const poster = metadata?.thumbnail || undefined;
+    // Default to loop enabled (videos almost always loop)
+    const loop = metadata?.loop ?? true;
     const [state, setState] = useState({
         isPlaying: false,
         currentTime: 0,
@@ -277,9 +274,9 @@ export function VideoPlayer({ src: srcProp, autoplay: autoplayProp, loop: loopPr
             video.removeEventListener('loadeddata', handleLoadedData);
         };
     }, [onTimeUpdate, onCuePoint, cuePoints]);
-    // Visibility handling - play/pause AND mute/unmute based on tile visibility
-    // Enables TikTok-style preloaded video tiles that only play when visible
-    // Audio is controlled here to ensure only the visible tile has sound
+    // Visibility handling - play/pause AND mute/unmute based on tile visibility.
+    // Enables TikTok-style preloaded video tiles that only play when visible.
+    // Audio is controlled here to ensure only the visible tile has sound.
     useEffect(() => {
         const video = videoRef.current;
         if (!video || !autoplay)
@@ -304,8 +301,18 @@ export function VideoPlayer({ src: srcProp, autoplay: autoplayProp, loop: loopPr
                     video.pause();
                 }
             });
-            // Check initial visibility state
-            if (!bridge.isVisible()) {
+            // Check initial visibility state and set audio accordingly
+            if (bridge.isVisible()) {
+                // If visible on mount, unmute so sound plays
+                // This handles the race condition where the first tile loads visible
+                video.muted = false;
+                // If unmuted autoplay fails, fall back to muted
+                video.play().catch(() => {
+                    video.muted = true;
+                    video.play().catch(() => { });
+                });
+            }
+            else {
                 // If not visible on mount, ensure muted and paused
                 video.muted = true;
                 video.pause();
@@ -344,7 +351,7 @@ export function VideoPlayer({ src: srcProp, autoplay: autoplayProp, loop: loopPr
             display: none !important;
           }
         `),
-            state.isLoading && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center" },
+            (state.isLoading || (!src && !metadataError)) && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center" },
                 React.createElement("div", { className: "w-10 h-10 border-3 border-white/30 border-t-white rounded-full animate-spin" }))),
             (state.error || metadataError) && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center text-white/80" },
                 React.createElement("p", null, state.error || metadataError))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhateverapp/tile-sdk",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",