From 45b924911cdc5fdd1ff7e22e2c583d47ab3cc016 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Tue, 20 Feb 2024 16:10:01 +0100
Subject: [PATCH] feat: show controls while loading

---
 apps/expo/src/components/player/ControlsOverlay.tsx |  4 ++--
 apps/expo/src/components/player/VideoPlayer.tsx     | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/expo/src/components/player/ControlsOverlay.tsx b/apps/expo/src/components/player/ControlsOverlay.tsx
index 09e1cd1..a43ee33 100644
--- a/apps/expo/src/components/player/ControlsOverlay.tsx
+++ b/apps/expo/src/components/player/ControlsOverlay.tsx
@@ -4,11 +4,11 @@ import { BottomControls } from "./BottomControls";
 import { Header } from "./Header";
 import { MiddleControls } from "./MiddleControls";
 
-export const ControlsOverlay = () => {
+export const ControlsOverlay = ({ isLoading }: { isLoading: boolean }) => {
   return (
     <View className="flex w-full flex-1 flex-col justify-between">
       <Header />
-      <MiddleControls />
+      {!isLoading && <MiddleControls />}
       <BottomControls />
     </View>
   );
diff --git a/apps/expo/src/components/player/VideoPlayer.tsx b/apps/expo/src/components/player/VideoPlayer.tsx
index 8ed48e7..189064f 100644
--- a/apps/expo/src/components/player/VideoPlayer.tsx
+++ b/apps/expo/src/components/player/VideoPlayer.tsx
@@ -193,8 +193,16 @@ export const VideoPlayer = () => {
           ]}
           onTouchStart={() => setIsIdle(!isIdle)}
         />
-        {isLoading && <ActivityIndicator size="large" color="#0000ff" />}
-        {!isLoading && <ControlsOverlay />}
+        <View className="flex-1 items-center justify-center">
+          {isLoading && (
+            <ActivityIndicator
+              size="large"
+              color="#0000ff"
+              className="absolute"
+            />
+          )}
+          <ControlsOverlay isLoading={isLoading} />
+        </View>
         {showVolumeOverlay && (
           <View className="absolute bottom-12 self-center rounded-xl bg-black p-3 opacity-50">
             <Text className="font-bold">Volume: {debouncedVolume}</Text>