refactor(casting): extract CastPlayerHeader and CastPlayerTitle

app/(auth)/casting-player.tsx

@@ -36,6 +36,8 @@ import Animated, {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { BITRATES } from "@/components/BitrateSelector";
+import { CastPlayerHeader } from "@/components/casting/player/CastPlayerHeader";
+import { CastPlayerTitle } from "@/components/casting/player/CastPlayerTitle";
 import { ChromecastDeviceSheet } from "@/components/chromecast/ChromecastDeviceSheet";
 import { ChromecastEpisodeList } from "@/components/chromecast/ChromecastEpisodeList";
 import { ChromecastSettingsMenu } from "@/components/chromecast/ChromecastSettingsMenu";
@@ -53,7 +55,6 @@ import {
   formatTime,
   formatTrickplayTime,
   getPosterUrl,
-  truncateTitle,
 } from "@/utils/casting/helpers";
 import { resolveSelection } from "@/utils/casting/selection";
 import type { CastSelection } from "@/utils/casting/types";
@@ -667,113 +668,22 @@ export default function CastingPlayerScreen() {
           ]}
         >
           {/* Header - Fixed at top */}
-          <View
+          <CastPlayerHeader
-            style={{
+            insetTop={insets.top}
-              position: "absolute",
+            protocolColor={protocolColor}
-              top: insets.top + 8,
+            currentDevice={currentDevice}
-              left: 20,
+            t={t}
-              right: 20,
+            onDismiss={dismissModal}
-              flexDirection: "row",
+            onPressConnectionIndicator={() => setShowDeviceSheet(true)}
-              justifyContent: "space-between",
+            onPressSettings={() => setShowSettings(true)}
-              alignItems: "center",
+          />
-              zIndex: 100,
-            }}
-          >
-            <Pressable
-              onPress={dismissModal}
-              style={{ padding: 8, marginLeft: -8 }}
-            >
-              <Ionicons name='chevron-down' size={32} color='white' />
-            </Pressable>
-
-            {/* Connection indicator */}
-            <Pressable
-              onPress={() => setShowDeviceSheet(true)}
-              style={{
-                flexDirection: "row",
-                alignItems: "center",
-                gap: 6,
-                paddingHorizontal: 12,
-                paddingVertical: 6,
-                backgroundColor: "#1a1a1a",
-                borderRadius: 16,
-              }}
-            >
-              <View
-                style={{
-                  width: 8,
-                  height: 8,
-                  borderRadius: 4,
-                  backgroundColor: protocolColor,
-                }}
-              />
-              <Text
-                style={{
-                  color: protocolColor,
-                  fontSize: 14,
-                  fontWeight: "500",
-                }}
-              >
-                {currentDevice || t("casting_player.unknown_device")}
-              </Text>
-            </Pressable>
-
-            <Pressable
-              onPress={() => setShowSettings(true)}
-              style={{ padding: 8, marginRight: -8 }}
-            >
-              <Ionicons name='settings-outline' size={24} color='white' />
-            </Pressable>
-          </View>
 
           {/* Title Area */}
-          <View
+          <CastPlayerTitle
-            style={{
+            insetTop={insets.top}
-              position: "absolute",
+            currentItem={currentItem}
-              top: insets.top + 50,
+            t={t}
-              left: 0,
+          />
-              right: 0,
-              zIndex: 95,
-              alignItems: "center",
-              backgroundColor: "rgba(0, 0, 0, 0.8)",
-              paddingVertical: 16,
-              paddingHorizontal: 20,
-            }}
-          >
-            {/* Title */}
-            <Text
-              style={{
-                color: "white",
-                fontSize: 20,
-                fontWeight: "700",
-                textAlign: "center",
-                marginBottom: 6,
-              }}
-            >
-              {truncateTitle(
-                currentItem.Name || t("casting_player.unknown"),
-                50,
-              )}
-            </Text>
-
-            {/* Grey episode/season info */}
-            {currentItem.Type === "Episode" &&
-              currentItem.ParentIndexNumber !== undefined &&
-              currentItem.IndexNumber !== undefined && (
-                <Text
-                  style={{
-                    color: "#999",
-                    fontSize: 15,
-                    textAlign: "center",
-                  }}
-                >
-                  {t("casting_player.season_episode_format", {
-                    season: currentItem.ParentIndexNumber,
-                    episode: currentItem.IndexNumber,
-                  })}
-                </Text>
-              )}
-          </View>
 
           {/* Scrollable content area */}
           <ScrollView

