feat(casting): show stop button when playing a movie

app/(auth)/casting-player.tsx

@@ -509,19 +509,18 @@ export default function CastingPlayerScreen() {
             />
           </ScrollView>
 
-          {/* Fixed 4-button control row for episodes - positioned independently */}
+          {/* Fixed control row - positioned independently. Episode-specific
-          {currentItem.Type === "Episode" && (
+              buttons are conditional inside; Stop is always available. */}
-            <CastPlayerEpisodeControls
+          <CastPlayerEpisodeControls
-              insetBottom={insets.bottom}
+            insetBottom={insets.bottom}
-              currentItemId={currentItem.Id}
+            currentItemId={currentItem.Id}
-              episodes={episodes}
+            episodes={episodes}
-              nextEpisode={nextEpisode}
+            nextEpisode={nextEpisode}
-              remoteMediaClient={remoteMediaClient}
+            remoteMediaClient={remoteMediaClient}
-              onPressEpisodes={() => setShowEpisodeList(true)}
+            onPressEpisodes={() => setShowEpisodeList(true)}
-              loadEpisode={loadEpisode}
+            loadEpisode={loadEpisode}
-              router={router}
+            router={router}
-            />
+          />
-          )}
 
           {/* Fixed bottom controls area */}
           <View

components/casting/player/CastPlayerEpisodeControls.tsx

@@ -1,6 +1,8 @@
 /**
  * Casting Player Episode Controls
- * Fixed 4-button control row for episodes: episode list, previous, next, stop.
+ * Fixed control row: episode list, previous, next, stop.
+ * Episode-specific buttons (list / previous / next) are conditional;
+ * Stop is always rendered so movies still get a Stop button.
  */
 
 import { Ionicons } from "@expo/vector-icons";
@@ -38,6 +40,26 @@ export function CastPlayerEpisodeControls({
   loadEpisode,
   router,
 }: CastPlayerEpisodeControlsProps) {
+  const hasEpisodeList = episodes.length > 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 (
     <View
       style={{
@@ -52,24 +74,15 @@ export function CastPlayerEpisodeControls({
         paddingHorizontal: 20,
       }}
     >
-      {/* Episodes button */}
+      {/* Episodes button - only rendered when an episode list exists (not for movies) */}
-      <Pressable
+      {hasEpisodeList && (
-        onPress={onPressEpisodes}
+        <Pressable onPress={onPressEpisodes} style={buttonStyle}>
-        style={{
+          <Ionicons name='list' size={22} color='white' />
-          flex: 1,
+        </Pressable>
-          backgroundColor: "#1a1a1a",
+      )}
-          padding: 12,
-          borderRadius: 12,
-          flexDirection: "row",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <Ionicons name='list' size={22} color='white' />
-      </Pressable>
 
       {/* Previous episode button - only rendered when a previous episode exists */}
-      {episodes.findIndex((ep) => ep.Id === currentItemId) > 0 && (
+      {hasPrevious && (
         <Pressable
           onPress={async () => {
             const currentIndex = episodes.findIndex(
@@ -79,43 +92,27 @@ export function CastPlayerEpisodeControls({
               await loadEpisode(episodes[currentIndex - 1]);
             }
           }}
-          style={{
+          style={buttonStyle}
-            flex: 1,
-            backgroundColor: "#1a1a1a",
-            padding: 12,
-            borderRadius: 12,
-            flexDirection: "row",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
         >
           <Ionicons name='play-skip-back' size={22} color='white' />
         </Pressable>
       )}
 
       {/* Next episode button - only rendered when a next episode exists */}
-      {nextEpisode && (
+      {hasNext && (
         <Pressable
           onPress={async () => {
             if (nextEpisode) {
               await loadEpisode(nextEpisode);
             }
           }}
-          style={{
+          style={buttonStyle}
-            flex: 1,
-            backgroundColor: "#1a1a1a",
-            padding: 12,
-            borderRadius: 12,
-            flexDirection: "row",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
         >
           <Ionicons name='play-skip-forward' size={22} color='white' />
         </Pressable>
       )}
 
-      {/* Stop playback button - stops media but stays connected to Chromecast */}
+      {/* Stop playback button - always rendered; stops media but stays connected to Chromecast */}
       <Pressable
         onPress={async () => {
           try {
@@ -140,15 +137,7 @@ export function CastPlayerEpisodeControls({
             }
           }
         }}
-        style={{
+        style={buttonStyle}
-          flex: 1,
-          backgroundColor: "#1a1a1a",
-          padding: 12,
-          borderRadius: 12,
-          flexDirection: "row",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
       >
         <Ionicons name='stop-circle' size={22} color='white' />
       </Pressable>