现代化、可扩展的视频搜索与播放前端。

简介 · 特性 · 快速开始 · 导入 · 环境变量 · 结构 · 技术栈 · 贡献 · 许可证

点击下面按钮，一键部署到 Vercel：

Vercel手动详细部署方法

• Fork 或克隆本仓库到您的 GitHub/GitLab 账户
• 登录 Vercel，点击 "New Project"
• 导入您的仓库
• 在 "Build & Output Settings" 中配置：
  • Install Command：pnpm install
  • Build Command：pnpm build
  • Output Directory：dist
• ⚠️ 重要：在 "Settings" > "Environment Variables" 中添加 VITE_PROXY_URL，值为 /api/proxy?url=
• 点击 "Deploy"

保持你的 Fork 与上游（Ouonnki/OuonnkiTV）最新有两种方式：

工作流：/.github/workflows/sync.yml

使用建议：

1. 自定义改动放在 custom/* 或 feature 分支
2. 需要立即同步：进入你 Fork 的 Actions → 选择该 Workflow → Run workflow
3. 想改成“安全合并”模式：注释强制覆盖步骤，启用文件中已提供的合并示例（git merge）

修改上游（多级 Fork 场景）：编辑文件中的 git remote add upstream ... 将地址替换为你的上游源。

1. 打开你的 Fork 仓库主页
2. 若看到 “Sync fork” / “Fetch upstream” 按钮：点击 → 选择 “Update branch”
3. 若按钮显示 “This branch is up to date” 则无需操作

（若按钮未显示，可使用 CLI 手动同步）

CLI 手动同步：

git remote add upstream https://github.com/Ouonnki/OuonnkiTV.git # 只需首次
git fetch upstream
git checkout main
# 合并方式（保留分叉提交）
git merge upstream/main
# 或使用 rebase（线性历史）
# git rebase upstream/main
git push origin main

OuonnkiTV 是一个由 React + Vite + TypeScript 打造的现代化前端应用，用于聚合搜索与播放网络视频资源，支持跨端播放、搜索与观看历史、以及可配置的视频源管理。项目在 LibreSpark/LibreTV 的基础上进行了重构与增强（模块化、状态管理优化、交互体验提升）。

• Node.js >= 20.0.0
• pnpm >= 9.15.4

# 克隆仓库
git clone https://github.com/Ouonnki/OuonnkiTV.git
cd OuonnkiTV

# 安装依赖
pnpm install

pnpm run dev
# 访问 http://localhost:3000

pnpm run build
pnpm run preview
# 访问 http://localhost:4173

# 1. 复制环境变量模板（可选）
cp .env.docker .env

# 2. 启动服务
docker-compose up -d

# 3. 访问应用
# http://localhost:3000

环境变量配置（可选）： 编辑 .env 文件来自定义配置：

# 代理服务器URL
VITE_PROXY_URL=https://api.codetabs.com/v1/proxy?quest=

# 初始视频源配置
VITE_INITIAL_VIDEO_SOURCES=[{"name":"示例源","url":"https://api.example.com","isEnabled":true}]

# 拉取最新镜像
docker pull ghcr.io/ouonnki/ouonnkitv:latest

# 运行容器
docker run -d -p 3000:80 \
  -e VITE_PROXY_URL=https://api.codetabs.com/v1/proxy?quest= \
  ghcr.io/ouonnki/ouonnkitv:latest

可用镜像标签：

• latest - 最新稳定版
• main - 主分支最新代码
• v1.0.0 - 指定版本

常用命令：

# 查看日志
docker-compose logs -f

# 停止服务
docker-compose down

# 重启服务
docker-compose restart

支持多种方式快速配置多个视频源：

• 支持 JSON 格式文件
• 拖拽或点击选择文件
• 自动验证文件格式

• 直接粘贴 JSON 配置
• 实时语法检查
• 支持多行格式化

• 从远程 URL 获取配置
• 支持 GitHub、Gitee 等代码托管平台
• 自动处理网络请求

基本格式：

[
  {
    "id": "source1",
    "name": "示例视频源",
    "url": "https://api.example.com/search",
    "detailUrl": "https://api.example.com/detail",
    "isEnabled": true
  }
]

字段说明：

• id: 源的唯一标识符（可选，系统会自动生成）
• name: 视频源显示名称（必需）
• url: 搜索API地址（必需）
• detailUrl: 详情API地址（可选，默认使用 url）
• isEnabled: 是否启用该源（可选，默认为 true）

支持格式：

• ✅ 单个对象：{"name":"源名称","url":"API地址"}
• ✅ 对象数组：[{"name":"源1","url":"API1"},{"name":"源2","url":"API2"}]
• ✅ 多行格式化 JSON
• ✅ 紧凑单行 JSON

1. 进入设置页面：点击右上角设置图标
2. 打开导入功能：点击"导入源"按钮
3. 选择导入方式：
   • 📁 文件导入：点击选择 JSON 文件或拖拽文件到页面
   • 📝 文本导入：将 JSON 配置粘贴到文本框中
   • 🌐 URL导入：输入包含 JSON 配置的 URL 地址
4. 确认导入：点击"开始导入"按钮
5. 查看结果：系统会显示导入成功的源数量，并自动关闭导入窗口

导入特性：

• 🔄 自动去重：重复的源会被自动过滤
• ✅ 数据验证：自动检查 JSON 格式和必需字段
• 🚨 错误提示：详细的错误信息帮助排查问题
• 📝 Toast通知：实时反馈导入状态
• 🎯 批量处理：一次可导入多个视频源

部署到 Vercel 时，需要在 Vercel 仪表盘的 Environment Variables 中添加以下变量：

• VITE_PROXY_URL：/api/proxy?url=

本地开发可在项目根目录创建 .env.local 文件，并添加：

VITE_PROXY_URL=https://cors.zme.ink/

您可以通过环境变量预配置视频源，应用启动时会自动加载这些源。

支持 URL 配置： 除了直接填写 JSON 配置内容外，VITE_INITIAL_VIDEO_SOURCES 也支持填写一个包含视频源 JSON 的在线链接（如 GitHub Raw、Gitee、个人服务器等）。 当检测到该环境变量为 URL 时，系统会自动拉取该链接内容作为初始视频源。

示例：

VITE_INITIAL_VIDEO_SOURCES=https://raw.githubusercontent.com/yourname/yourrepo/main/sources.json

该功能适用于需要集中维护、动态更新视频源配置的场景。

1. 在 Vercel 项目设置中找到 "Environment Variables"
2. 添加新变量 VITE_INITIAL_VIDEO_SOURCES
3. 填入您的 JSON 格式视频源配置
4. 重新部署项目

支持的配置格式：

# 单行格式（适合简单配置）
[{"id":"source1","name":"示例源1","url":"https://api.example1.com","isEnabled":true}]

# 多行格式（推荐，更易维护）
[
  {
    "id": "source1",
    "name": "示例源1",
    "url": "https://api.example1.com",
    "isEnabled": true
  },
  {
    "id": "source2",
    "name": "示例源2",
    "url": "https://api.example2.com",
    "detailUrl": "https://detail.example2.com",
    "isEnabled": false
  }
]

字段说明：

• id: 源的唯一标识符（可选，会自动生成）
• name: 源的显示名称（必需）
• url: 源的API地址（必需）
• detailUrl: 详情API地址（可选，默认使用url）
• isEnabled: 是否启用（可选，默认为true）

注意事项：

• 在 Vercel 中可以直接使用多行格式，平台会自动处理
• 确保 JSON 格式正确，字段名必须用双引号
• 本地开发时可参考 .env.example 文件中的示例

.
├─ api/                  本地开发代理配置
├─ public/               静态资源
├─ src/                  源代码
│  ├─ assets/            图像与 SVG
│  ├─ components/        通用组件
│  ├─ config/            全局配置
│  ├─ hooks/             自定义 Hooks
│  ├─ pages/             页面组件
│  ├─ router/            路由配置
│  ├─ services/          API 服务封装
│  ├─ store/             全局状态 (Zustand)
│  ├─ styles/            样式与 TailwindCSS
│  ├─ types/             TypeScript 类型定义
│  ├─ App.tsx            根组件
│  └─ main.tsx           渲染入口
├─ vite.config.ts        Vite 配置
├─ tsconfig.json         TypeScript 配置
└─ package.json          依赖与脚本

• src/config/api.config.ts：后端 API 地址与超时配置
• src/config/analytics.config.ts：统计与日志埋点配置
• api/proxy.ts：本地开发代理规则

欢迎通过提交 Issue 或 Pull Request 贡献代码、文档或想法。

建议流程：

1. Fork 仓库并创建特性分支：feat/your-feature
2. 保持提交简洁、语义化（如 feat: add xxx）
3. 提交 PR 并描述改动动机与效果
4. 关联 Issue（若有）

本项目遵循 Apache License 2.0。

本项目仅作为视频搜索与聚合工具，不存储、上传或分发任何视频内容；所有内容均来自第三方 API 的搜索结果。若发现侵权，请联系原始内容提供方进行处理。

开发者不对使用本项目造成的任何直接或间接后果负责。使用前请确保遵守当地法律法规。

如果本项目对你有帮助，欢迎 ⭐ Star 支持，让更多人看到它。🙌