From fb0b9c83ae25fe264b80c71b677ba60c44912699 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sun, 1 Sep 2024 17:36:27 +0200
Subject: [PATCH] fix: meta data (including image) when casting

---
 components/PlayButton.tsx | 65 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 8 deletions(-)

diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx
index 29884df8..595afd25 100644
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -9,8 +9,8 @@ import { useEffect, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import CastContext, {
   PlayServicesState,
-  useRemoteMediaClient,
   useMediaStatus,
+  useRemoteMediaClient,
 } from "react-native-google-cast";
 import Animated, {
   Easing,
@@ -23,7 +23,10 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { Button } from "./Button";
-import { isCancel } from "axios";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item?: BaseItemDto | null;
@@ -40,6 +43,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
   const mediaStatus = useMediaStatus();
 
   const [colorAtom] = useAtom(itemThemeColorAtom);
+  const [api] = useAtom(apiAtom);
 
   const memoizedItem = useMemo(() => item, [item?.Id]); // Memoize the item
   const memoizedColor = useMemo(() => colorAtom, [colorAtom]); // Memoize the color
@@ -65,6 +69,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
         cancelButtonIndex,
       },
       async (selectedIndex: number | undefined) => {
+        if (!api) return;
         const currentTitle = mediaStatus?.mediaInfo?.metadata?.title;
         const isOpeningCurrentlyPlayingMedia =
           currentTitle && currentTitle === item?.Name;
@@ -86,11 +91,56 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
                     mediaInfo: {
                       contentUrl: url,
                       contentType: "video/mp4",
-                      metadata: {
-                        type: item.Type === "Episode" ? "tvShow" : "movie",
-                        title: item.Name || "",
-                        subtitle: item.Overview || "",
-                      },
+                      metadata:
+                        item.Type === "Episode"
+                          ? {
+                              type: "tvShow",
+                              title: item.Name || "",
+                              episodeNumber: item.IndexNumber || 0,
+                              seasonNumber: item.ParentIndexNumber || 0,
+                              seriesTitle: item.SeriesName || "",
+                              images: [
+                                {
+                                  url: getParentBackdropImageUrl({
+                                    api,
+                                    item,
+                                    quality: 90,
+                                    width: 2000,
+                                  })!,
+                                },
+                              ],
+                            }
+                          : item.Type === "Movie"
+                          ? {
+                              type: "movie",
+                              title: item.Name || "",
+                              subtitle: item.Overview || "",
+                              images: [
+                                {
+                                  url: getPrimaryImageUrl({
+                                    api,
+                                    item,
+                                    quality: 90,
+                                    width: 2000,
+                                  })!,
+                                },
+                              ],
+                            }
+                          : {
+                              type: "generic",
+                              title: item.Name || "",
+                              subtitle: item.Overview || "",
+                              images: [
+                                {
+                                  url: getPrimaryImageUrl({
+                                    api,
+                                    item,
+                                    quality: 90,
+                                    width: 2000,
+                                  })!,
+                                },
+                              ],
+                            },
                     },
                     startTime: 0,
                   })
@@ -99,7 +149,6 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
                     if (isOpeningCurrentlyPlayingMedia) {
                       return;
                     }
-                    setCurrentlyPlayingState({ item, url });
                     CastContext.showExpandedControls();
                   });
               }