bozodev/glimpse-media-viewer

🎬 Glimpse媒体浏览器

一个 sleek、响应式的Web应用，用于浏览和查看您的Plex、Jellyfin或Emby媒体库内容。这个Docker化解决方案从您的媒体服务器获取元数据和图片，并以优雅、用户友好的界面呈现，支持多台媒体服务器。

!https://raw.githubusercontent.com/jeremehancock/Glimpse/main/assets/screenshot-main-plex-2.png

!https://raw.githubusercontent.com/jeremehancock/Glimpse/main/assets/screenshot-details-plex-2.png

!https://raw.githubusercontent.com/jeremehancock/Glimpse/main/assets/screenshot-main-jellyfin-2.png

!https://raw.githubusercontent.com/jeremehancock/Glimpse/main/assets/screenshot-details-jellyfin-2.png

!https://raw.githubusercontent.com/jeremehancock/Glimpse/main/assets/screenshot-main-emby-2.png

!https://raw.githubusercontent.com/jeremehancock/Glimpse/main/assets/screenshot-details-emby-2.png

✨ 功能特性

• 现代界面：简洁、响应式设计，支持移动设备和桌面端
• 多服务器支持：连接到Plex、Jellyfin、Emby，或同时连接多台服务器
• 媒体浏览：通过海报墙查看电影和电视节目
• 搜索功能：快速查找库中的内容
• 详情视图：查看演员信息、类型和描述
• 观看电影预告片：直接从界面预览内容
• 随机内容选择："掷骰子"功能，发现随机电影或电视节目
• 类型筛选：按类型轻松筛选媒体
• 字母排序（A-Z/Z-A）：按字母顺序排序
• 按添加日期排序（升序/降序）：按添加时间排序媒体
• 服务器切换：一键切换多台已配置服务器
• 自动主题适配：界面自动匹配您的主服务器主题
• MD5校验和验证：仅在图片变化时下载
• Docker化：通过Docker和Docker Compose轻松部署
• 可自定义：配置更新计划、应用标题等
• 可安装为PWA：在任何设备上像原生应用一样访问媒体库

❤️ 支持该项目

https://raw.githubusercontent.com/jeremehancock/Glimpse/main/assets/donate-button.png]([***]

🔧 前提条件

• 主机系统已安装Docker和Docker Compose
• 运行中的Plex媒体服务器、Jellyfin媒体服务器和/或Emby媒体服务器
• 媒体服务器的身份验证令牌
• 基本的Docker和容器化知识

🚀 安装步骤

1: 获取Docker Compose配置

创建数据目录

bash
mkdir -p Glimpse/data

创建docker-compose.yml文件

bash
curl -o Glimpse/docker-compose.yml https://raw.githubusercontent.com/jeremehancock/Glimpse/main/docker-compose.yml

进入Glimpse目录

bash
cd Glimpse

2. 配置Docker Compose

编辑docker-compose.yml设置媒体服务器详情。您可以配置Plex、Jellyfin和/或Emby服务器的任意组合：

Plex服务器配置

yaml
environment:
  - PRIMARY_SERVER=plex
  - PLEX_URL=http://your-plex-server:32400  # 您的Plex服务器URL
  - PLEX_TOKEN=your-plex-token  # 您的Plex令牌
  - CRON_SCHEDULE=0 */6 * * *  # 每6小时更新一次
  - TZ=UTC  # 您的时区
  - APP_TITLE=Glimpse  # 设置应用标题
  - SORT_BY_DATE_ADDED=false  # 按日期而非标题排序

Jellyfin服务器配置

yaml
environment:
  - PRIMARY_SERVER=jellyfin
  - JELLYFIN_URL=http://your-jellyfin-server:8096  # 您的Jellyfin服务器URL
  - JELLYFIN_TOKEN=your-jellyfin-api-token  # 您的Jellyfin API令牌
  - CRON_SCHEDULE=0 */6 * * *  # 每6小时更新一次
  - TZ=UTC  # 您的时区
  - APP_TITLE=Glimpse  # 设置应用标题
  - SORT_BY_DATE_ADDED=false  # 按日期而非标题排序

Emby服务器配置

yaml
environment:
  - PRIMARY_SERVER=emby
  - EMBY_URL=http://your-emby-server:8096  # 您的Emby服务器URL
  - EMBY_TOKEN=your-emby-api-token  # 您的Emby API令牌
  - CRON_SCHEDULE=0 */6 * * *  # 每6小时更新一次
  - TZ=UTC  # 您的时区
  - APP_TITLE=Glimpse  # 设置应用标题
  - SORT_BY_DATE_ADDED=false  # 按日期而非标题排序

