@guardian/atoms-rendering - npm Package Compare versions

Comparing version 22.6.1 to 22.6.2

CHANGELOG.md

 # @guardian/atoms-rendering
 
+## 22.6.2
+
+### Patch Changes
+
+-   6e01504: Make YoutubeAtom controls keyboard accesible
+-   db94fa1: Add title to YoutubeAtom iframe and aria-label
+-   934cc67: Close sticky video on ESC key press
+-   a988893: Add isMainMedia prop to YoutubeAtom
+
 ## 22.6.1
@@ -4,0 +13,0 @@

dist/commonjs/YoutubeAtom.js

@@ -11,3 +11,3 @@ "use strict";
 const YoutubeAtomSticky_1 = require("./YoutubeAtomSticky");
-const YoutubeAtom = ({ assetId, overrideImage, posterImage, adTargeting, consentState, height = 259, width = 460, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, }) => {
+const YoutubeAtom = ({ assetId, overrideImage, posterImage, adTargeting, consentState, height = 259, width = 460, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, isMainMedia, }) => {
     const [overlayClicked, setOverlayClicked] = react_1.useState(false);
@@ -75,3 +75,3 @@ const [playerReady, setPlayerReady] = react_1.useState(false);
     const playerReadyCallback = react_1.useCallback(() => setPlayerReady(true), []);
-    return (jsx_runtime_1.jsx(YoutubeAtomSticky_1.YoutubeAtomSticky, Object.assign({ assetId: assetId, shouldStick: shouldStick, isPlaying: isPlaying, eventEmitters: eventEmitters, onStopVideo: () => setStopVideo(true) }, { children: jsx_runtime_1.jsxs(MaintainAspectRatio_1.MaintainAspectRatio, Object.assign({ height: height, width: width }, { children: [loadPlayer && consentState && (jsx_runtime_1.jsx(YoutubeAtomPlayer_1.YoutubeAtomPlayer, { videoId: assetId, overrideImage: overrideImage, posterImage: posterImage, adTargeting: adTargeting, consentState: consentState, height: height, width: width, title: title, origin: origin, eventEmitters: compositeEventEmitters, 
+    return (jsx_runtime_1.jsx(YoutubeAtomSticky_1.YoutubeAtomSticky, Object.assign({ assetId: assetId, shouldStick: shouldStick, isPlaying: isPlaying, eventEmitters: eventEmitters, onStopVideo: () => setStopVideo(true), isMainMedia: isMainMedia }, { children: jsx_runtime_1.jsxs(MaintainAspectRatio_1.MaintainAspectRatio, Object.assign({ height: height, width: width }, { children: [loadPlayer && consentState && (jsx_runtime_1.jsx(YoutubeAtomPlayer_1.YoutubeAtomPlayer, { videoId: assetId, adTargeting: adTargeting, consentState: consentState, height: height, width: width, title: title, origin: origin, eventEmitters: compositeEventEmitters, 
                     /**
@@ -82,5 +82,5 @@ * If there is an overlay we want to autoplay
                     autoPlay: hasOverlay, onReady: playerReadyCallback, stopVideo: stopVideo }, void 0)),
-                showOverlay && (jsx_runtime_1.jsx(YoutubeAtomOverlay_1.YoutubeAtomOverlay, { videoId: assetId, overrideImage: overrideImage, posterImage: posterImage, height: height, width: width, alt: alt, role: role, duration: duration, pillar: pillar, onClick: () => setOverlayClicked(true) }, void 0)),
+                showOverlay && (jsx_runtime_1.jsx(YoutubeAtomOverlay_1.YoutubeAtomOverlay, { videoId: assetId, overrideImage: overrideImage, posterImage: posterImage, height: height, width: width, alt: alt, role: role, duration: duration, pillar: pillar, title: title, onClick: () => setOverlayClicked(true) }, void 0)),
                 showPlaceholder && (jsx_runtime_1.jsx(YoutubeAtomPlaceholder_1.YoutubeAtomPlaceholder, { videoId: assetId }, void 0))] }), void 0) }), void 0));
 };
 exports.YoutubeAtom = YoutubeAtom;

dist/commonjs/YoutubeAtomOverlay.js

@@ -21,2 +21,4 @@ "use strict";
     cursor: pointer;
+    border: 0;
+    padding: 0;
 
@@ -74,10 +76,4 @@ img {
 `;
-const YoutubeAtomOverlay = ({ videoId, overrideImage, posterImage, height, width, alt, role, duration, pillar, onClick, }) => {
-    return (jsx_runtime_1.jsxs("div", Object.assign({ "data-cy": `youtube-overlay-${videoId}`, "data-testid": `youtube-overlay-${videoId}`, onClick: () => {
-            onClick();
-        }, onKeyDown: (e) => {
-            if (e.code === 'Space' || e.code === 'Enter') {
-                onClick();
-            }
-        }, css: overlayStyles, tabIndex: 0 }, { children: [jsx_runtime_1.jsx(Picture_1.Picture, { imageSources: overrideImage || posterImage || [], role: role, alt: alt, height: `${height}`, width: `${width}` }, void 0),
+const YoutubeAtomOverlay = ({ videoId, overrideImage, posterImage, height, width, alt, role, duration, pillar, title, onClick, }) => {
+    return (jsx_runtime_1.jsxs("button", Object.assign({ "data-cy": `youtube-overlay-${videoId}`, "data-testid": `youtube-overlay-${videoId}`, onClick: onClick, css: overlayStyles, "aria-label": `Play video: ${title}` }, { children: [jsx_runtime_1.jsx(Picture_1.Picture, { imageSources: overrideImage || posterImage || [], role: role, alt: alt, height: height, width: width }, void 0),
             jsx_runtime_1.jsxs("div", Object.assign({ css: overlayInfoWrapperStyles }, { children: [jsx_runtime_1.jsx("div", Object.assign({ className: "overlay-play-button", css: react_1.css `
@@ -84,0 +80,0 @@ ${playButtonStyling(pillar)}

dist/commonjs/YoutubeAtomPlayer.js

@@ -113,3 +113,3 @@ "use strict";
 };
-const YoutubeAtomPlayer = ({ videoId, overrideImage, posterImage, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, stopVideo, }) => {
+const YoutubeAtomPlayer = ({ videoId, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, stopVideo, }) => {
     /**
@@ -161,2 +161,3 @@ * useRef for player and progressEvents
                 },
+                title,
             });
@@ -258,4 +259,4 @@ /**
      */
-    return (jsx_runtime_1.jsx("div", { title: title, id: `youtube-video-${videoId}`, tabIndex: overrideImage || posterImage ? -1 : 0, "data-atom-id": `youtube-video-${videoId}`, "data-testid": `youtube-video-${videoId}`, "data-atom-type": "youtube" }, void 0));
+    return (jsx_runtime_1.jsx("div", { title: title, id: `youtube-video-${videoId}`, "data-atom-id": `youtube-video-${videoId}`, "data-testid": `youtube-video-${videoId}`, "data-atom-type": "youtube" }, void 0));
 };
 exports.YoutubeAtomPlayer = YoutubeAtomPlayer;

dist/commonjs/YoutubeAtomSticky.js

@@ -81,13 +81,17 @@ "use strict";
 `;
-const stickyContainerStyles = (height) => react_2.css `
-    height: ${height}px;
-    position: relative;
-    display: flex;
-    justify-content: flex-end;
+const stickyContainerStyles = (isMainMedia) => {
+    const height = 192;
+    return react_2.css `
+        height: ${height}px;
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        padding-right: ${isMainMedia ? `${source_foundations_1.space[5]}px` : 0};
 
-    ${source_foundations_1.from.tablet} {
-        height: ${height * 2}px;
-    }
-`;
-const YoutubeAtomSticky = ({ assetId, eventEmitters, shouldStick, onStopVideo, isPlaying, children, }) => {
+        ${source_foundations_1.from.tablet} {
+            height: ${height * 2}px;
+        }
+    `;
+};
+const YoutubeAtomSticky = ({ assetId, eventEmitters, shouldStick, onStopVideo, isPlaying, isMainMedia, children, }) => {
     const [isSticky, setIsSticky] = react_1.useState(false);
@@ -119,2 +123,19 @@ const [stickEventSent, setStickEventSent] = react_1.useState(false);
     /**
+     * keydown event handler
+     *
+     * closes sticky video when Escape key is pressed
+     */
+    const handleKeydown = (e) => {
+        if (e.key === 'Escape') {
+            handleCloseClick();
+        }
+    };
+    /**
+     * useEffect to create keydown listener
+     */
+    react_1.useEffect(() => {
+        window.addEventListener('keydown', handleKeydown);
+        return () => window.removeEventListener('keydown', handleKeydown);
+    }, []);
+    /**
      * useEffect for the sticky state
@@ -140,5 +161,5 @@ */
     }, [isSticky, stickEventSent, assetId, eventEmitters]);
-    return (jsx_runtime_1.jsx("div", Object.assign({ ref: setRef, css: isSticky && stickyContainerStyles(192) }, { children: jsx_runtime_1.jsxs("div", Object.assign({ css: isSticky && stickyStyles }, { children: [children, isSticky && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx("span", { css: hoverAreaStyles }, void 0),
+    return (jsx_runtime_1.jsx("div", Object.assign({ ref: setRef, css: isSticky && stickyContainerStyles(isMainMedia) }, { children: jsx_runtime_1.jsxs("div", Object.assign({ css: isSticky && stickyStyles }, { children: [children, isSticky && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx("span", { css: hoverAreaStyles }, void 0),
                         jsx_runtime_1.jsx("button", Object.assign({ css: buttonStyles, onClick: handleCloseClick }, { children: jsx_runtime_1.jsx(source_react_components_1.SvgCross, { size: "medium" }, void 0) }), void 0)] }, void 0))] }), void 0) }), void 0));
 };
 exports.YoutubeAtomSticky = YoutubeAtomSticky;

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 = ({ assetId, overrideImage, posterImage, adTargeting, consentState, height = 259, width = 460, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, }) => {
+export const YoutubeAtom = ({ assetId, overrideImage, posterImage, adTargeting, consentState, height = 259, width = 460, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, isMainMedia, }) => {
     const [overlayClicked, setOverlayClicked] = useState(false);
@@ -72,3 +72,3 @@ const [playerReady, setPlayerReady] = useState(false);
     const playerReadyCallback = useCallback(() => setPlayerReady(true), []);
-    return (_jsx(YoutubeAtomSticky, Object.assign({ assetId: assetId, shouldStick: shouldStick, isPlaying: isPlaying, eventEmitters: eventEmitters, onStopVideo: () => setStopVideo(true) }, { children: _jsxs(MaintainAspectRatio, Object.assign({ height: height, width: width }, { children: [loadPlayer && consentState && (_jsx(YoutubeAtomPlayer, { videoId: assetId, overrideImage: overrideImage, posterImage: posterImage, adTargeting: adTargeting, consentState: consentState, height: height, width: width, title: title, origin: origin, eventEmitters: compositeEventEmitters, 
+    return (_jsx(YoutubeAtomSticky, Object.assign({ assetId: assetId, shouldStick: shouldStick, isPlaying: isPlaying, eventEmitters: eventEmitters, onStopVideo: () => setStopVideo(true), isMainMedia: isMainMedia }, { children: _jsxs(MaintainAspectRatio, Object.assign({ height: height, width: width }, { children: [loadPlayer && consentState && (_jsx(YoutubeAtomPlayer, { videoId: assetId, adTargeting: adTargeting, consentState: consentState, height: height, width: width, title: title, origin: origin, eventEmitters: compositeEventEmitters, 
                     /**
@@ -79,4 +79,4 @@ * If there is an overlay we want to autoplay
                     autoPlay: hasOverlay, onReady: playerReadyCallback, stopVideo: stopVideo }, void 0)),
-                showOverlay && (_jsx(YoutubeAtomOverlay, { videoId: assetId, overrideImage: overrideImage, posterImage: posterImage, height: height, width: width, alt: alt, role: role, duration: duration, pillar: pillar, onClick: () => setOverlayClicked(true) }, void 0)),
+                showOverlay && (_jsx(YoutubeAtomOverlay, { videoId: assetId, overrideImage: overrideImage, posterImage: posterImage, height: height, width: width, alt: alt, role: role, duration: duration, pillar: pillar, title: title, onClick: () => setOverlayClicked(true) }, void 0)),
                 showPlaceholder && (_jsx(YoutubeAtomPlaceholder, { videoId: assetId }, void 0))] }), void 0) }), void 0));
 };

dist/esm/YoutubeAtomOverlay.js

@@ -18,2 +18,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
     cursor: pointer;
+    border: 0;
+    padding: 0;
 
@@ -71,10 +73,4 @@ img {
 `;
-export const YoutubeAtomOverlay = ({ videoId, overrideImage, posterImage, height, width, alt, role, duration, pillar, onClick, }) => {
-    return (_jsxs("div", Object.assign({ "data-cy": `youtube-overlay-${videoId}`, "data-testid": `youtube-overlay-${videoId}`, onClick: () => {
-            onClick();
-        }, onKeyDown: (e) => {
-            if (e.code === 'Space' || e.code === 'Enter') {
-                onClick();
-            }
-        }, css: overlayStyles, tabIndex: 0 }, { children: [_jsx(Picture, { imageSources: overrideImage || posterImage || [], role: role, alt: alt, height: `${height}`, width: `${width}` }, void 0),
+export const YoutubeAtomOverlay = ({ videoId, overrideImage, posterImage, height, width, alt, role, duration, pillar, title, onClick, }) => {
+    return (_jsxs("button", Object.assign({ "data-cy": `youtube-overlay-${videoId}`, "data-testid": `youtube-overlay-${videoId}`, onClick: onClick, css: overlayStyles, "aria-label": `Play video: ${title}` }, { children: [_jsx(Picture, { imageSources: overrideImage || posterImage || [], role: role, alt: alt, height: height, width: width }, void 0),
             _jsxs("div", Object.assign({ css: overlayInfoWrapperStyles }, { children: [_jsx("div", Object.assign({ className: "overlay-play-button", css: css `
@@ -81,0 +77,0 @@ ${playButtonStyling(pillar)}

dist/esm/YoutubeAtomPlayer.js

@@ -107,3 +107,3 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 };
-export const YoutubeAtomPlayer = ({ videoId, overrideImage, posterImage, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, stopVideo, }) => {
+export const YoutubeAtomPlayer = ({ videoId, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, stopVideo, }) => {
     /**
@@ -154,2 +154,3 @@ * useRef for player and progressEvents
                 },
+                title,
             });
@@ -249,3 +250,3 @@ /**
      */
-    return (_jsx("div", { title: title, id: `youtube-video-${videoId}`, tabIndex: overrideImage || posterImage ? -1 : 0, "data-atom-id": `youtube-video-${videoId}`, "data-testid": `youtube-video-${videoId}`, "data-atom-type": "youtube" }, void 0));
+    return (_jsx("div", { title: title, id: `youtube-video-${videoId}`, "data-atom-id": `youtube-video-${videoId}`, "data-testid": `youtube-video-${videoId}`, "data-atom-type": "youtube" }, void 0));
 };

dist/esm/YoutubeAtomSticky.js

@@ -5,3 +5,3 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useIsInView } from './lib/useIsInView';
-import { from, neutral } from '@guardian/source-foundations';
+import { from, neutral, space } from '@guardian/source-foundations';
 import { css } from '@emotion/react';
@@ -79,13 +79,17 @@ import { SvgCross } from '@guardian/source-react-components';
 `;
-const stickyContainerStyles = (height) => css `
-    height: ${height}px;
-    position: relative;
-    display: flex;
-    justify-content: flex-end;
+const stickyContainerStyles = (isMainMedia) => {
+    const height = 192;
+    return css `
+        height: ${height}px;
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        padding-right: ${isMainMedia ? `${space[5]}px` : 0};
 
-    ${from.tablet} {
-        height: ${height * 2}px;
-    }
-`;
-export const YoutubeAtomSticky = ({ assetId, eventEmitters, shouldStick, onStopVideo, isPlaying, children, }) => {
+        ${from.tablet} {
+            height: ${height * 2}px;
+        }
+    `;
+};
+export const YoutubeAtomSticky = ({ assetId, eventEmitters, shouldStick, onStopVideo, isPlaying, isMainMedia, children, }) => {
     const [isSticky, setIsSticky] = useState(false);
@@ -117,2 +121,19 @@ const [stickEventSent, setStickEventSent] = useState(false);
     /**
+     * keydown event handler
+     *
+     * closes sticky video when Escape key is pressed
+     */
+    const handleKeydown = (e) => {
+        if (e.key === 'Escape') {
+            handleCloseClick();
+        }
+    };
+    /**
+     * useEffect to create keydown listener
+     */
+    useEffect(() => {
+        window.addEventListener('keydown', handleKeydown);
+        return () => window.removeEventListener('keydown', handleKeydown);
+    }, []);
+    /**
      * useEffect for the sticky state
@@ -138,4 +159,4 @@ */
     }, [isSticky, stickEventSent, assetId, eventEmitters]);
-    return (_jsx("div", Object.assign({ ref: setRef, css: isSticky && stickyContainerStyles(192) }, { children: _jsxs("div", Object.assign({ css: isSticky && stickyStyles }, { children: [children, isSticky && (_jsxs(_Fragment, { children: [_jsx("span", { css: hoverAreaStyles }, void 0),
+    return (_jsx("div", Object.assign({ ref: setRef, css: isSticky && stickyContainerStyles(isMainMedia) }, { children: _jsxs("div", Object.assign({ css: isSticky && stickyStyles }, { children: [children, isSticky && (_jsxs(_Fragment, { children: [_jsx("span", { css: hoverAreaStyles }, void 0),
                         _jsx("button", Object.assign({ css: buttonStyles, onClick: handleCloseClick }, { children: _jsx(SvgCross, { size: "medium" }, void 0) }), void 0)] }, void 0))] }), void 0) }), void 0));
 };

dist/types/Picture.d.ts

@@ -6,4 +6,4 @@ import { ImageSource, RoleType } from './types';
     alt: string;
-    height: string;
-    width: string;
+    height: number;
+    width: number;
     isMainMedia?: boolean;
@@ -10,0 +10,0 @@ isLazy?: boolean;

dist/types/YoutubeAtom.d.ts

@@ -19,5 +19,6 @@ import type { AdTargeting, ImageSource, RoleType, VideoEventKey } from './types';
     pillar: ArticleTheme;
-    shouldStick: boolean;
+    shouldStick?: boolean;
+    isMainMedia?: boolean;
 };
-export declare const YoutubeAtom: ({ assetId, overrideImage, posterImage, adTargeting, consentState, height, width, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, }: Props) => JSX.Element;
+export declare const YoutubeAtom: ({ assetId, overrideImage, posterImage, adTargeting, consentState, height, width, alt, role, title, duration, origin, eventEmitters, pillar, shouldStick, isMainMedia, }: Props) => JSX.Element;
 export {};

dist/types/YoutubeAtomOverlay.d.ts

@@ -13,5 +13,6 @@ import { ImageSource, RoleType } from './types';
     pillar: ArticleTheme;
+    title?: string;
     onClick: () => void;
 };
-export declare const YoutubeAtomOverlay: ({ videoId, overrideImage, posterImage, height, width, alt, role, duration, pillar, onClick, }: Props) => JSX.Element;
+export declare const YoutubeAtomOverlay: ({ videoId, overrideImage, posterImage, height, width, alt, role, duration, pillar, title, onClick, }: Props) => JSX.Element;
 export {};

dist/types/YoutubeAtomPlayer.d.ts

@@ -1,7 +0,5 @@
-import type { AdTargeting, ImageSource, VideoEventKey } from './types';
+import type { AdTargeting, VideoEventKey } from './types';
 import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
 declare type Props = {
     videoId: string;
-    overrideImage?: ImageSource[];
-    posterImage?: ImageSource[];
     adTargeting?: AdTargeting;
@@ -23,3 +21,3 @@ consentState: ConsentState;
 }
-export declare const YoutubeAtomPlayer: ({ videoId, overrideImage, posterImage, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, stopVideo, }: Props) => JSX.Element;
+export declare const YoutubeAtomPlayer: ({ videoId, adTargeting, consentState, height, width, title, origin, eventEmitters, autoPlay, onReady, stopVideo, }: Props) => JSX.Element;
 export {};

dist/types/YoutubeAtomSticky.d.ts

@@ -5,8 +5,9 @@ import type { VideoEventKey } from './types';
     eventEmitters: ((event: VideoEventKey) => void)[];
-    shouldStick: boolean;
+    shouldStick?: boolean;
     onStopVideo: () => void;
     isPlaying: boolean;
+    isMainMedia?: boolean;
     children: JSX.Element;
 };
-export declare const YoutubeAtomSticky: ({ assetId, eventEmitters, shouldStick, onStopVideo, isPlaying, children, }: Props) => JSX.Element;
+export declare const YoutubeAtomSticky: ({ assetId, eventEmitters, shouldStick, onStopVideo, isPlaying, isMainMedia, children, }: Props) => JSX.Element;
 export {};

package.json

@@ -7,3 +7,3 @@ {
     },
-    "version": "22.6.1",
+    "version": "22.6.2",
     "source": "src/index.ts",
@@ -10,0 +10,0 @@ "main": "dist/commonjs/index.js",

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

238951

increased by0.49%

Lines of code

4829

increased by0.81%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes