feat(player): lock button

src/screens/anime/watch/components/lock-button.tsx

@@ -0,0 +1,22 @@
+import { useSetAtom } from 'jotai/react';
+import { LockIcon } from 'lucide-react-native';
+import React from 'react';
+
+import { isLockedAtom } from '../store';
+import Tappable from './tappable';
+
+const LockButton = () => {
+  const setIsLocked = useSetAtom(isLockedAtom);
+
+  return (
+    <Tappable
+      onPress={() => {
+        setIsLocked(true);
+      }}
+    >
+      <LockIcon size={24} color="white" />
+    </Tappable>
+  );
+};
+
+export default LockButton;

src/screens/anime/watch/components/media-overlay.tsx

@@ -10,7 +10,7 @@ import Animated, {
 
 import { View } from '@/ui';
 
-import { isOverlayVisibleAtom } from '../store';
+import { isLockedAtom, isOverlayVisibleAtom } from '../store';
 import BrightnessSlider from './brightness-slider';
 import BufferingIndicator from './buffering-indicator';
 import GestureHandler from './gesture-handler';
@@ -20,13 +20,15 @@ import MediaSeekingGesture from './media-seeking-gesture';
 import MediaSlider from './media-slider';
 import MediaTop from './media-top';
 import SkipTimestampButton from './skip-timestamp-button';
+import UnlockFloatButton from './unlock-float-button';
 import VolumeSlider from './volume-slider';
 
 const AnimatedView = styled(Animated.View);
 
 const MediaOverlay = () => {
   const isOverlayVisible = useAtomValue(isOverlayVisibleAtom);
   const animateValue = useSharedValue(0);
+  const isLocked = useAtomValue(isLockedAtom);
 
   useEffect(() => {
     animateValue.value = withTiming(isOverlayVisible ? 1 : 0, {
@@ -45,21 +47,28 @@ const MediaOverlay = () => {
     <React.Fragment>
       <GestureHandler>
         <View className="absolute z-20 h-full w-full">
-          <AnimatedView
-            style={[animatedStyles]}
-            className="absolute z-20 h-full w-full bg-black/60"
-            pointerEvents={isOverlayVisible ? 'auto' : 'none'}
-          >
-            <MediaTop />
-            <MediaControls />
-            <MediaSlider />
-          </AnimatedView>
+          {!isLocked ? (
+            <AnimatedView
+              style={[animatedStyles]}
+              className="absolute z-20 h-full w-full bg-black/60"
+              pointerEvents={isOverlayVisible ? 'auto' : 'none'}
+            >
+              <React.Fragment>
+                <MediaTop />
+                <MediaControls />
+                <MediaSlider />
+              </React.Fragment>
+            </AnimatedView>
+          ) : (
+            <UnlockFloatButton />
+          )}
         </View>
       </GestureHandler>
 
+      {!isLocked ? <MediaSeekingGesture /> : null}
+
       <MediaFastForwardIndicator />
       <SkipTimestampButton />
-      <MediaSeekingGesture />
       <VolumeSlider />
       <BrightnessSlider />
       <BufferingIndicator />

src/screens/anime/watch/components/media-top.tsx

@@ -15,6 +15,7 @@ import {
   videoSizeAtom,
 } from '../store';
 import EpisodesButton from './episodes-button';
+import LockButton from './lock-button';
 import MediaSettings from './media-settings';
 import MediaSlidingIndicator from './media-sliding-indicator';
 import MediaToggleSubtitle from './media-toggle-subtitle';
@@ -77,6 +78,10 @@ const MediaTop = () => {
                 <EpisodesButton />
               </View>
 
+              <View>
+                <LockButton />
+              </View>
+
               <View>
                 <ResizeButton />
               </View>

src/screens/anime/watch/components/skip-timestamp-button.tsx

@@ -27,8 +27,6 @@ const SkipTimestampButton = () => {
     <View className="absolute right-4 bottom-12 z-50">
       <Tappable
         onPress={() => {
-          ('skip press');
-
           player?.seek(timestamp.endTime);
         }}
       >

src/screens/anime/watch/components/unlock-float-button.tsx

@@ -0,0 +1,26 @@
+import { useAtomValue, useSetAtom } from 'jotai/react';
+import { LockIcon } from 'lucide-react-native';
+import React from 'react';
+
+import { Button, Text, View } from '@/ui';
+
+import { isLockedAtom, isOverlayVisibleAtom } from '../store';
+
+const UnlockFloatButton = () => {
+  const setIsLocked = useSetAtom(isLockedAtom);
+  const isOverlayVisible = useAtomValue(isOverlayVisibleAtom);
+
+  if (!isOverlayVisible) return null;
+
+  return (
+    <View className="absolute bottom-16 z-10 flex w-full items-center justify-center">
+      <Button className="bg-thunder-900" onPress={() => setIsLocked(false)}>
+        <LockIcon size={24} color="white" />
+
+        <Text className="ml-1">Unlock</Text>
+      </Button>
+    </View>
+  );
+};
+
+export default UnlockFloatButton;

src/screens/anime/watch/hooks/use-seeking-gesture.ts

@@ -1,23 +1,25 @@
 import { useAtomValue } from 'jotai/react';
 import { Gesture } from 'react-native-gesture-handler';
 
-import { seekingIndicatorAtom } from '../store';
+import { isLockedAtom, seekingIndicatorAtom } from '../store';
 import useScreenSize from './use-screen-size';
 
 const useSeekingGesture = () => {
   const seekingIndicator = useAtomValue(seekingIndicatorAtom);
   const screenSize = useScreenSize();
+  const isLocked = useAtomValue(isLockedAtom);
 
   const seekingDoubleTap = Gesture.Tap()
     .numberOfTaps(2)
     .onEnd((_event, success) => {
-      if (success) {
-        const { x } = _event;
-        if (x / screenSize.width < 0.4) {
-          seekingIndicator.showLeft();
-        } else if (x / screenSize.width > 0.6) {
-          seekingIndicator.showRight();
-        }
+      if (!success) return;
+      if (isLocked) return;
+
+      const { x } = _event;
+      if (x / screenSize.width < 0.4) {
+        seekingIndicator.showLeft();
+      } else if (x / screenSize.width > 0.6) {
+        seekingIndicator.showRight();
       }
     })
     .runOnJS(true);

src/screens/anime/watch/store.ts

@@ -145,3 +145,5 @@ export const playerResizeMode = atomWithMMKV<'stretch' | 'contain' | 'cover'>(
   'player__resize_mode',
   'contain'
 );
+
+export const isLockedAtom = atom(false);