添加语音播放

youtube_sub.js

@@ -23,6 +23,11 @@ GM_addStyle(`
 (function () {
     'use strict';
 
+    // Singleton check
+    if (window.subtitleManagerInstance) {
+        window.subtitleManagerInstance.cleanup();
+    }
+
     // 增强的样式定义，添加过渡效果
     const styles = `
     .subtitle-manager {
@@ -322,7 +327,7 @@ GM_addStyle(`
         opacity: 1;
     }
 
-    .word-definition-popup {
+     .word-definition-popup {
         position: fixed;
         right: -400px;
         top: 50%;
@@ -336,6 +341,8 @@ GM_addStyle(`
         z-index: 10000;
         max-height: 80vh;
         overflow-y: auto;
+        font-size: 15px;
+        line-height: 1.6;
     }
 
     .word-definition-popup.show {
@@ -343,9 +350,33 @@ GM_addStyle(`
     }
 
     .word-definition-popup .markdown {
-        font-size: 14px;
+        padding-top: 50px;
+        font-size: 15px;
         line-height: 1.6;
     }
+        .word-definition-popup .markdown p {
+        margin: 12px 0;
+    }
+
+    .word-definition-popup .markdown strong {
+        color: #4CAF50;
+        font-weight: 600;
+    }
+
+    .word-definition-popup .markdown em {
+        color: #FFC107;
+        font-style: normal;
+    }
+
+    .word-definition-popup[data-theme="light"] {
+        background: rgba(255, 255, 255, 0.95);
+        color: #333;
+    }
+
+    .word-definition-popup[data-theme="light"] .speaker-btn {
+        background: rgba(0, 0, 0, 0.1);
+        color: #333;
+    }
 
     .mixed-text-container {
     display: flex;
@@ -375,6 +406,69 @@ GM_addStyle(`
     border-top: 1px solid rgba(255,255,255,0.1);
     padding-top: 8px;
 }
+
+
+ @media (max-width: 768px), (orientation: portrait) {
+        .subtitle-manager {
+            position: relative;
+            right: auto;
+            top: auto;
+            width: 100%;
+            height: 50vh;
+            margin-top: 10px;
+            margin-top: 400px; /* Move down below video */
+            background: rgba(33, 33, 33, 0.98); /* Slightly more opaque for mobile */
+        }
+
+        .subtitle-manager.collapsed {
+            transform: translateY(calc(100% - 40px));
+            margin-top: 400px; /* Keep margin when collapsed */
+        }
+
+        .subtitle-toggle {
+            top: -30px;
+            left: 10px;
+            transform: rotate(90deg);
+        }
+
+        .theme-toggle {
+            top: -30px;
+            right: 10px;
+        }
+       
+        .subtitle-line {
+            width: calc(100% - 30px);
+            max-width: none;
+        }
+    }
+
+
+    .word-definition-popup .speaker-btn {
+        position: absolute;
+        top: 15px;
+        right: 15px;
+        width: 36px;
+        height: 36px;
+        background: rgba(255, 255, 255, 0.1);
+        border: none;
+        border-radius: 50%;
+        color: white;
+        cursor: pointer;
+        font-size: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+    }
+
+    .word-definition-popup .speaker-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+        transform: scale(1.1);
+    }
+
+    .word-definition-popup[data-theme="light"] .speaker-btn {
+        color: #333;
+    }
 `;
 
     // Add popup HTML
@@ -422,8 +516,44 @@ GM_addStyle(`
             this.container = null;
             this.currentTime = 0;
             this.isCollapsed = false;
+            this.isMobile = window.innerWidth <= 768 || window.matchMedia('(orientation: portrait)').matches;
             this.setupUI();
             this.setupEventListeners();
+            window.subtitleManagerInstance = this;
+        }
+        cleanup() {
+            // Remove existing instance
+            if (this.container) {
+                this.container.remove();
+            }
+
+            // Clear any event listeners
+            window.removeEventListener('resize', this.resizeHandler);
+        }
+
+        setupResizeHandler() {
+            this.resizeHandler = () => {
+                const isMobile = window.innerWidth <= 768 || window.matchMedia('(orientation: portrait)').matches;
+                if (this.isMobile !== isMobile) {
+                    this.isMobile = isMobile;
+                    this.updateLayout();
+                }
+            };
+
+            window.addEventListener('resize', this.resizeHandler);
+        }
+
+        updateLayout() {
+            if (this.isMobile) {
+                // Insert after video player
+                const player = document.querySelector('.html5-video-player');
+                if (player?.parentNode) {
+                    player.parentNode.insertBefore(this.container, player.nextSibling);
+                }
+            } else {
+                // Move back to body for desktop view
+                document.body.appendChild(this.container);
+            }
         }
 
         checkCaptionSources(player) {
@@ -806,13 +936,15 @@ GM_addStyle(`
                             wordBtn.onclick = async (e) => {
                                 e.stopPropagation();
                                 console.log(`You click "${word.text.trim()}" word`);
-
+                                const wordText = word.text.trim();
                                 let popup = document.querySelector('.word-definition-popup');
                                 if (!popup) {
                                     // Create popup container
                                     popup = document.createElement('div');
                                     popup.className = 'word-definition-popup';
 
+                                   
+                                   
                                     // Create markdown container
                                     const markdownDiv = document.createElement('div');
                                     markdownDiv.className = 'markdown';
@@ -826,6 +958,30 @@ GM_addStyle(`
                                         popup.classList.remove('show');
                                     });
                                 }
