diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx index 058af3f..0b4e6bb 100644 --- a/src/app/play/page.tsx +++ b/src/app/play/page.tsx @@ -3244,38 +3244,325 @@ function PlayPageClient() { handleNextEpisode(); }, }, - // iOS 设备上添加自定义网页全屏按钮(竖屏时显示,横屏时隐藏) + // iOS 设备上添加自定义全屏按钮(横屏和竖屏都显示) ...(isIOS ? [{ position: 'right', index: 100, // 大数字确保在设置按钮右边 html: '', - tooltip: '网页全屏', + tooltip: '全屏', style: { color: '#fff', }, mounted: function($el: HTMLElement) { - // 添加 CSS 样式:横屏时隐藏,竖屏时显示 + // 添加 CSS 样式:横屏和竖屏都显示 const style = document.createElement('style'); style.textContent = ` - /* 横屏时隐藏 iOS 自定义全屏按钮 */ - @media (orientation: landscape) { - .ios-portrait-fullscreen { - display: none !important; - } + /* iOS 自定义全屏按钮在所有方向都显示 */ + .ios-portrait-fullscreen { + display: inline-flex !important; } - /* 竖屏时显示 iOS 自定义全屏按钮 */ - @media (orientation: portrait) { - .ios-portrait-fullscreen { - display: inline-flex !important; - } + /* iOS 全屏选择对话框样式(遵循项目统一风格) */ + .ios-fullscreen-dialog { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + padding: 16px; + } + .ios-fullscreen-dialog-content { + background: white; + border-radius: 16px; + max-width: 480px; + width: 100%; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); + overflow: hidden; + } + .dark .ios-fullscreen-dialog-content { + background: rgb(31, 41, 55); + } + + /* 标题栏 */ + .ios-fullscreen-dialog-header { + background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); + padding: 20px 24px; + } + .ios-fullscreen-dialog-title { + font-size: 20px; + font-weight: 700; + color: white; + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 6px; + } + .ios-fullscreen-dialog-title svg { + stroke: white; + } + .ios-fullscreen-dialog-subtitle { + font-size: 14px; + color: rgba(255, 255, 255, 0.9); + margin: 0; + } + + /* 选项列表 */ + .ios-fullscreen-dialog-options { + padding: 16px; + display: flex; + flex-direction: column; + gap: 12px; + } + .ios-fullscreen-option { + display: flex; + align-items: center; + gap: 16px; + padding: 16px; + background: rgb(249, 250, 251); + border: 2px solid transparent; + border-radius: 12px; + cursor: pointer; + transition: all 0.2s; + text-align: left; + } + .dark .ios-fullscreen-option { + background: rgba(55, 65, 81, 0.5); + } + .ios-fullscreen-option:hover { + background: rgb(243, 244, 246); + border-color: #22c55e; + box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15); + } + .dark .ios-fullscreen-option:hover { + background: rgb(55, 65, 81); + } + .ios-fullscreen-option:active { + transform: scale(0.98); + } + + /* 推荐选项 */ + .ios-fullscreen-option-recommended { + border-color: #22c55e; + } + + /* 选项图标 */ + .ios-fullscreen-option-icon { + flex-shrink: 0; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: white; + border-radius: 10px; + color: #22c55e; + } + .dark .ios-fullscreen-option-icon { + background: rgb(31, 41, 55); + } + .ios-fullscreen-option-recommended .ios-fullscreen-option-icon { + background: #22c55e; + color: white; + } + + /* 选项内容 */ + .ios-fullscreen-option-content { + flex: 1; + } + .ios-fullscreen-option-title { + font-size: 16px; + font-weight: 600; + color: rgb(17, 24, 39); + margin-bottom: 4px; + display: flex; + align-items: center; + gap: 8px; + } + .dark .ios-fullscreen-option-title { + color: white; + } + .ios-fullscreen-option-badge { + display: inline-block; + padding: 2px 8px; + background: #22c55e; + color: white; + font-size: 12px; + font-weight: 500; + border-radius: 4px; + } + .ios-fullscreen-option-desc { + font-size: 13px; + color: rgb(107, 114, 128); + line-height: 1.4; + } + .dark .ios-fullscreen-option-desc { + color: rgb(156, 163, 175); + } + + /* 箭头图标 */ + .ios-fullscreen-option-arrow { + flex-shrink: 0; + color: rgb(209, 213, 219); + transition: transform 0.2s; + } + .dark .ios-fullscreen-option-arrow { + color: rgb(75, 85, 99); + } + .ios-fullscreen-option:hover .ios-fullscreen-option-arrow { + transform: translateX(4px); + color: #22c55e; + } + + /* 底部提示 */ + .ios-fullscreen-dialog-footer { + padding: 16px 24px; + background: rgb(249, 250, 251); + border-top: 1px solid rgb(229, 231, 235); + display: flex; + align-items: flex-start; + gap: 10px; + font-size: 12px; + color: rgb(107, 114, 128); + line-height: 1.5; + } + .dark .ios-fullscreen-dialog-footer { + background: rgba(17, 24, 39, 0.5); + border-top-color: rgb(55, 65, 81); + color: rgb(156, 163, 175); + } + .ios-fullscreen-dialog-footer svg { + flex-shrink: 0; + margin-top: 2px; + stroke: currentColor; } `; document.head.appendChild(style); }, click: function () { - if (artPlayerRef.current) { - artPlayerRef.current.fullscreenWeb = !artPlayerRef.current.fullscreenWeb; + if (!artPlayerRef.current) return; + + // 如果已经在全屏状态,直接退出 + if (artPlayerRef.current.fullscreenWeb) { + artPlayerRef.current.fullscreenWeb = false; + return; } + + // 创建对话框(使用项目统一风格) + const dialog = document.createElement('div'); + dialog.className = 'ios-fullscreen-dialog'; + dialog.innerHTML = ` +
+ 由于 iOS 系统限制,原生全屏会使用系统播放器,将无法显示弹幕及使用部分播放器功能。网页全屏可能无法完全占满屏幕,但可保留所有功能。 +
+