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

[lightbox-media-viewer]: Auto-open and play media from targeted link #11253

Merged
merged 19 commits into from
Jan 11, 2024
Merged

[lightbox-media-viewer]: Auto-open and play media from targeted link #11253

merged 19 commits into from
Jan 11, 2024

Conversation

m4olivei
Copy link
Contributor

@m4olivei m4olivei commented Dec 19, 2023 •
edited
Loading

Related Ticket(s)

Closes #11213
Jira ticket

Description

Enables the CTAMixin to check the URL fragment for a particular pattern, cta-video-[video-id], and if present, kick off the CTA trigger, which in the case of a video CTA, is opening the corresponding lightbox and auto-playing video. The effect is that visiting any page with a video CTA for a specific video embedded in it (eg. 0_ibuqxqbe), with a URL fragment like #cta-video-0_ibuqxqbe, will automatically open the lightbox modal and play the video (provided browser auto-play policies to not block it)

Testing instructions

  • Navigate to any page with a CTA component that allows you to configure it as a video component. Examples include: Link with icon
  • Set the CTA type (cta-type) to Video (video)
  • Take note of the configured Video ID (eg. 0_ibuqxqbe).
  • Click Open canvas in new tab
  • The component should work without any regressions
  • Append a URL fragment to the URL like #cta-video-[video_id]
  • When loading the page with the URL fragment, the lightbox should automatically open and begin playback of the video (subject to browser auto-play policies). Note that mosy likely, the video won't autoplay b/c you probably haven't built up enough of Media Engagement Index (Chrome speak) against the Storybook deploy preview URL. We don't have control over this.

Changelog

New

  • CTAMixin, where ctaType === CTA_TYPE.VIDEO, will check for a specifically crafted URL fragment (cta-video-[video-id]) to trigger it's run action.

@m4olivei m4olivei changed the title Feat/lightbox url trigger [lightbox-media-viewer]: Auto-open and play media from targeted link Dec 19, 2023
@m4olivei m4olivei added Feature request A new adopter requested feature package: web components Work necessary for the IBM.com Library web components package adopter: AEM used when component or pattern will be used by this adopter owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants labels Dec 19, 2023
@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Dec 19, 2023 •
edited
Loading

Deploy preview created for package Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11253/index.html

Built with commit: c17d244ab79970aa08421788fda42abf657cb37b

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Dec 19, 2023 •
edited
Loading

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11253/index.html

Built with commit: c17d244ab79970aa08421788fda42abf657cb37b

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Dec 19, 2023 •
edited
Loading

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11253/index.html

Built with commit: c17d244ab79970aa08421788fda42abf657cb37b

@m4olivei m4olivei marked this pull request as ready for review December 20, 2023 21:43
@m4olivei m4olivei requested a review from a team as a code owner December 20, 2023 21:43
@m4olivei m4olivei requested review from kennylam, sangeethababu9223, jkaeser and andy-blum and removed request for a team December 20, 2023 21:43
@andy-blum andy-blum added the test: CDN preview used for generating @carbon/ibmdotcom-web-components CDN for testing label Dec 22, 2023
@andy-blum andy-blum closed this Dec 22, 2023
@andy-blum andy-blum reopened this Dec 22, 2023
@andy-blum
Copy link
Contributor

I want to test this a little more thoroughly - my main concern at the moment is what happens if multiple CTAs share the same video. Do we get multiple lightboxes?

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Dec 22, 2023 •
edited
Loading

Deploy preview created for package Deploy Preview CDN:
https://ibmdotcom-cdn.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11253/index.html

Built with commit: c17d244ab79970aa08421788fda42abf657cb37b

@m4olivei
Copy link
Contributor Author

m4olivei commented Dec 22, 2023 •
edited
Loading

I want to test this a little more thoroughly - my main concern at the moment is what happens if multiple CTAs share the same video. Do we get multiple lightboxes?

That's a good question. I haven't explored that specifically, that may well be the case. Unless the modal logic has protections against that 🤞 . I can make a note to test that when I'm back in the office next week.

@andy-blum
Copy link
Contributor

andy-blum commented Dec 22, 2023 •
edited
Loading

It does seem to open all matching CTAs this way

https://sandbox.andy-blum.com/ibm/auto-open-lightbox/multiple-ctas.html#cta-video-0_ibuqxqbe

Edit: demo url should be public 😅

@m4olivei
Copy link
Contributor Author

@andy-blum I addressed the multiple lightbox openings by only allowing the first in the page to open by that URL trigger. Feels like that should be sufficient.

From a content editing perspective, I would imagine they would want to try to avoid duplicating video use for CTA's, otherwise you'd have really keen users running into the same video more than once. There could be use cases for that I guess, hopefully this heuristic would suffice.

andy-blum
andy-blum suggested changes Jan 4, 2024
View reviewed changes
Copy link
Contributor

@andy-blum andy-blum left a comment

Choose a reason for hiding this comment

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

One question about how this new behavior fits into the component lifecycle and one minor nit

packages/web-components/src/component-mixins/cta/cta.ts Outdated Show resolved Hide resolved
packages/web-components/src/component-mixins/cta/cta.ts Outdated Show resolved Hide resolved
@m4olivei m4olivei requested a review from andy-blum January 8, 2024 17:44
andy-blum
andy-blum approved these changes Jan 8, 2024
View reviewed changes
Copy link
Contributor

