新增桶权限选择

public/js/main.js

@@ -3,6 +3,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const loadingSpinner = document.getElementById('loading-spinner');
     const refreshBtn = document.getElementById('refresh-btn');
     const resetCacheBtn = document.getElementById('reset-cache-btn');
+    const usernameInput = document.getElementById('s3-username');
+    const passwordInput = document.getElementById('s3-password');
     const codecSelect = document.getElementById('codec-select');
     const encoderSelect = document.getElementById('encoder-select');
     const playerOverlay = document.getElementById('player-overlay');
@@ -15,6 +17,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const progressInfo = document.getElementById('progress-info');
     const progressText = document.getElementById('progress-text');
     const progressFill = document.getElementById('progress-fill');
+    const topBanner = document.getElementById('top-banner');
 
     let currentPollInterval = null;
     let selectedKey = null;
@@ -51,6 +54,21 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
+    const loadConfig = async () => {
+        if (!topBanner) 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;
+            topBanner.classList.remove('hidden');
+            document.title = title;
+        } catch (err) {
+            console.error('Config load failed:', err);
+        }
+    };
+
     const connectWebSocket = () => {
         const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
         ws = new WebSocket(`${protocol}://${window.location.host}`);
@@ -90,6 +108,20 @@ document.addEventListener('DOMContentLoaded', () => {
         progressFill.style.width = '0%';
     };
 
+    const getS3AuthHeaders = () => {
+        const headers = {};
+        const username = usernameInput?.value?.trim();
+        const password = passwordInput?.value || '';
+        if (username) headers['X-S3-Username'] = username;
+        if (password) headers['X-S3-Password'] = password;
+        return headers;
+    };
+
+    const getS3AuthPayload = () => ({
+        username: usernameInput?.value?.trim() || '',
+        password: passwordInput?.value || ''
+    });
+
     const resetCache = async () => {
         if (!resetCacheBtn) return;
         resetCacheBtn.disabled = true;
@@ -149,7 +181,7 @@ document.addEventListener('DOMContentLoaded', () => {
         videoListEl.innerHTML = '';
 
         try {
-            const res = await fetch('/api/videos');
+            const res = await fetch('/api/videos', { headers: getS3AuthHeaders() });
             if (!res.ok) throw new Error('Failed to fetch videos. Check S3 Config.');
 
             const data = await res.json();
@@ -296,10 +328,11 @@ document.addEventListener('DOMContentLoaded', () => {
         try {
             const codec = codecSelect?.value || 'h264';
             const encoder = encoderSelect?.value || 'software';
+            const authPayload = getS3AuthPayload();
             const res = await fetch('/api/transcode', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ key: selectedKey, codec, encoder })
+                headers: { 'Content-Type': 'application/json', ...getS3AuthHeaders() },
+                body: JSON.stringify({ key: selectedKey, codec, encoder, ...authPayload })
             });
             const data = await res.json();
 
@@ -374,5 +407,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Connect WebSocket and initial load
     connectWebSocket();
+    loadConfig();
     fetchVideos();
 });