@xhub-short/sdk 1.0.0-beta.18 → 1.0.0-beta.20

package/dist/index.d.ts

@@ -1718,6 +1718,130 @@ interface DefaultVideoSlotProps {
 }
 declare const DefaultVideoSlot: react.NamedExoticComponent<DefaultVideoSlotProps>;
 
+/**
+ * Snap-back animation type
+ * - 'none': Instant snap (no animation)
+ * - 'ease': Smooth ease-out transition
+ * - 'spring': Spring-like bounce effect
+ */
+type SnapBackAnimation = 'none' | 'ease' | 'spring';
+/**
+ * Configuration for useZoomGesture
+ */
+interface UseZoomGestureConfig {
+    /** Minimum scale factor (default: 1) */
+    minScale?: number;
+    /** Maximum scale factor (default: 5) */
+    maxScale?: number;
+    /** Whether to lock vertical swipe during zoom (default: true) */
+    lockVerticalSwipe?: boolean;
+    /**
+     * Snap-back animation type (default: 'ease')
+     * - 'none': Instant snap, onZoomEnd called immediately
+     * - 'ease': Smooth ease-out, onZoomEnd called after duration
+     * - 'spring': Spring bounce effect, onZoomEnd called after duration
+     */
+    snapBackAnimation?: SnapBackAnimation;
+    /** Snap-back animation duration in ms (default: 200) */
+    snapBackDuration?: number;
+    /** Callback when zoom starts (scale > 1) */
+    onZoomStart?: () => void;
+    /** Callback when zoom ends (after snap-back animation completes) */
+    onZoomEnd?: (finalScale: number) => void;
+    /** Callback on scale change during gesture */
+    onZoomChange?: (scale: number) => void;
+    /** Whether zoom is enabled (default: true) */
+    enabled?: boolean;
+}
+/**
+ * Touch event handlers
+ */
+interface ZoomGestureHandlers {
+    onTouchStart: (e: react__default.TouchEvent) => void;
+    onTouchMove: (e: react__default.TouchEvent) => void;
+    onTouchEnd: (e: react__default.TouchEvent) => void;
+}
+/**
+ * Return type for useZoomGesture
+ */
+interface UseZoomGestureReturn {
+    /** Current scale factor (1 = normal) */
+    scale: number;
+    /** Current X translation in pixels */
+    translateX: number;
+    /** Current Y translation in pixels */
+    translateY: number;
+    /** Whether actively zooming (2+ fingers) */
+    isZooming: boolean;
+    /** Whether currently panning while zoomed */
+    isPanning: boolean;
+    /** Whether snap-back animation is playing */
+    isAnimating: boolean;
+    /** Whether vertical swipe is locked */
+    isSwipeLocked: boolean;
+    /** Touch event handlers to spread on container */
+    handlers: ZoomGestureHandlers;
+    /** Manually reset to default state */
+    reset: () => void;
+    /** CSS transform string for convenience */
+    transform: string;
+    /** CSS transform-origin string */
+    transformOrigin: string;
+    /**
+     * CSS styles for container element.
+     * Includes `touchAction: 'none'` for proper gesture handling on mobile.
+     * Always spread this on your container for best compatibility.
+     */
+    containerStyle: react__default.CSSProperties;
+    /**
+     * CSS transition string for snap-back animation.
+     * Apply this to the transform property for smooth animations.
+     */
+    transitionStyle: react__default.CSSProperties;
+}
+/**
+ * useZoomGesture - Pinch-to-zoom gesture handler
+ *
+ * Handles pinch gestures for video zoom with pan support.
+ * Always snaps back to scale=1 on release (Instagram Reels behavior).
+ *
+ * @example
+ * ```tsx
+ * function VideoPlayer({ video }: { video: VideoItem }) {
+ *   const {
+ *     transform,
+ *     transformOrigin,
+ *     containerStyle,
+ *     handlers,
+ *     isZooming,
+ *   } = useZoomGesture({
+ *     onZoomStart: () => enterCleanMode('zoom'),
+ *     onZoomEnd: () => exitCleanMode(),
+ *     snapBackAnimation: 'ease', // smooth snap-back
+ *   });
+ *
+ *   return (
+ *     <div
+ *       style={{
+ *         ...containerStyle, // includes touchAction: 'none' for proper gesture handling
+ *         transform,
+ *         transformOrigin,
+ *       }}
+ *       {...handlers}
+ *     >
+ *       <video src={video.url} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * **Important:** Always spread `containerStyle` on your container element.
+ * This sets `touchAction: 'none'` which is required for `preventDefault()` to work
+ * on mobile browsers (Chrome 56+, Safari) where touch events are passive by default.
+ */
+declare function useZoomGesture(config?: UseZoomGestureConfig): UseZoomGestureReturn;
+
 /**
  * Minimum requirements for content used in SlotComposer
  */
