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} />;
 }
-
-class VideoPlayer extends Component<VideoPlayerProps, VideoPlayerState> {
-  private videoPlayer: React.RefObject<VideoRef>;
-
-  constructor(props: VideoPlayerProps) {
-    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,
-      );
-    };
-
-    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,
-      );
-    };
-
-    if (this.videoPlayer.current) {
-      this.videoPlayer.current.dismissFullscreenPlayer();
-    }
-    void unlockOrientation();
-  }
-
-  onVideoLoadStart = () => {
-    this.setState({ isLoading: true });
-  };
-
-  onReadyForDisplay = () => {
-    this.setState({ isLoading: false });
-  };
-
-  //   onVideoError = () => {  // probably useful later
-  //     console.log("Video playback error");
-  //   };
-
-  render() {
-    return (
-      <SafeAreaView style={styles.container}>
-        <Video
-          ref={this.videoPlayer}
-          source={{ uri: this.state.videoUrl }}
-          style={styles.fullScreen}
-          fullscreen={this.state.fullscreen}
-          paused={this.state.paused}
-          controls={true}
-          onLoadStart={this.onVideoLoadStart}
-          onReadyForDisplay={this.onReadyForDisplay}
-          // onError={this.onVideoError}
-        />
-        {this.state.isLoading && (
-          <ActivityIndicator size="large" color="#0000ff" />
-        )}
-      </SafeAreaView>
-    );
-  }
+interface VideoPlayerProps {
+	videoUrl: string;
 }
 
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => {
+	const [isLoading, setIsLoading] = useState(true);
+	const videoPlayer = useRef<VideoRef>(null);
+
+	useEffect(() => {
+		const lockOrientation = async () => {
+			await ScreenOrientation.lockAsync(
+				ScreenOrientation.OrientationLock.LANDSCAPE
+			);
+		};
+
+		const unlockOrientation = async () => {
+			await ScreenOrientation.lockAsync(
+				ScreenOrientation.OrientationLock.PORTRAIT_UP
+			);
+		};
+
+		const presentFullscreenPlayer = async () => {
+			if (videoPlayer.current) {
+				videoPlayer.current.presentFullscreenPlayer();
+				await lockOrientation();
+			}
+		};
+
+		const dismissFullscreenPlayer = async () => {
+			if (videoPlayer.current) {
+				videoPlayer.current.dismissFullscreenPlayer();
+				await unlockOrientation();
+			}
+		};
+
+		setIsLoading(true);
+		void presentFullscreenPlayer();
+
+		return () => {
+			void dismissFullscreenPlayer();
+		};
+	}, [videoUrl]);
+
+	const onVideoLoadStart = () => {
+		setIsLoading(true);
+	};
+
+	const onReadyForDisplay = () => {
+		setIsLoading(false);
+	};
+
+	return (
+		<SafeAreaView style={styles.container}>
+			<Video
+				ref={videoPlayer}
+				source={{ uri: videoUrl }}
+				style={styles.fullScreen}
+				fullscreen={true}
+				paused={false}
+				controls={true}
+				onLoadStart={onVideoLoadStart}
+				onReadyForDisplay={onReadyForDisplay}
+			/>
+			{isLoading && <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",