From 07c0f82293ca274e29fa37437ece26f5564d7349 Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Sun, 16 Aug 2026 14:47:34 +0200
Subject: [PATCH] fix(stories): size the video player box to the real aspect
 ratio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The player box was full-bleed (w-full h-full) with object-fit: contain
handling the letterboxing internally — visually correct but the box
itself still spanned the whole screen, so the black letterbox area
read as part of the player rather than just backdrop. Sizes the box
itself to the story's aspectRatio (defaulting to 9:16 before Mux
reports the real value), centered via flex — same visual result, but
now only the actual content area is the "box".
---
 src/components/stories/StoryViewer.tsx | 87 +++++++++++++++-----------
 1 file changed, 51 insertions(+), 36 deletions(-)

diff --git a/src/components/stories/StoryViewer.tsx b/src/components/stories/StoryViewer.tsx
index 25d8386..a2f492f 100644
--- a/src/components/stories/StoryViewer.tsx
+++ b/src/components/stories/StoryViewer.tsx
@@ -224,43 +224,58 @@ export function StoryViewer({
               normal feed videos) — object-contain here matters even more:
               no fixed aspect-video box like VideoCard uses. */}
           {isVideo ? (
-            <div className="relative w-full h-full">
-              {videoStatus === "READY" && videoPlaybackId ? (
-                <MuxPlayer
-                  playbackId={videoPlaybackId}
-                  streamType="on-demand"
-                  autoPlay
-                  muted={isMuted}
-                  style={{ width: "100%", height: "100%", objectFit: "contain" }}
-                  onTimeUpdate={handleVideoTimeUpdate}
-                  onEnded={handleVideoEnded}
+            // The player BOX itself is sized to the video's real aspect
+            // ratio (default 9:16 — most story videos are phone-shot
+            // portrait — until Mux reports the actual value), not just the
+            // content inside a full-bleed box. object-fit: contain on a
+            // full-screen box still leaves a full-screen click/visual
+            // target with the letterboxing baked into the box; sizing the
+            // box itself means the black is purely the backdrop showing
+            // through, not part of the box.
+            <div className="relative w-full h-full flex items-center justify-center">
+              <div
+                className="relative h-full w-auto max-w-full"
+                style={{
+                  aspectRatio: (currentStory.aspectRatio ?? "9:16").replace(":", " / "),
+                }}
+              >
+                {videoStatus === "READY" && videoPlaybackId ? (
+                  <MuxPlayer
+                    playbackId={videoPlaybackId}
+                    streamType="on-demand"
+                    autoPlay
+                    muted={isMuted}
+                    style={{ width: "100%", height: "100%" }}
+                    onTimeUpdate={handleVideoTimeUpdate}
+                    onEnded={handleVideoEnded}
+                  />
+                ) : videoStatus === "ERROR" ? (
+                  <div className="flex h-full w-full items-center justify-center text-white/70 text-sm">
+                    {t("videoError")}
+                  </div>
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center">
+                    <Loader2 className="h-8 w-8 text-white animate-spin" />
+                  </div>
+                )}
+                {videoStatus === "READY" && (
+                  <button
+                    className="absolute bottom-3 right-3 flex h-10 w-10 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60"
+                    onClick={() => setIsMuted((m) => !m)}
+                    aria-label={isMuted ? t("unmute") : t("mute")}
+                  >
+                    {isMuted ? (
+                      <VolumeX className="h-4 w-4" aria-hidden="true" />
+                    ) : (
+                      <Volume2 className="h-4 w-4" aria-hidden="true" />
+                    )}
+                  </button>
+                )}
+                <AiDisclosureBadge
+                  value={currentStory.aiDisclosure}
+                  className="top-auto left-auto bottom-3 right-16 h-10"
                 />
-              ) : videoStatus === "ERROR" ? (
-                <div className="flex h-full w-full items-center justify-center text-white/70 text-sm">
-                  {t("videoError")}
-                </div>
-              ) : (
-                <div className="flex h-full w-full items-center justify-center">
-                  <Loader2 className="h-8 w-8 text-white animate-spin" />
-                </div>
-              )}
-              {videoStatus === "READY" && (
-                <button
-                  className="absolute bottom-3 right-3 flex h-10 w-10 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60"
-                  onClick={() => setIsMuted((m) => !m)}
-                  aria-label={isMuted ? t("unmute") : t("mute")}
-                >
-                  {isMuted ? (
-                    <VolumeX className="h-4 w-4" aria-hidden="true" />
-                  ) : (
-                    <Volume2 className="h-4 w-4" aria-hidden="true" />
-                  )}
-                </button>
-              )}
-              <AiDisclosureBadge
-                value={currentStory.aiDisclosure}
-                className="top-auto left-auto bottom-3 right-16 h-10"
-              />
+              </div>
             </div>
           ) : (
             mediaUrl && (