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
This commit is contained in:
175
video.html
175
video.html
@@ -166,94 +166,115 @@
|
||||
</aside>
|
||||
|
||||
<div class="video-content-wrapper">
|
||||
<!-- Video Player -->
|
||||
<div class="video-player">
|
||||
<video src="src/video.mp4" controls></video>
|
||||
</div>
|
||||
<div class="video-main-section">
|
||||
<!-- Video Player -->
|
||||
<div class="video-player">
|
||||
<video src="src/video.mp4" controls></video>
|
||||
</div>
|
||||
|
||||
<!-- Video Info -->
|
||||
<div class="video-info-container">
|
||||
<h1 class="video-title" id="videoTitle">Video Title</h1>
|
||||
|
||||
<div class="video-channel-info">
|
||||
<div class="channel-left">
|
||||
<div class="channel-avatar" id="channelAvatar">
|
||||
<!-- Video Info -->
|
||||
<div class="video-info-container">
|
||||
<h1 class="video-title" id="videoTitle">Video Title</h1>
|
||||
|
||||
<div class="video-channel-info">
|
||||
<div class="channel-left">
|
||||
<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="channel-name" id="channelName">Channel Name</div>
|
||||
<div class="channel-subscribers" id="channelSubscribers">0 subscribers</div>
|
||||
<div class="comment-input-container">
|
||||
<input type="text" class="comment-input" placeholder="Add a comment...">
|
||||
</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 class="comments-list" id="commentsList">
|
||||
</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="comment-input-container">
|
||||
<input type="text" class="comment-input" placeholder="Add a comment...">
|
||||
<!-- Related Videos Section -->
|
||||
<div class="related-videos-section">
|
||||
<!-- Shorts Section -->
|
||||
<div class="shorts-section">
|
||||
<h3 class="section-title">Shorts</h3>
|
||||
<div class="shorts-list" id="shortsList">
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user