@ksp-gonogo/kerbcast-react 1.5.0 → 1.5.1

package/dist/CameraFeed.js

@@ -512,7 +512,7 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
         void client.camera(flightId).setQuality(preset);
         closeQualityMenu();
     }, [client, flightId, closeQualityMenu]);
-    const topOverlay = (_jsxs(TopOverlay, { children: [_jsxs(TitleRow, { children: [_jsx(TopTitle, { children: hasCameras ? (_jsxs(TitleButton, { ref: cameraMenu.triggerRef, type: "button", "aria-haspopup": "menu", "aria-expanded": cameraMenu.open, "aria-controls": menuId, onClick: cameraMenu.toggle, children: [_jsx(TitleButton__Text, { children: title }), _jsx(ChevronDownIcon, { "aria-hidden": "true" })] })) : (title) }), hasCameras && (_jsxs(StepButtons, { children: [_jsx(OverlayIconButton, { type: "button", "aria-label": "Previous camera", disabled: !canStep, onClick: () => stepCamera(-1), children: "\u2039" }), _jsx(OverlayIconButton, { type: "button", "aria-label": "Next camera", disabled: !canStep, onClick: () => stepCamera(1), children: "\u203A" })] }))] }), cameraMenu.open &&
+    const topOverlay = (_jsxs(TopOverlay, { children: [_jsx(TitleRow, { children: _jsx(TopTitle, { children: hasCameras ? (_jsxs(TitleButton, { ref: cameraMenu.triggerRef, type: "button", "aria-haspopup": "menu", "aria-expanded": cameraMenu.open, "aria-controls": menuId, onClick: cameraMenu.toggle, children: [_jsx(TitleButton__Text, { children: title }), _jsx(ChevronDownIcon, { "aria-hidden": "true" })] })) : (title) }) }), cameraMenu.open &&
                 hasCameras &&
                 cameraMenu.position &&
                 createPortal(_jsx(CameraMenu, { ref: cameraMenu.menuRef, id: menuId, role: "menu", "aria-label": "Camera", style: cameraMenu.position, children: cameras.map((c) => (_jsxs(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": c.flightId === flightId, "$selected": c.flightId === flightId, onClick: () => {
@@ -522,10 +522,11 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
                 (camera ? (_jsxs(TopMeta, { children: [camera.vesselName, " \u00B7 ", camera.renderWidth, "\u00D7", camera.renderHeight, bitrateLabel, adaptiveLabel] })) : (_jsx(TopMeta, { children: "no cameras on this vessel" })))] }));
     const renderAction = (a) => (_jsx(OverlayIconButton, { type: "button", "aria-label": a.label, "aria-pressed": a.active ?? undefined, title: a.label, "$active": a.active ?? false, onClick: a.onClick, children: a.icon }, a.id));
     const builtInActions = flightId !== null && (pipAvailable || fullscreenAvailable || qualityAvailable);
-    const hasActionBar = (actions && actions.length > 0) ||
+    const hasActionBar = hasCameras ||
+        (actions && actions.length > 0) ||
         (trailingActions && trailingActions.length > 0) ||
         builtInActions;
-    const actionBar = hasActionBar ? (_jsxs(ActionBar, { children: [actions?.map(renderAction), qualityAvailable && (_jsxs(OverlayIconButton, { ref: qualityMenu.triggerRef, type: "button", "aria-label": "Quality", "aria-haspopup": "menu", "aria-expanded": qualityMenu.open, "aria-controls": qualityMenuId, title: qualityThrottled
+    const actionBar = hasActionBar ? (_jsxs(ActionBar, { children: [hasCameras && (_jsxs(StepButtons, { children: [_jsx(OverlayIconButton, { type: "button", "aria-label": "Previous camera", disabled: !canStep, onClick: () => stepCamera(-1), children: "\u2039" }), _jsx(OverlayIconButton, { type: "button", "aria-label": "Next camera", disabled: !canStep, onClick: () => stepCamera(1), children: "\u203A" })] })), actions?.map(renderAction), qualityAvailable && (_jsxs(OverlayIconButton, { ref: qualityMenu.triggerRef, type: "button", "aria-label": "Quality", "aria-haspopup": "menu", "aria-expanded": qualityMenu.open, "aria-controls": qualityMenuId, title: qualityThrottled
                     ? "Quality (throttled by adaptive performance)"
                     : "Quality", "$active": qualityMenu.open, onClick: qualityMenu.toggle, children: [_jsx(QualityIcon, {}), qualityThrottled && _jsx(ThrottledDot, { "aria-hidden": "true" })] })), flightId !== null && pipAvailable && (_jsx(OverlayIconButton, { type: "button", "aria-label": isPip ? "Exit picture in picture" : "Picture in picture", "aria-pressed": isPip, title: isPip ? "Exit picture in picture" : "Picture in picture", "$active": isPip, onClick: togglePip, children: _jsx(PictureInPictureIcon, {}) })), flightId !== null && fullscreenAvailable && (_jsx(OverlayIconButton, { type: "button", "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen", "aria-pressed": isFullscreen, title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen", "$active": isFullscreen, onClick: toggleFullscreen, children: isFullscreen ? _jsx(FullscreenExitIcon, {}) : _jsx(FullscreenEnterIcon, {}) })), trailingActions?.map(renderAction)] })) : null;
     return (_jsx(Stage, { ref: wrapRef, "$pinned": chromePinned, children: flightId === null ? (_jsxs(_Fragment, { children: [_jsx(Empty, { children: emptyMessage }), topOverlay, actionBar] })) : (_jsxs(_Fragment, { children: [_jsx(StyledVideo, { ref: videoRef, autoPlay: true, playsInline: true, muted: true, controls: false, onClick: () => setChromePinned((v) => !v) }), topOverlay, actionBar, qualityAvailable &&
@@ -746,8 +747,11 @@ const TopOverlay = styled.div `
 const TitleRow = styled.div `
   display: flex;
   align-items: flex-start;
-  justify-content: space-between;
   gap: 8px;
+  /* Reserve the top-right corner where the ActionBar overlay sits (now home
+     to the camera step buttons too) so a long title ellipsizes rather than
+     sliding underneath the controls. */
+  padding-right: 96px;
 `;
 const TopTitle = styled.h3 `
   margin: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ksp-gonogo/kerbcast-react",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "React components and hooks for kerbcast camera feeds.",
   "license": "CC-BY-NC-SA-4.0",
   "author": "Jon Pepler",

package/src/CameraFeed.test.tsx

@@ -445,6 +445,39 @@ describe("CameraFeed - camera selection", () => {
     ).toBe(true);
   });
 
+  it("renders step buttons inside the action bar alongside injected actions", async () => {
+    // Regression: the step buttons used to sit in the title row and were
+    // covered by the separately-positioned action bar (and any consumer
+    // action buttons) in the top-right corner. They now share the action
+    // bar so the two lay out in one flex row instead of overlapping.
+    const { client } = await buildConnectedSource(THREE_CAMERAS);
+
+    render(
+      <KerbcastProvider client={client}>
+        <CameraFeed
+          flightId={42}
+          actions={[
+            {
+              id: "custom",
+              label: "Custom action",
+              icon: <span>x</span>,
+              onClick: () => {},
+            },
+          ]}
+        />
+      </KerbcastProvider>,
+    );
+
+    const next = screen.getByRole("button", { name: /next camera/i });
+    const custom = screen.getByRole("button", { name: /custom action/i });
+
+    // The injected action's parent is the action bar; the step buttons live
+    // in a wrapper within that same action bar, so it contains both.
+    const actionBar = custom.parentElement;
+    expect(actionBar).not.toBeNull();
+    expect(actionBar?.contains(next)).toBe(true);
+  });
+
   it("Escape closes the open camera menu", async () => {
     const { client } = await buildConnectedSource(THREE_CAMERAS);
 

package/src/CameraFeed.tsx

@@ -796,26 +796,6 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
               title
             )}
           </TopTitle>
-          {hasCameras && (
-            <StepButtons>
-              <OverlayIconButton
-                type="button"
-                aria-label="Previous camera"
-                disabled={!canStep}
-                onClick={() => stepCamera(-1)}
-              >
-                &#8249;
-              </OverlayIconButton>
-              <OverlayIconButton
-                type="button"
-                aria-label="Next camera"
-                disabled={!canStep}
-                onClick={() => stepCamera(1)}
-              >
-                &#8250;
-              </OverlayIconButton>
-            </StepButtons>
-          )}
         </TitleRow>
 
         {cameraMenu.open &&
@@ -879,11 +859,32 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
     const builtInActions =
       flightId !== null && (pipAvailable || fullscreenAvailable || qualityAvailable);
     const hasActionBar =
+      hasCameras ||
       (actions && actions.length > 0) ||
       (trailingActions && trailingActions.length > 0) ||
       builtInActions;
     const actionBar = hasActionBar ? (
         <ActionBar>
+          {hasCameras && (
+            <StepButtons>
+              <OverlayIconButton
+                type="button"
+                aria-label="Previous camera"
+                disabled={!canStep}
+                onClick={() => stepCamera(-1)}
+              >
+                &#8249;
+              </OverlayIconButton>
+              <OverlayIconButton
+                type="button"
+                aria-label="Next camera"
+                disabled={!canStep}
+                onClick={() => stepCamera(1)}
+              >
+                &#8250;
+              </OverlayIconButton>
+            </StepButtons>
+          )}
           {actions?.map(renderAction)}
           {qualityAvailable && (
             <OverlayIconButton
@@ -1393,8 +1394,11 @@ const TopOverlay = styled.div`
 const TitleRow = styled.div`
   display: flex;
   align-items: flex-start;
-  justify-content: space-between;
   gap: 8px;
+  /* Reserve the top-right corner where the ActionBar overlay sits (now home
+     to the camera step buttons too) so a long title ellipsizes rather than
+     sliding underneath the controls. */
+  padding-right: 96px;
 `;
 
 const TopTitle = styled.h3`