diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..bd1490f Binary files /dev/null and b/.DS_Store differ diff --git a/.github/.DS_Store b/.github/.DS_Store new file mode 100644 index 0000000..c66de05 Binary files /dev/null and b/.github/.DS_Store differ diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml new file mode 100644 index 0000000..e1f6ca8 --- /dev/null +++ b/.github/workflows/docker-publish.yml @@ -0,0 +1,47 @@ +name: Build and Push Docker Image + +on: + push: + branches: + - main + paths-ignore: + - 'README.md' + - 'README_zh.md' + - '.github/**' + workflow_dispatch: + +# 使用 concurrency 结合延迟效果来实现类似“修改后30分钟构建”的需求是不太直接的。 +# 通常 GitHub Actions 在 push 后立即触发。 +# 如果需要“合并触发”,可以使用 workflow_run 或在 push 触发时先 sleep。 +# 但为了可靠性,这里采用标准的 push 触发,并配合并发限制。 + +jobs: + docker: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Set up QEMU + uses: actions/setup-qemu-action@v3 + + - name: Set up Docker Buildx + uses: actions/setup-buildx-action@v3 + + - name: Login to GitHub Container Registry + uses: docker/login-action@v3 + with: + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Build and push + uses: docker/build-push-action@v5 + with: + context: . + platforms: linux/amd64,linux/arm64 + push: true + tags: | + ghcr.io/${{ github.repository_owner }}/embyx:latest + cache-from: type=gha + cache-to: type=gha,mode=max diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..a099324 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,26 @@ +# Dockerfile for EmbyX +FROM nginx:alpine + +# 设置工作目录存放原始语言包 +WORKDIR /app + +# 复制中英文版本到镜像内部存放 +COPY zh/ /app/dist/zh/ +COPY en/ /app/dist/en/ + +# 复制 nginx 配置 +COPY nginx.conf /etc/nginx/conf.d/default.conf + +# 复制并设置启动脚本 +COPY entrypoint.sh /entrypoint.sh +RUN chmod +x /entrypoint.sh + +# 预设默认语言和端口环境变量 +ENV APP_LANG=en +ENV APP_PORT=8090 + +# EXPOSE 在 host 模式下仅作声明 +EXPOSE 8090 + +# 使用自定义脚本启动 +ENTRYPOINT ["/entrypoint.sh"] diff --git a/README.md b/README.md index e322f6f..d0d559a 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,99 @@ -# EmbyX -像刷抖音一样看 Emby 短视频。Watch Emby short videos like Tiktok. +# 📱 EmbyX Vertical Player `v1.1` + +[中文说明](./README_zh.md) | [English Documentation](./README.md) + +> A TikTok-style web interface for Emby / Jellyfin, designed for browsing and managing short videos in an immersive way. + +--- + +## ✨ Features + +- **Fluid Playback**: TikTok-style vertical scrolling, immersive full-screen experience. +- **Grid View**: Browse with cover walls, supports pagination and random refresh. +- **Direct Play**: Works natively on modern devices. Support for 8K, AV1, and HEVC without transcoding. +- **Library Sync**: One-tap to favorite/unfavorite videos, fully synced with Emby server. +- **Key & Mouse Support**: Complete keyboard shortcut mapping. Friendly for TV and PC browsers. +- **PWA Ready**: Install as a desktop or home screen app. +- **Privacy First**: All data is stored locally; nothing is uploaded to the cloud. + +--- + +## 🔮 Playback Performance + +| Device | HEVC Decode | AV1 Decode | +|:---:|:---:|:---:| +| Apple | A9 (2015) / M1 | A17 Pro (2023) / M3 | +| Android | Budget (2016) | Budget (2024) | +| PC | Intel Core 6-8th Gen (iGPU) | Intel Core 11th Gen+ (iGPU) | + +--- + +## ⌨️ Shortcuts Guide + +| Key | Function | +|:---:|---| +| `W / S / ↑ / ↓` | Previous / Next Video | +| `A / D / ← / →` | Seek Back / Forward 15s | +| `Space / Click OK` | Pause / Play | +| `U / Double Click OK` | Favorite Video | +| `J / Menu Key` | Toggle Aspect Ratio | +| `M` | Toggle Mute | +| `I` | Open Settings / Profile | +| `E` | Toggle View Mode (List/Grid) | +| `R` | Sequential / Random Mode | +| `F` | Fullscreen Mode | +| `G` | Toggle Libraries | +| `V` | Show File Info | + +--- + +## 📁 Directory Structure + +``` +embyx/ +├── zh/ # Chinese Version +│ ├── index.html +│ ├── manifest.json +│ └── ... +├── en/ # English Version +│ ├── index.html +│ ├── manifest.json +│ └── ... +├── README.md # English (Default) +└── README_zh.md # Chinese +``` + +--- + +## 🚀 Deployment + +### Option 1: Direct File Hosting (Recommended) + +Simply put all files from either `zh/` or `en/` folder into your web server (Nginx, Apache, etc.). + +### Option 2: Docker Deployment + +One image, multiple languages. Controlled by environment variable. + +```bash +docker run -d \ + --name embyx \ + --network host \ + -e APP_LANG=en \ + -e APP_PORT=8090 \ + ghcr.io/juneix/embyx:latest +``` + +| Env | Description | Default | +|---|---|---| +| `APP_LANG` | `en` (English) / `zh` (Chinese) | `en` | +| `APP_PORT` | The port the container will listen on | `8090` | + +--- + +## 📝 License + +MIT License — Feel free to use, PRs and Issues are welcome. + +👨🏻‍💻 Author: [@Juneix](https://juneix.github.io) +🛜 Official Site: [June's Hub](https://5nav.eu.org) diff --git a/README_zh.md b/README_zh.md new file mode 100644 index 0000000..c9d80bf --- /dev/null +++ b/README_zh.md @@ -0,0 +1,150 @@ +# 📱 EmbyX 竖屏播放器 `v1.1` + +> 这是一个技术小白借助 Antigravity 和 Emby API 制作的 Web 应用,仿抖音风格浏览、管理 Emby 的短视频。 + +--- + +## ✨ 功能特色 + +- **流式播放**:抖音风格上下滑动,沉浸式全屏体验 +- **格子视图**:封面墙浏览,支持分页与随机换一批 +- **直接播放**(Direct Play):安卓 AV1、8K 不转码 +- **收藏管理**:一键收藏 / 取消,同步 Emby 数据库 +- **键鼠适配**:完整键盘快捷键,电视/电脑浏览器友好 +- **PWA 支持**:可安装为桌面/主屏幕应用 +- **私有化部署**:数据本地存储,不上传云端 + +--- + +## 🔮 播放性能 + +| 设备 | HEVC 硬解 | AV1 硬解 | +|:---:|:---:|:---:| +| 苹果 | A9 (2015) / M1 | A17 Pro (2023) / M3 | +| 安卓 | 千元机 (2016) | 千元机 (2024) | +| PC | 6~8 代酷睿·核显 | 11 代酷睿·核显 | + +--- + +## ⌨️ 快捷键指南 + +| 按键 | 功能 | +|:---:|---| +| `W / S / ↑ / ↓` | 上一个 / 下一个视频 | +| `A / D / ← / →` | 快退 / 快进 15 秒 | +| `Space / 单击 OK` | 暂停 / 播放 | +| `U / 双击 OK` | 收藏视频 | +| `J / 菜单键` | 比例切换 | +| `M` | 音量开关 | +| `I` | 个人中心 | +| `E` | 视图切换 | +| `R` | 顺序 / 随机 | +| `F` | 全屏切换 | +| `G` | 选择媒体源 | +| `V` | 流媒体详情 | + +--- + +## 🧩 使用技巧 + +- **原生全屏**:iOS 系统限制,不支持全屏按钮 +- **PWA 应用**:浏览器 📲 添加到主屏幕 / 作为应用安装 +- **键鼠适配**:电脑、电视浏览器也能快乐摸鱼 +- **媒体库建议**:单个媒体库建议不超过 **1000 个视频**,可建立多个媒体库分层管理 + +--- + +## 🛠️ 技术栈 + +| 层级 | 技术 | +|---|---| +| **结构** | HTML5 语义化标签 | +| **样式** | Tailwind CSS(CDN,JIT 按需) | +| **逻辑** | 原生 JavaScript(无框架) | +| **图标** | Lucide Icons(CDN) | +| **数据** | Emby REST API | +| **离线支持** | Service Worker(PWA) | +| **容器** | Nginx Alpine(Docker 部署时) | + +--- + +## 📁 文件目录 + +``` +embyx/ +├── index.html # 核心文件,包含所有逻辑与样式 +├── poster.webp # 自定义默认封面图(可替换) +├── manifest.json # PWA 配置文件 +├── sw.js # Service Worker(离线缓存) +├── icon.png # PWA 图标 +├── Dockerfile # Docker 镜像构建文件 +└── docker-compose.yml # 一键部署配置 +``` + +--- + +## 🚀 部署方式 + +### 方式一:直接部署(推荐个人用户) + +将以下文件放入任意 Web 服务器(Nginx、Apache、NAS 静态服务等)根目录: + +``` +index.html +poster.webp +manifest.json +sw.js +icon.png +``` + +> **尝鲜玩法**:手机可以直接双击 `index.html`(file:// 协议)本地使用,通过 HTTP 访问 Emby。 + +--- + +### 方式二:Docker 部署 + +#### 使用 Docker + +```bash +# 拉取最新镜像 +docker pull ghcr.io/juneix/embyx:latest + +# 运行容器(映射到本机 8080 端口) +docker run -d \ + --name embyx \ + --network host \ + -e APP_LANG=zh \ + -e APP_PORT=8090 \ + --restart unless-stopped \ + ghcr.io/juneix/embyx:latest +``` + +访问 `http://your-server-ip:8080` 即可使用。 + +#### 使用 docker-compose(推荐) + +```bash +# 下载 docker-compose.yml 后执行 +docker compose up -d +``` + +或者直接复制到群晖、飞牛、Dockge 的 docker-compose 模板: +```bash +services: + embyx: + image: ghcr.io/juneix/embyx:latest + container_name: embyx + restart: unless-stopped + network_mode: host + environment: + - APP_LANG=zh # zh (中文), en (英文) + - APP_PORT=8090 # 在 host 模式下,直接定义访问端口 +``` +--- + +## 📝 开源协议 + +MIT License — 随意使用,欢迎 PR 和 Issue。 + +👨🏻‍💻 作者:[@谢週五](https://juneix.github.io) +🛜 官网:[谢週五の藏经阁](https://5nav.eu.org) diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..cbffa9d --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,9 @@ +services: + embyx: + image: ghcr.io/juneix/embyx:latest + container_name: embyx + restart: unless-stopped + network_mode: host + environment: + - APP_LANG=zh # zh (中文), en (English) + - APP_PORT=8090 # 访问端口 (Access Port) diff --git a/icon.png b/en/icon.png similarity index 100% rename from icon.png rename to en/icon.png diff --git a/en/index.html b/en/index.html new file mode 100644 index 0000000..6fb6e36 --- /dev/null +++ b/en/index.html @@ -0,0 +1,2535 @@ + + + + + + + + + + + + + + + + + + EmbyX + + + + + + + +
+ +
+
+ + + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + + +
+
+

