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

refactor: replace followed youtubers

Browse Source 
feat:       switch site style to dark mode
This commit is contained in:
NanamiAdmin
2026-01-30 16:49:32 +08:00
parent 21cae2336c
commit 12878d6e1c
14 changed files with 401 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
js/script.js
View File

@@ -1,6 +1,282 @@
// 全局变量
let videos = [];
let currentCategory = '全部';
let videos = [
{
"id": 1,
"title": "透明なパレット (self cover)",
"channel": "Aqu3ra",
"views": "576,197",
"uploadDate": "1 months ago",
"duration": "3:03",
"thumbnail": "img/cover/music-01.jpg",
"category": "music",
"type": "video"
},
{
"id": 2,
"title": "【歌ってみた】Duvet / covered by ヰ世界情緒",
"channel": "ヰ世界情緒 -Isekaijoucho-",
"views": "721,627",
"uploadDate": "5 days ago",
"duration": "3:32",
"thumbnail": "img/cover/music-02.jpg",
"category": "music",
"type": "video"
},
{
"id": 3,
"title": "ヨルシカ　『 晴る 』　－文化祭2025－",
"channel": "countben",
"views": "142,561",
"uploadDate": "2 months ago",
"duration": "4:46",
"thumbnail": "img/cover/music-03.jpg",
"category": "music",
"type": "video"
},
{
"id": 4,
"title": "【Silent Witch沈默魔女的秘密】OST 主題曲「沈黙の魔女」bgm｜Kitkit Lu COVER",
"channel": "KitKit Lu",
"views": "1,856,164",
"uploadDate": "5 months ago",
"duration": "2:39",
"thumbnail": "img/cover/music-04.jpg",
"category": "music",
"type": "video"
},
{
"id": 5,
"title": "I Can't Wait feat. GUMI",
"channel": "d0tc0mmie",
"views": "315,293",
"uploadDate": "1 month ago",
"duration": "1:35",
"thumbnail": "img/cover/music-05.jpg",
"category": "music",
"type": "video"
},
{
"id": 6,
"title": "MiSiDE: ZERO Update – Full Gameplay + Ending (Showcase)",
"channel": "RUSH PLAY",
"views": "900,156",
"uploadDate": "4 weeks ago",
"duration": "24:39",
"thumbnail": "img/cover/game-06.jpg",
"category": "game",
"type": "video"
},
{
"id": 7,
"title": "Minecraftの効果音でサイエンス",
"channel": "gmailアカウント",
"views": "651,192",
"uploadDate": "11 months ago",
"duration": "1:05",
"thumbnail": "img/cover/game-07.jpg",
"category": "game",
"type": "video"
},
{
"id": 8,
"title": "osu! NEEDS to Take Notes... (00PARTS World's 1st Clear)",
"channel": "bmc",
"views": "892,163",
"uploadDate": "1 month ago",
"duration": "8:21",
"thumbnail": "img/cover/game-08.jpg",
"category": "game",
"type": "video"
},
{
"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"
},
{
"id": 10,
"title": "机器学习入门到精通",
"channel": "AI 研究",
"views": "2,345,678",
"uploadDate": "5天前",
"duration": "35:22",
"thumbnail": "https://picsum.photos/id/10/640/360",
"category": "AI",
"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"
},
{
"id": 12,
"title": "JavaScript 小技巧",
"channel": "前端开发",
"views": "789,012",
"uploadDate": "2天前",
"duration": "00:58",
"thumbnail": "https://picsum.photos/id/12/360/640",
"category": "编程",
"type": "short"
},
{
"id": 13,
"title": "Python 一行代码",
"channel": "数据科学",
"views": "567,890",
"uploadDate": "3天前",
"duration": "01:15",
"thumbnail": "https://picsum.photos/id/13/360/640",
"category": "编程",
"type": "short"
},
{
"id": 14,
"title": "前端开发日常",
"channel": "前端开发",
"views": "987,654",
"uploadDate": "1天前",
"duration": "01:32",
"thumbnail": "https://picsum.photos/id/14/360/640",
"category": "编程",
"type": "short"
},
{
"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"
},
{
"id": 16,
"title": "数据可视化技巧",
"channel": "数据科学",
"views": "654,321",
"uploadDate": "4天前",
"duration": "01:05",
"thumbnail": "https://picsum.photos/id/16/360/640",
"category": "编程",
"type": "short"
},
{
"id": 17,
"title": "编程面试题",
"channel": "编程大师",
"views": "876,543",
"uploadDate": "3天前",
"duration": "01:20",
"thumbnail": "https://picsum.photos/id/17/360/640",
"category": "编程",
"type": "short"
},
{
"id": 18,
"title": "Web 设计趋势",
"channel": "前端开发",
"views": "765,432",
"uploadDate": "5天前",
"duration": "01:10",
"thumbnail": "https://picsum.photos/id/18/360/640",
"category": "设计",
"type": "short"
},
{
"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"
},
{
"id": 20,
"title": "Python 库推荐",
"channel": "数据科学",
"views": "543,210",
"uploadDate": "1天前",
"duration": "01:08",
"thumbnail": "https://picsum.photos/id/20/360/640",
"category": "编程",
"type": "short"
},
{
"id": 21,
"title": "2024年前端开发趋势",
"channel": "前端开发",
"views": "1,345,678",
"uploadDate": "1周前",
"duration": "18:32",
"thumbnail": "https://picsum.photos/id/21/640/360",
"category": "编程",
"type": "video"
},
{
"id": 22,
"title": "数据结构与算法基础",
"channel": "编程大师",
"views": "987,654",
"uploadDate": "3天前",
"duration": "25:45",
"thumbnail": "https://picsum.photos/id/22/640/360",
"category": "编程",
"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",
"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": "编程",
"type": "video"
},
{
"id": 25,
"title": "CSS 高级技巧",
"channel": "前端开发",
"views": "876,543",
"uploadDate": "1天前",
"duration": "15:22",
"thumbnail": "https://picsum.photos/id/25/640/360",
"category": "编程",
"type": "video"
}
];
let currentCategory = 'All';
// DOM 元素
const searchInput = document.querySelector('.search-input');
@@ -32,14 +308,8 @@ async function init() {
// 加载视频数据
async function loadVideos() {
try {
const response = await fetch('src/media.json');
videos = await response.json();
} catch (error) {
console.error('加载视频数据失败:', error);
// 使用默认数据
videos = [];
}
// 数据已在全局变量中定义，直接返回
return Promise.resolve();
}
// 渲染视频
@@ -78,15 +348,15 @@ function filterVideosByCategory(category) {
// 简单的分类映射
const categoryMap = {
'音乐': ['音乐'],
'游戏': ['游戏'],
'直播': ['直播'],
'合辑': ['合辑'],
'动画': ['动画'],
'手工艺品': ['手工艺品'],
'最近上传': videos.filter(v => v.uploadDate.includes('天前')),
'已观看': [],
'发现新视频': videos
'Music': ['music'],
'Game': ['game'],
'Live': ['live'],
'Album': ['album'],
'Animation': ['animation'],
'Art': ['art'],
'Recently': videos.filter(v => v.uploadDate.includes('days ago')),
'Watched': [],
'New': videos
};
if (categoryMap[category]) {
@@ -119,7 +389,7 @@ function createVideoCard(video) {
<div class="video-meta">
<div class="video-channel">${video.channel}</div>
<div class="video-stats">
<span>${video.views} 次观看</span>
<span>${video.views} views</span>
<span>${video.uploadDate}</span>
</div>
</div>
@@ -131,35 +401,35 @@ function createVideoCard(video) {
<div class="menu-dropdown">
<div class="menu-item">
<i class="fas fa-plus"></i>
<span>添加到待播列表</span>
<span>Add to Watch Later</span>
</div>
<div class="menu-item">
<i class="fas fa-clock"></i>
<span>保存到"稍后再看"</span>
<span>Save to "Watch Later"</span>
</div>
<div class="menu-item">
<i class="fas fa-list"></i>
<span>保存到播放列表</span>
<span>Save to Playlist</span>
</div>
<div class="menu-item">
<i class="fas fa-download"></i>
<span>下载</span>
<span>Download</span>
</div>
<div class="menu-item">
<i class="fas fa-share"></i>
<span>分享</span>
<span>Share</span>
</div>
<div class="menu-item">
<i class="fas fa-thumbs-down"></i>
<span>不感兴趣</span>
<span>Not Interested</span>
</div>
<div class="menu-item">
<i class="fas fa-ban"></i>
<span>不推荐此频道</span>
<span>Report Channel</span>
</div>
<div class="menu-item">
<i class="fas fa-flag"></i>
<span>举报</span>
<span>Report Video</span>
</div>
</div>
</div>
@@ -207,11 +477,15 @@ function createShortsCard(video) {
// 渲染订阅内容
function renderSubscriptions() {
const subscriptions = [
{ name: '编程大师', avatar: 'https://picsum.photos/id/100/48/48' },
{ name: '前端开发', avatar: 'https://picsum.photos/id/101/48/48' },
{ name: '数据科学', avatar: 'https://picsum.photos/id/102/48/48' },
{ name: 'AI 研究', avatar: 'https://picsum.photos/id/103/48/48' },
{ name: '设计达人', avatar: 'https://picsum.photos/id/104/48/48' }
{ name: '花譜 -KAF-', avatar: 'img/avatar/kaf.png' },
{ name: 'ryo (supercell)', avatar: 'img/avatar/ryo.jpg' },
{ name: 'ヰ世界情緒', avatar: 'img/avatar/isekaijoucho.jpg' },
{ name: 'MyGo!!!!!', avatar: 'img/avatar/mygo.png' },
{ name: 'ZUTOMAYO', avatar: 'img/avatar/ztmy.jpg' },
{ name: 'Aqu3ra', avatar: 'img/avatar/aqu3ra.png' },
{ name: '『超かぐや姫 ! 』公式', avatar: 'img/avatar/cpk.png' },
{ name: '礼衣 / Rei', avatar: 'img/avatar/rei.jpg' },
{ name: 'tayori', avatar: 'img/avatar/tayori.jpg' }
];
subscriptionsList.innerHTML = '';
@@ -251,7 +525,7 @@ function renderSearchResults(results, query) {
searchResultsContent.innerHTML = '';
if (results.length === 0) {
searchResultsContent.innerHTML = '<p>没有找到相关视频</p>';
searchResultsContent.innerHTML = '<p>No videos found related to your search.</p>';
searchResults.style.display = 'block';
return;
}
@@ -271,7 +545,7 @@ function renderSearchResults(results, query) {
<div class="search-result-details">
<h4 class="search-result-title">${highlightedTitle}</h4>
<div class="search-result-channel">${highlightedChannel}</div>
<div class="search-result-stats">${video.views} 次观看 · ${video.uploadDate}</div>
<div class="search-result-stats">${video.views} views · ${video.uploadDate}</div>
</div>
`;