From 647a4c3782f399bf7efecd0bc8ffca8ad8c35ca1 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 23 Jan 2024 22:41:06 +0100
Subject: [PATCH] Fix touch controls position with no next or no prev episode

---
 .../ui/src/player/components/left-buttons.tsx | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/front/packages/ui/src/player/components/left-buttons.tsx b/front/packages/ui/src/player/components/left-buttons.tsx
index 0b2ff464..dd8f6040 100644
--- a/front/packages/ui/src/player/components/left-buttons.tsx
+++ b/front/packages/ui/src/player/components/left-buttons.tsx
@@ -124,25 +124,28 @@ export const TouchControls = ({
 				props,
 			)}
 		>
-			{previousSlug && (
-				<IconButton
-					icon={SkipPrevious}
-					as={Link}
-					href={previousSlug}
-					replace
-					size={ts(4)}
-					{...common}
-				/>
-			)}
+			<IconButton
+				icon={SkipPrevious}
+				as={Link}
+				href={previousSlug}
+				replace
+				size={ts(4)}
+				{...css([!previousSlug && { opacity: 0, pointerEvents: "none" }], common)}
+			/>
 			<IconButton
 				icon={isPlaying ? Pause : PlayArrow}
 				onPress={() => setPlay(!isPlaying)}
 				size={ts(8)}
 				{...common}
 			/>
-			{nextSlug && (
-				<IconButton icon={SkipNext} as={Link} href={nextSlug} replace size={ts(4)} {...common} />
-			)}
+			<IconButton
+				icon={SkipNext}
+				as={Link}
+				href={nextSlug}
+				replace
+				size={ts(4)}
+				{...css([!nextSlug && { opacity: 0, pointerEvents: "none" }], common)}
+			/>
 		</HoverTouch>
 	);
 };