@andy-blum andy-blum left a comment

Choose a reason for hiding this comment

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

Most recent changes look good. Looking forward to seeing @kennylam & co's takes on this.

@m4olivei m4olivei requested a review from kennylam January 9, 2024 18:09
@kennylam kennylam added the Ready to merge Label for the pull requests that are ready to merge label Jan 11, 2024
@kennylam kennylam closed this Jan 11, 2024
@kennylam kennylam reopened this Jan 11, 2024
@kodiakhq kodiakhq bot merged commit 1f63335 into carbon-design-system:main Jan 11, 2024
18 of 33 checks passed
@m4olivei m4olivei mentioned this pull request Jan 17, 2024
Merged
7 tasks
kodiakhq bot pushed a commit that referenced this pull request Jan 30, 2024
@m4olivei
feat(lightbox): detect URL fragment to trigger the lightbox to open (#…
f5a5fe8 
…11412)

### Related Ticket(s)

Closes #11213
[Jira ticket](https://jsw.ibm.com/browse/ADCMS-4360)
[v2 PR](#11253)

### Description

Enables the `VideoCTAMixin` to check the URL fragment for a particular pattern, `cta-video-[video-id]`, and if present, kick off the CTA trigger, which in the case of a video CTA, is opening the corresponding lightbox and auto-playing video. The effect is that visiting any page with a video CTA for a specific video embedded in it (eg. `0_ibuqxqbe`), with a URL fragment like `#cta-video-0_ibuqxqbe`, will automatically open the lightbox modal and play the video (provided [browser auto-play policies to not block it](https://developer.chrome.com/blog/autoplay/)).

### Testing instructions

 - [ ] Navigate to any page with a video CTA component. Examples include: CTA > Default
 - [ ] Set the CTA type (cta-type) to Video (video)
 - [ ] Take note of the configured Video ID (eg. `0_ibuqxqbe`). 
 - [ ] Click Open canvas in new tab
 - [ ] The component should work without any regressions
 - [ ] Append a URL fragment to the URL like `#cta-video-[video_id]`
 - [ ] When loading the page with the URL fragment, the lightbox should automatically open and begin playback of the video (subject to [browser auto-play policies](https://developer.chrome.com/blog/autoplay/)). Note that mosy likely, the video _won't_ autoplay b/c you probably haven't built up enough of Media Engagement Index (Chrome speak) against the Storybook deploy preview URL. We don't have control over this.

### Changelog

**New**

- `VideoCTAMixin`, where `ctaType === CTA_TYPE.VIDEO`,  will check for a specifically crafted URL fragment (`cta-video-[video-id]`) to trigger it's run action.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this pull request Mar 12, 2024
@m4olivei @kennylam
[lightbox-media-viewer]: Auto-open and play media from targeted link (c…
af6d503 
…arbon-design-system#11253)

### Related Ticket(s)

Closes carbon-design-system#11213
[Jira ticket](https://jsw.ibm.com/browse/ADCMS-4360)

### Description

Enables the `CTAMixin` to check the URL fragment for a particular pattern, `cta-video-[video-id]`, and if present, kick off the CTA trigger, which in the case of a video CTA, is opening the corresponding lightbox and auto-playing video. The effect is that visiting any page with a video CTA for a specific video embedded in it (eg. `0_ibuqxqbe`), with a URL fragment like `#cta-video-0_ibuqxqbe`, will automatically open the lightbox modal and play the video (provided [browser auto-play policies to not block it](https://developer.chrome.com/blog/autoplay/))

### Testing instructions

 - [ ] Navigate to any page with a CTA component that allows you to configure it as a video component. Examples include: [Link with icon](https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11253/index.html?path=/story/components-link-with-icon--default)
 - [ ] Set the CTA type (cta-type) to Video (video)
 - [ ] Take note of the configured Video ID (eg. `0_ibuqxqbe`). 
 - [ ] Click Open canvas in new tab
 - [ ] The component should work without any regressions
 - [ ] Append a URL fragment to the URL like `#cta-video-[video_id]`
 - [ ] When loading the page with the URL fragment, the lightbox should automatically open and begin playback of the video (subject to [browser auto-play policies](https://developer.chrome.com/blog/autoplay/)). Note that mosy likely, the video _won't_ autoplay b/c you probably haven't built up enough of Media Engagement Index (Chrome speak) against the Storybook deploy preview URL. We don't have control over this.


### Changelog

**New**

- `CTAMixin`, where `ctaType === CTA_TYPE.VIDEO`,  will check for a specifically crafted URL fragment (`cta-video-[video-id]`) to trigger it's run action.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@andy-blum andy-blum andy-blum approved these changes

@sangeethababu9223 sangeethababu9223 Awaiting requested review from sangeethababu9223 sangeethababu9223 is a code owner automatically assigned from carbon-design-system/carbon-for-ibm-com-members

@jkaeser jkaeser Awaiting requested review from jkaeser

@kennylam kennylam Awaiting requested review from kennylam

Assignees
No one assigned
Labels
adopter: AEM used when component or pattern will be used by this adopter Feature request A new adopter requested feature owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package Ready to merge Label for the pull requests that are ready to merge test: CDN preview used for generating @carbon/ibmdotcom-web-components CDN for testing
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[lightbox-media-viewer]: Auto-open and play media from targeted link
4 participants
@m4olivei @ibmdotcom-bot @andy-blum @kennylam