fix: stop playback on back button

app/(auth)/player/direct-player.tsx

@@ -31,7 +31,7 @@ import * as Haptics from "expo-haptics";
 import { useFocusEffect, useGlobalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Alert, View } from "react-native";
+import { Alert, BackHandler, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 
 export default function page() {
@@ -338,10 +338,22 @@ export default function page() {
       : 0;
   }, [item]);
 
+  const backAction = () => {
+    videoRef.current?.stop();
+    return false;
+  };
+
   useFocusEffect(
     React.useCallback(() => {
+      const onBackPress = () => {
+        return backAction();
+      };
+
+      BackHandler.addEventListener("hardwareBackPress", onBackPress);
+
       return async () => {
         videoRef.current?.stop();
+        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
       };
     }, [])
   );

app/(auth)/player/transcoding-player.tsx

@@ -30,7 +30,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { View } from "react-native";
+import { BackHandler, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import Video, {
   OnProgressData,
@@ -369,13 +369,23 @@ const Player = () => {
     }));
   };
 
+  const backAction = () => {
+    videoRef.current?.pause();
+    return false;
+  };
+
   useFocusEffect(
-    useCallback(() => {
+    React.useCallback(() => {
+      const onBackPress = () => {
+        return backAction();
+      };
+
+      BackHandler.addEventListener("hardwareBackPress", onBackPress);
       play();
 
-      return () => {
+      return async () => {
         videoRef.current?.pause();
-        stop();
+        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
       };
     }, [])
   );