moved playback and quality in one settings menu

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

@@ -8,10 +8,9 @@ import { AudioTrackSelector } from "./AudioTrackSelector";
 import { CaptionsSelector } from "./CaptionsSelector";
 import { Controls } from "./Controls";
 import { DownloadButton } from "./DownloadButton";
-import { PlaybackSpeedSelector } from "./PlaybackSpeedSelector";
 import { ProgressBar } from "./ProgressBar";
-import { QualitySelector } from "./QualitySelector";
 import { SeasonSelector } from "./SeasonEpisodeSelector";
+import { SettingsSelector } from "./SettingsSelector";
 import { SourceSelector } from "./SourceSelector";
 import { mapMillisecondsToTime } from "./utils";
 
@@ -83,8 +82,7 @@ export const BottomControls = ({ isLocalAsset }: { isLocalAsset: boolean }) => {
               <CaptionsSelector />
               <SourceSelector />
               <AudioTrackSelector />
-              <PlaybackSpeedSelector />
-              <QualitySelector />
+              <SettingsSelector />
               {Platform.OS === "android" ||
               (Platform.OS === "ios" && isDevelopmentProvisioningProfile()) ? (
                 <DownloadButton />

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

@@ -1,41 +1,19 @@
-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"
-          icon={
-            <MaterialCommunityIcons
-              name="speedometer"
-              size={24}
-              color={theme.buttonSecondaryText.val}
-            />
-          }
-          onPress={() => setOpen(true)}
-        >
-          Playback
-        </MWButton>
-      </Controls>
-
     <Settings.Sheet
-        forceRemoveScrollEnabled={open}
-        open={open}
-        onOpenChange={setOpen}
+      forceRemoveScrollEnabled={props.open}
+      open={props.open}
+      onOpenChange={props.onOpenChange}
     >
       <Settings.SheetOverlay />
       <Settings.SheetHandle />
@@ -46,7 +24,7 @@ export const PlaybackSpeedSelector = () => {
               name="close"
               size={24}
               color={theme.playerSettingsUnactiveText.val}
-                onPress={() => setOpen(false)}
+              onPress={() => props.onOpenChange?.(false)}
             />
           }
           title="Playback settings"
@@ -67,7 +45,7 @@ export const PlaybackSpeedSelector = () => {
               }
               onPress={() => {
                 changePlaybackSpeed(speed)
-                    .then(() => setOpen(false))
+                  .then(() => props.onOpenChange?.(false))
                   .catch((err) => {
                     console.log("error", err);
                   });
@@ -77,6 +55,5 @@ export const PlaybackSpeedSelector = () => {
         </Settings.Content>
       </Settings.SheetFrame>
     </Settings.Sheet>
-    </>
   );
 };

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

@@ -1,17 +1,14 @@
-import { useState } from "react";
-import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import type { SheetProps } from "tamagui";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useTheme } from "tamagui";
 
 import { constructFullUrl } from "@movie-web/provider-utils";
 
 import { usePlayerStore } from "~/stores/player/store";
-import { MWButton } from "../ui/Button";
-import { Controls } from "./Controls";
 import { Settings } from "./settings/Sheet";
 
-export const QualitySelector = () => {
+export const QualitySelector = (props: SheetProps) => {
   const theme = useTheme();
-  const [open, setOpen] = useState(false);
   const videoRef = usePlayerStore((state) => state.videoRef);
   const videoSrc = usePlayerStore((state) => state.videoSrc);
   const stream = usePlayerStore((state) => state.interface.currentStream);
@@ -46,26 +43,10 @@ export const QualitySelector = () => {
 
   return (
     <>
-      <Controls>
-        <MWButton
-          type="secondary"
-          icon={
-            <MaterialIcons
-              name="hd"
-              size={24}
-              color={theme.buttonSecondaryText.val}
-            />
-          }
-          onPress={() => setOpen(true)}
-        >
-          Quality
-        </MWButton>
-      </Controls>
-
       <Settings.Sheet
-        forceRemoveScrollEnabled={open}
-        open={open}
-        onOpenChange={setOpen}
+        forceRemoveScrollEnabled={props.open}
+        open={props.open}
+        onOpenChange={props.onOpenChange}
       >
         <Settings.SheetOverlay />
         <Settings.SheetHandle />
@@ -76,7 +57,7 @@ export const QualitySelector = () => {
                 name="close"
                 size={24}
                 color={theme.playerSettingsUnactiveText.val}
-                onPress={() => setOpen(false)}
+                onPress={() => props.onOpenChange?.(false)}
               />
             }
             title="Quality settings"

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>
+    </>
+  );
+};

apps/expo/src/hooks/player/usePlaybackSpeed.ts

@@ -2,6 +2,8 @@ import { useCallback } from "react";
 
 import { usePlayerStore } from "~/stores/player/store";
 
+const speeds = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+
 export const usePlaybackSpeed = () => {
   const videoRef = usePlayerStore((state) => state.videoRef);
 
@@ -15,6 +17,7 @@ export const usePlaybackSpeed = () => {
   );
 
   return {
+    speeds,
     currentSpeed: videoRef?.props.rate ?? 1,
     changePlaybackSpeed,
   } as const;