diff --git a/src/screens/anime/watch/components/media-player.tsx b/src/screens/anime/watch/components/media-player.tsx index c9bb9b7..1669d1c 100644 --- a/src/screens/anime/watch/components/media-player.tsx +++ b/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 = ({ @@ -76,6 +77,7 @@ const MediaPlayer: React.FC = ({ const playerRef = useRef(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 = ({ ? { 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', diff --git a/src/screens/anime/watch/components/media-slider.tsx b/src/screens/anime/watch/components/media-slider.tsx index 9bbbb0e..95590a4 100644 --- a/src/screens/anime/watch/components/media-slider.tsx +++ b/src/screens/anime/watch/components/media-slider.tsx @@ -177,11 +177,9 @@ const MediaSlider = () => { / {formatTime(duration)} - {timestamp ? ( - {timestamp.type} ) : null} diff --git a/src/screens/anime/watch/components/media-toggle-subtitle.tsx b/src/screens/anime/watch/components/media-toggle-subtitle.tsx index 4b05f4f..ad7ad68 100644 --- a/src/screens/anime/watch/components/media-toggle-subtitle.tsx +++ b/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 {} + +const MediaToggleSubtitle: React.FC = (props) => { const [currentSubtitle, setCurrentSubtitle] = useAtom(currentSubtitleAtom); const lastSubtitleRef = useRef(null); const subtitleList = useAtomValue(subtitleListAtom); @@ -35,7 +37,7 @@ const MediaToggleSubtitle = () => { if (!subtitleList.length) return null; return ( - + {currentSubtitle ? ( diff --git a/src/screens/anime/watch/components/media-top.tsx b/src/screens/anime/watch/components/media-top.tsx index 4417c2f..fb1974d 100644 --- a/src/screens/anime/watch/components/media-top.tsx +++ b/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 = () => { - + + + diff --git a/src/screens/anime/watch/components/resize-button.tsx b/src/screens/anime/watch/components/resize-button.tsx new file mode 100644 index 0000000..06816ac --- /dev/null +++ b/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 ( + { + 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); + } + }} + > + + + ); +}; + +export default ResizeButton; diff --git a/src/screens/anime/watch/store.ts b/src/screens/anime/watch/store.ts index 5680038..786d50b 100644 --- a/src/screens/anime/watch/store.ts +++ b/src/screens/anime/watch/store.ts @@ -138,3 +138,8 @@ export const shouldNotSyncListAtom = atomWithMMKV( 'not_sync_list', [] ); + +export const playerResizeMode = atomWithMMKV<'stretch' | 'contain' | 'cover'>( + 'player__resize_mode', + 'contain' +);