vndangkhoa/kv-tube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: reorder You tab to show history first, extend Up Next list, remove PIP button

Browse source
This commit is contained in:
Khoa Vo 2026-05-14 19:26:09 +07:00
parent b02f671aeb
commit 217ed7889e
3 changed files with 76 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/app/feed/library/page.tsx
View file

@ -254,36 +254,6 @@ export default function LibraryPage() {
return ( return (
<div style={{ padding: '24px', maxWidth: '1400px', margin: '0 auto' }}> <div style={{ padding: '24px', maxWidth: '1400px', margin: '0 auto' }}>
{subscriptions.length > 0 && (
<section style={{ marginBottom: '40px' }}>
<h2 style={{ marginBottom: '20px', fontSize: '20px', fontWeight: '600' }}>
Sub
</h2>
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
{subscriptions.map((sub) => (
<SubscriptionCard key={sub.channel_id} subscription={sub} />
))}
</div>
</section>
)}
{savedVideos.length > 0 && (
<section style={{ marginBottom: '40px' }}>
<h2 style={{ marginBottom: '20px', fontSize: '20px', fontWeight: '600' }}>
Saved Videos
</h2>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
gap: '16px',
}}>
{savedVideos.map((video) => (
<SavedVideoCard key={video.videoId} video={video} />
))}
</div>
</section>
)}
<section> <section>
<h2 style={{ marginBottom: '20px', fontSize: '20px', fontWeight: '600' }}> <h2 style={{ marginBottom: '20px', fontSize: '20px', fontWeight: '600' }}>
Watch History Watch History
@ -311,6 +281,36 @@ export default function LibraryPage() {
</div> </div>
)} )}
</section> </section>
{savedVideos.length > 0 && (
<section style={{ marginBottom: '40px' }}>
<h2 style={{ marginBottom: '20px', fontSize: '20px', fontWeight: '600' }}>
Saved Videos
</h2>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
gap: '16px',
}}>
{savedVideos.map((video) => (
<SavedVideoCard key={video.videoId} video={video} />
))}
</div>
</section>
)}
{subscriptions.length > 0 && (
<section style={{ marginBottom: '40px' }}>
<h2 style={{ marginBottom: '20px', fontSize: '20px', fontWeight: '600' }}>
Sub
</h2>
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
{subscriptions.map((sub) => (
<SubscriptionCard key={sub.channel_id} subscription={sub} />
))}
</div>
</section>
)}
</div> </div>
); );
} }

4
frontend/app/watch/ClientWatchPage.tsx
View file

@ -970,8 +970,8 @@ export default function ClientWatchPage() {
{relatedVideos.length} videos {relatedVideos.length} videos
</span> </span>
</div> </div>
<div style={{ maxHeight: '300px', overflowY: 'auto' }}> <div style={{ overflowY: 'auto' }}>
{relatedVideos.slice(0, 8).map((video, index) => ( {relatedVideos.slice(0, 30).map((video, index) => (
<div <div
key={video.id} key={video.id}
onClick={() => handleVideoSelect(index)} onClick={() => handleVideoSelect(index)}

82
frontend/app/watch/YouTubePlayer.tsx
View file

@ -252,44 +252,50 @@ export default function YouTubePlayer({
left: 0, left: 0,
}} }}
/> />
{/* Fullscreen button */} {/* Controls */}
<button <div style={{
onClick={() => { position: 'absolute',
if (document.fullscreenElement) { bottom: '80px',
document.exitFullscreen(); right: '8px',
} else { display: 'flex',
playerContainerRef.current?.requestFullscreen(); gap: '8px',
} zIndex: 10,
}} }}>
style={{ {/* Fullscreen button */}
position: 'absolute', <button
bottom: '8px', onClick={() => {
right: '8px', if (document.fullscreenElement) {
backgroundColor: 'rgba(0,0,0,0.6)', document.exitFullscreen();
border: 'none', } else {
borderRadius: '4px', playerContainerRef.current?.requestFullscreen();
padding: '6px', }
cursor: 'pointer', }}
display: 'flex', style={{
alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.6)',
justifyContent: 'center', border: 'none',
transition: 'background-color 0.2s', borderRadius: '4px',
zIndex: 10, padding: '6px',
}} cursor: 'pointer',
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.8)'} display: 'flex',
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.6)'} alignItems: 'center',
title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'} justifyContent: 'center',
> transition: 'background-color 0.2s',
{isFullscreen ? ( }}
<svg width="20" height="20" viewBox="0 0 24 24" fill="white"> onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.8)'}
<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/> onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.6)'}
</svg> title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
) : ( >
<svg width="20" height="20" viewBox="0 0 24 24" fill="white"> {isFullscreen ? (
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/> <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
</svg> <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
)} </svg>
</button> ) : (
<svg width="20" height="20" viewBox="0 0 24 24" fill="white">
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
</svg>
)}
</button>
</div>
</div> </div>
); );
} }