adminym/embyx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
Juneix Tse
2025-11-20 17:28:18 +08:00
committed by GitHub
parent f763b9d324
commit 4014cf4abf
1 changed files with 13 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+12 -38
View File
@@ -2,23 +2,20 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- PWA & iOS Safari 兼容配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
<!-- 新增：PWA Manifest 配置文件 -->
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<!-- 新增：图标设置 (请确保目录下有 icon.png 文件) -->
<link rel="icon" type="image/png" href="icon.png"> <link rel="icon" type="image/png" href="icon.png">
<link rel="apple-touch-icon" href="icon.png"> <link rel="apple-touch-icon" href="icon.png">
<title>EmbyX</title> <title>EmbyX</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com" data-cfasync="false"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script> <script data-cfasync="false">
tailwind.config = { tailwind.config = {
theme: { theme: {
extend: { extend: {
@@ -43,8 +40,9 @@
} }
/* 滑动容器 */ /* 滑动容器 */
/* 优化 2: h-screen 改为 h-[100dvh] 适配移动端动态高度 */
.slide-container { .slide-container {
@apply relative w-screen h-screen overflow-hidden bg-black; @apply relative w-screen h-[100dvh] overflow-hidden bg-black;
} }
/* 单个视频卡片 */ /* 单个视频卡片 */
@@ -90,16 +88,12 @@
} }
</style> </style>
</head> </head>
<body class="bg-black text-white overflow-hidden font-sans select-none"> <body class="bg-black text-white overflow-hidden font-sans select-none overscroll-none">
<!-- 主应用容器 -->
<div id="app" class="slide-container"> <div id="app" class="slide-container">
<!-- 1. 视频容器层 -->
<div id="videoContainer" class="relative w-full h-full"> <div id="videoContainer" class="relative w-full h-full">
<!-- 视频卡片由 JS 动态生成 --> </div>
</div>
<!-- 2. 点击播放引导层 (首次进入显示) -->
<div id="clickToPlayOverlay" class="absolute inset-0 z-50 flex items-center justify-center bg-black/40 cursor-pointer"> <div id="clickToPlayOverlay" class="absolute inset-0 z-50 flex items-center justify-center bg-black/40 cursor-pointer">
<div class="text-center"> <div class="text-center">
<div class="w-20 h-20 bg-black/50 rounded-full flex items-center justify-center animate-pulse mx-auto"> <div class="w-20 h-20 bg-black/50 rounded-full flex items-center justify-center animate-pulse mx-auto">
@@ -109,9 +103,7 @@
</div> </div>
</div> </div>
<!-- 3. 右侧互动工具栏 -->
<div class="right-toolbar absolute right-4 bottom-32 flex flex-col items-center space-y-6 z-30 transition-opacity duration-300"> <div class="right-toolbar absolute right-4 bottom-32 flex flex-col items-center space-y-6 z-30 transition-opacity duration-300">
<!-- 收藏 -->
<div class="flex flex-col items-center cursor-pointer active:scale-90 transition-transform" id="favoriteBtn"> <div class="flex flex-col items-center cursor-pointer active:scale-90 transition-transform" id="favoriteBtn">
<div class="w-12 h-12 flex items-center justify-center"> <div class="w-12 h-12 flex items-center justify-center">
<i class="fa fa-heart text-white text-4xl drop-shadow-md"></i> <i class="fa fa-heart text-white text-4xl drop-shadow-md"></i>
@@ -119,8 +111,6 @@
<span class="text-xs mt-1 font-medium drop-shadow">收藏</span> <span class="text-xs mt-1 font-medium drop-shadow">收藏</span>
</div> </div>
<!-- 清屏 -->
<!-- 修复：添加 transition-opacity duration-300 以支持自动隐藏的淡出效果 -->
<div class="flex flex-col items-center clear-screen-wrapper cursor-pointer active:scale-90 transition-transform transition-opacity duration-300" id="clearScreenBtn"> <div class="flex flex-col items-center clear-screen-wrapper cursor-pointer active:scale-90 transition-transform transition-opacity duration-300" id="clearScreenBtn">
<div class="w-12 h-12 flex items-center justify-center"> <div class="w-12 h-12 flex items-center justify-center">
<i class="fa fa-eye-slash text-white text-4xl drop-shadow-md"></i> <i class="fa fa-eye-slash text-white text-4xl drop-shadow-md"></i>
@@ -128,16 +118,13 @@
<span class="text-xs mt-1 font-medium drop-shadow">清屏</span> <span class="text-xs mt-1 font-medium drop-shadow">清屏</span>
</div> </div>
<!-- 全屏 -->
<div class="flex flex-col items-center cursor-pointer active:scale-90 transition-transform" id="fullscreenBtn"> <div class="flex flex-col items-center cursor-pointer active:scale-90 transition-transform" id="fullscreenBtn">
<div class="w-12 h-12 flex items-center justify-center"> <div class="w-12 h-12 flex items-center justify-center">
<!-- 修复：默认全屏图标 -->
<i class="fa fa-expand text-white text-4xl drop-shadow-md"></i> <i class="fa fa-expand text-white text-4xl drop-shadow-md"></i>
</div> </div>
<span class="text-xs mt-1 font-medium drop-shadow">全屏</span> <span class="text-xs mt-1 font-medium drop-shadow">全屏</span>
</div> </div>
<!-- 静音 -->
<div class="flex flex-col items-center cursor-pointer active:scale-90 transition-transform" id="muteBtn"> <div class="flex flex-col items-center cursor-pointer active:scale-90 transition-transform" id="muteBtn">
<div class="w-12 h-12 flex items-center justify-center"> <div class="w-12 h-12 flex items-center justify-center">
<i class="fa fa-volume-up text-white text-4xl drop-shadow-md"></i> <i class="fa fa-volume-up text-white text-4xl drop-shadow-md"></i>
@@ -146,27 +133,22 @@
</div> </div>
</div> </div>
<!-- 4. 底部信息展示栏 -->
<div class="bottom-info absolute bottom-16 left-4 right-4 z-20 transition-opacity duration-300 pointer-events-none"> <div class="bottom-info absolute bottom-16 left-4 right-4 z-20 transition-opacity duration-300 pointer-events-none">
<!-- 标题与简介 -->
<div class="mb-3 pointer-events-auto"> <div class="mb-3 pointer-events-auto">
<h3 id="videoTitle" class="text-white text-lg font-medium mb-1 drop-shadow-md truncate">正在初始化...</h3> <h3 id="videoTitle" class="text-white text-lg font-medium mb-1 drop-shadow-md truncate">正在初始化...</h3>
<p id="videoDescription" class="text-gray-200 text-sm line-clamp-2 drop-shadow-md opacity-90">请点击右下角“我的”进行服务器配置</p> <p id="videoDescription" class="text-gray-200 text-sm line-clamp-2 drop-shadow-md opacity-90">请点击右下角“我的”进行服务器配置</p>
</div> </div>
<!-- 进度条 -->
<div class="relative h-1 bg-white/30 cursor-pointer pointer-events-auto mb-1" id="progressBarContainer"> <div class="relative h-1 bg-white/30 cursor-pointer pointer-events-auto mb-1" id="progressBarContainer">
<div id="progressLine" class="progress-line w-0"></div> <div id="progressLine" class="progress-line w-0"></div>
</div> </div>
<!-- 时间信息 -->
<div class="flex justify-between text-xs text-gray-300 drop-shadow"> <div class="flex justify-between text-xs text-gray-300 drop-shadow">
<span id="currentTime">00:00</span> <span id="currentTime">00:00</span>
<span id="totalTime">00:00</span> <span id="totalTime">00:00</span>
</div> </div>
</div> </div>
<!-- 5. 底部主导航栏 -->
<div class="bottom-nav absolute bottom-0 left-0 right-0 bg-black/50 backdrop-blur-sm z-30 transition-opacity duration-300 pb-[env(safe-area-inset-bottom)]"> <div class="bottom-nav absolute bottom-0 left-0 right-0 bg-black/50 backdrop-blur-sm z-30 transition-opacity duration-300 pb-[env(safe-area-inset-bottom)]">
<div class="flex justify-around items-center h-16"> <div class="flex justify-around items-center h-16">
<div id="playModeBtn" class="flex flex-col items-center justify-center w-1/4 text-primary cursor-pointer"> <div id="playModeBtn" class="flex flex-col items-center justify-center w-1/4 text-primary cursor-pointer">
@@ -188,9 +170,7 @@
</div> </div>
</div> </div>
<!-- 6. “我的”个人中心页面 -->
<div id="profilePage" class="profile-layer text-white"> <div id="profilePage" class="profile-layer text-white">
<!-- 顶部栏 -->
<div class="flex items-center h-14 px-4 border-b border-gray-800 bg-dark sticky top-0 z-10"> <div class="flex items-center h-14 px-4 border-b border-gray-800 bg-dark sticky top-0 z-10">
<button id="closeProfileBtn" class="w-10 h-10 flex items-center justify-center -ml-2 active:text-gray-300"> <button id="closeProfileBtn" class="w-10 h-10 flex items-center justify-center -ml-2 active:text-gray-300">
<i class="fa fa-chevron-down text-gray-400"></i> <i class="fa fa-chevron-down text-gray-400"></i>
@@ -199,7 +179,6 @@
</div> </div>
<div class="p-4"> <div class="p-4">
<!-- 服务器配置区域 -->
<div class="mb-6"> <div class="mb-6">
<h2 class="text-primary font-bold text-sm mb-4 flex items-center"> <h2 class="text-primary font-bold text-sm mb-4 flex items-center">
<i class="fa fa-server mr-2"></i>服务器配置 <i class="fa fa-server mr-2"></i>服务器配置
@@ -228,29 +207,24 @@
<div class="h-px bg-gray-800 w-full my-6"></div> <div class="h-px bg-gray-800 w-full my-6"></div>
<!-- 项目介绍区域 -->
<div> <div>
<h2 class="text-primary font-bold text-sm mb-4 flex items-center"> <h2 class="text-primary font-bold text-sm mb-4 flex items-center">
<i class="fa fa-info-circle mr-2"></i>关于项目 <i class="fa fa-info-circle mr-2"></i>关于项目
</h2> </h2>
<div class="bg-gray-800/40 p-5 rounded-xl border border-gray-700/50 space-y-5 text-sm text-gray-300 leading-relaxed"> <div class="bg-gray-800/40 p-5 rounded-xl border border-gray-700/50 space-y-5 text-sm text-gray-300 leading-relaxed">
<!-- 标题区域 -->
<div class="flex items-center"> <div class="flex items-center">
<h3 class="text-white font-bold text-2xl tracking-tight">📱 EmbyX</h3> <h3 class="text-white font-bold text-2xl tracking-tight">📱 EmbyX</h3>
<span class="ml-2 px-2 py-0.5 bg-primary/20 text-primary text-xs font-bold rounded-full border border-primary/30">v1.0</span> <span class="ml-2 px-2 py-0.5 bg-primary/20 text-primary text-xs font-bold rounded-full border border-primary/30">v1.0</span>
</div> </div>
<!-- 简介 -->
<div> <div>
<p class="text-gray-300">💡 简介：这是一个技术小白借助 AI 代码工具和 Emby 官方 API 制作的 Web 应用，仿抖音风格浏览下载的短视频。目前功能还很简陋，就当抛砖引玉了，欢迎技术大佬指点或直接二改。</p> <p class="text-gray-300">💡 简介：这是一个技术小白借助 AI 代码工具和 Emby 官方 API 制作的 Web 应用，仿抖音风格浏览下载的短视频。目前功能还很简陋，就当抛砖引玉了，欢迎技术大佬指点或直接二改。</p>
</div> </div>
<!-- 警告 -->
<div class="text-yellow-500/90 text-xs bg-yellow-500/10 p-3 rounded-lg border border-yellow-500/20"> <div class="text-yellow-500/90 text-xs bg-yellow-500/10 p-3 rounded-lg border border-yellow-500/20">
<i class="fa fa-exclamation-triangle mr-1"></i> 提醒：本演示站点的数据仅本地保存，为保障稳定和隐私，建议私有化部署。 <i class="fa fa-exclamation-triangle mr-1"></i> 提醒：本演示站点的数据仅本地保存，为保障稳定和隐私，建议私有化部署。
</div> </div>
<!-- 用法 -->
<div> <div>
<h4 class="text-gray-300">🧩 用法</h4> <h4 class="text-gray-300">🧩 用法</h4>
<ul class="list-disc list-inside space-y-1 text-gray-400 text-xs"> <ul class="list-disc list-inside space-y-1 text-gray-400 text-xs">
@@ -261,7 +235,6 @@
</ul> </ul>
</div> </div>
<!-- 作者信息 -->
<div class="pt-4 border-t border-gray-700/50 text-xs text-gray-500 flex flex-col space-y-1"> <div class="pt-4 border-t border-gray-700/50 text-xs text-gray-500 flex flex-col space-y-1">
<p>👨🏻‍💻 数字名片：<a href="https://juneix.github.io" target="_blank" class="text-primary hover:underline">@谢週五</a></p> <p>👨🏻‍💻 数字名片：<a href="https://juneix.github.io" target="_blank" class="text-primary hover:underline">@谢週五</a></p>
<p>🏠 更多内容：<a href="https://5nav.eu.org" target="_blank" class="text-primary hover:underline">谢週五の藏经阁</a></p> <p>🏠 更多内容：<a href="https://5nav.eu.org" target="_blank" class="text-primary hover:underline">谢週五の藏经阁</a></p>
@@ -271,7 +244,6 @@
</div> </div>
</div> </div>
<!-- 7. 媒体库选择弹窗 -->
<div id="libraryModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden"> <div id="libraryModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden">
<div class="bg-gray-900 rounded-xl p-5 w-72 max-h-[70vh] overflow-y-auto border border-gray-800 shadow-2xl"> <div class="bg-gray-900 rounded-xl p-5 w-72 max-h-[70vh] overflow-y-auto border border-gray-800 shadow-2xl">
<h3 class="text-white text-lg font-bold mb-4 text-center">选择媒体库</h3> <h3 class="text-white text-lg font-bold mb-4 text-center">选择媒体库</h3>
@@ -280,7 +252,6 @@
</div> </div>
</div> </div>
<!-- 8. 全局提示组件 (Toast & Loading) -->
<div id="toast" class="fixed top-16 left-1/2 -translate-x-1/2 bg-black/80 px-4 py-2 rounded-full text-white text-sm pointer-events-none transition-opacity duration-300 opacity-0 z-[100] whitespace-nowrap border border-white/10 backdrop-blur-sm"> <div id="toast" class="fixed top-16 left-1/2 -translate-x-1/2 bg-black/80 px-4 py-2 rounded-full text-white text-sm pointer-events-none transition-opacity duration-300 opacity-0 z-[100] whitespace-nowrap border border-white/10 backdrop-blur-sm">
提示信息 提示信息
</div> </div>
@@ -447,7 +418,6 @@
<div class="w-full h-full relative bg-black"> <div class="w-full h-full relative bg-black">
<div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('${posterSrc}')"></div> <div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('${posterSrc}')"></div>
<video id="video-${index}" class="video-fullscreen hidden" playsinline webkit-playsinline loop></video> <video id="video-${index}" class="video-fullscreen hidden" playsinline webkit-playsinline loop></video>
<!-- 播放按钮 (暂停时显示) -->
<div id="playBtn-${index}" class="play-pause-btn"> <div id="playBtn-${index}" class="play-pause-btn">
<i class="fa fa-play"></i> <i class="fa fa-play"></i>
</div> </div>
@@ -469,7 +439,10 @@
if (v) { if (v) {
v.pause(); v.pause();
v.classList.add('hidden'); v.classList.add('hidden');
v.src = ''; // 释放资源 v.src = '';
// 优化 4: 强制清理资源
v.removeAttribute('src');
v.load();
} }
} }
}); });
@@ -589,7 +562,8 @@
getImageSrc(id) { getImageSrc(id) {
const { server, apiKey } = this.config; const { server, apiKey } = this.config;
return `${server}/emby/Items/${id}/Images/Primary?api_key=${apiKey}&MaxHeight=800`; // 优化 5: 减小图片体积 MaxHeight=400
return `${server}/emby/Items/${id}/Images/Primary?api_key=${apiKey}&MaxHeight=400&Quality=90`;
} }
async showLibraries() { async showLibraries() {