From 504d02c0fa9e70ebafe5fa9057ced44fd5247387 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Thu, 2 Apr 2026 22:05:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=81=E8=AE=B8=E6=8B=89=E5=8F=96=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html |  15 ++++
 public/js/main.js | 179 ++++++++++++++++++++++++++++++++++++++++++----
 server.js         |  23 ++++++
 3 files changed, 202 insertions(+), 15 deletions(-)

diff --git a/public/index.html b/public/index.html
index 4e0b3f5..1d83722 100644
--- a/public/index.html
+++ b/public/index.html
@@ -120,6 +120,21 @@
                         </div>
                     </div>
                     <video id="video-player" controls preload="auto" class="hidden"></video>
+                    <div id="seeking-overlay" class="seeking-overlay hidden">
+                        <div class="spinner"></div>
+                        <span>跳转中...</span>
+                    </div>
+                </div>
+                <div id="custom-seek-container" class="custom-seek-container hidden">
+                    <div id="seek-bar" class="seek-bar">
+                        <div id="seek-bar-progress" class="seek-bar-progress"></div>
+                        <div id="seek-bar-handle" class="seek-bar-handle"></div>
+                    </div>
+                    <div class="seek-time-display">
+                        <span id="seek-current-time">00:00:00</span>
+                        <span class="seek-separator">/</span>
+                        <span id="seek-total-time">00:00:00</span>
+                    </div>
                 </div>
                 <div id="now-playing" class="now-playing hidden">
                     <h3>Now Playing</h3>
