Highlight the currently playing entry in the list

front/src/ui/details/season.tsx

@@ -156,6 +156,7 @@ SeasonHeader.query = (slug: string): QueryIdentifier<Season> => ({
 export const EntryList = ({
 	slug,
 	season,
+	currentEntrySlug,
 	onSelectVideos,
 	search,
 	withContainer,
@@ -164,6 +165,7 @@ export const EntryList = ({
 }: {
 	slug: string;
 	season: string | number;
+	currentEntrySlug?: string;
 	onSelectVideos?: (entry: {
 		displayNumber: string;
 		name: string | null;
@@ -211,6 +213,11 @@ export const EntryList = ({
 						<EntryLine
 							{...item}
 							videos={item.videos}
+							className={
+								item.slug === currentEntrySlug
+									? "rounded-md bg-accent/10"
+									: undefined
+							}
 							// Don't display "Go to serie"
 							serieSlug={null}
 							displayNumber={entryDisplayNumber(item)}

front/src/ui/player/entries-menu.tsx

@@ -7,19 +7,21 @@ export const EntriesMenu = ({
 	onClose,
 	showSlug,
 	season,
+	currentEntrySlug,
 }: {
 	isOpen: boolean;
 	onClose: () => void;
 	showSlug: string;
 	season: string | number;
+	currentEntrySlug?: string;
 }) => {
 	return (
-		<SideMenu
-			isOpen={isOpen}
-			onClose={onClose}
-			containerClassName="bg-card"
-		>
-			<EntryList slug={showSlug} season={season} />
+		<SideMenu isOpen={isOpen} onClose={onClose} containerClassName="bg-card">
+			<EntryList
+				slug={showSlug}
+				season={season}
+				currentEntrySlug={currentEntrySlug}
+			/>
 		</SideMenu>
 	);
 };

front/src/ui/player/index.tsx

@@ -239,6 +239,7 @@ export const Player = () => {
 					onClose={() => setEntriesMenuOpen(false)}
 					showSlug={data.show.slug}
 					season={entry?.kind === "episode" ? entry.seasonNumber : 0}
+					currentEntrySlug={entry?.slug}
 				/>
 			)}
 			{playbackError && (