fix: move cast button + ask user which device to play on

This commit is contained in:
Fredrik Burmester
2024-08-14 10:09:59 +02:00
parent ede390e74b
commit bd8bf8349f
5 changed files with 159 additions and 107 deletions

View File

@@ -3,8 +3,9 @@ import React, { useEffect } from "react";
import * as NavigationBar from "expo-navigation-bar";
import { TabBarIcon } from "@/components/navigation/TabBarIcon";
import { Colors } from "@/constants/Colors";
import { Platform, TouchableOpacity } from "react-native";
import { Platform, TouchableOpacity, View } from "react-native";
import { Feather } from "@expo/vector-icons";
import { Chromecast } from "@/components/Chromecast";
export default function TabLayout() {
useEffect(() => {
@@ -41,18 +42,23 @@ export default function TabLayout() {
router.push("/(auth)/downloads");
}}
>
<Feather name="download" color={"white"} size={24} />
<Feather name="download" color={"white"} size={22} />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity
style={{ marginHorizontal: 17 }}
onPress={() => {
router.push("/(auth)/settings");
}}
>
<Feather name="settings" color={"white"} size={24} />
</TouchableOpacity>
<View className="flex flex-row items-center space-x-2">
<Chromecast />
<TouchableOpacity
style={{ marginRight: 17 }}
onPress={() => {
router.push("/(auth)/settings");
}}
>
<View className="h-10 aspect-square flex items-center justify-center rounded">
<Feather name="settings" color={"white"} size={22} />
</View>
</TouchableOpacity>
</View>
),
}}
/>

View File

@@ -137,35 +137,38 @@ const page: React.FC = () => {
const [cp, setCp] = useAtom(currentlyPlayingItemAtom);
const client = useRemoteMediaClient();
const onPressPlay = useCallback(async () => {
if (!playbackUrl || !item) return;
const onPressPlay = useCallback(
async (type: "device" | "cast" = "device") => {
if (!playbackUrl || !item) return;
if (chromecastReady && client) {
await CastContext.getPlayServicesState().then((state) => {
if (state && state !== PlayServicesState.SUCCESS)
CastContext.showPlayServicesErrorDialog(state);
else {
client.loadMedia({
mediaInfo: {
contentUrl: playbackUrl,
contentType: "video/mp4",
metadata: {
type: item.Type === "Episode" ? "tvShow" : "movie",
title: item.Name || "",
subtitle: item.Overview || "",
if (type === "cast" && client) {
await CastContext.getPlayServicesState().then((state) => {
if (state && state !== PlayServicesState.SUCCESS)
CastContext.showPlayServicesErrorDialog(state);
else {
client.loadMedia({
mediaInfo: {
contentUrl: playbackUrl,
contentType: "video/mp4",
metadata: {
type: item.Type === "Episode" ? "tvShow" : "movie",
title: item.Name || "",
subtitle: item.Overview || "",
},
},
},
startTime: 0,
});
}
});
} else {
setCp({
item,
playbackUrl,
});
}
}, [playbackUrl, item]);
startTime: 0,
});
}
});
} else {
setCp({
item,
playbackUrl,
});
}
},
[playbackUrl, item],
);
if (l1)
return (
@@ -262,7 +265,6 @@ const page: React.FC = () => {
<View className="h-12 aspect-square flex items-center justify-center"></View>
)}
<PlayedStatus item={item} />
<Chromecast />
</View>
<Text>{item.Overview}</Text>
</View>
@@ -287,7 +289,7 @@ const page: React.FC = () => {
<NextEpisodeButton item={item} type="previous" className="mr-2" />
<PlayButton
item={item}
chromecastReady={false}
chromecastReady={chromecastReady}
onPress={onPressPlay}
className="grow"
/>