components/casting/player/CastPlayerHeader.tsx

@@ -0,0 +1,94 @@
+/**
+ * Casting Player Header
+ * Fixed top bar: dismiss button, connection indicator, settings button.
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import type { TFunction } from "i18next";
+import { Pressable, View } from "react-native";
+import { Text } from "@/components/common/Text";
+
+interface CastPlayerHeaderProps {
+  /** Top safe-area inset, used to offset the fixed header. */
+  insetTop: number;
+  /** Streamyfin protocol accent color. */
+  protocolColor: string;
+  /** Friendly name of the connected cast device, or null. */
+  currentDevice: string | null;
+  /** Translation function. */
+  t: TFunction;
+  /** Dismiss the casting player modal. */
+  onDismiss: () => void;
+  /** Open the device sheet (connection indicator press). */
+  onPressConnectionIndicator: () => void;
+  /** Open the settings menu. */
+  onPressSettings: () => void;
+}
+
+export function CastPlayerHeader({
+  insetTop,
+  protocolColor,
+  currentDevice,
+  t,
+  onDismiss,
+  onPressConnectionIndicator,
+  onPressSettings,
+}: CastPlayerHeaderProps) {
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: insetTop + 8,
+        left: 20,
+        right: 20,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        zIndex: 100,
+      }}
+    >
+      <Pressable onPress={onDismiss} style={{ padding: 8, marginLeft: -8 }}>
+        <Ionicons name='chevron-down' size={32} color='white' />
+      </Pressable>
+
+      {/* Connection indicator */}
+      <Pressable
+        onPress={onPressConnectionIndicator}
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 6,
+          paddingHorizontal: 12,
+          paddingVertical: 6,
+          backgroundColor: "#1a1a1a",
+          borderRadius: 16,
+        }}
+      >
+        <View
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: protocolColor,
+          }}
+        />
+        <Text
+          style={{
+            color: protocolColor,
+            fontSize: 14,
+            fontWeight: "500",
+          }}
+        >
+          {currentDevice || t("casting_player.unknown_device")}
+        </Text>
+      </Pressable>
+
+      <Pressable
+        onPress={onPressSettings}
+        style={{ padding: 8, marginRight: -8 }}
+      >
+        <Ionicons name='settings-outline' size={24} color='white' />
+      </Pressable>
+    </View>
+  );
+}

components/casting/player/CastPlayerTitle.tsx

@@ -0,0 +1,72 @@
+/**
+ * Casting Player Title Area
+ * Fixed title bar: item title and optional grey episode/season info.
+ */
+
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import type { TFunction } from "i18next";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { truncateTitle } from "@/utils/casting/helpers";
+
+interface CastPlayerTitleProps {
+  /** Top safe-area inset, used to offset the fixed title area. */
+  insetTop: number;
+  /** The currently playing item. */
+  currentItem: BaseItemDto;
+  /** Translation function. */
+  t: TFunction;
+}
+
+export function CastPlayerTitle({
+  insetTop,
+  currentItem,
+  t,
+}: CastPlayerTitleProps) {
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: insetTop + 50,
+        left: 0,
+        right: 0,
+        zIndex: 95,
+        alignItems: "center",
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        paddingVertical: 16,
+        paddingHorizontal: 20,
+      }}
+    >
+      {/* Title */}
+      <Text
+        style={{
+          color: "white",
+          fontSize: 20,
+          fontWeight: "700",
+          textAlign: "center",
+          marginBottom: 6,
+        }}
+      >
+        {truncateTitle(currentItem.Name || t("casting_player.unknown"), 50)}
+      </Text>
+
+      {/* Grey episode/season info */}
+      {currentItem.Type === "Episode" &&
+        currentItem.ParentIndexNumber !== undefined &&
+        currentItem.IndexNumber !== undefined && (
+          <Text
+            style={{
+              color: "#999",
+              fontSize: 15,
+              textAlign: "center",
+            }}
+          >
+            {t("casting_player.season_episode_format", {
+              season: currentItem.ParentIndexNumber,
+              episode: currentItem.IndexNumber,
+            })}
+          </Text>
+        )}
+    </View>
+  );
+}