@codecademy/gamut

74.0.074.0.1-alpha.fbaad7.0
dist/Video/lib/ReactPlayer.js
~dist/Video/lib/ReactPlayer.jsModified
+15−3
Index: package/dist/Video/lib/ReactPlayer.js
===================================================================
--- package/dist/Video/lib/ReactPlayer.js
+++ package/dist/Video/lib/ReactPlayer.js
@@ -1,10 +1,22 @@
 import _styled from "@emotion/styled/base";
 import { PlayIcon } from '@codecademy/gamut-icons';
 import { css, theme } from '@codecademy/gamut-styles';
 import ReactPlayer from 'react-player';
-import { FlexBox } from '../../Box';
+import { Box, FlexBox } from '../../Box';
+
+/*
+  16:9 by default, but unlike a padding-top ratio box, a height set by the
+  consumer (e.g. `height: 100%` via `className`) wins, so the player and the
+  provider's own splash fit the consumer's frame instead of overflowing it.
+*/
 import { jsx as _jsx } from "react/jsx-runtime";
+export const VideoFrame = /*#__PURE__*/_styled(Box, {
+  target: "e179321e2",
+  label: "VideoFrame"
+})(css({
+  aspectRatio: '16 / 9'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9WaWRlby9saWIvUmVhY3RQbGF5ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVkwQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvVmlkZW8vbGliL1JlYWN0UGxheWVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBsYXlJY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgY3NzLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3RQbGF5ZXIgZnJvbSAncmVhY3QtcGxheWVyJztcblxuaW1wb3J0IHsgQm94LCBGbGV4Qm94IH0gZnJvbSAnLi4vLi4vQm94JztcblxuLypcbiAgMTY6OSBieSBkZWZhdWx0LCBidXQgdW5saWtlIGEgcGFkZGluZy10b3AgcmF0aW8gYm94LCBhIGhlaWdodCBzZXQgYnkgdGhlXG4gIGNvbnN1bWVyIChlLmcuIGBoZWlnaHQ6IDEwMCVgIHZpYSBgY2xhc3NOYW1lYCkgd2lucywgc28gdGhlIHBsYXllciBhbmQgdGhlXG4gIHByb3ZpZGVyJ3Mgb3duIHNwbGFzaCBmaXQgdGhlIGNvbnN1bWVyJ3MgZnJhbWUgaW5zdGVhZCBvZiBvdmVyZmxvd2luZyBpdC5cbiovXG5leHBvcnQgY29uc3QgVmlkZW9GcmFtZSA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGFzcGVjdFJhdGlvOiAnMTYgLyA5JyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBSZWFjdFZpZGVvUGxheWVyID0gc3R5bGVkKFJlYWN0UGxheWVyKShcbiAgY3NzKHtcbiAgICBwYWRkaW5nOiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogMCxcbiAgICBsZWZ0OiAwLFxuICAgICcmIDpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgb3V0bGluZU9mZnNldDogJzNweCcsXG4gICAgfSxcbiAgICAndmlkZW86Oi13ZWJraXQtbWVkaWEtY29udHJvbHMtcGFuZWwnOiB7XG4gICAgICBiYWNrZ3JvdW5kSW1hZ2U6IGBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgICAgdHJhbnNwYXJlbnQgMTUlLFxuICAgICAgICAgICR7dGhlbWUuY29sb3JzWyduYXZ5LTkwMCddfSA1NSVcbiAgICAgICAgKWAsXG4gICAgfSxcbiAgfSlcbik7XG5cbmNvbnN0IFN0eWxlZEZsZXhCb3ggPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgZmxleERpcmVjdGlvbjogJ2NvbHVtbicsXG4gICAganVzdGlmeUNvbnRlbnQ6ICdjZW50ZXInLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGNvbG9yOiAnd2hpdGUnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgb3BhY2l0eTogJzAuNScsXG4gICAgYmc6ICdibGFjaycsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgT3ZlcmxheVBsYXlCdXR0b24gPSAoeyB2aWRlb1RpdGxlIH06IHsgdmlkZW9UaXRsZT86IHN0cmluZyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEZsZXhCb3hcbiAgICAgIGFyaWEtbGFiZWw9e2BwbGF5IHZpZGVvJHt2aWRlb1RpdGxlID8gYDogJHt2aWRlb1RpdGxlfWAgOiAnJ31gfVxuICAgICAgcm9sZT1cImJ1dHRvblwiXG4gICAgPlxuICAgICAgPFBsYXlJY29uIGNvbG9yPVwid2hpdGVcIiBtaW5IZWlnaHQ9XCI3NXB4XCIgbWluV2lkdGg9XCI3NXB4XCIgLz5cbiAgICA8L1N0eWxlZEZsZXhCb3g+XG4gICk7XG59O1xuIl19 */");
 export const ReactVideoPlayer = /*#__PURE__*/_styled(ReactPlayer, {
   target: "e179321e1",
   label: "ReactVideoPlayer"
 })(css({
@@ -20,9 +32,9 @@
           transparent 15%,
           ${theme.colors['navy-900']} 55%
         )`
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9WaWRlby9saWIvUmVhY3RQbGF5ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9nQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvVmlkZW8vbGliL1JlYWN0UGxheWVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBsYXlJY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgY3NzLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3RQbGF5ZXIgZnJvbSAncmVhY3QtcGxheWVyJztcblxuaW1wb3J0IHsgRmxleEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbmV4cG9ydCBjb25zdCBSZWFjdFZpZGVvUGxheWVyID0gc3R5bGVkKFJlYWN0UGxheWVyKShcbiAgY3NzKHtcbiAgICBwYWRkaW5nOiAwLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogMCxcbiAgICBsZWZ0OiAwLFxuICAgICcmIDpmb2N1cy12aXNpYmxlJzoge1xuICAgICAgb3V0bGluZU9mZnNldDogJzNweCcsXG4gICAgfSxcbiAgICAndmlkZW86Oi13ZWJraXQtbWVkaWEtY29udHJvbHMtcGFuZWwnOiB7XG4gICAgICBiYWNrZ3JvdW5kSW1hZ2U6IGBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgICAgdHJhbnNwYXJlbnQgMTUlLFxuICAgICAgICAgICR7dGhlbWUuY29sb3JzWyduYXZ5LTkwMCddfSA1NSVcbiAgICAgICAgKWAsXG4gICAgfSxcbiAgfSlcbik7XG5cbmNvbnN0IFN0eWxlZEZsZXhCb3ggPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgZmxleERpcmVjdGlvbjogJ2NvbHVtbicsXG4gICAganVzdGlmeUNvbnRlbnQ6ICdjZW50ZXInLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGNvbG9yOiAnd2hpdGUnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgb3BhY2l0eTogJzAuNScsXG4gICAgYmc6ICdibGFjaycsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgT3ZlcmxheVBsYXlCdXR0b24gPSAoeyB2aWRlb1RpdGxlIH06IHsgdmlkZW9UaXRsZT86IHN0cmluZyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEZsZXhCb3hcbiAgICAgIGFyaWEtbGFiZWw9e2BwbGF5IHZpZGVvJHt2aWRlb1RpdGxlID8gYDogJHt2aWRlb1RpdGxlfWAgOiAnJ31gfVxuICAgICAgcm9sZT1cImJ1dHRvblwiXG4gICAgPlxuICAgICAgPFBsYXlJY29uIGNvbG9yPVwid2hpdGVcIiBtaW5IZWlnaHQ9XCI3NXB4XCIgbWluV2lkdGg9XCI3NXB4XCIgLz5cbiAgICA8L1N0eWxlZEZsZXhCb3g+XG4gICk7XG59O1xuIl19 */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9WaWRlby9saWIvUmVhY3RQbGF5ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCZ0MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL1ZpZGVvL2xpYi9SZWFjdFBsYXllci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQbGF5SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IGNzcywgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0UGxheWVyIGZyb20gJ3JlYWN0LXBsYXllcic7XG5cbmltcG9ydCB7IEJveCwgRmxleEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbi8qXG4gIDE2OjkgYnkgZGVmYXVsdCwgYnV0IHVubGlrZSBhIHBhZGRpbmctdG9wIHJhdGlvIGJveCwgYSBoZWlnaHQgc2V0IGJ5IHRoZVxuICBjb25zdW1lciAoZS5nLiBgaGVpZ2h0OiAxMDAlYCB2aWEgYGNsYXNzTmFtZWApIHdpbnMsIHNvIHRoZSBwbGF5ZXIgYW5kIHRoZVxuICBwcm92aWRlcidzIG93biBzcGxhc2ggZml0IHRoZSBjb25zdW1lcidzIGZyYW1lIGluc3RlYWQgb2Ygb3ZlcmZsb3dpbmcgaXQuXG4qL1xuZXhwb3J0IGNvbnN0IFZpZGVvRnJhbWUgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBhc3BlY3RSYXRpbzogJzE2IC8gOScsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgUmVhY3RWaWRlb1BsYXllciA9IHN0eWxlZChSZWFjdFBsYXllcikoXG4gIGNzcyh7XG4gICAgcGFkZGluZzogMCxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgbGVmdDogMCxcbiAgICAnJiA6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgIG91dGxpbmVPZmZzZXQ6ICczcHgnLFxuICAgIH0sXG4gICAgJ3ZpZGVvOjotd2Via2l0LW1lZGlhLWNvbnRyb2xzLXBhbmVsJzoge1xuICAgICAgYmFja2dyb3VuZEltYWdlOiBgbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAgIHRyYW5zcGFyZW50IDE1JSxcbiAgICAgICAgICAke3RoZW1lLmNvbG9yc1snbmF2eS05MDAnXX0gNTUlXG4gICAgICAgIClgLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5jb25zdCBTdHlsZWRGbGV4Qm94ID0gc3R5bGVkKEZsZXhCb3gpKFxuICBjc3Moe1xuICAgIGZsZXhEaXJlY3Rpb246ICdjb2x1bW4nLFxuICAgIGp1c3RpZnlDb250ZW50OiAnY2VudGVyJyxcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBjb2xvcjogJ3doaXRlJyxcbiAgICB3aWR0aDogJzEwMCUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIG9wYWNpdHk6ICcwLjUnLFxuICAgIGJnOiAnYmxhY2snLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IE92ZXJsYXlQbGF5QnV0dG9uID0gKHsgdmlkZW9UaXRsZSB9OiB7IHZpZGVvVGl0bGU/OiBzdHJpbmcgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGbGV4Qm94XG4gICAgICBhcmlhLWxhYmVsPXtgcGxheSB2aWRlbyR7dmlkZW9UaXRsZSA/IGA6ICR7dmlkZW9UaXRsZX1gIDogJyd9YH1cbiAgICAgIHJvbGU9XCJidXR0b25cIlxuICAgID5cbiAgICAgIDxQbGF5SWNvbiBjb2xvcj1cIndoaXRlXCIgbWluSGVpZ2h0PVwiNzVweFwiIG1pbldpZHRoPVwiNzVweFwiIC8+XG4gICAgPC9TdHlsZWRGbGV4Qm94PlxuICApO1xufTtcbiJdfQ== */");
 const StyledFlexBox = /*#__PURE__*/_styled(FlexBox, {
   target: "e179321e0",
   label: "StyledFlexBox"
 })(css({
@@ -34,9 +46,9 @@
   width: '100%',
   height: '100%',
   opacity: '0.5',
   bg: 'black'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9WaWRlby9saWIvUmVhY3RQbGF5ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCc0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL1ZpZGVvL2xpYi9SZWFjdFBsYXllci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQbGF5SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IGNzcywgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0UGxheWVyIGZyb20gJ3JlYWN0LXBsYXllcic7XG5cbmltcG9ydCB7IEZsZXhCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuXG5leHBvcnQgY29uc3QgUmVhY3RWaWRlb1BsYXllciA9IHN0eWxlZChSZWFjdFBsYXllcikoXG4gIGNzcyh7XG4gICAgcGFkZGluZzogMCxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgbGVmdDogMCxcbiAgICAnJiA6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgIG91dGxpbmVPZmZzZXQ6ICczcHgnLFxuICAgIH0sXG4gICAgJ3ZpZGVvOjotd2Via2l0LW1lZGlhLWNvbnRyb2xzLXBhbmVsJzoge1xuICAgICAgYmFja2dyb3VuZEltYWdlOiBgbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAgIHRyYW5zcGFyZW50IDE1JSxcbiAgICAgICAgICAke3RoZW1lLmNvbG9yc1snbmF2eS05MDAnXX0gNTUlXG4gICAgICAgIClgLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5jb25zdCBTdHlsZWRGbGV4Qm94ID0gc3R5bGVkKEZsZXhCb3gpKFxuICBjc3Moe1xuICAgIGZsZXhEaXJlY3Rpb246ICdjb2x1bW4nLFxuICAgIGp1c3RpZnlDb250ZW50OiAnY2VudGVyJyxcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBjb2xvcjogJ3doaXRlJyxcbiAgICB3aWR0aDogJzEwMCUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIG9wYWNpdHk6ICcwLjUnLFxuICAgIGJnOiAnYmxhY2snLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IE92ZXJsYXlQbGF5QnV0dG9uID0gKHsgdmlkZW9UaXRsZSB9OiB7IHZpZGVvVGl0bGU/OiBzdHJpbmcgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGbGV4Qm94XG4gICAgICBhcmlhLWxhYmVsPXtgcGxheSB2aWRlbyR7dmlkZW9UaXRsZSA/IGA6ICR7dmlkZW9UaXRsZX1gIDogJyd9YH1cbiAgICAgIHJvbGU9XCJidXR0b25cIlxuICAgID5cbiAgICAgIDxQbGF5SWNvbiBjb2xvcj1cIndoaXRlXCIgbWluSGVpZ2h0PVwiNzVweFwiIG1pbldpZHRoPVwiNzVweFwiIC8+XG4gICAgPC9TdHlsZWRGbGV4Qm94PlxuICApO1xufTtcbiJdfQ== */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9WaWRlby9saWIvUmVhY3RQbGF5ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9Dc0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL1ZpZGVvL2xpYi9SZWFjdFBsYXllci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQbGF5SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IGNzcywgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0UGxheWVyIGZyb20gJ3JlYWN0LXBsYXllcic7XG5cbmltcG9ydCB7IEJveCwgRmxleEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbi8qXG4gIDE2OjkgYnkgZGVmYXVsdCwgYnV0IHVubGlrZSBhIHBhZGRpbmctdG9wIHJhdGlvIGJveCwgYSBoZWlnaHQgc2V0IGJ5IHRoZVxuICBjb25zdW1lciAoZS5nLiBgaGVpZ2h0OiAxMDAlYCB2aWEgYGNsYXNzTmFtZWApIHdpbnMsIHNvIHRoZSBwbGF5ZXIgYW5kIHRoZVxuICBwcm92aWRlcidzIG93biBzcGxhc2ggZml0IHRoZSBjb25zdW1lcidzIGZyYW1lIGluc3RlYWQgb2Ygb3ZlcmZsb3dpbmcgaXQuXG4qL1xuZXhwb3J0IGNvbnN0IFZpZGVvRnJhbWUgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBhc3BlY3RSYXRpbzogJzE2IC8gOScsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgUmVhY3RWaWRlb1BsYXllciA9IHN0eWxlZChSZWFjdFBsYXllcikoXG4gIGNzcyh7XG4gICAgcGFkZGluZzogMCxcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6IDAsXG4gICAgbGVmdDogMCxcbiAgICAnJiA6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgIG91dGxpbmVPZmZzZXQ6ICczcHgnLFxuICAgIH0sXG4gICAgJ3ZpZGVvOjotd2Via2l0LW1lZGlhLWNvbnRyb2xzLXBhbmVsJzoge1xuICAgICAgYmFja2dyb3VuZEltYWdlOiBgbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAgIHRyYW5zcGFyZW50IDE1JSxcbiAgICAgICAgICAke3RoZW1lLmNvbG9yc1snbmF2eS05MDAnXX0gNTUlXG4gICAgICAgIClgLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5jb25zdCBTdHlsZWRGbGV4Qm94ID0gc3R5bGVkKEZsZXhCb3gpKFxuICBjc3Moe1xuICAgIGZsZXhEaXJlY3Rpb246ICdjb2x1bW4nLFxuICAgIGp1c3RpZnlDb250ZW50OiAnY2VudGVyJyxcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBjb2xvcjogJ3doaXRlJyxcbiAgICB3aWR0aDogJzEwMCUnLFxuICAgIGhlaWdodDogJzEwMCUnLFxuICAgIG9wYWNpdHk6ICcwLjUnLFxuICAgIGJnOiAnYmxhY2snLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IE92ZXJsYXlQbGF5QnV0dG9uID0gKHsgdmlkZW9UaXRsZSB9OiB7IHZpZGVvVGl0bGU/OiBzdHJpbmcgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGbGV4Qm94XG4gICAgICBhcmlhLWxhYmVsPXtgcGxheSB2aWRlbyR7dmlkZW9UaXRsZSA/IGA6ICR7dmlkZW9UaXRsZX1gIDogJyd9YH1cbiAgICAgIHJvbGU9XCJidXR0b25cIlxuICAgID5cbiAgICAgIDxQbGF5SWNvbiBjb2xvcj1cIndoaXRlXCIgbWluSGVpZ2h0PVwiNzVweFwiIG1pbldpZHRoPVwiNzVweFwiIC8+XG4gICAgPC9TdHlsZWRGbGV4Qm94PlxuICApO1xufTtcbiJdfQ== */");
 export const OverlayPlayButton = ({
   videoTitle
 }) => {
   return /*#__PURE__*/_jsx(StyledFlexBox, {