hide pause when loading

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>

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}

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>