refactor: make video player function component

apps/expo/src/app/video-player.tsx

@@ -1,18 +1,11 @@
 import type { VideoRef } from "react-native-video";
-import React, { Component } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ActivityIndicator, StyleSheet } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Video from "react-native-video";
 import { useLocalSearchParams } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 
-interface VideoPlayerState {
-  videoUrl: string;
-  fullscreen: boolean;
-  isLoading: boolean;
-  paused: boolean;
-}
-
 interface VideoPlayerProps {
   videoUrl: string;
 }
@@ -22,87 +15,75 @@ export default function VideoPlayerWrapper() {
   const videoUrl = typeof params.videoUrl === "string" ? params.videoUrl : "";
   return <VideoPlayer videoUrl={videoUrl} />;
 }
+interface VideoPlayerProps {
+	videoUrl: string;
+}
 
-class VideoPlayer extends Component<VideoPlayerProps, VideoPlayerState> {
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => {
-  private videoPlayer: React.RefObject<VideoRef>;
+	const [isLoading, setIsLoading] = useState(true);
+	const videoPlayer = useRef<VideoRef>(null);
 
-  constructor(props: VideoPlayerProps) {
+	useEffect(() => {
-    super(props);
-    this.state = {
-      videoUrl: props.videoUrl || "",
-      fullscreen: true,
-      isLoading: true,
-      paused: false,
-    };
-    this.videoPlayer = React.createRef();
-  }
-
-  componentDidMount() {
 		const lockOrientation = async () => {
 			await ScreenOrientation.lockAsync(
-        ScreenOrientation.OrientationLock.LANDSCAPE,
+				ScreenOrientation.OrientationLock.LANDSCAPE
 			);
 		};
 
-    const { videoUrl } = this.props;
-
-    this.setState({ videoUrl }, () => {
-      if (this.videoPlayer.current) {
-        this.videoPlayer.current.presentFullscreenPlayer();
-        void lockOrientation();
-      }
-    });
-  }
-
-  componentWillUnmount() {
 		const unlockOrientation = async () => {
 			await ScreenOrientation.lockAsync(
-        ScreenOrientation.OrientationLock.PORTRAIT_UP,
+				ScreenOrientation.OrientationLock.PORTRAIT_UP
 			);
 		};
 
-    if (this.videoPlayer.current) {
+		const presentFullscreenPlayer = async () => {
-      this.videoPlayer.current.dismissFullscreenPlayer();
+			if (videoPlayer.current) {
+				videoPlayer.current.presentFullscreenPlayer();
+				await lockOrientation();
 			}
-    void unlockOrientation();
-  }
-
-  onVideoLoadStart = () => {
-    this.setState({ isLoading: true });
 		};
 
-  onReadyForDisplay = () => {
+		const dismissFullscreenPlayer = async () => {
-    this.setState({ isLoading: false });
+			if (videoPlayer.current) {
+				videoPlayer.current.dismissFullscreenPlayer();
+				await unlockOrientation();
+			}
 		};
 
-  //   onVideoError = () => {  // probably useful later
+		setIsLoading(true);
-  //     console.log("Video playback error");
+		void presentFullscreenPlayer();
-  //   };
+
+		return () => {
+			void dismissFullscreenPlayer();
+		};
+	}, [videoUrl]);
+
+	const onVideoLoadStart = () => {
+		setIsLoading(true);
+	};
+
+	const onReadyForDisplay = () => {
+		setIsLoading(false);
+	};
 
-  render() {
 	return (
 		<SafeAreaView style={styles.container}>
 			<Video
-          ref={this.videoPlayer}
+				ref={videoPlayer}
-          source={{ uri: this.state.videoUrl }}
+				source={{ uri: videoUrl }}
 				style={styles.fullScreen}
-          fullscreen={this.state.fullscreen}
+				fullscreen={true}
-          paused={this.state.paused}
+				paused={false}
 				controls={true}
-          onLoadStart={this.onVideoLoadStart}
+				onLoadStart={onVideoLoadStart}
-          onReadyForDisplay={this.onReadyForDisplay}
+				onReadyForDisplay={onReadyForDisplay}
-          // onError={this.onVideoError}
 			/>
-        {this.state.isLoading && (
+			{isLoading && <ActivityIndicator size="large" color="#0000ff" />}
-          <ActivityIndicator size="large" color="#0000ff" />
-        )}
 		</SafeAreaView>
 	);
-  }
+};
-}
 
 const styles = StyleSheet.create({
-  // taken from example, probably needs to be nativewind stuff instead
   container: {
     flex: 1,
     justifyContent: "center",