alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-05-31 11:08:26 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

fix: design

Browse Source
This commit is contained in:
Fredrik Burmester
2024-08-27 22:32:09 +02:00
parent b550d6302f
commit 0d07f7216c
22 changed files with 303 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/PlayButton.tsx
View File

@@ -11,6 +11,8 @@ import CastContext, {
} from "react-native-google-cast";
import { Button } from "./Button";
import { Text } from "./common/Text";
import { useAtom } from "jotai";
import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
interface Props extends React.ComponentProps<typeof Button> {
item?: BaseItemDto | null;
@@ -22,6 +24,8 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
const client = useRemoteMediaClient();
const { setCurrentlyPlayingState } = usePlayback();
const [color] = useAtom(itemThemeColorAtom);
const onPress = async () => {
if (!url || !item) return;
@@ -88,23 +92,30 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
? "100%"
: `${Math.max(playbackPercent, 15)}%`,
height: "100%",
backgroundColor: color.primary,
}}
className="absolute w-full h-full top-0 left-0 rounded-xl bg-purple-600 z-10"
className="absolute w-full h-full top-0 left-0 rounded-xl z-10"
></View>
<View
style={{
height: "100%",
width: "100%",
backgroundColor: color.primary,
}}
className="absolute w-full h-full top-0 left-0 rounded-xl bg-purple-500 opacity-40"
className="absolute w-full h-full top-0 left-0 rounded-xl opacity-40"
></View>
<View className="flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full ">
<View className="flex flex-row items-center space-x-2">
<Text className="font-bold">
<Text
className="font-bold"
style={{
color: color.text,
}}
>
{runtimeTicksToMinutes(item?.RunTimeTicks)}
</Text>
<Ionicons name="play-circle" size={24} color="white" />
{client && <Feather name="cast" size={22} color="white" />}
<Ionicons name="play-circle" size={24} color={color.text} />
{client && <Feather name="cast" size={22} color={color.text} />}
</View>
</View>
</TouchableOpacity>