moved playback and quality in one settings menu

apps/expo/src/components/player/SettingsSelector.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import { useTheme } from "tamagui";
+
+import { MWButton } from "../ui/Button";
+import { Controls } from "./Controls";
+import { PlaybackSpeedSelector } from "./PlaybackSpeedSelector";
+import { QualitySelector } from "./QualitySelector";
+import { Settings } from "./settings/Sheet";
+
+export const SettingsSelector = () => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [qualityOpen, setQualityOpen] = useState(false);
+  const [playbackOpen, setPlaybackOpen] = useState(false);
+
+  return (
+    <>
+      <Controls>
+        <MWButton
+          type="secondary"
+          icon={
+            <MaterialIcons
+              name="display-settings"
+              size={24}
+              color={theme.buttonSecondaryText.val}
+            />
+          }
+          onPress={() => setOpen(true)}
+        >
+          Settings
+        </MWButton>
+      </Controls>
+
+      <Settings.Sheet
+        forceRemoveScrollEnabled={open}
+        open={open}
+        onOpenChange={setOpen}
+      >
+        <Settings.SheetOverlay />
+        <Settings.SheetHandle />
+        <Settings.SheetFrame>
+          <QualitySelector open={qualityOpen} onOpenChange={setQualityOpen} />
+          <PlaybackSpeedSelector
+            open={playbackOpen}
+            onOpenChange={setPlaybackOpen}
+          />
+          <Settings.Header
+            icon={
+              <MaterialIcons
+                name="close"
+                size={24}
+                color={theme.playerSettingsUnactiveText.val}
+                onPress={() => setOpen(false)}
+              />
+            }
+            title="Settings"
+          />
+          <Settings.Content>
+            <Settings.Item
+              title="Quality"
+              iconLeft={
+                <MaterialIcons
+                  name="hd"
+                  size={24}
+                  color={theme.playerSettingsUnactiveText.val}
+                />
+              }
+              iconRight={
+                <MaterialCommunityIcons
+                  name="chevron-right"
+                  size={24}
+                  color="white"
+                />
+              }
+              onPress={() => setQualityOpen(true)}
+            />
+            <Settings.Item
+              title="Playback speed"
+              iconLeft={
+                <MaterialIcons
+                  name="speed"
+                  size={24}
+                  color={theme.playerSettingsUnactiveText.val}
+                />
+              }
+              iconRight={
+                <MaterialCommunityIcons
+                  name="chevron-right"
+                  size={24}
+                  color="white"
+                />
+              }
+              onPress={() => setPlaybackOpen(true)}
+            />
+          </Settings.Content>
+        </Settings.SheetFrame>
+      </Settings.Sheet>
+    </>
+  );
+};