11

youtube_sub.js

@@ -20,131 +20,153 @@ GM_addStyle(`
 
     // 增强的样式定义，添加过渡效果
     const styles = `
-        .subtitle-manager {
-            position: fixed;
-            right: 0;
-            top: 60px;
-            width: 300px;
-            height: calc(100vh - 60px);
-            background: rgba(33, 33, 33, 0.95);
-            color: white;
-            z-index: 9999;
-            font-family: Arial, sans-serif;
-            display: flex;
-            flex-direction: column;
-            transition: transform 0.3s ease;
-        }
+    .subtitle-manager {
+        position: fixed;
+        right: 0;
+        top: 60px;
+        width: 450px;
+        height: calc(100vh - 60px);
+        background: rgba(33, 33, 33, 0.95);
+        color: white;
+        z-index: 9999;
+        font-family: Arial, sans-serif;
+        display: flex;
+        flex-direction: column;
+        transition: transform 0.3s ease;
+    }
 
-        .subtitle-manager.collapsed {
-            transform: translateX(290px);
-        }
+    .subtitle-manager.collapsed {
+        transform: translateX(420px);
+    }
 
-        .subtitle-toggle {
-            position: absolute;
-            left: -30px;
-            top: 10px;
-            width: 30px;
-            height: 30px;
-            background: rgba(33, 33, 33, 0.95);
-            border: none;
-            color: white;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 4px 0 0 4px;
-        }
+    .subtitle-toggle {
+        position: absolute;
+        left: -30px;
+        top: 10px;
+        width: 30px;
+        height: 30px;
+        background: rgba(33, 33, 33, 0.95);
+        border: none;
+        color: white;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px 0 0 4px;
+    }
 
-        .subtitle-tabs {
-            display: flex;
-            border-bottom: 1px solid #444;
-        }
+    .subtitle-tabs {
+        display: flex;
+        border-bottom: 1px solid #444;
+    }
 
-        .subtitle-tab {
-            flex: 1;
-            padding: 10px;
-            text-align: center;
-            cursor: pointer;
-            background: transparent;
-            border: none;
-            color: white;
-            transition: background-color 0.2s ease;
-        }
+    .subtitle-tab {
+        flex: 1;
+        padding: 12px;
+        text-align: center;
+        cursor: pointer;
+        background: transparent;
+        border: none;
+        color: white;
+        transition: background-color 0.2s ease;
+        font-size: 14px;
+    }
 
-        .subtitle-tab.active {
-            background: #444;
-        }
+    .subtitle-tab.active {
+        background: #444;
+        font-weight: bold;
+    }
 
-        .subtitle-content {
-            flex: 1;
-            overflow-y: auto;
-            padding: 10px;
-            transition: opacity 0.3s ease;
-        }
+    .subtitle-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 15px;
+        transition: opacity 0.3s ease;
+    }
 
-        .subtitle-line {
-            padding: 8px;
-            margin: 4px 0;
-            cursor: pointer;
-            border-radius: 4px;
-            transition: background-color 0.2s ease, transform 0.1s ease;
-            position: relative;
-        }
+    .subtitle-line {
+        padding: 12px 15px;
+        margin: 6px 0;
+        cursor: pointer;
+        border-radius: 4px;
+        transition: background-color 0.2s ease, transform 0.1s ease;
+        position: relative;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        line-height: 1.5;
+        width: 410px;
+        font-size: 14px;
+    }
 
-        .subtitle-line:hover {
-            background: rgba(255, 255, 255, 0.1);
-            transform: translateX(5px);
-        }
+    .subtitle-line:hover {
+        background: rgba(255, 255, 255, 0.1);
+        transform: translateX(5px);
+    }
 
-        .subtitle-line.active {
-            background: rgba(255, 255, 255, 0.2);
-        }
+    .subtitle-line.active {
+        background: rgba(255, 255, 255, 0.2);
+    }
 
-        .mixed-line {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            padding: 12px 8px;
-        }
+    .mixed-line {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 15px;
+    }
 
-        .en-text {
-            color: #fff;
-            font-size: 14px;
-        }
+    .en-text {
+        color: #fff;
+        font-size: 14px;
+        line-height: 1.5;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
 
-        .zh-text {
-            color: #aaa;
-            font-size: 14px;
-        }
+    .zh-text {
+        color: #aaa;
+        font-size: 14px;
+        line-height: 1.5;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        border-top: 1px solid rgba(255,255,255,0.1);
+        margin-top: 8px;
+        padding-top: 8px;
+    }
 
-        .timestamp {
-            position: absolute;
-            right: 8px;
-            top: 4px;
-            font-size: 10px;
-            color: #888;
-            opacity: 0;
-            transition: opacity 0.2s ease;
-        }
+    .timestamp {
+        position: absolute;
+        right: 12px;
+        top: 8px;
+        font-size: 11px;
+        color: #888;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        background: rgba(0,0,0,0.5);
+        padding: 2px 6px;
+        border-radius: 3px;
+    }
 
-        .subtitle-line:hover .timestamp {
-            opacity: 1;
-        }
+    .subtitle-line:hover .timestamp {
+        opacity: 1;
+    }
 
-        /* 自定义滚动条样式 */
-        .subtitle-content::-webkit-scrollbar {
-            width: 8px;
-        }
+    .subtitle-content::-webkit-scrollbar {
+        width: 8px;
+    }
 
-        .subtitle-content::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.1);
-        }
+    .subtitle-content::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.1);
+    }
 
