feat(video): add rh-video

[nikkimk]

What I did

1. Created rh-video element

Testing Instructions

1. Review the DP Docs.
2. Test all 4 demos.

Notes to Reviewers

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 2fd546c6299a76daba3ba2ce9ff12b709c7ebf3f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@rhds/elements	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify[bot]]

✅ Deploy Preview for red-hat-design-system ready!

Name	Link
🔨 Latest commit	2fd546c6299a76daba3ba2ce9ff12b709c7ebf3f
🔍 Latest deploy log	https://app.netlify.com/sites/red-hat-design-system/deploys/66bb808a85301900088c49a1
😎 Deploy Preview	https://deploy-preview-1514--red-hat-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions[bot]]

Size Change: +4.88 kB (+2.88%)

Total Size: 175 kB

Filename	Size	Change
./elements.js	462 B	+10 B (+2.21%)
./elements/rh-video-embed/rh-video-embed.js	4.65 kB	+4.65 kB (new file)	🆕
./react/rh-video-embed/rh-video-embed.js	227 B	+227 B (new file)	🆕

ℹ️ View Unchanged

Filename	Size
./elements/rh-accordion/context.js	162 B
./elements/rh-accordion/rh-accordion-header.js	3.74 kB
./elements/rh-accordion/rh-accordion-panel.js	1.47 kB
./elements/rh-accordion/rh-accordion.js	3.7 kB
./elements/rh-alert/rh-alert.js	4.49 kB
./elements/rh-audio-player/rh-audio-player-about.js	1.68 kB
./elements/rh-audio-player/rh-audio-player-button.css.js	437 B
./elements/rh-audio-player/rh-audio-player-panel.css.js	554 B
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	1.51 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js	1.01 kB
./elements/rh-audio-player/rh-audio-player.js	14.4 kB
./elements/rh-audio-player/rh-cue.js	2.01 kB
./elements/rh-audio-player/rh-transcript.js	2.3 kB
./elements/rh-avatar/random-pattern-controller.js	2.72 kB
./elements/rh-avatar/rh-avatar.js	2.93 kB
./elements/rh-back-to-top/rh-back-to-top.js	2.1 kB
./elements/rh-badge/rh-badge.js	1.04 kB
./elements/rh-blockquote/rh-blockquote.js	1.96 kB
./elements/rh-breadcrumb/rh-breadcrumb.js	1.63 kB
./elements/rh-button/rh-button.js	4.47 kB
./elements/rh-card/rh-card.js	3.16 kB
./elements/rh-code-block/rh-code-block.js	5.62 kB
./elements/rh-cta/rh-cta.js	4.48 kB
./elements/rh-dialog/rh-dialog.js	4.79 kB
./elements/rh-dialog/yt-api.js	617 B
./elements/rh-footer/rh-footer-block.js	770 B
./elements/rh-footer/rh-footer-copyright.js	362 B
./elements/rh-footer/rh-footer-links.js	1.17 kB
./elements/rh-footer/rh-footer-social-link.js	1.35 kB
./elements/rh-footer/rh-footer-universal.js	2.05 kB
./elements/rh-footer/rh-footer.css.js	2.16 kB
./elements/rh-footer/rh-footer.js	3.04 kB
./elements/rh-footer/rh-global-footer.js	250 B
./elements/rh-health-index/rh-health-index.js	2.38 kB
./elements/rh-menu/rh-menu.js	1.18 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	2.48 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	1.35 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js	1.78 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js	571 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js	5.44 kB
./elements/rh-navigation-secondary/test/fixtures.js	846 B
./elements/rh-pagination/rh-pagination.js	5.11 kB
./elements/rh-site-status/rh-site-status.js	3.08 kB
./elements/rh-skip-link/rh-skip-link.js	1.13 kB
./elements/rh-spinner/rh-spinner.js	1.61 kB
./elements/rh-stat/rh-stat.js	2.24 kB
./elements/rh-subnav/rh-subnav.js	2.83 kB
./elements/rh-surface/rh-surface.js	868 B
./elements/rh-switch/rh-switch.js	3.2 kB
./elements/rh-table/rh-sort-button.js	1.49 kB
./elements/rh-table/rh-table.js	3.02 kB
./elements/rh-tabs/context.js	160 B
./elements/rh-tabs/rh-tab-panel.js	1.15 kB
./elements/rh-tabs/rh-tab.js	2.92 kB
./elements/rh-tabs/rh-tabs.js	4.05 kB
./elements/rh-tag/rh-tag.js	2.06 kB
./elements/rh-tile/rh-tile-group.js	1.85 kB
./elements/rh-tile/rh-tile.js	5.06 kB
./elements/rh-timestamp/rh-timestamp.js	983 B
./elements/rh-tooltip/rh-tooltip.js	2.24 kB
./lib/context/color/consumer.js	1.16 kB
./lib/context/color/context-color.css.js	268 B
./lib/context/color/controller.js	885 B
./lib/context/color/provider.js	2.04 kB
./lib/context/event.js	583 B
./lib/context/headings/consumer.js	722 B
./lib/context/headings/controller.js	1.12 kB
./lib/context/headings/provider.js	1.24 kB
./lib/DirController.js	565 B
./lib/elements/rh-context-demo/rh-context-demo.js	1.18 kB
./lib/elements/rh-context-picker/rh-context-picker.js	2.21 kB
./lib/functions.js	175 B
./lib/I18nController.js	1.38 kB
./lib/ScreenSizeController.js	849 B
./react/rh-accordion/rh-accordion-header.js	215 B
./react/rh-accordion/rh-accordion-panel.js	185 B
./react/rh-accordion/rh-accordion.js	215 B
./react/rh-alert/rh-alert.js	184 B
./react/rh-audio-player/rh-audio-player-about.js	191 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js	214 B
./react/rh-audio-player/rh-audio-player-subscribe.js	196 B
./react/rh-audio-player/rh-audio-player.js	183 B
./react/rh-audio-player/rh-cue.js	195 B
./react/rh-audio-player/rh-transcript.js	207 B
./react/rh-avatar/rh-avatar.js	173 B
./react/rh-back-to-top/rh-back-to-top.js	183 B
./react/rh-badge/rh-badge.js	174 B
./react/rh-blockquote/rh-blockquote.js	179 B
./react/rh-breadcrumb/rh-breadcrumb.js	179 B
./react/rh-button/rh-button.js	174 B
./react/rh-card/rh-card.js	172 B
./react/rh-code-block/rh-code-block.js	181 B
./react/rh-cta/rh-cta.js	170 B
./react/rh-dialog/rh-dialog.js	203 B
./react/rh-footer/rh-footer-block.js	184 B
./react/rh-footer/rh-footer-copyright.js	187 B
./react/rh-footer/rh-footer-links.js	185 B
./react/rh-footer/rh-footer-social-link.js	193 B
./react/rh-footer/rh-footer-universal.js	188 B
./react/rh-footer/rh-footer.js	174 B
./react/rh-footer/rh-global-footer.js	185 B
./react/rh-health-index/rh-health-index.js	184 B
./react/rh-menu/rh-menu.js	173 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js	217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js	205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js	199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js	201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js	213 B
./react/rh-pagination/rh-pagination.js	178 B
./react/rh-site-status/rh-site-status.js	181 B
./react/rh-skip-link/rh-skip-link.js	181 B
./react/rh-spinner/rh-spinner.js	175 B
./react/rh-stat/rh-stat.js	171 B
./react/rh-subnav/rh-subnav.js	175 B
./react/rh-surface/rh-surface.js	175 B
./react/rh-switch/rh-switch.js	185 B
./react/rh-table/rh-sort-button.js	213 B
./react/rh-table/rh-table.js	174 B
./react/rh-tabs/rh-tab-panel.js	181 B
./react/rh-tabs/rh-tab.js	187 B
./react/rh-tabs/rh-tabs.js	174 B
./react/rh-tag/rh-tag.js	182 B
./react/rh-tile/rh-tile-group.js	183 B
./react/rh-tile/rh-tile.js	194 B
./react/rh-timestamp/rh-timestamp.js	176 B
./react/rh-tooltip/rh-tooltip.js	175 B

