@guardian/atoms-rendering - npm Package Compare versions

Comparing version 23.10.0 to 23.11.0

CHANGELOG.md

 # @guardian/atoms-rendering
 
+## 23.11.0
+
+### Minor Changes
+
+-   a54e806: YouTube player is passed client side participations for targeting
+
 ## 23.10.0
@@ -4,0 +10,0 @@

dist/commonjs/YoutubeAtom.js

@@ -11,3 +11,3 @@ "use strict";
 const YoutubeAtomSticky_1 = require("./YoutubeAtomSticky");
-const YoutubeAtom = ({ elementId, videoId, overrideImage, posterImage, adTargeting, consentState, height = 259, width = 460, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, isMainMedia, imaEnabled, }) => {
+const YoutubeAtom = ({ elementId, videoId, overrideImage, posterImage, adTargeting, consentState, height = 259, width = 460, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, isMainMedia, imaEnabled, abTestParticipations, }) => {
     const [overlayClicked, setOverlayClicked] = (0, react_1.useState)(false);
@@ -91,4 +91,4 @@ const [playerReady, setPlayerReady] = (0, react_1.useState)(false);
                         setIsActive(false);
-                    } })), showOverlay && ((0, jsx_runtime_1.jsx)(YoutubeAtomOverlay_1.YoutubeAtomOverlay, { uniqueId: uniqueId, overrideImage: overrideImage, posterImage: posterImage, height: height, width: width, alt: alt, role: role, duration: duration, pillar: pillar, title: title, onClick: () => setOverlayClicked(true) })), showPlaceholder && ((0, jsx_runtime_1.jsx)(YoutubeAtomPlaceholder_1.YoutubeAtomPlaceholder, { uniqueId: uniqueId }))] }) }));
+                    }, abTestParticipations: abTestParticipations })), showOverlay && ((0, jsx_runtime_1.jsx)(YoutubeAtomOverlay_1.YoutubeAtomOverlay, { uniqueId: uniqueId, overrideImage: overrideImage, posterImage: posterImage, height: height, width: width, alt: alt, role: role, duration: duration, pillar: pillar, title: title, onClick: () => setOverlayClicked(true) })), showPlaceholder && ((0, jsx_runtime_1.jsx)(YoutubeAtomPlaceholder_1.YoutubeAtomPlaceholder, { uniqueId: uniqueId }))] }) }));
 };
 exports.YoutubeAtom = YoutubeAtom;

dist/commonjs/YoutubeAtomPlayer.js

@@ -169,3 +169,3 @@ "use strict";
 };
