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-embed): add rh-video-embed #1514

Merged
merged 79 commits into from
Aug 13, 2024
Merged
Show file tree
Hide file tree
Changes from 44 commits
Commits
Show all changes
79 commits
Select commit Hold shift + click to select a range
478f460
feat(video): init video
Mar 12, 2024
5a18450
docs(accessibility): added multimedia section
Mar 26, 2024
6a5bca1
docs(accessibility): added resources page
Mar 26, 2024
ce924b7
docs(accessibility): fixed audio-video styles
Mar 26, 2024
f0537ce
docs(accessibility): fixed link inside blockquote
Mar 26, 2024
590d6f2
feat(video): added demos
Apr 4, 2024
a308cbe
feat(video): a11y refactor
Apr 4, 2024
61d3959
feat(video): updated cookie consent feature
Apr 4, 2024
fd9c03b
feat(video): updated styles
Apr 4, 2024
c8c46b4
Merge branch 'main' into feat/video
nikkimk Apr 4, 2024
99bd934
docs(video): init docs
Apr 5, 2024
5b5bc93
Merge branch 'feat/video' of github.com:RedHat-UX/red-hat-design-syst…
Apr 5, 2024
c2a8495
Merge branch 'docs-accessibility-finish-pagessectionscontent' of gith…
Apr 5, 2024
d111f3a
feat(video): updated dark and light themes
Apr 5, 2024
6cbf43d
docs(video): updated demos
Apr 5, 2024
4fa1127
docs(video): added accessibility docs
Apr 5, 2024
4fdf306
test(video): finished tests
Apr 12, 2024
b14b9f8
Merge branch 'main' of github.com:RedHat-UX/red-hat-design-system int…
Apr 12, 2024
312832e
docs(video): removed repo status from overview temporarily
Apr 19, 2024
611aaa6
Merge branch 'main' into feat/video
zeroedin Apr 29, 2024
20e58d0
Merge branch 'main' into feat/video
adamjohnson May 6, 2024
31ba00f
Merge branch 'staging/charmander' into feat/video
zeroedin May 6, 2024
7379075
chore(video): add changeset
adamjohnson May 6, 2024
7ccfbab
Merge branch 'feat/video' of github.com:RedHat-UX/red-hat-design-syst…
adamjohnson May 6, 2024
c19452d
docs(video): use Red Hat OpenShift video for embed
adamjohnson May 6, 2024
ea86fe8
test(video): fix cookie consent tests
adamjohnson May 7, 2024
17c3567
chore(video): lint typescript
adamjohnson May 7, 2024
b5fa350
fix(video): caption text color and margin
adamjohnson May 7, 2024
69b84c9
fix(video): fix typescript compilation error
adamjohnson May 7, 2024
f7c8898
Merge branch 'staging/charmander' into feat/video
adamjohnson May 7, 2024
f1c2b29
fix(video): fix SVG displaying overtop of button
adamjohnson May 7, 2024
8b9d991
Merge branch 'staging/charmander' into feat/video
adamjohnson Jun 5, 2024
d0cd5f4
fix(video): remove double slash from fakeimg.pl URL
adamjohnson Jun 5, 2024
5801a7d
feat(video): make `rh-video` responsive
adamjohnson Jun 5, 2024
00da739
fix(video): update consent spacing
adamjohnson Jun 5, 2024
483136e
docs(video): make demos larger (900px by 499px)
adamjohnson Jun 5, 2024
6722f29
feat(video): add CSS Shadow Parts
adamjohnson Jun 5, 2024
69f7f22
feat(video): add alignment demo
adamjohnson Jun 5, 2024
01c3a02
fix(video): remove bottom margin from container
adamjohnson Jun 5, 2024
d971d26
feat(video): add card + video demo
adamjohnson Jun 5, 2024
136ebb8
fix(video): use logical styling properties
adamjohnson Jun 5, 2024
4502b02
Merge branch 'staging/charmander' into feat/video
zeroedin Jun 25, 2024
147cdf0
docs(video): remove old shortcodes and placeholders
zeroedin Jun 26, 2024
4d3f1d6
Merge branch 'staging/charmander' into feat/video
zeroedin Jun 26, 2024
4698c0a
Merge branch 'staging/charmander' into feat/video
adamjohnson Jun 28, 2024
ab3d7ad
fix(video): remove prose from demos
adamjohnson Jun 28, 2024
840904d
docs(video): update RH homepage URL to use https
adamjohnson Jun 28, 2024
2b9cf50
docs(video): add content to readme
adamjohnson Jun 28, 2024
7af288a
docs(video): stub out accessibility page
adamjohnson Jun 28, 2024
cfd93ce
fix(video): change consent prop to past tense
adamjohnson Jun 28, 2024
2730f6a
feat(video): add class to `iframe` embed
adamjohnson Jul 1, 2024
741c150
feat(video): don't show related videos on pause/end
adamjohnson Jul 1, 2024
949e562
docs(video): fix shortcode build error
adamjohnson Jul 1, 2024
0f5263e
fix(video): remove `dark.html`, add color context demo
adamjohnson Jul 8, 2024
806b1c2
fix(video): use `rh-button` for play button
adamjohnson Jul 8, 2024
6a8a0e5
fix(video): use token values for dark play btn opacity
adamjohnson Jul 9, 2024
12d85a7
docs(video): improve event and attr descriptions
adamjohnson Jul 10, 2024
cd0364b
docs(video): fix warning about bracketed type
adamjohnson Jul 10, 2024
d0bd1ce
Merge branch 'staging/charmander' into feat/video
adamjohnson Jul 11, 2024
b54bbc3
Merge branch 'staging/charmander' into feat/video
adamjohnson Jul 24, 2024
d538519
docs(video): add docs content and images
adamjohnson Jul 24, 2024
22281fa
docs(video): add links to guidelines and a11y pages
adamjohnson Jul 25, 2024
a49dba9
docs(video): add missing guidelines images
adamjohnson Jul 25, 2024
bc3cefd
docs(video): add play icon to overview preview image
adamjohnson Jul 25, 2024
102785a
fix(video): enforce caption font size
adamjohnson Jul 26, 2024
523055c
fix(video): harden caption spacing
adamjohnson Jul 26, 2024
5196393
docs(video): add installation instructions to README
adamjohnson Jul 26, 2024
b11141b
Merge branch 'staging/charmander' into feat/video
adamjohnson Jul 30, 2024
806911b
docs(video): remove play button from sample element thumbnail
adamjohnson Jul 30, 2024
ed34ef0
fix(video): align video and caption in alignment demo
adamjohnson Jul 31, 2024
8bdcd18
Merge branch 'staging/charmander' into feat/video
adamjohnson Aug 5, 2024
b31d91e
fix(video): remove a few play button icon styles
adamjohnson Aug 5, 2024
5010b92
Merge branch 'staging/charmander' into feat/video
adamjohnson Aug 8, 2024
c23ab59
Merge branch 'staging/charmander' into feat/video
adamjohnson Aug 8, 2024
e32a4c0
fix(video): update event name to `request-play`
adamjohnson Aug 8, 2024
7e75d06
Merge branch 'staging/charmander' into feat/video
adamjohnson Aug 8, 2024
643fc5c
Merge branch 'staging/charmander' into feat/video
zeroedin Aug 12, 2024
4a4b767
refactor(video-embed): rename `video` to `video-embed`
adamjohnson Aug 13, 2024
2fd546c
Merge branch 'staging/charmander' into feat/video
adamjohnson Aug 13, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions .changeset/dirty-countries-brake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
"@rhds/elements": minor
---

