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 />
+              <SettingsSelector />
-              <QualitySelector />
               {Platform.OS === "android" ||
               (Platform.OS === "ios" && isDevelopmentProvisioningProfile()) ? (
                 <DownloadButton />

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

@@ -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 { speeds, currentSpeed, changePlaybackSpeed } = usePlaybackSpeed();
-  const { currentSpeed, changePlaybackSpeed } = usePlaybackSpeed();
-
-  const speeds = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
 
   return (
-    <>
+    <Settings.Sheet
-      <Controls>
+      forceRemoveScrollEnabled={props.open}
-        <MWButton
+      open={props.open}
-          type="secondary"
+      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)}
+          title="Playback settings"
-        >
+        />
-          Playback
+        <Settings.Content>
-        </MWButton>
+          {speeds.map((speed) => (
-      </Controls>
+            <Settings.Item
-
+              key={speed}
-      <Settings.Sheet
+              title={`${speed}x`}
-        forceRemoveScrollEnabled={open}
+              iconRight={
-        open={open}
+                speed === currentSpeed && (
-        onOpenChange={setOpen}
+                  <MaterialCommunityIcons
-      >
+                    name="check-circle"
-        <Settings.SheetOverlay />
+                    size={24}
-        <Settings.SheetHandle />
+                    color={theme.sheetItemSelected.val}
-        <Settings.SheetFrame>
+                  />
-          <Settings.Header
+                )
-            icon={
+              }
-              <MaterialCommunityIcons
+              onPress={() => {
-                name="close"
+                changePlaybackSpeed(speed)
-                size={24}
+                  .then(() => props.onOpenChange?.(false))
-                color={theme.playerSettingsUnactiveText.val}
+                  .catch((err) => {
-                onPress={() => setOpen(false)}
+                    console.log("error", err);
-              />
+                  });
-            }
+              }}
-            title="Playback settings"
+            />
-          />
+          ))}
-          <Settings.Content>
+        </Settings.Content>
-            {speeds.map((speed) => (
+      </Settings.SheetFrame>
-              <Settings.Item
+    </Settings.Sheet>
-                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>
-    </>
   );
 };

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

@@ -1,17 +1,14 @@
-import { useState } from "react";
+import type { SheetProps } from "tamagui";
-import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+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}
+        forceRemoveScrollEnabled={props.open}
-        open={open}
+        open={props.open}
-        onOpenChange={setOpen}
+        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;