wip

components/BitrateSelector.tsx

@@ -1,7 +1,8 @@
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 
 export type Bitrate = {
   key: string;
@@ -9,7 +10,7 @@ export type Bitrate = {
   height?: number;
 };
 
-const BITRATES: Bitrate[] = [
+export const BITRATES: Bitrate[] = [
   {
     key: "Max",
     value: undefined,
@@ -42,17 +43,11 @@ const BITRATES: Bitrate[] = [
 ];
 
 interface Props extends React.ComponentProps<typeof View> {
-  onChange: (value: Bitrate) => void;
-  selected: Bitrate;
   inverted?: boolean;
 }
 
-export const BitrateSelector: React.FC<Props> = ({
-  onChange,
-  selected,
-  inverted,
-  ...props
-}) => {
+export const BitrateSelector: React.FC<Props> = ({ inverted, ...props }) => {
+  const { setPlaySettings, playSettings } = usePlaySettings();
   const sorted = useMemo(() => {
     if (inverted)
       return BITRATES.sort(
@@ -63,6 +58,18 @@ export const BitrateSelector: React.FC<Props> = ({
     );
   }, []);
 
+  const selected = useMemo(() => {
+    return sorted.find((b) => b.value === playSettings?.bitrate?.value);
+  }, [playSettings?.bitrate]);
+
+  // Set default bitrate on load
+  useEffect(() => {
+    setPlaySettings((prev) => ({
+      ...prev,
+      bitrate: BITRATES[0],
+    }));
+  }, []);
+
   return (
     <View
       className="flex shrink"
@@ -77,7 +84,7 @@ export const BitrateSelector: React.FC<Props> = ({
             <Text className="opacity-50 mb-1 text-xs">Quality</Text>
             <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
               <Text style={{}} className="" numberOfLines={1}>
-                {BITRATES.find((b) => b.value === selected.value)?.key}
+                {selected?.key}
               </Text>
             </TouchableOpacity>
           </View>
@@ -96,7 +103,10 @@ export const BitrateSelector: React.FC<Props> = ({
             <DropdownMenu.Item
               key={b.key}
               onSelect={() => {
-                onChange(b);
+                setPlaySettings((prev) => ({
+                  ...prev,
+                  bitrate: b,
+                }));
               }}
             >
               <DropdownMenu.ItemTitle>{b.key}</DropdownMenu.ItemTitle>