feat(media-player): add resize button

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

@@ -40,6 +40,7 @@ import {
   playableDurationAtom,
   playBackRateAtom,
   playerAtom,
+  playerResizeMode,
   qualityListAtom,
   sourceListAtom,
   videoSizeAtom,
@@ -65,7 +66,7 @@ type VideoSource = {
 };
 
 const EMPTY_VIDEO: VideoSource = {
-  uri: undefined,
+  uri: 'https://cdn.plyr.io/static/blank.mp4',
 };
 
 const MediaPlayer: React.FC<MediaPlayerProps> = ({
@@ -76,6 +77,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   const playerRef = useRef<RNVideo>(null);
   const setPlayer = useSetAtom(playerAtom);
 
+  const resizeMode = useAtomValue(playerResizeMode);
   const setPlayableDuration = useSetAtom(playableDurationAtom);
   const [currentTime, setCurrentTime] = useAtom(currentTimeAtom);
   const [duration, setDuration] = useAtom(durationAtom);
@@ -438,7 +440,8 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
           ? { type: 'resolution', value: currentVideoTrack.height }
           : undefined
       }
-      className="fixed inset-0 z-0 h-full w-full bg-black object-contain"
+      className="fixed inset-0 z-0 h-full w-full bg-black"
+      resizeMode={resizeMode}
       onError={(error) => {
         Toast.show({
           type: 'error',

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

@@ -177,11 +177,9 @@ const MediaSlider = () => {
         <Text> / </Text>
 
         <Text className="text-gray-300">{formatTime(duration)}</Text>
-
         {timestamp ? (
           <React.Fragment>
             <Text> • </Text>
-
             <Text>{timestamp.type}</Text>
           </React.Fragment>
         ) : null}

src/screens/anime/watch/components/media-toggle-subtitle.tsx

@@ -9,7 +9,9 @@ import SubtitleDisabledIcon from '@/ui/icons/subtitle-disabled';
 import { currentSubtitleAtom, subtitleListAtom } from '../store';
 import Tappable from './tappable';
 
-const MediaToggleSubtitle = () => {
+interface MediaToggleSubtitleProps extends React.ComponentProps<typeof View> {}
+
+const MediaToggleSubtitle: React.FC<MediaToggleSubtitleProps> = (props) => {
   const [currentSubtitle, setCurrentSubtitle] = useAtom(currentSubtitleAtom);
   const lastSubtitleRef = useRef<Subtitle | null>(null);
   const subtitleList = useAtomValue(subtitleListAtom);
@@ -35,7 +37,7 @@ const MediaToggleSubtitle = () => {
   if (!subtitleList.length) return null;
 
   return (
-    <View>
+    <View {...props}>
       <Tappable onPress={handleToggle}>
         <View className="ml-auto bg-transparent p-0">
           {currentSubtitle ? (

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

@@ -18,6 +18,7 @@ import EpisodesButton from './episodes-button';
 import MediaSettings from './media-settings';
 import MediaSlidingIndicator from './media-sliding-indicator';
 import MediaToggleSubtitle from './media-toggle-subtitle';
+import ResizeButton from './resize-button';
 import ServerSelector from './server-selector';
 
 const MediaTop = () => {
@@ -77,9 +78,11 @@ const MediaTop = () => {
               </View>
 
               <View>
-                <MediaToggleSubtitle />
+                <ResizeButton />
               </View>
 
+              <MediaToggleSubtitle />
+
               <View>
                 <MediaSettings />
               </View>

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

@@ -0,0 +1,35 @@
+import { useAtom } from 'jotai/react';
+import { ScalingIcon } from 'lucide-react-native';
+import React from 'react';
+import { ToastAndroid } from 'react-native';
+
+import { playerResizeMode } from '../store';
+import Tappable from './tappable';
+
+const ResizeButton = () => {
+  const [resizeMode, setResizeMode] = useAtom(playerResizeMode);
+
+  return (
+    <Tappable
+      onPress={() => {
+        if (resizeMode === 'contain') {
+          setResizeMode('cover');
+
+          ToastAndroid.show('Resize mode: cover', ToastAndroid.SHORT);
+        } else if (resizeMode === 'cover') {
+          setResizeMode('stretch');
+
+          ToastAndroid.show('Resize mode: stretch', ToastAndroid.SHORT);
+        } else {
+          setResizeMode('contain');
+
+          ToastAndroid.show('Resize mode: contain', ToastAndroid.SHORT);
+        }
+      }}
+    >
+      <ScalingIcon size={24} color="white" />
+    </Tappable>
+  );
+};
+
+export default ResizeButton;

src/screens/anime/watch/store.ts

@@ -138,3 +138,8 @@ export const shouldNotSyncListAtom = atomWithMMKV<number[]>(
   'not_sync_list',
   []
 );
+
+export const playerResizeMode = atomWithMMKV<'stretch' | 'contain' | 'cover'>(
+  'player__resize_mode',
+  'contain'
+);