feat(video-page): add related videos section with shorts and regular videos

- Add new related videos section with styling for shorts and regular videos
- Implement logic to load and display related videos based on current video category
- Restructure video page layout to accommodate new related videos section
- Add shuffle functionality for video recommendations

css/video.css

@@ -1,14 +1,21 @@
 .video-content-wrapper {
+  display: flex;
+  gap: 24px;
+  padding: 24px;
+  background-color: #121212;
+  flex: 1;
+  overflow: hidden;
+}
+
+.video-main-section {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  padding: 24px;
-  background-color: #121212;
 }
 
 .video-player {
-  width: 70%;
+  width: 100%;
   aspect-ratio: 16 / 9;
   margin-bottom: 20px;
   border-radius: 20px;
@@ -28,9 +35,11 @@
 }
 
 .video-info-container {
-  margin-left: 30px;
+  width: 100%;
-  margin-right: 30px;
   margin-bottom: 20px;
+  padding: 1px;
+  border: 1px solid #000000;
+  box-sizing: border-box;
 }
 
 .video-title {
@@ -255,9 +264,11 @@
 }
 
 .comments-section {
-  margin-left: 30px;
+  width: 100%;
-  margin-right: 30px;
   margin-bottom: 40px;
+  padding: 1px;
+  border: 1px solid #000000;
+  box-sizing: border-box;
 }
 
 .comments-header {
@@ -383,3 +394,163 @@
 .comment-action-btn i {
   font-size: 16px;
 }
+
+.related-videos-section {
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+  margin: 0 0 12px 0;
+}
+
+.shorts-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.shorts-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.short-item {
+  position: relative;
+  width: 100%;
+  padding-top: 177.78%; /* 9:16 ratio */
+  background-color: #272727;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.short-item:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.short-thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.short-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.short-info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+}
+
+.short-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+  margin: 0 0 4px 0;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.short-channel {
+  font-size: 12px;
+  color: #aaaaaa;
+  margin: 0 0 2px 0;
+}
+
+.short-views {
+  font-size: 12px;
+  color: #aaaaaa;
+  margin: 0;
+}
+
+.regular-videos-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.regular-videos-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.regular-video-item {
+  display: flex;
+  gap: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  border-radius: 12px;
+  padding: 8px;
+}
+
+.regular-video-item:hover {
+  background-color: #272727;
+}
+
+.regular-video-thumbnail {
+  width: 168px;
+  height: 94px;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+  background-color: #272727;
+}
+
+.regular-video-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.regular-video-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.regular-video-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+  margin: 0 0 6px 0;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.regular-video-channel {
+  font-size: 12px;
+  color: #aaaaaa;
+  margin: 0 0 4px 0;
+}
+
+.regular-video-meta {
+  font-size: 12px;
+  color: #aaaaaa;
+  margin: 0;
+}

js/video.js

@@ -1,15 +1,18 @@
 let videoDetails = {};
 let comments = [];
+let allVideos = [];
 
 async function loadVideoData() {
     try {
         const response = await fetch('src/video.json');
         const data = await response.json();
         videoDetails = {};
+        allVideos = data.videos;
         data.videos.forEach(video => {
             videoDetails[video.id] = video;
         });
         comments = data.comments;
+        console.log('Video data loaded successfully:', allVideos.length, 'videos');
     } catch (error) {
         console.error('Failed to load video data:', error);
     }
@@ -17,12 +20,17 @@ async function loadVideoData() {
 
 function getVideoIdFromUrl() {
   const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get('id');
+  const id = urlParams.get('id');
+  return id ? parseInt(id) : 1;
 }
 
 function loadVideoInfo() {
   const videoId = getVideoIdFromUrl();
+  console.log('Video ID:', videoId);
+  console.log('All videos:', allVideos.length);
+  
   const videoInfo = videoDetails[videoId];
+  console.log('Video info:', videoInfo);
   
   if (videoInfo) {
     document.getElementById('videoTitle').textContent = videoInfo.title;
@@ -39,11 +47,101 @@ function loadVideoInfo() {
     }
     
     document.title = videoInfo.title + ' - YouTube Revived';
+    
+    loadRelatedVideos(videoInfo);
   }
   
   renderComments();
 }
 
+function loadRelatedVideos(currentVideo) {
+  console.log('Loading related videos for:', currentVideo.title);
+  console.log('Current category:', currentVideo.category);
+  
+  const currentCategory = currentVideo.category;
+  const currentId = currentVideo.id;
+  
+  const shortsList = document.getElementById('shortsList');
+  const regularVideosList = document.getElementById('regularVideosList');
+  
+  console.log('Shorts list element:', shortsList);
+  console.log('Regular videos list element:', regularVideosList);
+  
+  shortsList.innerHTML = '';
+  regularVideosList.innerHTML = '';
+  
+  const shorts = allVideos.filter(v => v.type === 'short' && v.id !== currentId);
+  const regularVideos = allVideos.filter(v => v.type === 'video' && v.id !== currentId);
+  
+  console.log('Found shorts:', shorts.length);
+  console.log('Found regular videos:', regularVideos.length);
+  
+  const sameCategoryShorts = shorts.filter(v => v.category === currentCategory);
+  const otherShorts = shorts.filter(v => v.category !== currentCategory);
+  
+  const sameCategoryRegularVideos = regularVideos.filter(v => v.category === currentCategory);
+  const otherRegularVideos = regularVideos.filter(v => v.category !== currentCategory);
+  
+  console.log('Same category shorts:', sameCategoryShorts.length);
+  console.log('Other shorts:', otherShorts.length);
+  console.log('Same category regular videos:', sameCategoryRegularVideos.length);
+  console.log('Other regular videos:', otherRegularVideos.length);
+  
+  shuffleArray(otherShorts);
+  shuffleArray(otherRegularVideos);
+  
+  const selectedShorts = [...sameCategoryShorts, ...otherShorts].slice(0, 3);
+  const selectedRegularVideos = [...sameCategoryRegularVideos, ...otherRegularVideos].slice(0, 10);
+  
+  console.log('Selected shorts:', selectedShorts.length);
+  console.log('Selected regular videos:', selectedRegularVideos.length);
+  
+  selectedShorts.forEach(short => {
+    const shortElement = document.createElement('div');
+    shortElement.className = 'short-item';
+    shortElement.innerHTML = `
+      <div class="short-thumbnail">
+        <img src="${short.thumbnail}" alt="${short.title}">
+      </div>
+      <div class="short-info">
+        <h4 class="short-title">${short.title}</h4>
+        <p class="short-channel">${short.channel}</p>
+        <p class="short-views">${short.views} views</p>
+      </div>
+    `;
+    shortElement.addEventListener('click', () => {
+      window.location.href = `video.html?id=${short.id}`;
+    });
+    shortsList.appendChild(shortElement);
+  });
+  
+  selectedRegularVideos.forEach(video => {
+    const videoElement = document.createElement('div');
+    videoElement.className = 'regular-video-item';
+    videoElement.innerHTML = `
+      <div class="regular-video-thumbnail">
+        <img src="${video.thumbnail}" alt="${video.title}">
+      </div>
+      <div class="regular-video-info">
+        <h4 class="regular-video-title">${video.title}</h4>
+        <p class="regular-video-channel">${video.channel}</p>
+        <p class="regular-video-meta">${video.views} views • ${video.uploadDate}</p>
+      </div>
+    `;
+    videoElement.addEventListener('click', () => {
+      window.location.href = `video.html?id=${video.id}`;
+    });
+    regularVideosList.appendChild(videoElement);
+  });
+}
+
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
+
 function renderComments() {
   const commentsList = document.getElementById('commentsList');
   const commentsCount = document.getElementById('commentsCount');

video.html

@@ -166,94 +166,115 @@
             </aside>
 
             <div class="video-content-wrapper">
-                <!-- Video Player -->
+                <div class="video-main-section">
-                <div class="video-player">
+                    <!-- Video Player -->
-                    <video src="src/video.mp4" controls></video>
+                    <div class="video-player">
-                </div>
+                        <video src="src/video.mp4" controls></video>
+                    </div>
 
-                <!-- Video Info -->
+                    <!-- Video Info -->
-                <div class="video-info-container">
+                    <div class="video-info-container">
-                    <h1 class="video-title" id="videoTitle">Video Title</h1>
+                        <h1 class="video-title" id="videoTitle">Video Title</h1>
                         
-                    <div class="video-channel-info">
+                        <div class="video-channel-info">
-                        <div class="channel-left">
+                            <div class="channel-left">
-                            <div class="channel-avatar" id="channelAvatar">
+                                <div class="channel-avatar" id="channelAvatar">
+                                    <div class="video-channel-avatar">
+                                        <i class="fas fa-user avatar-img"></i>
+                                    </div>
+                                </div>
+                                <div class="channel-details">
+                                    <div class="channel-name" id="channelName">Channel Name</div>
+                                    <div class="channel-subscribers" id="channelSubscribers">0 subscribers</div>
+                                </div>
+                            </div>
+                            <button class="subscribe-btn" id="subscribeBtn">Subscribe</button>
+                        </div>
+
+                        <div class="video-actions">
+                            <div class="like-dislike-buttons">
+                                <button class="action-btn like-btn">
+                                    <i class="fas fa-thumbs-up"></i>
+                                    <span id="likeCount">0</span>
+                                </button>
+                                <button class="action-btn dislike-btn">
+                                    <i class="fas fa-thumbs-down"></i>
+                                </button>
+                            </div>
+                            <button class="action-btn share-btn">
+                                <i class="fas fa-share"></i>
+                                <span>Share</span>
+                            </button>
+                            <button class="action-btn save-btn">
+                                <i class="fas fa-bookmark"></i>
+                                <span>Save</span>
+                            </button>
+                            <button class="action-btn clip-btn">
+                                <i class="fas fa-cut"></i>
+                                <span>Clip</span>
+                            </button>
+                            <div class="more-options">
+                                <button class="action-btn more-btn" id="moreBtn">
+                                    <i class="fas fa-ellipsis-h"></i>
+                                </button>
+                                <div class="more-dropdown" id="moreDropdown">
+                                    <div class="more-item download-item">
+                                        <i class="fas fa-download"></i>
+                                        <span>Download</span>
+                                    </div>
+                                    <div class="more-item report-item">
+                                        <i class="fas fa-flag"></i>
+                                        <span>Report</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="video-stats">
+                            <span id="videoViews">0 views</span>
+                            <span id="videoUploadDate">0 ago</span>
+                        </div>
+
+                        <div class="video-description">
+                            <div class="description-toggle" id="descriptionToggle">
+                                <i class="fas fa-chevron-down"></i>
+                            </div>
+                            <p id="videoDescription">description</p>
+                        </div>
+                    </div>
+
+                    <!-- Comments Section -->
+                    <div class="comments-section">
+                        <h2 class="comments-header">
+                            <span id="commentsCount">0 Comments</span>
+                        </h2>
+                        <div class="add-comment">
+                            <div class="comment-avatar">
                                 <i class="fas fa-user"></i>
                             </div>
-                            <div class="channel-details">
+                            <div class="comment-input-container">
-                                <div class="channel-name" id="channelName">Channel Name</div>
+                                <input type="text" class="comment-input" placeholder="Add a comment...">
-                                <div class="channel-subscribers" id="channelSubscribers">0 subscribers</div>
                             </div>
                         </div>
-                        <button class="subscribe-btn" id="subscribeBtn">Subscribe</button>
+                        <div class="comments-list" id="commentsList">
-                    </div>
-
-                    <div class="video-actions">
-                        <div class="like-dislike-buttons">
-                            <button class="action-btn like-btn">
-                                <i class="fas fa-thumbs-up"></i>
-                                <span id="likeCount">0</span>
-                            </button>
-                            <button class="action-btn dislike-btn">
-                                <i class="fas fa-thumbs-down"></i>
-                            </button>
                         </div>
-                        <button class="action-btn share-btn">
-                            <i class="fas fa-share"></i>
-                            <span>Share</span>
-                        </button>
-                        <button class="action-btn save-btn">
-                            <i class="fas fa-bookmark"></i>
-                            <span>Save</span>
-                        </button>
-                        <button class="action-btn clip-btn">
-                            <i class="fas fa-cut"></i>
-                            <span>Clip</span>
-                        </button>
-                        <div class="more-options">
-                            <button class="action-btn more-btn" id="moreBtn">
-                                <i class="fas fa-ellipsis-h"></i>
-                            </button>
-                            <div class="more-dropdown" id="moreDropdown">
-                                <div class="more-item download-item">
-                                    <i class="fas fa-download"></i>
-                                    <span>Download</span>
-                                </div>
-                                <div class="more-item report-item">
-                                    <i class="fas fa-flag"></i>
-                                    <span>Report</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="video-stats">
-                        <span id="videoViews">0 views</span>
-                        <span id="videoUploadDate">0 ago</span>
-                    </div>
-
-                    <div class="video-description">
-                        <div class="description-toggle" id="descriptionToggle">
-                            <i class="fas fa-chevron-down"></i>
-                        </div>
-                        <p id="videoDescription">description</p>
                     </div>
                 </div>
 
-                <!-- Comments Section -->
+                <!-- Related Videos Section -->
-                <div class="comments-section">
+                <div class="related-videos-section">
-                    <h2 class="comments-header">
+                    <!-- Shorts Section -->
-                        <span id="commentsCount">0 Comments</span>
+                    <div class="shorts-section">
-                    </h2>
+                        <h3 class="section-title">Shorts</h3>
-                    <div class="add-comment">
+                        <div class="shorts-list" id="shortsList">
-                        <div class="comment-avatar">
-                            <i class="fas fa-user"></i>
-                        </div>
-                        <div class="comment-input-container">
-                            <input type="text" class="comment-input" placeholder="Add a comment...">
                         </div>
                     </div>
-                    <div class="comments-list" id="commentsList">
+
+                    <!-- Regular Videos Section -->
+                    <div class="regular-videos-section">
+                        <h3 class="section-title">Related Videos</h3>
+                        <div class="regular-videos-list" id="regularVideosList">
+                        </div>
                     </div>
                 </div>
             </div>