多服务器配置

要配置多台服务器，只需包含您要使用的每台服务器的环境变量。例如，同时使用Plex和Jellyfin：

yaml
environment:
  - PRIMARY_SERVER=plex  # 默认显示的服务器
  - PLEX_URL=http://your-plex-server:32400  # Plex服务器URL
  - PLEX_TOKEN=your-plex-token  # Plex令牌
  - JELLYFIN_URL=http://your-jellyfin-server:8096  # Jellyfin服务器URL
  - JELLYFIN_TOKEN=your-jellyfin-api-token  # Jellyfin API令牌
  - CRON_SCHEDULE=0 */6 * * *  # 每6小时更新一次
  - TZ=UTC  # 您的时区
  - APP_TITLE=Glimpse  # 设置应用标题
  - SORT_BY_DATE_ADDED=false  # 按日期而非标题排序

3. 启动容器

bash
docker-compose up -d

4. 访问Web界面

打开浏览器，导航至：

http://your-server:9090  # 您的服务器IP或域名

⚙️ 配置选项

环境变量

服务器配置说明

• 单服务器：仅配置一台服务器的凭据。应用将自动检测并使用可用服务器。
• 多服务器：配置任意组合的服务器凭据。应用将显示下拉菜单以切换服务器。
• 主服务器：配置多台服务器时，PRIMARY_SERVER决定默认显示哪台服务器，并影响应用主题。
• 自动检测：若PRIMARY_SERVER设置错误或凭据缺失，应用将自动检测并切换到可用服务器。

获取Plex令牌

您可以通过以下步骤找到Plex身份验证令牌（X-Plex-Token）：

1. 登录Plex Web应用
2. 浏览到任意媒体项
3. 点击三点菜单，选择"获取信息"
4. 在信息对话框中，点击"查看XML"
5. 在新标签页的URL中，找到"X-Plex-Token="参数

详细说明请访问Plex支持文章。

获取Jellyfin API令牌

获取Jellyfin API令牌：

1. 登录Jellyfin Web界面
2. 进入管理 → 仪表板
3. 导航至高级 → API密钥
4. 点击**+** 创建新API密钥
5. 命名（例如"Glimpse Media Viewer"）
6. 复制生成的API密钥

或者，您可以在首次身份验证时在Jellyfin服务器日志中找到API令牌，或使用Jellyfin API文档以编程方式生成。

获取Emby API令牌

获取Emby API令牌：

1. 登录Emby Web界面
2. 进入设置 → 高级 → API密钥
3. 点击新建API密钥
4. 命名（例如"Glimpse Media Viewer"）
5. 复制生成的API密钥

或者，您可以通过Emby服务器设置或使用Emby API文档创建API密钥。

🏗️ 项目结构

Glimpse/
│
├── docker-compose.yml        # Docker Compose配置
├── Dockerfile                # Docker构建配置
│
├── scripts/
│   ├── plex_data_fetcher.py  # 获取Plex数据的Python脚本
│   └── jellyfin_data_fetcher.py # 获取Jellyfin/Emby数据的Python脚本
│
├── web/
│   ├── index.html            # 前端Web界面
│   ├── manifest.json         # PWA清单文件
│   ├── sw.js                 # PWA功能的服务工作器
│   ├── offline.html          # 离线回退页面
│   └── images/               # 图标和图片
│       ├── icon.png          # 原始应用图标
│       ├── android-chrome-192x192.png  # 应用图标（192×192）
│       ├── android-chrome-512x512.png  # 应用图标（512×512）
│       ├── apple-touch-icon.png        # Apple触摸图标（180x180）
│       ├── favicon.ico                 # 网站图标
│       ├── favicon-16x16.png           # 网站图标（16x16）
│       ├── favicon-32x32.png           # 网站图标（32x32）
│       ├── icons/                      # 下拉菜单的服务器图标
│       │   ├── plex.png                # Plex服务器图标
│       │   ├── jellyfin.png            # Jellyfin服务器图标
│       │   └── emby.png                # Emby服务器图标
│       ├── jellyfin/                   # Jellyfin特定主题图标
│       │   ├── android-chrome-192x192.png
│       │   ├── android-chrome-512x512.png
│       │   └── apple-touch-icon.png
│       └── emby/                       # Emby特定主题图标
│           ├── android-chrome-192x192.png
│           ├── android-chrome-512x512.png
│           └── apple-touch-icon.png
│
├── config/
│   ├── entrypoint.sh         # 容器入口脚本
│   ├── nginx.conf            # Nginx配置
│   └── supervisord.conf      # Supervisor配置
│
└── data/                     # 持久数据目录
    ├── plex/                 # Plex服务器数据
    │   ├── movies.json       # Plex电影元数据
    │   ├── tvshows.json      # Plex电视节目元数据
    │   ├── checksums.pkl     # Plex图片的MD5校验和
    │   ├── posters/          # Plex电影和电视节目海报
    │   └── backdrops/        # Plex电影和电视节目背景
    ├── jellyfin/             # Jellyfin服务器数据
    │   ├── movies.json       # Jellyfin电影元数据
    │   ├── tvshows.json      # Jellyfin电视节目元数据
    │   ├── checksums.pkl     # Jellyfin图片的MD5校验和
    │   ├── posters/          # Jellyfin电影和电视节目海报
    │   └── backdrops/        # Jellyfin电影和电视节目背景
    └── emby/                 # Emby服务器数据
        ├── movies.json       # Emby电影元数据
        ├── tvshows.json      # Emby电视节目元数据
        ├── checksums.pkl     # Emby图片的MD5校验和
        ├── posters/          # Emby电影和电视节目海报
        └── backdrops/        # Emby电影和电视节目背景

