@guardian/atoms-rendering - npm Package Compare versions

Comparing version 23.1.0 to 23.1.1

CHANGELOG.md

 # @guardian/atoms-rendering
 
+## 23.1.1
+
+### Patch Changes
+
+-   fe87e3d: Add storybook viewport addon
+-   3bcfe75: Add transparent overlay for touch events on mobile
+-   608d633: Add missing tablet flag to isMobile check in YoutubeAtomSticky
+-   3295bcf: Remove pause and resume events from playerState
+
 ## 23.1.0
@@ -4,0 +13,0 @@

dist/commonjs/YoutubeAtom.js

@@ -25,7 +25,5 @@ "use strict";
             case 'play':
-            case 'resume':
                 setStopVideo(false);
                 setIsPlaying(true);
                 break;
-            case 'pause':
             case 'end':
@@ -32,0 +30,0 @@ case 'cued':

dist/commonjs/YoutubeAtomPlayer.js

@@ -199,5 +199,5 @@ "use strict";
             /**
-             * Pause the current video when another video is played on the same page
+             * Stop the current video when another video is played on the same page
              */
-            const handlePauseVideo = (event) => {
+            const handleStopVideo = (event) => {
                 var _a;
@@ -210,3 +210,3 @@ if (event instanceof CustomEvent) {
                             if (state === YT.PlayerState.PLAYING) {
-                                (_a = player.current) === null || _a === void 0 ? void 0 : _a.pauseVideo();
+                                (_a = player.current) === null || _a === void 0 ? void 0 : _a.stopVideo();
                             }
@@ -220,3 +220,3 @@ });
              */
-            document.addEventListener(customPlayEventName, handlePauseVideo);
+            document.addEventListener(customPlayEventName, handleStopVideo);
             /**
@@ -261,3 +261,3 @@ * Register an onReady listener
                 playerListeners.current.push(playerStateChangeListener);
-            customListeners.current[customPlayEventName] = handlePauseVideo;
+            customListeners.current[customPlayEventName] = handleStopVideo;
         }
@@ -264,0 +264,0 @@ },

dist/commonjs/YoutubeAtomSticky.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -12,2 +15,3 @@ exports.YoutubeAtomSticky = void 0;
 const ophan_1 = require("./lib/ophan");
+const is_mobile_1 = __importDefault(require("is-mobile"));
 const buttonStyles = react_2.css `
@@ -41,14 +45,21 @@ position: absolute;
  */
-const hoverAreaStyles = react_2.css `
-    position: absolute;
-    top: -4px;
-    bottom: 0;
-    left: -${32 * 1.15}px;
-    width: ${32 * 1.15}px;
+const hoverAreaStyles = (fullWidthOverlay) => {
+    const hoverAreaWidth = 37;
+    return react_2.css `
+        position: absolute;
+        top: -4px;
+        bottom: 0;
+        left: -${hoverAreaWidth}px;
+        width: ${hoverAreaWidth}px;
 
-    &:hover button {
-        display: flex;
-    }
-`;
-const stickyStyles = react_2.css `
+        &:hover button {
+            display: flex;
+        }
+
+        width: ${fullWidthOverlay
+        ? `calc(100% + ${hoverAreaWidth}px)`
+        : `${hoverAreaWidth}px`};
+    `;
+};
+const stickyStyles = (showButton) => react_2.css `
     @keyframes fade-in-up {
@@ -68,10 +79,6 @@ from {
     bottom: 20px;
-    width: 216px;
+    width: 215px;
     z-index: 21;
     animation: fade-in-up 1s ease both;
 
-    &:hover button {
-        display: flex;
-    }
-
     ${source_foundations_1.from.tablet} {
@@ -84,2 +91,10 @@ width: 300px;
     }
+
+    button {
+        display: ${showButton ? 'flex' : 'none'};
+    }
+
+    &:hover button {
+        display: flex;
+    }
 `;
@@ -99,5 +114,7 @@ const stickyContainerStyles = (isMainMedia) => {
 };
+const isMobile = is_mobile_1.default({ tablet: true });
 const YoutubeAtomSticky = ({ videoId, eventEmitters, shouldStick, onStopVideo, isPlaying, isMainMedia, children, }) => {
     const [isSticky, setIsSticky] = react_1.useState(false);
     const [stickEventSent, setStickEventSent] = react_1.useState(false);
+    const [showOverlay, setShowOverlay] = react_1.useState(isMobile);
     const [isIntersecting, setRef] = useIsInView_1.useIsInView({
@@ -177,5 +194,14 @@ threshold: 0.5,
     }, [isSticky, stickEventSent, videoId, eventEmitters]);
-    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),
+    /**
+     * useEffect for mobile only sticky overlay
+     *
+     * this allows mobile uses to tap to reveal the close button
+     */
+    react_1.useEffect(() => {
+        setShowOverlay(isMobile && isSticky);
+    }, [isSticky, isMobile]);
+    const showCloseButton = !showOverlay && isMobile;
+    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(showCloseButton) }, { children: [children, isSticky && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx("span", { css: hoverAreaStyles(showOverlay), onClick: () => setShowOverlay(false) }, 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

@@ -22,7 +22,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
             case 'play':
-            case 'resume':
                 setStopVideo(false);
                 setIsPlaying(true);
                 break;
-            case 'pause':
             case 'end':
@@ -29,0 +27,0 @@ case 'cued':

dist/esm/YoutubeAtomPlayer.js

@@ -192,5 +192,5 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
             /**
-             * Pause the current video when another video is played on the same page
+             * Stop the current video when another video is played on the same page
              */
-            const handlePauseVideo = (event) => {
+            const handleStopVideo = (event) => {
                 if (event instanceof CustomEvent) {
@@ -201,3 +201,3 @@ if (event.detail.uniqueId !== uniqueId) {
                             if (state === YT.PlayerState.PLAYING) {
-                                player.current?.pauseVideo();
+                                player.current?.stopVideo();
                             }
@@ -211,3 +211,3 @@ });
              */
-            document.addEventListener(customPlayEventName, handlePauseVideo);
+            document.addEventListener(customPlayEventName, handleStopVideo);
             /**
@@ -252,3 +252,3 @@ * Register an onReady listener
                 playerListeners.current.push(playerStateChangeListener);
-            customListeners.current[customPlayEventName] = handlePauseVideo;
+            customListeners.current[customPlayEventName] = handleStopVideo;
         }
@@ -255,0 +255,0 @@ },

dist/esm/YoutubeAtomSticky.js

@@ -9,2 +9,3 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { submitComponentEvent } from './lib/ophan';
+import detectMobile from 'is-mobile';
 const buttonStyles = css `
@@ -38,14 +39,21 @@ position: absolute;
  */
-const hoverAreaStyles = css `
-    position: absolute;
-    top: -4px;
-    bottom: 0;
-    left: -${32 * 1.15}px;
-    width: ${32 * 1.15}px;
+const hoverAreaStyles = (fullWidthOverlay) => {
+    const hoverAreaWidth = 37;
+    return css `
+        position: absolute;
+        top: -4px;
+        bottom: 0;
+        left: -${hoverAreaWidth}px;
+        width: ${hoverAreaWidth}px;
 
-    &:hover button {
-        display: flex;
-    }
-`;
-const stickyStyles = css `
+        &:hover button {
+            display: flex;
+        }
+
+        width: ${fullWidthOverlay
+        ? `calc(100% + ${hoverAreaWidth}px)`
+        : `${hoverAreaWidth}px`};
+    `;
+};
+const stickyStyles = (showButton) => css `
     @keyframes fade-in-up {
@@ -65,10 +73,6 @@ from {
     bottom: 20px;
-    width: 216px;
+    width: 215px;
     z-index: 21;
     animation: fade-in-up 1s ease both;
 
-    &:hover button {
-        display: flex;
-    }
-
     ${from.tablet} {
@@ -81,2 +85,10 @@ width: 300px;
     }
+
+    button {
+        display: ${showButton ? 'flex' : 'none'};
+    }
+
+    &:hover button {
+        display: flex;
+    }
 `;
@@ -96,5 +108,7 @@ const stickyContainerStyles = (isMainMedia) => {
 };
+const isMobile = detectMobile({ tablet: true });
 export const YoutubeAtomSticky = ({ videoId, eventEmitters, shouldStick, onStopVideo, isPlaying, isMainMedia, children, }) => {
     const [isSticky, setIsSticky] = useState(false);
     const [stickEventSent, setStickEventSent] = useState(false);
+    const [showOverlay, setShowOverlay] = useState(isMobile);
     const [isIntersecting, setRef] = useIsInView({
@@ -174,4 +188,13 @@ threshold: 0.5,
     }, [isSticky, stickEventSent, videoId, eventEmitters]);
-    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),
+    /**
+     * useEffect for mobile only sticky overlay
+     *
+     * this allows mobile uses to tap to reveal the close button
+     */
+    useEffect(() => {
+        setShowOverlay(isMobile && isSticky);
+    }, [isSticky, isMobile]);
+    const showCloseButton = !showOverlay && isMobile;
+    return (_jsx("div", Object.assign({ ref: setRef, css: isSticky && stickyContainerStyles(isMainMedia) }, { children: _jsxs("div", Object.assign({ css: isSticky && stickyStyles(showCloseButton) }, { children: [children, isSticky && (_jsxs(_Fragment, { children: [_jsx("span", { css: hoverAreaStyles(showOverlay), onClick: () => setShowOverlay(false) }, 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));
 };

package.json

@@ -7,3 +7,3 @@ {
     },
-    "version": "23.1.0",
+    "version": "23.1.1",
     "source": "src/index.ts",
@@ -42,4 +42,4 @@ "main": "dist/commonjs/index.js",
         "@guardian/consent-management-platform": "^8",
+        "@guardian/eslint-plugin-source-foundations": "^4.0.2",
         "@guardian/eslint-plugin-source-react-components": "^4.1.0",
-        "@guardian/eslint-plugin-source-foundations": "^4.0.2",
         "@guardian/libs": "^3.8.1",
@@ -49,2 +49,3 @@ "@guardian/source-foundations": "^4.0.2",
         "@storybook/addon-docs": "^6.1.11",
+        "@storybook/addon-viewport": "^6.4.20",
         "@storybook/addons": "^6.4.20",
@@ -69,2 +70,3 @@ "@storybook/react": "^6.1.11",
         "husky": "^4.3.0",
+        "is-mobile": "^3.1.1",
         "jest": "^26.6.3",
@@ -71,0 +73,0 @@ "jest-environment-jsdom-sixteen": "^1.0.3",

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

246881

increased by0.84%

Lines of code

5018

increased by0.82%

Worsened metrics

Dev dependency count

45

increased by4.65%

No dependency changes