Features

Categories (e.g., "Web Development", "Data Science")
  └── Learning Paths / Routes
      └── Courses
          └── Modules
              └── Classes (individual lessons)

// From js/services/state.js
search(query) {
    const results = [];
    categories.forEach((cat, catIdx) => {
        cat.routes.forEach((route, routeIdx) => {
            if (route.name.toLowerCase().includes(query)) {
                results.push({ type: 'route', item: route, catIdx, routeIdx });
            }
            if (!route.isCourse && route.courses) {
                route.courses.forEach((course, courseIdx) => {
                    if (course.name.toLowerCase().includes(query)) {
                        results.push({ type: 'course', item: course, catIdx, routeIdx, courseIdx });
                    }
                });
            }
        });
    });
    return results;
}

# From rebuild_cache_drive.py
def classify_file(filename):
    lower_name = filename.lower()
    if lower_name.endswith('_summary.html'):
        return 'summary'
    elif lower_name.endswith('.vtt'):
        return 'subtitles'
    elif lower_name.endswith('.mp4'):
        return 'video'
    elif lower_name.endswith('.txt') and 'lectura' in lower_name:
        return 'reading'
    elif lower_name.endswith('.html'):
        return 'html'
    else:
        return 'resource'

// From js/services/state.js
async ensureCourseDetail(catIdx, routeIdx, courseIdx) {
    const course = this.getCourse(catIdx, routeIdx, courseIdx);
    
    // Check if already loaded
    if (this.isCourseDetailLoaded(course)) {
        return course;
    }
    
    // Fetch detail from server
    const detail = await ApiService.getCourseDetail(catIdx, routeIdx, courseIdx);
    
    // Update local cache
    this.updateCourseInCache(catIdx, routeIdx, courseIdx, detail);
    
    return this.getCourse(catIdx, routeIdx, courseIdx);
}

Browser Request:
GET /drive/files/ABC123
Range: bytes=0-1048575

Server Response:
HTTP 206 Partial Content
Content-Range: bytes 0-1048575/52428800
Content-Type: video/mp4

[1MB chunk of video data...]

// From js/views/player.js - Frame-level sync monitoring
video.requestVideoFrameCallback((now, metadata) => {
    const drift = this._calculateAudioVideoDrift(video);
    
    if (Math.abs(drift) > SOFT_CORRECTION_THRESHOLD) {
        // Soft correction: Adjust playback rate slightly
        video.playbackRate = drift > 0 ? 1.02 : 0.98;
    }
    
    if (Math.abs(drift) > HARD_CORRECTION_THRESHOLD) {
        // Hard correction: Pause and resync
        video.pause();
        video.currentTime += drift / 1000;
        video.play();
    }
    
    // Continue monitoring
    this._videoFrameCallbackId = video.requestVideoFrameCallback(...);
});

// From js/views/player.js
destroy() {
    this._isDestroyed = true;
    
    // Stop and unload video
    if (this._videoEl) {
        this._videoEl.pause();
        this._videoEl.src = '';
        this._videoEl.load();  // Force release of resources
    }
    
    // Cancel frame callbacks
    if (this._videoFrameCallbackId) {
        this._videoEl.cancelVideoFrameCallback(this._videoFrameCallbackId);
    }
    
    // Clear timers
    clearTimeout(this._startPlaybackTimeout);
    clearTimeout(this._syncPromptHideTimeout);
}

// From js/services/state.js
const progress = {
  'not_started': {
    // No entry in progress object
  },
  'in_progress': {
    status: 'in_progress',
    lastWatched: '2026-03-07T10:30:00.000Z',
    watchTime: 245  // seconds watched
  },
  'complete': {
    status: 'complete',
    completedAt: '2026-03-07T11:15:00.000Z'
  }
};

// From js/views/player.js
video.addEventListener('timeupdate', () => {
    const progress = video.currentTime / video.duration;
    
    if (progress >= 0.9 && !this.isClassComplete(classKey)) {
        state.markClassComplete(classKey);
        this.updateProgressIndicators();
    }
});

// From js/services/state.js
mergeProgress(localProgress, serverProgress) {
    const merged = {};
    
    Object.keys(allKeys).forEach(classKey => {
        const local = localProgress[classKey];
        const server = serverProgress[classKey];
        
        // Priority 1: Highest completion status wins
        if (local.status === 'complete' || server.status === 'complete') {
            merged[classKey] = local.status === 'complete' ? local : server;
        }
        // Priority 2: Most recent timestamp wins
        else {
            const localTime = Date.parse(local.lastWatched || local.completedAt);
            const serverTime = Date.parse(server.lastWatched || server.completedAt);
            merged[classKey] = serverTime >= localTime ? server : local;
        }
    });
    
    return merged;
}

# Build desktop executable (Windows)
powershell -ExecutionPolicy Bypass -File .\build_desktop_exe.ps1

# Output: dist/PlatziViewerDesktop.exe

