chainlit icon indicating copy to clipboard operation
chainlit copied to clipboard

feat: add video player using react-player to support YouTube, Vimeo and other sources

Open qtangs opened this issue 9 months ago • 4 comments

Building on the idea suggested by @postonsundays at https://github.com/Chainlit/chainlit/pull/686.

What can be done now:

  • [x] Display videos from various sources provided by ReactPlayer (YouTube, Facebook, Twitch, Vimeo, DailyMotion, ...)
  • [x] Custom config for each type of player as supported by ReactPlayer for further enhancements, for example, auto play and custom start time for YouTube videos.

qtangs avatar May 09 '24 14:05 qtangs

This is how it looks with 3 videos from the test: https://github.com/Chainlit/chainlit/blob/51be1a324fac1f82d1376fa95461589624daaf14/cypress/e2e/video_element/main.py#L6-L41

image

qtangs avatar May 10 '24 02:05 qtangs

Do we have to specify the player config? Can't react-player auto detect the kind of video it is?

willydouhard avatar May 10 '24 08:05 willydouhard

Yes, that's already the case, react-player can auto detect based on url. The player config is optional, it's added to show how to customize settings like autoplay and start time.

qtangs avatar May 10 '24 22:05 qtangs

Ah, there's a branch conflict now. I'll fix it but can @willydouhard or someone from the team review this soon so we avoid new conflicts?

qtangs avatar May 15 '24 10:05 qtangs

Waiting on the automated tests to merge your PR.

tpatel avatar May 21 '24 14:05 tpatel