Initializing... +

+

+ Click the 'Profile' button at bottom right to configure server.

+
+ +
+
+
+ +
+ 00:00 + 00:00 +
+
+ +
+
+ + + + +
+
+ +
+
+
+ +
+
+ Profile + +
+
+ +
+
+
+

+ Server Config +

+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ +
+

+ About +

+
+
+

📱 EmbyX

+ v1.1 +
+ +
+

👋 Hi, I am @Juneix. EmbyX is a web-native + application designed specifically for Emby/Jellyfin. It perfectly recreates the + immersive short-video interactive experience, giving your private media library a + brand-new way to browse. 🎉

+
+ +
+ + Notice: All data stays local; open-source for self-hosting. +
+ +
+

🔮 Playback

+
    +
  • Native HTML5 player, best on modern devices.
  • +
  • Enjoy smooth 8K AV1 videos on Android ➕ Direct Play.
  • +
  • Older devices can use server transcoding.
  • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Device + HEVC + Decode + AV1 Decode
+ AppleA9 (2015) / M1A17 Pro (2023) / M3
+ AndroidBudget Phones (2016) + Budget Phones (2024)
+ PCIntel 6th-8th Gen + iGPUIntel 11th Gen iGPU
+
+
+ +
+

🧩 Tips & Tricks

+
    +
  • Setup: Use a dedicated account; < 1,000 videos per library.
  • +
  • PWA: 📲 Add to Home Screen or Install as App on any browser.
  • +
  • Controls: Full Mouse, Keyboard, and Remote support for PC & TV.
  • +
+
+ +
+

⌨️ Shortcuts

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
W / S / + ↑ / ↓Prev / Next Video
A / D / + ← / →Rewind / Fast-fw 15s
Space / + Click OKPause / Play
U / + Double Click + OKFavorite Video
J / + Menu Key + Toggle Aspect Ratio
MToggle Mute
IProfile
EToggle View Mode
RSequential / Random
FToggle Fullscreen
GSelect Library
VMedia Info
+
+
+ +
+

🚀 Support

+
    +
  • Support Me: Help me develop more + cool tools.
  • +
+ +
+ +
+

Made with ❤️ by Juneix

+

© 2026 All Rights Reserved

+
+
+
+
+
+
+ + + +
+ Message +
+ +
+ + + + + + \ No newline at end of file diff --git a/manifest.json b/en/manifest.json similarity index 100% rename from manifest.json rename to en/manifest.json diff --git a/en/poster.webp b/en/poster.webp new file mode 100644 index 0000000..7cad168 Binary files /dev/null and b/en/poster.webp differ diff --git a/en/sw.js b/en/sw.js new file mode 100644 index 0000000..d0609c8 --- /dev/null +++ b/en/sw.js @@ -0,0 +1,17 @@ +const CACHE_NAME = 'embyx-v1'; + +// 安装阶段:不强制缓存大量资源,保持轻量 +self.addEventListener('install', (event) => { + self.skipWaiting(); +}); + +// 激活阶段:清理旧缓存 +self.addEventListener('activate', (event) => { + event.waitUntil(clients.claim()); +}); + +// 核心:必须有 fetch 处理器才能触发安卓 Chrome 的安装横幅 +self.addEventListener('fetch', (event) => { + // 默认直接透传,不做离线缓存以节省空间和避免版本更新延迟 + event.respondWith(fetch(event.request)); +}); diff --git a/entrypoint.sh b/entrypoint.sh new file mode 100644 index 0000000..c385a07 --- /dev/null +++ b/entrypoint.sh @@ -0,0 +1,28 @@ +#!/bin/sh +set -e + +# 默认参数 +APP_LANG=${APP_LANG:-en} +APP_PORT=${APP_PORT:-8090} + +echo "Current Configuration:" +echo " - Language: $APP_LANG" +echo " - Port: $APP_PORT" + +# 动态修改 Nginx 监听端口 +sed -i "s/listen 80;/listen ${APP_PORT};/g" /etc/nginx/conf.d/default.conf + +# 清理 web 根目录 +rm -rf /usr/share/nginx/html/* + +# 根据环境变量选择性“部署” +if [ "$APP_LANG" = "zh" ]; then + echo "Deploying Chinese version..." + cp -rf /app/dist/zh/* /usr/share/nginx/html/ +else + echo "Deploying English version..." + cp -rf /app/dist/en/* /usr/share/nginx/html/ +fi + +# 启动 nginx +exec nginx -g "daemon off;" diff --git a/index.html b/index.html index 2bf5daa..de91295 100644 --- a/index.html +++ b/index.html @@ -1,1614 +1,21 @@ - - + - - - - - - - - - - - - EmbyX - - - - - - - -
- -
-
- -
-
-
- -
-

