fix: loader position

app/(auth)/player/direct-player.tsx

@@ -339,7 +339,8 @@ export default function page() {
 
   useFocusEffect(
     React.useCallback(() => {
-      return () => {
+      return async () => {
+        await reportPlaybackStopped();
         videoRef.current?.stop();
       };
     }, [])
@@ -442,6 +443,21 @@ export default function page() {
             writeToLog("ERROR", "Video Error", e.nativeEvent);
           }}
         />
+
+        <View
+          style={{
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            opacity: isBuffering ? 1 : 0,
+            width: "100%",
+            height: "100%",
+          }}
+          pointerEvents="none"
+        >
+          <Loader />
+        </View>
       </View>
       {videoRef.current && (
         <Controls

app/(auth)/player/transcoding-player.tsx

@@ -407,54 +407,70 @@ const Player = () => {
         }}
       >
         {videoSource ? (
-          <Video
-            ref={videoRef}
-            source={videoSource}
-            style={{
-              height: "100%",
-              width: "100%",
-            }}
-            resizeMode={ignoreSafeAreas ? "cover" : "contain"}
-            onProgress={onProgress}
-            onError={(e) => {
-              console.error("Error playing video", e);
-            }}
-            onLoad={() => {
-              if (firstTime.current === true) {
-                play();
-                firstTime.current = false;
-              }
-            }}
-            progressUpdateInterval={500}
-            playWhenInactive={true}
-            allowsExternalPlayback={true}
-            playInBackground={true}
-            pictureInPicture={true}
-            showNotificationControls={true}
-            ignoreSilentSwitch="ignore"
-            fullscreen={false}
-            onPlaybackStateChanged={(state) => {
-              if (isSeeking.value === false) setIsPlaying(state.isPlaying);
-            }}
-            onTextTracks={(data) => {
-              setEmbededTextTracks(data.textTracks as any);
-            }}
-            onBuffer={(e) => {
-              setIsBuffering(e.isBuffering);
-            }}
-            onAudioTracks={(e) => {
-              console.log("onAudioTracks: ", e.audioTracks);
-              setAudioTracks(
-                e.audioTracks.map((t) => ({
-                  index: t.index,
-                  name: t.title ?? "",
-                  language: t.language,
-                }))
-              );
-            }}
-            selectedTextTrack={selectedTextTrack}
-            selectedAudioTrack={selectedAudioTrack}
-          />
+          <>
+            <Video
+              ref={videoRef}
+              source={videoSource}
+              style={{
+                height: "100%",
+                width: "100%",
+              }}
+              resizeMode={ignoreSafeAreas ? "cover" : "contain"}
+              onProgress={onProgress}
+              onError={(e) => {
+                console.error("Error playing video", e);
+              }}
+              onLoad={() => {
+                if (firstTime.current === true) {
+                  play();
+                  firstTime.current = false;
+                }
+              }}
+              progressUpdateInterval={500}
+              playWhenInactive={true}
+              allowsExternalPlayback={true}
+              playInBackground={true}
+              pictureInPicture={true}
+              showNotificationControls={true}
+              ignoreSilentSwitch="ignore"
+              fullscreen={false}
+              onPlaybackStateChanged={(state) => {
+                if (isSeeking.value === false) setIsPlaying(state.isPlaying);
+              }}
+              onTextTracks={(data) => {
+                setEmbededTextTracks(data.textTracks as any);
+              }}
+              onBuffer={(e) => {
+                setIsBuffering(e.isBuffering);
+              }}
+              onAudioTracks={(e) => {
+                console.log("onAudioTracks: ", e.audioTracks);
+                setAudioTracks(
+                  e.audioTracks.map((t) => ({
+                    index: t.index,
+                    name: t.title ?? "",
+                    language: t.language,
+                  }))
+                );
+              }}
+              selectedTextTrack={selectedTextTrack}
+              selectedAudioTrack={selectedAudioTrack}
+            />
+            <View
+              style={{
+                position: "absolute",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                opacity: isBuffering ? 1 : 0,
+                width: "100%",
+                height: "100%",
+              }}
+              pointerEvents="none"
+            >
+              <Loader />
+            </View>
+          </>
         ) : (
           <Text>No video source...</Text>
         )}

components/video-player/controls/Controls.tsx

@@ -392,22 +392,6 @@ export const Controls: React.FC<Props> = ({
           }}
         ></Pressable>
 
-        <View
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-          }}
-          pointerEvents="none"
-          className={`flex flex-col items-center justify-center
-              ${isBuffering ? "opacity-100" : "opacity-0"}
-            `}
-        >
-          <Loader />
-        </View>
-
         <View
           style={[
             {