# Synchronized Transcript Viewer - Implementation
## 🎯 Feature Overview
**Karaoke-style transcript viewer** that scrolls automatically in perfect sync with video playback.
### Key Features
- ✅ Shows 5-10 lines at a time (200px height, scrollable)
- ✅ Auto-scrolls smoothly to keep active line centered
- ✅ Active line highlighted with accent color from thumbnail
- ✅ Past lines dimmed (50% opacity)
- ✅ Future lines normal
- ✅ Click any line → video seeks to that timestamp
- ✅ Toggle auto-scroll ON/OFF
- ✅ Smooth transitions (0.3s ease)
---
## 📐 Visual Design
```
┌─────────────────────────────────────┐
│ SYNCHRONIZED TRANSCRIPT [Auto ON] │ ← Header
├─────────────────────────────────────┤
│ Line 1 (past, dimmed) │ ← 50% opacity
│ Line 2 (past, dimmed) │
│ ▶ Line 3 (ACTIVE, highlighted) ◀ │ ← Accent color bg
│ Line 4 (future, normal) │
│ Line 5 (future, normal) │
└─────────────────────────────────────┘
↑ Auto-scrolls to keep active centered
```
---
## 🔧 Technical Implementation
### HTML Structure
```html
<div class="sync-transcript-viewer">
<div class="viewer-header">
<div class="viewer-title">SYNCHRONIZED TRANSCRIPT</div>
<button id="toggleAutoScroll">Auto-scroll ON</button>
</div>
<div class="transcript-lines" id="syncTranscript">
<!-- Lines rendered by JavaScript -->
</div>
</div>
```
### CSS (200px height = ~5-10 lines)
- Fixed height: 200px
- Overflow-y: auto (scrollable)
- Scroll-behavior: smooth
- Line padding: 8px
- Line height: 1.8 (comfortable reading)
- Active line: Accent color background, scaled up
- Past lines: 50% opacity
### JavaScript Logic
**1. Split chunks into sentences:**
```javascript
chunks.forEach(chunk => {
const sentences = chunk.text.match(/[^.!?]+[.!?]+/g);
// Calculate timestamp for each sentence
});
```
**2. Update on video time:**
```javascript
function updateSyncTranscript(currentTime) {
// Find which line matches current time
// Highlight active line
// Dim past lines
// Auto-scroll to center
}
```
**3. Auto-scroll logic:**
```javascript
const scrollTo = lineTop - (containerHeight / 2) + (lineHeight / 2);
container.scrollTo({ top: scrollTo, behavior: 'smooth' });
```
---
## 🎨 Styling with Thumbnail Colors
Active line uses extracted accent color:
```css
.transcript-line.active {
background: var(--accent-light); /* From thumbnail! */
color: var(--black);
}
```
---
## 🚀 Integration Points
**In InteractiveLabDashboard:**
1. Add viewer HTML below video player
2. Add CSS to styles
3. Add JavaScript for sync tracking
4. Call `updateSyncTranscript(currentTime)` on time update
5. Initialize on player ready
**Position:**
```
Video Player
Metadata Strip
Timeline Bar
⬇️ NEW: Sync Transcript Viewer (200px)
Chapters
Full Transcript (below)
```
---
## ✨ User Experience
**As video plays:**
1. Current sentence highlights with video's theme color
2. Viewer auto-scrolls smoothly
3. Previous sentences dim (context visible)
4. User can click any sentence to jump
**Controls:**
- Toggle auto-scroll (manual navigation)
- Click sentence to seek
- Scroll manually to preview upcoming content
---
## 📊 Benefits
- **Better comprehension** - See what's being said in real-time
- **Easy navigation** - Click to jump to specific sentences
- **Professional UX** - Like YouTube auto-generated captions but better
- **Adaptive theming** - Uses video's colors
- **Smooth experience** - Centered scrolling, smooth transitions
---
**This will make ytpipe dashboards feel like a premium video analysis tool!** 🌟
