From 55df88c3e54a85074331ae192b0b25497eefebb8 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sun, 5 Apr 2026 20:31:01 +0500
Subject: [PATCH] fix(player): remove duplicate inline player and declutter
 bottom bar

When the mini-player is active on the current chapter, the collapsible
'Listen to this chapter' panel now shows a brief note instead of rendering
a full second AudioPlayer.

Bottom bar track info column: removed chapter title and book title lines
so the time display fits on one line without crowding the controls.
---
 ui/src/routes/+layout.svelte                  |  6 ----
 .../books/[slug]/chapters/[n]/+page.svelte    | 34 ++++++++++++-------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 77bd52c..991080a 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -857,12 +857,6 @@
 				aria-label={audioStore.chapters.length > 0 ? m.player_toggle_chapter_list() : undefined}
 				title={audioStore.chapters.length > 0 ? m.player_chapter_list_label() : undefined}
 			>
-				{#if audioStore.chapterTitle}
-					<p class="text-xs text-(--color-text) truncate leading-tight">{audioStore.chapterTitle}</p>
-				{/if}
-				{#if audioStore.bookTitle}
-					<p class="text-xs text-(--color-muted) truncate leading-tight">{audioStore.bookTitle}</p>
-				{/if}
 				{#if audioStore.status === 'generating'}
 					<p class="text-xs text-(--color-brand) leading-tight">
 						{m.player_generating({ percent: String(Math.round(audioStore.progress)) })}
diff --git a/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte b/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
index 0a2ef3e..a92168f 100644
--- a/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
+++ b/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
@@ -471,18 +471,28 @@
 			</button>
 			{#if audioExpanded}
 				<div class="border border-t-0 border-(--color-border) rounded-b-lg overflow-hidden">
-					<AudioPlayer
-						slug={data.book.slug}
-						chapter={data.chapter.number}
-						chapterTitle={data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })}
-						bookTitle={data.book.title}
-						cover={data.book.cover}
-						nextChapter={data.next}
-						chapters={data.chapters}
-						voices={data.voices}
-						playerStyle={layout.playerStyle}
-						onProRequired={() => { audioProRequired = true; }}
-					/>
+					{#if audioStore.slug === data.book.slug && audioStore.chapter === data.chapter.number && audioStore.active}
+						<!-- Mini-player is already playing this chapter — don't duplicate controls -->
+						<div class="px-4 py-3 flex items-center gap-2 text-sm text-(--color-muted)">
+							<svg class="w-4 h-4 text-(--color-brand) shrink-0" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M12 3v10.55A4 4 0 1014 17V7h4V3h-6z"/>
+							</svg>
+							<span>Controls are in the player bar below.</span>
+						</div>
+					{:else}
+						<AudioPlayer
+							slug={data.book.slug}
+							chapter={data.chapter.number}
+							chapterTitle={data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })}
+							bookTitle={data.book.title}
+							cover={data.book.cover}
+							nextChapter={data.next}
+							chapters={data.chapters}
+							voices={data.voices}
+							playerStyle={layout.playerStyle}
+							onProRequired={() => { audioProRequired = true; }}
+						/>
+					{/if}
 				</div>
 			{/if}
 		</div>