# From desktop_app.py
def main():
    # Configure GPU acceleration
    configure_gpu_acceleration()
    
    # Find free port and start server
    port = get_free_port()
    server = create_server('127.0.0.1', port)
    
    # Start server in background thread
    server_thread = threading.Thread(target=run_server, args=(server,))
    server_thread.start()
    
    # Create native window
    if QWebEngineView is available:
        window = create_qt_window(f'http://127.0.0.1:{port}')
    elif pywebview is available:
        window = webview.create_window('Platzi Viewer', url)
    
    # Show window and handle shutdown
    window.show()
    window.on_closed(lambda: server.shutdown())

# From desktop_app.py
def _configure_gpu_acceleration():
    chromium_gpu_flags = [
        "--ignore-gpu-blocklist",
        "--enable-gpu-rasterization",
        "--enable-zero-copy",
        "--enable-accelerated-video-decode",
        "--enable-native-gpu-memory-buffers",
    ]
    
    os.environ["QTWEBENGINE_CHROMIUM_FLAGS"] = " ".join(chromium_gpu_flags)

PlatziViewerDesktop.exe
PlatziData/
  ├── progress.json              # User progress
  ├── courses_cache.json         # Course metadata (optional)
  ├── service_account.json       # Drive credentials
  ├── QtWebEngine/               # Browser cache
  │   ├── localStorage/
  │   └── IndexedDB/
  └── drive_scan_progress.json   # Resume state for cache rebuilds

# Build portable executable
.\build_portable_exe.ps1

# Creates: dist/PlatziViewer/
#   ├── PlatziViewer.exe
#   ├── courses_cache.json
#   ├── service_account.json (if included)
#   └── [Python runtime libraries]

/* From styles.css */
:root {
    --bg-primary: #0a0e27;
    --bg-secondary: #131833;
    --bg-card: #1a1f3a;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent-primary: #60a5fa;
    --accent-hover: #3b82f6;
}

/* Example: Card hover animation */
.course-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

// From js/components/navbar.js
export const Navbar = {
    render() {
        return `
            <nav class="navbar">
                <div class="navbar-brand">
                    <span class="navbar-icon">🎓</span>
                    <span class="navbar-title">Platzi Viewer</span>
                </div>
                <div class="navbar-links">
                    ${this.renderLinks()}
                </div>
            </nav>
        `;
    },
    
    renderLinks() {
        const links = [
            { hash: '#home', icon: '🏠', label: 'Inicio' },
            { hash: '#explore', icon: '🔍', label: 'Explorar' },
            { hash: '#learning', icon: '📚', label: 'Mi Aprendizaje' }
        ];
        
        return links.map(link => `
            <a href="${link.hash}" class="navbar-link" data-hash="${link.hash}">
                <span class="navbar-link-icon">${link.icon}</span>
                <span class="navbar-link-label">${link.label}</span>
            </a>
        `).join('');
    }
};

# From drive_service.py
SCOPES = ['https://www.googleapis.com/auth/drive.readonly']

# From server.py
LOOPBACK_HOSTS = {"localhost", "127.0.0.1", "::1"}

def do_GET(self):
    if self.path == '/api/refresh':
        # Only allow from localhost
        client_host = self.client_address[0]
        if client_host not in LOOPBACK_HOSTS:
            self.send_error(403, "Refresh only allowed from localhost")
            return

# From server.py
MAX_PROGRESS_BYTES = 2 * 1024 * 1024  # 2MB limit

def do_POST(self):
    if self.path == '/api/progress':
        content_length = int(self.headers.get('Content-Length', 0))
        if content_length > MAX_PROGRESS_BYTES:
            self.send_error(413, "Progress payload too large")
            return

# From server.py
from http.server import ThreadingHTTPServer

server = ThreadingHTTPServer((host, port), PlatziHandler)

# From server.py
def send_json_response(self, data):
    json_bytes = json.dumps(data).encode('utf-8')
    
    if 'gzip' in self.headers.get('Accept-Encoding', ''):
        compressed = gzip.compress(json_bytes)
        self.send_header('Content-Encoding', 'gzip')
        self.send_header('Content-Length', len(compressed))
        self.wfile.write(compressed)
    else:
        self.send_header('Content-Length', len(json_bytes))
        self.wfile.write(json_bytes)

# From drive_service.py
CHUNK_SIZE = 1024 * 1024  # 1MB

def download_file_range(file_id, start, end):
    request = service.files().get_media(fileId=file_id)
    request.headers['Range'] = f'bytes={start}-{end}'
    
    while True:
        chunk = request.read(CHUNK_SIZE)
        if not chunk:
            break
        yield chunk

# From rebuild_cache_drive.py
def save_progress(state):
    with open('drive_scan_progress.json', 'w') as f:
        json.dump(state, f)

def load_progress():
    if os.path.exists('drive_scan_progress.json'):
        with open('drive_scan_progress.json') as f:
            return json.load(f)
    return None

# Resume from saved state
state = load_progress()
if state:
    print(f"Resuming from course {state['last_course_index']}...")