mixed 模式

youtube_sub.js

@@ -346,6 +346,35 @@ GM_addStyle(`
         font-size: 14px;
         line-height: 1.6;
     }
+
+    .mixed-text-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+    padding: 0 8px;
+}
+
+.mixed-line {
+    display: flex;
+    align-items: flex-start;
+    padding: 15px;
+    gap: 8px;
+}
+
+.zh-text {
+    color: #fff;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.en-text {
+    color: #aaa;
+    font-size: 14px;
+    line-height: 1.5;
+    border-top: 1px solid rgba(255,255,255,0.1);
+    padding-top: 8px;
+}
 `;
 
     // Add popup HTML
@@ -906,20 +935,20 @@ GM_addStyle(`
                     });
                     line.appendChild(textContainer);
 
-                    // Add suffix buttons
-                    const suffixControls = document.createElement('div');
-                    suffixControls.className = 'line-controls';
-                    ['✎', '↓'].forEach(text => {
-                        const btn = document.createElement('button');
-                        btn.className = 'line-btn';
-                        btn.textContent = text;
-                        btn.onclick = (e) => {
-                            e.stopPropagation(); // Prevent line click
-                            console.log(`Suffix button ${text} clicked for line ${index}`);
-                        };
-                        suffixControls.appendChild(btn);
-                    });
-                    line.appendChild(suffixControls);
+                    // // Add suffix buttons
+                    // const suffixControls = document.createElement('div');
+                    // suffixControls.className = 'line-controls';
+                    // ['✎', '↓'].forEach(text => {
+                    //     const btn = document.createElement('button');
+                    //     btn.className = 'line-btn';
+                    //     btn.textContent = text;
+                    //     btn.onclick = (e) => {
+                    //         e.stopPropagation(); // Prevent line click
+                    //         console.log(`Suffix button ${text} clicked for line ${index}`);
+                    //     };
+                    //     suffixControls.appendChild(btn);
+                    // });
+                    // line.appendChild(suffixControls);
 
                     // Add timestamp
                     const timestamp = document.createElement('span');
@@ -936,38 +965,70 @@ GM_addStyle(`
 
         displayMixed(container) {
             const maxLength = Math.max(
-                this.subtitles.english.length,
-                this.subtitles.chinese.length
+                this.subtitles.english?.length || 0,
+                this.subtitles.chinese?.length || 0
             );
-
+        
             for (let i = 0; i < maxLength; i++) {
                 const line = document.createElement('div');
                 line.className = 'subtitle-line mixed-line';
-
-                const enSub = this.subtitles.english[i];
-                const zhSub = this.subtitles.chinese[i];
-
-                const enText = document.createElement('div');
-                enText.className = 'en-text';
-                enText.textContent = enSub?.text || '';
-
+        
+                // Text container
+                const textContainer = document.createElement('div');
+                textContainer.className = 'mixed-text-container';
+        
+                // Chinese text with word buttons
                 const zhText = document.createElement('div');
                 zhText.className = 'zh-text';
-                zhText.textContent = zhSub?.text || '';
-
+                if (this.subtitles.chinese[i]?.words) {
+                    this.subtitles.chinese[i].words.forEach((word, idx) => {
+                        const wordBtn = document.createElement('button');
+                        wordBtn.className = 'word-btn subtitle-word';
+                        wordBtn.textContent = word.text;
+                        wordBtn.dataset.start = word.startTime;
+                        wordBtn.dataset.end = word.endTime;
+                        zhText.appendChild(wordBtn);
+                        if (idx < this.subtitles.chinese[i].words.length - 1) {
+                            zhText.appendChild(document.createTextNode(' '));
+                        }
+                    });
+                } else {
+                    zhText.textContent = '翻译中...';
+                }
+        
+                // English text with word buttons
+                const enText = document.createElement('div');
+                enText.className = 'en-text';
+                if (this.subtitles.english[i]?.words) {
+                    this.subtitles.english[i].words.forEach((word, idx) => {
+                        const wordBtn = document.createElement('button');
+                        wordBtn.className = 'word-btn subtitle-word';
+                        wordBtn.textContent = word.text;
+                        wordBtn.dataset.start = word.startTime;
+                        wordBtn.dataset.end = word.endTime;
+                        enText.appendChild(wordBtn);
+                        if (idx < this.subtitles.english[i].words.length - 1) {
+                            enText.appendChild(document.createTextNode(' '));
+                        }
+                    });
+                }
+        
+                textContainer.appendChild(zhText);
+                textContainer.appendChild(enText);
+                line.appendChild(textContainer);
+        
+                // Add timestamp
                 const timestamp = document.createElement('span');
                 timestamp.className = 'timestamp';
-                timestamp.textContent = enSub ? this.formatTime(enSub.startTime) : '';
-
-                line.appendChild(enText);
-                line.appendChild(zhText);
+                timestamp.textContent = this.subtitles.english[i] ? 
+                    this.formatTime(this.subtitles.english[i].startTime) : '';
                 line.appendChild(timestamp);
-
-                if (enSub) {
-                    line.dataset.time = enSub.startTime;
+        
+                if (this.subtitles.english[i]) {
+                    line.dataset.time = this.subtitles.english[i].startTime;
                     line.dataset.index = i;
                 }
-
+        
                 container.appendChild(line);
             }
         }