⚠️ 因默认使用图片代理方式为豆瓣精品CDN，因此Api问题导致部分图片加载异常 可部署后在应用设置中将图片代理改为直链或通过环境变量修改为直链（懒得改默认了，辛苦各位手动改一下）- ✨JoyFlix观影平台是一款基于 MoonTV二次开发完全重构的项目 （NEXT.JS） 的影视播放平台，将MoonTV的底层结构代码进行完全的重构及其优化对UI及其交互逻辑进行完全重构
⚠️ 相对于原版进行了如下功能的添加及其重构（仅列举部分）：- 1️⃣ 新增详细页（使用了服务器在线爬虫，第三方API调用，从后端API搜索获取等三种不同的回退机制）
- 2️⃣ 支持浏览滚动记录（确保进入详细页查看影片不喜欢退出上级页面可以保留滚动位置）
- 3️⃣ 对交互逻辑的全面重构（包括桌面端与移动端，更加人性化的交互逻辑更加符合用户的交互逻辑，提升用户的使用体验），播放页面集数可以按钮或悬停实现查看完整信息，对API配置页实现API有效性测试及其自动排序功能
- 4️⃣ 对观看记录的记录逻辑进行重构
- 5️⃣ 对收藏页面进行重构
- 6️⃣ 对搜索页面实现热门推荐功能（具有快速获取功能，及其每次刷新），对搜索功能实现流式搜索提高响应速度提高用户的使用体验
- 7️⃣ 对加载页面进行响应的优化，减少加载枯燥感
- 8️⃣ 对低端设备实现串行搜索功能，降低网站奔溃的可能性
- 9️⃣ 修复内存泄漏问题，提高稳定性
- 🔟 移除无用功能，减少冗余度，提高网站响应速度
- 1️⃣1️⃣ 对移动端和桌面端进行不同的优化逻辑，实现不同的交互逻辑
- 1️⃣2️⃣ 对UI实现史诗级更新，加入动效等 提高用户使用体验
- 1️⃣3️⃣ 登陆页面新增记住我，查看密码功能
- 1️⃣4️⃣ 增强广告过滤逻辑，史诗级加倍拦截广告，提升广告拦截的有效性
- 1️⃣5️⃣ 实现滚动内容预加载功能，即提高了效率，提高用户的使用体验，实现无感加载，同时减小API的滥用
- 1️⃣6️⃣ 还要很多功能，几乎对原有项目进行了大的的重构，新增多项功能，修复若干BUG，欢迎审查所有代码～
- 🎉欢迎大佬加入项目开发，有想添加/贡献/分享的影视站/Emby服务器可以在issue中/TG群与我联系
点击查看项目截图
| 分类 | 主要依赖 |
|---|---|
| 前端框架 | Next.js 14 · App Router |
| UI & 样式 | Tailwind CSS 3 |
| 语言 | TypeScript 4 |
| 播放器 | ArtPlayer · HLS.js |
| 部署 | Docker · Vercel · CloudFlare pages |
支持 Vercel、Docker、Netlify。
存储支持矩阵
| Docker | Vercel | Netlify | |
|---|---|---|---|
| localstorage | ✅ | ✅ | ✅ |
| 原生 redis | ✅ | ||
| Upstash Redis | ✅ | ✅ | |
| ✅：经测试支持 |
除 localstorage 方式外，其他方式都支持多账户、记录同步和管理页面
- Fork 本仓库到你的 GitHub 账户。
- 登陆 Vercel，点击 Add New → Project，选择 Fork 后的仓库。
- 设置 PASSWORD 环境变量。
- 保持默认设置完成首次部署。
- 如需自定义
config.json，请直接修改 Fork 后仓库中该文件。 - 每次 Push 到
main分支将自动触发重新构建。
部署完成后即可通过分配的域名访问，也可以绑定自定义域名。
- 完成普通部署并成功访问。
- 在 upstash 注册账号并新建一个 Redis 实例，名称任意。
- 复制新数据库的 HTTPS ENDPOINT 和 TOKEN
- 返回你的 Vercel 项目，新增环境变量 UPSTASH_URL 和 UPSTASH_TOKEN，值为第二步复制的 endpoint 和 token
- 设置环境变量 NEXT_PUBLIC_STORAGE_TYPE，值为 upstash；设置 USERNAME 和 PASSWORD 作为超管账号
- 重试部署
- Fork 本仓库到你的 GitHub 账户。
- 登陆 Netlify，点击 Add New project → Importing an existing project，授权 Github，选择 Fork 后的仓库。
- 设置 PASSWORD 环境变量。
- 保持默认设置完成首次部署。
- 如需自定义
config.json，请直接修改 Fork 后仓库中该文件。 - 每次 Push 到
main分支将自动触发重新构建。
部署完成后即可通过分配的域名访问，也可以绑定自定义域名。
- 完成普通部署并成功访问。
- 在 upstash 注册账号并新建一个 Redis 实例，名称任意。
- 复制新数据库的 HTTPS ENDPOINT 和 TOKEN
- 返回你的 Netlify 项目，Project Configuration → Environment variables 新增环境变量 UPSTASH_URL 和 UPSTASH_TOKEN，值为第二步复制的 endpoint 和 token
- 设置环境变量 NEXT_PUBLIC_STORAGE_TYPE，值为 upstash；设置 USERNAME 和 PASSWORD 作为超管账号
- 重试部署
services:
joyflix-core:
image: ghcr.io/jeffernn/joyflix@sha256:453fd835de93538a880dce307680da0f20d805c575c6ddfe09557f7018a2a877
container_name: joyflix-core
restart: unless-stopped
ports:
- '3000:3000'
environment:
- USERNAME=admin
- PASSWORD=admin_password
- NEXT_PUBLIC_STORAGE_TYPE=redis
- REDIS_URL=redis://joyflix-redis:6379
networks:
- joyflix-network
depends_on:
- joyflix-redis
# 如需自定义配置，可挂载文件
# volumes:
# - ./config.json:/app/config.json:ro
joyflix-redis:
image: redis:alpine
container_name: joyflix-redis
restart: unless-stopped
networks:
- joyflix-network
# 如需持久化
# volumes:
# - ./data:/data
networks:
joyflix-network:
driver: bridge| 变量 | 说明 | 可选值 | 默认值 |
|---|---|---|---|
| USERNAME | 非 localstorage 部署时的管理员账号 | 任意字符串 | （空） |
| PASSWORD | 非 localstorage 部署时为管理员密码 | 任意字符串 | （空） |
| NEXT_PUBLIC_SITE_NAME | 站点名称 | 任意字符串 | JoyFlix |
| ANNOUNCEMENT | 站点公告 | 任意字符串 | 请勿分享 ʕ •ᴥ•ʔ～ |
| NEXT_PUBLIC_STORAGE_TYPE | 播放记录/收藏的存储方式 | localstorage、redis、d1、upstash | localstorage |
| REDIS_URL | redis 连接 url | 连接 url | 空 |
| UPSTASH_URL | upstash redis 连接 url | 连接 url | 空 |
| UPSTASH_TOKEN | upstash redis 连接 token | 连接 token | 空 |
| NEXT_PUBLIC_SEARCH_MAX_PAGE | 搜索接口可拉取的最大页数 | 1-50 | 5 |
| NEXT_PUBLIC_DOUBAN_PROXY_TYPE | 豆瓣数据源请求方式 | 见下方 | direct |
| NEXT_PUBLIC_DOUBAN_PROXY | 自定义豆瓣数据代理 URL | url prefix | (空) |
| NEXT_PUBLIC_DOUBAN_IMAGE_PROXY_TYPE | 豆瓣图片代理类型 | 见下方 | direct |
| NEXT_PUBLIC_DOUBAN_IMAGE_PROXY | 自定义豆瓣图片代理 URL | url prefix | (空) |
| NEXT_PUBLIC_BASE_URL | 搜索推荐数据库获取值接口URL | https://xxx.com | 空
|
NEXT_PUBLIC_DOUBAN_PROXY_TYPE 选项解释：
-
direct: 由服务器直接请求豆瓣源站
-
cors-proxy-zwei: 浏览器向 cors proxy 请求豆瓣数据
-
cmliussss-cdn-tencent: 浏览器向豆瓣 CDN 请求数据由腾讯云 cdn 提供加速
-
cmliussss-cdn-ali: 浏览器向豆瓣 CDN 请求数据，由阿里云 cdn 提供加速
-
custom: 用户自定义 proxy，由 NEXT_PUBLIC_DOUBAN_PROXY 定义
NEXT_PUBLIC_DOUBAN_IMAGE_PROXY_TYPE 选项解释：
- direct：由浏览器直接请求豆瓣分配的默认图片域名
- server：由服务器代理请求豆瓣分配的默认图片域名
- img3：由浏览器请求豆瓣官方的精品 cdn（阿里云）
- cmliussss-cdn-tencent：由浏览器请求豆瓣 CDN，由腾讯云 cdn 提供加速
- cmliussss-cdn-ali：由浏览器请求豆瓣 CDN，由阿里云 cdn 提供加速
- custom: 用户自定义 proxy，由 NEXT_PUBLIC_DOUBAN_IMAGE_PROXY 定义
NEXT_PUBLIC_BASE_URL 选项解释：
- 必须设置为服务器的网址，搜索推荐功能将使用到此地址
所有可自定义项集中在根目录的 config.json 中：
{
"cache_time": 7200,
"api_site": {
"dyttzy": {
"api": "http://caiji.dyttzyapi.com/api.php/provide/vod",
"name": "电影天堂资源",
"detail": "http://caiji.dyttzyapi.com"
}
// ...更多站点
},
"custom_category": [
{
"name": "华语",
"type": "movie",
"query": "华语"
}
]
}cache_time：接口缓存时间（秒）。api_site：你可以增删或替换任何资源站，字段说明：key：唯一标识，保持小写字母/数字。api：资源站提供的vodJSON API 根地址。name：在人机界面中展示的名称。detail：（可选）部分无法通过 API 获取剧集详情的站点，需要提供网页详情根 URL，用于爬取。
custom_category：自定义分类配置，用于在导航中添加个性化的影视分类。以 type + query 作为唯一标识。支持以下字段：name：分类显示名称（可选，如不提供则使用 query 作为显示名）type：分类类型，支持movie（电影）或tv（电视剧）query：搜索关键词，用于在豆瓣 API 中搜索相关内容
custom_category 支持的自定义分类如下：
- movie：热门、最新、经典、豆瓣高分、冷门佳片、华语、欧美、韩国、日本、动作、喜剧、爱情、科幻、悬疑、恐怖、治愈
- tv：热门、美剧、英剧、韩剧、日剧、国产剧、港剧、日本动画、综艺、纪录片
支持标准的苹果 CMS V10 API 格式。
配合 OrionTV 在 TV 上使用
- ts-nextjs-tailwind-starter — 脚手架。
- ArtPlayer — 网页视频播放器。
- HLS.js — 实现 HLS 流媒体在浏览器中的播放支持。
- 啦啦～
- 看到这里啦！说明你认真熟读了README，我必须送你一些专属福利～
- ⬇️⬇️Emby客户端（macos/ipados/ios）高级订阅会员破解脚本⬇️⬇️
- https://github.com/jeffernn/jeffern-qx/blob/main/%E9%87%8D%E5%86%99/Embypremiere/Embypremiere.conf
- 配合Quantumult x使用，懂得都懂！切勿外传哦～
- 本项目仅供学习和个人使用
- 请勿用于商业用途或公开服务（禁止用于任何商业用途）
- 如因公开分享导致的任何法律问题，用户需自行承担责任
- 项目开发者不对用户的使用行为承担任何法律责任
- 如有问题或建议，欢迎提交 Issue
- 如需分支项目请引用本项目地址
- 二次开发许遵守开源协议并引用本项目地址
JoyFlix 仅作为视频搜索工具，不存储、上传或分发任何视频内容。所有视频均来自第三方影视站提供的搜索结果。如有侵权内容，请联系相应的内容提供方。
本项目开发者不对使用本项目产生的任何后果负责。使用本项目时，您必须遵守当地的法律法规。
欢迎加入我们的 Telegram 群，获取最新动态、分享创意、与志同道合的朋友交流！🌟
⭐ 如果这个项目对你有帮助，请给个 Star 支持一下！