feat: add settings for default quality on wifi/data

apps/expo/src/app/(tabs)/settings.tsx

@@ -33,7 +33,10 @@ import { MWSelect } from "~/components/ui/Select";
 import { MWSeparator } from "~/components/ui/Separator";
 import { MWSwitch } from "~/components/ui/Switch";
 import { checkForUpdate } from "~/lib/update";
-import { usePlayerSettingsStore } from "~/stores/settings";
+import {
+  useNetworkSettingsStore,
+  usePlayerSettingsStore,
+} from "~/stores/settings";
 import { useThemeStore } from "~/stores/theme";
 
 const themeOptions: ThemeStoreOption[] = [
@@ -44,10 +47,13 @@ const themeOptions: ThemeStoreOption[] = [
   "teal",
 ];
 
+const defaultQualityOptions = ["Highest", "Lowest"];
+
 export default function SettingsScreen() {
   const theme = useTheme();
   const { gestureControls, setGestureControls, autoPlay, setAutoPlay } =
     usePlayerSettingsStore();
+  const { allowMobileData, setAllowMobileData } = useNetworkSettingsStore();
   const toastController = useToastController();
   const [showUpdateSheet, setShowUpdateSheet] = useState(false);
   const [updateMarkdownContent, setUpdateMarkdownContent] = useState("");
@@ -113,7 +119,7 @@ export default function SettingsScreen() {
   return (
     <ScreenLayout>
       <View padding={4}>
-        <YStack gap="$8">
+        <YStack gap="$4">
           <YStack gap="$4">
             <Text fontSize="$7" fontWeight="$bold">
               Appearance
@@ -157,6 +163,38 @@ export default function SettingsScreen() {
             </YStack>
           </YStack>
 
+          <YStack gap="$4">
+            <Text fontSize="$7" fontWeight="$bold">
+              Network
+            </Text>
+            <MWSeparator />
+            <YStack gap="$2">
+              <XStack gap="$4" alignItems="center">
+                <Text fontWeight="$semibold" flexGrow={1}>
+                  Default quality (Wi-Fi)
+                </Text>
+                <DefaultQualitySelector qualityType="wifi" />
+              </XStack>
+              <XStack gap="$4" alignItems="center">
+                <Text fontWeight="$semibold" flexGrow={1}>
+                  Default quality (Data)
+                </Text>
+                <DefaultQualitySelector qualityType="data" />
+              </XStack>
+              <XStack gap="$4" alignItems="center">
+                <Text fontWeight="$semibold" flexGrow={1}>
+                  Allow downloads on mobile data
+                </Text>
+                <MWSwitch
+                  checked={allowMobileData}
+                  onCheckedChange={setAllowMobileData}
+                >
+                  <MWSwitch.Thumb />
+                </MWSwitch>
+              </XStack>
+            </YStack>
+          </YStack>
+
           <YStack gap="$4">
             <Text fontSize="$7" fontWeight="$bold">
               App
@@ -383,3 +421,114 @@ export function ThemeSelector(props: SelectProps) {
     </MWSelect>
   );
 }
+
+interface DefaultQualitySelectorProps extends SelectProps {
+  qualityType: "wifi" | "data";
+}
+
+export function DefaultQualitySelector(props: DefaultQualitySelectorProps) {
+  const theme = useTheme();
+  const {
+    wifiDefaultQuality,
+    mobileDataDefaultQuality,
+    setWifiDefaultQuality,
+    setMobileDataDefaultQuality,
+  } = useNetworkSettingsStore();
+
+  return (
+    <MWSelect
+      value={
+        props.qualityType === "wifi"
+          ? wifiDefaultQuality
+          : mobileDataDefaultQuality
+      }
+      onValueChange={
+        props.qualityType === "wifi"
+          ? setWifiDefaultQuality
+          : setMobileDataDefaultQuality
+      }
+      disablePreventBodyScroll
+      {...props}
+    >
+      <MWSelect.Trigger
+        maxWidth="$12"
+        iconAfter={
+          <FontAwesome name="chevron-down" color={theme.inputIconColor.val} />
+        }
+      >
+        <Select.Value fontWeight="$semibold" textTransform="capitalize" />
+      </MWSelect.Trigger>
+
+      <Adapt platform="native">
+        <Sheet
+          modal
+          dismissOnSnapToBottom
+          dismissOnOverlayPress
+          animationConfig={{
+            type: "spring",
+            damping: 20,
+            mass: 1.2,
+            stiffness: 250,
+          }}
+          snapPoints={[35]}
+        >
+          <Sheet.Handle backgroundColor="$sheetHandle" />
+          <Sheet.Frame
+            backgroundColor="$sheetBackground"
+            padding="$4"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Adapt.Contents />
+          </Sheet.Frame>
+          <Sheet.Overlay
+            animation="lazy"
+            backgroundColor="rgba(0, 0, 0, 0.8)"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+        </Sheet>
+      </Adapt>
+
+      <Select.Content>
+        <Select.Viewport
+          animation="static"
+          animateOnly={["transform", "opacity"]}
+          enterStyle={{ o: 0, y: -10 }}
+          exitStyle={{ o: 0, y: 10 }}
+        >
+          {defaultQualityOptions.map((item, i) => (
+            <Select.Item
+              index={i}
+              key={item}
+              value={item}
+              backgroundColor="$sheetItemBackground"
+              borderTopRightRadius={i === 0 ? "$8" : 0}
+              borderTopLeftRadius={i === 0 ? "$8" : 0}
+              borderBottomRightRadius={
+                i === defaultQualityOptions.length - 1 ? "$8" : 0
+              }
+              borderBottomLeftRadius={
+                i === defaultQualityOptions.length - 1 ? "$8" : 0
+              }
+            >
+              <Select.ItemText
+                textTransform="capitalize"
+                fontWeight="$semibold"
+              >
+                {item}
+              </Select.ItemText>
+              <Select.ItemIndicator ml="auto">
+                <MaterialIcons
+                  name="check-circle"
+                  size={24}
+                  color={theme.sheetItemSelected.val}
+                />
+              </Select.ItemIndicator>
+            </Select.Item>
+          ))}
+        </Select.Viewport>
+      </Select.Content>
+    </MWSelect>
+  );
+}

apps/expo/src/stores/settings/index.ts

@@ -212,3 +212,35 @@ export const useWatchHistoryStore = create<
     },
   ),
 );
+
+interface NetworkSettingsStoreState {
+  allowMobileData: boolean;
+  setAllowMobileData: (enabled: boolean) => void;
+  wifiDefaultQuality: string;
+  setWifiDefaultQuality: (quality: string) => void;
+  mobileDataDefaultQuality: string;
+  setMobileDataDefaultQuality: (quality: string) => void;
+}
+
+export const useNetworkSettingsStore = create<
+  NetworkSettingsStoreState,
+  [["zustand/persist", NetworkSettingsStoreState]]
+>(
+  persist(
+    (set) => ({
+      allowMobileData: false,
+      setAllowMobileData: (enabled: boolean) =>
+        set({ allowMobileData: enabled }),
+      wifiDefaultQuality: "Highest",
+      setWifiDefaultQuality: (quality: string) =>
+        set({ wifiDefaultQuality: quality }),
+      mobileDataDefaultQuality: "Lowest",
+      setMobileDataDefaultQuality: (quality: string) =>
+        set({ mobileDataDefaultQuality: quality }),
+    }),
+    {
+      name: "network-settings",
+      storage: createJSONStorage(() => zustandStorage),
+    },
+  ),
+);