From ec49d03cf13e84b96b94d95218198fa61e04be8f Mon Sep 17 00:00:00 2001
From: Uruk <contact@uruk.dev>
Date: Fri, 22 May 2026 00:59:57 +0200
Subject: [PATCH] refactor(casting): extract CastPlayerPoster

---
 app/(auth)/casting-player.tsx                 | 137 ++------------
 .../casting/player/CastPlayerPoster.tsx       | 176 ++++++++++++++++++
 2 files changed, 189 insertions(+), 124 deletions(-)
 create mode 100644 components/casting/player/CastPlayerPoster.tsx

diff --git a/app/(auth)/casting-player.tsx b/app/(auth)/casting-player.tsx
index d1735bd4d..ac40646b2 100644
--- a/app/(auth)/casting-player.tsx
+++ b/app/(auth)/casting-player.tsx
@@ -37,6 +37,7 @@ import Animated, {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { BITRATES } from "@/components/BitrateSelector";
 import { CastPlayerHeader } from "@/components/casting/player/CastPlayerHeader";
+import { CastPlayerPoster } from "@/components/casting/player/CastPlayerPoster";
 import { CastPlayerTitle } from "@/components/casting/player/CastPlayerTitle";
 import { ChromecastDeviceSheet } from "@/components/chromecast/ChromecastDeviceSheet";
 import { ChromecastEpisodeList } from "@/components/chromecast/ChromecastEpisodeList";
@@ -695,130 +696,18 @@ export default function CastingPlayerScreen() {
             showsVerticalScrollIndicator={false}
           >
             {/* Poster with buffering overlay */}
-            <View
-              style={{
-                alignItems: "center",
-                marginBottom: 40,
-              }}
-            >
-              <View
-                style={{
-                  width: 280,
-                  height: 420,
-                  borderRadius: 12,
-                  overflow: "hidden",
-                  position: "relative",
-                }}
-              >
-                {posterUrl ? (
-                  <Image
-                    source={{ uri: posterUrl }}
-                    style={{ width: "100%", height: "100%" }}
-                    contentFit='cover'
-                  />
-                ) : (
-                  <View
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                      backgroundColor: "#1a1a1a",
-                      justifyContent: "center",
-                      alignItems: "center",
-                    }}
-                  >
-                    <Ionicons name='film-outline' size={64} color='#333' />
-                  </View>
-                )}
-
-                {/* Skip intro/credits bar at bottom of poster */}
-                {currentSegment && (
-                  <Pressable
-                    onPress={async () => {
-                      if (!remoteMediaClient) return;
-                      try {
-                        const seekFn = async (positionMs: number) => {
-                          if (
-                            mediaStatus?.playerState ===
-                              MediaPlayerState.PLAYING ||
-                            mediaStatus?.playerState === MediaPlayerState.PAUSED
-                          ) {
-                            await remoteMediaClient.seek({
-                              position: positionMs / 1000,
-                            });
-                          }
-                        };
-                        if (currentSegment.type === "intro") {
-                          await skipIntro(seekFn);
-                        } else if (currentSegment.type === "credits") {
-                          await skipCredits(seekFn);
-                        } else {
-                          await skipSegment(seekFn);
-                        }
-                      } catch (error) {
-                        console.error("[Casting Player] Skip error:", error);
-                      }
-                    }}
-                    style={{
-                      position: "absolute",
-                      bottom: 0,
-                      left: 0,
-                      right: 0,
-                      backgroundColor: protocolColor,
-                      paddingVertical: 12,
-                      paddingHorizontal: 16,
-                      flexDirection: "row",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      gap: 8,
-                    }}
-                  >
-                    <Ionicons
-                      name='play-skip-forward'
-                      size={18}
-                      color='white'
-                    />
-                    <Text
-                      style={{
-                        color: "white",
-                        fontSize: 14,
-                        fontWeight: "600",
-                      }}
-                    >
-                      {t(
-                        `player.skip_${currentSegment.type === "credits" ? "outro" : currentSegment.type}`,
-                      )}
-                    </Text>
-                  </Pressable>
-                )}
-
-                {/* Buffering overlay */}
-                {isBuffering && (
-                  <View
-                    style={{
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      right: 0,
-                      bottom: 0,
-                      backgroundColor: "rgba(0,0,0,0.7)",
-                      justifyContent: "center",
-                      alignItems: "center",
-                    }}
-                  >
-                    <ActivityIndicator size='large' color={protocolColor} />
-                    <Text
-                      style={{
-                        color: "white",
-                        fontSize: 16,
-                        marginTop: 16,
-                      }}
-                    >
-                      {t("casting_player.buffering")}
-                    </Text>
-                  </View>
-                )}
-              </View>
-            </View>
+            <CastPlayerPoster
+              posterUrl={posterUrl}
+              isBuffering={isBuffering}
+              currentSegment={currentSegment}
+              skipIntro={skipIntro}
+              skipCredits={skipCredits}
+              skipSegment={skipSegment}
+              remoteMediaClient={remoteMediaClient}
+              mediaStatus={mediaStatus}
+              protocolColor={protocolColor}
+              t={t}
+            />
           </ScrollView>
 
           {/* Fixed 4-button control row for episodes - positioned independently */}
