feat: playback speed changing

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

@@ -6,6 +6,7 @@ import { Text } from "../ui/Text";
 import { AudioTrackSelector } from "./AudioTrackSelector";
 import { CaptionsSelector } from "./CaptionsSelector";
 import { Controls } from "./Controls";
+import { PlaybackSpeedSelector } from "./PlaybackSpeedSelector";
 import { ProgressBar } from "./ProgressBar";
 import { SeasonSelector } from "./SeasonEpisodeSelector";
 import { SourceSelector } from "./SourceSelector";
@@ -62,6 +63,7 @@ export const BottomControls = () => {
           <CaptionsSelector />
           <SourceSelector />
           <AudioTrackSelector />
+          <PlaybackSpeedSelector />
         </View>
       </View>
     );

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

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

@@ -18,6 +18,7 @@ import * as StatusBar from "expo-status-bar";
 import { findHighestQuality } from "@movie-web/provider-utils";
 
 import { useBrightness } from "~/hooks/player/useBrightness";
+import { usePlaybackSpeed } from "~/hooks/player/usePlaybackSpeed";
 import { usePlayer } from "~/hooks/player/usePlayer";
 import { useVolume } from "~/hooks/player/useVolume";
 import { useAudioTrackStore } from "~/stores/audio";
@@ -41,6 +42,7 @@ export const VideoPlayer = () => {
     setShowVolumeOverlay,
     handleVolumeChange,
   } = useVolume();
+  const { currentSpeed } = usePlaybackSpeed();
   const { dismissFullscreenPlayer } = usePlayer();
   const [videoSrc, setVideoSrc] = useState<AVPlaybackSource>();
   const [isLoading, setIsLoading] = useState(true);
@@ -257,6 +259,7 @@ export const VideoPlayer = () => {
           shouldPlay={shouldPlay}
           resizeMode={resizeMode}
           volume={currentVolume.value}
+          rate={currentSpeed.value}
           onLoadStart={onVideoLoadStart}
           onReadyForDisplay={onReadyForDisplay}
           onPlaybackStatusUpdate={setStatus}

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

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { useSharedValue } from "react-native-reanimated";
+
+export const usePlaybackSpeed = () => {
+  const speed = useSharedValue(1);
+
+  const changePlaybackSpeed = useCallback(
+    (newValue: number) => {
+      speed.value = newValue;
+    },
+    [speed],
+  );
+
+  return {
+    currentSpeed: speed,
+    changePlaybackSpeed,
+  } as const;
+};