();
-
- useEffect(() => {
- counter ??= 0;
- setIndex(++counter);
- }, []);
-
useEffect(() => {
const defineConsentState = async () => {
const { onConsentChange } = await import(
@@ -208,7 +200,7 @@ export const YoutubeBlockComponent = ({
return (
{
assetId="d2Q5bXvEgMg"
mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
+ elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
expired={false}
stickyVideos={false}
/>
@@ -82,6 +83,7 @@ export const Vertical = () => {
assetId="d2Q5bXvEgMg"
mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
+ elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
expired={false}
height={259}
width={460}
@@ -116,6 +118,7 @@ export const Expired = () => {
assetId="d2Q5bXvEgMg"
mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
+ elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
expired={true}
overrideImage="https://i.guim.co.uk/img/media/49565a29c6586fe6b748926e0be96c5e9c90473c/0_0_4981_2989/500.jpg?quality=85&auto=format&fit=max&s=17c70ec70002ea34886fd6c2605cd81e"
height={259}
@@ -151,6 +154,7 @@ export const WithOverlayImage = () => {
assetId="d2Q5bXvEgMg"
mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
+ elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
expired={false}
duration={333}
overrideImage="https://i.guim.co.uk/img/media/49565a29c6586fe6b748926e0be96c5e9c90473c/0_0_4981_2989/500.jpg?quality=85&auto=format&fit=max&s=17c70ec70002ea34886fd6c2605cd81e"
@@ -187,6 +191,7 @@ export const WithPosterImage = () => {
assetId="d2Q5bXvEgMg"
mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
+ elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
expired={false}
duration={333}
posterImage={[
@@ -244,6 +249,7 @@ export const WithPosterAndOverlayImage = () => {
assetId="d2Q5bXvEgMg"
mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
+ elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
expired={false}
overrideImage="https://i.guim.co.uk/img/media/49565a29c6586fe6b748926e0be96c5e9c90473c/0_0_4981_2989/500.jpg?quality=85&auto=format&fit=max&s=17c70ec70002ea34886fd6c2605cd81e"
duration={333}
@@ -302,6 +308,7 @@ export const WithShowMainVideoFlagOff = () => {
assetId="d2Q5bXvEgMg"
mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
+ elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
expired={false}
overrideImage="https://i.guim.co.uk/img/media/49565a29c6586fe6b748926e0be96c5e9c90473c/0_0_4981_2989/500.jpg?quality=85&auto=format&fit=max&s=17c70ec70002ea34886fd6c2605cd81e"
duration={333}
diff --git a/dotcom-rendering/src/lib/liveblogAdSlots.test.ts b/dotcom-rendering/src/lib/liveblogAdSlots.test.ts
index e86b004753c..28696daa6ac 100644
--- a/dotcom-rendering/src/lib/liveblogAdSlots.test.ts
+++ b/dotcom-rendering/src/lib/liveblogAdSlots.test.ts
@@ -55,6 +55,7 @@ describe('calculateApproximateBlockHeight', () => {
_type: 'model.dotcomrendering.pageElements.YoutubeBlockElement',
id: '1',
assetId: '',
+ elementId: '1',
expired: false,
mediaTitle: '',
},
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index 2b14b99afcc..e9c328d3d59 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -743,6 +743,7 @@ export const renderElement = ({
hideCaption={hideCaption}
isMainMedia={isMainMedia}
id={element.id}
+ elementId={element.elementId}
assetId={element.assetId}
expired={element.expired}
overrideImage={element.overrideImage}
diff --git a/dotcom-rendering/src/model/article-schema.json b/dotcom-rendering/src/model/article-schema.json
index 4eab22c5fdc..153fac988f5 100644
--- a/dotcom-rendering/src/model/article-schema.json
+++ b/dotcom-rendering/src/model/article-schema.json
@@ -3306,6 +3306,9 @@
"type": "string",
"const": "model.dotcomrendering.pageElements.YoutubeBlockElement"
},
+ "elementId": {
+ "type": "string"
+ },
"assetId": {
"type": "string"
},
@@ -3355,6 +3358,7 @@
"required": [
"_type",
"assetId",
+ "elementId",
"expired",
"id",
"mediaTitle"
@@ -4394,7 +4398,7 @@
"type": "string",
"const": "Video"
},
- "id": {
+ "elementId": {
"type": "string"
},
"videoId": {
@@ -4439,9 +4443,9 @@
},
"required": [
"duration",
+ "elementId",
"expired",
"height",
- "id",
"images",
"origin",
"title",
diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
index 88f9707623c..5751e27c6aa 100644
--- a/dotcom-rendering/src/model/block-schema.json
+++ b/dotcom-rendering/src/model/block-schema.json
@@ -2895,6 +2895,9 @@
"type": "string",
"const": "model.dotcomrendering.pageElements.YoutubeBlockElement"
},
+ "elementId": {
+ "type": "string"
+ },
"assetId": {
"type": "string"
},
@@ -2944,6 +2947,7 @@
"required": [
"_type",
"assetId",
+ "elementId",
"expired",
"id",
"mediaTitle"
diff --git a/dotcom-rendering/src/model/enhanceCards.ts b/dotcom-rendering/src/model/enhanceCards.ts
index bd3ecfb19ee..a113dadb0bb 100644
--- a/dotcom-rendering/src/model/enhanceCards.ts
+++ b/dotcom-rendering/src/model/enhanceCards.ts
@@ -225,7 +225,7 @@ const getActiveMediaAtom = (mediaAtom?: FEMediaAtom): MainMedia | undefined => {
if (asset?.platform === 'Youtube') {
return {
type: 'Video',
- id: mediaAtom.id,
+ elementId: mediaAtom.id,
videoId: asset.id,
duration: mediaAtom.duration ?? 0,
title: mediaAtom.title,
diff --git a/dotcom-rendering/src/model/front-schema.json b/dotcom-rendering/src/model/front-schema.json
index d646e13dc45..9f2dfa8f0af 100644
--- a/dotcom-rendering/src/model/front-schema.json
+++ b/dotcom-rendering/src/model/front-schema.json
@@ -3577,7 +3577,7 @@
"type": "string",
"const": "Video"
},
- "id": {
+ "elementId": {
"type": "string"
},
"videoId": {
@@ -3622,9 +3622,9 @@
},
"required": [
"duration",
+ "elementId",
"expired",
"height",
- "id",
"images",
"origin",
"title",
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
index c5a9269e30d..8f07bd29e7e 100644
--- a/dotcom-rendering/src/types/content.ts
+++ b/dotcom-rendering/src/types/content.ts
@@ -552,6 +552,7 @@ export interface VideoYoutubeBlockElement extends ThirdPartyEmbeddedContent {
export interface YoutubeBlockElement {
_type: 'model.dotcomrendering.pageElements.YoutubeBlockElement';
+ elementId: string;
assetId: string;
mediaTitle: string;
id: string;
diff --git a/dotcom-rendering/src/types/mainMedia.ts b/dotcom-rendering/src/types/mainMedia.ts
index c5ebcb2e7ce..dbb21ca7d38 100644
--- a/dotcom-rendering/src/types/mainMedia.ts
+++ b/dotcom-rendering/src/types/mainMedia.ts
@@ -5,7 +5,7 @@ type Media = {
/** For displaying embedded, playable videos directly in cards */
type Video = Media & {
type: 'Video';
- id: string;
+ elementId: string;
videoId: string;
height: number;
width: number;