基本OK

youtube_sub.js

@@ -185,6 +185,137 @@ GM_addStyle(`
         color: #fff;
         opacity: 1;
     }
+
+
+    .subtitle-manager[data-theme="light"] {
+        background: rgba(255, 255, 255, 0.95);
+        color: #0066cc;
+    }
+
+    .subtitle-manager[data-theme="light"] .subtitle-word {
+        color: #0066cc;
+        opacity: 0.8;
+    }
+
+    .subtitle-manager[data-theme="light"] .subtitle-word.active {
+        background: rgba(255, 255, 0, 0.3);
+        color: #000;
+        opacity: 1;
+    }
+
+    .subtitle-manager[data-theme="light"] .subtitle-tab {
+        color: #0066cc;
+        border-bottom: 1px solid #ddd;
+    }
+
+    .subtitle-manager[data-theme="light"] .subtitle-tab.active {
+        background: #e8e8e8;
+    }
+
+    .theme-toggle {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        padding: 4px 8px;
+        background: transparent;
+        border: 1px solid currentColor;
+        color: inherit;
+        cursor: pointer;
+        border-radius: 4px;
+        font-size: 12px;
+    }
+
+    .subtitle-toggle.theme-toggle {
+        left: -30px;
+        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-manager[data-theme="light"] .timestamp {
+        background: rgba(220, 220, 220, 0.9);
+        color: #333;
+    }
+    
+    .subtitle-manager[data-theme="light"] .subtitle-line .timestamp {
+        opacity: 0;
+        transition: opacity 0.2s ease;
+    }
+    
+    .subtitle-manager[data-theme="light"] .subtitle-line:hover .timestamp {
+        opacity: 1;
+    }
+
+   .word-btn {
+        background: none;
+        border: none;
+        padding: 1px 2px;
+        margin: 0;
+        cursor: pointer;
+        color: inherit;
+        font: inherit;
+    }
+
+    .word-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 2px;
+        outline: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+
+     .line-controls {
+        display: flex;
+        gap: 2px;  // Reduce from 4px
+        align-items: center;
+        margin: 0 4px; // Reduce from 8px
+    }
+
+
+    .line-btn {
+        width: 20px;  // Reduce from 24px
+        height: 20px; // Reduce from 24px
+        font-size: 10px; // Reduce from 12px
+    }
+
+    .line-btn:hover {
+        opacity: 1;
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .subtitle-line {
+        display: flex;
+        align-items: center;
+    }
+
+    .subtitle-text {
+        flex: 1;
+        padding: 0 8px;
+    }
+     .subtitle-manager[data-theme="light"] .word-btn:hover {
+        background: rgba(0, 0, 0, 0.05);
+        outline: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    // Keep active highlight styles
+    .subtitle-word.active {
+        background: rgba(255, 255, 255, 0.3);
+        color: #fff;
+        opacity: 1;
+        border-radius: 2px;
+    }
+
+    .subtitle-manager[data-theme="light"] .subtitle-word.active {
+        background: rgba(255, 255, 0, 0.3);
+        color: #000;
+        opacity: 1;
+    }
 `;
 
     // Apply main styles
@@ -489,6 +620,10 @@ GM_addStyle(`
                 });
             });
         }
+        toggleTheme() {
+            this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
+            this.container.dataset.theme = this.currentTheme;
+        }
 
         setupUI() {
             debug.log('Setting up UI');
@@ -502,6 +637,11 @@ GM_addStyle(`
                 toggleButton.className = 'subtitle-toggle';
                 toggleButton.textContent = '≡'; // Use textContent instead of innerHTML
 
+                const themeToggle = document.createElement('button');
+                themeToggle.className = 'subtitle-toggle theme-toggle';
+                themeToggle.style.top = '50px'; // Position below toggle button
+                themeToggle.textContent = '☀';
+                themeToggle.addEventListener('click', () => this.toggleTheme());
                 // Create tabs container
                 const tabs = document.createElement('div');
                 tabs.className = 'subtitle-tabs';
@@ -528,6 +668,7 @@ GM_addStyle(`
 
                 // Append elements
                 this.container.appendChild(toggleButton);
+                this.container.appendChild(themeToggle);
                 this.container.appendChild(tabs);
                 this.container.appendChild(content);
 
@@ -543,6 +684,9 @@ GM_addStyle(`
                 // Add toggle functionality
                 toggleButton.addEventListener('click', () => this.toggleCollapse());
 
+                // Add theme toggle button
+
+
             } catch (error) {
                 debug.error('Error setting up UI:', error);
             }
@@ -556,36 +700,77 @@ GM_addStyle(`
         // Update displaySingleLanguage method
         displaySingleLanguage(container, subtitles) {
             subtitles.forEach((sub, index) => {
-                // Only create lines with actual content
                 if (sub.words && sub.words.length > 0) {
                     const line = document.createElement('div');
                     line.className = 'subtitle-line';
-
+        
+                    // Add prefix buttons
+                    const prefixControls = document.createElement('div');
+                    prefixControls.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(`Prefix button ${text} clicked for line ${index}`);
+                        };
+                        prefixControls.appendChild(btn);
+                    });
+                    line.appendChild(prefixControls);
+        
+                    // Add subtitle text container
+                    const textContainer = document.createElement('div');
+                    textContainer.className = 'subtitle-text';
+        
                     sub.words.forEach((word, i) => {
                         if (word.text && word.text.trim()) {
-                            const wordSpan = document.createElement('span');
-                            wordSpan.className = 'subtitle-word';
-                            wordSpan.textContent = word.text.trim();
-                            wordSpan.dataset.start = word.startTime;
-                            wordSpan.dataset.end = word.endTime;
-                            line.appendChild(wordSpan);
-
+                            const wordBtn = document.createElement('button');
+                            wordBtn.className = 'word-btn subtitle-word'; // Add subtitle-word class for highlighting
+                            wordBtn.textContent = word.text.trim();
+                            wordBtn.dataset.start = word.startTime;
+                            wordBtn.dataset.end = word.endTime;
+                            wordBtn.onclick = (e) => {
+                                e.stopPropagation(); // Prevent line click
+                                // const video = document.querySelector('video');
+                                // if (video) {
+                                //     video.currentTime = parseFloat(word.startTime);
+                                // }
+                                console.log(`You click "${word.text.trim()}" word`);
+                            };
+                            textContainer.appendChild(wordBtn);
+        
                             if (i < sub.words.length - 1) {
-                                line.appendChild(document.createTextNode(' '));
+                                textContainer.appendChild(document.createTextNode(' '));
                             }
                         }
                     });
-
-                    // Only add lines with content
-                    if (line.textContent.trim()) {
-                        const timestamp = document.createElement('span');
-                        timestamp.className = 'timestamp';
-                        timestamp.textContent = this.formatTime(sub.startTime);
-                        line.appendChild(timestamp);
-                        line.dataset.time = sub.startTime;
-                        line.dataset.index = index;
-                        container.appendChild(line);
-                    }
+                    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 timestamp
+                    const timestamp = document.createElement('span');
+                    timestamp.className = 'timestamp';
+                    timestamp.textContent = this.formatTime(sub.startTime);
+                    line.appendChild(timestamp);
+                    
+                    line.dataset.time = sub.startTime;
+                    line.dataset.index = index;
+                    container.appendChild(line);
                 }
             });
         }