feat(NGUI-176): Video component

[Hrithik-Gavankar]

Description

This PR implements a complete video component solution for the Next Gen UI Agent system and enhances server reliability by:

• Implementing a new VideoPlayerWrapper React component using PatternFly 6 for rendering video content with YouTube and direct video support
• Fixing backend data transformation issues that prevented video URLs and poster images from being properly extracted
• Adding robust error handling to prevent random server crashes and provide meaningful error messages
• Enhancing system reliability with better AI model selection and comprehensive testing

Changes Made

🎬 Frontend - React Video Component

• Created VideoPlayerWrapper.tsx - New PatternFly 6 video component supporting:
  • YouTube video embedding with automatic thumbnail generation
  • Direct video file playback with custom controls
  • Poster image fallback when video is unavailable
  • Responsive design with 16:9 aspect ratio for YouTube videos
• Added comprehensive test suite - VideoPlayerWrapper.test.tsx with test cases covering all scenarios

🔧 Backend - Data Transformation

• Enhanced video URL recognition - Added support for trailerUrl, trailer_url, trailerLink, trailer_link field suffixes
• Improved poster image detection - Added fallback logic to find poster images from posterUrl, pictureUrl, etc. when YouTube thumbnails aren't available
• Fixed data transformation logic - Enhanced VideoPlayerDataTransformer to properly extract video and image URLs from movie data

🛡️ Server Reliability

• Added robust error handling - Replaced crash-prone direct array access with comprehensive error checking in main.py files
• Enhanced debugging - Added detailed logging and error messages for better troubleshooting
• Improved AI model selection - Switched to llama3.2:3b for more consistent component generation
• Graceful failure handling - Server now returns meaningful error responses instead of crashing with IndexError

📝 Component Integration

• Updated component mapping - Added "video-player": VideoPlayerWrapper to make component available in dynamic rendering
• Schema compliance - Component matches existing video-player.schema.json requirements
• Export configuration - Added VideoPlayerWrapper to main package exports

Testing

✅ Component Testing

• Unit tests: 23/23 tests passing for VideoPlayerWrapper component
• Build verification: NPM package builds successfully without errors
• Integration testing: Component renders properly in dynamic component system

✅ Backend Testing

• Data transformation: Verified trailer URL extraction works with test data
• Video component generation: Confirmed proper video and poster image URLs are generated
• Error handling: Tested graceful failures when movie data is unavailable

✅ End-to-End Testing

• Server stability: No more random crashes on failed AI agent responses
• Video playback: YouTube videos embed correctly with thumbnails
• Poster fallbacks: Poster images display when video URLs are unavailable
• Multiple models: Tested with different AI models for consistency

Usage Example

Users can now request video content and get properly rendered components:

# User prompt
"Play Toy Story movie trailer"

# Generated component
{
  "component": "video-player",
  "video": "https://www.youtube.com/embed/v-PjgYDrg70", 
  "video_img": "https://img.youtube.com/vi/v-PjgYDrg70/maxresdefault.jpg",
  "title": "Toy Story Trailer"
}

The VideoPlayerWrapper component automatically handles YouTube embedding, poster images, and responsive layout.

---

[velias]

I expect this PR is broken now, as we moved NPM to another repo

[Hrithik-Gavankar]

Closing this PR and deleting the branch since the project folder has been moved to another repository:
🔗 https://github.com/RedHat-UX/next-gen-ui-react

Thank You!