-        .subtitle-content::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 4px;
-        }
-    `;
+    .subtitle-content::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 4px;
+    }
+
+    .subtitle-content::-webkit-scrollbar-thumb:hover {
+        background: rgba(255, 255, 255, 0.4);
+    }
+`;
 
     // Apply main styles
     GM_addStyle(styles);
@@ -280,7 +302,7 @@ GM_addStyle(`
                     return tracks;
                 }
 
-                // Method 2: Get from player config 
+                // Method 2: Get from player config
                 if (player.getPlayerResponse) {
                     const response = await player.getPlayerResponse();
                     debug.log('Player response:', response);
@@ -320,26 +342,26 @@ GM_addStyle(`
         async loadSubtitles(track) {
             const MAX_RETRIES = 3;
             let retries = 0;
-        
+
             while (retries < MAX_RETRIES) {
                 try {
                     // Use baseUrl instead of src
                     const url = new URL(track.baseUrl);
                     // Add required params for JSON format
                     url.searchParams.set('fmt', 'json3');
-                    
+
                     const response = await fetch(url.toString());
                     if (!response.ok) {
                         throw new Error(`HTTP error: ${response.status}`);
                     }
-        
+
                     const data = await response.json();
                     debug.log('Subtitle data:', data);
-        
+
                     if (!data?.events) {
                         throw new Error('Invalid subtitle data format');
                     }
-        
+                    debugger;
                     const subtitles = data.events
                         .filter(event => event.segs && event.tStartMs !== undefined)
                         .map(event => ({
@@ -348,10 +370,10 @@ GM_addStyle(`
                             text: event.segs.map(seg => seg.utf8).join('').trim()
                         }))
                         .filter(sub => sub.text);
-        
+
                     debug.log(`Loaded ${subtitles.length} subtitles`);
                     return subtitles;
-        
+
                 } catch (error) {
                     debug.error(`Subtitle load attempt ${retries + 1} failed:`, error);
                     retries++;
@@ -613,24 +635,25 @@ GM_addStyle(`
             this.setupVideoTimeUpdate();
         }
 
+
         setupVideoTimeUpdate() {
             let rafId = null;
             const updateThreshold = 16; // ~60fps
             let lastUpdate = 0;
-    
+
             const findSubtitleIndex = (time, subtitles) => {
                 // Binary search for faster lookup
                 let start = 0;
                 let end = subtitles.length - 1;
-                
+
                 while (start <= end) {
                     const mid = Math.floor((start + end) / 2);
                     const sub = subtitles[mid];
-                    
+
                     if (time >= sub.startTime && time <= sub.endTime) {
                         return mid;
                     }
-                    
+
                     if (time < sub.startTime) {
                         end = mid - 1;
                     } else {
@@ -639,7 +662,7 @@ GM_addStyle(`
                 }
                 return -1;
             };
-    
+
             const handleTimeUpdate = (video) => {
                 const now = performance.now();
                 if (now - lastUpdate < updateThreshold) {
@@ -647,24 +670,24 @@ GM_addStyle(`
                     return;
                 }
                 lastUpdate = now;
-    
+
                 const currentTime = video.currentTime;
-                const subtitles = this.currentTab === 'chinese' ? 
+                const subtitles = this.currentTab === 'chinese' ?
                     this.subtitles.chinese : this.subtitles.english;
-    
+
                 const newIndex = findSubtitleIndex(currentTime, subtitles);
                 if (newIndex === this.subtitleIndex) {
                     rafId = requestAnimationFrame(() => handleTimeUpdate(video));
                     return;
                 }
-    
+
                 this.subtitleIndex = newIndex;
                 const lines = this.container.querySelectorAll('.subtitle-line');
-                
+
                 lines.forEach(line => {
                     const lineIndex = parseInt(line.dataset.index);
                     const isActive = lineIndex === newIndex;
-                    
+
                     line.classList.toggle('active', isActive);
                     if (isActive) {
                         line.scrollIntoView({
@@ -673,26 +696,26 @@ GM_addStyle(`
                         });
                     }
                 });
-    
+
                 rafId = requestAnimationFrame(() => handleTimeUpdate(video));
             };
-    
+
             const setupVideoListener = async () => {
                 const video = await this.waitForElement('video');
                 if (video) {
                     handleTimeUpdate(video);
-                    
+
                     video.addEventListener('pause', () => {
                         cancelAnimationFrame(rafId);
                     });
-                    
+
                     video.addEventListener('play', () => {
                         lastUpdate = 0;
                         handleTimeUpdate(video);
                     });
                 }
             };
-    
+
             setupVideoListener();
         }
 
@@ -737,7 +760,7 @@ GM_addStyle(`
 
             //enter debug mode
 
-            //debugger;
+            debugger;
 
             // 3. Load subtitle data
             for (const track of tracks) {
@@ -762,20 +785,20 @@ GM_addStyle(`
         updateSubtitleDisplay() {
             const content = this.container.querySelector('.subtitle-content');
             content.style.opacity = '0';
-    
+
             setTimeout(() => {
                 // Clear content safely
                 while (content.firstChild) {
                     content.removeChild(content.firstChild);
                 }
-    
+
                 // Check for empty subtitles
                 if (!this.subtitles.english.length && !this.subtitles.chinese.length) {
                     content.appendChild(this.createMessageElement('No subtitles available'));
                     content.style.opacity = '1';
                     return;
                 }
-    
+
                 // Display based on current tab
                 switch (this.currentTab) {
                     case 'english':
@@ -800,7 +823,7 @@ GM_addStyle(`
                         }
                         break;
                 }
-    
+
                 // Fade in
                 content.style.opacity = '1';
             }, 300);