点击开始播放

-
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- -
-
- -
-
- -
-
- -
-
- - - -
-
-

正在初始化...

-

- 请点击右下角“我的”进行服务器配置

-
- -
-
-
- -
- 00:00 - 00:00 -
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
-
- 个人中心 - -
-
- -
-
-

- 服务器配置 -

-
-
- - -
-
-
- - -
-
- - -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- -
- -
-

- 关于项目 -

-
-
-

📱 EmbyX

- v1.1 -
- -
-

💡 简介:这是一个技术小白借助 AI 代码工具和 Emby 官方 API 制作的 Web - 应用,仿抖音风格浏览下载的短视频。

-
- -
- - 提醒:本演示站点的数据仅本地保存,为保障隐私安全,建议私有化部署。 -
- -
-

🧩 用法

-
    -
  • 苹果 Safari 浏览器【分享-添加到主屏幕】,即可实现 PWA 全屏应用。
  • -
  • 安卓 Chrome/Edge 浏览器,请直接使用全屏按钮。
  • -
  • 如需自动化、批量下载视频,推荐搭配 yt-dlpgallery-dlDouyin_TikTok_Download_API - 等开源项目。
  • -
  • 本人另有独家适配的苹果、安卓快捷指令,可一键下载视频到 NAS,然后实现 Emby 自动入库。
  • -