diff --git a/components/casting/player/CastPlayerPoster.tsx b/components/casting/player/CastPlayerPoster.tsx
new file mode 100644
index 000000000..aa5e8c3d5
--- /dev/null
+++ b/components/casting/player/CastPlayerPoster.tsx
@@ -0,0 +1,176 @@
+/**
+ * Casting Player Poster
+ * Poster image with empty-state fallback, skip intro/credits bar, and buffering overlay.
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import type { TFunction } from "i18next";
+import { ActivityIndicator, Pressable, View } from "react-native";
+import {
+  MediaPlayerState,
+  type MediaStatus,
+  type RemoteMediaClient,
+} from "react-native-google-cast";
+import type { useChromecastSegments } from "@/components/chromecast/hooks/useChromecastSegments";
+import { Text } from "@/components/common/Text";
+
+type ChromecastSegments = ReturnType<typeof useChromecastSegments>;
+
+interface CastPlayerPosterProps {
+  /** Poster image URL, or null when unavailable. */
+  posterUrl: string | null;
+  /** Whether the cast media is currently buffering. */
+  isBuffering: boolean;
+  /** The current playback segment (intro/credits/etc.), or null. */
+  currentSegment: ChromecastSegments["currentSegment"];
+  /** Skip the intro segment. */
+  skipIntro: ChromecastSegments["skipIntro"];
+  /** Skip the credits segment. */
+  skipCredits: ChromecastSegments["skipCredits"];
+  /** Skip the current generic segment. */
+  skipSegment: ChromecastSegments["skipSegment"];
+  /** The remote media client, or null when no session. */
+  remoteMediaClient: RemoteMediaClient | null;
+  /** Raw Chromecast media status. */
+  mediaStatus: MediaStatus | null;
+  /** Theme accent color. */
+  protocolColor: string;
+  /** Translation function. */
+  t: TFunction;
+}
+
+export function CastPlayerPoster({
+  posterUrl,
+  isBuffering,
+  currentSegment,
+  skipIntro,
+  skipCredits,
+  skipSegment,
+  remoteMediaClient,
+  mediaStatus,
+  protocolColor,
+  t,
+}: CastPlayerPosterProps) {
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        marginBottom: 40,
+      }}
+    >
+      <View
+        style={{
+          width: 280,
+          height: 420,
+          borderRadius: 12,
+          overflow: "hidden",
+          position: "relative",
+        }}
+      >
+        {posterUrl ? (
+          <Image
+            source={{ uri: posterUrl }}
+            style={{ width: "100%", height: "100%" }}
+            contentFit='cover'
+          />
+        ) : (
+          <View
+            style={{
+              width: "100%",
+              height: "100%",
+              backgroundColor: "#1a1a1a",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Ionicons name='film-outline' size={64} color='#333' />
+          </View>
+        )}
+
+        {/* Skip intro/credits bar at bottom of poster */}
+        {currentSegment && (
+          <Pressable
+            onPress={async () => {
+              if (!remoteMediaClient) return;
+              try {
+                const seekFn = async (positionMs: number) => {
+                  if (
+                    mediaStatus?.playerState === MediaPlayerState.PLAYING ||
+                    mediaStatus?.playerState === MediaPlayerState.PAUSED
+                  ) {
+                    await remoteMediaClient.seek({
+                      position: positionMs / 1000,
+                    });
+                  }
+                };
+                if (currentSegment.type === "intro") {
+                  await skipIntro(seekFn);
+                } else if (currentSegment.type === "credits") {
+                  await skipCredits(seekFn);
+                } else {
+                  await skipSegment(seekFn);
+                }
+              } catch (error) {
+                console.error("[Casting Player] Skip error:", error);
+              }
+            }}
+            style={{
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              backgroundColor: protocolColor,
+              paddingVertical: 12,
+              paddingHorizontal: 16,
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+            }}
+          >
+            <Ionicons name='play-skip-forward' size={18} color='white' />
+            <Text
+              style={{
+                color: "white",
+                fontSize: 14,
+                fontWeight: "600",
+              }}
+            >
+              {t(
+                `player.skip_${currentSegment.type === "credits" ? "outro" : currentSegment.type}`,
+              )}
+            </Text>
+          </Pressable>
+        )}
+
+        {/* Buffering overlay */}
+        {isBuffering && (
+          <View
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(0,0,0,0.7)",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <ActivityIndicator size='large' color={protocolColor} />
+            <Text
+              style={{
+                color: "white",
+                fontSize: 16,
+                marginTop: 16,
+              }}
+            >
+              {t("casting_player.buffering")}
+            </Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}