From b1b604d322690c5135108214074fd801b3ff2806 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Thu, 30 Nov 2023 20:05:49 +0100
Subject: [PATCH] hide pause when loading

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
---
 src/components/player/atoms/Pause.tsx | 3 ++-
 src/pages/parts/player/PlayerPart.tsx | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/player/atoms/Pause.tsx b/src/components/player/atoms/Pause.tsx
index 8594d090..6e33a142 100644
--- a/src/components/player/atoms/Pause.tsx
+++ b/src/components/player/atoms/Pause.tsx
@@ -2,7 +2,7 @@ import { Icons } from "@/components/Icon";
 import { VideoPlayerButton } from "@/components/player/internals/Button";
 import { usePlayerStore } from "@/stores/player/store";
 
-export function Pause(props: { iconSizeClass?: string }) {
+export function Pause(props: { iconSizeClass?: string; className?: string }) {
   const display = usePlayerStore((s) => s.display);
   const { isPaused } = usePlayerStore((s) => s.mediaPlaying);
 
@@ -13,6 +13,7 @@ export function Pause(props: { iconSizeClass?: string }) {
 
   return (
     <VideoPlayerButton
+      className={props.className}
       iconSizeClass={props.iconSizeClass}
       onClick={toggle}
       icon={isPaused ? Icons.PLAY : Icons.PAUSE}
diff --git a/src/pages/parts/player/PlayerPart.tsx b/src/pages/parts/player/PlayerPart.tsx
index 42d6dd00..2320eded 100644
--- a/src/pages/parts/player/PlayerPart.tsx
+++ b/src/pages/parts/player/PlayerPart.tsx
@@ -18,6 +18,7 @@ export function PlayerPart(props: PlayerPartProps) {
   const { showTargets, showTouchTargets } = useShouldShowControls();
   const status = usePlayerStore((s) => s.status);
   const { isMobile } = useIsMobile();
+  const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading);
 
   return (
     <Player.Container onLoad={props.onLoad} showingControls={showTargets}>
@@ -38,10 +39,13 @@ export function PlayerPart(props: PlayerPartProps) {
 
       <Player.CenterMobileControls
         className="text-white"
-        show={showTouchTargets}
+        show={showTouchTargets && status === playerStatus.PLAYING}
       >
         <Player.SkipBackward iconSizeClass="text-3xl" />
-        <Player.Pause iconSizeClass="text-5xl" />
+        <Player.Pause
+          iconSizeClass="text-5xl"
+          className={isLoading ? "opacity-0" : "opacity-100"}
+        />
         <Player.SkipForward iconSizeClass="text-3xl" />
       </Player.CenterMobileControls>