@xhub-reel/feed 0.2.0 → 0.2.2

package/dist/index.d.mts

@@ -38,6 +38,8 @@ interface VideoFeedProps {
     gesturesDisabled?: boolean;
     /** Enable haptic feedback on swipe */
     hapticEnabled?: boolean;
+    /** Whether video should start muted (default: true for browser autoplay policy) */
+    initialMuted?: boolean;
     /** Custom styles override */
     style?: CSSProperties;
     /** Custom className (for external CSS if needed) */
@@ -128,6 +130,8 @@ interface VideoFeedItemProps {
     isActive?: boolean;
     /** Preload priority */
     priority?: PreloadPriority;
+    /** Whether video should start muted (default: true for browser autoplay policy) */
+    initialMuted?: boolean;
     /** Show timeline (default: true, only used with default children) */
     showTimeline?: boolean;
     /** Called when video is liked */
@@ -192,6 +196,8 @@ interface VideoFeedItemContextValue {
     preload: '' | 'none' | 'metadata' | 'auto';
     /** Video has been preloaded and first frame is ready */
     isPreloaded: boolean;
+    /** Whether video should start muted (default: true for browser autoplay policy) */
+    initialMuted: boolean;
     containerRef: RefObject<HTMLDivElement | null>;
     videoRef: RefObject<HTMLVideoElement | null>;
     isPlaying: boolean;
@@ -259,6 +265,12 @@ interface ConnectedVideoFeedProps extends Omit<VideoFeedProps, 'videos' | 'isLoa
      * Initial videos to show while loading (optional)
      */
     initialVideos?: Video[];
+    /**
+     * Whether video should start muted
+     * Set to false if you have already handled browser autoplay policy
+     * @default true
+     */
+    initialMuted?: boolean;
     /**
      * Called when videos are successfully fetched
      */

package/dist/index.d.ts

@@ -38,6 +38,8 @@ interface VideoFeedProps {
     gesturesDisabled?: boolean;
     /** Enable haptic feedback on swipe */
     hapticEnabled?: boolean;
+    /** Whether video should start muted (default: true for browser autoplay policy) */
+    initialMuted?: boolean;
     /** Custom styles override */
     style?: CSSProperties;
     /** Custom className (for external CSS if needed) */
@@ -128,6 +130,8 @@ interface VideoFeedItemProps {
     isActive?: boolean;
     /** Preload priority */
     priority?: PreloadPriority;
+    /** Whether video should start muted (default: true for browser autoplay policy) */
+    initialMuted?: boolean;
     /** Show timeline (default: true, only used with default children) */
     showTimeline?: boolean;
     /** Called when video is liked */
@@ -192,6 +196,8 @@ interface VideoFeedItemContextValue {
     preload: '' | 'none' | 'metadata' | 'auto';
     /** Video has been preloaded and first frame is ready */
     isPreloaded: boolean;
+    /** Whether video should start muted (default: true for browser autoplay policy) */
+    initialMuted: boolean;
     containerRef: RefObject<HTMLDivElement | null>;
     videoRef: RefObject<HTMLVideoElement | null>;
     isPlaying: boolean;
@@ -259,6 +265,12 @@ interface ConnectedVideoFeedProps extends Omit<VideoFeedProps, 'videos' | 'isLoa
      * Initial videos to show while loading (optional)
      */
     initialVideos?: Video[];
+    /**
+     * Whether video should start muted
+     * Set to false if you have already handled browser autoplay policy
+     * @default true
+     */
+    initialMuted?: boolean;
     /**
      * Called when videos are successfully fetched
      */

package/dist/index.js

@@ -21,7 +21,7 @@ var videoFeedItemStyles = {
     inset: 0,
     width: "100%",
     height: "100%",
-    objectFit: "cover"
+    objectFit: "contain"
   },
   placeholder: {
     position: "absolute",
@@ -359,6 +359,7 @@ function useVideoFeedItemState({
   video,
   isActive,
   priority,
+  initialMuted = true,
   onLike,
   onComment,
   onShare,
@@ -419,14 +420,24 @@ function useVideoFeedItemState({
   const play = react.useCallback(async () => {
     const videoEl = videoRef.current;
     if (videoEl) {
-      videoEl.muted = true;
+      videoEl.muted = initialMuted;
       try {
         await videoEl.play();
       } catch (err) {
-        console.warn("[VideoFeedItem] Play failed:", err.message);
+        if (err.name === "NotAllowedError" && !initialMuted) {
+          console.warn("[VideoFeedItem] Autoplay blocked, falling back to muted");
+          videoEl.muted = true;
+          try {
+            await videoEl.play();
+          } catch (mutedErr) {
+            console.warn("[VideoFeedItem] Play failed even muted:", mutedErr.message);
+          }
+        } else {
+          console.warn("[VideoFeedItem] Play failed:", err.message);
+        }
       }
     }
-  }, []);
+  }, [initialMuted]);
   const pause = react.useCallback(() => {
     const videoEl = videoRef.current;
     if (videoEl) {
@@ -604,6 +615,7 @@ function useVideoFeedItemState({
     shouldRenderVideo,
     preload,
     isPreloaded,
+    initialMuted,
     containerRef,
     videoRef,
     isPlaying: effectiveIsPlaying,
@@ -628,7 +640,7 @@ function useVideoFeedItemState({
 }
 var VideoFeedItemPlayer = react.forwardRef(
   ({ placeholder, ...props }, ref) => {
-    const { video, videoRef, shouldRenderVideo, preload, isPreloaded } = useVideoFeedItemContext();
+    const { video, videoRef, shouldRenderVideo, preload, isPreloaded, initialMuted } = useVideoFeedItemContext();
     if (!shouldRenderVideo) {
       return placeholder ?? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -659,7 +671,7 @@ var VideoFeedItemPlayer = react.forwardRef(
         preload,
         loop: true,
         playsInline: true,
-        muted: true,
+        muted: initialMuted,
         style: videoFeedItemStyles.video
       }
     );
@@ -852,6 +864,7 @@ var VideoFeedItem = react.forwardRef(
     video,
     isActive = false,
     priority = "none",
+    initialMuted = true,
     showTimeline = true,
     onLike,
     onComment,
@@ -865,6 +878,7 @@ var VideoFeedItem = react.forwardRef(
       video,
       isActive,
       priority,
+      initialMuted,
       onLike,
       onComment,
       onShare,
@@ -1113,6 +1127,7 @@ var VideoFeed = react.forwardRef(
     velocityThreshold = DEFAULT_VELOCITY_THRESHOLD,
     gesturesDisabled = false,
     hapticEnabled = true,
+    initialMuted = true,
     style,
     className = ""
   }, ref) => {
@@ -1386,6 +1401,7 @@ var VideoFeed = react.forwardRef(
                     video,
                     isActive,
                     priority,
+                    initialMuted,
                     onLike: () => onLike?.(video),
                     onComment: () => onComment?.(video),
                     onShare: () => onShare?.(video),
@@ -1609,6 +1625,7 @@ var ConnectedVideoFeed = react.forwardRef(
     searchQuery,
     pageSize = 10,
     initialVideos,
+    initialMuted = true,
     onFetchSuccess,
     onFetchError,
     renderLoading = () => /* @__PURE__ */ jsxRuntime.jsx(DefaultLoading, {}),
@@ -1676,6 +1693,7 @@ var ConnectedVideoFeed = react.forwardRef(
         onComment,
         onShare,
         onAuthorClick,
+        initialMuted,
         ...videoFeedProps
       }
     );

package/dist/index.mjs

@@ -20,7 +20,7 @@ var videoFeedItemStyles = {
     inset: 0,
     width: "100%",
     height: "100%",
-    objectFit: "cover"
+    objectFit: "contain"
   },
   placeholder: {
     position: "absolute",
@@ -358,6 +358,7 @@ function useVideoFeedItemState({
   video,
   isActive,
   priority,
+  initialMuted = true,
   onLike,
   onComment,
   onShare,
@@ -418,14 +419,24 @@ function useVideoFeedItemState({
   const play = useCallback(async () => {
     const videoEl = videoRef.current;
     if (videoEl) {
-      videoEl.muted = true;
+      videoEl.muted = initialMuted;
       try {
         await videoEl.play();
       } catch (err) {
-        console.warn("[VideoFeedItem] Play failed:", err.message);
+        if (err.name === "NotAllowedError" && !initialMuted) {
+          console.warn("[VideoFeedItem] Autoplay blocked, falling back to muted");
+          videoEl.muted = true;
+          try {
+            await videoEl.play();
+          } catch (mutedErr) {
+            console.warn("[VideoFeedItem] Play failed even muted:", mutedErr.message);
+          }
+        } else {
+          console.warn("[VideoFeedItem] Play failed:", err.message);
+        }
       }
     }
-  }, []);
+  }, [initialMuted]);
   const pause = useCallback(() => {
     const videoEl = videoRef.current;
     if (videoEl) {
@@ -603,6 +614,7 @@ function useVideoFeedItemState({
     shouldRenderVideo,
     preload,
     isPreloaded,
+    initialMuted,
     containerRef,
     videoRef,
     isPlaying: effectiveIsPlaying,
@@ -627,7 +639,7 @@ function useVideoFeedItemState({
 }
 var VideoFeedItemPlayer = forwardRef(
   ({ placeholder, ...props }, ref) => {
-    const { video, videoRef, shouldRenderVideo, preload, isPreloaded } = useVideoFeedItemContext();
+    const { video, videoRef, shouldRenderVideo, preload, isPreloaded, initialMuted } = useVideoFeedItemContext();
     if (!shouldRenderVideo) {
       return placeholder ?? /* @__PURE__ */ jsx(
         "div",
@@ -658,7 +670,7 @@ var VideoFeedItemPlayer = forwardRef(
         preload,
         loop: true,
         playsInline: true,
-        muted: true,
+        muted: initialMuted,
         style: videoFeedItemStyles.video
       }
     );
@@ -851,6 +863,7 @@ var VideoFeedItem = forwardRef(
     video,
     isActive = false,
     priority = "none",
+    initialMuted = true,
     showTimeline = true,
     onLike,
     onComment,
@@ -864,6 +877,7 @@ var VideoFeedItem = forwardRef(
       video,
       isActive,
       priority,
+      initialMuted,
       onLike,
       onComment,
       onShare,
@@ -1112,6 +1126,7 @@ var VideoFeed = forwardRef(
     velocityThreshold = DEFAULT_VELOCITY_THRESHOLD,
     gesturesDisabled = false,
     hapticEnabled = true,
+    initialMuted = true,
     style,
     className = ""
   }, ref) => {
@@ -1385,6 +1400,7 @@ var VideoFeed = forwardRef(
                     video,
                     isActive,
                     priority,
+                    initialMuted,
                     onLike: () => onLike?.(video),
                     onComment: () => onComment?.(video),
                     onShare: () => onShare?.(video),
@@ -1608,6 +1624,7 @@ var ConnectedVideoFeed = forwardRef(
     searchQuery,
     pageSize = 10,
     initialVideos,
+    initialMuted = true,
     onFetchSuccess,
     onFetchError,
     renderLoading = () => /* @__PURE__ */ jsx(DefaultLoading, {}),
@@ -1675,6 +1692,7 @@ var ConnectedVideoFeed = forwardRef(
         onComment,
         onShare,
         onAuthorClick,
+        initialMuted,
         ...videoFeedProps
       }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhub-reel/feed",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Virtualized video feed for XHubReel",
   "license": "MIT",
   "author": "XHubReel Team",
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@xhub-reel/core": "0.2.0",
-    "@xhub-reel/player": "0.2.0",
-    "@xhub-reel/gestures": "0.2.0"
+    "@xhub-reel/gestures": "0.2.0",
+    "@xhub-reel/player": "0.2.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",