新增转码进度显示功能，优化视频标题显示，添加编码器选择面板。

public/css/style.css

@@ -401,6 +401,35 @@ header p {
     font-weight: 600;
 }
 
+.progress-info {
+    width: 100%;
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: stretch;
+}
+
+.progress-text {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 10px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.12);
+    overflow: hidden;
+}
+
+.progress-fill {
+    width: 0%;
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
+    transition: width 0.25s ease;
+}
+
 .play-btn {
     margin-top: 1rem;
     padding: 0.85rem 1.25rem;

public/index.html

@@ -65,6 +65,12 @@
                         <div class="spinner"></div>
                         <h3>Transcoding via FFmpeg...</h3>
                         <p>Generating HLS segments, please wait.</p>
+                        <div id="progress-info" class="progress-info hidden">
+                            <div id="progress-text" class="progress-text">Initializing...</div>
+                            <div class="progress-bar">
+                                <div id="progress-fill" class="progress-fill"></div>
+                            </div>
+                        </div>
                     </div>
                     <video id="video-player" controls preload="auto" class="hidden"></video>
                 </div>

public/js/main.js

@@ -10,9 +10,27 @@ document.addEventListener('DOMContentLoaded', () => {
     const nowPlaying = document.getElementById('now-playing');
     const currentVideoTitle = document.getElementById('current-video-title');
     const playBtn = document.getElementById('play-btn');
+    const progressInfo = document.getElementById('progress-info');
+    const progressText = document.getElementById('progress-text');
+    const progressFill = document.getElementById('progress-fill');
 
     let currentPollInterval = null;
 
+    const setProgress = (progress) => {
+        if (!progressInfo || !progressText || !progressFill) return;
+        const percent = Math.min(Math.max(Math.round(progress?.percent || 0), 0), 100);
+        progressInfo.classList.remove('hidden');
+        progressText.textContent = `${progress?.details || progress?.status || 'Transcoding...'} ${percent ? `${percent}%` : ''}`.trim();
+        progressFill.style.width = `${percent}%`;
+    };
+
+    const resetProgress = () => {
+        if (!progressInfo || !progressText || !progressFill) return;
+        progressInfo.classList.add('hidden');
+        progressText.textContent = '';
+        progressFill.style.width = '0%';
+    };
+
     if (playBtn) {
         playBtn.addEventListener('click', () => {
             videoPlayer.play().catch(e => console.log('Play blocked:', e));
@@ -144,11 +162,13 @@ document.addEventListener('DOMContentLoaded', () => {
         videoPlayer.classList.add('hidden');
         videoPlayer.pause();
         if (playBtn) playBtn.classList.add('hidden');
+        resetProgress();
 
         nowPlaying.classList.remove('hidden');
         currentVideoTitle.textContent = key.split('/').pop();
 
         transcodingOverlay.classList.remove('hidden');
+        setProgress({ status: 'Starting transcoding...', percent: 0, details: 'Starting transcoding...' });
 
         try {
             const codec = codecSelect?.value || 'h264';
@@ -181,8 +201,13 @@ document.addEventListener('DOMContentLoaded', () => {
                 const res = await fetch(`/api/status?key=${encodeURIComponent(key)}`);
                 const data = await res.json();
 
-                    if (data.ready) {
+                    if (data.progress) {
+                    setProgress(data.progress);
+                }
+
+                if (data.ready) {
                     stopPolling();
+                    setProgress({ status: 'Ready to play', percent: 100, details: 'Ready to play' });
                     playHlsStream(data.hlsUrl);
                 } else if (attempts >= maxAttempts) {
                     stopPolling();
@@ -206,6 +231,7 @@ document.addEventListener('DOMContentLoaded', () => {
         transcodingOverlay.classList.add('hidden');
         videoPlayer.classList.remove('hidden');
         playBtn.classList.add('hidden');
+        resetProgress();
 
         if (Hls.isSupported()) {
             const hls = new Hls();