Introduction

​

What is Platzi Viewer?

​

Key Problems It Solves

​

Core Capabilities

​

📚 Content Management

• Hierarchical browsing: From high-level categories down to individual class materials
• Advanced search: Quickly find courses and classes by name
• Smart filtering: Filter by content type (Video, Summary, Reading, Sandbox/HTML)
• Course details: View module structure, class counts, and available resources

​

🎥 Video Playback

• Direct Google Drive streaming: Videos stream in real-time from the Drive API without local storage
• Adaptive buffering: HTTP Range Request support enables seeking without downloading entire files
• A/V sync correction: Automatic detection and correction of audio/video drift in long sessions
• Keyboard navigation: Use arrow keys to move between classes and standard media controls
• Compatibility mode: Fallback to FFmpeg-based streaming for problematic video files

​

📊 Learning Analytics

• Automatic completion marking: Classes marked complete at 90% watched
• Dual-layer persistence: Progress saved both in browser localStorage and server-side JSON backup
• Granular statistics: View completion rates at the route, course, module, and class levels
• Learning dashboard: See overall progress, started courses, and completion percentages

​

🖥️ Desktop Application

• Native desktop app: Standalone executable (Windows/Linux/macOS) using PyQt6 or pywebview
• Embedded server: Backend and frontend bundled together in a single .exe file
• GPU acceleration: Hardware-accelerated video decoding for smooth playback
• Persistent storage: Dedicated data directory for progress and cache files

​

Architecture Overview

┌─────────────────────────────────────────────────────────────┐
│                        Browser/Desktop App                   │
│  ┌─────────────┐  ┌──────────────┐  ┌──────────────┐       │
│  │  React-like │  │  Hash-based  │  │  State Mgmt  │       │
│  │  Components │  │    Router    │  │  (Progress)  │       │
│  └─────────────┘  └──────────────┘  └──────────────┘       │
└─────────────────────────────────────────────────────────────┘
                             │
                     HTTP (localhost:8080)
                             │
┌─────────────────────────────────────────────────────────────┐
│                     Python Backend (server.py)               │
│  ┌─────────────────┐         ┌────────────────────┐         │
│  │  Static Server  │         │  Drive API Proxy   │         │
│  │  (HTML/JS/CSS)  │         │  (/drive/files/*)  │         │
│  └─────────────────┘         └────────────────────┘         │
│                                       │                      │
└───────────────────────────────────────┼──────────────────────┘
                                        │
                            Google Drive API v3
                                        │
┌─────────────────────────────────────────────────────────────┐
│                      Google Drive Storage                    │
│   Categories/                                                │
│   └── Learning Paths/                                        │
│       └── Courses/                                           │
│           └── Modules/                                       │
│               ├── Video.mp4                                  │
│               ├── Summary.html                               │
│               ├── Subtitles.vtt                              │
│               └── Resources/                                 │
└─────────────────────────────────────────────────────────────┘

​

How It Works

1. Cache Building Phase (rebuild_cache_drive.py):
   • Scans your Google Drive folder structure
   • Matches courses against a master list from PlatziRoutes.md
   • Stores Google Drive file IDs for every video, summary, subtitle, and resource
   • Generates courses_cache.json (~20MB with metadata for ~20,000 classes)
2. Server Initialization (server.py):
   • Loads courses_cache.json into memory
   • Authenticates with Google Drive using a service account
   • Starts HTTP server on localhost:8080
   • Serves static files (HTML/JS/CSS) and acts as Drive API proxy
3. Frontend Operation (js/app_v2.js, js/router.js):
   • Loads course structure from /api/bootstrap (lightweight metadata)
   • Implements hash-based routing (#home, #course/0/1/5, etc.)
   • Fetches course details on-demand from /api/course-detail/{indices}
   • Streams videos from /drive/files/{fileId} proxy endpoint
4. Progress Synchronization:
   • Progress saved to browser localStorage on every change
   • Debounced sync to server’s progress.json after 400ms
   • Merge strategy: higher completion status wins, or newer timestamp on tie

​

Google Drive Integration

• Authentication: Uses a Google Cloud service account with read-only Drive API access
• Streaming: Videos and files proxied through the backend with Range Request support
• Caching: Only metadata (file IDs, names, structure) is cached—not the actual content
• Security: Service account requires explicit sharing of the Drive folder

# Example: How the backend proxies a video request
# From server.py
def do_GET(self):
    if self.path.startswith('/drive/files/'):
        file_id = extract_file_id(self.path)
        metadata = drive_service.get_file_metadata(file_id)
        
        # Handle Range Requests for video seeking
        range_header = self.headers.get('Range')
        if range_header:
            start, end = parse_range(range_header, metadata['size'])
            stream = drive_service.download_file_range(file_id, start, end)
            self.send_response(206)  # Partial Content
        else:
            stream = drive_service.download_file(file_id)
            self.send_response(200)
        
        # Stream chunks from Drive to browser
        for chunk in stream:
            self.wfile.write(chunk)

​

Getting Started

​

Use Cases

​

Technology Stack

​

What’s Next?