@sesionario/blocks 1.24.0 → 1.26.0

package/dist/index.d.cts

@@ -914,6 +914,12 @@ interface VideoPlayerProps {
      * beacon here. */
     onFirstPlay?: () => void;
     onError?: (error: DescribedPlaybackError) => void;
+    /**
+     * Default `aspect-video` for feed cards. Use `contain` in fullscreen
+     * viewers so portrait sources fill the pane with object-fit and controls
+     * stay at the bottom of the pane.
+     */
+    fit?: "aspect-video" | "contain";
     className?: string;
 }
 /**
@@ -925,7 +931,7 @@ interface VideoPlayerProps {
  *
  * hls.js is a peer dependency loaded on demand; see {@link useHlsPlayback}.
  */
-declare function VideoPlayer({ src, mode, poster, autoPlay, muted, stats, labels, showQualitySelector, paused, onPlayingChange, onFirstPlay, onError, className, }: VideoPlayerProps): React.JSX.Element;
+declare function VideoPlayer({ src, mode, poster, autoPlay, muted, stats, labels, showQualitySelector, paused, onPlayingChange, onFirstPlay, onError, fit, className, }: VideoPlayerProps): React.JSX.Element;
 
 interface FeedVideoPlayerProps extends VideoPlayerProps {
     /** Stable id for exclusive playback (typically the feed post id). */
@@ -935,7 +941,7 @@ interface FeedVideoPlayerProps extends VideoPlayerProps {
  * Feed-scoped {@link VideoPlayer}: only one feed video plays at a time, and
  * playback autopauses when the card leaves the viewport or the tab is hidden.
  */
-declare function FeedVideoPlayer({ playbackId, onPlayingChange, paused: pausedProp, ...playerProps }: FeedVideoPlayerProps): React.JSX.Element;
+declare function FeedVideoPlayer({ playbackId, onPlayingChange, paused: pausedProp, fit, className, ...playerProps }: FeedVideoPlayerProps): React.JSX.Element;
 
 interface UseFeedExclusivePlaybackResult {
     containerRef: React.RefObject<HTMLDivElement | null>;

package/dist/index.d.ts

@@ -914,6 +914,12 @@ interface VideoPlayerProps {
      * beacon here. */
     onFirstPlay?: () => void;
     onError?: (error: DescribedPlaybackError) => void;
+    /**
+     * Default `aspect-video` for feed cards. Use `contain` in fullscreen
+     * viewers so portrait sources fill the pane with object-fit and controls
+     * stay at the bottom of the pane.
+     */
+    fit?: "aspect-video" | "contain";
     className?: string;
 }
 /**
@@ -925,7 +931,7 @@ interface VideoPlayerProps {
  *
  * hls.js is a peer dependency loaded on demand; see {@link useHlsPlayback}.
  */
-declare function VideoPlayer({ src, mode, poster, autoPlay, muted, stats, labels, showQualitySelector, paused, onPlayingChange, onFirstPlay, onError, className, }: VideoPlayerProps): React.JSX.Element;
+declare function VideoPlayer({ src, mode, poster, autoPlay, muted, stats, labels, showQualitySelector, paused, onPlayingChange, onFirstPlay, onError, fit, className, }: VideoPlayerProps): React.JSX.Element;
 
 interface FeedVideoPlayerProps extends VideoPlayerProps {
     /** Stable id for exclusive playback (typically the feed post id). */
@@ -935,7 +941,7 @@ interface FeedVideoPlayerProps extends VideoPlayerProps {
  * Feed-scoped {@link VideoPlayer}: only one feed video plays at a time, and
  * playback autopauses when the card leaves the viewport or the tab is hidden.
  */
-declare function FeedVideoPlayer({ playbackId, onPlayingChange, paused: pausedProp, ...playerProps }: FeedVideoPlayerProps): React.JSX.Element;
+declare function FeedVideoPlayer({ playbackId, onPlayingChange, paused: pausedProp, fit, className, ...playerProps }: FeedVideoPlayerProps): React.JSX.Element;
 
 interface UseFeedExclusivePlaybackResult {
     containerRef: React.RefObject<HTMLDivElement | null>;

package/dist/index.js

@@ -5133,6 +5133,7 @@ function VideoPlayer({
   onPlayingChange,
   onFirstPlay,
   onError,
+  fit = "aspect-video",
   className
 }) {
   const t = { ...DEFAULT_LABELS2, ...labels };
@@ -5414,8 +5415,10 @@ function VideoPlayer({
       ref: containerRef,
       "data-slot": "video-player",
       "data-mode": mode,
+      "data-fit": fit,
       className: cn(
-        "group relative aspect-video w-full overflow-hidden rounded-lg bg-black text-white select-none",
+        "group relative w-full overflow-hidden rounded-lg bg-black text-white select-none",
+        fit === "contain" ? "h-full min-h-0 aspect-auto" : "aspect-video",
         className
       ),
       onMouseMove: revealControls,
@@ -5432,7 +5435,10 @@ function VideoPlayer({
           {
             ref: videoRef,
             playsInline: true,
-            className: "h-full w-full bg-black",
+            className: cn(
+              "h-full w-full bg-black",
+              fit === "contain" && "object-contain"
+            ),
             onClick: active ? togglePlay : void 0,
             poster
           }
@@ -5810,6 +5816,8 @@ function FeedVideoPlayer({
   playbackId,
   onPlayingChange,
   paused: pausedProp,
+  fit = "aspect-video",
+  className,
   ...playerProps
 }) {
   const {
@@ -5824,14 +5832,24 @@ function FeedVideoPlayer({
     },
     [onExclusivePlayingChange, onPlayingChange]
   );
-  return /* @__PURE__ */ jsx("div", { ref: containerRef, "data-slot": "feed-video-player", children: /* @__PURE__ */ jsx(
-    VideoPlayer,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      ...playerProps,
-      paused: pausedProp || exclusivePaused,
-      onPlayingChange: handlePlayingChange
+      ref: containerRef,
+      "data-slot": "feed-video-player",
+      className: cn(fit === "contain" && "h-full min-h-0 w-full", className),
+      children: /* @__PURE__ */ jsx(
+        VideoPlayer,
+        {
+          ...playerProps,
+          fit,
+          paused: pausedProp || exclusivePaused,
+          onPlayingChange: handlePlayingChange,
+          className: fit === "contain" ? "h-full min-h-0" : void 0
+        }
+      )
     }
-  ) });
+  );
 }
 function usePlaybackStats(statsUrl, { intervalMs = 15e3, enabled = true } = {}) {
   const [stats, setStats] = React7.useState({});