-const createInstantiateImaManager = (uniqueId, id, adContainerId, adTargeting, consentState, imaManager, adsManager) => (player) => {
+const createInstantiateImaManager = (uniqueId, id, adContainerId, adTargeting, consentState, abTestParticipations, imaManager, adsManager) => (player) => {
     const adTargetingEnabled = adTargeting && !adTargeting.disableAds;
@@ -177,3 +177,8 @@ const adUnit = adTargetingEnabled && adTargeting.adUnit ? adTargeting.adUnit : '';
     const makeAdsRequestCallback = (adsRequest, adsRenderingSettings) => {
-        adsRequest.adTagUrl = (0, commercial_core_1.buildImaAdTagUrl)(adUnit, customParams, consentState);
+        adsRequest.adTagUrl = (0, commercial_core_1.buildImaAdTagUrl)({
+            adUnit,
+            customParams,
+            consentState,
+            clientSideParticipations: abTestParticipations,
+        });
         adsRenderingSettings.uiElements = [
@@ -201,3 +206,3 @@ window.google.ima.UiElements.AD_ATTRIBUTION,
 };
-const YoutubeAtomPlayer = ({ uniqueId, videoId, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, enableIma, pauseVideo, deactivateVideo, }) => {
+const YoutubeAtomPlayer = ({ uniqueId, videoId, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, enableIma, pauseVideo, deactivateVideo, abTestParticipations, }) => {
     /**
@@ -238,3 +243,9 @@ * useRef for player and progressEvents
                 ? commercial_core_1.disabledAds
-                : (0, commercial_core_1.buildAdsConfigWithConsent)(false, adTargeting.adUnit, adTargeting.customParams, consentState);
+                : (0, commercial_core_1.buildAdsConfigWithConsent)({
+                    adUnit: adTargeting.adUnit,
+                    clientSideParticipations: abTestParticipations,
+                    consentState,
+                    customParams: adTargeting.customParams,
+                    isAdFreeUser: false,
+                });
             const embedConfig = {
@@ -250,3 +261,3 @@ relatedChannels: [],
             const instantiateImaManager = enableIma
-                ? createInstantiateImaManager(uniqueId, id, imaAdContainerId, adTargeting, consentState, imaManager, adsManager)
+                ? createInstantiateImaManager(uniqueId, id, imaAdContainerId, adTargeting, consentState, abTestParticipations, imaManager, adsManager)
                 : undefined;
@@ -253,0 +264,0 @@ const onReadyListener = createOnReadyListener(videoId, onReady, playerReadyCallback, instantiateImaManager);

dist/esm/YoutubeAtom.js

@@ -8,3 +8,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { YoutubeAtomSticky } from './YoutubeAtomSticky';
-export const YoutubeAtom = ({ elementId, videoId, overrideImage, posterImage, adTargeting, consentState, height = 259, width = 460, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, isMainMedia, imaEnabled, }) => {
+export const YoutubeAtom = ({ elementId, videoId, overrideImage, posterImage, adTargeting, consentState, height = 259, width = 460, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, isMainMedia, imaEnabled, abTestParticipations, }) => {
     const [overlayClicked, setOverlayClicked] = useState(false);
@@ -88,3 +88,3 @@ const [playerReady, setPlayerReady] = useState(false);
                         setIsActive(false);
-                    } })), showOverlay && (_jsx(YoutubeAtomOverlay, { uniqueId: uniqueId, overrideImage: overrideImage, posterImage: posterImage, height: height, width: width, alt: alt, role: role, duration: duration, pillar: pillar, title: title, onClick: () => setOverlayClicked(true) })), showPlaceholder && (_jsx(YoutubeAtomPlaceholder, { uniqueId: uniqueId }))] }) }));
+                    }, abTestParticipations: abTestParticipations })), showOverlay && (_jsx(YoutubeAtomOverlay, { uniqueId: uniqueId, overrideImage: overrideImage, posterImage: posterImage, height: height, width: width, alt: alt, role: role, duration: duration, pillar: pillar, title: title, onClick: () => setOverlayClicked(true) })), showPlaceholder && (_jsx(YoutubeAtomPlaceholder, { uniqueId: uniqueId }))] }) }));
 };

dist/esm/YoutubeAtomPlayer.js

@@ -166,3 +166,3 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 };
-const createInstantiateImaManager = (uniqueId, id, adContainerId, adTargeting, consentState, imaManager, adsManager) => (player) => {
+const createInstantiateImaManager = (uniqueId, id, adContainerId, adTargeting, consentState, abTestParticipations, imaManager, adsManager) => (player) => {
     const adTargetingEnabled = adTargeting && !adTargeting.disableAds;
@@ -174,3 +174,8 @@ const adUnit = adTargetingEnabled && adTargeting.adUnit ? adTargeting.adUnit : '';
     const makeAdsRequestCallback = (adsRequest, adsRenderingSettings) => {
-        adsRequest.adTagUrl = buildImaAdTagUrl(adUnit, customParams, consentState);
+        adsRequest.adTagUrl = buildImaAdTagUrl({
+            adUnit,
+            customParams,
+            consentState,
+            clientSideParticipations: abTestParticipations,
+        });
         adsRenderingSettings.uiElements = [
@@ -197,3 +202,3 @@ window.google.ima.UiElements.AD_ATTRIBUTION,
 };
-export const YoutubeAtomPlayer = ({ uniqueId, videoId, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, enableIma, pauseVideo, deactivateVideo, }) => {
+export const YoutubeAtomPlayer = ({ uniqueId, videoId, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, enableIma, pauseVideo, deactivateVideo, abTestParticipations, }) => {
     /**
@@ -234,3 +239,9 @@ * useRef for player and progressEvents
                 ? disabledAds
-                : buildAdsConfigWithConsent(false, adTargeting.adUnit, adTargeting.customParams, consentState);
+                : buildAdsConfigWithConsent({
+                    adUnit: adTargeting.adUnit,
+                    clientSideParticipations: abTestParticipations,
+                    consentState,
+                    customParams: adTargeting.customParams,
+                    isAdFreeUser: false,
+                });
             const embedConfig = {
@@ -246,3 +257,3 @@ relatedChannels: [],
             const instantiateImaManager = enableIma
-                ? createInstantiateImaManager(uniqueId, id, imaAdContainerId, adTargeting, consentState, imaManager, adsManager)
+                ? createInstantiateImaManager(uniqueId, id, imaAdContainerId, adTargeting, consentState, abTestParticipations, imaManager, adsManager)
                 : undefined;
@@ -249,0 +260,0 @@ const onReadyListener = createOnReadyListener(videoId, onReady, playerReadyCallback, instantiateImaManager);

dist/types/YoutubeAtom.d.ts

 import type { AdTargeting, ImageSource, RoleType, VideoEventKey } from './types';
 import type { ArticleTheme } from '@guardian/libs';
 import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
+import type { Participations } from '@guardian/ab-core';
 declare type Props = {
@@ -23,4 +24,5 @@ elementId: string;
     imaEnabled: boolean;
+    abTestParticipations: Participations;
 };
-export declare const YoutubeAtom: ({ elementId, videoId, overrideImage, posterImage, adTargeting, consentState, height, width, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, isMainMedia, imaEnabled, }: Props) => JSX.Element;
+export declare const YoutubeAtom: ({ elementId, videoId, overrideImage, posterImage, adTargeting, consentState, height, width, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, isMainMedia, imaEnabled, abTestParticipations, }: Props) => JSX.Element;
 export {};

dist/types/YoutubeAtomPlayer.d.ts

@@ -5,2 +5,3 @@ /// <reference types="youtube" />
 import { google } from './ima';
+import { Participations } from '@guardian/ab-core';
 declare class ImaManager {
@@ -40,4 +41,5 @@ constructor(player: YT.Player, id: string, adContainerId: string, makeAdsRequestCallback: (adsRequest: {
     deactivateVideo: () => void;
+    abTestParticipations: Participations;
 };
-export declare const YoutubeAtomPlayer: ({ uniqueId, videoId, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, enableIma, pauseVideo, deactivateVideo, }: Props) => JSX.Element;
+export declare const YoutubeAtomPlayer: ({ uniqueId, videoId, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, enableIma, pauseVideo, deactivateVideo, abTestParticipations, }: Props) => JSX.Element;
 export {};

package.json

 {
     "name": "@guardian/atoms-rendering",
+    "version": "23.11.0",
     "repository": {
@@ -7,10 +8,6 @@ "type": "ssh",
     },
-    "version": "23.10.0",
-    "source": "src/index.ts",
     "main": "dist/commonjs/index.js",
     "module": "dist/esm/index.js",
+    "source": "src/index.ts",
     "types": "dist/types/index.d.ts",
-    "publishConfig": {
-        "access": "public"
-    },
     "files": [
@@ -21,17 +18,78 @@ "dist/**/*"
         "build": "yarn build:esm && yarn build:commonjs",
+        "build-storybook": "build-storybook",
+        "build:commonjs": "tsc --outDir dist/commonjs --module CommonJS --target ES2018",
         "build:esm": "tsc",
-        "build:commonjs": "tsc --outDir dist/commonjs --module CommonJS --target ES2018",
+        "chromatic": "chromatic",
+        "lint": "eslint . --ext .ts,.tsx",
+        "nginx:setup": "./scripts/nginx/setup.sh",
         "prettier:check": "prettier . --check",
         "prettier:fix": "prettier . --write",
+        "release": "yarn validate && yarn build && changeset publish",
         "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook",
-        "tsc": "tsc --noEmit",
-        "lint": "eslint . --ext .ts,.tsx",
         "test": "jest --watch",
         "test:ci": "jest",
-        "validate": "yarn tsc && yarn test:ci && yarn lint",
-        "chromatic": "chromatic",
-        "release": "yarn validate && yarn build && changeset publish",
-        "nginx:setup": "./scripts/nginx/setup.sh"
+        "tsc": "tsc --noEmit",
+        "validate": "yarn tsc && yarn test:ci && yarn lint"
     },
+    "husky": {
+        "hooks": {
+            "pre-push": "pretty-quick --staged && yarn lint && yarn tsc && yarn test --watchAll=false"
+        }
+    },
+    "eslintConfig": {
+        "parser": "@typescript-eslint/parser",
+        "plugins": [
+            "@emotion",
+            "@typescript-eslint"
+        ],
+        "extends": [
+            "eslint:recommended",
+            "plugin:prettier/recommended",
+            "plugin:react/recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:@guardian/eslint-plugin-source-foundations/recommended",
+            "plugin:@guardian/eslint-plugin-source-react-components/recommended"
+        ],
+        "rules": {
+            "no-unused-vars": "off",
+            "@emotion/import-from-emotion": "error",
+            "@emotion/no-vanilla": "error",
+            "@emotion/styled-import": "error",
+            "@typescript-eslint/no-unused-vars": "error"
+        },
+        "ignorePatterns": [
+            "/dist"
+        ],
+        "root": true
+    },
+    "jest": {
+        "collectCoverageFrom": [
+            "src/**/*.{ts,tsx}"
+        ],
+        "globals": {
+            "ts-jest": {
+                "diagnostics": false,
+                "tsConfigFile": "tsconfig.json"
+            }
+        },
+        "moduleFileExtensions": [
+            "ts",
+            "tsx",
+            "js"
+        ],
+        "preset": "ts-jest/presets/js-with-ts",
+        "testEnvironment": "jest-environment-jsdom-sixteen",
+        "testMatch": [
+            "**/*.test.+(ts|tsx|js)"
+        ],
+        "transform": {
+            "^.+\\.(ts|tsx)$": "ts-jest"
+        },
+        "transformIgnorePatterns": [
+            "node_modules/(?!(@guardian/src-foundations|@guardian/types|@guardian/libs)/)"
+        ]
+    },
+    "dependencies": {
+        "is-mobile": "^3.1.1"
+    },
     "devDependencies": {
@@ -42,3 +100,4 @@ "@changesets/changelog-github": "^0.4.3",
         "@emotion/react": "^11.1.5",
-        "@guardian/commercial-core": "^4.24.0",
+        "@guardian/ab-core": "^2.0.0",
+        "@guardian/commercial-core": "^4.25.0",
         "@guardian/consent-management-platform": "^10",
@@ -84,33 +143,2 @@ "@guardian/eslint-plugin-source-foundations": "^4.0.2",
     },
-    "eslintConfig": {
-        "root": true,
-        "ignorePatterns": [
-            "/dist"
-        ],
-        "parser": "@typescript-eslint/parser",
-        "plugins": [
-            "@emotion",
-            "@typescript-eslint"
-        ],
-        "extends": [
-            "eslint:recommended",
-            "plugin:prettier/recommended",
-            "plugin:react/recommended",
-            "plugin:@typescript-eslint/recommended",
-            "plugin:@guardian/eslint-plugin-source-foundations/recommended",
-            "plugin:@guardian/eslint-plugin-source-react-components/recommended"
-        ],
-        "rules": {
-            "@emotion/no-vanilla": "error",
-            "@emotion/import-from-emotion": "error",
-            "@emotion/styled-import": "error",
-            "no-unused-vars": "off",
-            "@typescript-eslint/no-unused-vars": "error"
-        }
-    },
-    "husky": {
-        "hooks": {
-            "pre-push": "pretty-quick --staged && yarn lint && yarn tsc && yarn test --watchAll=false"
-        }
-    },
     "peerDependencies": {
@@ -126,32 +154,5 @@ "@emotion/react": "^11.1.5",
     },
-    "jest": {
-        "testEnvironment": "jest-environment-jsdom-sixteen",
-        "transformIgnorePatterns": [
-            "node_modules/(?!(@guardian/src-foundations|@guardian/types|@guardian/libs)/)"
-        ],
-        "preset": "ts-jest/presets/js-with-ts",
-        "moduleFileExtensions": [
-            "ts",
-            "tsx",
-            "js"
-        ],
-        "transform": {
-            "^.+\\.(ts|tsx)$": "ts-jest"
-        },
-        "globals": {
-            "ts-jest": {
-                "diagnostics": false,
-                "tsConfigFile": "tsconfig.json"
-            }
-        },
-        "testMatch": [
-            "**/*.test.+(ts|tsx|js)"
-        ],
-        "collectCoverageFrom": [
-            "src/**/*.{ts,tsx}"
-        ]
-    },
-    "dependencies": {
-        "is-mobile": "^3.1.1"
+    "publishConfig": {
+        "access": "public"
     }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

265998

increased by0.48%

Lines of code

5476

increased by0.48%

Worsened metrics

Dev dependency count

45

increased by2.27%

No dependency changes