refactor: cleanup headerdata stuff

apps/expo/src/app/videoPlayer.tsx

@@ -12,6 +12,7 @@ import {
 import { fetchMediaDetails } from "@movie-web/tmdb";
 
 import type { ItemData } from "~/components/item/item";
+import type { HeaderData } from "~/components/player/Header";
 import { Header } from "~/components/player/Header";
 import { MiddleControls } from "~/components/player/MiddleButtons";
 import { usePlayerStore } from "~/stores/player/store";
@@ -28,16 +29,10 @@ interface VideoPlayerProps {
   data: ItemData | null;
 }
 
-interface HeaderInfo {
-  title: string;
-  season?: number;
-  episode?: number;
-}
-
 const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
   const [videoSrc, setVideoSrc] = useState<AVPlaybackSource>();
   const [isLoading, setIsLoading] = useState(true);
-  const [headerInfo, setHeaderInfo] = useState<HeaderInfo>({ title: "" });
+  const [headerData, setHeaderData] = useState<HeaderData>();
   const router = useRouter();
   const setVideoRef = usePlayerStore((state) => state.setVideoRef);
   const setStatus = usePlayerStore((state) => state.setStatus);
@@ -73,12 +68,15 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
           episode,
         );
 
-        setHeaderInfo({
+        setHeaderData({
           title: data.title,
-          ...(scrapeMedia.type === "show" && {
-            season: scrapeMedia.season.number,
-            episode: scrapeMedia.episode.number,
-          }),
+          year: data.year,
+          season:
+            scrapeMedia.type === "show" ? scrapeMedia.season.number : undefined,
+          episode:
+            scrapeMedia.type === "show"
+              ? scrapeMedia.episode.number
+              : undefined,
         });
 
         const stream = await getVideoStream({
@@ -160,15 +158,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
         onTouchStart={() => setIsIdle(false)}
       />
       {isLoading && <ActivityIndicator size="large" color="#0000ff" />}
-      {!isLoading && data && (
-        <Header
-          title={
-            headerInfo.season && headerInfo.episode
-              ? `${headerInfo.title} S${headerInfo.season.toString().padStart(2, "0")}E${headerInfo.episode.toString().padStart(2, "0")}`
-              : headerInfo.title
-          }
-        />
-      )}
+      {!isLoading && data && <Header data={headerData!} />}
       {!isLoading && <MiddleControls />}
     </View>
   );

apps/expo/src/components/player/Header.tsx

@@ -5,15 +5,26 @@ import { Text } from "../ui/Text";
 import { BackButton } from "./BackButton";
 import { Controls } from "./Controls";
 
-interface HeaderProps {
+export interface HeaderData {
   title: string;
+  year: number;
+  season?: number;
+  episode?: number;
 }
 
-export const Header = ({ title }: HeaderProps) => {
+interface HeaderProps {
+  data: HeaderData;
+}
+
+export const Header = ({ data }: HeaderProps) => {
   return (
     <Controls className="absolute top-0 flex w-full flex-row items-center justify-between px-6 pt-6">
       <BackButton className="w-36" />
-      <Text className="font-bold">{title}</Text>
+      <Text className="font-bold">
+        {data.season && data.episode
+          ? `${data.title} (${data.year}) S${data.season.toString().padStart(2, "0")}E${data.episode.toString().padStart(2, "0")}`
+          : `${data.title} (${data.year})`}
+      </Text>
       <View className="flex w-36 flex-row items-center justify-center gap-2 space-x-2 rounded-full bg-secondary-300 px-4 py-2 opacity-80">
         <Image source={Icon} className="h-6 w-6" />
         <Text className="font-bold">movie-web</Text>