diff --git a/public/js/main.js b/public/js/main.js
index fe837a2..1766b46 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -38,6 +38,15 @@ document.addEventListener('DOMContentLoaded', () => {
     const statBitrate = document.getElementById('stat-bitrate');
     const statTime = document.getElementById('stat-time');
 
+    // Custom seek bar elements
+    const customSeekContainer = document.getElementById('custom-seek-container');
+    const seekBar = document.getElementById('seek-bar');
+    const seekBarProgress = document.getElementById('seek-bar-progress');
+    const seekBarHandle = document.getElementById('seek-bar-handle');
+    const seekCurrentTime = document.getElementById('seek-current-time');
+    const seekTotalTime = document.getElementById('seek-total-time');
+    const seekingOverlay = document.getElementById('seeking-overlay');
+
     let currentPollInterval = null;
     let selectedBucket = null;
     let selectedKey = null;
@@ -49,6 +58,12 @@ document.addEventListener('DOMContentLoaded', () => {
     let s3Password = '';
     let s3AuthHeaders = {};
 
+    // Seek state
+    let videoDuration = 0;
+    let seekOffset = 0;
+    let isDraggingSeek = false;
+    let isStreamActive = false;
+
     const formatBytes = (bytes) => {
         if (!bytes || bytes === 0) return '0 B';
         const units = ['B', 'KB', 'MB', 'GB', 'TB'];
@@ -57,6 +72,14 @@ document.addEventListener('DOMContentLoaded', () => {
         return (bytes / Math.pow(k, i)).toFixed(i > 0 ? 2 : 0) + ' ' + units[i];
     };
 
+    const formatTime = (seconds) => {
+        if (!seconds || !isFinite(seconds) || seconds < 0) return '00:00:00';
+        const h = Math.floor(seconds / 3600);
+        const m = Math.floor((seconds % 3600) / 60);
+        const s = Math.floor(seconds % 60);
+        return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+    };
+
     const sendWsMessage = (message) => {
         if (ws && ws.readyState === WebSocket.OPEN) {
             ws.send(JSON.stringify(message));
@@ -73,10 +96,16 @@ document.addEventListener('DOMContentLoaded', () => {
     const handleWsMessage = (event) => {
         try {
             const message = JSON.parse(event.data);
-            if (message.type === 'progress' && message.key === currentVideoKey) {
+            if (message.key !== currentVideoKey) return;
+
+            if (message.type === 'duration' && message.duration) {
+                videoDuration = message.duration;
+                if (seekTotalTime) seekTotalTime.textContent = formatTime(videoDuration);
+            }
+            if (message.type === 'progress') {
                 handleProgress(message.progress);
             }
-            if (message.type === 'ready' && message.key === currentVideoKey) {
+            if (message.type === 'ready') {
                 handleProgress({ status: 'finished', percent: 100, details: 'Ready to play' });
                 playMp4Stream(message.mp4Url);
             }
@@ -104,7 +133,6 @@ document.addEventListener('DOMContentLoaded', () => {
             downloadSizeText.textContent = `${downloaded} / ${total} — 下载完成`;
             downloadProgressText.textContent = '100%';
             downloadProgressFill.style.width = '100%';
-            // Brief pause then transition to transcode phase
             setTimeout(() => {
                 showTranscodePhase();
             }, 600);
@@ -115,7 +143,6 @@ document.addEventListener('DOMContentLoaded', () => {
             transcodeProgressFill.style.width = `${percent}%`;
             transcodeDetailText.textContent = progress.details || 'FFmpeg 转码中...';
 
-            // Show stats
             if (progress.fps || progress.bitrate || progress.timemark) {
                 transcodeStats.classList.remove('hidden');
                 statFps.textContent = progress.fps ? `${progress.fps} fps` : '';
@@ -147,13 +174,11 @@ document.addEventListener('DOMContentLoaded', () => {
     };
 
     const resetPhases = () => {
-        // Reset download phase
         if (downloadPhase) downloadPhase.classList.remove('hidden');
         if (downloadSizeText) downloadSizeText.textContent = '准备下载...';
         if (downloadProgressText) downloadProgressText.textContent = '0%';
         if (downloadProgressFill) downloadProgressFill.style.width = '0%';
 
-        // Reset transcode phase
         if (transcodePhase) transcodePhase.classList.add('hidden');
         if (transcodeDetailText) transcodeDetailText.textContent = 'FFmpeg 转码中...';
         if (transcodeProgressText) transcodeProgressText.textContent = '0%';
@@ -166,7 +191,6 @@ document.addEventListener('DOMContentLoaded', () => {
         if (statBitrate) statBitrate.textContent = '';
         if (statTime) statTime.textContent = '';
 
-        // Reset buttons
         if (stopTranscodeBtn) {
             stopTranscodeBtn.classList.add('hidden');
             stopTranscodeBtn.disabled = false;
@@ -174,6 +198,122 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
+    // --- Custom seek bar ---
+    const showSeekBar = () => {
+        if (customSeekContainer && videoDuration > 0) {
+            customSeekContainer.classList.remove('hidden');
+        }
+    };
+
+    const hideSeekBar = () => {
+        if (customSeekContainer) customSeekContainer.classList.add('hidden');
+    };
+
+    const updateSeekBarPosition = (absoluteTime) => {
+        if (!seekBar || videoDuration <= 0) return;
+        const ratio = Math.max(0, Math.min(1, absoluteTime / videoDuration));
+        seekBarProgress.style.width = `${ratio * 100}%`;
+        seekBarHandle.style.left = `${ratio * 100}%`;
+        seekCurrentTime.textContent = formatTime(absoluteTime);
+    };
+
+    // Track playback position in the custom seek bar
+    videoPlayer.addEventListener('timeupdate', () => {
+        if (isDraggingSeek || !isStreamActive) return;
+        const absoluteTime = seekOffset + videoPlayer.currentTime;
+        updateSeekBarPosition(absoluteTime);
+    });
+
+    // Seek bar interaction: click or drag
+    const getSeekRatio = (e) => {
+        const rect = seekBar.getBoundingClientRect();
+        return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    };
+
+    const handleSeekStart = (e) => {
+        if (!isStreamActive || videoDuration <= 0) return;
+        e.preventDefault();
+        isDraggingSeek = true;
+        seekBar.classList.add('seeking');
+        const ratio = getSeekRatio(e);
+        const targetTime = ratio * videoDuration;
+        updateSeekBarPosition(targetTime);
+    };
+
+    const handleSeekMove = (e) => {
+        if (!isDraggingSeek) return;
+        e.preventDefault();
+        const ratio = getSeekRatio(e);
+        const targetTime = ratio * videoDuration;
+        updateSeekBarPosition(targetTime);
+    };
+
+    const handleSeekEnd = (e) => {
+        if (!isDraggingSeek) return;
+        isDraggingSeek = false;
+        seekBar.classList.remove('seeking');
+        const ratio = getSeekRatio(e);
+        const targetTime = ratio * videoDuration;
+        seekToTime(targetTime);
+    };
+
+    if (seekBar) {
+        seekBar.addEventListener('mousedown', handleSeekStart);
+        document.addEventListener('mousemove', handleSeekMove);
+        document.addEventListener('mouseup', handleSeekEnd);
+
+        // Touch support
+        seekBar.addEventListener('touchstart', (e) => {
+            const touch = e.touches[0];
+            handleSeekStart({ clientX: touch.clientX, preventDefault: () => e.preventDefault() });
+        });
+        document.addEventListener('touchmove', (e) => {
+            if (!isDraggingSeek) return;
+            const touch = e.touches[0];
+            handleSeekMove({ clientX: touch.clientX, preventDefault: () => e.preventDefault() });
+        });
+        document.addEventListener('touchend', (e) => {
+            if (!isDraggingSeek) return;
+            const touch = e.changedTouches[0];
+            handleSeekEnd({ clientX: touch.clientX });
+        });
+    }
+
+    const seekToTime = (targetSeconds) => {
+        if (!selectedKey || !selectedBucket || videoDuration <= 0) return;
+        targetSeconds = Math.max(0, Math.min(targetSeconds, videoDuration - 0.5));
+        seekOffset = targetSeconds;
+
+        // Show seeking indicator
+        if (seekingOverlay) seekingOverlay.classList.remove('hidden');
+
+        // Build new stream URL with ss parameter
+        const codec = codecSelect?.value || 'h264';
+        const encoder = encoderSelect?.value || 'software';
+        let streamUrl = `/api/stream?bucket=${encodeURIComponent(selectedBucket)}&key=${encodeURIComponent(selectedKey)}&codec=${encodeURIComponent(codec)}&encoder=${encodeURIComponent(encoder)}&ss=${targetSeconds}`;
+        if (s3Username) streamUrl += `&username=${encodeURIComponent(s3Username)}`;
+        if (s3Password) streamUrl += `&password=${encodeURIComponent(s3Password)}`;
+
+        // Changing src automatically aborts the previous HTTP request,
+        // which triggers res.on('close') on the server, killing the old ffmpeg process
+        videoPlayer.src = streamUrl;
+        videoPlayer.load();
+
+        const onCanPlay = () => {
+            if (seekingOverlay) seekingOverlay.classList.add('hidden');
+            videoPlayer.play().catch(() => {});
+            videoPlayer.removeEventListener('canplay', onCanPlay);
+        };
+        videoPlayer.addEventListener('canplay', onCanPlay);
+
+        // Timeout fallback: hide seeking overlay after 8s even if canplay doesn't fire
+        setTimeout(() => {
+            if (seekingOverlay) seekingOverlay.classList.add('hidden');
+        }, 8000);
+    };
+
+    // --- End custom seek bar ---
+
     const loadConfig = async () => {
         if (!topBanner) return;
         try {
@@ -353,7 +493,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 return;
             }
 
-            // Build a tree structure from S3 keys, preserving original object storage directories
+            // Build a tree structure from S3 keys
             const tree = {};
             data.videos.forEach(key => {
                 const parts = key.split('/');
@@ -362,11 +502,9 @@ document.addEventListener('DOMContentLoaded', () => {
                     if (!current[part]) {
                         current[part] = {};
                     }
-
                     if (index === parts.length - 1) {
                         current[part].__file = key;
                     }
-
                     current = current[part];
                 });
             });
@@ -391,7 +529,6 @@ document.addEventListener('DOMContentLoaded', () => {
                 return li;
             };
 
-            // Recursive function to render the tree
             const renderTree = (node, container) => {
                 for (const [name, value] of Object.entries(node)) {
                     if (name === '__file') continue;
@@ -445,17 +582,20 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
-    // Handle video selection and trigger transcode
+    // Handle video selection
     const selectVideo = (key, listItemNode) => {
-        // Update UI
         document.querySelectorAll('.video-item').forEach(n => n.classList.remove('active'));
         listItemNode.classList.add('active');
 
-        // Reset player UI
         stopPolling();
         playerOverlay.classList.add('hidden');
         videoPlayer.classList.add('hidden');
         videoPlayer.pause();
+        isStreamActive = false;
+        videoDuration = 0;
+        seekOffset = 0;
+        hideSeekBar();
+
         if (transcodeBtn) {
             transcodeBtn.disabled = false;
             transcodeBtn.textContent = 'Start Transcode';
@@ -492,6 +632,10 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         stopPolling();
         resetPhases();
+        seekOffset = 0;
+        videoDuration = 0;
+        isStreamActive = false;
+        hideSeekBar();
         transcodingOverlay.classList.remove('hidden');
 
         try {
@@ -506,6 +650,8 @@ document.addEventListener('DOMContentLoaded', () => {
             videoPlayer.addEventListener('loadedmetadata', () => {
                 transcodingOverlay.classList.add('hidden');
                 videoPlayer.classList.remove('hidden');
+                isStreamActive = true;
+                showSeekBar();
                 if (playBtn) {
                     playBtn.disabled = false;
                     playBtn.textContent = 'Play';
@@ -533,6 +679,8 @@ document.addEventListener('DOMContentLoaded', () => {
             if (!res.ok) throw new Error(data.error || 'Failed to stop transcode');
 
             handleProgress({ status: 'cancelled', percent: 0, details: 'Transcode stopped' });
+            isStreamActive = false;
+            hideSeekBar();
             if (transcodeBtn) {
                 transcodeBtn.disabled = false;
                 transcodeBtn.textContent = 'Start Transcode';
@@ -557,7 +705,6 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
-    // Initialize MP4 Player
     const playMp4Stream = (url) => {
         transcodingOverlay.classList.add('hidden');
         videoPlayer.classList.remove('hidden');
@@ -569,6 +716,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
         videoPlayer.src = url;
         videoPlayer.load();
+        isStreamActive = true;
+        showSeekBar();
         videoPlayer.addEventListener('loadedmetadata', () => {
             if (playBtn) {
                 playBtn.disabled = false;
diff --git a/server.js b/server.js
index f9b4386..d5bfba1 100644
--- a/server.js
+++ b/server.js
@@ -111,6 +111,15 @@ const shouldRetryWithSoftware = (message) => {
     return /Cannot load libcuda\.so\.1|Could not open encoder before EOF|Error while opening encoder|Operation not permitted|Invalid argument/i.test(message);
 };
 
+const probeFile = (filePath) => {
+    return new Promise((resolve, reject) => {
+        ffmpeg.ffprobe(filePath, (err, metadata) => {
+            if (err) reject(err);
+            else resolve(metadata);
+        });
+    });
+};
+
 const extractS3Credentials = (req) => {
     const query = req.query || {};
     const username = req.headers['x-s3-username'] || req.body?.username || query.username || query.accessKeyId || '';
@@ -284,6 +293,7 @@ app.get('/api/stream', async (req, res) => {
     const key = req.query.key;
     const codec = req.query.codec;
     const encoder = req.query.encoder;
+    const startSeconds = parseFloat(req.query.ss) || 0;
 
     if (!bucket) {
         return res.status(400).json({ error: 'Bucket name is required' });
@@ -378,6 +388,15 @@ app.get('/api/stream', async (req, res) => {
             broadcastWs(progressKey, { type: 'progress', key, progress: progressMap[progressKey] });
         }
 
+        // Probe file for duration and broadcast to clients
+        try {
+            const metadata = await probeFile(tmpInputPath);
+            const duration = metadata.format?.duration || 0;
+            broadcastWs(progressKey, { type: 'duration', key, duration: parseFloat(duration) });
+        } catch (probeErr) {
+            console.error('Probe failed:', probeErr);
+        }
+
         res.setHeader('Content-Type', 'video/mp4');
         res.setHeader('Cache-Control', 'no-cache');
         res.setHeader('Connection', 'keep-alive');
@@ -392,6 +411,10 @@ app.get('/api/stream', async (req, res) => {
                 .outputOptions(streamingOptions)
                 .format('mp4');
 
+            if (startSeconds > 0) {
+                ffmpegCommand.inputOptions(['-ss', startSeconds.toString()]);
+            }
+
             if (/_vaapi$/.test(encoderName)) {
                 ffmpegCommand
                     .inputOptions(['-vaapi_device', '/dev/dri/renderD128'])