From e9783d293dce4397d3e131b1996788799d7e6e18 Mon Sep 17 00:00:00 2001 From: jakequade Date: Sat, 24 Aug 2024 14:37:49 +1000 Subject: [PATCH 1/9] extended cast controls on android --- app.json | 6 +++ components/PlayButton.tsx | 21 +++++++++- plugins/withAndroidMainActivityAttributes.js | 42 ++++++++++++++++++++ providers/PlaybackProvider.tsx | 2 +- 4 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 plugins/withAndroidMainActivityAttributes.js diff --git a/app.json b/app.json index 3141a8ad..ad62a054 100644 --- a/app.json +++ b/app.json @@ -68,6 +68,12 @@ } } ], + [ + "./plugins/withAndroidMainActivityAttributes", + { + "com.reactnative.googlecast.RNGCExpandedControllerActivity": true + } + ], [ "expo-build-properties", { diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx index 2a539736..32b935b5 100644 --- a/components/PlayButton.tsx +++ b/components/PlayButton.tsx @@ -9,6 +9,7 @@ import CastContext, { useRemoteMediaClient, } from "react-native-google-cast"; import { Button } from "./Button"; +import { isCancel } from "axios"; interface Props extends React.ComponentProps { item?: BaseItemDto | null; @@ -18,7 +19,7 @@ interface Props extends React.ComponentProps { export const PlayButton: React.FC = ({ item, url, ...props }) => { const { showActionSheetWithOptions } = useActionSheet(); const client = useRemoteMediaClient(); - const { setCurrentlyPlayingState } = usePlayback(); + const { setCurrentlyPlayingState, isPlaying, currentlyPlaying } = usePlayback(); const onPress = async () => { if (!url || !item) return; @@ -37,12 +38,22 @@ export const PlayButton: React.FC = ({ item, url, ...props }) => { cancelButtonIndex, }, async (selectedIndex: number | undefined) => { + const isOpeningCurrentlyPlayingMedia = isPlaying + && currentlyPlaying?.item?.Name + && currentlyPlaying?.item?.Name === item?.Name switch (selectedIndex) { case 0: await CastContext.getPlayServicesState().then((state) => { if (state && state !== PlayServicesState.SUCCESS) CastContext.showPlayServicesErrorDialog(state); else { + // If we're opening a currently playing item, don't restart the media. + // Instead just open controls + console.log({ isOpeningCurrentlyPlayingMedia, currentlyPlaying }) + if (isOpeningCurrentlyPlayingMedia) { + CastContext.showExpandedControls(); + return; + } client.loadMedia({ mediaInfo: { contentUrl: url, @@ -54,6 +65,14 @@ export const PlayButton: React.FC = ({ item, url, ...props }) => { }, }, startTime: 0, + }).then(() => { + if (isOpeningCurrentlyPlayingMedia) { + return + } + setCurrentlyPlayingState({ item, url }); + CastContext.showExpandedControls(); + }).catch(e => { + console.log({ e }) }); } }); diff --git a/plugins/withAndroidMainActivityAttributes.js b/plugins/withAndroidMainActivityAttributes.js new file mode 100644 index 00000000..d57b8c93 --- /dev/null +++ b/plugins/withAndroidMainActivityAttributes.js @@ -0,0 +1,42 @@ +const { withAndroidManifest } = require("@expo/config-plugins"); + +function addAttributesToMainActivity(androidManifest, attributes) { + const { manifest } = androidManifest; + + if (!Array.isArray(manifest["application"])) { + console.warn("withAndroidMainActivityAttributes: No application array in manifest?"); + return androidManifest; + } + + const application = manifest["application"].find( + (item) => item.$["android:name"] === ".MainApplication" + ); + if (!application) { + console.warn("withAndroidMainActivityAttributes: No .MainApplication?"); + return androidManifest; + } + + if (!Array.isArray(application["activity"])) { + console.warn("withAndroidMainActivityAttributes: No activity array in .MainApplication?"); + return androidManifest; + } + + const activity = application["activity"].find( + (item) => item.$["android:name"] === ".MainActivity" + ); + if (!activity) { + console.warn("withAndroidMainActivityAttributes: No .MainActivity?"); + return androidManifest; + } + + activity.$ = { ...activity.$, ...attributes }; + + return androidManifest; +} + +module.exports = function withAndroidMainActivityAttributes(config, attributes) { + return withAndroidManifest(config, (config) => { + config.modResults = addAttributesToMainActivity(config.modResults, attributes); + return config; + }); +}; \ No newline at end of file diff --git a/providers/PlaybackProvider.tsx b/providers/PlaybackProvider.tsx index 1f2c3bdd..bd26807d 100644 --- a/providers/PlaybackProvider.tsx +++ b/providers/PlaybackProvider.tsx @@ -181,7 +181,7 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({ useEffect(() => { if (!deviceId || !api?.accessToken) return; - const url = `wss://${api?.basePath + const url = `ws://${api?.basePath .replace("https://", "") .replace("http://", "")}/socket?api_key=${ api?.accessToken From fb6e3dc69042a1e132bbff1d97df8998b7480c9f Mon Sep 17 00:00:00 2001 From: jakequade Date: Sat, 24 Aug 2024 14:53:33 +1000 Subject: [PATCH 2/9] chromecast controls --- components/PlayButton.tsx | 18 +++++++++--------- plugins/withAndroidMainActivityAttributes.js | 2 +- providers/PlaybackProvider.tsx | 6 ++++-- 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx index 32b935b5..dc52976b 100644 --- a/components/PlayButton.tsx +++ b/components/PlayButton.tsx @@ -7,6 +7,7 @@ import { View } from "react-native"; import CastContext, { PlayServicesState, useRemoteMediaClient, + useMediaStatus, } from "react-native-google-cast"; import { Button } from "./Button"; import { isCancel } from "axios"; @@ -19,7 +20,8 @@ interface Props extends React.ComponentProps { export const PlayButton: React.FC = ({ item, url, ...props }) => { const { showActionSheetWithOptions } = useActionSheet(); const client = useRemoteMediaClient(); - const { setCurrentlyPlayingState, isPlaying, currentlyPlaying } = usePlayback(); + const { setCurrentlyPlayingState } = usePlayback(); + const mediaStatus = useMediaStatus() const onPress = async () => { if (!url || !item) return; @@ -38,9 +40,9 @@ export const PlayButton: React.FC = ({ item, url, ...props }) => { cancelButtonIndex, }, async (selectedIndex: number | undefined) => { - const isOpeningCurrentlyPlayingMedia = isPlaying - && currentlyPlaying?.item?.Name - && currentlyPlaying?.item?.Name === item?.Name + const currentTitle = mediaStatus?.mediaInfo?.metadata?.title + const isOpeningCurrentlyPlayingMedia = currentTitle && currentTitle === item?.Name + switch (selectedIndex) { case 0: await CastContext.getPlayServicesState().then((state) => { @@ -48,8 +50,7 @@ export const PlayButton: React.FC = ({ item, url, ...props }) => { CastContext.showPlayServicesErrorDialog(state); else { // If we're opening a currently playing item, don't restart the media. - // Instead just open controls - console.log({ isOpeningCurrentlyPlayingMedia, currentlyPlaying }) + // Instead just open controls. if (isOpeningCurrentlyPlayingMedia) { CastContext.showExpandedControls(); return; @@ -66,14 +67,13 @@ export const PlayButton: React.FC = ({ item, url, ...props }) => { }, startTime: 0, }).then(() => { + // state is already set when reopening current media, so skip it here. if (isOpeningCurrentlyPlayingMedia) { return } setCurrentlyPlayingState({ item, url }); CastContext.showExpandedControls(); - }).catch(e => { - console.log({ e }) - }); + }) } }); break; diff --git a/plugins/withAndroidMainActivityAttributes.js b/plugins/withAndroidMainActivityAttributes.js index d57b8c93..c5764408 100644 --- a/plugins/withAndroidMainActivityAttributes.js +++ b/plugins/withAndroidMainActivityAttributes.js @@ -39,4 +39,4 @@ module.exports = function withAndroidMainActivityAttributes(config, attributes) config.modResults = addAttributesToMainActivity(config.modResults, attributes); return config; }); -}; \ No newline at end of file +}; diff --git a/providers/PlaybackProvider.tsx b/providers/PlaybackProvider.tsx index bd26807d..c23b0137 100644 --- a/providers/PlaybackProvider.tsx +++ b/providers/PlaybackProvider.tsx @@ -181,13 +181,15 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({ useEffect(() => { if (!deviceId || !api?.accessToken) return; - const url = `ws://${api?.basePath + const protocol = api?.basePath.includes('https') ? 'wss' : 'ws' + + const url = `${protocol}://${api?.basePath .replace("https://", "") .replace("http://", "")}/socket?api_key=${ api?.accessToken }&deviceId=${deviceId}`; - console.log("WS", url); + console.log(protocol, url); const newWebSocket = new WebSocket(url); From 688c343a352b7a267dbbafc8802907f0d25a6c24 Mon Sep 17 00:00:00 2001 From: jakequade Date: Sun, 25 Aug 2024 00:03:34 +1000 Subject: [PATCH 3/9] iOS support --- app.json | 1 + plugins/withExpandedController.js | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 plugins/withExpandedController.js diff --git a/app.json b/app.json index ad62a054..18082398 100644 --- a/app.json +++ b/app.json @@ -74,6 +74,7 @@ "com.reactnative.googlecast.RNGCExpandedControllerActivity": true } ], + ["./plugins/withExpandedController.js"], [ "expo-build-properties", { diff --git a/plugins/withExpandedController.js b/plugins/withExpandedController.js new file mode 100644 index 00000000..9ea30dcd --- /dev/null +++ b/plugins/withExpandedController.js @@ -0,0 +1,20 @@ +const { withAppDelegate } = require("@expo/config-plugins"); + +const withExpandedController = (config) => { + return withAppDelegate(config, async (config) => { + const contents = config.modResults.contents; + + // Looking for the initialProps string inside didFinishLaunchingWithOptions, + // and injecting expanded controller config. + // Should be updated once there is an expo config option - see https://github.com/react-native-google-cast/react-native-google-cast/discussions/537 + const injectionIndex = contents.indexOf("self.initialProps = @{};"); + config.modResults.contents = + contents.substring(0, injectionIndex) + + `\n [GCKCastContext sharedInstance].useDefaultExpandedMediaControls = true; \n` + + contents.substring(injectionIndex); + + return config; + }); +}; + +module.exports = withExpandedController; From 080de162ec404241fb3d77449e5f862a4171407b Mon Sep 17 00:00:00 2001 From: jakequade Date: Sat, 24 Aug 2024 14:37:49 +1000 Subject: [PATCH 4/9] extended cast controls on android --- app.json | 6 +++ components/PlayButton.tsx | 22 +++++++++- plugins/withAndroidMainActivityAttributes.js | 42 ++++++++++++++++++++ providers/PlaybackProvider.tsx | 2 +- 4 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 plugins/withAndroidMainActivityAttributes.js diff --git a/app.json b/app.json index f3f24a2b..e6babcb7 100644 --- a/app.json +++ b/app.json @@ -71,6 +71,12 @@ } } ], + [ + "./plugins/withAndroidMainActivityAttributes", + { + "com.reactnative.googlecast.RNGCExpandedControllerActivity": true + } + ], [ "expo-build-properties", { diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx index 4fb1dbef..1f0c59fa 100644 --- a/components/PlayButton.tsx +++ b/components/PlayButton.tsx @@ -22,6 +22,7 @@ import Animated, { withTiming, } from "react-native-reanimated"; import { Button } from "./Button"; +import { isCancel } from "axios"; interface Props extends React.ComponentProps { item?: BaseItemDto | null; @@ -33,9 +34,8 @@ const MIN_PLAYBACK_WIDTH = 15; export const PlayButton: React.FC = ({ item, url, ...props }) => { const { showActionSheetWithOptions } = useActionSheet(); - const { setCurrentlyPlayingState } = usePlayback(); - const client = useRemoteMediaClient(); + const { setCurrentlyPlayingState, isPlaying, currentlyPlaying } = usePlayback(); const [colorAtom] = useAtom(itemThemeColorAtom); @@ -63,12 +63,22 @@ export const PlayButton: React.FC = ({ item, url, ...props }) => { cancelButtonIndex, }, async (selectedIndex: number | undefined) => { + const isOpeningCurrentlyPlayingMedia = isPlaying + && currentlyPlaying?.item?.Name + && currentlyPlaying?.item?.Name === item?.Name switch (selectedIndex) { case 0: await CastContext.getPlayServicesState().then((state) => { if (state && state !== PlayServicesState.SUCCESS) CastContext.showPlayServicesErrorDialog(state); else { + // If we're opening a currently playing item, don't restart the media. + // Instead just open controls + console.log({ isOpeningCurrentlyPlayingMedia, currentlyPlaying }) + if (isOpeningCurrentlyPlayingMedia) { + CastContext.showExpandedControls(); + return; + } client.loadMedia({ mediaInfo: { contentUrl: url, @@ -80,6 +90,14 @@ export const PlayButton: React.FC = ({ item, url, ...props }) => { }, }, startTime: 0, + }).then(() => { + if (isOpeningCurrentlyPlayingMedia) { + return + } + setCurrentlyPlayingState({ item, url }); + CastContext.showExpandedControls(); + }).catch(e => { + console.log({ e }) }); } }); diff --git a/plugins/withAndroidMainActivityAttributes.js b/plugins/withAndroidMainActivityAttributes.js new file mode 100644 index 00000000..d57b8c93 --- /dev/null +++ b/plugins/withAndroidMainActivityAttributes.js @@ -0,0 +1,42 @@ +const { withAndroidManifest } = require("@expo/config-plugins"); + +function addAttributesToMainActivity(androidManifest, attributes) { + const { manifest } = androidManifest; + + if (!Array.isArray(manifest["application"])) { + console.warn("withAndroidMainActivityAttributes: No application array in manifest?"); + return androidManifest; + } + + const application = manifest["application"].find( + (item) => item.$["android:name"] === ".MainApplication" + ); + if (!application) { + console.warn("withAndroidMainActivityAttributes: No .MainApplication?"); + return androidManifest; + } + + if (!Array.isArray(application["activity"])) { + console.warn("withAndroidMainActivityAttributes: No activity array in .MainApplication?"); + return androidManifest; + } + + const activity = application["activity"].find( + (item) => item.$["android:name"] === ".MainActivity" + ); + if (!activity) { + console.warn("withAndroidMainActivityAttributes: No .MainActivity?"); + return androidManifest; + } + + activity.$ = { ...activity.$, ...attributes }; + + return androidManifest; +} + +module.exports = function withAndroidMainActivityAttributes(config, attributes) { + return withAndroidManifest(config, (config) => { + config.modResults = addAttributesToMainActivity(config.modResults, attributes); + return config; + }); +}; \ No newline at end of file diff --git a/providers/PlaybackProvider.tsx b/providers/PlaybackProvider.tsx index 03b6363f..1c4f16ba 100644 --- a/providers/PlaybackProvider.tsx +++ b/providers/PlaybackProvider.tsx @@ -224,7 +224,7 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({ useEffect(() => { if (!deviceId || !api?.accessToken) return; - const url = `wss://${api?.basePath + const url = `ws://${api?.basePath .replace("https://", "") .replace("http://", "")}/socket?api_key=${ api?.accessToken From 3bd1177c45002bae965ca1e19035e413945f92e2 Mon Sep 17 00:00:00 2001 From: jakequade Date: Sat, 24 Aug 2024 14:53:33 +1000 Subject: [PATCH 5/9] chromecast controls --- components/PlayButton.tsx | 18 +++++++++--------- plugins/withAndroidMainActivityAttributes.js | 2 +- providers/PlaybackProvider.tsx | 4 +++- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx index 1f0c59fa..bda14004 100644 --- a/components/PlayButton.tsx +++ b/components/PlayButton.tsx @@ -10,6 +10,7 @@ import { TouchableOpacity, View } from "react-native"; import CastContext, { PlayServicesState, useRemoteMediaClient, + useMediaStatus, } from "react-native-google-cast"; import Animated, { Easing, @@ -35,7 +36,8 @@ const MIN_PLAYBACK_WIDTH = 15; export const PlayButton: React.FC = ({ item, url, ...props }) => { const { showActionSheetWithOptions } = useActionSheet(); const client = useRemoteMediaClient(); - const { setCurrentlyPlayingState, isPlaying, currentlyPlaying } = usePlayback(); + const { setCurrentlyPlayingState } = usePlayback(); + const mediaStatus = useMediaStatus() const [colorAtom] = useAtom(itemThemeColorAtom); @@ -63,9 +65,9 @@ export const PlayButton: React.FC = ({ item, url, ...props }) => { cancelButtonIndex, }, async (selectedIndex: number | undefined) => { - const isOpeningCurrentlyPlayingMedia = isPlaying - && currentlyPlaying?.item?.Name - && currentlyPlaying?.item?.Name === item?.Name + const currentTitle = mediaStatus?.mediaInfo?.metadata?.title + const isOpeningCurrentlyPlayingMedia = currentTitle && currentTitle === item?.Name + switch (selectedIndex) { case 0: await CastContext.getPlayServicesState().then((state) => { @@ -73,8 +75,7 @@ export const PlayButton: React.FC = ({ item, url, ...props }) => { CastContext.showPlayServicesErrorDialog(state); else { // If we're opening a currently playing item, don't restart the media. - // Instead just open controls - console.log({ isOpeningCurrentlyPlayingMedia, currentlyPlaying }) + // Instead just open controls. if (isOpeningCurrentlyPlayingMedia) { CastContext.showExpandedControls(); return; @@ -91,14 +92,13 @@ export const PlayButton: React.FC = ({ item, url, ...props }) => { }, startTime: 0, }).then(() => { + // state is already set when reopening current media, so skip it here. if (isOpeningCurrentlyPlayingMedia) { return } setCurrentlyPlayingState({ item, url }); CastContext.showExpandedControls(); - }).catch(e => { - console.log({ e }) - }); + }) } }); break; diff --git a/plugins/withAndroidMainActivityAttributes.js b/plugins/withAndroidMainActivityAttributes.js index d57b8c93..c5764408 100644 --- a/plugins/withAndroidMainActivityAttributes.js +++ b/plugins/withAndroidMainActivityAttributes.js @@ -39,4 +39,4 @@ module.exports = function withAndroidMainActivityAttributes(config, attributes) config.modResults = addAttributesToMainActivity(config.modResults, attributes); return config; }); -}; \ No newline at end of file +}; diff --git a/providers/PlaybackProvider.tsx b/providers/PlaybackProvider.tsx index 1c4f16ba..4cbe0f00 100644 --- a/providers/PlaybackProvider.tsx +++ b/providers/PlaybackProvider.tsx @@ -224,7 +224,9 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({ useEffect(() => { if (!deviceId || !api?.accessToken) return; - const url = `ws://${api?.basePath + const protocol = api?.basePath.includes('https') ? 'wss' : 'ws' + + const url = `${protocol}://${api?.basePath .replace("https://", "") .replace("http://", "")}/socket?api_key=${ api?.accessToken From 2ee6573a90c90237f650a109c692f71ff11b264b Mon Sep 17 00:00:00 2001 From: jakequade Date: Sun, 25 Aug 2024 00:03:34 +1000 Subject: [PATCH 6/9] iOS support --- app.json | 1 + plugins/withExpandedController.js | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 plugins/withExpandedController.js diff --git a/app.json b/app.json index e6babcb7..d4e5e08f 100644 --- a/app.json +++ b/app.json @@ -77,6 +77,7 @@ "com.reactnative.googlecast.RNGCExpandedControllerActivity": true } ], + ["./plugins/withExpandedController.js"], [ "expo-build-properties", { diff --git a/plugins/withExpandedController.js b/plugins/withExpandedController.js new file mode 100644 index 00000000..9ea30dcd --- /dev/null +++ b/plugins/withExpandedController.js @@ -0,0 +1,20 @@ +const { withAppDelegate } = require("@expo/config-plugins"); + +const withExpandedController = (config) => { + return withAppDelegate(config, async (config) => { + const contents = config.modResults.contents; + + // Looking for the initialProps string inside didFinishLaunchingWithOptions, + // and injecting expanded controller config. + // Should be updated once there is an expo config option - see https://github.com/react-native-google-cast/react-native-google-cast/discussions/537 + const injectionIndex = contents.indexOf("self.initialProps = @{};"); + config.modResults.contents = + contents.substring(0, injectionIndex) + + `\n [GCKCastContext sharedInstance].useDefaultExpandedMediaControls = true; \n` + + contents.substring(injectionIndex); + + return config; + }); +}; + +module.exports = withExpandedController; From 318940f7c4eb0872a1ca615057412330b3a956cd Mon Sep 17 00:00:00 2001 From: jakequade Date: Sun, 1 Sep 2024 18:21:40 +1000 Subject: [PATCH 7/9] remove additional play call --- components/PlayButton.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx index bda14004..3d6c860d 100644 --- a/components/PlayButton.tsx +++ b/components/PlayButton.tsx @@ -96,7 +96,6 @@ export const PlayButton: React.FC = ({ item, url, ...props }) => { if (isOpeningCurrentlyPlayingMedia) { return } - setCurrentlyPlayingState({ item, url }); CastContext.showExpandedControls(); }) } From 58b72b8b754aca5ef4c1a038fcf86931aa638331 Mon Sep 17 00:00:00 2001 From: Fredrik Burmester Date: Sun, 1 Sep 2024 17:36:15 +0200 Subject: [PATCH 8/9] fix: open expanded controls in header if casting --- components/Chromecast.tsx | 45 ++++++++++++++++++++++++++++----------- 1 file changed, 32 insertions(+), 13 deletions(-) diff --git a/components/Chromecast.tsx b/components/Chromecast.tsx index 0b8c9cce..ff88767c 100644 --- a/components/Chromecast.tsx +++ b/components/Chromecast.tsx @@ -1,10 +1,12 @@ +import { Feather } from "@expo/vector-icons"; import { BlurView } from "expo-blur"; import React, { useEffect } from "react"; -import { Platform, View, ViewProps } from "react-native"; +import { Platform, TouchableOpacity, ViewProps } from "react-native"; import GoogleCast, { - CastButton, + CastContext, useCastDevice, useDevices, + useMediaStatus, useRemoteMediaClient, } from "react-native-google-cast"; @@ -25,6 +27,7 @@ export const Chromecast: React.FC = ({ const devices = useDevices(); const sessionManager = GoogleCast.getSessionManager(); const discoveryManager = GoogleCast.getDiscoveryManager(); + const mediaStatus = useMediaStatus(); useEffect(() => { (async () => { @@ -38,31 +41,47 @@ export const Chromecast: React.FC = ({ if (background === "transparent") return ( - { + if (mediaStatus?.currentItemId) CastContext.showExpandedControls(); + else CastContext.showCastDialog(); + }} className="rounded-full h-10 w-10 flex items-center justify-center b" {...props} > - - + + ); if (Platform.OS === "android") return ( - { + if (mediaStatus?.currentItemId) CastContext.showExpandedControls(); + else CastContext.showCastDialog(); + }} className="rounded-full h-10 w-10 flex items-center justify-center bg-neutral-800/80" {...props} > - - + + ); return ( - { + if (mediaStatus?.currentItemId) CastContext.showExpandedControls(); + else CastContext.showCastDialog(); + }} {...props} > - - + + + + ); }; From fb0b9c83ae25fe264b80c71b677ba60c44912699 Mon Sep 17 00:00:00 2001 From: Fredrik Burmester Date: Sun, 1 Sep 2024 17:36:27 +0200 Subject: [PATCH 9/9] 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 { item?: BaseItemDto | null; @@ -40,6 +43,7 @@ export const PlayButton: React.FC = ({ 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 = ({ 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 = ({ 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 = ({ item, url, ...props }) => { if (isOpeningCurrentlyPlayingMedia) { return; } - setCurrentlyPlayingState({ item, url }); CastContext.showExpandedControls(); }); }