feat(BrandMotion): embed samples

Adding vimeo embed for motion samples

assigned to @monica_galletto

@monica_galletto - please see the following guidance and update this merge request.

	1 Error
	Please add typebug typefeature, or typemaintenance label to this merge request.

added typefeature label

requested review from @jeldergl

@jeldergl do you mind following up here on the vimeo embeds? If you don't figure it out before being OOO, feel free to reassign to me

@tauriedavis I can see the following console error, but won't have time to investigate further before being out, sorry!

I did find this, which feels a bit related #1333 (closed).

68666e3.js:2 Refused to load the script 'https://player.vimeo.com/api/player.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://www.google-analytics.com https://cdn.cookielaw.org". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

@pgascouvaillancourt (sorry Paul, didn't realize you were OOO)

@markrian Do you have any insight on what might be blocking vimeo embeds?

@tauriedavis It looks like we need to update the CSP in Nuxt's config. This should work:

diff --git a/nuxt.config.js b/nuxt.config.js
index 20d2de0c..f28c3def 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -24,7 +24,7 @@ if (GOOGLE_ANALYTICS_ID) {
 
 const cspPolicies = [
   "default-src 'self'",
-  "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://www.google-analytics.com https://cdn.cookielaw.org",
+  "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://www.google-analytics.com https://cdn.cookielaw.org https://player.vimeo.com",
   "style-src 'self' 'unsafe-inline'",
   "object-src 'none'",
   "img-src 'self' https: data:",

Thanks for this @pgascouvaillancourt! I've applied the patch and will test the changes shortly. @tauriedavis I can take this back over.

@pgascouvaillancourt the Vimeo embeds are still being blocked after applying the patch.

@jeldergl My patch was missing the frame-src part which also needs to be updated. I overwrote the latest commit to include that change. It works for me locally now. Let's see how it goes in the review app.

@pgascouvaillancourt I can only check locally at the moment. I'm getting invalid cert errors for the review app, see this Slack thread.

This is working, thanks @pgascouvaillancourt.

@monica_galletto you should be able to see the videos now in the review app. At the moment you may have to bypass the cert error.

Can you assign your team for a content review? After it's approved, feel free to reassign to me for merging.

Hi @Joanna_C I'm tagging you for review (select View App at the top of this MR). The link wasn't working for me in Chrome, but it works on Safari

I'm seeing the vimeo embeds on my end, so we should be good

@monica_galletto yep this looks good to me as well.

Ready to merge :) @jeldergl thank you!

@jeldergl @pgascouvaillancourt Thanks so much for helping here!

@monica_galletto sorry this has been delayed, the past week was a whirlwind! Also, for the future you will want to assign @jeldergl as reviewer once you are ready so that he sees the assignment in his MR list

@jeldergl @pgascouvaillancourt I noticed that <script src="https://player.vimeo.com/api/player.js"></script> is being embedded multiple times (for each <iframe> embed). I believe we only need to include this if we wish to target player events, for simple embeds we can use an <iframe> directly.

@monica_galletto I've created a <vimeo-player> component which takes a required videoId prop and optional title prop to make the authoring of video embeds in markdown easier and remove duplicated styles/URL params. I also added a default option to customise the player controls to the Pajamas brand purple.

@sdejonge awesome changes! I'm going to proceed with merging, but perhaps we could take a look at a purple that gets more contrast for the smaller icon hover states in a future MR.

Oops I totally meant to do that in the moment, too. Thanks Taurie!

And thank you so much Scott!

requested review from @tauriedavis and removed review request for @jeldergl

requested review from @pgascouvaillancourt

requested review from @markrian and removed review request for @pgascouvaillancourt

added 1 commit

• c445ce63 - feat(VimeoEmbeds): Allow Vimeo embeds

Compare with previous version

requested review from @jeldergl and removed review request for @tauriedavis

Minor release (conventional commits)

This Merge Request will trigger a minor release of Pajamas Design System, triggered by commit: 1c758d97

This will bump the second part of the version number, e.g. v1.2.3 -> v1.3.0.

Generated by Danger

added 1 commit

• 9501a418 - feat(VimeoEmbeds): Allow Vimeo embeds

Compare with previous version

removed review request for @markrian and @jeldergl

requested review from @Joanna_C

removed review request for @Joanna_C

requested review from @jeldergl

added 1 commit

• 1c758d97 - feat(VimeoEmbeds): Add VimeoPlayer component

Compare with previous version

resolved all threads

approved this merge request

mentioned in commit 33e62588

merged