添加退出登录按钮

public/js/main.js

@@ -22,6 +22,9 @@ document.addEventListener('DOMContentLoaded', () => {
     const stopTranscodeBtn = document.getElementById('stop-transcode-btn');
     const playBtn = document.getElementById('play-btn');
     const topBanner = document.getElementById('top-banner');
+    const topBannerTitle = document.getElementById('top-banner-title');
+    const currentUsername = document.getElementById('current-username');
+    const logoutBtn = document.getElementById('logout-btn');
     const customControls = document.getElementById('custom-controls');
     const controlPlayToggle = document.getElementById('control-play-toggle');
     const controlMuteToggle = document.getElementById('control-mute-toggle');
@@ -71,6 +74,7 @@ document.addEventListener('DOMContentLoaded', () => {
     let currentVideoKey = null;
     let s3Username = '';
     let s3Password = '';
+    let authenticatedUsername = '';
     let s3AuthHeaders = {};
     const LEGACY_AUTH_STORAGE_KEY = 'media-coding-web:s3-auth';
     const SAVED_BUCKET_STORAGE_KEY = 'media-coding-web:selected-bucket';
@@ -723,13 +727,13 @@ document.addEventListener('DOMContentLoaded', () => {
     // --- End custom seek bar ---
 
     const loadConfig = async () => {
-        if (!topBanner) return;
+        if (!topBanner || !topBannerTitle) return;
         try {
             const res = await fetch('/api/config');
             if (!res.ok) throw new Error('Failed to load config');
             const data = await res.json();
             const title = data.title || 'S3 Media Transcoder';
-            topBanner.textContent = title;
+            topBannerTitle.textContent = title;
             topBanner.classList.remove('hidden');
             document.title = title;
             populateSelect(encoderSelect, data.videoEncoders || [], data.defaultVideoEncoder || 'h264_rkmpp');
@@ -800,11 +804,20 @@ document.addEventListener('DOMContentLoaded', () => {
     const showLogin = () => {
         if (loginScreen) loginScreen.classList.remove('hidden');
         if (appContainer) appContainer.classList.add('hidden');
+        if (topBanner) topBanner.classList.add('hidden');
     };
 
     const showApp = () => {
         if (loginScreen) loginScreen.classList.add('hidden');
         if (appContainer) appContainer.classList.remove('hidden');
+        if (topBanner) topBanner.classList.remove('hidden');
+    };
+
+    const updateAuthenticatedUser = (username) => {
+        authenticatedUsername = typeof username === 'string' ? username.trim() : '';
+        if (currentUsername) {
+            currentUsername.textContent = authenticatedUsername || '-';
+        }
     };
 
     const renderBuckets = (buckets) => {
@@ -830,11 +843,62 @@ document.addEventListener('DOMContentLoaded', () => {
         loginError.classList.add('hidden');
     };
 
-    const applyAuthenticatedState = async (buckets) => {
+    const resetAuthenticatedState = () => {
+        stopPolling();
+        selectedBucket = null;
+        selectedKey = null;
+        currentVideoKey = null;
+        subscribedKey = null;
+        setAuthHeaders('', '');
+        saveSelectedBucket('');
+        updateAuthenticatedUser('');
+        clearLoginError();
+
+        if (bucketSelect) {
+            bucketSelect.innerHTML = '<option value="" disabled selected>Choose a bucket</option>';
+        }
+        if (videoListEl) {
+            videoListEl.innerHTML = '';
+            videoListEl.classList.add('hidden');
+        }
+        if (loadingSpinner) {
+            loadingSpinner.classList.remove('hidden');
+            loadingSpinner.innerHTML = `
+                <div class="spinner"></div>
+                <p>Fetching S3 Objects...</p>
+            `;
+        }
+        if (nowPlaying) nowPlaying.classList.add('hidden');
+        if (currentVideoTitle) currentVideoTitle.textContent = 'video.mp4';
+        if (loginPasswordInput) loginPasswordInput.value = '';
+        if (transcodingOverlay) transcodingOverlay.classList.add('hidden');
+        if (playerOverlay) playerOverlay.classList.remove('hidden');
+        if (videoPlayer) {
+            videoPlayer.pause();
+            videoPlayer.removeAttribute('src');
+            videoPlayer.load();
+            videoPlayer.classList.add('hidden');
+        }
+        isStreamActive = false;
+        videoDuration = 0;
+        seekOffset = 0;
+        if (seekCurrentTime) seekCurrentTime.textContent = formatTime(0);
+        if (seekTotalTime) seekTotalTime.textContent = formatTime(0);
+        hideSeekBar();
+        hideCustomControls();
+        resetPhases();
+        resetSubtitleTracks();
+        setPlaybackStatus('Paused', 'paused');
+        updatePlayControls();
+        updateVolumeControls();
+    };
+
+    const applyAuthenticatedState = async (buckets, username = '') => {
         if (!Array.isArray(buckets) || buckets.length === 0) {
             throw new Error('No buckets available for this account');
         }
 
+        updateAuthenticatedUser(username);
         renderBuckets(buckets);
         showApp();
         const savedBucket = loadSelectedBucket();
@@ -851,6 +915,33 @@ document.addEventListener('DOMContentLoaded', () => {
         await fetchVideos(selectedBucket);
     };
 
+    const logout = async () => {
+        if (logoutBtn) {
+            logoutBtn.disabled = true;
+            logoutBtn.textContent = '退出中...';
+        }
+
+        try {
+            const res = await fetch('/api/logout', { method: 'POST' });
+            if (!res.ok) {
+                const data = await res.json().catch(() => ({}));
+                throw new Error(data.error || 'Logout failed');
+            }
+        } catch (error) {
+            console.error('Logout failed:', error);
+            alert(`退出登录失败: ${error.message}`);
+            return;
+        } finally {
+            if (logoutBtn) {
+                logoutBtn.disabled = false;
+                logoutBtn.textContent = '退出登录';
+            }
+        }
+
+        resetAuthenticatedState();
+        showLogin();
+    };
+
     const login = async (options = {}) => {
         if (!loginUsernameInput || !loginPasswordInput) return false;
         const username = typeof options.username === 'string' ? options.username.trim() : loginUsernameInput.value.trim();
@@ -876,7 +967,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const data = await res.json();
             if (loginUsernameInput) loginUsernameInput.value = username;
             if (loginPasswordInput) loginPasswordInput.value = '';
-            await applyAuthenticatedState(data.buckets);
+            await applyAuthenticatedState(data.buckets, data.username || username);
             return true;
         } catch (err) {
             console.error('Login error:', err);
@@ -900,7 +991,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 return false;
             }
             const data = await res.json();
-            await applyAuthenticatedState(data.buckets || []);
+            await applyAuthenticatedState(data.buckets || [], data.username || '');
             return true;
         } catch (error) {
             console.error('Session restore failed:', error);
@@ -1344,6 +1435,9 @@ document.addEventListener('DOMContentLoaded', () => {
     if (loginBtn) {
         loginBtn.addEventListener('click', login);
     }
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', logout);
+    }
     if (bucketSelect) {
         bucketSelect.addEventListener('change', async (event) => {
             selectedBucket = event.target.value;