diff --git a/app/(auth)/casting-player.tsx b/app/(auth)/casting-player.tsx index 8c35a867b..9a9543b43 100644 --- a/app/(auth)/casting-player.tsx +++ b/app/(auth)/casting-player.tsx @@ -509,19 +509,18 @@ export default function CastingPlayerScreen() { /> - {/* Fixed 4-button control row for episodes - positioned independently */} - {currentItem.Type === "Episode" && ( - setShowEpisodeList(true)} - loadEpisode={loadEpisode} - router={router} - /> - )} + {/* Fixed control row - positioned independently. Episode-specific + buttons are conditional inside; Stop is always available. */} + setShowEpisodeList(true)} + loadEpisode={loadEpisode} + router={router} + /> {/* Fixed bottom controls area */} 0; + const hasPrevious = episodes.findIndex((ep) => ep.Id === currentItemId) > 0; + const hasNext = nextEpisode != null; + + // Count of buttons actually rendered (Stop is always rendered). + const buttonCount = + 1 + (hasEpisodeList ? 1 : 0) + (hasPrevious ? 1 : 0) + (hasNext ? 1 : 0); + + // Each button stretches evenly only when the row holds more than one; + // a lone Stop button keeps its intrinsic size and stays centered. + const buttonStyle = { + ...(buttonCount > 1 ? { flex: 1 } : {}), + backgroundColor: "#1a1a1a", + padding: 12, + borderRadius: 12, + flexDirection: "row" as const, + justifyContent: "center" as const, + alignItems: "center" as const, + }; + return ( - {/* Episodes button */} - - - + {/* Episodes button - only rendered when an episode list exists (not for movies) */} + {hasEpisodeList && ( + + + + )} {/* Previous episode button - only rendered when a previous episode exists */} - {episodes.findIndex((ep) => ep.Id === currentItemId) > 0 && ( + {hasPrevious && ( { const currentIndex = episodes.findIndex( @@ -79,43 +92,27 @@ export function CastPlayerEpisodeControls({ await loadEpisode(episodes[currentIndex - 1]); } }} - style={{ - flex: 1, - backgroundColor: "#1a1a1a", - padding: 12, - borderRadius: 12, - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - }} + style={buttonStyle} > )} {/* Next episode button - only rendered when a next episode exists */} - {nextEpisode && ( + {hasNext && ( { if (nextEpisode) { await loadEpisode(nextEpisode); } }} - style={{ - flex: 1, - backgroundColor: "#1a1a1a", - padding: 12, - borderRadius: 12, - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - }} + style={buttonStyle} > )} - {/* Stop playback button - stops media but stays connected to Chromecast */} + {/* Stop playback button - always rendered; stops media but stays connected to Chromecast */} { try { @@ -140,15 +137,7 @@ export function CastPlayerEpisodeControls({ } } }} - style={{ - flex: 1, - backgroundColor: "#1a1a1a", - padding: 12, - borderRadius: 12, - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - }} + style={buttonStyle} >