feat: playback speed changing

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

@@ -0,0 +1,71 @@
+import { Pressable, ScrollView, View } from "react-native";
+import Modal from "react-native-modal";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+import colors from "@movie-web/tailwind-config/colors";
+
+import { usePlaybackSpeed } from "~/hooks/player/usePlaybackSpeed";
+import { useBoolean } from "~/hooks/useBoolean";
+import { Button } from "../ui/Button";
+import { Text } from "../ui/Text";
+import { Controls } from "./Controls";
+
+export const PlaybackSpeedSelector = () => {
+  const { currentSpeed, changePlaybackSpeed } = usePlaybackSpeed();
+  const { isTrue, on, off } = useBoolean();
+
+  const speeds = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+
+  return (
+    <View className="max-w-36 flex-1">
+      <Controls>
+        <Button
+          title="Speed"
+          variant="outline"
+          onPress={on}
+          iconLeft={
+            <MaterialCommunityIcons
+              name="speedometer"
+              size={24}
+              color={colors.primary[300]}
+            />
+          }
+        />
+      </Controls>
+
+      <Modal
+        isVisible={isTrue}
+        onBackdropPress={off}
+        supportedOrientations={["portrait", "landscape"]}
+        style={{
+          width: "35%",
+          justifyContent: "center",
+          alignSelf: "center",
+        }}
+      >
+        <ScrollView className="flex-1 bg-gray-900">
+          <Text className="text-center font-bold">Select speed</Text>
+          {speeds.map((speed) => (
+            <Pressable
+              className="flex w-full flex-row justify-between p-3"
+              key={speed}
+              onPress={() => {
+                changePlaybackSpeed(speed);
+                off();
+              }}
+            >
+              <Text>{speed}</Text>
+              {speed === currentSpeed.value && (
+                <MaterialCommunityIcons
+                  name="check-circle"
+                  size={24}
+                  color={colors.primary[300]}
+                />
+              )}
+            </Pressable>
+          ))}
+        </ScrollView>
+      </Modal>
+    </View>
+  );
+};