添加清空缓存按钮

public/index.html

@@ -26,10 +26,14 @@
             <section class="video-list-section glass-panel">
                 <div class="section-header">
                     <h2>Available Videos</h2>
-                    <button id="refresh-btn" class="icon-btn" title="Refresh List">
+                    <div class="section-actions">
+                        <button id="refresh-btn" class="icon-btn" title="Refresh List">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                     </button>
-                </div>
+                        <button id="reset-cache-btn" class="icon-btn" title="Reset Download Cache" aria-label="Reset Download Cache">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4v6h6"/><path d="M21 20v-6h-6"/><path d="M21 10a9 9 0 0 0-15.2-6.8L3 8"/><path d="M3 14a9 9 0 0 0 15.2 6.8L21 16"/></svg>
+                        </button>
+                    </div>
                 <div class="codec-panel">
                     <label for="codec-select">编码方式：</label>
                     <select id="codec-select">

public/js/main.js

@@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const videoListEl = document.getElementById('video-list');
     const loadingSpinner = document.getElementById('loading-spinner');
     const refreshBtn = document.getElementById('refresh-btn');
+    const resetCacheBtn = document.getElementById('reset-cache-btn');
     const codecSelect = document.getElementById('codec-select');
     const encoderSelect = document.getElementById('encoder-select');
     const playerOverlay = document.getElementById('player-overlay');
@@ -89,6 +90,45 @@ document.addEventListener('DOMContentLoaded', () => {
         progressFill.style.width = '0%';
     };
 
+    const resetCache = async () => {
+        if (!resetCacheBtn) return;
+        resetCacheBtn.disabled = true;
+        resetCacheBtn.title = 'Resetting cache...';
+
+        stopPolling();
+        selectedKey = null;
+        currentVideoKey = null;
+        subscribedKey = null;
+        if (transcodeBtn) {
+            transcodeBtn.classList.add('hidden');
+        }
+        if (playBtn) {
+            playBtn.classList.add('hidden');
+        }
+        if (playerOverlay) {
+            playerOverlay.classList.remove('hidden');
+        }
+        if (nowPlaying) {
+            nowPlaying.classList.add('hidden');
+        }
+        resetProgress();
+
+        try {
+            const res = await fetch('/api/reset-cache', { method: 'POST' });
+            if (!res.ok) {
+                const data = await res.json().catch(() => ({}));
+                throw new Error(data.error || 'Reset failed');
+            }
+            await fetchVideos();
+        } catch (err) {
+            console.error('Reset cache failed:', err);
+            alert(`Reset cache failed: ${err.message}`);
+        } finally {
+            resetCacheBtn.disabled = false;
+            resetCacheBtn.title = 'Reset Download Cache';
+        }
+    };
+
     if (transcodeBtn) {
         transcodeBtn.addEventListener('click', () => {
             startTranscode();

server.js

@@ -113,6 +113,20 @@ wss.on('connection', (ws) => {
     ws.on('close', () => removeWsClient(ws));
 });
 
+const clearMp4Cache = () => {
+    const mp4Dir = path.join(__dirname, 'public', 'mp4');
+    if (!fs.existsSync(mp4Dir)) return;
+    try {
+        fs.rmSync(mp4Dir, { recursive: true, force: true });
+    } catch (err) {
+        if (typeof fs.rmdirSync === 'function') {
+            fs.rmdirSync(mp4Dir, { recursive: true });
+        } else {
+            throw err;
+        }
+    }
+};
+
 // Endpoint to list videos in the bucket
 app.get('/api/videos', async (req, res) => {
     try {
@@ -154,6 +168,17 @@ app.get('/api/videos', async (req, res) => {
     }
 });
 
+app.post('/api/reset-cache', (req, res) => {
+    try {
+        clearMp4Cache();
+        Object.keys(progressMap).forEach((key) => delete progressMap[key]);
+        res.json({ message: 'Cache reset' });
+    } catch (error) {
+        console.error('Error resetting cache:', error);
+        res.status(500).json({ error: 'Failed to reset cache', detail: error.message });
+    }
+});
+
 // Endpoint to transcode S3 video streaming to MP4
 app.post('/api/transcode', async (req, res) => {
     const { key, codec, encoder } = req.body;