_{compressed-size-action}

[bennypowers]

wdyt about calling this rh-video-player to match rh-audio-player?

[nikkimk]

wdyt about calling this rh-video-player to match rh-audio-player?

@bennypowers rh-audio-player uses HTML5 audio, has player controls, and captions/transcript. rh-video is a thubmail image over an iframe, with none of those things, so it's not technically a player.

[nikkimk]

@marionnegp I stubbed out some of the docs. Feel free to pull this branch and add to what I started.

[adamjohnson]

Interactive states for the play button seem to be missing. Would you have to set interaction states for the button within the video element?

Are there design specs for what the play button should do on hover/focus/active? I'm happy to add those.

We would add those to the shadowdom rh-video.css.

[marionnegp]

@coreyvickery @adamjohnson, could you take a look at the docs for <rh-video> and let me know if you have any feedback?

[adamjohnson]

@coreyvickery @adamjohnson, could you take a look at the docs for <rh-video> and let me know if you have any feedback?

Overview

When to use

• When you want a faster YouTube embed AND / OR:
• When you don't want to load several megabytes of JavaScript for a YouTube embed

Accessibility

Keyboard Navigation

Currently says: "Users should have the ability to move focus to a Switch and toggle it on or off using the keyboard." Should say: "Users should have the ability to move focus to a Video and play the video using the keyboard."

"Additional Guidelines"

• The YouTube embed should have accurate captions.
  • Autogenerated captions by YouTube are not sufficient.

Web Content Accessibility Guidelines:

• Include SC's that are already there (1.2.1, 1.2.2, 1.2.3, 1.2.4, 1.2.5, 1.3.1, 1.4.1, 2.1.3, 2.4.7)
• Include the SC's you listed (2.1.1, 2.1.3, 2.4.3, 2.5.5)

[marionnegp]

@adamjohnson, <rh-video> docs are ready to be added!

[adamjohnson]

@marionnegp Docs are now in the DP. PTAL. Thanks!

[adamjohnson]

Demos don't show the play button unless you view them fullscreen.

Yup, since this is a new component, it's not published to NPM yet. The Demos page pulls from the published NPM package. Since this element doesn't exist in the NPM package yet, it looks broken. When Charmander releases, it'll work.

(The reason you're seeing the image on the Demos page is because it is serving from https://fakeimg.pl)

[zeroedin]

LGTM

small-but-possibly-important note: if this only does youtube, maybe we should call it <rh-video-embed> or <rh-youtube>?

My vote would be rh-video-embed as it leaves it open for other services to be added later rather than creating net new components such as rh-vimeo-embed rh-x-embed etc.

<rh-video-embed variant="vimeo"> as the api instead, with youtube being the default service given no variant.

[adamjohnson]

FYI this element has been renamed from <rh-video> to <rh-video-embed>.

[adamjohnson]

Do we need a more solid-styled play button and less transparency for visibility over any background instead?

In dark color contexts, the play button could indeed have more contrast.

That said, I don't think this needs to be a blocker for Charmander. I will open a new issue.

Is this ready to merge?

[zeroedin]

In dark color contexts, the play button could indeed have more contrast.

Ok will move to an issue.

Is this ready to merge?

🚀

[zeroedin]

Issue created: https://github.com/RedHat-UX/red-hat-design-system/issues/1758