+                                // Update speaker button for current word
+                                let speakerBtn = popup.querySelector('.speaker-btn');
+                                if (speakerBtn) {
+                                    speakerBtn.remove();
+                                }
+
+                                // Create new speaker button with current word
+                                speakerBtn = document.createElement('button');
+                                speakerBtn.className = 'speaker-btn';
+                                speakerBtn.textContent = '🔊';
+                                speakerBtn.onclick = (e) => {
+                                    e.stopPropagation();
+                                    try {
+                                        const utterance = new SpeechSynthesisUtterance(wordText); // Use current wordText
+                                        utterance.lang = 'en-US';
+                                        utterance.rate = 0.9;
+                                        speechSynthesis.speak(utterance);
+                                    } catch (error) {
+                                        console.error('TTS failed:', error);
+                                    }
+                                };
+
+                                // Insert new speaker button at the start
+                                popup.insertBefore(speakerBtn, popup.firstChild);
 
                                 // Ensure markdown container exists
                                 let markdownContainer = popup.querySelector('.markdown');
@@ -968,15 +1124,15 @@ GM_addStyle(`
                 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';
-        
+
                 // 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';
@@ -995,7 +1151,7 @@ GM_addStyle(`
                 } else {
                     zhText.textContent = '翻译中...';
                 }
-        
+
                 // English text with word buttons
                 const enText = document.createElement('div');
                 enText.className = 'en-text';
@@ -1012,23 +1168,23 @@ GM_addStyle(`
                         }
                     });
                 }
-        
+
                 textContainer.appendChild(zhText);
                 textContainer.appendChild(enText);
                 line.appendChild(textContainer);
-        
+
                 // Add timestamp
                 const timestamp = document.createElement('span');
                 timestamp.className = 'timestamp';
-                timestamp.textContent = this.subtitles.english[i] ? 
+                timestamp.textContent = this.subtitles.english[i] ?
                     this.formatTime(this.subtitles.english[i].startTime) : '';
                 line.appendChild(timestamp);
-        
+
                 if (this.subtitles.english[i]) {
                     line.dataset.time = this.subtitles.english[i].startTime;
                     line.dataset.index = i;
                 }
-        
+
                 container.appendChild(line);
             }
         }
@@ -1591,6 +1747,10 @@ GM_addStyle(`
         debug.log('Current URL:', window.location.href);
         debug.log('Document ready state:', document.readyState);
 
+        // Cleanup existing instance
+        if (window.subtitleManagerInstance) {
+            window.subtitleManagerInstance.cleanup();
+        }
         if (!window.location.pathname.includes('/watch')) {
             debug.log('Not a video page, skipping');
             return;