Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Video + Markdown): update react player + put videos in markdown #2941

Merged
merged 20 commits into from
Oct 15, 2024

Conversation

dreamwasp
Copy link
Contributor

@dreamwasp dreamwasp commented Oct 2, 2024

Overview

Updates the react-player package to the newest version + makes the video component the default render component for iframed Vimeos + Youtubes

PR Checklist

  • Related to JIRA ticket: [gm-890]
  • 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 + the iframe sections of Markdown
  • You should be able to watch the videos
  • Profit

PR Links and Envs

Repository PR Link PR Env
Monolith Monolith PR Monolith Env
Portal Portal Link Portal Env

@dreamwasp dreamwasp changed the title videos +markdown feat(Video + Markdown): update react oplayer + put videos in markdown Oct 8, 2024
@dreamwasp dreamwasp marked this pull request as ready for review October 9, 2024 15:47
@dreamwasp dreamwasp requested a review from a team as a code owner October 9, 2024 15:47
@dreamwasp dreamwasp marked this pull request as draft October 9, 2024 16:12
@dreamwasp dreamwasp marked this pull request as ready for review October 9, 2024 17:29
@dreamwasp dreamwasp changed the title feat(Video + Markdown): update react oplayer + put videos in markdown feat(Video + Markdown): update react player + put videos in markdown Oct 10, 2024
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.

nice!

Copy link
Contributor

@aresnik11 aresnik11 left a comment

Choose a reason for hiding this comment

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

2 things I noticed:

  1. On the Video story the props table isn't loading
Invalid name '', must include alphanumeric characters 
[Read the docs](http://storybook.js.org/docs/)
  1. the video story with a placeholder image doesn't play the video when you click, you have to click twice

{(args) => {
return <Video {...args} />;
}}
</Story>
</Canvas>

## Here is an example with a Viemo URL
Copy link
Contributor

Choose a reason for hiding this comment

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

Viemo lol

@@ -347,4 +347,18 @@ Use the `printf()` function.

### Iframes

<iframe src="https://player.vimeo.com/video/145702525?byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
Vimeo and Youtube video iframes will be rendered by our Video component, otherwise they'll render as stated.
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: what does render as stated mean?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

i meant just renders the original code, i'll rephrase

@codecademydev
Copy link
Collaborator

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

@codecademydev
Copy link
Collaborator

🚀 Styleguide deploy preview ready!

https://670d3c72c4b31d0b2277af4f--gamut-preview.netlify.app

Deploy Logs

@dreamwasp dreamwasp added the Ship It :shipit: Automerge this PR when possible label Oct 15, 2024
@codecademydev codecademydev merged commit 4170f40 into main Oct 15, 2024
17 of 18 checks passed
@codecademydev codecademydev removed the Ship It :shipit: Automerge this PR when possible label Oct 15, 2024
@codecademydev codecademydev deleted the cass-gm-890 branch October 15, 2024 12:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants