@kaizen/components 1.42.0 → 1.42.2

package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs

@@ -7,22 +7,24 @@ import { canPlayWebm } from '../../utils/canPlayWebm.mjs';
 import { usePausePlay } from '../../utils/usePausePlay.mjs';
 import styles from '../Base/Base.module.scss.mjs';
 var VideoPlayer = function (_a) {
-  var _b;
-  var _c = _a.autoplay,
-    autoplay = _c === void 0 ? true : _c,
-    _d = _a.loop,
-    loop = _d === void 0 ? false : _d,
+  var _b = _a.autoplay,
+    autoplay = _b === void 0 ? true : _b,
+    _c = _a.loop,
+    loop = _c === void 0 ? false : _c,
     fallback = _a.fallback,
     source = _a.source,
     aspectRatio = _a.aspectRatio,
     onEnded = _a.onEnded;
   var videoRef = useRef(null);
-  var _e = React.useState(true),
-    prefersReducedMotion = _e[0],
-    setPrefersReducedMotion = _e[1];
-  var _f = React.useState(),
-    sourceEl = _f[0],
-    setSourceEl = _f[1];
+  var _d = React.useState(true),
+    prefersReducedMotion = _d[0],
+    setPrefersReducedMotion = _d[1];
+  var _e = React.useState(false),
+    isWebmCompatible = _e[0],
+    setIsWebmCompatible = _e[1];
+  var _f = React.useState(false),
+    windowIsAvailable = _f[0],
+    setWindowIsAvailable = _f[1];
   useEffect(function () {
     /**
      * Setting `muted` on the player is required in Safari/Webkit and older
@@ -104,25 +106,15 @@ var VideoPlayer = function (_a) {
     };
   }, [videoRef]);
   useEffect(function () {
-    /**
-     * This seems counter-intuitive, but webm support is codec specific.
-     * Only offer webm if we are positive the browser supports it.
-     * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1
-     */
-    canPlayWebm() ? setSourceEl( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("source", {
-      src: assetUrl("".concat(source, ".webm")),
-      type: "video/webm"
-    }), /*#__PURE__*/React.createElement("source", {
-      src: assetUrl("".concat(source, ".mp4")),
-      type: "video/mp4"
-    }))) : ( /*#__PURE__*/React.createElement("source", {
-      src: assetUrl("".concat(source, ".mp4")),
-      type: "video/mp4"
-    }));
-  }, [setSourceEl]);
+    // SSR does not have a window, which is required for canPlayWebm.
+    if (window !== undefined) setWindowIsAvailable(true);
+  }, []);
+  useEffect(function () {
+    if (windowIsAvailable) setIsWebmCompatible(canPlayWebm());
+  }, [windowIsAvailable]);
   var pausePlay = usePausePlay(videoRef);
   return /*#__PURE__*/React.createElement("figure", {
-    className: classnames(styles.figure, (_b = {}, _b["".concat(styles[aspectRatio], " ").concat(styles.aspectRatioWrapper)] = Boolean(aspectRatio), _b))
+    className: classnames(styles.figure, aspectRatio && styles[aspectRatio], aspectRatio && styles.aspectRatioWrapper)
   }, /*#__PURE__*/React.createElement("video", {
     muted: true,
     "aria-hidden": true,
@@ -136,7 +128,13 @@ var VideoPlayer = function (_a) {
     autoPlay: prefersReducedMotion ? false : autoplay,
     playsInline: true,
     tabIndex: -1
-  }, sourceEl), /*#__PURE__*/React.createElement(IconButton, {
+  }, isWebmCompatible && ( /*#__PURE__*/React.createElement("source", {
+    src: assetUrl("".concat(source, ".webm")),
+    type: "video/webm"
+  })), /*#__PURE__*/React.createElement("source", {
+    src: assetUrl("".concat(source, ".mp4")),
+    type: "video/mp4"
+  })), /*#__PURE__*/React.createElement(IconButton, {
     onClick: function () {
       return pausePlay.toggle();
     },

package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.mjs","sources":["../../../../../src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\"\nimport classnames from \"classnames\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { IconButton } from \"~components/Button\"\nimport { canPlayWebm } from \"../../utils/canPlayWebm\"\nimport { usePausePlay } from \"../../utils/usePausePlay\"\nimport styles from \"../Base/Base.module.scss\"\n\nexport type VideoPlayerProps = {\n  /**\n   * Specifies whether the animation plays as soon as it is rendered.\n   * If the user has enabled prefer-reduced-motion their preferences\n   * take precedent over this prop.\n   */\n  autoplay?: boolean\n\n  /**\n   * Replay from start when active animation reaches the end of the animation.\n   */\n  loop?: boolean\n\n  /**\n   * Fallback image. Used when rendering of the asset fails, or as a\n   * poster for the video player.\n   */\n  fallback: string\n\n  /**\n   * The path of the animation source, excluding the file extension. This\n   * Player will preference Webm over mp4.\n   */\n  source: string\n\n  /**\n   * Aspect ratio that is set on the illustration in Scene/Spot which wraps the\n   * component in a container, forcing the aspect ratio.\n   */\n  aspectRatio?: \"landscape\" | \"portrait\" | \"square\"\n\n  onEnded?: () => void\n}\n\nexport const VideoPlayer = ({\n  autoplay = true,\n  loop = false,\n  fallback,\n  source,\n  aspectRatio,\n  onEnded,\n}: VideoPlayerProps): JSX.Element => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const [prefersReducedMotion, setPrefersReducedMotion] =\n    React.useState<boolean>(true)\n  const [sourceEl, setSourceEl] = React.useState<React.ReactNode>()\n\n  useEffect(() => {\n    /**\n     * Setting `muted` on the player is required in Safari/Webkit and older\n     * versions of Chome for the video to autoplay (regardless of whether\n     * the format contains an audio stream or not).\n     *\n     * React does not guarentee the `muted` attribute is set on the\n     * `video` element. So on load we force set this attribute. See issue:\n     * https://github.com/facebook/react/issues/10389\n     */\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.setAttribute(\"muted\", \"\")\n    }\n  }, [])\n\n  useEffect(() => {\n    // when the source of the animation is updated, we need to reload the asset\n    // to ensure the video player is in sync with the new source.\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.load()\n    }\n  }, [source])\n\n  useEffect(() => {\n    if (!window) return\n\n    const reducedMotionQuery = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    )\n    setPrefersReducedMotion(reducedMotionQuery.matches)\n    const updateMotionPreferences = (): void => {\n      const { matches = false } = window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\"\n      )\n      setPrefersReducedMotion(matches)\n    }\n\n    const isLegacyEdge = navigator.userAgent.match(/Edge/)\n\n    const isUnsupportedSafari =\n      window.matchMedia(\"\").addEventListener === undefined\n\n    if (isLegacyEdge || isUnsupportedSafari) return\n\n    reducedMotionQuery.addEventListener(\"change\", updateMotionPreferences, true)\n\n    return function cleanup() {\n      reducedMotionQuery.removeEventListener(\"change\", updateMotionPreferences)\n    }\n  }, [])\n\n  useEffect(() => {\n    const { current: videoElement } = videoRef\n    if (!videoElement) return\n\n    if (prefersReducedMotion) {\n      videoElement.pause()\n    } else if (autoplay && !prefersReducedMotion) {\n      try {\n        // Older browsers may not return a promise, so .play could return undefined\n        videoElement.play()?.catch(() => {\n          /*\n           * An DOMException _may_ be raised by some browsers if we\n           * programatically interact with the video before the\n           * user has interacted with the page. This is okay - so\n           * we're going to catch this error without handling it. See:\n           * https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability\n           */\n        })\n      } catch (e) {\n        /**\n         * Older browsers will raise a synchronous error because their first implementation\n         * of `.play` was not a promise.\n         */\n      }\n    }\n    /**\n     * Chrome seems to have an issue with changes to autoplay after the video\n     * has been mounted. If there is a change in autoplay we need to force the\n     * play() method to be called.\n     */\n  }, [prefersReducedMotion, autoplay])\n\n  useEffect(() => {\n    // Add event listeners for the video element\n    const { current: videoElement } = videoRef\n    if (!videoElement || !onEnded) return\n\n    videoElement.addEventListener(\"ended\", onEnded)\n\n    return function cleanup() {\n      videoElement.removeEventListener(\"ended\", onEnded)\n    }\n  }, [videoRef])\n\n  useEffect(() => {\n    /**\n     * This seems counter-intuitive, but webm support is codec specific.\n     * Only offer webm if we are positive the browser supports it.\n     * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1\n     */\n    canPlayWebm() ? (\n      setSourceEl(\n        <>\n          <source src={assetUrl(`${source}.webm`)} type=\"video/webm\" />\n          <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n        </>\n      )\n    ) : (\n      <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n    )\n  }, [setSourceEl])\n\n  const pausePlay = usePausePlay(videoRef)\n\n  return (\n    <figure\n      className={classnames(styles.figure, {\n        [`${styles[aspectRatio!]} ${styles.aspectRatioWrapper}`]:\n          Boolean(aspectRatio),\n      })}\n    >\n      <video\n        muted={true}\n        aria-hidden={true}\n        preload=\"metadata\"\n        ref={videoRef}\n        width=\"100%\"\n        data-testid=\"kz-video-player\"\n        className={styles.wrapper}\n        loop={loop}\n        poster={assetUrl(`${fallback}.png`)}\n        autoPlay={prefersReducedMotion ? false : autoplay}\n        playsInline={true}\n        tabIndex={-1}\n      >\n        {sourceEl}\n      </video>\n      <IconButton\n        onClick={(): void => pausePlay.toggle()}\n        icon={pausePlay.icon}\n        label={pausePlay.label}\n        classNameOverride={styles.pausePlayButton}\n      />\n    </figure>\n  )\n}\n"],"names":["VideoPlayer","_a","_c","autoplay","_d","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_e","React","useState","prefersReducedMotion","setPrefersReducedMotion","_f","sourceEl","setSourceEl","useEffect","videoElement","current","setAttribute","load","window","reducedMotionQuery","matchMedia","matches","updateMotionPreferences","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","addEventListener","undefined","cleanup","removeEventListener","pause","play","catch","e","canPlayWebm","createElement","Fragment","src","assetUrl","concat","type","pausePlay","usePausePlay","className","classnames","styles","figure","_b","aspectRatioWrapper","Boolean","muted","preload","ref","width","wrapper","poster","autoPlay","playsInline","tabIndex","IconButton","onClick","toggle","icon","label","classNameOverride","pausePlayButton"],"mappings":";;;;;;;;AA0CO,IAAMA,WAAW,GAAG,SAAAA,CAACC,EAOT,EAAA;;MANjBC,EAAe,GAAAD,EAAA,CAAAE,QAAA;IAAfA,QAAQ,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,KAAA;IACfE,EAAA,GAAAH,EAAA,CAAAI,IAAY;IAAZA,IAAI,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,KAAA;IACZE,QAAQ,GAAAL,EAAA,CAAAK,QAAA;IACRC,MAAM,GAAAN,EAAA,CAAAM,MAAA;IACNC,WAAW,GAAAP,EAAA,CAAAO,WAAA;IACXC,OAAO,GAAAR,EAAA,CAAAQ,OAAA;EAEP,IAAMC,QAAQ,GAAGC,MAAM,CAAmB,IAAI,CAAC;EACzC,IAAAC,EACJ,GAAAC,KAAK,CAACC,QAAQ,CAAU,IAAI,CAAC;IADxBC,oBAAoB,GAAAH,EAAA,CAAA,CAAA,CAAA;IAAEI,uBAAuB,QACrB;EACzB,IAAAC,EAAA,GAA0BJ,KAAK,CAACC,QAAQ,CAAA,CAAmB;IAA1DI,QAAQ,GAAAD,EAAA,CAAA,CAAA,CAAA;IAAEE,WAAW,GAAAF,EAAA,CAAA,CAAA,CAAqC;EAEjEG,SAAS,CAAC,YAAA;IACR;;;;;;;;AAQG;IACK,IAASC,YAAY,GAAKX,QAAQ,CAAAY,OAAb;IAC7B,IAAID,YAAY,KAAK,IAAI,EAAE;MACzBA,YAAY,CAACE,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC;IACvC;EACF,CAAA,EAAE,EAAE,CAAC;EAENH,SAAS,CAAC,YAAA;;;IAGA,IAASC,YAAY,GAAKX,QAAQ,CAAAY,OAAb;IAC7B,IAAID,YAAY,KAAK,IAAI,EAAE;MACzBA,YAAY,CAACG,IAAI,CAAA,CAAE;IACpB;EACH,CAAC,EAAE,CAACjB,MAAM,CAAC,CAAC;EAEZa,SAAS,CAAC,YAAA;IACR,IAAI,CAACK,MAAM,EAAE;IAEb,IAAMC,kBAAkB,GAAGD,MAAM,CAACE,UAAU,CAC1C,kCAAkC,CACnC;IACDX,uBAAuB,CAACU,kBAAkB,CAACE,OAAO,CAAC;IACnD,IAAMC,uBAAuB,GAAG,SAAAA,CAAA,EAAA;MACtB,IAAA5B,EAAoB,GAAAwB,MAAM,CAACE,UAAU,CAC3C,kCAAkC,CACnC,CAAAC,OAFsB;QAAfA,OAAO,GAAG3B,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,KAAA;MAGvBe,uBAAuB,CAACY,OAAO,CAAC;IAClC,CAAC;IAED,IAAME,YAAY,GAAGC,SAAS,CAACC,SAAS,CAACC,KAAK,CAAC,MAAM,CAAC;IAEtD,IAAMC,mBAAmB,GACvBT,MAAM,CAACE,UAAU,CAAC,EAAE,CAAC,CAACQ,gBAAgB,KAAKC,SAAS;IAEtD,IAAIN,YAAY,IAAII,mBAAmB,EAAE;IAEzCR,kBAAkB,CAACS,gBAAgB,CAAC,QAAQ,EAAEN,uBAAuB,EAAE,IAAI,CAAC;IAE5E,OAAO,SAASQ,OAAOA,CAAA,EAAA;MACrBX,kBAAkB,CAACY,mBAAmB,CAAC,QAAQ,EAAET,uBAAuB,CAAC;IAC3E,CAAC;EACF,CAAA,EAAE,EAAE,CAAC;EAENT,SAAS,CAAC,YAAA;;IACA,IAASC,YAAY,GAAKX,QAAQ,CAAAY,OAAb;IAC7B,IAAI,CAACD,YAAY,EAAE;IAEnB,IAAIN,oBAAoB,EAAE;MACxBM,YAAY,CAACkB,KAAK,CAAA,CAAE;IACrB,CAAA,MAAM,IAAIpC,QAAQ,IAAI,CAACY,oBAAoB,EAAE;MAC5C,IAAI;;QAEF,CAAAd,EAAA,GAAAoB,YAAY,CAACmB,IAAI,CAAA,CAAE,MAAA,IAAA,IAAAvC,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAEwC,KAAK,CAAC,YAAA;UACzB;;;;;;AAMG;QANH,CAOD,CAAC;MACH,CAAA,CAAC,OAAOC,CAAC,EAAE;QACV;;;AAGG;MAHH;IAKH;IACD;;;;AAIG;EACL,CAAC,EAAE,CAAC3B,oBAAoB,EAAEZ,QAAQ,CAAC,CAAC;EAEpCiB,SAAS,CAAC,YAAA;;IAEA,IAASC,YAAY,GAAKX,QAAQ,CAAAY,OAAb;IAC7B,IAAI,CAACD,YAAY,IAAI,CAACZ,OAAO,EAAE;IAE/BY,YAAY,CAACc,gBAAgB,CAAC,OAAO,EAAE1B,OAAO,CAAC;IAE/C,OAAO,SAAS4B,OAAOA,CAAA,EAAA;MACrBhB,YAAY,CAACiB,mBAAmB,CAAC,OAAO,EAAE7B,OAAO,CAAC;IACpD,CAAC;EACH,CAAC,EAAE,CAACC,QAAQ,CAAC,CAAC;EAEdU,SAAS,CAAC,YAAA;IACR;;;;AAIG;IACHuB,WAAW,CAAA,CAAE,GACXxB,WAAW,eACTN,KAAA,CAAA+B,aAAA,CAAA/B,KAAA,CAAAgC,QAAA,EAAA,IAAA,eACEhC,KAAA,CAAA+B,aAAA,CAAA,QAAA,EAAA;MAAQE,GAAG,EAAEC,QAAQ,CAAC,EAAG,CAAAC,MAAA,CAAAzC,MAAM,EAAO,OAAA,CAAA,CAAC;MAAE0C,IAAI,EAAC;IAAY,CAAG,CAAA,eAC7DpC,KAAA,CAAA+B,aAAA,CAAA,QAAA,EAAA;MAAQE,GAAG,EAAEC,QAAQ,CAAC,UAAGxC,MAAM,EAAA,MAAA,CAAM,CAAC;MAAE0C,IAAI,EAAC;IAAc,CAAA,CAAA,CAC1D,CACJ,kBAEDpC,KAAQ,CAAA+B,aAAA,CAAA,QAAA,EAAA;MAAAE,GAAG,EAAEC,QAAQ,CAAC,EAAG,CAAAC,MAAA,CAAAzC,MAAM,EAAM,MAAA,CAAA,CAAC;MAAE0C,IAAI,EAAC;IAAW,CAAA,CAAG,CAC5D;EACH,CAAC,EAAE,CAAC9B,WAAW,CAAC,CAAC;EAEjB,IAAM+B,SAAS,GAAGC,YAAY,CAACzC,QAAQ,CAAC;EAExC,oBACEG;IACEuC,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,MAAM,GAAAC,EAAA,GAAA,CAAA,CAAA,EACjCA,EAAA,CAAC,EAAG,CAAAR,MAAA,CAAAM,MAAM,CAAC9C,WAAY,CAAC,EAAI,GAAA,CAAA,CAAAwC,MAAA,CAAAM,MAAM,CAACG,kBAAkB,CAAE,CAAA,GACrDC,OAAO,CAAClD,WAAW,CAAC,EACtBgD,EAAA;EAAA,CAAA,eAEF3C,KAAA,CAAA+B,aAAA,CAAA,OAAA,EAAA;IACEe,KAAK,EAAE,IAAI;IAAA,aAAA,EACE,IAAI;IACjBC,OAAO,EAAC,UAAU;IAClBC,GAAG,EAAEnD,QAAQ;IACboD,KAAK,EAAC,MAAM;IAAA,aAAA,EACA,iBAAiB;IAC7BV,SAAS,EAAEE,MAAM,CAACS,OAAO;IACzB1D,IAAI,EAAEA,IAAI;IACV2D,MAAM,EAAEjB,QAAQ,CAAC,EAAG,CAAAC,MAAA,CAAA1C,QAAQ,EAAM,MAAA,CAAA,CAAC;IACnC2D,QAAQ,EAAElD,oBAAoB,GAAG,KAAK,GAAGZ,QAAQ;IACjD+D,WAAW,EAAE,IAAI;IACjBC,QAAQ,EAAE,CAAC;EAAC,CAAA,EAEXjD,QAAQ,CACH,eACRL,KAAA,CAAA+B,aAAA,CAACwB,UAAU,EAAA;IACTC,OAAO,EAAE,SAAAA,CAAA;MAAY,OAAAnB,SAAS,CAACoB,MAAM,CAAA,CAAE;IAAA,CAAA;IACvCC,IAAI,EAAErB,SAAS,CAACqB,IAAI;IACpBC,KAAK,EAAEtB,SAAS,CAACsB,KAAK;IACtBC,iBAAiB,EAAEnB,MAAM,CAACoB;EAC1B,CAAA,CAAA,CACK;AAEb,CAAA;"}
+{"version":3,"file":"VideoPlayer.mjs","sources":["../../../../../src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\"\nimport classnames from \"classnames\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { IconButton } from \"~components/Button\"\nimport { canPlayWebm } from \"../../utils/canPlayWebm\"\nimport { usePausePlay } from \"../../utils/usePausePlay\"\nimport styles from \"../Base/Base.module.scss\"\n\nexport type VideoPlayerProps = {\n  /**\n   * Specifies whether the animation plays as soon as it is rendered.\n   * If the user has enabled prefer-reduced-motion their preferences\n   * take precedent over this prop.\n   */\n  autoplay?: boolean\n\n  /**\n   * Replay from start when active animation reaches the end of the animation.\n   */\n  loop?: boolean\n\n  /**\n   * Fallback image. Used when rendering of the asset fails, or as a\n   * poster for the video player.\n   */\n  fallback: string\n\n  /**\n   * The path of the animation source, excluding the file extension. This\n   * Player will preference Webm over mp4.\n   */\n  source: string\n\n  /**\n   * Aspect ratio that is set on the illustration in Scene/Spot which wraps the\n   * component in a container, forcing the aspect ratio.\n   */\n  aspectRatio?: \"landscape\" | \"portrait\" | \"square\"\n\n  onEnded?: () => void\n}\n\nexport const VideoPlayer = ({\n  autoplay = true,\n  loop = false,\n  fallback,\n  source,\n  aspectRatio,\n  onEnded,\n}: VideoPlayerProps): JSX.Element => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const [prefersReducedMotion, setPrefersReducedMotion] =\n    React.useState<boolean>(true)\n  const [isWebmCompatible, setIsWebmCompatible] = React.useState<boolean>(false)\n  const [windowIsAvailable, setWindowIsAvailable] =\n    React.useState<boolean>(false)\n\n  useEffect(() => {\n    /**\n     * Setting `muted` on the player is required in Safari/Webkit and older\n     * versions of Chome for the video to autoplay (regardless of whether\n     * the format contains an audio stream or not).\n     *\n     * React does not guarentee the `muted` attribute is set on the\n     * `video` element. So on load we force set this attribute. See issue:\n     * https://github.com/facebook/react/issues/10389\n     */\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.setAttribute(\"muted\", \"\")\n    }\n  }, [])\n\n  useEffect(() => {\n    // when the source of the animation is updated, we need to reload the asset\n    // to ensure the video player is in sync with the new source.\n    const { current: videoElement } = videoRef\n    if (videoElement !== null) {\n      videoElement.load()\n    }\n  }, [source])\n\n  useEffect(() => {\n    if (!window) return\n\n    const reducedMotionQuery = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    )\n    setPrefersReducedMotion(reducedMotionQuery.matches)\n    const updateMotionPreferences = (): void => {\n      const { matches = false } = window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\"\n      )\n      setPrefersReducedMotion(matches)\n    }\n\n    const isLegacyEdge = navigator.userAgent.match(/Edge/)\n\n    const isUnsupportedSafari =\n      window.matchMedia(\"\").addEventListener === undefined\n\n    if (isLegacyEdge || isUnsupportedSafari) return\n\n    reducedMotionQuery.addEventListener(\"change\", updateMotionPreferences, true)\n\n    return function cleanup() {\n      reducedMotionQuery.removeEventListener(\"change\", updateMotionPreferences)\n    }\n  }, [])\n\n  useEffect(() => {\n    const { current: videoElement } = videoRef\n    if (!videoElement) return\n\n    if (prefersReducedMotion) {\n      videoElement.pause()\n    } else if (autoplay && !prefersReducedMotion) {\n      try {\n        // Older browsers may not return a promise, so .play could return undefined\n        videoElement.play()?.catch(() => {\n          /*\n           * An DOMException _may_ be raised by some browsers if we\n           * programatically interact with the video before the\n           * user has interacted with the page. This is okay - so\n           * we're going to catch this error without handling it. See:\n           * https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability\n           */\n        })\n      } catch (e) {\n        /**\n         * Older browsers will raise a synchronous error because their first implementation\n         * of `.play` was not a promise.\n         */\n      }\n    }\n    /**\n     * Chrome seems to have an issue with changes to autoplay after the video\n     * has been mounted. If there is a change in autoplay we need to force the\n     * play() method to be called.\n     */\n  }, [prefersReducedMotion, autoplay])\n\n  useEffect(() => {\n    // Add event listeners for the video element\n    const { current: videoElement } = videoRef\n    if (!videoElement || !onEnded) return\n\n    videoElement.addEventListener(\"ended\", onEnded)\n\n    return function cleanup() {\n      videoElement.removeEventListener(\"ended\", onEnded)\n    }\n  }, [videoRef])\n\n  useEffect(() => {\n    // SSR does not have a window, which is required for canPlayWebm.\n    if (window !== undefined) setWindowIsAvailable(true)\n  }, [])\n\n  useEffect(() => {\n    if (windowIsAvailable) setIsWebmCompatible(canPlayWebm())\n  }, [windowIsAvailable])\n\n  const pausePlay = usePausePlay(videoRef)\n\n  return (\n    <figure\n      className={classnames(\n        styles.figure,\n        aspectRatio && styles[aspectRatio],\n        aspectRatio && styles.aspectRatioWrapper\n      )}\n    >\n      <video\n        muted={true}\n        aria-hidden={true}\n        preload=\"metadata\"\n        ref={videoRef}\n        width=\"100%\"\n        data-testid=\"kz-video-player\"\n        className={styles.wrapper}\n        loop={loop}\n        poster={assetUrl(`${fallback}.png`)}\n        autoPlay={prefersReducedMotion ? false : autoplay}\n        playsInline={true}\n        tabIndex={-1}\n      >\n        {isWebmCompatible && (\n          <source src={assetUrl(`${source}.webm`)} type=\"video/webm\" />\n        )}\n        <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n      </video>\n      <IconButton\n        onClick={(): void => pausePlay.toggle()}\n        icon={pausePlay.icon}\n        label={pausePlay.label}\n        classNameOverride={styles.pausePlayButton}\n      />\n    </figure>\n  )\n}\n"],"names":["VideoPlayer","_a","_b","autoplay","_c","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_d","React","useState","prefersReducedMotion","setPrefersReducedMotion","_e","isWebmCompatible","setIsWebmCompatible","_f","windowIsAvailable","setWindowIsAvailable","useEffect","videoElement","current","setAttribute","load","window","reducedMotionQuery","matchMedia","matches","updateMotionPreferences","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","addEventListener","undefined","cleanup","removeEventListener","pause","play","catch","e","canPlayWebm","pausePlay","usePausePlay","className","classnames","styles","figure","aspectRatioWrapper","createElement","muted","preload","ref","width","wrapper","poster","assetUrl","concat","autoPlay","playsInline","tabIndex","src","type","IconButton","onClick","toggle","icon","label","classNameOverride","pausePlayButton"],"mappings":"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"}

package/dist/esm/dts/Filter/FilterMultiSelect/FilterMultiSelect.d.ts

@@ -61,7 +61,7 @@ export declare const FilterMultiSelect: {
         displayName: string;
     };
     LoadMoreButton: {
-        (props: import("./subcomponents/LoadMoreButton").LoadMoreButtonProps): JSX.Element;
+        (props: import("../../Button/GenericButton").GenericButtonProps): JSX.Element;
         displayName: string;
     };
     NoResults: {