HyperVideo – GitHub Issues

In examining my HyperVideo project I decided that the Bunny video was a great placeholder, but what I really wanted was my own videos. What better place to start than the videos I have up on YouTube. How am I going to do that?

To get started, I asked CoPilot what it would take. CoPilot generated a plan of action. I took that and opened an issue on GitHub which will document what I have to do.

Replace the current HTML5 video player implementation with YouTube embedded player to integrate videos from the @JesseLiberty YouTube channel while maintaining all existing interactive learning features.

Proposed Changes

1. Replace HTML5 Video Player with YouTube Embed
   • Implement YouTube IFrame embed in VideoLearning.razor
   • Source videos from https://youtube.com/jesseliberty channel
   • Replace
2. Maintain Existing Functionality
   All current features must remain operational:
   • ✅ Pause & Inquire: Pause video and open question panel
   • ✅ Interactive Transcript: Clickable, time-synchronized segments
   • ✅ Time Tracking: Real-time display of current playback position
   • ✅ Seeking: Click transcript to jump to timestamp
   • ✅ Search Integration: Wikipedia, Wiktionary, YouTube, Stack Overflow, MDN
3. Use YouTube IFrame Player API
   Implement programmatic video control using YouTube IFrame Player API:
   • pauseVideo() – Pause playback
   • playVideo() – Resume playback
   • getCurrentTime() – Get current timestamp
   • seekTo(seconds) – Jump to specific time
   • getDuration() – Get video length
   • Event listeners: onStateChange, onReady
4. Video Selection & Configuration
   • Video Dropdown: Add UI to select from multiple videos in @JesseLiberty channel
   • Video Catalog: Create a list/configuration of available educational videos with:
   • YouTube video ID
   • Title/description
   • Associated transcript segments
   • State Management: Store selected video ID in component state
   • Configuration Options:
   • Hardcode initial video list in component
   • OR store in appsettings.json
   • OR create a separate service/data file
   Technical Considerations
   JavaScript Interop Changes
   • Load YouTube IFrame API script: https://www.youtube.com/iframe_api
   • Create typed JavaScript interop wrapper for YouTube Player API
   • Replace direct eval() calls with proper YouTube API method invocations
   • Handle async initialization of YouTube player (onYouTubeIframeAPIReady)
   Example JS Interop Pattern:

// VideoLearning.razor.js
export function initializeYouTubePlayer(videoId, dotNetHelper) {
const player = new YT.Player(‘player’, {
videoId: videoId,
events: {
‘onReady’: onPlayerReady,
‘onStateChange’: onPlayerStateChange
}
});
// Store player reference and expose methods
}

export function pauseVideo(player) {
player.pauseVideo();
}

export function getCurrentTime(player) {
return player.getCurrentTime();
}

Transcript Handling
• Option 1: Manually create transcript segments per video (current approach)
• Option 2: Fetch captions using YouTube Data API v3 (requires API key)
• Option 3: Store transcripts in separate JSON files mapped to video IDs
• Consider caption format: YouTube provides .srt or .vtt formats
Render Mode Compatibility
• Ensure YouTube IFrame API works with @rendermode InteractiveServer
• Test SignalR reconnection behavior with YouTube player state
• Verify StateHasChanged() triggers UI updates correctly
Files to Modify

1. VideoLearning.razor
   • Replace
2. Components/Pages/VideoLearning.razor.js (new file)
   • Create typed JS module for YouTube Player API
   • Export functions: initPlayer, pauseVideo, playVideo, seekTo, getCurrentTime
   • Handle player events and callbacks to Blazor
3. Models/VideoInfo.cs (optional, new file)

public record VideoInfo(string VideoId, string Title, List Transcript);

4. appsettings.json (optional)
   • Store video catalog configuration
   Implementation Steps
5. Add YouTube IFrame API script reference to App.razor or VideoLearning.razor
6. Create VideoLearning.razor.js with YouTube Player API wrapper
7. Update VideoLearning.razor markup to use YouTube embed
8. Refactor C# interop calls to use YouTube-specific methods
9. Add video selection UI and catalog
10. Test all interactive features (pause/resume, seeking, transcript sync)
11. Update transcripts for selected YouTube videos from @JesseLiberty channel
    Success Criteria
    • ✅ Videos from @JesseLiberty YouTube channel play in the application
    • ✅ Users can switch between multiple videos
    • ✅ All existing interactive features work identically
    • ✅ Pause & Inquire functionality remains intact
    • ✅ Interactive transcript synchronization works
    • ✅ Time tracking displays correctly
    • ✅ Search integration functions as before
    • ✅ No degradation in user experience
    Resources
    • YouTube IFrame Player API Reference
    • YouTube Data API v3 – Captions (for transcript retrieval)
    • Blazor JavaScript Interop

Labels: enhancement, feature, blazor, javascript-interop
Priority: High

Those look like a great set of sub-tasks. I’m not sure how to attack them, but breaking them down will greatly simplify matters.

Here’s a first attempt at some of the sub-issues arising out of the work…

You can see that this is far from perfect. Some of these are small and some are huge. It will be necessary to flesh out some and to break others down to smaller tasks, but this is a good start. The trick is not to get overwhelmed. OK, I’m overwhelmed. But my buddy CoPilot and I are ready to tackle this.