Modernize player playback experience

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this maintained LibreTV fork are documented here.
 
+## 1.2.12 - 2026-05-12
+
+### Changed
+
+- Upgraded the bundled ArtPlayer and hls.js player libraries for the modernized player stack.
+- Increased HLS buffering on capable devices while keeping a conservative fallback for mobile, low-memory, or data-saver clients.
+- Refreshed the player surface with progress-preview UI, autoplay fallback, and source switching that resumes from the current playback time.
+
 ## 1.2.11 - 2026-05-12
 
 ### Fixed

VERSION.txt

@@ -1 +1 @@
-202605120120
+202605120223

css/player.css

@@ -139,13 +139,74 @@ div.player-loading-text {
 
 .player-container {
     width: 100%;
-    max-width: 1000px;
+    max-width: 1120px;
     margin: 0 auto;
 }
 
 #player {
     width: 100%;
-    height: 60vh; /* 视频播放器高度 */
+    height: min(68vh, calc(100vw * 9 / 16));
+    min-height: 320px;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
+}
+
+.progress-preview {
+    position: absolute;
+    bottom: 70px;
+    width: 168px;
+    min-height: 116px;
+    transform: translateX(-50%) translateY(8px);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 8px;
+    overflow: hidden;
+    background: rgba(7, 12, 20, 0.92);
+    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.16s ease, transform 0.16s ease;
+    z-index: 35;
+}
+
+.progress-preview.show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
+.progress-preview-video {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    display: block;
+    object-fit: cover;
+    background: #05070b;
+}
+
+.progress-preview-fallback {
+    position: absolute;
+    inset: 0 0 24px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 10px;
+    color: #cbd5e1;
+    font-size: 12px;
+    background: linear-gradient(135deg, #111827, #020617);
+}
+
+.progress-preview.has-video .progress-preview-fallback {
+    display: none;
+}
+
+.progress-preview-time {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #e5e7eb;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    background: rgba(2, 6, 23, 0.94);
 }
 
 .loading-container {
@@ -399,6 +460,18 @@ input:checked + .slider:before {
 
 /* 新增：移动端响应式样式 */
 @media (max-width: 640px) {
+    #player {
+        height: calc(100vw * 9 / 16);
+        min-height: 210px;
+        border-radius: 0;
+    }
+
+    .progress-preview {
+        width: 136px;
+        min-height: 98px;
+        bottom: 58px;
+    }
+
     .episode-grid {
         max-height: 40vh; /* 移动端增加集数列表高度 */
     }

css/styles.css

@@ -796,10 +796,10 @@ body {
 }
 
 /* 锁定控制时屏蔽交互 */
-.player-container.controls-locked .dplayer-controller,
-.player-container.controls-locked .dplayer-mask,
-.player-container.controls-locked .dplayer-bar-wrap,
-.player-container.controls-locked .dplayer-statusbar,
+.player-container.controls-locked .art-controls,
+.player-container.controls-locked .art-mask,
+.player-container.controls-locked .art-bottom,
+.player-container.controls-locked .art-progress,
 .player-container.controls-locked .shortcut-hint {
     opacity: 0 !important;
     pointer-events: none !important;

js/config.js

@@ -17,7 +17,7 @@ const SITE_CONFIG = {
     url: '',
     description: '免费在线视频搜索与观看平台',
     logo: 'image/logo.png',
-    version: '1.2.11'
+    version: '1.2.12'
 };
 
 const DEFAULT_SELECTED_APIS = ['ysgc', 'jszy', 'wujin', 'maoyan'];

js/password.js

@@ -113,8 +113,10 @@ function showPasswordModal() {
     const passwordModal = document.getElementById('passwordModal');
     if (passwordModal) {
         // 防止出现豆瓣区域滚动条
-        document.getElementById('doubanArea').classList.add('hidden');
-        document.getElementById('passwordCancelBtn').classList.add('hidden');
+        const doubanArea = document.getElementById('doubanArea');
+        const passwordCancelBtn = document.getElementById('passwordCancelBtn');
+        if (doubanArea) doubanArea.classList.add('hidden');
+        if (passwordCancelBtn) passwordCancelBtn.classList.add('hidden');
 
         // 检查是否需要强制设置密码
         if (isPasswordRequired()) {
@@ -175,9 +177,10 @@ function hidePasswordModal() {
         passwordModal.style.display = 'none';
 
         // 如果启用豆瓣区域则显示豆瓣区域
-        if (localStorage.getItem('doubanEnabled') === 'true') {
-            document.getElementById('doubanArea').classList.remove('hidden');
-            initDouban();
+        const doubanArea = document.getElementById('doubanArea');
+        if (localStorage.getItem('doubanEnabled') === 'true' && doubanArea) {
+            doubanArea.classList.remove('hidden');
+            if (typeof initDouban === 'function') initDouban();
         }
     }
 }
@@ -242,4 +245,4 @@ function initPasswordProtection() {
 // 在页面加载完成后初始化密码保护
 document.addEventListener('DOMContentLoaded', function () {
     initPasswordProtection();
-});
+});