NanamiSchool/YouTube-Revived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(video-page): add video player page with details and comments

Browse Source 
Add new video player page with responsive layout, video details display, and comments section. Includes video player, channel info, like/dislike buttons, and interactive elements. Also add null checks in main script to prevent errors when elements are missing.
This commit is contained in:
NanamiAdmin
2026-02-11 21:46:48 +08:00
parent 7fb4ad915b
commit f6a861977c
5 changed files with 1151 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
video.html
View File

@@ -6,6 +6,7 @@
<title>YouTube Revived</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/video.css">
</head>
<body>
<div class="container">
@@ -48,7 +49,7 @@
<main class="main-content">
<!-- Sidebar -->
<aside class="sidebar">
<aside class="sidebar collapsed">
<nav class="sidebar-nav">
<div class="nav-section">
<button class="nav-btn active">
@@ -164,9 +165,102 @@
</div>
</aside>
<div class="video-content-wrapper">
<!-- 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">
<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>
</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="comment-input-container">
<input type="text" class="comment-input" placeholder="Add a comment...">
</div>
</div>
<div class="comments-list" id="commentsList">
</div>
</div>
</div>
</main>
</div>
<script src="js/script.js"></script>
<script src="js/video.js"></script>
</body>
</html>