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

moved playback and quality in one settings menu

Browse Source
This commit is contained in:
Jorrin
2024-04-02 22:01:48 +02:00
parent 4eaf04761e
commit 6c55ed92e2
5 changed files with 156 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
apps/expo/src/components/player/PlaybackSpeedSelector.tsx
View File

@@ -1,82 +1,59 @@
import { useState } from "react";
import type { SheetProps } from "tamagui";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useTheme } from "tamagui";
import { usePlaybackSpeed } from "~/hooks/player/usePlaybackSpeed";
import { MWButton } from "../ui/Button";
import { Controls } from "./Controls";
import { Settings } from "./settings/Sheet";
export const PlaybackSpeedSelector = () => {
export const PlaybackSpeedSelector = (props: SheetProps) => {
const theme = useTheme();
const [open, setOpen] = useState(false);
const { currentSpeed, changePlaybackSpeed } = usePlaybackSpeed();
const speeds = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
const { speeds, currentSpeed, changePlaybackSpeed } = usePlaybackSpeed();
return (
<>
<Controls>
<MWButton
type="secondary"
<Settings.Sheet
forceRemoveScrollEnabled={props.open}
open={props.open}
onOpenChange={props.onOpenChange}
>
<Settings.SheetOverlay />
<Settings.SheetHandle />
<Settings.SheetFrame>
<Settings.Header
icon={
<MaterialCommunityIcons
name="speedometer"
name="close"
size={24}
color={theme.buttonSecondaryText.val}
color={theme.playerSettingsUnactiveText.val}
onPress={() => props.onOpenChange?.(false)}
/>
}
onPress={() => setOpen(true)}
>
Playback
</MWButton>
</Controls>
<Settings.Sheet
forceRemoveScrollEnabled={open}
open={open}
onOpenChange={setOpen}
>
<Settings.SheetOverlay />
<Settings.SheetHandle />
<Settings.SheetFrame>
<Settings.Header
icon={
<MaterialCommunityIcons
name="close"
size={24}
color={theme.playerSettingsUnactiveText.val}
onPress={() => setOpen(false)}
/>
}
title="Playback settings"
/>
<Settings.Content>
{speeds.map((speed) => (
<Settings.Item
key={speed}
title={`${speed}x`}
iconRight={
speed === currentSpeed && (
<MaterialCommunityIcons
name="check-circle"
size={24}
color={theme.sheetItemSelected.val}
/>
)
}
onPress={() => {
changePlaybackSpeed(speed)
.then(() => setOpen(false))
.catch((err) => {
console.log("error", err);
});
}}
/>
))}
</Settings.Content>
</Settings.SheetFrame>
</Settings.Sheet>
</>
title="Playback settings"
/>
<Settings.Content>
{speeds.map((speed) => (
<Settings.Item
key={speed}
title={`${speed}x`}
iconRight={
speed === currentSpeed && (
<MaterialCommunityIcons
name="check-circle"
size={24}
color={theme.sheetItemSelected.val}
/>
)
}
onPress={() => {
changePlaybackSpeed(speed)
.then(() => props.onOpenChange?.(false))
.catch((err) => {
console.log("error", err);
});
}}
/>
))}
</Settings.Content>
</Settings.SheetFrame>
</Settings.Sheet>
);
};