@@ -1749,6 +1873,14 @@ interface ComposerState {
     isMenuOpen: boolean;
     /** Whether report sheet is open */
     isReportSheetOpen: boolean;
+    /** Zoom transform property */
+    zoomTransform: string;
+    /** Zoom transform origin */
+    zoomTransformOrigin: string;
+    /** Zoom container style (includes touchAction: 'none') */
+    zoomContainerStyle: React.CSSProperties;
+    /** Zoom snap-back transition style */
+    zoomTransitionStyle: React.CSSProperties;
 }
 /**
  * Handlers provided by SlotComposer
@@ -1772,6 +1904,8 @@ interface ComposerHandlers {
     setCommentSheetOpen: (open: boolean) => void;
     setMenuOpen: (open: boolean) => void;
     setReportSheetOpen: (open: boolean) => void;
+    /** Pinch-to-zoom touch event handlers */
+    zoomHandlers: ReturnType<typeof useZoomGesture>['handlers'];
 }
 /**
  * Pre-configured wired components
@@ -3725,130 +3859,6 @@ interface UseAdvancedControlsConfig {
  */
 declare function useAdvancedControls(config?: UseAdvancedControlsConfig): UseAdvancedControlsReturn;
 
-/**
- * Snap-back animation type
- * - 'none': Instant snap (no animation)
- * - 'ease': Smooth ease-out transition
- * - 'spring': Spring-like bounce effect
- */
-type SnapBackAnimation = 'none' | 'ease' | 'spring';
-/**
- * Configuration for useZoomGesture
- */
-interface UseZoomGestureConfig {
-    /** Minimum scale factor (default: 1) */
-    minScale?: number;
-    /** Maximum scale factor (default: 5) */
-    maxScale?: number;
-    /** Whether to lock vertical swipe during zoom (default: true) */
-    lockVerticalSwipe?: boolean;
-    /**
-     * Snap-back animation type (default: 'ease')
-     * - 'none': Instant snap, onZoomEnd called immediately
-     * - 'ease': Smooth ease-out, onZoomEnd called after duration
-     * - 'spring': Spring bounce effect, onZoomEnd called after duration
-     */
-    snapBackAnimation?: SnapBackAnimation;
-    /** Snap-back animation duration in ms (default: 200) */
-    snapBackDuration?: number;
-    /** Callback when zoom starts (scale > 1) */
-    onZoomStart?: () => void;
-    /** Callback when zoom ends (after snap-back animation completes) */
-    onZoomEnd?: (finalScale: number) => void;
-    /** Callback on scale change during gesture */
-    onZoomChange?: (scale: number) => void;
-    /** Whether zoom is enabled (default: true) */
-    enabled?: boolean;
-}
-/**
- * Touch event handlers
- */
-interface ZoomGestureHandlers {
-    onTouchStart: (e: react__default.TouchEvent) => void;
-    onTouchMove: (e: react__default.TouchEvent) => void;
-    onTouchEnd: (e: react__default.TouchEvent) => void;
-}
-/**
- * Return type for useZoomGesture
- */
-interface UseZoomGestureReturn {
-    /** Current scale factor (1 = normal) */
-    scale: number;
-    /** Current X translation in pixels */
-    translateX: number;
-    /** Current Y translation in pixels */
-    translateY: number;
-    /** Whether actively zooming (2+ fingers) */
-    isZooming: boolean;
-    /** Whether currently panning while zoomed */
-    isPanning: boolean;
-    /** Whether snap-back animation is playing */
-    isAnimating: boolean;
-    /** Whether vertical swipe is locked */
-    isSwipeLocked: boolean;
-    /** Touch event handlers to spread on container */
-    handlers: ZoomGestureHandlers;
-    /** Manually reset to default state */
-    reset: () => void;
-    /** CSS transform string for convenience */
-    transform: string;
-    /** CSS transform-origin string */
-    transformOrigin: string;
-    /**
-     * CSS styles for container element.
-     * Includes `touchAction: 'none'` for proper gesture handling on mobile.
-     * Always spread this on your container for best compatibility.
-     */
-    containerStyle: react__default.CSSProperties;
-    /**
-     * CSS transition string for snap-back animation.
-     * Apply this to the transform property for smooth animations.
-     */
-    transitionStyle: react__default.CSSProperties;
-}
-/**
- * useZoomGesture - Pinch-to-zoom gesture handler
- *
- * Handles pinch gestures for video zoom with pan support.
- * Always snaps back to scale=1 on release (Instagram Reels behavior).
- *
- * @example
- * ```tsx
- * function VideoPlayer({ video }: { video: VideoItem }) {
- *   const {
- *     transform,
- *     transformOrigin,
- *     containerStyle,
- *     handlers,
- *     isZooming,
- *   } = useZoomGesture({
- *     onZoomStart: () => enterCleanMode('zoom'),
- *     onZoomEnd: () => exitCleanMode(),
- *     snapBackAnimation: 'ease', // smooth snap-back
- *   });
- *
- *   return (
- *     <div
- *       style={{
- *         ...containerStyle, // includes touchAction: 'none' for proper gesture handling
- *         transform,
- *         transformOrigin,
- *       }}
- *       {...handlers}
- *     >
- *       <video src={video.url} />
- *     </div>
- *   );
- * }
- * ```
- *
- * @remarks
- * **Important:** Always spread `containerStyle` on your container element.
- * This sets `touchAction: 'none'` which is required for `preventDefault()` to work
- * on mobile browsers (Chrome 56+, Safari) where touch events are passive by default.
- */
-declare function useZoomGesture(config?: UseZoomGestureConfig): UseZoomGestureReturn;
-
 /**
  * useReportedVideo - Hook to check/manage reported video state
  *

package/dist/index.js

@@ -4417,7 +4417,14 @@ function SlotComposer({
   const reactiveContent = useFeedSelector(
     (state) => state.itemsById.get(initialContent.id) ?? initialContent
   );
-  const { isZooming } = useZoomGesture({
+  const {
+    isZooming,
+    transform,
+    transformOrigin,
+    containerStyle,
+    transitionStyle,
+    handlers: zoomHandlers
+  } = useZoomGesture({
     enabled: true,
     maxScale: zoomMaxScale,
     snapBackAnimation: zoomSnapBackAnimation,
@@ -4498,6 +4505,10 @@ function SlotComposer({
       state: {
         cleanMode,
         isZoomActive: isZooming,
+        zoomTransform: transform,
+        zoomTransformOrigin: transformOrigin,
+        zoomContainerStyle: containerStyle,
+        zoomTransitionStyle: transitionStyle,
         isLiked: reactiveContent.isLiked ?? false,
         isBookmarked,
         isCommentSheetOpen,
@@ -4514,7 +4525,8 @@ function SlotComposer({
         handleCloseAll,
         setCommentSheetOpen,
         setMenuOpen,
-        setReportSheetOpen
+        setReportSheetOpen,
+        zoomHandlers
       },
       components: {
         ActionBarComponent: ({ icons, onOpenComments: onOpenC, onShare: onS }) => {
@@ -4577,6 +4589,11 @@ function SlotComposer({
       initialContent.id,
       cleanMode,
       isZooming,
+      transform,
+      transformOrigin,
+      containerStyle,
+      transitionStyle,
+      zoomHandlers,
       isBookmarked,
       isCommentSheetOpen,
       isMenuOpen,
@@ -5438,7 +5455,23 @@ function DefaultVideoSlotContent(props) {
       disableTap: enableZoom && isZoomActive,
       onHidden: () => onContentHidden?.(video.id),
       children: [
-        renderPlayer ? renderPlayer({ muted: false }) : /* @__PURE__ */ jsx(VideoPlayer, { muted: false }),
+        enableZoom ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...state.zoomContainerStyle,
+              transform: state.zoomTransform,
+              transformOrigin: state.zoomTransformOrigin,
+              transition: state.zoomTransitionStyle.transition,
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%"
+            },
+            ...handlers.zoomHandlers,
+            children: renderPlayer ? renderPlayer({ muted: false }) : /* @__PURE__ */ jsx(VideoPlayer, { muted: false })
+          }
+        ) : renderPlayer ? renderPlayer({ muted: false }) : /* @__PURE__ */ jsx(VideoPlayer, { muted: false }),
         showPoster && !isZoomActive && !cleanMode && /* @__PURE__ */ jsx(VideoSlotPoster, {}),
         showPlayIndicator && !isZoomActive && /* @__PURE__ */ jsx(VideoSlotPlayIndicator, { persistWhenPaused: persistPlayIndicatorWhenPaused }),
         showLikeAnimation && /* @__PURE__ */ jsx(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xhub-short/sdk",
   "sideEffects": false,
-  "version": "1.0.0-beta.18",
+  "version": "1.0.0-beta.20",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -21,13 +21,13 @@
   ],
   "dependencies": {
     "zustand": "^5.0.0",
-    "@xhub-short/adapters": "1.0.0-beta.18",
-    "@xhub-short/ui": "1.0.0-beta.18",
-    "@xhub-short/core": "1.0.0-beta.18",
-    "@xhub-short/contracts": "1.0.0-beta.18"
+    "@xhub-short/adapters": "1.0.0-beta.20",
+    "@xhub-short/contracts": "1.0.0-beta.20",
+    "@xhub-short/core": "1.0.0-beta.20",
+    "@xhub-short/ui": "1.0.0-beta.20"
   },
   "optionalDependencies": {
-    "@xhub-short/bridge": "0.1.0-beta.17"
+    "@xhub-short/bridge": "0.1.0-beta.19"
   },
   "peerDependencies": {
     "react": "^19.0.0",