improve loading, caption renderer, season/episode selector, source selector

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

@@ -6,30 +6,28 @@ import { Text } from "../ui/Text";
 import { BackButton } from "./BackButton";
 import { Controls } from "./Controls";
 
-export interface HeaderData {
-  title: string;
-  year: number;
-  season?: number;
-  episode?: number;
-}
+const mapSeasonAndEpisodeNumberToText = (season: number, episode: number) => {
+  return `S${season.toString().padStart(2, "0")}E${episode.toString().padStart(2, "0")}`;
+};
 
-interface HeaderProps {
-  data: HeaderData;
-}
-
-export const Header = ({ data }: HeaderProps) => {
+export const Header = () => {
   const isIdle = usePlayerStore((state) => state.interface.isIdle);
+  const meta = usePlayerStore((state) => state.meta);
 
-  if (!isIdle) {
+  if (!isIdle && meta) {
     return (
       <View className="z-50 flex h-16 w-full flex-row justify-between px-6 pt-6">
         <Controls>
           <BackButton className="w-36" />
         </Controls>
         <Text className="font-bold">
-          {data.season !== undefined && data.episode !== undefined
-            ? `${data.title} (${data.year}) S${data.season.toString().padStart(2, "0")}E${data.episode.toString().padStart(2, "0")}`
-            : `${data.title} (${data.year})`}
+          {meta.title} ({meta.releaseYear}){" "}
+          {meta.season !== undefined && meta.episode !== undefined
+            ? mapSeasonAndEpisodeNumberToText(
+                meta.season.number,
+                meta.episode.number,
+              )
+            : ""}
         </Text>
         <View className="flex h-12 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" />