Skip to content

feat(Video): Adds Accessible Video Component#3015

Merged
codecademydev merged 43 commits intomainfrom
sg-3436-video-player
Mar 6, 2025
Merged

feat(Video): Adds Accessible Video Component#3015
codecademydev merged 43 commits intomainfrom
sg-3436-video-player

Conversation

@smithgajjar09
Copy link
Contributor

@smithgajjar09 smithgajjar09 commented Jan 24, 2025 •
edited by atlassian bot
Loading

Overview

adds a new video component with Vidstack integration that is accessible with HLS support including captions, thumbnails, chapters and poster addon.

PR Checklist

  • Related to designs: Figma
  • Related to JIRA ticket: GM-985
  • I have run this code to verify it works
  • This PR includes unit tests for the code change
  • This PR includes testing instructions tests for the code change
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

  • Check out the Video story + Full Example video/iframe section in Markdown
  • You should be able to watch the videos (with addon's and customisations like poster, thumbnails, captions)
  • Profit

PR Links and Envs

Repository PR Link PR Env
Monolith Monolith PR Monolith Env
Portal _ Portal Env
Mono Mono PR LE Env

Notes

  • Follow-up: GM-998 (Remove react-player)

@nx-cloud
Copy link

nx-cloud bot commented Jan 24, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 3298ec3.

☁️ Nx Cloud last updated this comment at 2025-03-06 08:50:56 UTC

@smithgajjar09 smithgajjar09 mentioned this pull request Jan 24, 2025
Closed
smithgajjar09 and others added 13 commits January 24, 2025 16:15
@smithgajjar09 smithgajjar09 changed the title feat(Video): Vidstack VideoPlayer Integration feat(Video): A new accessible video component Feb 3, 2025
@smithgajjar09 smithgajjar09 changed the title feat(Video): A new accessible video component feat(Video): Adds Accessible Video Component Feb 3, 2025
@dreamwasp dreamwasp requested a review from jakemhiller February 4, 2025 14:40
jakemhiller
jakemhiller reviewed Feb 11, 2025
View reviewed changes
jakemhiller
jakemhiller approved these changes Feb 19, 2025
View reviewed changes
Copy link
Member

@jakemhiller jakemhiller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good to me! I think it's worth getting @dreamwasp's final review before merging.

dreamwasp
dreamwasp approved these changes Feb 20, 2025
View reviewed changes
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this looks wonderful, great work!

timjenkins
timjenkins reviewed Feb 20, 2025
View reviewed changes
Copy link
Contributor

@timjenkins timjenkins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's a half review (working on the 2nd half).
one main question: what's the use case for displaying react-player instead of vidstack?

packages/gamut/src/Video/index.tsx
Comment on lines 102 to 105
/**
* If showPlayerEmbed is true use ReactPlayer to render the video
* Otherwise, use the Vidstack MediaPlayer. @TEMPORARY_FALLBACK
*/
Copy link
Contributor

@timjenkins timjenkins Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need both?

Copy link
Contributor Author

@smithgajjar09 smithgajjar09 Feb 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is more of just a fallback in case something goes sideways, and also when released all the youtube videos will be rendered using this new player (which does not have auto generated captions) So if curriculum asks to switch it to embed we have some way to make sure everything works
We have a follow up ticket to remove ReactPlayer once everything is validated - GM-998

@codecademydev
Copy link
Collaborator

codecademydev commented Mar 6, 2025

🚀 Styleguide deploy preview ready!

https://67c95ae62a3b6cee1396bc38--gamut-preview.netlify.app

Deploy Logs

@codecademydev
Copy link
Collaborator

codecademydev commented Mar 6, 2025

📬Published Alpha Packages:

@codecademy/gamut@59.1.0-alpha.3298ec.0
@codecademy/gamut-icons@9.40.0-alpha.3298ec.0
@codecademy/gamut-kit@0.6.482-alpha.3298ec.0
@codecademy/styleguide@70.3.0-alpha.3298ec.0

@smithgajjar09 smithgajjar09 added the Ship It :shipit: Automerge this PR when possible label Mar 6, 2025
@codecademydev codecademydev merged commit 7476fea into main Mar 6, 2025
17 of 18 checks passed
@codecademydev codecademydev removed the Ship It :shipit: Automerge this PR when possible label Mar 6, 2025
@codecademydev codecademydev deleted the sg-3436-video-player branch March 6, 2025 16:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jakemhiller jakemhiller jakemhiller approved these changes

@timjenkins timjenkins timjenkins approved these changes

@dreamwasp dreamwasp dreamwasp approved these changes

@BandanaKM BandanaKM Awaiting requested review from BandanaKM BandanaKM is a code owner automatically assigned from Codecademy/gamut

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@smithgajjar09 @codecademydev @jakemhiller @timjenkins @dreamwasp