NanamiAdmin
f6a861977c
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.
602 lines
19 KiB
JavaScript
602 lines
19 KiB
JavaScript
let videoDetails = {
|
||
1: {
|
||
title: "透明なパレット (self cover)",
|
||
channel: "Aqu3ra",
|
||
channelAvatar: "img/avatar/aqu3ra.png",
|
||
subscribers: "125K subscribers",
|
||
likes: "45.2K",
|
||
views: "576,197",
|
||
uploadDate: "1 months ago",
|
||
description: "description"
|
||
},
|
||
2: {
|
||
title: "【歌ってみた】Duvet / covered by ヰ世界情緒",
|
||
channel: "ヰ世界情緒 -Isekaijoucho-",
|
||
channelAvatar: "img/avatar/isekaijoucho.jpg",
|
||
subscribers: "2.5M subscribers",
|
||
likes: "89.3K",
|
||
views: "721,627",
|
||
uploadDate: "5 days ago",
|
||
description: "description"
|
||
},
|
||
3: {
|
||
title: "ヨルシカ 『 晴る 』 －文化祭2025－",
|
||
channel: "countben",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "45K subscribers",
|
||
likes: "12.8K",
|
||
views: "142,561",
|
||
uploadDate: "2 months ago",
|
||
description: "description"
|
||
},
|
||
4: {
|
||
title: "【Silent Witch沈默魔女的秘密】OST 主題曲「沈黙の魔女」bgm｜Kitkit Lu COVER",
|
||
channel: "KitKit Lu",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "890K subscribers",
|
||
likes: "156K",
|
||
views: "1,856,264",
|
||
uploadDate: "5 months ago",
|
||
description: "description"
|
||
},
|
||
5: {
|
||
title: "I Can't Wait feat. GUMI",
|
||
channel: "d0tc0mmie",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "234K subscribers",
|
||
likes: "28.5K",
|
||
views: "315,293",
|
||
uploadDate: "1 month ago",
|
||
description: "description"
|
||
},
|
||
6: {
|
||
title: "MiSiDE: ZERO Update – Full Gameplay + Ending (Showcase)",
|
||
channel: "RUSH PLAY",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "1.2M subscribers",
|
||
likes: "67.8K",
|
||
views: "900,156",
|
||
uploadDate: "4 weeks ago",
|
||
description: "description"
|
||
},
|
||
7: {
|
||
title: "Minecraftの効果音でサイエンス",
|
||
channel: "gmailアカウント",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "567K subscribers",
|
||
likes: "45.2K",
|
||
views: "651,192",
|
||
uploadDate: "11 months ago",
|
||
description: "description"
|
||
},
|
||
8: {
|
||
title: "osu! NEEDS to Take Notes... (00PARTS World's 1st Clear)",
|
||
channel: "bmc",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "345K subscribers",
|
||
likes: "78.9K",
|
||
views: "892,163",
|
||
uploadDate: "1 month ago",
|
||
description: "description"
|
||
},
|
||
9: {
|
||
title: "ヨルシカ - 春泥棒（OFFICIAL VIDEO）",
|
||
channel: "ヨルシカ / n-buna Official",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "3.5M subscribers",
|
||
likes: "2.1M",
|
||
views: "123,456,789",
|
||
uploadDate: "5 years ago",
|
||
description: "description"
|
||
},
|
||
10: {
|
||
title: "YOASOBI「アイドル」Official Music Video",
|
||
channel: "YOASOBI Official",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "8.9M subscribers",
|
||
likes: "5.6M",
|
||
views: "456,789,123",
|
||
uploadDate: "2 years ago",
|
||
description: "description"
|
||
},
|
||
11: {
|
||
title: "花譜 - 不可解",
|
||
channel: "花譜 -KAF-",
|
||
channelAvatar: "img/avatar/kaf.png",
|
||
subscribers: "1.2M subscribers",
|
||
likes: "890K",
|
||
views: "12,345,678",
|
||
uploadDate: "3 years ago",
|
||
description: "description"
|
||
},
|
||
12: {
|
||
title: "ZUTOMAYO - STUDY ME",
|
||
channel: "ZUTOMAYO",
|
||
channelAvatar: "img/avatar/ztmy.jpg",
|
||
subscribers: "2.3M subscribers",
|
||
likes: "1.2M",
|
||
views: "23,456,789",
|
||
uploadDate: "1 year ago",
|
||
description: "description"
|
||
},
|
||
13: {
|
||
title: "Eve - 廻廻奇譚",
|
||
channel: "Eve",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "4.5M subscribers",
|
||
likes: "3.2M",
|
||
views: "89,123,456",
|
||
uploadDate: "4 years ago",
|
||
description: "description"
|
||
},
|
||
14: {
|
||
title: "ClariS - コネクト",
|
||
channel: "ClariS Official",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "2.8M subscribers",
|
||
likes: "1.8M",
|
||
views: "45,678,901",
|
||
uploadDate: "10 years ago",
|
||
description: "description"
|
||
},
|
||
15: {
|
||
title: "米津玄師 Kenshi Yonezu - Lemon",
|
||
channel: "Kenshi Yonezu 米津玄師",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "5.6M subscribers",
|
||
likes: "4.2M",
|
||
views: "96,539,145",
|
||
uploadDate: "7 years ago",
|
||
description: "description"
|
||
},
|
||
16: {
|
||
title: "【初音ミク】 夜明けと蛍 【オリジナル】",
|
||
channel: "ヨルシカ / n-buna Official",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "3.5M subscribers",
|
||
likes: "1.5M",
|
||
views: "27,749,534",
|
||
uploadDate: "8 years ago",
|
||
description: "description"
|
||
},
|
||
17: {
|
||
title: "Empty old City - Buffer",
|
||
channel: "Empty old city",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "234K subscribers",
|
||
likes: "45.6K",
|
||
views: "838,946",
|
||
uploadDate: "1 year ago",
|
||
description: "description"
|
||
},
|
||
18: {
|
||
title: "I built Git for Minecraft for a hackathon and won",
|
||
channel: "MathRayyan",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "89K subscribers",
|
||
likes: "23.4K",
|
||
views: "288,346",
|
||
uploadDate: "12 days ago",
|
||
description: "description"
|
||
},
|
||
19: {
|
||
title: "怎麼讓遊戲越來越真？PBR貼圖是怎麼做到的？",
|
||
channel: "孫拓海Taku",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "456K subscribers",
|
||
likes: "12.3K",
|
||
views: "25,364",
|
||
uploadDate: "3 weeks ago",
|
||
description: "description"
|
||
},
|
||
20: {
|
||
title: "「空あくあ!」當さくな說出這句台詞時 全場都淚崩了....【結城さくな】【Vtuber中文/翻譯/精華】",
|
||
channel: "Dar烤肉!",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "567K subscribers",
|
||
likes: "34.5K",
|
||
views: "116,498",
|
||
uploadDate: "7 days ago",
|
||
description: "description"
|
||
},
|
||
21: {
|
||
title: "「明日方舟：终末地性能分析：二游画质巅峰？榨干手机！",
|
||
channel: "极客湾Geekerwan",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "4.5M subscribers",
|
||
likes: "234K",
|
||
views: "51,649",
|
||
uploadDate: "10 days ago",
|
||
description: "description"
|
||
},
|
||
22: {
|
||
title: "What GPU is the BEST for Linux Gaming?",
|
||
channel: "Linus Tech Tips",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "15.6M subscribers",
|
||
likes: "456K",
|
||
views: "96,751",
|
||
uploadDate: "7 days ago",
|
||
description: "description"
|
||
},
|
||
23: {
|
||
title: "How Hard Is It to Build Your First PC?",
|
||
channel: "PLACITECH",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "1.2M subscribers",
|
||
likes: "89K",
|
||
views: "4,351",
|
||
uploadDate: "2 months ago",
|
||
description: "description"
|
||
},
|
||
24: {
|
||
title: "回顾我们最中意的 2025 年产品发布 - 谷歌开发者新闻（年终特辑）",
|
||
channel: "Google for Developers",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "8.9M subscribers",
|
||
likes: "234K",
|
||
views: "3,475",
|
||
uploadDate: "1 month ago",
|
||
description: "description"
|
||
},
|
||
25: {
|
||
title: "Commodore 128 Alternate Universe",
|
||
channel: "The 8-Bit Guy",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "2.3M subscribers",
|
||
likes: "456K",
|
||
views: "17,498",
|
||
uploadDate: "4 months ago",
|
||
description: "description"
|
||
},
|
||
26: {
|
||
title: "\"The Roller Coaster\" - Behind the Scenes - Time Lapse & Commentary",
|
||
channel: "AlanBeckerTutorials",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "5.6M subscribers",
|
||
likes: "23.4K",
|
||
views: "193,762",
|
||
uploadDate: "7 years ago",
|
||
description: "description"
|
||
},
|
||
27: {
|
||
title: "Animation vs. Game Design",
|
||
channel: "Alan Backer",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "3.4M subscribers",
|
||
likes: "56.7K",
|
||
views: "694,264",
|
||
uploadDate: "2 months ago",
|
||
description: "description"
|
||
},
|
||
28: {
|
||
title: "The Far Lands - Animation vs. Minecraft Shorts Ep 38",
|
||
channel: "Alan Backer",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "3.4M subscribers",
|
||
likes: "78.9K",
|
||
views: "975,192",
|
||
uploadDate: "1 month ago",
|
||
description: "description"
|
||
},
|
||
29: {
|
||
title: "【Official MV】ray 超かぐや姫！Version／かぐや (cv.夏吉ゆうこ) ＆ 月見ヤチヨ (cv.早見沙織) from #超かぐや姫 ！【新作アニメーション】",
|
||
channel: "『超かぐや姫 ! 』公式",
|
||
channelAvatar: "img/avatar/cpk.png",
|
||
subscribers: "1.5M subscribers",
|
||
likes: "234K",
|
||
views: "78,192",
|
||
uploadDate: "5 days ago",
|
||
description: "description"
|
||
},
|
||
30: {
|
||
title: "ドッペルゲンガー feat.初音ミク#vocaloid #初音ミク",
|
||
channel: "Vocaloid Channel",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "2.3M subscribers",
|
||
likes: "12.3K",
|
||
views: "2,359",
|
||
uploadDate: "3 days ago",
|
||
description: "description"
|
||
},
|
||
31: {
|
||
title: "Melt CPK! Remix — English Subtitled Version",
|
||
channel: "Vocaloid Channel",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "2.3M subscribers",
|
||
likes: "11.2K",
|
||
views: "2,264",
|
||
uploadDate: "3 days ago",
|
||
description: "description"
|
||
},
|
||
32: {
|
||
title: "【Suite History】花譜×#KTちゃん「ギミギミ逃避行feat. #KTちゃん(Prod. peko)」 #花譜 #KTちゃん #組曲 #shorts",
|
||
channel: "花譜 -KAF-",
|
||
channelAvatar: "img/avatar/kaf.png",
|
||
subscribers: "1.2M subscribers",
|
||
likes: "23.4K",
|
||
views: "5,430",
|
||
uploadDate: "2 days ago",
|
||
description: "description"
|
||
},
|
||
33: {
|
||
title: "ヨルシカ - プレイシック #ヨルシカ #プレイシック #二人称 #yorushika #playsick #secondperson",
|
||
channel: "ヨルシカ / n-buna Official",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "3.5M subscribers",
|
||
likes: "156K",
|
||
views: "39,254",
|
||
uploadDate: "10 days ago",
|
||
description: "description"
|
||
},
|
||
34: {
|
||
title: "#ヨルシカ #live #前世 #yorushika",
|
||
channel: "ヨルシカ / n-buna Official",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "3.5M subscribers",
|
||
likes: "123K",
|
||
views: "36,181",
|
||
uploadDate: "1 month ago",
|
||
description: "description"
|
||
},
|
||
35: {
|
||
title: "【歌ってみた】蜜月アン・ドゥ・トロワ covered by ヰ世界情緒 #shorts",
|
||
channel: "ヰ世界情緒 -Isekaijoucho-",
|
||
channelAvatar: "img/avatar/isekaijoucho.jpg",
|
||
subscribers: "2.5M subscribers",
|
||
likes: "8.9K",
|
||
views: "2,163",
|
||
uploadDate: "6 days ago",
|
||
description: "description"
|
||
},
|
||
36: {
|
||
title: "Thank you 2025🩵Have a wonderful new year! #YOASOBI_2025",
|
||
channel: "YOASOBI Official",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "8.9M subscribers",
|
||
likes: "123K",
|
||
views: "36,165",
|
||
uploadDate: "20 days ago",
|
||
description: "description"
|
||
},
|
||
37: {
|
||
title: "初めてラブソングを書きました。新曲「ハートマーク feat.川谷絵音」#礼衣 #ハートマーク",
|
||
channel: "礼衣 / Rei",
|
||
channelAvatar: "img/avatar/rei.jpg",
|
||
subscribers: "567K subscribers",
|
||
likes: "12.3K",
|
||
views: "2,609",
|
||
uploadDate: "3 days ago",
|
||
description: "description"
|
||
},
|
||
38: {
|
||
title: "Would you play this at the school talent show for $500? #osu #osugame",
|
||
channel: "osu! Channel",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "1.5M subscribers",
|
||
likes: "23.4K",
|
||
views: "133,658",
|
||
uploadDate: "2 months ago",
|
||
description: "description"
|
||
},
|
||
39: {
|
||
title: "May your holidays be filled with great vibes, full combos, and lots of epic tracks! 🎵",
|
||
channel: "osu! Channel",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "1.5M subscribers",
|
||
likes: "3.4K",
|
||
views: "1,658",
|
||
uploadDate: "1 months ago",
|
||
description: "description"
|
||
},
|
||
40: {
|
||
title: "PANDORA PARADOXXX RE:MASTER alternative spin method #maimai #maimaiでらっくす #maimai_dx",
|
||
channel: "Rhythm Games",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "890K subscribers",
|
||
likes: "5.6K",
|
||
views: "25,365",
|
||
uploadDate: "12 days ago",
|
||
description: "description"
|
||
},
|
||
41: {
|
||
title: "Arch Linux VS Debian in 1 Min #linux #arch #debian",
|
||
channel: "Linux Tips",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "456K subscribers",
|
||
likes: "4.5K",
|
||
views: "3,565",
|
||
uploadDate: "11 days ago",
|
||
description: "description"
|
||
},
|
||
42: {
|
||
title: "#linux #homelab #opensource #tech #debian",
|
||
channel: "Linux Tips",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "456K subscribers",
|
||
likes: "6.7K",
|
||
views: "7,925",
|
||
uploadDate: "10 days ago",
|
||
description: "description"
|
||
},
|
||
43: {
|
||
title: "The one key keyboard #tech",
|
||
channel: "Tech Shorts",
|
||
channelAvatar: "img/avatar/default.jpg",
|
||
subscribers: "1.2M subscribers",
|
||
likes: "8.9K",
|
||
views: "4,571",
|
||
uploadDate: "1 month ago",
|
||
description: "description"
|
||
}
|
||
};
|
||
|
||
let comments = [
|
||
{
|
||
author: "AnimeFan123",
|
||
avatar: "img/avatar/default.jpg",
|
||
time: "2 hours ago",
|
||
content: "This is amazing! The quality is incredible and the editing is top-notch. Keep up the great work!"
|
||
},
|
||
{
|
||
author: "MusicLover456",
|
||
avatar: "img/avatar/default.jpg",
|
||
time: "5 hours ago",
|
||
content: "I've been listening to this on repeat for days. Can't get enough of it!"
|
||
},
|
||
{
|
||
author: "TechEnthusiast",
|
||
avatar: "img/avatar/default.jpg",
|
||
time: "1 day ago",
|
||
content: "Great explanation! Really helped me understand this topic better."
|
||
},
|
||
{
|
||
author: "GamerPro99",
|
||
avatar: "img/avatar/default.jpg",
|
||
time: "2 days ago",
|
||
content: "This gameplay is insane! How did you even manage to do that?"
|
||
},
|
||
{
|
||
author: "ArtFanatic",
|
||
avatar: "img/avatar/default.jpg",
|
||
time: "3 days ago",
|
||
content: "The animation style is so unique and beautiful. Love it!"
|
||
},
|
||
{
|
||
author: "SubscriberOne",
|
||
avatar: "img/avatar/default.jpg",
|
||
time: "4 days ago",
|
||
content: "First! Been waiting for this video for so long!"
|
||
},
|
||
{
|
||
author: "CasualViewer",
|
||
avatar: "img/avatar/default.jpg",
|
||
time: "5 days ago",
|
||
content: "Just stumbled upon this channel and I'm already in love with the content!"
|
||
},
|
||
{
|
||
author: "CommentMaster",
|
||
avatar: "img/avatar/default.jpg",
|
||
time: "1 week ago",
|
||
content: "This deserves way more views! Sharing with all my friends!"
|
||
}
|
||
];
|
||
|
||
function getVideoIdFromUrl() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
return urlParams.get('id');
|
||
}
|
||
|
||
function loadVideoInfo() {
|
||
const videoId = getVideoIdFromUrl();
|
||
const videoInfo = videoDetails[videoId];
|
||
|
||
if (videoInfo) {
|
||
document.getElementById('videoTitle').textContent = videoInfo.title;
|
||
document.getElementById('channelName').textContent = videoInfo.channel;
|
||
document.getElementById('channelSubscribers').textContent = videoInfo.subscribers;
|
||
document.getElementById('likeCount').textContent = videoInfo.likes;
|
||
document.getElementById('videoViews').textContent = videoInfo.views + ' views';
|
||
document.getElementById('videoUploadDate').textContent = videoInfo.uploadDate;
|
||
document.getElementById('videoDescription').textContent = videoInfo.description;
|
||
|
||
const channelAvatar = document.getElementById('channelAvatar');
|
||
if (videoInfo.channelAvatar && videoInfo.channelAvatar !== 'img/avatar/default.jpg') {
|
||
channelAvatar.innerHTML = `<img src="${videoInfo.channelAvatar}" alt="${videoInfo.channel}">`;
|
||
}
|
||
|
||
document.title = videoInfo.title + ' - YouTube Revived';
|
||
}
|
||
|
||
renderComments();
|
||
}
|
||
|
||
function renderComments() {
|
||
const commentsList = document.getElementById('commentsList');
|
||
const commentsCount = document.getElementById('commentsCount');
|
||
|
||
commentsCount.textContent = comments.length + ' Comments';
|
||
commentsList.innerHTML = '';
|
||
|
||
comments.forEach(comment => {
|
||
const commentElement = document.createElement('div');
|
||
commentElement.className = 'comment-item';
|
||
commentElement.innerHTML = `
|
||
<div class="comment-avatar">
|
||
<img src="${comment.avatar}" alt="${comment.author}">
|
||
</div>
|
||
<div class="comment-content">
|
||
<div class="comment-header">
|
||
<span class="comment-author">${comment.author}</span>
|
||
<span class="comment-time">${comment.time}</span>
|
||
</div>
|
||
<p class="comment-text">${comment.content}</p>
|
||
<div class="comment-actions">
|
||
<button class="comment-action-btn">
|
||
<i class="fas fa-thumbs-up"></i>
|
||
</button>
|
||
<button class="comment-action-btn">
|
||
<i class="fas fa-thumbs-down"></i>
|
||
</button>
|
||
<button class="comment-action-btn">
|
||
<i class="fas fa-reply"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
commentsList.appendChild(commentElement);
|
||
});
|
||
}
|
||
|
||
function initVideoPage() {
|
||
loadVideoInfo();
|
||
setupEventListeners();
|
||
}
|
||
|
||
function setupEventListeners() {
|
||
const moreBtn = document.getElementById('moreBtn');
|
||
const moreDropdown = document.getElementById('moreDropdown');
|
||
|
||
if (moreBtn && moreDropdown) {
|
||
moreBtn.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
moreDropdown.classList.toggle('show');
|
||
});
|
||
|
||
document.addEventListener('click', () => {
|
||
moreDropdown.classList.remove('show');
|
||
});
|
||
}
|
||
|
||
const descriptionToggle = document.getElementById('descriptionToggle');
|
||
const videoDescription = document.getElementById('videoDescription');
|
||
|
||
if (descriptionToggle && videoDescription) {
|
||
descriptionToggle.addEventListener('click', () => {
|
||
videoDescription.classList.toggle('expanded');
|
||
const icon = descriptionToggle.querySelector('i');
|
||
if (videoDescription.classList.contains('expanded')) {
|
||
icon.classList.remove('fa-chevron-down');
|
||
icon.classList.add('fa-chevron-up');
|
||
} else {
|
||
icon.classList.remove('fa-chevron-up');
|
||
icon.classList.add('fa-chevron-down');
|
||
}
|
||
});
|
||
}
|
||
|
||
const subscribeBtn = document.getElementById('subscribeBtn');
|
||
if (subscribeBtn) {
|
||
subscribeBtn.addEventListener('click', () => {
|
||
subscribeBtn.classList.toggle('subscribed');
|
||
if (subscribeBtn.classList.contains('subscribed')) {
|
||
subscribeBtn.textContent = 'Subscribed';
|
||
} else {
|
||
subscribeBtn.textContent = 'Subscribe';
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', initVideoPage);
|