mirror of
https://github.com/movie-web/native-app.git
synced 2025-09-13 14:53:24 +00:00
refactor to tamagui
This commit is contained in:
Jorrin
@@ -1,33 +1,25 @@
|
||||
import type { SheetProps } from "tamagui";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import Modal from "react-native-modal";
|
||||
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useTheme, View } from "tamagui";
|
||||
|
||||
import { defaultTheme } from "@movie-web/tailwind-config/themes";
|
||||
import { fetchMediaDetails, fetchSeasonDetails } from "@movie-web/tmdb";
|
||||
|
||||
import { useBoolean } from "~/hooks/useBoolean";
|
||||
import { usePlayerStore } from "~/stores/player/store";
|
||||
import { Button } from "../ui/Button";
|
||||
import { Divider } from "../ui/Divider";
|
||||
import { Text } from "../ui/Text";
|
||||
import { MWButton } from "../ui/Button";
|
||||
import { Controls } from "./Controls";
|
||||
import { Settings } from "./settings/Sheet";
|
||||
|
||||
const EpisodeSelector = ({
|
||||
seasonNumber,
|
||||
setSelectedSeason,
|
||||
closeModal,
|
||||
}: {
|
||||
...props
|
||||
}: SheetProps & {
|
||||
seasonNumber: number;
|
||||
setSelectedSeason: (season: number | null) => void;
|
||||
closeModal: () => void;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const meta = usePlayerStore((state) => state.meta);
|
||||
const setMeta = usePlayerStore((state) => state.setMeta);
|
||||
|
||||
@@ -42,38 +34,47 @@ const EpisodeSelector = ({
|
||||
if (!meta) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoading && (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<ActivityIndicator
|
||||
size="large"
|
||||
color={defaultTheme.extend.colors.buttons.purple}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{data && (
|
||||
<ScrollView
|
||||
className="flex-1 flex-col bg-gray-900"
|
||||
contentContainerStyle={{
|
||||
padding: 10,
|
||||
}}
|
||||
>
|
||||
<View className="flex-row items-center gap-4 p-2">
|
||||
<Settings.Sheet
|
||||
open={props.open}
|
||||
onOpenChange={props.onOpenChange}
|
||||
{...props}
|
||||
>
|
||||
<Settings.SheetOverlay />
|
||||
<Settings.SheetHandle />
|
||||
<Settings.SheetFrame isLoading={isLoading}>
|
||||
<Settings.Header
|
||||
icon={
|
||||
<Ionicons
|
||||
name="arrow-back"
|
||||
size={20}
|
||||
color="white"
|
||||
onPress={() => setSelectedSeason(null)}
|
||||
size={24}
|
||||
color={theme.buttonSecondaryText.val}
|
||||
onPress={() => {
|
||||
setSelectedSeason(null);
|
||||
props.onOpenChange?.(false);
|
||||
}}
|
||||
/>
|
||||
<Text className="text-center font-bold">
|
||||
Season {data.season_number}
|
||||
</Text>
|
||||
</View>
|
||||
<Divider />
|
||||
{data.episodes.map((episode) => (
|
||||
<TouchableOpacity
|
||||
}
|
||||
title={`Season ${data?.season_number}`}
|
||||
/>
|
||||
<Settings.Content>
|
||||
{data?.episodes.map((episode) => (
|
||||
<Settings.Item
|
||||
key={episode.id}
|
||||
className="p-3"
|
||||
iconLeft={
|
||||
<View
|
||||
width={32}
|
||||
height={32}
|
||||
backgroundColor="#121c24"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
borderRadius={6}
|
||||
>
|
||||
<Settings.Text fontSize={14}>
|
||||
E{episode.episode_number}
|
||||
</Settings.Text>
|
||||
</View>
|
||||
}
|
||||
title={episode.name}
|
||||
onPress={() => {
|
||||
setMeta({
|
||||
...meta,
|
||||
@@ -82,26 +83,23 @@ const EpisodeSelector = ({
|
||||
tmdbId: episode.id.toString(),
|
||||
},
|
||||
});
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
E{episode.episode_number} {episode.name}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
)}
|
||||
</>
|
||||
</Settings.Content>
|
||||
</Settings.SheetFrame>
|
||||
</Settings.Sheet>
|
||||
);
|
||||
};
|
||||
|
||||
export const SeasonSelector = () => {
|
||||
const theme = useTheme();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [episodeOpen, setEpisodeOpen] = useState(false);
|
||||
|
||||
const [selectedSeason, setSelectedSeason] = useState<number | null>(null);
|
||||
const meta = usePlayerStore((state) => state.meta);
|
||||
|
||||
const { isTrue, on, off } = useBoolean();
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["seasons", meta!.tmdbId],
|
||||
queryFn: async () => {
|
||||
@@ -113,77 +111,74 @@ export const SeasonSelector = () => {
|
||||
if (meta?.type !== "show") return null;
|
||||
|
||||
return (
|
||||
<View className="max-w-36 flex-1">
|
||||
<>
|
||||
<Controls>
|
||||
<Button
|
||||
title="Episode"
|
||||
variant="outline"
|
||||
onPress={on}
|
||||
iconLeft={
|
||||
<MWButton
|
||||
type="secondary"
|
||||
icon={
|
||||
<MaterialCommunityIcons
|
||||
name="audio-video"
|
||||
size={24}
|
||||
color={defaultTheme.extend.colors.buttons.purple}
|
||||
color={theme.buttonSecondaryText.val}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
onPress={() => setOpen(true)}
|
||||
>
|
||||
Episodes
|
||||
</MWButton>
|
||||
</Controls>
|
||||
|
||||
<Modal
|
||||
isVisible={isTrue}
|
||||
onBackdropPress={off}
|
||||
supportedOrientations={["portrait", "landscape"]}
|
||||
style={{
|
||||
width: "35%",
|
||||
justifyContent: "center",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
<Settings.Sheet
|
||||
forceRemoveScrollEnabled={open}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
{selectedSeason === null && (
|
||||
<>
|
||||
{isLoading && (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<ActivityIndicator
|
||||
size="large"
|
||||
color={defaultTheme.extend.colors.buttons.purple}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{data && (
|
||||
<ScrollView
|
||||
className="flex-1 flex-col bg-gray-900"
|
||||
contentContainerStyle={{
|
||||
padding: 10,
|
||||
}}
|
||||
>
|
||||
<Text className="text-center font-bold">
|
||||
{data.result.name}
|
||||
</Text>
|
||||
<Divider />
|
||||
{data.result.seasons.map((season) => (
|
||||
<TouchableOpacity
|
||||
<Settings.SheetOverlay />
|
||||
<Settings.SheetHandle />
|
||||
<Settings.SheetFrame isLoading={isLoading}>
|
||||
{episodeOpen && selectedSeason ? (
|
||||
<EpisodeSelector
|
||||
seasonNumber={selectedSeason}
|
||||
setSelectedSeason={setSelectedSeason}
|
||||
open={episodeOpen}
|
||||
onOpenChange={setEpisodeOpen}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Settings.Header
|
||||
icon={
|
||||
<MaterialCommunityIcons
|
||||
name="close"
|
||||
size={24}
|
||||
color={theme.playerSettingsUnactiveText.val}
|
||||
onPress={() => setOpen(false)}
|
||||
/>
|
||||
}
|
||||
title={data?.result.name ?? ""}
|
||||
/>
|
||||
<Settings.Content>
|
||||
{data?.result.seasons.map((season) => (
|
||||
<Settings.Item
|
||||
key={season.season_number}
|
||||
className="m-1 flex flex-row items-center p-2"
|
||||
onPress={() => setSelectedSeason(season.season_number)}
|
||||
>
|
||||
<Text className="flex-grow">
|
||||
Season {season.season_number}
|
||||
</Text>
|
||||
<Ionicons name="chevron-forward" size={24} color="white" />
|
||||
</TouchableOpacity>
|
||||
title={`Season ${season.season_number}`}
|
||||
iconRight={
|
||||
<MaterialCommunityIcons
|
||||
name="chevron-right"
|
||||
size={24}
|
||||
color="white"
|
||||
/>
|
||||
}
|
||||
onPress={() => {
|
||||
setSelectedSeason(season.season_number);
|
||||
setEpisodeOpen(true);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{selectedSeason !== null && (
|
||||
<EpisodeSelector
|
||||
seasonNumber={selectedSeason}
|
||||
setSelectedSeason={setSelectedSeason}
|
||||
closeModal={off}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</View>
|
||||
</Settings.Content>
|
||||
</>
|
||||
)}
|
||||
</Settings.SheetFrame>
|
||||
</Settings.Sheet>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user