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

introduce store with idle tracking

Browse Source
This commit is contained in:
Jorrin
2024-02-12 16:11:35 +01:00
parent 3d1a5a88f2
commit 094c0382a6
12 changed files with 234 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/expo/src/components/player/BackButton.tsx
View File

@@ -1,12 +1,12 @@
import { useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { usePlayer } from "~/context/player.context";
import { usePlayerStore } from "~/stores/player/store";
export const BackButton = ({
className,
}: Partial<React.ComponentProps<typeof Ionicons>>) => {
const { unlockOrientation } = usePlayer();
const unlockOrientation = usePlayerStore((state) => state.unlockOrientation);
const router = useRouter();
return (

13
apps/expo/src/components/player/Controls.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { View } from "react-native";
import { usePlayerStore } from "~/stores/player/store";
interface ControlsProps {
children: React.ReactNode;
}
export const Controls = ({ children }: ControlsProps) => {
const idle = usePlayerStore((state) => state.interface.isIdle);
return <View className="flex-1 items-center">{!idle && children}</View>;
};

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

@@ -1,9 +1,9 @@
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import { Image, View } from "react-native";
import Icon from "../../../assets/images/icon-transparent.png";
import { Text } from "../ui/Text";
import { BackButton } from "./BackButton";
import { Controls } from "./Controls";
interface HeaderProps {
title: string;
@@ -11,13 +11,15 @@ interface HeaderProps {
export const Header = ({ title }: HeaderProps) => {
return (
<View className="absolute top-0 flex w-full flex-row items-center justify-between px-6 pt-6">
<BackButton className="w-36" />
<Text className="font-bold">{title}</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">
<Image source={Icon} className="h-6 w-6" />
<Text className="font-bold">movie-web</Text>
<Controls>
<View className="absolute top-0 flex w-full flex-row items-center justify-between px-6 pt-6">
<BackButton className="w-36" />
<Text className="font-bold">{title}</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">
<Image source={Icon} className="h-6 w-6" />
<Text className="font-bold">movie-web</Text>
</View>
</View>
</View>
</Controls>
);
};