✨ Added `<rh-video>`

A Video is a graphical preview of a video overlayed with a play button. When clicked, the video will begin playing.

```html
<rh-video>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption"><a class="rh-video-embed-caption-link" href="//www.redhat.com">View the infographic</a></p>
</rh-video>
```
2 changes: 1 addition & 1 deletion docs/_includes/partials/accessibility/1.2.1-A.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
- [SC 1.2.1 Audio-only and Video-only (Prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/audio-only-and-video-only-prerecorded.html) (Level A)
- [SC 1.2.1 Audio-only and video-only (prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/audio-only-and-video-only-prerecorded.html) (Level A)
2 changes: 1 addition & 1 deletion docs/_includes/partials/accessibility/1.2.2-A.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
- [SC 1.2.2 Captions (Prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html) (Level A)
- [SC 1.2.2 Captions (prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html) (Level A)
1 change: 1 addition & 0 deletions docs/_includes/partials/accessibility/1.2.3-A.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- [SC 1.2.3 Audio description or media alternative (prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded.html) (Level A)
1 change: 1 addition & 0 deletions docs/_includes/partials/accessibility/1.2.4-AA.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- [SC 1.2.4 Captions (live)](https://www.w3.org/WAI/WCAG21/Understanding/captions-live.html) (Level AA)
1 change: 1 addition & 0 deletions docs/_includes/partials/accessibility/1.2.5-AA.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- [SC 1.2.5 Audio description (prerecorded)](https://www.w3.org/WAI/WCAG21/Understanding/audio-description-prerecorded.html) (Level AA)
2 changes: 1 addition & 1 deletion docs/_includes/partials/accessibility/1.3.1-A.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
- [SC 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) (Level A)
- [SC 1.3.1 Info and relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) (Level A)
2 changes: 1 addition & 1 deletion docs/_includes/partials/accessibility/1.4.1-A.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
- [SC 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) (Level A)
- [SC 1.4.1 Use of color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) (Level A)
2 changes: 1 addition & 1 deletion docs/_includes/partials/accessibility/2.1.3-AAA.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
- [SC 2.1.3 Keyboard (No exception)](https://www.w3.org/WAI/WCAG21/Understanding/keyboard-no-exception) (Level AAA)
- [SC 2.1.3 Keyboard (no exception)](https://www.w3.org/WAI/WCAG21/Understanding/keyboard-no-exception) (Level AAA)
1 change: 1 addition & 0 deletions docs/_includes/partials/accessibility/2.4.7-AA.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- [SC 2.4.7 Focus visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) (Level AA)
11 changes: 11 additions & 0 deletions elements/rh-video/README.md
adamjohnson marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# Video
Add a description of the component here.

## Usage
Describe how best to use this web component along with best practices.

```html
<rh-video>

</rh-video>
```
53 changes: 53 additions & 0 deletions elements/rh-video/demo/alignment.html
bennypowers marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<h1>Alignment Demo</h1>
<p><code>rh-video</code> is responsive and aligns left out of the box. If you want to center or right align it, here's how to do that:</p>

<div class="wrap centered">
<h2>Centered:</h2>
<rh-video>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption"><a class="rh-video-embed-caption-link" href="//www.redhat.com">View the infographic</a></p>
</rh-video>
</div>

<div class="wrap right-aligned">
<h2>Right Aligned:</h2>
<rh-video>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption"><a class="rh-video-embed-caption-link" href="//www.redhat.com">View the infographic</a></p>
</rh-video>
</div>
<script type="module">
import '@rhds/elements/rh-video/rh-video.js';
</script>

<style>
.wrap {
display: grid;
}

.wrap:not(:first-of-type) {
border-block-start: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
}

.centered {
justify-items: center;
}

.right-aligned {
justify-items: end;
}

.centered rh-video::part(caption) {
text-align: center;
}

.right-aligned rh-video::part(caption) {
text-align: end;
}
</style>
36 changes: 36 additions & 0 deletions elements/rh-video/demo/card-with-video.html
adamjohnson marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<h1>A video component nested inside a card:</h1>

<div class="wrapper">
<rh-card>
<rh-video slot="header">
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
</rh-video>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas, a sollicitudin mauris
tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
<rh-cta variant="secondary" slot="footer">
<a href="#">Call to action</a>
</rh-cta>
</rh-card>
</div>

<script type="module">
import '@rhds/elements/rh-video/rh-video.js';
import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
</script>

<style>
.wrapper {
max-width: 900px;
display: block;
}

rh-card::part(header) {
margin: 0;
}
</style>
13 changes: 13 additions & 0 deletions elements/rh-video/demo/dark.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<rh-surface color-palette="darker">
<rh-video>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/eae0d0/282828" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption">Video caption here</p>
</rh-video>
</rh-surface>

<script type="module">
import '@rhds/elements/rh-video/rh-video.js';
</script>
10 changes: 10 additions & 0 deletions elements/rh-video/demo/no-caption.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<rh-video>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
</rh-video>

<script type="module">
import '@rhds/elements/rh-video/rh-video.js';
</script>
23 changes: 23 additions & 0 deletions elements/rh-video/demo/require-consent.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<rh-video id="video" require-consent>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption"><a class="rh-video-embed-caption-link" href="//www.redhat.com">View the infographic</a></p>
</rh-video>

<script type="module">
import '@rhds/elements/rh-video/rh-video.js';

const video = document.getElementById('video');
video.addEventListener('consent-click', consentWindow);


function consentWindow() {
// replace with custom consent logic
if (confirm('Allow cookies?')) {
// enables video after consent
video.hasConsent = true;
}
}
</script>
11 changes: 11 additions & 0 deletions elements/rh-video/demo/rh-video.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<rh-video>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption"><a class="rh-video-embed-caption-link" href="//www.redhat.com">View the infographic</a></p>
</rh-video>

<script type="module">
import '@rhds/elements/rh-video/rh-video.js';
</script>
32 changes: 32 additions & 0 deletions elements/rh-video/docs/00-overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
## Overview

{{ tagName | getElementDescription }}

{# <uxdot-example>
<img src="" alt="Placeholder for example image">
</uxdot-example> #}

{% repoStatusList %}

## Sample element

<rh-video>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption">Video caption here</p>
</rh-video>


## Demo

{% playground tagName=tagName %}{% endplayground %}

<rh-cta><a href="{{ './demo/' | url }}">Full screen demo</a></rh-cta>


## When to use
adamjohnson marked this conversation as resolved.
Show resolved Hide resolved
-

{% repoStatusChecklist %}
1 change: 1 addition & 0 deletions elements/rh-video/docs/10-style.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
## Style
1 change: 1 addition & 0 deletions elements/rh-video/docs/20-guidelines.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
## Usage
15 changes: 15 additions & 0 deletions elements/rh-video/docs/30-code.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{% renderInstall %}{% endrenderInstall %}

## Usage

```html
<rh-video>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" alt="Image description"/>
<template>
<iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</template>
<p slot="caption">Video caption here</p>
</rh-video>
```

{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
1 change: 1 addition & 0 deletions elements/rh-video/docs/40-accessibility.md
adamjohnson marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
## Keyboard interactions
Binary file added elements/rh-video/docs/screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading