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 (
<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>
<h2 style={{ marginBottom: '20px', fontSize: '20px', fontWeight: '600' }}>
Watch History
@ -311,6 +281,36 @@ export default function LibraryPage() {
</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>
)}
{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>
);
}

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

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

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

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