Skip to content

QUICK_START_LIVE_TRACKING.md

Latest commit

 

History

History
181 lines (139 loc) · 4.13 KB

QUICK_START_LIVE_TRACKING.md

File metadata and controls

181 lines (139 loc) · 4.13 KB
Raw

🚀 Live Video Tracking - Quick Start (2 Minutes)

Just Want to Test It? Do This:

1️⃣ Start Backend

cd Backend
npm start

2️⃣ Open Live Dashboard

http://localhost:3000/dashboard-live.html

3️⃣ Open Video Player

http://localhost:3000/videoplayer-live.html

4️⃣ Test the System

  1. Click "Play" on any video
  2. Watch for ~30 seconds
  3. Close the player or go back to dashboard
  4. Dashboard shows "Continue Watching" ✅
  5. Resume button has saved position ✅
  6. Complete a video → See +25 XP notification ✅

🎯 What Actually Changed?

Backend (3 New Endpoints)

POST /api/progress/save-watch-time
  → Called every 5s while watching (auto-saves position)

POST /api/progress/video-complete  
  → Called when video ends (awards XP)

GET /api/progress/continue-watching?userId=1
  → Lists videos you haven't finished (for dashboard)

Frontend (2 New Pages)

  • videoplayer-live.html - Video player with auto-resume + XP counter
  • dashboard-live.html - Dashboard showing "Continue Watching" + stats

Core Logic (sync-manager.js)

// Handles:
// - Auto-save every 5 seconds
// - Load/save to localStorage (works offline)
// - Sync with backend
// - XP tracking
// - Resume functionality

📊 How the Data Flows

You watch video for 2 min
    ↓
Frontend auto-saves: "user 1, video_xyz, 120 seconds"
    ↓
Saved to localStorage (instant) + backend (async)
    ↓
You close player
    ↓
You open dashboard
    ↓
Dashboard shows: "📍 Continue watching from 2:00"
    ↓
You click "Resume"
    ↓
Video loads and jumps to 2:00 mark automatically
    ↓
You finish the video
    ↓
+25 XP awarded → XP counter updates → Dashboard syncs

✨ Features at a Glance

Feature How It Works
Auto-Resume Position saved every 5s, loaded on next visit
Live XP Counter updates instantly as you earn XP
Continue Watching Shows incomplete videos with progress bar
No Setup Works with existing database, no migrations
Offline Support Uses localStorage, syncs when online
Fast Vanilla JS + fetch, no heavy frameworks

🔧 Customize (If Needed)

Change XP per video

Backend/routes/progress.js, line 5:
const XP_PER_VIDEO = 25;  ← Change this

Change save interval

Frontend/videoplayer-live.html, line ~280:
}, 5000);  ← 5000ms = 5 seconds

Change dashboard refresh rate

Frontend/dashboard-live.html, line ~200:
setInterval(loadDashboardData, 10000);  ← 10 seconds

🐛 Issues?

Problem Solution
Video doesn't resume Check localStorage in browser console; make sure MySQL is running
XP not updating Hard refresh browser (Ctrl+F5); check backend logs
Continue watching empty Watch a video for 30+ seconds, close, refresh dashboard
Page blank/errors Check browser console (F12); make sure backend is running

📚 Full Documentation

See LIVE_TRACKING_SETUP.md for:

  • Detailed architecture
  • All endpoint specs
  • Advanced customization
  • Production security notes

💡 Code Example (For Developers)

// Import the sync manager
// <script src="js/sync-manager.js"></script>

// Create instance
const sync = new SyncManager({
    userId: 1,
    onXPChange: (data) => console.log('XP:', data.total),
    onVideoComplete: (data) => console.log('Video done!', data),
});

// Load data
await sync.loadUserStats();
await sync.loadContinueWatching();

// Auto-called while watching
sync.saveWatchProgress(videoId, currentTime);

// Called on video end
sync.markVideoComplete(videoId, watchedSeconds);

🎯 Next? (Optional Enhancements)

  • Add quiz questions after each video
  • Implement leaderboard (top XP earners)
  • Add badges/achievements system
  • Enable video quality selection
  • Add real-time WebSocket sync (instead of polling)

That's it! You're ready to go. The system handles everything automatically. 🎉

For questions, check the browser console logs or refer to LIVE_TRACKING_SETUP.md.