🔄 工作原理

1. 数据获取：Python脚本使用提供的令牌连接到媒体服务器，获取所有电影和电视节目的元数据。
2. 多服务器支持：配置多台服务器时，数据分别获取并存储在服务器特定目录中。
3. 图片处理：下载媒体海报和背景，使用MD5校验和避免重新下载未更改的文件。
4. 主题适配：界面根据主服务器自动调整主题（Plex橙/黄色、Jellyfin蓝色或Emby绿色）。
5. 服务器切换：配置多台服务器时，用户可通过下拉菜单切换。
6. Web服务器：Nginx提供静态Web界面和下载的数据。
7. 计划更新：Cron按配置的计划运行数据获取器，保持内容最新。
8. 持久性：所有数据存储在映射到主机的卷中，确保容器重启后数据保留。

🌐 自定义

修改更新计划

在docker-compose.yml中修改CRON_SCHEDULE环境变量：

yaml
- CRON_SCHEDULE=0 0 * * *  # 每天午夜更新一次

常见cron模式：

• 0 */6 * * * - 每6小时
• 0 0 * * * - 每天午夜
• 0 0 * * 0 - 每周日
• */30 * * * * - 每30分钟

修改端口

在docker-compose.yml的ports部分修改：

yaml
ports:
  - "9090:80"  # 更改为您需要的端口

自定义应用标题

设置APP_TITLE环境变量：

yaml
- APP_TITLE=我的电影收藏

设置主服务器

配置多台服务器时，设置默认显示的服务器：

yaml
- PRIMARY_SERVER=jellyfin  # 选项：plex, jellyfin, emby

这会影响：

• 应用首次加载时显示的服务器内容
• 应用的颜色主题（Plex=橙/黄色，Jellyfin=蓝色，Emby=绿色）
• 默认离线页面样式

🔍 故障排除

查看日志

查看所有容器日志

bash
docker-compose logs

实时跟踪日志

bash
docker-compose logs -f

查看特定服务日志

bash
docker-compose logs glimpse-media-viewer

手动数据更新

手动触发Plex数据更新：

bash
docker exec glimpse-media-viewer bash -c 'python /app/scripts/plex_data_fetcher.py --url "$PLEX_URL" --token "$PLEX_TOKEN" --output /app/data/plex'

手动触发Jellyfin数据更新：

bash
docker exec glimpse-media-viewer bash -c 'python /app/scripts/jellyfin_data_fetcher.py --url "$JELLYFIN_URL" --token "$JELLYFIN_TOKEN" --output /app/data/jellyfin'

手动触发Emby数据更新：

bash
docker exec glimpse-media-viewer bash -c 'python /app/scripts/jellyfin_data_fetcher.py --url "$EMBY_URL" --token "$EMBY_TOKEN" --output /app/data/emby'

常见问题

显示Nginx默认页面而非应用

如果看到Nginx欢迎页面，可能是配置问题：

检查应用文件是否存在

bash
docker exec glimpse-media-viewer ls -la /app/web

检查Nginx配置

bash
docker exec glimpse-media-viewer cat /etc/nginx/conf.d/default.conf

重启Nginx

bash
docker exec glimpse-media-viewer nginx -s reload