From f9bacaa92fa7060bf3770d370644af949358ffbd Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 2 Nov 2022 13:06:19 +0000 Subject: [PATCH] WSTEAM1-112 - Enable Facebook Optimo embed (#10377) * Enable Facebook embeds on Optimo * Style fixes, Storybook and tests * CSP header updates * AMP background colour fix * Yarn and regex update * Update Facebook script URL * Yarn updates * Remove custom AMP background colour * Add Article embed fixture page * Add check for Facebook script on mount and unmount Co-authored-by: Andrew Bennett --- data/pidgin/articles/c8pd7gx243po.json | 504 ++++++++++++++ .../__snapshots__/index.test.jsx.snap | 651 ++++++++++++++++++ .../containers/SocialEmbed/common/fixtures.js | 49 ++ .../legacy/containers/SocialEmbed/index.jsx | 1 + .../containers/SocialEmbed/index.stories.jsx | 38 + .../containers/SocialEmbed/index.test.jsx | 58 ++ .../containers/SocialEmbed/sourceHelpers.js | 6 + .../SocialEmbed/sourceHelpers.test.js | 14 + .../psammead-social-embed/src/Amp/index.jsx | 34 + .../src/Canonical/index.jsx | 27 +- .../psammead-social-embed/src/index.jsx | 10 +- src/server/utilities/cspHeader/index.js | 18 + src/server/utilities/cspHeader/index.test.js | 18 + yarn.lock | 4 +- 14 files changed, 1427 insertions(+), 5 deletions(-) create mode 100644 data/pidgin/articles/c8pd7gx243po.json diff --git a/data/pidgin/articles/c8pd7gx243po.json b/data/pidgin/articles/c8pd7gx243po.json new file mode 100644 index 00000000000..923ce16cc22 --- /dev/null +++ b/data/pidgin/articles/c8pd7gx243po.json @@ -0,0 +1,504 @@ +{ + "metadata": { + "id": "urn:bbc:ares::article:c8pd7gx243po", + "locators": { + "optimoUrn": "urn:bbc:optimo:asset:c8pd7gx243po", + "canonicalUrl": "https://www.bbc.com/pidgin/articles/c8pd7gx243po" + }, + "type": "article", + "createdBy": "Pidgin", + "language": "pcm", + "lastUpdated": 1666708800881, + "firstPublished": 1666706395827, + "lastPublished": 1666707859180, + "timestamp": 1666707859180, + "options": {}, + "analyticsLabels": { + "contentId": "urn:bbc:optimo:asset:c8pd7gx243po", + "producer": "Pidgin", + "page": "pidgin.articles.c8pd7gx243po.page" + }, + "passport": { + "language": "pcm", + "home": "http://www.bbc.co.uk/ontologies/passport/home/Pidgin", + "locator": "urn:bbc:optimo:asset:c8pd7gx243po", + "availability": "AVAILABLE", + "taggings": [ + { + "predicate": "http://www.bbc.co.uk/ontologies/bbc/infoClass", + "value": "http://www.bbc.co.uk/things/0db2b959-cbf8-4661-965f-050974a69bb5#id" + } + ], + "schemaVersion": "1.4.0", + "publishedState": "PUBLISHED", + "predicates": { + "infoClass": [ + { + "value": "http://www.bbc.co.uk/things/0db2b959-cbf8-4661-965f-050974a69bb5#id", + "type": "infoClass" + } + ] + } + }, + "tags": {}, + "version": "v1.4.8", + "blockTypes": [ + "headline", + "text", + "paragraph", + "fragment", + "subheadline", + "social", + "renditions", + "aresOEmbed" + ], + "suitableForSyndication": true, + "readTime": 1, + "consumableAsSFV": false, + "allowAdvertising": true, + "consumableOnlyOnRedButton": false + }, + "content": { + "model": { + "blocks": [ + { + "type": "headline", + "model": { + "blocks": [ + { + "type": "text", + "model": { + "blocks": [ + { + "type": "paragraph", + "model": { + "text": "Multiple Facebook Post Embed Test", + "blocks": [ + { + "type": "fragment", + "model": { + "text": "Multiple Facebook Post Embed Test", + "attributes": [] + } + } + ] + } + } + ] + } + } + ] + } + }, + { + "type": "subheadline", + "model": { + "blocks": [ + { + "type": "text", + "model": { + "blocks": [ + { + "type": "paragraph", + "model": { + "text": "First Test", + "blocks": [ + { + "type": "fragment", + "model": { + "text": "First Test", + "attributes": [] + } + } + ] + } + } + ] + } + } + ] + } + }, + { + "type": "social", + "model": { + "source": "https://www.facebook.com/10downingstreet/posts/pfbid02EQPqk1y8kffBd1cdrPFmzs4RrVnw52Fkd9ufCsz11akAymrbHq1Ug6huD88nGjoml", + "providerName": "Facebook", + "blocks": [ + { + "type": "renditions", + "model": { + "locator": "urn:bbc:optimo:social:8cd62b89-8458-44b3-b1ca-6059c6873246", + "blocks": [ + { + "type": "aresOEmbed", + "model": { + "oembed": { + "version": "1.0", + "author_name": "UK Prime Minister", + "author_url": "https://www.facebook.com/10downingstreet", + "provider_name": "Facebook", + "provider_url": "https://www.facebook.com", + "html": "
Posted by UK Prime Minister on Tuesday, October 25, 2022
", + "width": 552 + } + } + } + ] + } + } + ] + } + }, + { + "type": "subheadline", + "model": { + "blocks": [ + { + "type": "text", + "model": { + "blocks": [ + { + "type": "paragraph", + "model": { + "text": "Second Test", + "blocks": [ + { + "type": "fragment", + "model": { + "text": "Second Test", + "attributes": [] + } + } + ] + } + } + ] + } + } + ] + } + }, + { + "type": "social", + "model": { + "source": "https://www.facebook.com/10downingstreet/posts/pfbid0MCXxKS4pqCmDK7QxtRTCG7XmY6eByLu41yf3ipE6gMN8LJRtaSWreLmUH9ZBUoMdl", + "providerName": "Facebook", + "blocks": [ + { + "type": "renditions", + "model": { + "locator": "urn:bbc:optimo:social:ac8c3828-9f4f-4821-b693-f40316fe9cce", + "blocks": [ + { + "type": "aresOEmbed", + "model": { + "oembed": { + "version": "1.0", + "author_name": "UK Prime Minister", + "author_url": "https://www.facebook.com/10downingstreet", + "provider_name": "Facebook", + "provider_url": "https://www.facebook.com", + "html": "
Posted by UK Prime Minister on Tuesday, October 25, 2022
", + "width": 552 + } + } + } + ] + } + } + ] + } + }, + { + "type": "subheadline", + "model": { + "blocks": [ + { + "type": "text", + "model": { + "blocks": [ + { + "type": "paragraph", + "model": { + "text": "Third Test", + "blocks": [ + { + "type": "fragment", + "model": { + "text": "Third Test", + "attributes": [] + } + } + ] + } + } + ] + } + } + ] + } + }, + { + "type": "social", + "model": { + "source": "https://www.youtube.com/watch?v=b_nZICOtzfI", + "providerName": "YouTube", + "blocks": [ + { + "type": "renditions", + "model": { + "locator": "urn:bbc:optimo:social:72503997-9ab6-4a02-856e-cc2f7cfded59", + "blocks": [ + { + "type": "aresOEmbed", + "model": { + "oembed": { + "version": "1.0", + "title": "India's top court judges split on the hijab in classrooms – BBC News", + "author_name": "BBC News", + "author_url": "https://www.youtube.com/c/BBCNews", + "provider_name": "YouTube", + "provider_url": "https://www.youtube.com/", + "thumbnail_url": "https://i.ytimg.com/vi/b_nZICOtzfI/hqdefault.jpg", + "thumbnail_width": 480, + "thumbnail_height": 360, + "html": "", + "width": 200, + "height": 113 + } + } + } + ] + } + } + ] + } + }, + { + "type": "subheadline", + "model": { + "blocks": [ + { + "type": "text", + "model": { + "blocks": [ + { + "type": "paragraph", + "model": { + "text": "Fourth Test", + "blocks": [ + { + "type": "fragment", + "model": { + "text": "Fourth Test", + "attributes": [] + } + } + ] + } + } + ] + } + } + ] + } + }, + { + "type": "social", + "model": { + "source": "https://www.tiktok.com/@cuppymusic/video/7086167423639997701", + "providerName": "TikTok", + "blocks": [ + { + "type": "renditions", + "model": { + "locator": "urn:bbc:optimo:social:5af67a78-54ec-4711-817d-15aaf393e900", + "blocks": [ + { + "type": "aresOEmbed", + "model": { + "oembed": { + "version": "1.0", + "title": "Cupcakes, You don watch my full interview for BBC Pidgin? How you see am? πŸ™ŠπŸ’–βœ¨#BBCPidgin #CuppyOnAMission #CuppyxBBC", + "author_name": "Cuppy", + "author_url": "https://www.tiktok.com/@cuppymusic", + "provider_name": "TikTok", + "provider_url": "https://www.tiktok.com", + "thumbnail_url": "https://p16-sign-va.tiktokcdn.com/obj/tos-maliva-p-0068/328e9247ec2746b8992d5fcdde75affa_1649876928?x-expires=1666728000&x-signature=myBGnNBQ80H6rfzzi16h4OMMlwk%3D", + "thumbnail_width": 576, + "thumbnail_height": 1024, + "html": "
@cuppymusic

Cupcakes, You don watch my full interview for BBC Pidgin? How you see am? πŸ™ŠπŸ’–βœ¨#BBCPidgin #CuppyOnAMission #CuppyxBBC

♬ original sound - Cuppy
" + } + } + } + ] + } + } + ] + } + }, + { + "type": "subheadline", + "model": { + "blocks": [ + { + "type": "text", + "model": { + "blocks": [ + { + "type": "paragraph", + "model": { + "text": "Fifth Test", + "blocks": [ + { + "type": "fragment", + "model": { + "text": "Fifth Test", + "attributes": [] + } + } + ] + } + } + ] + } + } + ] + } + }, + { + "type": "social", + "model": { + "source": "https://www.instagram.com/p/CiK2qRqtmjA/?utm_source=ig_web_copy_link", + "providerName": "Instagram", + "blocks": [ + { + "type": "renditions", + "model": { + "locator": "urn:bbc:optimo:social:74bf1d97-a4f1-43ea-8467-47c1e25826cb", + "blocks": [ + { + "type": "aresOEmbed", + "model": { + "oembed": { + "version": "1.0", + "author_name": "bbc6music", + "provider_name": "Instagram", + "provider_url": "https://www.instagram.com/", + "thumbnail_url": "https://scontent.cdninstagram.com/v/t51.2885-15/305114878_5408824352567542_9080036515091428792_n.jpg?stp=dst-jpg_e35_s640x640_sh0.08&_nc_ht=scontent.cdninstagram.com&_nc_cat=110&_nc_ohc=AcVlwsq5xK0AX85SsHD&edm=AMO9-JQAAAAA&ccb=7-5&oh=00_AT8efoKsBbbOr35Ct554efjuG5bj0HcQTs2Gob2WUtu9qA&oe=635872A4&_nc_sid=b9f2ee", + "thumbnail_width": 640, + "thumbnail_height": 640, + "html": "
View this post on Instagram

A post shared by BBC Radio 6 Music (@bbc6music)

", + "width": 658 + } + } + } + ] + } + } + ] + } + } + ] + } + }, + "promo": { + "locators": { + "optimoUrn": "urn:bbc:optimo:asset:c8pd7gx243po", + "canonicalUrl": "https://www.bbc.com/pidgin/articles/c8pd7gx243po" + }, + "timestamp": 1666707859180, + "suitableForSyndication": true, + "language": "pcm", + "headlines": { + "seoHeadline": "Single Facebook Post Video Embed Test", + "promoHeadline": { + "blocks": [ + { + "type": "text", + "model": { + "blocks": [ + { + "type": "paragraph", + "model": { + "text": "Multiple Facebook Post Embed Test", + "blocks": [ + { + "type": "fragment", + "model": { + "text": "Multiple Facebook Post Embed Test", + "attributes": [] + } + } + ] + } + } + ] + } + } + ] + } + }, + "images": {}, + "summary": { + "blocks": [ + { + "type": "text", + "model": { + "blocks": [ + { + "type": "paragraph", + "model": { + "text": "", + "blocks": [ + { + "type": "fragment", + "model": { + "text": "", + "attributes": [] + } + } + ] + } + } + ] + } + } + ] + }, + "passport": { + "language": "pcm", + "home": "http://www.bbc.co.uk/ontologies/passport/home/Pidgin", + "locator": "urn:bbc:optimo:asset:c8pd7gx243po", + "availability": "AVAILABLE", + "taggings": [ + { + "predicate": "http://www.bbc.co.uk/ontologies/bbc/infoClass", + "value": "http://www.bbc.co.uk/things/0db2b959-cbf8-4661-965f-050974a69bb5#id" + } + ], + "schemaVersion": "1.4.0", + "publishedState": "PUBLISHED", + "predicates": { + "infoClass": [ + { + "value": "http://www.bbc.co.uk/things/0db2b959-cbf8-4661-965f-050974a69bb5#id", + "type": "infoClass" + } + ] + } + }, + "id": "urn:bbc:ares::article:c8pd7gx243po", + "type": "optimo" + }, + "relatedContent": { + "site": { + "subType": "site", + "name": "Pidgin", + "uri": "/pidgin", + "type": "simple" + }, + "groups": [] + } +} diff --git a/src/app/legacy/containers/SocialEmbed/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/SocialEmbed/__snapshots__/index.test.jsx.snap index 1930366c120..35ffaa86c03 100644 --- a/src/app/legacy/containers/SocialEmbed/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/containers/SocialEmbed/__snapshots__/index.test.jsx.snap @@ -302,6 +302,657 @@ exports[`SocialEmbedContainer AMP should match snapshot 1`] = ` `; +exports[`SocialEmbedContainer Canonical should render a Facebook Post block and unmount correctly 1`] = ` +@media (max-width: 14.9375rem) { + .emotion-0 { + padding: 0 0.5rem; + margin-left: 0%; + } +} + +@media (min-width: 15rem) and (max-width: 24.9375rem) { + .emotion-0 { + padding: 0 0.5rem; + margin-left: 0%; + } +} + +@media (min-width: 25rem) and (max-width: 37.4375rem) { + .emotion-0 { + padding: 0 1rem; + margin-left: 0%; + } +} + +@media (min-width: 37.5rem) and (max-width: 62.9375rem) { + .emotion-0 { + padding: 0 1rem; + margin-left: 0%; + } +} + +@media (min-width: 63rem) and (max-width: 79.9375rem) { + .emotion-0 { + margin-left: 20%; + } +} + +@media (min-width: 80rem) { + .emotion-0 { + margin-left: 40%; + } +} + +@supports (display: grid) { + .emotion-0 { + display: block; + width: initial; + margin: 0; + } + + @media (max-width: 14.9375rem) { + .emotion-0 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + padding: 0 0.5rem; + grid-column-start: 1; + } + } + + @media (min-width: 15rem) and (max-width: 24.9375rem) { + .emotion-0 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + padding: 0 0.5rem; + grid-column-start: 1; + } + } + + @media (min-width: 25rem) and (max-width: 37.4375rem) { + .emotion-0 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + padding: 0 1rem; + grid-column-start: 1; + } + } + + @media (min-width: 37.5rem) and (max-width: 62.9375rem) { + .emotion-0 { + grid-template-columns: repeat(5, 1fr); + grid-column-end: span 5; + padding: 0 1rem; + grid-column-start: 1; + } + } + + @media (min-width: 63rem) and (max-width: 79.9375rem) { + .emotion-0 { + grid-template-columns: repeat(5, 1fr); + grid-column-end: span 5; + grid-column-start: 2; + } + } + + @media (min-width: 80rem) { + .emotion-0 { + grid-template-columns: repeat(10, 1fr); + grid-column-end: span 10; + grid-column-start: 5; + } + } +} + +.emotion-2 { + margin-bottom: 1.5rem; + max-width: 31.25rem; + min-height: 14rem; +} + +.emotion-4 { + position: relative; +} + +.emotion-6 { + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + font-size: 0.875rem; + line-height: 1rem; + background-color: #FFFFFF; + border: 0.125rem solid #222222; + display: block; + left: 0; + line-height: 1; + padding: 0.75rem; + position: absolute; + -webkit-text-decoration: none; + text-decoration: none; + top: 0; + z-index: 10; +} + +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-6 { + line-height: 1.125rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-6 { + font-size: 0.8125rem; + } +} + +.emotion-6 span { + color: #222222; +} + +.emotion-6:hover span, +.emotion-6:focus span { + color: #B80000; + border-bottom: 2px solid #B80000; +} + +.emotion-6:not(:focus):not(:active) { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + +.emotion-8 { + margin: 0; + background-color: transparent; +} + +.emotion-10 { + position: relative; + overflow: hidden; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.emotion-10 .fb_iframe_widget { + position: unset; +} + +.emotion-10 .fb_iframe_widget>span { + position: unset; +} + +.emotion-10 iframe { + background-color: white; + left: 0; + top: 0; + height: 100%!important; + width: 100%!important; + position: absolute!important; +} + +.emotion-12 { + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + font-size: 0.875rem; + line-height: 1rem; + color: #545658; + padding: 0.5rem 0; +} + +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-12 { + line-height: 1.125rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-12 { + font-size: 0.8125rem; + } +} + +.emotion-12>span { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + +.emotion-14 { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + +
+
+
+ + + Skip Facebook content + + +
+
+
+ + +

Had a fantastic time at @thescriptofficial concert in LA this week, what a gig!! Have a great US tour guys! Don’t miss...

Posted by Rick Astley on Friday, April 1, 2022
', + type: 'rich', + version: '1.0', + width: 552, + }, + }, + }, + ], + }, +}; + +export const facebookVideoBlockEmbed = { + type: 'renditions', + model: { + locator: 'urn:bbc:optimo:social:d4ae3e6f-51cf-4899-bbd4-16d14882cbc7', + blocks: [ + { + type: 'aresOEmbed', + model: { + oembed: { + author_name: 'Rick Astley', + author_url: 'https://www.facebook.com/RickAstley', + provider_url: 'https://www.facebook.com', + provider_name: 'Facebook', + height: 888, + html: '
\n

Saw another great gig in LA this week, I went to see Inhaler in the @belascola and they were fantastic! Have a great show in New York tomorrow guys! Rick x @inhalerdublin

Posted by Rick Astley on Saturday, April 2, 2022
', + type: 'video', + version: '1.0', + width: 500, + }, + }, + }, + ], + }, +}; diff --git a/src/app/legacy/containers/SocialEmbed/index.jsx b/src/app/legacy/containers/SocialEmbed/index.jsx index 7504ec038ba..a02a90f44cc 100644 --- a/src/app/legacy/containers/SocialEmbed/index.jsx +++ b/src/app/legacy/containers/SocialEmbed/index.jsx @@ -72,6 +72,7 @@ const SocialEmbedContainer = ({ blocks, source }) => { fallback={fallback} skipLink={skipLink} caption={caption} + source={source} /> ) : ( diff --git a/src/app/legacy/containers/SocialEmbed/index.stories.jsx b/src/app/legacy/containers/SocialEmbed/index.stories.jsx index d67e5f54f26..8ec052c0189 100644 --- a/src/app/legacy/containers/SocialEmbed/index.stories.jsx +++ b/src/app/legacy/containers/SocialEmbed/index.stories.jsx @@ -14,6 +14,8 @@ import { instagramBlockNoEmbed, youtubeBlockEmbed, tiktokBlockEmbed, + facebookPostBlockEmbed, + facebookVideoBlockEmbed, } from './common/fixtures'; import OptimoSocialEmbedContainer from '.'; import withContexts from './common/testHelper'; @@ -123,3 +125,39 @@ export const YoutubeWithConsentBannerAmp = props => ( /> ); YoutubeWithConsentBannerAmp.decorators = [AmpDecorator]; + +export const FacebookPostCanonicalExample = props => ( + +); + +export const FacebookPostAmpExample = props => ( + +); +FacebookPostAmpExample.decorators = [AmpDecorator]; + +export const FacebookVideoCanonicalExample = props => ( + +); + +export const FacebookVideoAmpExample = props => ( + +); +FacebookVideoAmpExample.decorators = [AmpDecorator]; diff --git a/src/app/legacy/containers/SocialEmbed/index.test.jsx b/src/app/legacy/containers/SocialEmbed/index.test.jsx index 05001bedadc..0acc737c105 100644 --- a/src/app/legacy/containers/SocialEmbed/index.test.jsx +++ b/src/app/legacy/containers/SocialEmbed/index.test.jsx @@ -13,6 +13,8 @@ import { instagramBlock, youtubeBlockEmbed, tiktokBlockEmbed, + facebookPostBlockEmbed, + facebookVideoBlockEmbed, } from './common/fixtures'; /* eslint-disable react/prop-types */ @@ -122,6 +124,62 @@ describe('SocialEmbedContainer', () => { unmount(); }); + it('should render a Facebook Post block and unmount correctly', () => { + const { container, unmount } = render( + , + { service: 'news', isAmp: false, pageType: ARTICLE_PAGE }, + ); + + expect(container.firstChild).toMatchSnapshot(); + expect( + document.querySelector( + 'head script[src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v15.0"]', + ), + ).toBeTruthy(); + expect(loggerMock.info).toHaveBeenCalledTimes(1); + expect(loggerMock.info).toHaveBeenCalledWith(SOCIAL_EMBED_RENDERED, { + provider: 'facebook', + href: 'https://www.facebook.com/RickAstley/posts/545713756920775', + }); + unmount(); + expect( + document.querySelector( + 'head script[src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v15.0"]', + ), + ).toBeFalsy(); + }); + + it('should render a Facebook Video block and unmount correctly', () => { + const { container, unmount } = render( + , + { service: 'news', isAmp: false, pageType: ARTICLE_PAGE }, + ); + + expect(container.firstChild).toMatchSnapshot(); + expect( + document.querySelector( + 'head script[src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v15.0"]', + ), + ).toBeTruthy(); + expect(loggerMock.info).toHaveBeenCalledTimes(1); + expect(loggerMock.info).toHaveBeenCalledWith(SOCIAL_EMBED_RENDERED, { + provider: 'facebook', + href: 'https://www.facebook.com/RickAstley/videos/1378590239249667', + }); + unmount(); + expect( + document.querySelector( + 'head script[src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v15.0"]', + ), + ).toBeFalsy(); + }); + it('should render the correct skip link text when indexOfType is provided (means this is one of multiple e.g. Twitter embeds in the article)', () => { render( { if (source.match(/^https:\/\/www\.tiktok\.com/)) { return PROVIDERS.TIKTOK; } + if (source.match(/^https:\/\/www\.facebook\.com/)) { + return PROVIDERS.FACEBOOK; + } return PROVIDERS.UNKNOWN; }; @@ -42,6 +46,7 @@ export const getIdFromSource = source => { youtube: /\/watch\?v=([0-9A-Z a-z_-]+)/, instagram: /\/p\/([0-9A-Za-z_-]+)/, tiktok: /\/video\/([0-9]+)/, + facebook: /\/(?:posts|videos)\/([0-9A-Za-z]+)/, }; const NO_ID = ''; const provider = getProviderFromSource(source); @@ -51,6 +56,7 @@ export const getIdFromSource = source => { PROVIDERS.YOUTUBE, PROVIDERS.INSTAGRAM, PROVIDERS.TIKTOK, + PROVIDERS.FACEBOOK, ].includes(provider) ) { const id = source.match(sourceIds[provider]); diff --git a/src/app/legacy/containers/SocialEmbed/sourceHelpers.test.js b/src/app/legacy/containers/SocialEmbed/sourceHelpers.test.js index 1c03fa3914c..436c39e8a75 100644 --- a/src/app/legacy/containers/SocialEmbed/sourceHelpers.test.js +++ b/src/app/legacy/containers/SocialEmbed/sourceHelpers.test.js @@ -9,6 +9,10 @@ describe('sourceHelpers', () => { const YOUTUBE_SOURCE = 'https://www.youtube.com/watch?v=1e05_rwHvOM'; const TIKTOK_SOURCE = 'https://www.tiktok.com/@cuppymusic/video/7086167423639997701'; + const FACEBOOK_POST_SOURCE = + 'https://www.facebook.com/RickAstley/posts/545713756920775'; + const FACEBOOK_VIDEO_SOURCE = + 'https://www.facebook.com/RickAstley/videos/1378590239249667'; const UNKNOWN_SOURCE = 'https://www.randomSource.com/watch?v=XWxjmToNSjQ'; describe('getProviderFromSource', () => { @@ -44,6 +48,16 @@ describe('sourceHelpers', () => { expect(getIdFromSource(TIKTOK_SOURCE)).toEqual('7086167423639997701'); }); + it('should return a social embed ID for a valid Facebook Post source', () => { + expect(getIdFromSource(FACEBOOK_POST_SOURCE)).toEqual('545713756920775'); + }); + + it('should return a social embed ID for a valid Facebook Video source', () => { + expect(getIdFromSource(FACEBOOK_VIDEO_SOURCE)).toEqual( + '1378590239249667', + ); + }); + it('should return an empty string for an unknown or invalid source', () => { expect(getIdFromSource(UNKNOWN_SOURCE)).toEqual(''); expect(getIdFromSource('https://twitter.com/BBCNews')).toEqual(''); diff --git a/src/app/legacy/psammead/psammead-social-embed/src/Amp/index.jsx b/src/app/legacy/psammead/psammead-social-embed/src/Amp/index.jsx index e1d9f5d25e6..4e4caecbd32 100644 --- a/src/app/legacy/psammead/psammead-social-embed/src/Amp/index.jsx +++ b/src/app/legacy/psammead/psammead-social-embed/src/Amp/index.jsx @@ -60,6 +60,38 @@ const TikTok = ({ id }) => ( ); +const Facebook = ({ source }) => { + const getEmbedType = () => { + switch (true) { + case source.includes('posts'): + return 'post'; + case source.includes('videos'): + return 'video'; + default: + return 'post'; + } + }; + + return ( + <> + +