alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-07-15 08:52:59 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

wip: design refactor

Browse Source
This commit is contained in:
Fredrik Burmester
2024-08-28 22:00:50 +02:00
parent 309345c834
commit 4641ff726c
16 changed files with 580 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
components/BitrateSelector.tsx
View File

@@ -1,6 +1,7 @@
import { TouchableOpacity, View } from "react-native";
import * as DropdownMenu from "zeego/dropdown-menu";
import { Text } from "./common/Text";
import { useMemo } from "react";
export type Bitrate = {
key: string;
@@ -43,41 +44,57 @@ const BITRATES: Bitrate[] = [
interface Props extends React.ComponentProps<typeof View> {
onChange: (value: Bitrate) => void;
selected: Bitrate;
inverted?: boolean;
}
export const BitrateSelector: React.FC<Props> = ({
onChange,
selected,
inverted,
...props
}) => {
const sorted = useMemo(() => {
if (inverted)
return BITRATES.sort(
(a, b) => (a.value || Infinity) - (b.value || Infinity)
);
return BITRATES.sort(
(a, b) => (b.value || Infinity) - (a.value || Infinity)
);
}, []);
return (
<View className="flex flex-row items-center justify-between" {...props}>
<View
className="flex shrink"
style={{
minWidth: 60,
maxWidth: 200,
}}
>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<View className="flex flex-col">
<View className="flex flex-col" {...props}>
<Text className="opacity-50 mb-1 text-xs">Quality</Text>
<View className="flex flex-row">
<TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
<Text className="">
{BITRATES.find((b) => b.value === selected.value)?.key}
</Text>
</TouchableOpacity>
</View>
<TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
<Text style={{}} className="" numberOfLines={1}>
{BITRATES.find((b) => b.value === selected.value)?.key}
</Text>
</TouchableOpacity>
</View>
</DropdownMenu.Trigger>
<DropdownMenu.Content
loop={true}
loop={false}
side="bottom"
align="start"
align="center"
alignOffset={0}
avoidCollisions={true}
collisionPadding={8}
sideOffset={8}
collisionPadding={0}
sideOffset={0}
>
<DropdownMenu.Label>Bitrates</DropdownMenu.Label>
{BITRATES?.map((b, index: number) => (
{sorted.map((b) => (
<DropdownMenu.Item
key={index.toString()}
key={b.key}
onSelect={() => {
onChange(b);
}}