Skip to content

Commit fefc49a

Browse files
debbadebba
committed
fix: always show action buttons in BookInfo component
 - Refactor BookInfo layout to display chapter, bookmark, and download buttons regardless of current chapter state - Adjust button alignment dynamically based on chapter presence - Bump version to 1.2.3
1 parent e630de0 commit fefc49a

5 files changed

Lines changed: 174 additions & 67 deletions

File tree

‎client/package-lock.json‎

Lines changed: 10 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/src/components/BookInfo.tsx‎

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -55,75 +55,75 @@ const BookInfo: React.FC<BookInfoProps> = ({
5555
</div>
5656
</div>
5757

58-
{currentChapter && (
59-
<div className="px-4 py-0 flex justify-between items-start w-full mt-0">
58+
<div className="px-4 py-0 flex justify-between items-start w-full mt-0">
59+
{currentChapter && (
6060
<div className="text-left flex-1">
6161
<p className="text-base text-white">{currentChapter.title}</p>
6262
<p className="text-sm text-gray-400">
6363
{formatTimeNatural((currentChapter.end - currentTime) / playbackRate)}
6464
</p>
6565
</div>
66-
<div className="flex items-center space-x-3 ml-4">
67-
{chapters && chapters.length > 0 && (
68-
<button
69-
onClick={onShowChaptersModal}
70-
className="px-2 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 transition-colors"
71-
>
72-
<svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
73-
<g>
74-
<path fill="currentColor"></path>
75-
<g>
76-
<path fill="currentColor"
77-
d="M16.002 22.002h25.997v4H16.002zM16.002 11.995h25.997v4H16.002zM16.002 32.008h25.997v4H16.002zM6 12h4v4H6zM6 22.006h4v4H6zM6 32.013h4v4H6z"></path>
78-
</g>
79-
</g>
80-
</svg>
81-
</button>
82-
)}
66+
)}
67+
<div className={`flex items-center space-x-3 ${currentChapter ? 'ml-4' : 'ml-auto'}`}>
68+
{chapters && chapters.length > 0 && (
8369
<button
84-
id="bookmark-btn"
85-
onClick={onShowBookmarksModal}
70+
onClick={onShowChaptersModal}
8671
className="px-2 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 transition-colors"
8772
>
88-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
89-
className="w-6 h-6">
90-
<path
91-
id="SVGRepo_iconCarrier"
92-
stroke="#464455"
93-
strokeLinecap="round"
94-
strokeLinejoin="round"
95-
fill="currentColor"
96-
d="M15.75 5h-7.5C7.56 5 7 5.588 7 6.313V19l5-3.5 5 3.5V6.313C17 5.588 16.44 5 15.75 5"
97-
></path>
73+
<svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
74+
<g>
75+
<path fill="currentColor"></path>
76+
<g>
77+
<path fill="currentColor"
78+
d="M16.002 22.002h25.997v4H16.002zM16.002 11.995h25.997v4H16.002zM16.002 32.008h25.997v4H16.002zM6 12h4v4H6zM6 22.006h4v4H6zM6 32.013h4v4H6z"></path>
79+
</g>
80+
</g>
9881
</svg>
9982
</button>
100-
<button
101-
id="download-btn"
102-
onClick={isDownloading ? onCancelDownload : onDownload}
103-
className={`px-2 py-2 rounded-md transition-colors ${
104-
isDownloaded
105-
? 'bg-green-600 hover:bg-green-700'
106-
: isDownloading
107-
? 'bg-red-600 hover:bg-red-700'
108-
: 'bg-gray-800 hover:bg-gray-700'
109-
} text-white`}
110-
>
111-
{isDownloading ? (
112-
<svg className="w-6 h-6 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
113-
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
114-
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
115-
</svg>
116-
) : (
117-
<svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
118-
viewBox="0 0 24 24" stroke="currentColor">
119-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
120-
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
121-
</svg>
122-
)}
123-
</button>
124-
</div>
83+
)}
84+
<button
85+
id="bookmark-btn"
86+
onClick={onShowBookmarksModal}
87+
className="px-2 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 transition-colors"
88+
>
89+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
90+
className="w-6 h-6">
91+
<path
92+
id="SVGRepo_iconCarrier"
93+
stroke="#464455"
94+
strokeLinecap="round"
95+
strokeLinejoin="round"
96+
fill="currentColor"
97+
d="M15.75 5h-7.5C7.56 5 7 5.588 7 6.313V19l5-3.5 5 3.5V6.313C17 5.588 16.44 5 15.75 5"
98+
></path>
99+
</svg>
100+
</button>
101+
<button
102+
id="download-btn"
103+
onClick={isDownloading ? onCancelDownload : onDownload}
104+
className={`px-2 py-2 rounded-md transition-colors ${
105+
isDownloaded
106+
? 'bg-green-600 hover:bg-green-700'
107+
: isDownloading
108+
? 'bg-red-600 hover:bg-red-700'
109+
: 'bg-gray-800 hover:bg-gray-700'
110+
} text-white`}
111+
>
112+
{isDownloading ? (
113+
<svg className="w-6 h-6 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
114+
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
115+
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
116+
</svg>
117+
) : (
118+
<svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
119+
viewBox="0 0 24 24" stroke="currentColor">
120+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
121+
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
122+
</svg>
123+
)}
124+
</button>
125125
</div>
126-
)}
126+
</div>
127127
</div>
128128
);
129129
};

0 commit comments

Comments
 (0)