From 217ed7889e7aa6bfa94bd4e081772e19d5272765 Mon Sep 17 00:00:00 2001
From: Khoa Vo <vndangkhoa@gmail.com>
Date: Thu, 14 May 2026 19:26:09 +0700
Subject: [PATCH] feat: reorder You tab to show history first, extend Up Next
 list, remove PIP button

---
 frontend/app/feed/library/page.tsx     | 60 +++++++++----------
 frontend/app/watch/ClientWatchPage.tsx |  4 +-
 frontend/app/watch/YouTubePlayer.tsx   | 82 ++++++++++++++------------
 3 files changed, 76 insertions(+), 70 deletions(-)

diff --git a/frontend/app/feed/library/page.tsx b/frontend/app/feed/library/page.tsx
index ed66533..e10133b 100644
--- a/frontend/app/feed/library/page.tsx
+++ b/frontend/app/feed/library/page.tsx
@@ -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>
     );
 }
diff --git a/frontend/app/watch/ClientWatchPage.tsx b/frontend/app/watch/ClientWatchPage.tsx
index 7bd5a2f..ea61f45 100644
--- a/frontend/app/watch/ClientWatchPage.tsx
+++ b/frontend/app/watch/ClientWatchPage.tsx
@@ -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)}
diff --git a/frontend/app/watch/YouTubePlayer.tsx b/frontend/app/watch/YouTubePlayer.tsx
index 2983737..178545e 100644
--- a/frontend/app/watch/YouTubePlayer.tsx
+++ b/frontend/app/watch/YouTubePlayer.tsx
@@ -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>
     );
 }