From b63e0153c1c70502a0bed948480f73e2a5748040 Mon Sep 17 00:00:00 2001
From: hoangvu12 <hggaming91@gmail.com>
Date: Thu, 23 Nov 2023 03:47:12 +0700
Subject: [PATCH] feat: pause when open settings

---
 src/screens/anime/watch/components/media-settings.tsx |  5 +++++
 .../anime/watch/components/settings-bottom-sheet.tsx  | 11 +++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/screens/anime/watch/components/media-settings.tsx b/src/screens/anime/watch/components/media-settings.tsx
index 3d0fb0e..68f591c 100644
--- a/src/screens/anime/watch/components/media-settings.tsx
+++ b/src/screens/anime/watch/components/media-settings.tsx
@@ -1,10 +1,12 @@
 import type { BottomSheetModal } from '@gorhom/bottom-sheet';
+import { useSetAtom } from 'jotai/react';
 import { SettingsIcon } from 'lucide-react-native';
 import React, { useRef } from 'react';
 
 import { View } from '@/ui';
 import colors from '@/ui/theme/colors';
 
+import { pausedAtom } from '../store';
 import MediaPlayBackSettings from './media-playback-settings';
 import MediaQualitySettings from './media-quality-settings';
 import MediaSubtitleSettings from './media-subtitle-settings';
@@ -13,12 +15,15 @@ import Tappable from './tappable';
 
 const MediaSettings = () => {
   const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const setPaused = useSetAtom(pausedAtom);
 
   return (
     <View>
       <Tappable
         onPress={() => {
           bottomSheetRef.current?.present();
+
+          setPaused(true);
         }}
       >
         <View className="ml-auto bg-transparent p-0">
diff --git a/src/screens/anime/watch/components/settings-bottom-sheet.tsx b/src/screens/anime/watch/components/settings-bottom-sheet.tsx
index 4e76ebd..85e33dd 100644
--- a/src/screens/anime/watch/components/settings-bottom-sheet.tsx
+++ b/src/screens/anime/watch/components/settings-bottom-sheet.tsx
@@ -4,6 +4,7 @@ import {
   type BottomSheetModal,
   useBottomSheetModal,
 } from '@gorhom/bottom-sheet';
+import { useSetAtom } from 'jotai/react';
 import { ChevronLeft } from 'lucide-react-native';
 import React, { useCallback } from 'react';
 
@@ -12,6 +13,7 @@ import type { BottomSheetProps } from '@/ui/core/bottom-sheet';
 import BottomSheet from '@/ui/core/bottom-sheet';
 
 import useScreenSize from '../hooks/use-screen-size';
+import { pausedAtom } from '../store';
 
 type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
@@ -34,6 +36,8 @@ const SettingsBottomSheet = React.forwardRef<
     },
     ref
   ) => {
+    const setPaused = useSetAtom(pausedAtom);
+
     const screenSize = useScreenSize();
     const { dismiss, dismissAll } = useBottomSheetModal();
 
@@ -45,10 +49,13 @@ const SettingsBottomSheet = React.forwardRef<
           pressBehavior="collapse"
           opacity={0.6}
           disappearsOnIndex={-1}
-          onPress={dismissAll}
+          onPress={() => {
+            dismissAll();
+            setPaused(false);
+          }}
         />
       ),
-      [dismissAll]
+      [dismissAll, setPaused]
     );
 
     return (