-
- -
-

👨🏻‍💻 数字名片:@谢週五

-

🏠 更多内容:谢週五の藏经阁

-
-
-
-
-
- - - -
- 提示信息 -
- -
- + + EmbyX - Loading... + + +

Redirecting / 正在跳转...

- \ No newline at end of file diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..d51f91c --- /dev/null +++ b/nginx.conf @@ -0,0 +1,33 @@ +server { + listen 80; + server_name _; + root /usr/share/nginx/html; + index index.html; + + # MIME types + types { + text/html html htm; + application/json json; + application/manifest+json webmanifest; + text/javascript js; + image/webp webp; + image/png png; + } + + # Service Worker: No caching + location = /sw.js { + add_header Cache-Control "no-cache, no-store, must-revalidate"; + add_header Pragma "no-cache"; + } + + # Static assets: Long-term cache + location ~* \.(png|webp|ico)$ { + expires 30d; + add_header Cache-Control "public, immutable"; + } + + # SPA/PWA routing support + location / { + try_files $uri $uri/ /index.html; + } +} diff --git a/zh/alipay.webp b/zh/alipay.webp new file mode 100644 index 0000000..c26733d Binary files /dev/null and b/zh/alipay.webp differ diff --git a/zh/icon.png b/zh/icon.png new file mode 100644 index 0000000..dbffdb4 Binary files /dev/null and b/zh/icon.png differ diff --git a/zh/index.html b/zh/index.html new file mode 100644 index 0000000..26d8f96 --- /dev/null +++ b/zh/index.html @@ -0,0 +1,2736 @@ + + + + + + + + + + + + + + + + + + EmbyX + + + + + + + +
+ +
+
+ + + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + + + + +
+
+

正在初始化...

+

+ 请点击右下角“我的”进行服务器配置

+
+ +
+
+
+ +
+ 00:00 + 00:00 +
+
+ +
+
+ + + + +
+
+ +
+ + +
+
+ + +
+
+ 个人中心 + + +
+
+ + +
+
+ +
+

+ 服务器配置 +

+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ +
+

+ 关于项目 +

+
+
+

📱 EmbyX

+ v1.0 +
+ +
+

👋 Hi~我叫@谢週五,EmbyX 是一款专为 Emby / Jellyfin 打造的 + Web 原生应用,完美复刻短视频沉浸式交互,让你的私人媒体库焕发全新的刷片体验。🎉

+
+ +
+ + 提醒:数据本地存储,不上传云端;项目开源,可私有化部署。 +
+ +
+

🔮 播放性能

+
    +
  • 原生 HTML5 播放器,新设备体验最佳
  • +
  • 直接播放 Direct Play,安卓 + 8K、AV1 不转码
  • +
  • 老设备需服务器转码,不如放到**上回收了(没打钱😂
  • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
设备HEVC 硬解 + AV1 硬解
+ 苹果A9 (2015) / M1A17 Pro (2023) / M3
+ 安卓千元机 (2016)千元机 (2024)
+ PC6~8 代酷睿·核显11 代酷睿·核显
+
+
+ +
+

🧩 使用技巧

+
    +
  • 配置建议:新建专用账号,每个媒体库 < 1000 个视频
  • +
  • PWA应用:全平台浏览器 📲 添加到主屏幕/作为应用安装
  • +
  • 键鼠适配:电脑、电视浏览器也能快乐摸鱼
  • +
+
+ +
+

⌨️ 快捷键指南

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
按键功能
W / S / + ↑ / ↓上一个 / 下一个视频
A / D / + ← / →快退 / 快进 15 秒
Space / + 单击 OK暂停 / 播放
U / 双击 + OK收藏视频
J / 菜单键 + 比例切换
M音量开关
I个人中心
E视图切换
R顺序 / 随机
F全屏切换
G选择媒体源
V流媒体详情
+
+
+ +
+

🚀 交流与支持

+ + +
+ +
+

Made with ❤️ by 谢週五

+

© 2026 保留所有权利

+
+
+
+
+
+
+ + + +
+ 提示信息 +
+ +
+ + + + + + \ No newline at end of file diff --git a/zh/manifest.json b/zh/manifest.json new file mode 100644 index 0000000..aa0939d --- /dev/null +++ b/zh/manifest.json @@ -0,0 +1,21 @@ +{ + "name": "EmbyX", + "short_name": "EmbyX", + "start_url": "./index.html", + "display": "standalone", + "background_color": "#000000", + "theme_color": "#000000", + "description": "Emby Short Video Player", + "icons": [ + { + "src": "icon.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "icon.png", + "sizes": "512x512", + "type": "image/png" + } + ] +} \ No newline at end of file diff --git a/zh/poster.webp b/zh/poster.webp new file mode 100644 index 0000000..7cad168 Binary files /dev/null and b/zh/poster.webp differ diff --git a/zh/sw.js b/zh/sw.js new file mode 100644 index 0000000..d0609c8 --- /dev/null +++ b/zh/sw.js @@ -0,0 +1,17 @@ +const CACHE_NAME = 'embyx-v1'; + +// 安装阶段:不强制缓存大量资源,保持轻量 +self.addEventListener('install', (event) => { + self.skipWaiting(); +}); + +// 激活阶段:清理旧缓存 +self.addEventListener('activate', (event) => { + event.waitUntil(clients.claim()); +}); + +// 核心:必须有 fetch 处理器才能触发安卓 Chrome 的安装横幅 +self.addEventListener('fetch', (event) => { + // 默认直接透传,不做离线缓存以节省空间和避免版本更新延迟 + event.respondWith(fetch(event.request)); +}); diff --git a/zh/wechat.webp b/zh/wechat.webp new file mode 100644 index 0000000..9a2a8e3 Binary files /dev/null and b/zh/wechat.webp differ