Skip to content

Commit

Permalink
Merge pull request #11968 from bbc/av-embeds-externalembedurl-logic-r…
Browse files Browse the repository at this point in the history
…efactor

Av-embeds `externalEmbedUrl` logic refactor
  • Loading branch information
andrewscfc authored Sep 17, 2024
2 parents 9956dfa + 4b84691 commit 05520d1
Show file tree
Hide file tree
Showing 8 changed files with 245 additions and 29 deletions.
12 changes: 3 additions & 9 deletions src/app/components/MediaLoader/configs/aresMedia.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
OptimoImageBlock,
OptimoRawImageBlock,
} from '#app/models/types/optimo';
import getEmbedURL from '#lib/utilities/getUrlHelpers/getEmbedUrl';
import {
AresMediaBlock,
AresMediaMetadataBlock,
Expand All @@ -15,6 +14,7 @@ import {
import getCaptionBlock from '../utils/getCaptionBlock';
import buildPlaceholderConfig from '../utils/buildPlaceholderConfig';
import shouldDisplayAds from '../utils/shouldDisplayAds';
import { getExternalEmbedUrl } from '../utils/urlConstructors';

const DEFAULT_WIDTH = 512;

Expand All @@ -28,7 +28,6 @@ export default ({
showAdsBasedOnLocation = false,
embedded,
lang,
isAmp,
}: ConfigBuilderProps): ConfigBuilderReturnProps => {
const { model: aresMedia }: AresMediaBlock =
filterForBlockType(blocks, 'aresMedia') ?? {};
Expand Down Expand Up @@ -111,19 +110,14 @@ export default ({
placeholderImageLocator: locator,
});

const embedUrl = getEmbedURL({
mediaId: `${id}/${versionID}/${lang}`,
type: 'avEmbed',
isAmp,
embedded,
});
const externalEmbedUrl = getExternalEmbedUrl({ id, versionID, lang });

return {
mediaType: actualFormat || 'video',
playerConfig: {
...basePlayerConfig,
...(embedded && { insideIframe: true, embeddedOffsite: true }),
...(embedUrl && { externalEmbedUrl: embedUrl }),
...(externalEmbedUrl && { externalEmbedUrl }),
autoplay: pageType !== 'mediaArticle',
playlistObject: {
title,
Expand Down
9 changes: 5 additions & 4 deletions src/app/components/MediaLoader/utils/buildSettings.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ describe('buildSettings', () => {
},
enableToucan: true,
externalEmbedUrl:
'/ws/av-embeds/cps/serbian/lat/srbija-68707945/p01k6msp/sr-latn',
'https://www.test.bbc.com/serbian/lat/av-embeds/srbija-68707945/vpid/p01k6msp',
appName: 'news-serbian',
appType: 'responsive',
counterName: 'live_coverage.testID.page',
Expand Down Expand Up @@ -239,7 +239,7 @@ describe('buildSettings', () => {
},
enableToucan: true,
externalEmbedUrl:
'/ws/av-embeds/cps/serbian/lat/srbija-68707945/p01k6msp/sr-latn',
'https://www.test.bbc.com/serbian/lat/av-embeds/srbija-68707945/vpid/p01k6msp',
appName: 'news-serbian',
appType: 'responsive',
counterName: 'live_coverage.testID.page',
Expand Down Expand Up @@ -309,7 +309,7 @@ describe('buildSettings', () => {
appType: 'responsive',
counterName: 'live_coverage.testID.page',
externalEmbedUrl:
'/ws/av-embeds/cps/serbian/lat/srbija-68707945/bbc_arabic_tv/sr-latn',
'https://www.test.bbc.com/serbian/lat/av-embeds/srbija-68707945/vpid/bbc_arabic_tv',
playlistObject: {
title: 'مباشر: تلفزيون بي بي سي عربي',
summary: 'This is a caption!',
Expand Down Expand Up @@ -362,7 +362,8 @@ describe('buildSettings', () => {
producer: 'SERBIAN',
},
enableToucan: true,
externalEmbedUrl: '/serbian/lat/av-embeds/srbija-68707945',
externalEmbedUrl:
'https://www.test.bbc.com/serbian/lat/av-embeds/srbija-68707945/vpid/p01k6msp',
insideIframe: true,
embeddedOffsite: true,
appName: 'news-serbian',
Expand Down
184 changes: 184 additions & 0 deletions src/app/components/MediaLoader/utils/urlConstructors.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
import { getAmpIframeUrl, getExternalEmbedUrl } from './urlConstructors';

/*
Note:
The 'id' field is the ID of the page being visited, so for canonical article pages it would be something like: '/thai/international-55160422'.
For Syndicated routes, it would be something like /serbian/cyr/av-embeds/srbija-68707945 or /ws/av-embeds/articles/cd1rmn075d1o/p0jd37n8/ig
*/

const ampIframeTestCases = [
{
description: 'should build an AMP iframe URL for the page',
cases: [
{
description: 'CPS without variant',
id: 'thai/international-55160422',
versionID: 'p0908t9z',
lang: 'th',
expected:
'https://web-cdn.test.api.bbci.co.uk/ws/av-embeds/cps/thai/international-55160422/p0908t9z/th/amp',
},
{
description: 'CPS without variant (no versionID)',
id: 'thai/international-55160422',
lang: 'th',
expected:
'https://web-cdn.test.api.bbci.co.uk/ws/av-embeds/cps/thai/international-55160422/th/amp',
},
{
description: 'CPS with variant',
id: 'serbian/cyr/srbija-68707945',
versionID: 'p0cfmdwn',
lang: 'sr-cyrl',
expected:
'https://web-cdn.test.api.bbci.co.uk/ws/av-embeds/cps/serbian/cyr/srbija-68707945/p0cfmdwn/sr-cyrl/amp',
},
{
description: 'CPS with variant (no versionID)',
id: 'serbian/cyr/srbija-68707945',
lang: 'sr-cyrl',
expected:
'https://web-cdn.test.api.bbci.co.uk/ws/av-embeds/cps/serbian/cyr/srbija-68707945/sr-cyrl/amp',
},
{
description: 'Optimo',
id: 'mundo/articles/c805k05kr73o',
versionID: 'p0cfmdwn',
lang: 'es',
expected:
'https://web-cdn.test.api.bbci.co.uk/ws/av-embeds/articles/c805k05kr73o/p0cfmdwn/es/amp',
},
],
},
];

const externalEmbedUrlTestCases = [
{
description: 'should build an external embed URL for the page',
cases: [
{
description: 'CPS without variant',
id: 'thai/international-55160422',
versionID: 'p0908t9z',
lang: 'th',
expected:
'https://www.test.bbc.com/thai/av-embeds/international-55160422/vpid/p0908t9z',
},
{
description: 'CPS without variant (no versionID)',
id: 'thai/international-55160422',
lang: 'th',
expected:
'https://www.test.bbc.com/thai/av-embeds/international-55160422',
},
{
description: 'CPS with variant',
id: 'serbian/cyr/srbija-68707945',
versionID: 'p0cfmdwn',
lang: 'sr-cyrl',
expected:
'https://www.test.bbc.com/serbian/cyr/av-embeds/srbija-68707945/vpid/p0cfmdwn',
},
{
description: 'CPS with variant (no versionID)',
id: 'serbian/cyr/srbija-68707945',
lang: 'sr-cyrl',
expected:
'https://www.test.bbc.com/serbian/cyr/av-embeds/srbija-68707945',
},
{
description: 'CPS Syndicated route without variant',
id: 'news/av-embeds/58869966/vpid/p07r2y68',
versionID: 'p07r2y68',
lang: 'en-gb',
expected:
'https://www.test.bbc.com/news/av-embeds/58869966/vpid/p07r2y68',
},
{
description: 'CPS Syndicated route without variant (no versionID)',
id: 'news/av-embeds/58869966',
lang: 'en-gb',
expected: 'https://www.test.bbc.com/news/av-embeds/58869966',
},
{
description: 'CPS Syndicated route with variant',
id: 'serbian/cyr/av-embeds/srbija-68707945/pid/p0cfmdwn',
versionID: 'p0cfmdwn',
lang: 'sr-cyrl',
expected:
'https://www.test.bbc.com/serbian/cyr/av-embeds/srbija-68707945/vpid/p0cfmdwn',
},
{
description: 'CPS Syndicated route with variant (no versionID)',
id: 'serbian/cyr/av-embeds/srbija-68707945',
lang: 'sr-cyrl',
expected:
'https://www.test.bbc.com/serbian/cyr/av-embeds/srbija-68707945',
},
{
description: 'Optimo',
id: 'mundo/articles/c805k05kr73o',
versionID: 'p0cfmdwn',
lang: 'es',
expected:
'https://www.test.bbc.com/ws/av-embeds/articles/c805k05kr73o/p0cfmdwn/es',
},
{
description: 'Optimo (no versionID)',
id: 'mundo/articles/c805k05kr73o',
lang: 'es',
expected:
'https://www.test.bbc.com/ws/av-embeds/articles/c805k05kr73o/es',
},
{
description: 'Optimo Syndicated route',
id: 'ws/av-embeds/articles/cd1rmn075d1o/p0jd37n8/ig',
versionID: 'p0jd37n8',
lang: 'ig',
expected:
'https://www.test.bbc.com/ws/av-embeds/articles/cd1rmn075d1o/p0jd37n8/ig',
},
{
description: 'Optimo Syndicated route (no versionID)',
id: 'ws/av-embeds/articles/cd1rmn075d1o/p0jd37n8/ig',
lang: 'ig',
expected:
'https://www.test.bbc.com/ws/av-embeds/articles/cd1rmn075d1o/ig',
},
],
},
];

describe('urlConstructors', () => {
describe('AMP iframe URL', () => {
ampIframeTestCases.forEach(({ description, cases }) => {
describe(description, () => {
cases.forEach(
({ description: caseDescription, id, versionID, lang, expected }) => {
it(caseDescription, () => {
expect(getAmpIframeUrl({ id, versionID, lang })).toEqual(
expected,
);
});
},
);
});
});
});

describe('External embed URL', () => {
externalEmbedUrlTestCases.forEach(({ description, cases }) => {
describe(description, () => {
cases.forEach(
({ description: caseDescription, id, versionID, lang, expected }) => {
it(caseDescription, () => {
expect(getExternalEmbedUrl({ id, versionID, lang })).toEqual(
expected,
);
});
},
);
});
});
});
});
50 changes: 50 additions & 0 deletions src/app/components/MediaLoader/utils/urlConstructors.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import isLive from '#app/lib/utilities/isLive';
import parseAvRoute from '#app/routes/utils/parseAvRoute';

const LIVE_BASE_URL = 'https://www.bbc.com';
const TEST_BASE_URL = 'https://www.test.bbc.com';

const LIVE_AMP_URL = 'https://web-cdn.api.bbci.co.uk';
const TEST_AMP_URL = 'https://web-cdn.test.api.bbci.co.uk';

type FuncProps = {
id: string | null;
versionID?: string;
lang?: string;
};

export const getAmpIframeUrl = ({ id, versionID, lang }: FuncProps) => {
if (!id) return null;

const { platform, service, variant, assetId } = parseAvRoute(id);

const ampBaseUrl = isLive() ? LIVE_AMP_URL : TEST_AMP_URL;

if (platform === 'cps') {
return `${ampBaseUrl}/ws/av-embeds/cps/${service}${variant ? `/${variant}` : ''}/${assetId}${versionID ? `/${versionID}` : ''}${lang ? `/${lang}` : ''}/amp`;
}

if (platform === 'articles') {
return `${ampBaseUrl}/ws/av-embeds/articles/${assetId}${versionID ? `/${versionID}` : ''}${lang ? `/${lang}` : ''}/amp`;
}

return null;
};

export const getExternalEmbedUrl = ({ id, versionID, lang }: FuncProps) => {
if (!id) return null;

const { platform, service, variant, assetId } = parseAvRoute(id);

const baseUrl = isLive() ? LIVE_BASE_URL : TEST_BASE_URL;

if (platform === 'cps') {
return `${baseUrl}/${service}${variant ? `/${variant}` : ''}/av-embeds/${assetId}${versionID ? `/vpid/${versionID}` : ''}`;
}

if (platform === 'articles') {
return `${baseUrl}/ws/av-embeds/articles/${assetId}${versionID ? `/${versionID}` : ''}${lang ? `/${lang}` : ''}`;
}

return null;
};
13 changes: 0 additions & 13 deletions src/app/routes/utils/parseAvRoute/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -146,19 +146,6 @@ const extractMediaDelimiter = (query: Query) => {
return mediaDelimiter ?? null;
};

/**
* Syndication route patterns:
* -/:service/av-embeds/:asset_id
* -/:service/av-embeds/:asset_uri_wo_service
* -/:service/av-embeds/:asset_id/vpid/:vpid
* -/:service/av-embeds/:asset_uri_wo_service/pid/:pid
*
* Syndication route examples:
* -/news/av-embeds/67303123
* -/serbian/cyr/av-embeds/srbija-68707945
* -/russian/av-embeds/38886884/vpid/p04s97g7
* -/news/av-embeds/58228280/pid/p09s9t1j
*/
export default function parseAvRoute(resolvedUrl: string) {
const resolvedUrlWithoutQuery = resolvedUrl.split('?')?.[0];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ exports[`Canonical Media Asset Page SEO Linked data should match text 2`] = `
"@type": "AudioObject",
"description": "Trump long headline",
"duration": "PT26S",
"embedURL": "https://www.test.bbc.com/ws/av-embeds/cps/persian/iran-23231114/p01lmkjk/fa",
"embedURL": "https://www.test.bbc.com/persian/av-embeds/iran-23231114/vpid/p01lmkjk",
"name": "Trump short headline",
"thumbnailUrl": "https://ichef.test.bbci.co.uk/images/ic/1024x576/p01lmkk5.jpg",
"uploadDate": "2019-02-15T12:37:28.000Z",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ exports[`Canonical Media Asset Page SEO Linked data should match text 2`] = `
"@type": "VideoObject",
"description": "トランプ氏、香港人権法案に署名 中国は反発",
"duration": "PT5S",
"embedURL": "https://www.test.bbc.com/ws/av-embeds/cps/pidgin/23248703/p01kx42v/pcm",
"embedURL": "https://www.test.bbc.com/pidgin/av-embeds/23248703/vpid/p01kx42v",
"name": "トランプ氏、香港人権法案に署名 中国は反発",
"thumbnailUrl": "https://ichef.test.bbci.co.uk/images/ic/1024x576/p012zl0f.jpg",
"uploadDate": "2018-12-20T11:06:51.000Z",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ exports[`Canonical Story Page SEO Linked data should match text 2`] = `
"@type": "AudioObject",
"description": "मुंबई इंडियन्सला आता दुसऱ्या क्वॉलिफायर लढतीत खेळावे लागणार आहे.",
"duration": "PT16S",
"embedURL": "https://www.test.bbc.com/ws/av-embeds/cps/hausa/labarai-23246985/p01b7w2z/ha",
"embedURL": "https://www.test.bbc.com/hausa/av-embeds/labarai-23246985/vpid/p01b7w2z",
"name": "पुणे सुपरजायंट्स आयपीएलच्या अंतिम फेरीत!",
"thumbnailUrl": "https://ichef.test.bbci.co.uk/images/ic/1024x576/p01b7w9z.jpg",
"uploadDate": "2017-05-22T15:38:23.000Z",
Expand Down

0 comments on commit 05520d1

Please sign in to comment.