movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 16:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: cleanup headerdata stuff

Browse Source
This commit is contained in:
Adrian Castro
2024-02-12 19:26:00 +01:00
parent a397974325
commit f18a5421e5
2 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/expo/src/app/videoPlayer.tsx
View File

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

17
apps/expo/src/components/player/Header.tsx
View File

@@ -5,15 +5,26 @@ import { Text } from "../ui/Text";
import { BackButton } from "./BackButton"; import { BackButton } from "./BackButton";
import { Controls } from "./Controls"; import { Controls } from "./Controls";
interface HeaderProps { export interface HeaderData {
title: string; title: string;
year: number;
season?: number;
episode?: number;
} }
export const Header = ({ title }: HeaderProps) => { interface HeaderProps {
data: HeaderData;
}
export const Header = ({ data }: HeaderProps) => {
return ( return (
<Controls className="absolute top-0 flex w-full flex-row items-center justify-between px-6 pt-6"> <Controls className="absolute top-0 flex w-full flex-row items-center justify-between px-6 pt-6">
<BackButton className="w-36" /> <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"> <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" /> <Image source={Icon} className="h-6 w-6" />
<Text className="font-bold">movie-web</Text> <Text className="font-bold">movie-web</Text>