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.

Sign up for GitHub

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

Jump to bottom

Card/Video Thumbnail Update #2480

Merged
merged 5 commits into from Aug 17, 2022
Merged

Card/Video Thumbnail Update #2480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7782890
Added examples of the card video playing, added in a z-index fallback…
bolt-bot Apr 15, 2022
35c505a
Added the video thumbnail z-index to the card, updated the video card…
bolt-bot Apr 18, 2022
5740287
Updated with the latest from master
bolt-bot Aug 16, 2022
dd40736
Updated the video JS to handle the video thumbnail card click functio…
bolt-bot Aug 16, 2022
d1cfe09
Removed an commented out CSS declaration
bolt-bot Aug 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 24 additions & 6 deletions docs-site/src/custom-brightcove.js
View file
Open in desktop
Expand Up @@ -11,12 +11,30 @@ var externalControlButtons = document.querySelectorAll('.js-base-video-toggle');

var handleExternalButtonClick = e => {
e.preventDefault();
var videoTarget = videojs.getPlayer(e.currentTarget.dataset.videoTarget);
var isPlaying = videoTarget.el_.classList.contains('vjs-playing');
if (isPlaying) {
videoTarget.pause();
} else {
videoTarget.play();
var videoTargetPlayer = videojs.getPlayer(
e.currentTarget.dataset.videoTarget,
);
if (videoTargetPlayer) {
var isVideoThumbnail = videoTargetPlayer.el_.closest(
'.c-bolt-video-thumbnail',
);
var isPlaying = videoTargetPlayer.el_.classList.contains('vjs-playing');

if (isVideoThumbnail) {
var playButton = isVideoThumbnail.querySelector(
'.js-bolt-video-thumbnail-inline-button',
);

if (playButton) {
playButton.dispatchEvent(new Event('click'));
}
}

if (isPlaying) {
videoTargetPlayer.pause();
} else {
videoTargetPlayer.play();
}
}
};

Expand Down
187 changes: 158 additions & 29 deletions ...te/src/pages/pattern-lab/_patterns/40-components/card/35-card-replacement-with-video.twig
View file
Open in desktop
@@ -1,7 +1,21 @@
{% set video_uuid1 = 'js-bolt-video-uuid-card-replacement' %}
{% set video_uuid2 = 'js-bolt-video-uuid-card-replacement-with-link' %}
{% set video_uuid1 = 'video-1' %}
{% set video_uuid2 = 'video-2' %}
{% set video_uuid3 = 'video-3' %}
{% set video_uuid4 = 'video-4' %}

{% set video_1 %}
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
src: '/images/placeholders/tout-4x3-climber.jpg',
alt: 'A Rock Climber',
loading: 'lazy',
width: 400,
height: 300,
}
} only %}
{% endset %}

{% set video_thumbnail_1 %}
{% set video %}
<video-js
data-account="1900410236"
Expand All @@ -15,13 +29,19 @@
class="c-base-video"></video-js>
{% endset %}

{% include '@bolt-elements-ratio/ratio.twig' with {
content: video,
ratio: 'wide'
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
video: {
content: video,
title: 'Video Thumbnail with action play',
duration: '4:26',
has_captions: true,
show_title: true
}
} only %}
{% endset %}

{% set video_2 %}
{% set video_thumbnail_2 %}
{% set video %}
<video-js
data-account="1900410236"
Expand All @@ -35,21 +55,79 @@
class="c-base-video"></video-js>
{% endset %}

{% include '@bolt-elements-ratio/ratio.twig' with {
content: video,
ratio: 'wide'
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
video: {
content: video,
title: 'Video Thumbnail without action play',
duration: '4:26',
has_captions: true,
show_title: true
}
} only %}
{% endset %}

{% set video_thumbnail_3 %}
{% set video %}
<video-js
data-account="1900410236"
data-player="O3FkeBiaDz"
data-embed="default"
data-video-id="3974147489001"
id="{{ video_uuid3 }}"
data-media-title
data-media-duration
controls
class="c-base-video"></video-js>
{% endset %}

{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
video: {
content: video,
title: 'Video Thumbnail with whole card clickablity',
duration: '4:26',
has_captions: true,
show_title: true
}
} only %}
{% endset %}

{% set video_thumbnail_4 %}
{% set video %}
<video-js
data-account="1900410236"
data-player="O3FkeBiaDz"
data-embed="default"
data-video-id="3974147489001"
id="{{ video_uuid4 }}"
data-media-title
data-media-duration
controls
class="c-base-video"></video-js>
{% endset %}

{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
video: {
content: video,
title: 'Video Thumbnail triggered by whole card clickablity',
duration: '4:26',
has_captions: true,
show_title: true
}
} only %}
{% endset %}

{% set card_1 %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
tag: 'article',
media: {
video: video_1
video: video_thumbnail_1
},
body: {
headline: 'With a video as the media',
paragraph: 'This card has a video as the media and the card action can also play/pause the video.',
headline: 'Video Thumbnail with action play',
paragraph: 'The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card\'s media.video prop. The video play button and the card\'s action button will play/pause the video.',
},
actions: [
{
Expand All @@ -65,31 +143,82 @@

{% set card_2 %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
tag: 'article',
media: {
video: video_thumbnail_2
},
body: {
headline: 'Video Thumbnail without action play',
paragraph: 'The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card\'s media.video prop. The video\'s play button will play/pause the video.',
}
} only %}
{% endset %}

{% set card_3 %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
tag: 'article',
link: {
url: 'https://google.com',
text: 'Go to google.com',
text: 'Go to google.com'
},
media: {
video: video_2
video: video_thumbnail_3
},
body: {
headline: 'With a video as the media and an overall link',
paragraph: 'This card has a link, which makes the whole card clickable. The link navigates to another page. The video in this card can still play/pause inline. The link does not cover it.',
}
headline: 'Video Thumbnail with whole card clickablity',
paragraph: 'The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card\'s media.video prop. The video and the card\'s action button will play/pause the video and the whole card clickability will go to a URL path.',
},
actions: [
{
text: 'Play or Pause',
attributes: {
'data-video-target': video_uuid3,
class: 'js-base-video-toggle'
}
},
],
} only %}
{% endset %}

{% include '@bolt-components-grid/grid.twig' with {
items: [
{
column_start: '1 3@small',
column_span: '6 4@small',
content: card_1,
{% set card_4 %}
{% include '@bolt-components-card-replacement/card-replacement.twig' with {
tag: 'article',
link: {
url: '#',
attributes: {
'aria-label': 'Play the Video Thumbnail in Card whole Card Clickablity Video',
'data-video-target': video_uuid4,
class: 'js-base-video-toggle'
}
},
{
column_start: '7',
column_span: '6 4@small',
content: card_2,
media: {
video: video_thumbnail_4
},
]
body: {
headline: 'Video Thumbnail triggered by whole card clickablity',
paragraph: 'The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card\'s media.video prop. The video will play/pause when the whole card is clicked',
}
} only %}
{% endset %}

{% set layout_items %}
{% include '@bolt-layouts-layout/layout-item.twig' with {
content: card_1
} only %}
{% include '@bolt-layouts-layout/layout-item.twig' with {
content: card_2
} only %}
{% include '@bolt-layouts-layout/layout-item.twig' with {
content: card_3
} only %}
{% include '@bolt-layouts-layout/layout-item.twig' with {
content: card_4
} only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
content: layout_items,
template: [
'thirds@from-small',
],
} only %}
3 changes: 2 additions & 1 deletion packages/components/bolt-card-replacement/src/card-replacement/card-replacement.scss
View file
Open in desktop
Expand Up @@ -236,7 +236,8 @@ bolt-card-replacement {
'bolt-card-replacement .e-bolt-text-link',
'::slotted(bolt-button)',
'bolt-card-replacement bolt-button',
'bolt-card-replacement .e-bolt-button'
'bolt-card-replacement .e-bolt-button',
'bolt-card-replacement .c-bolt-video-thumbnail'
)
) {
position: relative;
Expand Down
22 changes: 14 additions & 8 deletions packages/components/bolt-video-thumbnail/src/video-thumbnail.twig
View file
Open in desktop
Expand Up @@ -19,14 +19,20 @@
video.content ? 'c-bolt-video-thumbnail--inline'
] %}

{% if video.has_subtitles %}
{% set subtitles_label = 'Subtitles available' %}
{% if video.has_subtitles or video.has_captions %}
{% set show_icon = true %}
{% endif %}

{% if video.has_subtitles or video.has_captions %}
{% set icon_subtitle_label = 'Subtitles available'|t %}
{% set aria_label = 'This video has subtitles available.' %}
{% endif %}

{% if video.content or button_attributes %}
{% set play_video_label = video.title ? 'Play the video @title.'|t({'@title': video.title}) : 'Play the video.'|t %}
{% if video.has_subtitles %}
{% set play_video_label = play_video_label ~ ' ' ~ 'This video has subtitles available.'|t %}

{% if video.has_subtitles or video.has_captions %}
{% set play_video_label = play_video_label ~ ' ' ~ aria_label|t %}
{% endif %}
{% endif %}

Expand All @@ -51,23 +57,23 @@
</div>
{% endif %}
<div class="c-bolt-video-thumbnail__play-icon" aria-hidden="true"></div>
{% if video.has_subtitles or video.duration %}
{% if show_icon or video.duration %}
<div class="c-bolt-video-thumbnail__meta c-bolt-video-thumbnail__meta--bottom">
{% if video.duration %}
<div class="c-bolt-video-thumbnail__duration">
<span class="u-bolt-visuallyhidden">{{ 'Video duration'|t }}:</span> {{ video.duration }}
</div>
{% endif %}
{% if video.has_subtitles %}
<div class="c-bolt-video-thumbnail__subtitles" aria-label="{{ subtitles_label|t }}">
{% if show_icon %}
<div class="c-bolt-video-thumbnail__subtitles" aria-label="{{ icon_subtitle_label }}">
{% set icon %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'pega-subtitle',
size: 'small'
} only %}
{% endset %}
{{ icon }}
<span class="u-bolt-visuallyhidden">{{ subtitles_label|t }}</span>
<span class="u-bolt-visuallyhidden">{{ icon_subtitle_label }}</span>
</div>
{% endif %}
</div>
Expand Down
6 changes: 6 additions & 0 deletions packages/components/bolt-video-thumbnail/video-thumbnail.schema.js
View file
Open in desktop
Expand Up @@ -55,6 +55,12 @@ module.exports = {
'Display a subtitles icon that overlays the video thumbnail.',
default: false,
},
has_captions: {
type: 'boolean',
description:
'Display a captions icon that overlays the video thumbnail.',
default: false,
},
title: {
type: 'any',
description:
Expand Down