feat: update video content and improve grid layout
- Add new video thumbnails for music, game, tech, and art categories - Update video data with more realistic content - Adjust grid layout dimensions for better responsiveness - Simplify category buttons in the UI - Remove unused maxresdefault.jpg cover image
This commit is contained in:
554
js/script.js
554
js/script.js
@@ -37,7 +37,7 @@ let videos = [
|
||||
"id": 4,
|
||||
"title": "【Silent Witch沈默魔女的秘密】OST 主題曲「沈黙の魔女」bgm｜Kitkit Lu COVER",
|
||||
"channel": "KitKit Lu",
|
||||
"views": "1,856,164",
|
||||
"views": "1,856,264",
|
||||
"uploadDate": "5 months ago",
|
||||
"duration": "2:39",
|
||||
"thumbnail": "img/cover/music-04.jpg",
|
||||
@@ -90,191 +90,411 @@ let videos = [
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"title": "React vs Vue vs Angular",
|
||||
"channel": "前端开发",
|
||||
"views": "1,876,543",
|
||||
"uploadDate": "3天前",
|
||||
"duration": "19:45",
|
||||
"thumbnail": "https://picsum.photos/id/9/640/360",
|
||||
"category": "live",
|
||||
"type": "live"
|
||||
"title": "ヨルシカ - 春泥棒（OFFICIAL VIDEO）",
|
||||
"channel": "ヨルシカ / n-buna Official",
|
||||
"views": "123,456,789",
|
||||
"uploadDate": "5 years ago",
|
||||
"duration": "4:17",
|
||||
"thumbnail": "img/cover/music-09.jpg",
|
||||
"category": "music",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"title": "机器学习入门到精通",
|
||||
"channel": "AI 研究",
|
||||
"views": "2,345,678",
|
||||
"uploadDate": "5天前",
|
||||
"duration": "35:22",
|
||||
"thumbnail": "https://picsum.photos/id/10/640/360",
|
||||
"category": "AI",
|
||||
"title": "YOASOBI「アイドル」Official Music Video",
|
||||
"channel": "YOASOBI Official",
|
||||
"views": "456,789,123",
|
||||
"uploadDate": "2 years ago",
|
||||
"duration": "3:33",
|
||||
"thumbnail": "img/cover/music-10.jpg",
|
||||
"category": "music",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"title": "编程技巧分享",
|
||||
"channel": "编程大师",
|
||||
"views": "456,789",
|
||||
"uploadDate": "1天前",
|
||||
"duration": "01:23",
|
||||
"thumbnail": "https://picsum.photos/id/11/360/640",
|
||||
"category": "编程",
|
||||
"type": "short"
|
||||
"title": "花譜 - 不可解",
|
||||
"channel": "花譜 -KAF-",
|
||||
"views": "12,345,678",
|
||||
"uploadDate": "3 years ago",
|
||||
"duration": "4:05",
|
||||
"thumbnail": "img/cover/music-11.jpg",
|
||||
"category": "music",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"title": "JavaScript 小技巧",
|
||||
"channel": "前端开发",
|
||||
"views": "789,012",
|
||||
"uploadDate": "2天前",
|
||||
"duration": "00:58",
|
||||
"thumbnail": "https://picsum.photos/id/12/360/640",
|
||||
"category": "编程",
|
||||
"type": "short"
|
||||
"title": "ZUTOMAYO - STUDY ME",
|
||||
"channel": "ZUTOMAYO",
|
||||
"views": "23,456,789",
|
||||
"uploadDate": "1 year ago",
|
||||
"duration": "3:45",
|
||||
"thumbnail": "img/cover/music-12.jpg",
|
||||
"category": "music",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
"title": "Python 一行代码",
|
||||
"channel": "数据科学",
|
||||
"views": "567,890",
|
||||
"uploadDate": "3天前",
|
||||
"duration": "01:15",
|
||||
"thumbnail": "https://picsum.photos/id/13/360/640",
|
||||
"category": "编程",
|
||||
"type": "short"
|
||||
"title": "Eve - 廻廻奇譚",
|
||||
"channel": "Eve",
|
||||
"views": "89,123,456",
|
||||
"uploadDate": "4 years ago",
|
||||
"duration": "3:55",
|
||||
"thumbnail": "img/cover/music-13.jpg",
|
||||
"category": "music",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
"title": "前端开发日常",
|
||||
"channel": "前端开发",
|
||||
"views": "987,654",
|
||||
"uploadDate": "1天前",
|
||||
"duration": "01:32",
|
||||
"thumbnail": "https://picsum.photos/id/14/360/640",
|
||||
"category": "编程",
|
||||
"type": "short"
|
||||
"title": "ClariS - コネクト",
|
||||
"channel": "ClariS Official",
|
||||
"views": "45,678,901",
|
||||
"uploadDate": "10 years ago",
|
||||
"duration": "4:30",
|
||||
"thumbnail": "img/cover/music-14.jpg",
|
||||
"category": "music",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"title": "AI 生成艺术",
|
||||
"channel": "AI 研究",
|
||||
"views": "1,234,567",
|
||||
"uploadDate": "2天前",
|
||||
"duration": "01:45",
|
||||
"thumbnail": "https://picsum.photos/id/15/360/640",
|
||||
"category": "AI",
|
||||
"type": "short"
|
||||
"title": "米津玄師 Kenshi Yonezu - Lemon",
|
||||
"channel": "Kenshi Yonezu 米津玄師",
|
||||
"views": "96,539,145",
|
||||
"uploadDate": "7 years ago",
|
||||
"duration": "4:35",
|
||||
"thumbnail": "img/cover/music-15.jpg",
|
||||
"category": "music",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 16,
|
||||
"title": "数据可视化技巧",
|
||||
"channel": "数据科学",
|
||||
"views": "654,321",
|
||||
"uploadDate": "4天前",
|
||||
"duration": "01:05",
|
||||
"thumbnail": "https://picsum.photos/id/16/360/640",
|
||||
"category": "编程",
|
||||
"type": "short"
|
||||
"title": "【初音ミク】 夜明けと蛍 【オリジナル】",
|
||||
"channel": "ヨルシカ / n-buna Official",
|
||||
"views": "27,749,534",
|
||||
"uploadDate": "8 years ago",
|
||||
"duration": "5:10",
|
||||
"thumbnail": "img/cover/music-16.jpg",
|
||||
"category": "music",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 17,
|
||||
"title": "编程面试题",
|
||||
"channel": "编程大师",
|
||||
"views": "876,543",
|
||||
"uploadDate": "3天前",
|
||||
"duration": "01:20",
|
||||
"thumbnail": "https://picsum.photos/id/17/360/640",
|
||||
"category": "编程",
|
||||
"type": "short"
|
||||
"title": "Empty old City - Buffer",
|
||||
"channel": "Empty old city",
|
||||
"views": "838,946",
|
||||
"uploadDate": "1 year ago",
|
||||
"duration": "3:18",
|
||||
"thumbnail": "img/cover/music-17.jpg",
|
||||
"category": "music",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 18,
|
||||
"title": "Web 设计趋势",
|
||||
"channel": "前端开发",
|
||||
"views": "765,432",
|
||||
"uploadDate": "5天前",
|
||||
"duration": "01:10",
|
||||
"thumbnail": "https://picsum.photos/id/18/360/640",
|
||||
"category": "设计",
|
||||
"type": "short"
|
||||
"title": "I built Git for Minecraft for a hackathon and won",
|
||||
"channel": "MathRayyan",
|
||||
"views": "288,346",
|
||||
"uploadDate": "12 days ago",
|
||||
"duration": "5:13",
|
||||
"thumbnail": "img/cover/game-18.jpg",
|
||||
"category": "game",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 19,
|
||||
"title": "机器学习模型训练",
|
||||
"channel": "AI 研究",
|
||||
"views": "1,098,765",
|
||||
"uploadDate": "2天前",
|
||||
"duration": "01:35",
|
||||
"thumbnail": "https://picsum.photos/id/19/360/640",
|
||||
"category": "AI",
|
||||
"type": "short"
|
||||
"title": "怎麼讓遊戲越來越真？PBR貼圖是怎麼做到的？",
|
||||
"channel": "孫拓海Taku",
|
||||
"views": "25,364",
|
||||
"uploadDate": "3 weeks ago",
|
||||
"duration": "13:14",
|
||||
"thumbnail": "img/cover/game-19.jpg",
|
||||
"category": "game",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 20,
|
||||
"title": "Python 库推荐",
|
||||
"channel": "数据科学",
|
||||
"views": "543,210",
|
||||
"uploadDate": "1天前",
|
||||
"duration": "01:08",
|
||||
"thumbnail": "https://picsum.photos/id/20/360/640",
|
||||
"category": "编程",
|
||||
"type": "short"
|
||||
"title": "「空あくあ!」當さくな說出這句台詞時 全場都淚崩了....【結城さくな】【Vtuber中文/翻譯/精華】",
|
||||
"channel": "Dar烤肉!",
|
||||
"views": "116,498",
|
||||
"uploadDate": "7 days ago",
|
||||
"duration": "8:35",
|
||||
"thumbnail": "img/cover/game-20.jpg",
|
||||
"category": "game",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 21,
|
||||
"title": "2024年前端开发趋势",
|
||||
"channel": "前端开发",
|
||||
"views": "1,345,678",
|
||||
"uploadDate": "1周前",
|
||||
"duration": "18:32",
|
||||
"thumbnail": "https://picsum.photos/id/21/640/360",
|
||||
"category": "编程",
|
||||
"title": "「明日方舟：终末地性能分析：二游画质巅峰？榨干手机！",
|
||||
"channel": "极客湾Geekerwan",
|
||||
"views": "51,649",
|
||||
"uploadDate": "10 days ago",
|
||||
"duration": "22:13",
|
||||
"thumbnail": "img/cover/tech-21.jpg",
|
||||
"category": "tech",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 22,
|
||||
"title": "数据结构与算法基础",
|
||||
"channel": "编程大师",
|
||||
"views": "987,654",
|
||||
"uploadDate": "3天前",
|
||||
"duration": "25:45",
|
||||
"thumbnail": "https://picsum.photos/id/22/640/360",
|
||||
"category": "编程",
|
||||
"title": "What GPU is the BEST for Linux Gaming?",
|
||||
"channel": "Linus Tech Tips",
|
||||
"views": "96,751",
|
||||
"uploadDate": "7 days ago",
|
||||
"duration": "10:55",
|
||||
"thumbnail": "img/cover/tech-22.jpg",
|
||||
"category": "tech",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 23,
|
||||
"title": "人工智能的未来发展",
|
||||
"channel": "AI 研究",
|
||||
"views": "2,123,456",
|
||||
"uploadDate": "5天前",
|
||||
"duration": "30:15",
|
||||
"thumbnail": "https://picsum.photos/id/23/640/360",
|
||||
"category": "AI",
|
||||
"title": "How Hard Is It to Build Your First PC?",
|
||||
"channel": "PLACITECH",
|
||||
"views": "4,351",
|
||||
"uploadDate": "2 months ago",
|
||||
"duration": "12:47",
|
||||
"thumbnail": "img/cover/tech-23.jpg",
|
||||
"category": "tech",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 24,
|
||||
"title": "Python Web 开发实战",
|
||||
"channel": "数据科学",
|
||||
"views": "765,432",
|
||||
"uploadDate": "2周前",
|
||||
"duration": "22:33",
|
||||
"thumbnail": "https://picsum.photos/id/24/640/360",
|
||||
"category": "编程",
|
||||
"title": "回顾我们最中意的 2025 年产品发布 - 谷歌开发者新闻（年终特辑）",
|
||||
"channel": "Google for Developers",
|
||||
"views": "3,475",
|
||||
"uploadDate": "1 month ago",
|
||||
"duration": "6:39",
|
||||
"thumbnail": "img/cover/tech-24.jpg",
|
||||
"category": "tech",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 25,
|
||||
"title": "CSS 高级技巧",
|
||||
"channel": "前端开发",
|
||||
"views": "876,543",
|
||||
"uploadDate": "1天前",
|
||||
"duration": "15:22",
|
||||
"thumbnail": "https://picsum.photos/id/25/640/360",
|
||||
"category": "编程",
|
||||
"title": "Commodore 128 Alternate Universe",
|
||||
"channel": "The 8-Bit Guy",
|
||||
"views": "17,498",
|
||||
"uploadDate": "4 months ago",
|
||||
"duration": "8:35",
|
||||
"thumbnail": "img/cover/tech-25.jpg",
|
||||
"category": "tech",
|
||||
"type": "video"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 25,
|
||||
"title": "Commodore 128 Alternate Universe",
|
||||
"channel": "The 8-Bit Guy",
|
||||
"views": "17,498",
|
||||
"uploadDate": "4 months ago",
|
||||
"duration": "8:35",
|
||||
"thumbnail": "img/cover/tech-25.jpg",
|
||||
"category": "tech",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 25,
|
||||
"title": "Commodore 128 Alternate Universe",
|
||||
"channel": "The 8-Bit Guy",
|
||||
"views": "17,498",
|
||||
"uploadDate": "4 months ago",
|
||||
"duration": "8:35",
|
||||
"thumbnail": "img/cover/tech-25.jpg",
|
||||
"category": "tech",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 26,
|
||||
"title": "\"The Roller Coaster\" - Behind the Scenes - Time Lapse & Commentary",
|
||||
"channel": "AlanBeckerTutorials",
|
||||
"views": "193,762",
|
||||
"uploadDate": "7 years ago",
|
||||
"duration": "14:52",
|
||||
"thumbnail": "img/cover/art-26.jpg",
|
||||
"category": "art",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 27,
|
||||
"title": "Animation vs. Game Design",
|
||||
"channel": "Alan Backer",
|
||||
"views": "694,264",
|
||||
"uploadDate": "2 months ago",
|
||||
"duration": "3:12",
|
||||
"thumbnail": "img/cover/art-27.jpg",
|
||||
"category": "art",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 28,
|
||||
"title": "The Far Lands - Animation vs. Minecraft Shorts Ep 38",
|
||||
"channel": "Alan Backer",
|
||||
"views": "975,192",
|
||||
"uploadDate": "1 month ago",
|
||||
"duration": "9:10",
|
||||
"thumbnail": "img/cover/art-28.jpg",
|
||||
"category": "art",
|
||||
"type": "video"
|
||||
},
|
||||
{
|
||||
"id": 29,
|
||||
"title": "【Official MV】ray 超かぐや姫！Version／かぐや (cv.夏吉ゆうこ) ＆ 月見ヤチヨ (cv.早見沙織) from #超かぐや姫 ！【新作アニメーション】",
|
||||
"channel": "",
|
||||
"views": "78,192",
|
||||
"uploadDate": "5 days ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/music-29.jpg",
|
||||
"category": "music",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 30,
|
||||
"title": "ドッペルゲンガー feat.初音ミク#vocaloid #初音ミク",
|
||||
"channel": "",
|
||||
"views": "2,359",
|
||||
"uploadDate": "3 days ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/music-30.jpg",
|
||||
"category": "music",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 31,
|
||||
"title": "Melt CPK! Remix — English Subtitled Version",
|
||||
"channel": "",
|
||||
"views": "2,264",
|
||||
"uploadDate": "3 days ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/music-31.jpg",
|
||||
"category": "music",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 32,
|
||||
"title": "【Suite History】花譜×#KTちゃん「ギミギミ逃避行feat. #KTちゃん(Prod. peko)」 #花譜 #KTちゃん #組曲 #shorts",
|
||||
"channel": "",
|
||||
"views": "5,430",
|
||||
"uploadDate": "2 days ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/music-32.jpg",
|
||||
"category": "music",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 33,
|
||||
"title": "ヨルシカ - プレイシック #ヨルシカ #プレイシック #二人称 #yorushika #playsick #secondperson",
|
||||
"channel": "",
|
||||
"views": "39,254",
|
||||
"uploadDate": "10 days ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/music-33.jpg",
|
||||
"category": "music",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 34,
|
||||
"title": "#ヨルシカ #live #前世 #yorushika",
|
||||
"channel": "",
|
||||
"views": "36,181",
|
||||
"uploadDate": "1 month ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/music-34.jpg",
|
||||
"category": "music",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 35,
|
||||
"title": "【歌ってみた】蜜月アン・ドゥ・トロワ covered by ヰ世界情緒 #shorts",
|
||||
"channel": "",
|
||||
"views": "2,163",
|
||||
"uploadDate": "6 days ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/music-35.jpg",
|
||||
"category": "music",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 36,
|
||||
"title": "Thank you 2025🩵Have a wonderful new year! #YOASOBI_2025",
|
||||
"channel": "",
|
||||
"views": "36,165",
|
||||
"uploadDate": "20 days ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/music-36.jpg",
|
||||
"category": "music",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 37,
|
||||
"title": "初めてラブソングを書きました。新曲「ハートマーク feat.川谷絵音」#礼衣 #ハートマーク",
|
||||
"channel": "",
|
||||
"views": "2,609",
|
||||
"uploadDate": "3 days ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/music-37.jpg",
|
||||
"category": "music",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 38,
|
||||
"title": "Would you play this at the school talent show for $500? #osu #osugame",
|
||||
"channel": "",
|
||||
"views": "133,658",
|
||||
"uploadDate": "2 months ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/game-38.jpg",
|
||||
"category": "game",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 39,
|
||||
"title": "May your holidays be filled with great vibes, full combos, and lots of epic tracks! 🎵",
|
||||
"channel": "",
|
||||
"views": "1,658",
|
||||
"uploadDate": "1 months ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/game-39.jpg",
|
||||
"category": "game",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 40,
|
||||
"title": "PANDORA PARADOXXX RE:MASTER alternative spin method #maimai #maimaiでらっくす #maimai_dx",
|
||||
"channel": "",
|
||||
"views": "25,365",
|
||||
"uploadDate": "12 days ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/game-40.jpg",
|
||||
"category": "game",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 41,
|
||||
"title": "Arch Linux VS Debian in 1 Min #linux #arch #debian",
|
||||
"channel": "",
|
||||
"views": "3,565",
|
||||
"uploadDate": "11 days ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/tech-41.jpg",
|
||||
"category": "tech",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 42,
|
||||
"title": "#linux #homelab #opensource #tech #debian",
|
||||
"channel": "",
|
||||
"views": "7,925",
|
||||
"uploadDate": "10 days ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/tech-42.jpg",
|
||||
"category": "tech",
|
||||
"type": "short"
|
||||
},
|
||||
{
|
||||
"id": 43,
|
||||
"title": "The one key keyboard #tech",
|
||||
"channel": "",
|
||||
"views": "4,571",
|
||||
"uploadDate": "1 month ago",
|
||||
"duration": "",
|
||||
"thumbnail": "img/cover/tech-43.jpg",
|
||||
"category": "tech",
|
||||
"type": "short"
|
||||
},
|
||||
];
|
||||
let currentCategory = 'All';
|
||||
|
||||
@@ -288,31 +508,18 @@ const shortsGrid = document.querySelector('.shorts-grid');
|
||||
const categoryBtns = document.querySelectorAll('.category-btn');
|
||||
const subscriptionsList = document.querySelector('.subscriptions-list');
|
||||
|
||||
// 初始化
|
||||
async function init() {
|
||||
// 加载视频数据
|
||||
await loadVideos();
|
||||
|
||||
// 渲染视频
|
||||
renderVideos();
|
||||
|
||||
// 渲染 Shorts
|
||||
renderShorts();
|
||||
|
||||
// 渲染订阅内容
|
||||
renderSubscriptions();
|
||||
|
||||
// 绑定事件
|
||||
bindEvents();
|
||||
}
|
||||
|
||||
// 加载视频数据
|
||||
async function loadVideos() {
|
||||
// 数据已在全局变量中定义，直接返回
|
||||
return Promise.resolve();
|
||||
return Promise.resolve(); // Already defined in global scope
|
||||
}
|
||||
|
||||
// 渲染视频
|
||||
function renderVideos() {
|
||||
const filteredVideos = filterVideosByCategory(currentCategory);
|
||||
|
||||
@@ -326,7 +533,6 @@ function renderVideos() {
|
||||
});
|
||||
}
|
||||
|
||||
// 渲染 Shorts
|
||||
function renderShorts() {
|
||||
const filteredVideos = filterVideosByCategory(currentCategory);
|
||||
|
||||
@@ -340,23 +546,18 @@ function renderShorts() {
|
||||
});
|
||||
}
|
||||
|
||||
// 根据分类过滤视频
|
||||
function filterVideosByCategory(category) {
|
||||
if (category === '全部') {
|
||||
if (category === 'All') {
|
||||
return videos;
|
||||
}
|
||||
|
||||
// 简单的分类映射
|
||||
const categoryMap = {
|
||||
'Music': ['music'],
|
||||
'Game': ['game'],
|
||||
'Live': ['live'],
|
||||
'Album': ['album'],
|
||||
'Animation': ['animation'],
|
||||
'Technology': ['tech'],
|
||||
'Art': ['art'],
|
||||
'Recently': videos.filter(v => v.uploadDate.includes('days ago')),
|
||||
'Watched': [],
|
||||
'New': videos
|
||||
'Watched': []
|
||||
};
|
||||
|
||||
if (categoryMap[category]) {
|
||||
@@ -370,7 +571,6 @@ function filterVideosByCategory(category) {
|
||||
return videos;
|
||||
}
|
||||
|
||||
// 创建视频卡片
|
||||
function createVideoCard(video) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'video-card';
|
||||
@@ -436,7 +636,6 @@ function createVideoCard(video) {
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 绑定菜单事件
|
||||
const menuToggle = card.querySelector('.menu-toggle');
|
||||
const menuDropdown = card.querySelector('.menu-dropdown');
|
||||
|
||||
@@ -445,15 +644,13 @@ function createVideoCard(video) {
|
||||
menuDropdown.classList.toggle('show');
|
||||
});
|
||||
|
||||
// 点击其他地方关闭菜单
|
||||
document.addEventListener('click', () => {
|
||||
document.addEventListener('click', () => { // Close the menu when clicking outside
|
||||
menuDropdown.classList.remove('show');
|
||||
});
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// 创建 Shorts 卡片
|
||||
function createShortsCard(video) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'shorts-card';
|
||||
@@ -474,8 +671,7 @@ function createShortsCard(video) {
|
||||
return card;
|
||||
}
|
||||
|
||||
// 渲染订阅内容
|
||||
function renderSubscriptions() {
|
||||
function renderSubscriptions() { // Render the subscriptions list
|
||||
const subscriptions = [
|
||||
{ name: '花譜 -KAF-', avatar: 'img/avatar/kaf.png' },
|
||||
{ name: 'ryo (supercell)', avatar: 'img/avatar/ryo.jpg' },
|
||||
@@ -504,9 +700,7 @@ function renderSubscriptions() {
|
||||
subscriptionsList.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
// 执行搜索
|
||||
function performSearch(query) {
|
||||
function performSearch(query) { // Perform the search and render the results
|
||||
if (!query.trim()) {
|
||||
searchResults.style.display = 'none';
|
||||
return;
|
||||
@@ -520,7 +714,7 @@ function performSearch(query) {
|
||||
renderSearchResults(results, query);
|
||||
}
|
||||
|
||||
// 渲染搜索结果
|
||||
// Render the search results
|
||||
function renderSearchResults(results, query) {
|
||||
searchResultsContent.innerHTML = '';
|
||||
|
||||
@@ -534,7 +728,7 @@ function renderSearchResults(results, query) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'search-result-item';
|
||||
|
||||
// 高亮关键词
|
||||
// Highlight the search keywords in the title and channel name
|
||||
const highlightedTitle = video.title.replace(new RegExp(`(${query})`, 'gi'), '<span class="highlight">$1</span>');
|
||||
const highlightedChannel = video.channel.replace(new RegExp(`(${query})`, 'gi'), '<span class="highlight">$1</span>');
|
||||
|
||||
@@ -555,9 +749,9 @@ function renderSearchResults(results, query) {
|
||||
searchResults.style.display = 'block';
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
function bindEvents() {
|
||||
// 搜索事件
|
||||
// Bind events to the DOM elements
|
||||
function bindEvents() { // Bind events to the DOM elements
|
||||
// Search event
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
performSearch(e.target.value);
|
||||
});
|
||||
@@ -566,38 +760,40 @@ function bindEvents() {
|
||||
performSearch(searchInput.value);
|
||||
});
|
||||
|
||||
// 点击其他地方关闭搜索结果
|
||||
// Close the search results when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.search-container') && !e.target.closest('.search-results')) {
|
||||
searchResults.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// 分类按钮事件
|
||||
// Category buttons event
|
||||
categoryBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
// 移除所有活动状态
|
||||
// Remove all active states
|
||||
categoryBtns.forEach(b => b.classList.remove('active'));
|
||||
// 添加当前活动状态
|
||||
// Add current active state
|
||||
btn.classList.add('active');
|
||||
// 更新当前分类
|
||||
// Update current category
|
||||
currentCategory = btn.textContent;
|
||||
// 重新渲染视频
|
||||
// Re-render videos and shorts
|
||||
renderVideos();
|
||||
renderShorts();
|
||||
});
|
||||
});
|
||||
|
||||
// 侧边栏导航按钮事件
|
||||
// Sidebar navigation buttons event
|
||||
const navBtns = document.querySelectorAll('.nav-btn');
|
||||
navBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
// Remove all active states
|
||||
navBtns.forEach(b => b.classList.remove('active'));
|
||||
// Add current active state
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// 订阅板块展开/收起
|
||||
// Subscription section expand/collapse event
|
||||
const subscriptionTitle = document.querySelector('.nav-section-title');
|
||||
subscriptionTitle.addEventListener('click', () => {
|
||||
const subscriptionsList = document.querySelector('.subscriptions-list');
|
||||
@@ -613,5 +809,5 @@ function bindEvents() {
|
||||
});
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
// Page load event: initialize the application
|
||||
window.addEventListener('DOMContentLoaded', init);
|
||||
Reference in New Issue
Block a user