npm - @gravity-ui/page-constructor - Versions diffs - 8.14.1 → 8.15.0 - Mend

@gravity-ui/page-constructor 8.14.1 → 8.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/build/cjs/blocks/Footer/components/CopyrightFloor/CopyrightFloor.js CHANGED Viewed

@@ -7,6 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../../../components/index.js");
 const constants_1 = require("../../../../constants.js");
+const ssrContext_1 = require("../../../../context/ssrContext/index.js");
 const theme_1 = require("../../../../context/theme/index.js");
 const grid_1 = require("../../../../grid/index.js");
 const utils_1 = require("../../../../utils/index.js");
@@ -71,20 +72,19 @@ const RightSide = ({ copyright, rightSideRef, style }) => {
     const theme = (0, theme_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)("div", { className: b('links-floor-right'), ref: rightSideRef, style: style, children: [copyright.languageSwitcher && ((0, jsx_runtime_1.jsx)(LangSwitcher_1.LangSwitcher, { buttonText: copyright.languageSwitcher.buttonText, items: copyright.languageSwitcher.items, image: (0, utils_1.getThemedValue)(copyright.languageSwitcher.image, theme) })), copyright.copyrightText && ((0, jsx_runtime_1.jsx)("span", { className: b('links-floor-copyright'), children: copyright.copyrightText }))] }));
 };
-const DOCUMENT_ELEMENT_REF = {
-    current: document.documentElement,
-};
 const CopyrightFloor = ({ copyright }) => {
     const theme = (0, theme_1.useTheme)();
+    const { isServer } = React.useContext(ssrContext_1.SSRContext);
     const [isSmallWidth, setIsSmallWidth] = React.useState(() => {
-        return document.documentElement.clientWidth <= MOBILE_WIDTH;
+        return !isServer && document.documentElement.clientWidth <= MOBILE_WIDTH;
     });
     const [isThreeColumnStacked, setIsThreeColumnStacked] = React.useState(() => {
-        return document.documentElement.clientWidth <= THREE_COLUMN_DESKTOP_WIDTH;
+        return !isServer && document.documentElement.clientWidth <= THREE_COLUMN_DESKTOP_WIDTH;
     });
     const [sideColumnWidth, setSideColumnWidth] = React.useState();
     const logoRef = React.useRef(null);
     const rightSideRef = React.useRef(null);
+    const documentElementRef = React.useMemo(() => ({ current: isServer ? null : document.documentElement }), [isServer]);
     const updateSideColumnWidth = React.useCallback(() => {
         const logoWidth = Math.ceil(logoRef.current?.getBoundingClientRect().width ?? 0);
         const rightSideWidth = rightSideRef.current
@@ -99,7 +99,7 @@ const CopyrightFloor = ({ copyright }) => {
         updateSideColumnWidth();
     }, [updateSideColumnWidth]);
     (0, uikit_1.useResizeObserver)({
-        ref: DOCUMENT_ELEMENT_REF,
+        ref: documentElementRef,
         onResize: updateFloorSize,
     });
     const menuContainerRef = React.useRef(null);

package/build/cjs/blocks/Footer/components/CopyrightFloor/CopyrightFloor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyrightFloor.js","sourceRoot":"../../../../../../src","sources":["blocks/Footer/components/CopyrightFloor/CopyrightFloor.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {DropdownMenu, DropdownMenuItem, Link, useResizeObserver} from '@gravity-ui/uikit';\n\nimport {Image} from '../../../../components';\nimport {BREAKPOINTS} from '../../../../constants';\nimport {useTheme} from '../../../../context/theme';\nimport {Col} from '../../../../grid';\nimport type {FooterBlockProps} from '../../../../models';\nimport {block, getThemedValue} from '../../../../utils';\nimport {useLogoImageProps} from '../../hooks/useLogoImageProps';\nimport {LinkItem, useOverflowListItems} from '../../hooks/useOverflowListItems';\nimport {LangSwitcher} from '../LangSwitcher';\n\nimport './CopyrightFloor.scss';\n\nconst b = block('footer-block');\n\nconst MOBILE_WIDTH = BREAKPOINTS.sm;\nconst THREE_COLUMN_DESKTOP_WIDTH = BREAKPOINTS.md;\n\ntype CopyrightFloorProps = {\n copyright: NonNullable<FooterBlockProps['copyright']>;\n};\n\nfunction getElementFlexContentWidth(element: HTMLElement) {\n const children = Array.from(element.children) as HTMLElement[];\n\n if (!children.length) {\n return element.scrollWidth;\n }\n\n const elementStyles = window.getComputedStyle(element);\n const columnGap = parseFloat(elementStyles.columnGap);\n const gap = Number.isNaN(columnGap) ? 0 : columnGap;\n // extra 1px to prevent overflow\n const childrenWidths = children.map((child) => child.scrollWidth + 1);\n\n if (elementStyles.flexDirection.startsWith('column')) {\n return Math.ceil(Math.max(...childrenWidths));\n }\n\n return Math.ceil(\n childrenWidths.reduce((sum, width) => sum + width, 0) + gap * (children.length - 1),\n );\n}\n\nfunction useLinksAlignmentState(copyright: CopyrightFloorProps['copyright']) {\n const hasOnlyLinks = Boolean(\n copyright.links?.length &&\n !copyright.logo &&\n !copyright.languageSwitcher &&\n !copyright.copyrightText,\n );\n const areLinksInTheMiddle = Boolean(\n copyright.logo &&\n copyright.links?.length &&\n (copyright.languageSwitcher \|\| copyright.copyrightText),\n );\n\n return {\n shouldCenterLinks: areLinksInTheMiddle \|\| hasOnlyLinks,\n threeColumnLayout: areLinksInTheMiddle,\n hasOnlyLinks,\n };\n}\n\ntype CopyrightLogoProps = {\n logo: CopyrightFloorProps['copyright']['logo'];\n logoImageProps: Record<string, unknown> \| null;\n logoRef?: React.RefObject<HTMLDivElement>;\n};\n\nconst CopyrightLogo = ({logo, logoImageProps, logoRef}: CopyrightLogoProps) => {\n if (!logo \|\| !logoImageProps) {\n return null;\n }\n\n return (\n <div className={b('logo')} ref={logoRef}>\n {logo.url ? (\n <Link href={logo.url}>\n <Image {...logoImageProps} alt={logo.alt ?? ''} className={b('logo-image')} />\n </Link>\n ) : (\n <Image {...logoImageProps} alt={logo.alt ?? ''} className={b('logo-image')} />\n )}\n </div>\n );\n};\n\ntype VisibleLinksProps = {\n items: LinkItem[];\n isLinksOverflowDropdown: boolean;\n};\n\nconst VisibleLinks = ({items, isLinksOverflowDropdown}: VisibleLinksProps) => {\n if (!items?.length) {\n return null;\n }\n\n return (\n <ul\n className={b('links-floor-list', {\n wrap: !isLinksOverflowDropdown,\n })}\n >\n {items.map((item, index) => (\n <li key={index} className={b('links-floor-item')}>\n <a href={item.url}>{item.text}</a>\n </li>\n ))}\n </ul>\n );\n};\n\ntype OverflowDropdownProps = {\n isLinksOverflowDropdown: boolean;\n items: DropdownMenuItem[];\n};\n\nconst OverflowDropdown = ({isLinksOverflowDropdown, items}: OverflowDropdownProps) => {\n if (!isLinksOverflowDropdown \|\| !items.length) {\n return null;\n }\n\n return (\n <DropdownMenu\n items={items}\n switcherWrapperClassName={b('more-button', {\n visible: isLinksOverflowDropdown && items.length > 0,\n })}\n size=\"l\"\n />\n );\n};\n\ntype RightSideProps = {\n copyright: CopyrightFloorProps['copyright'];\n rightSideRef: React.RefObject<HTMLDivElement>;\n style?: React.CSSProperties;\n};\n\nconst RightSide = ({copyright, rightSideRef, style}: RightSideProps) => {\n const theme = useTheme();\n\n return (\n <div className={b('links-floor-right')} ref={rightSideRef} style={style}>\n {copyright.languageSwitcher && (\n <LangSwitcher\n buttonText={copyright.languageSwitcher.buttonText}\n items={copyright.languageSwitcher.items}\n image={getThemedValue(copyright.languageSwitcher.image, theme)}\n />\n )}\n {copyright.copyrightText && (\n <span className={b('links-floor-copyright')}>{copyright.copyrightText}</span>\n )}\n </div>\n );\n};\n\nconst DOCUMENT_ELEMENT_REF = {\n current: document.documentElement,\n};\n\nexport const CopyrightFloor = ({copyright}: CopyrightFloorProps) => {\n const theme = useTheme();\n const [isSmallWidth, setIsSmallWidth] = React.useState(() => {\n return document.documentElement.clientWidth <= MOBILE_WIDTH;\n });\n const [isThreeColumnStacked, setIsThreeColumnStacked] = React.useState(() => {\n return document.documentElement.clientWidth <= THREE_COLUMN_DESKTOP_WIDTH;\n });\n const [sideColumnWidth, setSideColumnWidth] = React.useState<number>();\n const logoRef = React.useRef<HTMLDivElement>(null);\n const rightSideRef = React.useRef<HTMLDivElement>(null);\n\n const updateSideColumnWidth = React.useCallback(() => {\n const logoWidth = Math.ceil(logoRef.current?.getBoundingClientRect().width ?? 0);\n const rightSideWidth = rightSideRef.current\n ? getElementFlexContentWidth(rightSideRef.current)\n : 0;\n const maxSideWidth = Math.max(logoWidth, rightSideWidth);\n\n setSideColumnWidth(maxSideWidth \|\| undefined);\n }, []);\n\n const updateFloorSize = React.useCallback(() => {\n setIsSmallWidth(document.documentElement.clientWidth <= MOBILE_WIDTH);\n setIsThreeColumnStacked(document.documentElement.clientWidth <= THREE_COLUMN_DESKTOP_WIDTH);\n updateSideColumnWidth();\n }, [updateSideColumnWidth]);\n\n useResizeObserver({\n ref: DOCUMENT_ELEMENT_REF,\n onResize: updateFloorSize,\n });\n\n const menuContainerRef = React.useRef<HTMLDivElement>(null);\n const linksOverflowStrategy = copyright.linksOverflowStrategy \|\| 'dropdown';\n const isLinksOverflowDropdown = linksOverflowStrategy === 'dropdown';\n const {visibleItems, hiddenItems, measured} = useOverflowListItems({\n isDropdown: isLinksOverflowDropdown && !isSmallWidth,\n containerRef: menuContainerRef,\n items: copyright.links,\n itemSelector: `.${b('links-floor-item')}`,\n moreButtonWidth: 52,\n });\n const {shouldCenterLinks, threeColumnLayout, hasOnlyLinks} = useLinksAlignmentState(copyright);\n const hasLanguageSwitcher = Boolean(copyright.languageSwitcher);\n const hasCopyrightText = Boolean(copyright.copyrightText);\n const hasRightSideContent = hasLanguageSwitcher \|\| hasCopyrightText;\n const copyrightLogoImage = copyright.logo && getThemedValue(copyright.logo.image, theme);\n const copyrightLogoImageProps = useLogoImageProps(copyrightLogoImage);\n\n React.useEffect(() => {\n if (isThreeColumnStacked) {\n updateSideColumnWidth();\n }\n }, [updateSideColumnWidth, copyrightLogoImageProps, hasRightSideContent, isThreeColumnStacked]);\n\n const linksContent = (\n <div className={b('links-floor-left', {measured})} ref={menuContainerRef}>\n <VisibleLinks items={visibleItems} isLinksOverflowDropdown={isLinksOverflowDropdown} />\n <OverflowDropdown\n isLinksOverflowDropdown={isLinksOverflowDropdown}\n items={hiddenItems}\n />\n </div>\n );\n\n const sideColumnStyle = React.useMemo<React.CSSProperties \| undefined>(() => {\n if (!threeColumnLayout \|\| isThreeColumnStacked \|\| sideColumnWidth === undefined) {\n return undefined;\n }\n\n return {width: sideColumnWidth};\n }, [isThreeColumnStacked, sideColumnWidth, threeColumnLayout]);\n\n return (\n <Col sizes={{all: 12}} className={b('floor', {copyright: true})}>\n <div\n className={b('links-floor-inner', {\n centered: shouldCenterLinks,\n threeColumn: threeColumnLayout,\n overflow: linksOverflowStrategy,\n withLanguageSwitcher: hasLanguageSwitcher,\n hasOnlyLinks,\n })}\n >\n {copyright.logo && (\n <div className={b('links-floor-side')} style={sideColumnStyle}>\n <CopyrightLogo\n logo={copyright.logo}\n logoImageProps={copyrightLogoImageProps}\n logoRef={logoRef}\n />\n </div>\n )}\n {threeColumnLayout ? (\n <div className={b('links-floor-center')}>{linksContent}</div>\n ) : (\n linksContent\n )}\n {hasRightSideContent && (\n <RightSide\n copyright={copyright}\n rightSideRef={rightSideRef}\n style={sideColumnStyle}\n />\n )}\n </div>\n </Col>\n );\n};\n"]}
1	+ {"version":3,"file":"CopyrightFloor.js","sourceRoot":"../../../../../../src","sources":["blocks/Footer/components/CopyrightFloor/CopyrightFloor.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {DropdownMenu, DropdownMenuItem, Link, useResizeObserver} from '@gravity-ui/uikit';\n\nimport {Image} from '../../../../components';\nimport {BREAKPOINTS} from '../../../../constants';\nimport {SSRContext} from '../../../../context/ssrContext';\nimport {useTheme} from '../../../../context/theme';\nimport {Col} from '../../../../grid';\nimport type {FooterBlockProps} from '../../../../models';\nimport {block, getThemedValue} from '../../../../utils';\nimport {useLogoImageProps} from '../../hooks/useLogoImageProps';\nimport {LinkItem, useOverflowListItems} from '../../hooks/useOverflowListItems';\nimport {LangSwitcher} from '../LangSwitcher';\n\nimport './CopyrightFloor.scss';\n\nconst b = block('footer-block');\n\nconst MOBILE_WIDTH = BREAKPOINTS.sm;\nconst THREE_COLUMN_DESKTOP_WIDTH = BREAKPOINTS.md;\n\ntype CopyrightFloorProps = {\n copyright: NonNullable<FooterBlockProps['copyright']>;\n};\n\nfunction getElementFlexContentWidth(element: HTMLElement) {\n const children = Array.from(element.children) as HTMLElement[];\n\n if (!children.length) {\n return element.scrollWidth;\n }\n\n const elementStyles = window.getComputedStyle(element);\n const columnGap = parseFloat(elementStyles.columnGap);\n const gap = Number.isNaN(columnGap) ? 0 : columnGap;\n // extra 1px to prevent overflow\n const childrenWidths = children.map((child) => child.scrollWidth + 1);\n\n if (elementStyles.flexDirection.startsWith('column')) {\n return Math.ceil(Math.max(...childrenWidths));\n }\n\n return Math.ceil(\n childrenWidths.reduce((sum, width) => sum + width, 0) + gap * (children.length - 1),\n );\n}\n\nfunction useLinksAlignmentState(copyright: CopyrightFloorProps['copyright']) {\n const hasOnlyLinks = Boolean(\n copyright.links?.length &&\n !copyright.logo &&\n !copyright.languageSwitcher &&\n !copyright.copyrightText,\n );\n const areLinksInTheMiddle = Boolean(\n copyright.logo &&\n copyright.links?.length &&\n (copyright.languageSwitcher \|\| copyright.copyrightText),\n );\n\n return {\n shouldCenterLinks: areLinksInTheMiddle \|\| hasOnlyLinks,\n threeColumnLayout: areLinksInTheMiddle,\n hasOnlyLinks,\n };\n}\n\ntype CopyrightLogoProps = {\n logo: CopyrightFloorProps['copyright']['logo'];\n logoImageProps: Record<string, unknown> \| null;\n logoRef?: React.RefObject<HTMLDivElement>;\n};\n\nconst CopyrightLogo = ({logo, logoImageProps, logoRef}: CopyrightLogoProps) => {\n if (!logo \|\| !logoImageProps) {\n return null;\n }\n\n return (\n <div className={b('logo')} ref={logoRef}>\n {logo.url ? (\n <Link href={logo.url}>\n <Image {...logoImageProps} alt={logo.alt ?? ''} className={b('logo-image')} />\n </Link>\n ) : (\n <Image {...logoImageProps} alt={logo.alt ?? ''} className={b('logo-image')} />\n )}\n </div>\n );\n};\n\ntype VisibleLinksProps = {\n items: LinkItem[];\n isLinksOverflowDropdown: boolean;\n};\n\nconst VisibleLinks = ({items, isLinksOverflowDropdown}: VisibleLinksProps) => {\n if (!items?.length) {\n return null;\n }\n\n return (\n <ul\n className={b('links-floor-list', {\n wrap: !isLinksOverflowDropdown,\n })}\n >\n {items.map((item, index) => (\n <li key={index} className={b('links-floor-item')}>\n <a href={item.url}>{item.text}</a>\n </li>\n ))}\n </ul>\n );\n};\n\ntype OverflowDropdownProps = {\n isLinksOverflowDropdown: boolean;\n items: DropdownMenuItem[];\n};\n\nconst OverflowDropdown = ({isLinksOverflowDropdown, items}: OverflowDropdownProps) => {\n if (!isLinksOverflowDropdown \|\| !items.length) {\n return null;\n }\n\n return (\n <DropdownMenu\n items={items}\n switcherWrapperClassName={b('more-button', {\n visible: isLinksOverflowDropdown && items.length > 0,\n })}\n size=\"l\"\n />\n );\n};\n\ntype RightSideProps = {\n copyright: CopyrightFloorProps['copyright'];\n rightSideRef: React.RefObject<HTMLDivElement>;\n style?: React.CSSProperties;\n};\n\nconst RightSide = ({copyright, rightSideRef, style}: RightSideProps) => {\n const theme = useTheme();\n\n return (\n <div className={b('links-floor-right')} ref={rightSideRef} style={style}>\n {copyright.languageSwitcher && (\n <LangSwitcher\n buttonText={copyright.languageSwitcher.buttonText}\n items={copyright.languageSwitcher.items}\n image={getThemedValue(copyright.languageSwitcher.image, theme)}\n />\n )}\n {copyright.copyrightText && (\n <span className={b('links-floor-copyright')}>{copyright.copyrightText}</span>\n )}\n </div>\n );\n};\n\nexport const CopyrightFloor = ({copyright}: CopyrightFloorProps) => {\n const theme = useTheme();\n const {isServer} = React.useContext(SSRContext);\n const [isSmallWidth, setIsSmallWidth] = React.useState(() => {\n return !isServer && document.documentElement.clientWidth <= MOBILE_WIDTH;\n });\n const [isThreeColumnStacked, setIsThreeColumnStacked] = React.useState(() => {\n return !isServer && document.documentElement.clientWidth <= THREE_COLUMN_DESKTOP_WIDTH;\n });\n const [sideColumnWidth, setSideColumnWidth] = React.useState<number>();\n const logoRef = React.useRef<HTMLDivElement>(null);\n const rightSideRef = React.useRef<HTMLDivElement>(null);\n const documentElementRef = React.useMemo(\n () => ({current: isServer ? null : document.documentElement}),\n [isServer],\n );\n\n const updateSideColumnWidth = React.useCallback(() => {\n const logoWidth = Math.ceil(logoRef.current?.getBoundingClientRect().width ?? 0);\n const rightSideWidth = rightSideRef.current\n ? getElementFlexContentWidth(rightSideRef.current)\n : 0;\n const maxSideWidth = Math.max(logoWidth, rightSideWidth);\n\n setSideColumnWidth(maxSideWidth \|\| undefined);\n }, []);\n\n const updateFloorSize = React.useCallback(() => {\n setIsSmallWidth(document.documentElement.clientWidth <= MOBILE_WIDTH);\n setIsThreeColumnStacked(document.documentElement.clientWidth <= THREE_COLUMN_DESKTOP_WIDTH);\n updateSideColumnWidth();\n }, [updateSideColumnWidth]);\n\n useResizeObserver({\n ref: documentElementRef,\n onResize: updateFloorSize,\n });\n\n const menuContainerRef = React.useRef<HTMLDivElement>(null);\n const linksOverflowStrategy = copyright.linksOverflowStrategy \|\| 'dropdown';\n const isLinksOverflowDropdown = linksOverflowStrategy === 'dropdown';\n const {visibleItems, hiddenItems, measured} = useOverflowListItems({\n isDropdown: isLinksOverflowDropdown && !isSmallWidth,\n containerRef: menuContainerRef,\n items: copyright.links,\n itemSelector: `.${b('links-floor-item')}`,\n moreButtonWidth: 52,\n });\n const {shouldCenterLinks, threeColumnLayout, hasOnlyLinks} = useLinksAlignmentState(copyright);\n const hasLanguageSwitcher = Boolean(copyright.languageSwitcher);\n const hasCopyrightText = Boolean(copyright.copyrightText);\n const hasRightSideContent = hasLanguageSwitcher \|\| hasCopyrightText;\n const copyrightLogoImage = copyright.logo && getThemedValue(copyright.logo.image, theme);\n const copyrightLogoImageProps = useLogoImageProps(copyrightLogoImage);\n\n React.useEffect(() => {\n if (isThreeColumnStacked) {\n updateSideColumnWidth();\n }\n }, [updateSideColumnWidth, copyrightLogoImageProps, hasRightSideContent, isThreeColumnStacked]);\n\n const linksContent = (\n <div className={b('links-floor-left', {measured})} ref={menuContainerRef}>\n <VisibleLinks items={visibleItems} isLinksOverflowDropdown={isLinksOverflowDropdown} />\n <OverflowDropdown\n isLinksOverflowDropdown={isLinksOverflowDropdown}\n items={hiddenItems}\n />\n </div>\n );\n\n const sideColumnStyle = React.useMemo<React.CSSProperties \| undefined>(() => {\n if (!threeColumnLayout \|\| isThreeColumnStacked \|\| sideColumnWidth === undefined) {\n return undefined;\n }\n\n return {width: sideColumnWidth};\n }, [isThreeColumnStacked, sideColumnWidth, threeColumnLayout]);\n\n return (\n <Col sizes={{all: 12}} className={b('floor', {copyright: true})}>\n <div\n className={b('links-floor-inner', {\n centered: shouldCenterLinks,\n threeColumn: threeColumnLayout,\n overflow: linksOverflowStrategy,\n withLanguageSwitcher: hasLanguageSwitcher,\n hasOnlyLinks,\n })}\n >\n {copyright.logo && (\n <div className={b('links-floor-side')} style={sideColumnStyle}>\n <CopyrightLogo\n logo={copyright.logo}\n logoImageProps={copyrightLogoImageProps}\n logoRef={logoRef}\n />\n </div>\n )}\n {threeColumnLayout ? (\n <div className={b('links-floor-center')}>{linksContent}</div>\n ) : (\n linksContent\n )}\n {hasRightSideContent && (\n <RightSide\n copyright={copyright}\n rightSideRef={rightSideRef}\n style={sideColumnStyle}\n />\n )}\n </div>\n </Col>\n );\n};\n"]}

package/build/cjs/components/ReactPlayer/ReactPlayer.css CHANGED Viewed

@@ -18,50 +18,6 @@ unpredictable css rules order in build */
   top: 0;
   left: 0;
 }
-.pc-ReactPlayer__button {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  border: none;
-  outline: none;
-  color: inherit;
-  background: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  width: 64px;
-  height: 64px;
-  border-radius: 166px;
-}
-.pc-ReactPlayer__button:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-ReactPlayer__button:focus:not(:focus-visible) {
-  outline: 0;
-}
-.pc-ReactPlayer__button_theme_blue {
-  color: var(--g-color-base-background);
-  background-color: var(--g-color-base-brand);
-}
-.pc-ReactPlayer__button_theme_grey {
-  color: var(--pc-text-header-color);
-  background-color: #eff2f8;
-}
-.pc-ReactPlayer__button_text {
-  padding: 16px 32px;
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 32px;
-  width: auto;
-  height: auto;
-}
-.pc-ReactPlayer__icon {
-  margin-left: 1px;
-}
 .pc-ReactPlayer_controls_custom::before {
   display: none;
   position: absolute;
@@ -77,10 +33,4 @@ unpredictable css rules order in build */
 }
 .pc-ReactPlayer_auto-ratio video {
   object-fit: cover;
-}
-@media only screen and (max-width: 577px) {
-  .pc-ReactPlayer__button_text {
-    font-size: 20px;
-    line-height: 24px;
-  }
 }

package/build/cjs/components/ReactPlayer/ReactPlayer.js CHANGED Viewed

@@ -4,8 +4,6 @@ exports.ReactPlayerBlock = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const icons_1 = require("@gravity-ui/icons");
-const uikit_1 = require("@gravity-ui/uikit");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce.js"));
 const react_player_1 = tslib_1.__importDefault(require("react-player"));
 const mobileContext_1 = require("../../context/mobileContext/index.js");
@@ -13,8 +11,8 @@ const videoContext_1 = require("../../context/videoContext/index.js");
 const hooks_1 = require("../../hooks/index.js");
 const models_1 = require("../../models/index.js");
 const utils_1 = require("../../utils/index.js");
+const VideoButton_1 = tslib_1.__importDefault(require("../VideoButton/VideoButton.js"));
 const CustomBarControls_1 = tslib_1.__importDefault(require("./CustomBarControls.js"));
-const i18n_1 = require("./i18n/index.js");
 const utils_2 = require("./utils.js");
 const youtube_1 = require("./utils/youtube.js");
 const b = (0, utils_1.block)('ReactPlayer');
@@ -26,7 +24,6 @@ const ReactPlayer = 'default' in react_player_1.default && react_player_1.defaul
 exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = React.useContext(mobileContext_1.MobileContext);
     const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, onIntrinsicSizeChange, disableAutoSizing, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain = true, } = props;
-    const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const { type: customControlsType = models_1.CustomControlsType.WithMuteButton, muteButtonShown, positioning = models_1.CustomControlsButtonPositioning.Center, } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -129,18 +126,9 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const playEvents = React.useMemo(() => eventsArray?.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [eventsArray]);
     const stopEvents = React.useMemo(() => eventsArray?.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [eventsArray]);
     const playIcon = React.useMemo(() => {
-        let playButtonContent;
-        switch (type) {
-            case models_1.PlayButtonType.Text:
-                playButtonContent = text;
-                break;
-            case models_1.PlayButtonType.Default:
-            default:
-                playButtonContent = (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: 24 });
-                break;
-        }
-        return ((0, jsx_runtime_1.jsx)("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": (0, i18n_1.i18n)('play'), ref: buttonRef, children: playButtonContent }));
-    }, [type, theme, text, buttonClassName]);
+        const { theme, type } = playButton || {};
+        return ((0, jsx_runtime_1.jsx)(VideoButton_1.default, { ...playButton, theme: theme || models_1.PlayButtonThemes.Blue, type: type || models_1.PlayButtonType.Default }));
+    }, [playButton]);
     const changeMute = React.useCallback((isMuted) => {
         if (isMuted &&
             playerRef &&

package/build/cjs/components/ReactPlayer/ReactPlayer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReactPlayer.js","sourceRoot":"../../../../src","sources":["components/ReactPlayer/ReactPlayer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {PlayFill} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport _ReactPlayer from 'react-player';\nimport type {ReactPlayerProps} from 'react-player';\n\nimport {MobileContext} from '../../context/mobileContext';\nimport {VideoContext} from '../../context/videoContext';\nimport {useAnalytics, useImageSize, useMount} from '../../hooks';\nimport {\n AnalyticsEvent,\n ClassNameProps,\n CustomControlsButtonPositioning,\n CustomControlsType,\n DefaultEventNames,\n MediaVideoControlsType,\n MediaVideoProps,\n PlayButtonProps,\n PlayButtonThemes,\n PlayButtonType,\n PredefinedEventTypes,\n ReactPlayerBlockHandler,\n} from '../../models';\nimport {block} from '../../utils';\n\nimport CustomBarControls from './CustomBarControls';\nimport {i18n} from './i18n';\nimport {checkYoutubeVideos} from './utils';\nimport {isYoutubePlayerInstance} from './utils/youtube';\n\nimport './ReactPlayer.scss';\n\nconst b = block('ReactPlayer');\n\nconst FPS = 60;\n\nconst ReactPlayer =\n 'default' in _ReactPlayer && _ReactPlayer.default\n ? (_ReactPlayer.default as typeof _ReactPlayer)\n : _ReactPlayer;\n\nexport interface ReactPlayerBlockProps\n extends Omit<MediaVideoProps, 'src' \| 'ref'>,\n ClassNameProps {\n src: string \| string[];\n previewImgUrl?: string;\n customBarControlsClassName?: string;\n showPreview?: boolean;\n onClickPreview?: () => void;\n height?: number;\n ratio?: number;\n autoRatio?: boolean;\n disableAutoSizing?: boolean;\n onIntrinsicSizeChange?: (size: {width: number; height: number}) => void;\n children?: React.ReactNode;\n}\n\ninterface PlayerPropgress {\n played: number;\n playedSeconds: number;\n}\n\n// eslint-disable-next-line react/display-name\nexport const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactPlayerBlockProps>(\n (props, originRef) => {\n const isMobile = React.useContext(MobileContext);\n const {\n src,\n previewImgUrl,\n loop = false,\n controls = MediaVideoControlsType.Default,\n customControlsOptions = {},\n muted: initiallyMuted = false,\n elapsedTime,\n playButton,\n className,\n customBarControlsClassName,\n showPreview,\n onClickPreview,\n onIntrinsicSizeChange,\n disableAutoSizing,\n analyticsEvents,\n height,\n ariaLabel,\n ratio,\n autoRatio,\n contain = true,\n } = props;\n\n const {\n type = PlayButtonType.Default,\n theme = PlayButtonThemes.Blue,\n text,\n className: buttonClassName,\n } = playButton \|\| ({} as PlayButtonProps);\n const {\n type: customControlsType = CustomControlsType.WithMuteButton,\n muteButtonShown,\n positioning = CustomControlsButtonPositioning.Center,\n } = customControlsOptions;\n\n const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);\n const mute = initiallyMuted \|\| autoPlay;\n\n const {playingVideoRef, setProps} = React.useContext(VideoContext);\n\n const ref = React.useRef<HTMLDivElement>(null);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n const [playerRef, setPlayerRef] = React.useState<_ReactPlayer>();\n const [isPlaying, setIsPlaying] = React.useState(autoPlay);\n const [playedPercent, setPlayedPercent] = React.useState<number>(0);\n const [currentHeight, setCurrentHeight] = React.useState(height);\n const [duration, setDuration] = React.useState<null \| number>(null);\n const [width, setWidth] = React.useState<number>(0);\n const [actualRatio, setActualRatio] = React.useState<number>();\n const [muted, setMuted] = React.useState<boolean>(mute);\n const [started, setStarted] = React.useState(autoPlay);\n const [ended, setEnded] = React.useState<boolean>(false);\n const [isMounted, setIsMounted] = React.useState(false);\n const [hovered, setHovered] = React.useState(isMobile);\n\n useMount(() => setIsMounted(true));\n\n const videoSrc = React.useMemo(() => checkYoutubeVideos(src), [src]);\n\n const {imageRef: previewImgRef, onLoad: onPreviewImgLoad} = useImageSize({\n onIntrinsicSizeChange,\n });\n\n const eventsArray = React.useMemo(() => {\n if (analyticsEvents) {\n return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];\n }\n\n return [];\n }, [analyticsEvents]);\n const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);\n\n React.useImperativeHandle(originRef, () => {\n if (!playerRef) {\n return;\n }\n\n let play, pause, addEventListener;\n const videoInstance = playerRef.getInternalPlayer();\n if (isYoutubePlayerInstance(videoInstance)) {\n ({pauseVideo: pause, playVideo: play, addEventListener} = videoInstance);\n } else {\n // it is assumed that `videoInstance` is HTMLVideoElement by default\n ({play, pause, addEventListener} = videoInstance);\n }\n\n // eslint-disable-next-line consistent-return\n return {\n play: play.bind(videoInstance),\n pause: pause.bind(videoInstance),\n addEventListener: addEventListener.bind(videoInstance),\n };\n }, [playerRef]);\n\n React.useEffect(() => {\n if (ref.current && !playingVideoRef?.contains(ref.current)) {\n setMuted(true);\n }\n }, [playingVideoRef]);\n\n React.useEffect(() => {\n if (showPreview) {\n playerRef?.showPreview();\n }\n }, [showPreview, playerRef]);\n\n React.useEffect(() => {\n if (playerRef && !started) {\n setIsPlaying(autoPlay);\n }\n }, [autoPlay, playerRef, started]);\n\n React.useEffect(() => setMuted(mute), [mute]);\n\n React.useEffect(() => {\n if (!started && isPlaying) {\n setStarted(true);\n }\n }, [isPlaying, started]);\n\n React.useEffect(() => {\n if (started && !Number.isNaN(Number(elapsedTime))) {\n playerRef?.seekTo(elapsedTime ?? 0, 'seconds');\n }\n }, [elapsedTime, playerRef, started]);\n\n React.useEffect(() => {\n if (disableAutoSizing) {\n return;\n }\n\n const updateSize = debounce(() => {\n if (ref.current) {\n // We need to get parent's width does not equal 0\n const parentElement = getParentElement(ref.current);\n const {paddingLeft, paddingRight} = getComputedStyle(parentElement);\n const newWidth =\n parentElement.offsetWidth -\n parseFloat(paddingLeft) -\n parseFloat(paddingRight);\n\n setWidth(newWidth);\n setCurrentHeight(\n Math.floor(\n getHeight(newWidth, ratio ?? (autoRatio ? actualRatio : undefined)),\n ),\n );\n }\n }, 200);\n\n updateSize();\n window.addEventListener('resize', updateSize, {passive: true});\n // eslint-disable-next-line consistent-return\n return () => {\n window.removeEventListener('resize', updateSize);\n };\n }, [actualRatio, autoRatio, disableAutoSizing, playerRef, ratio]);\n\n const playEvents = React.useMemo(\n () => eventsArray?.filter((e: AnalyticsEvent) => e.type === PredefinedEventTypes.Play),\n [eventsArray],\n );\n const stopEvents = React.useMemo(\n () => eventsArray?.filter((e: AnalyticsEvent) => e.type === PredefinedEventTypes.Stop),\n [eventsArray],\n );\n\n const playIcon = React.useMemo(() => {\n let playButtonContent;\n\n switch (type) {\n case PlayButtonType.Text:\n playButtonContent = text;\n break;\n case PlayButtonType.Default:\n default:\n playButtonContent = <Icon className={b('icon')} data={PlayFill} size={24} />;\n break;\n }\n\n return (\n <button\n className={b('button', {theme, text: Boolean(text)}, buttonClassName)}\n aria-label={i18n('play')}\n ref={buttonRef}\n >\n {playButtonContent}\n </button>\n );\n }, [type, theme, text, buttonClassName]);\n\n const changeMute = React.useCallback(\n (isMuted: boolean) => {\n if (\n isMuted &&\n playerRef &&\n controls === MediaVideoControlsType.Custom &&\n customControlsType === CustomControlsType.WithMuteButton\n ) {\n playerRef.seekTo(0);\n setPlayedPercent(0);\n }\n\n const events = isMuted ? playEvents : stopEvents;\n handleAnalytics(events);\n\n if (isMuted) {\n setProps({playingVideoRef: ref.current});\n }\n\n // In order to the progress bar to update (equals 0) before displaying\n setTimeout(() => setMuted(!isMuted), 0);\n },\n [\n playerRef,\n customControlsType,\n playEvents,\n stopEvents,\n handleAnalytics,\n setProps,\n controls,\n ],\n );\n\n const handleClickPreview = React.useCallback(() => {\n setIsPlaying(true);\n onClickPreview?.();\n\n handleAnalytics(playEvents);\n }, [onClickPreview, handleAnalytics, playEvents]);\n\n const onPause = React.useCallback(() => {\n // For support correct state for youtube\n if (\n controls !== MediaVideoControlsType.Custom \|\|\n customControlsType !== CustomControlsType.WithMuteButton\n ) {\n setIsPlaying(false);\n }\n }, [controls, customControlsType]);\n\n const onStart = React.useCallback(() => {\n if (!autoPlay && !initiallyMuted) {\n setMuted(false);\n }\n }, [autoPlay, initiallyMuted]);\n\n const onPlay = React.useCallback(() => {\n setIsPlaying(true);\n\n if (\n controls === MediaVideoControlsType.Custom &&\n customControlsType === CustomControlsType.WithMuteButton\n ) {\n if (ended) {\n changeMute(false);\n } else if (!isPlaying) {\n changeMute(muted);\n }\n setEnded(false);\n }\n }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);\n\n const onReady = React.useCallback(\n (player: _ReactPlayer) => {\n setPlayerRef(player);\n const videoElement = player.getInternalPlayer();\n const videoWidth = videoElement.videoWidth as number \| undefined;\n const videoHeight = videoElement.videoHeight as number \| undefined;\n if (videoWidth && videoHeight) {\n setActualRatio(videoHeight / videoWidth);\n onIntrinsicSizeChange?.({width: videoWidth, height: videoHeight});\n }\n },\n [onIntrinsicSizeChange],\n );\n\n const onProgress: ReactPlayerProps['onProgress'] = React.useCallback(\n ({played, playedSeconds}: PlayerPropgress) => {\n setPlayedPercent(played);\n\n if (loop) {\n const {start = 0, end = duration} = typeof loop === 'boolean' ? {} : loop;\n\n // Youtube videos not muted after finishing playing and start again.\n // 'onEnded' does not fire when 'loop' is set to true.\n // It is custom loop with muted sound after finishing playing and start again.\n if (end !== null && playedSeconds >= end) {\n setIsPlaying(true);\n playerRef?.seekTo(start);\n }\n }\n\n if (played === 1) {\n setMuted(true);\n }\n },\n [duration, loop, playerRef],\n );\n\n const onDuration = React.useCallback((currentDuration: number) => {\n setDuration(currentDuration);\n }, []);\n\n const onEnded = React.useCallback(() => {\n setEnded(true);\n }, []);\n\n const onPlayClick = React.useCallback(() => {\n if (isPlaying) {\n onPause();\n } else {\n onPlay();\n }\n }, [isPlaying, onPlay, onPause]);\n\n const handleClick = React.useCallback(() => {\n buttonRef.current?.click();\n\n if (controls === MediaVideoControlsType.Custom) {\n if (customControlsType === CustomControlsType.WithMuteButton) {\n changeMute(muted);\n } else {\n onPlayClick();\n }\n }\n }, [controls, customControlsType, changeMute, muted, onPlayClick]);\n\n const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n const key = e.key.toLowerCase();\n\n if (key === 'enter') {\n buttonRef.current?.click();\n }\n }, []);\n\n const onFocusIn = React.useCallback(() => setHovered(true), []);\n const onFocusOut = React.useCallback(() => setHovered(false), []);\n\n return (\n <div\n className={b(\n {\n wrapper: !currentHeight,\n controls,\n contain,\n 'auto-ratio': autoRatio,\n },\n className,\n )}\n ref={ref}\n onClick={handleClick}\n onMouseEnter={onFocusIn}\n onMouseLeave={onFocusOut}\n onFocus={onFocusIn}\n onBlur={onFocusOut}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {isMounted ? (\n <React.Fragment>\n <ReactPlayer\n className={b('player')}\n url={videoSrc}\n muted={muted}\n controls={controls === MediaVideoControlsType.Default}\n height={currentHeight \|\| '100%'}\n width={width \|\| '100%'}\n light={\n previewImgUrl && (\n <img\n className={b('preview-img')}\n src={previewImgUrl}\n onLoad={onPreviewImgLoad}\n alt=\"\"\n aria-hidden={true}\n ref={previewImgRef}\n />\n )\n }\n playing={isPlaying}\n playIcon={playIcon}\n progressInterval={FPS}\n onClickPreview={handleClickPreview}\n onStart={onStart}\n onReady={onReady}\n onPlay={onPlay}\n onPause={\n autoPlay && customControlsType !== CustomControlsType.WithMuteButton\n ? undefined\n : onPause\n } // to prevent pause icon flickering when autoplayed video ends\n onProgress={onProgress}\n onEnded={onEnded}\n onDuration={onDuration}\n aria-label={ariaLabel}\n previewTabIndex={-1}\n config={{\n file: {\n attributes: {\n pip: isMobile ? 'false' : undefined,\n playsinline: isMobile ? '' : undefined,\n disablepictureinpicture: isMobile ? '' : undefined,\n },\n },\n }}\n />\n {controls === MediaVideoControlsType.Custom && (\n <CustomBarControls\n className={customBarControlsClassName}\n mute={{\n isMuted: muted,\n changeMute: (event: React.MouseEvent) => {\n event.stopPropagation();\n changeMute(muted);\n },\n }}\n elapsedTimePercent={playedPercent}\n type={customControlsType}\n isPaused={!isPlaying}\n onPlayClick={onPlayClick}\n muteButtonShown={muteButtonShown}\n shown={hovered && ((!started && !previewImgUrl) \|\| started)}\n positioning={positioning}\n />\n )}\n </React.Fragment>\n ) : null}\n </div>\n );\n },\n);\n\nfunction getHeight(width: number, ratio: number = 9 / 16): number {\n return width * ratio;\n}\n\nfunction getParentElement(element: HTMLElement): HTMLElement {\n const parentElement = element.parentElement;\n\n if (!parentElement) {\n return element;\n }\n\n return parentElement.offsetWidth ? parentElement : getParentElement(parentElement);\n}\n\nexport default ReactPlayerBlock;\n"]}
1	+ {"version":3,"file":"ReactPlayer.js","sourceRoot":"../../../../src","sources":["components/ReactPlayer/ReactPlayer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport debounce from 'lodash/debounce';\nimport _ReactPlayer from 'react-player';\nimport type {ReactPlayerProps} from 'react-player';\n\nimport {MobileContext} from '../../context/mobileContext';\nimport {VideoContext} from '../../context/videoContext';\nimport {useAnalytics, useImageSize, useMount} from '../../hooks';\nimport {\n AnalyticsEvent,\n ClassNameProps,\n CustomControlsButtonPositioning,\n CustomControlsType,\n DefaultEventNames,\n MediaVideoControlsType,\n MediaVideoProps,\n PlayButtonThemes,\n PlayButtonType,\n PredefinedEventTypes,\n ReactPlayerBlockHandler,\n} from '../../models';\nimport {block} from '../../utils';\nimport VideoButton from '../VideoButton/VideoButton';\n\nimport CustomBarControls from './CustomBarControls';\nimport {checkYoutubeVideos} from './utils';\nimport {isYoutubePlayerInstance} from './utils/youtube';\n\nimport './ReactPlayer.scss';\n\nconst b = block('ReactPlayer');\n\nconst FPS = 60;\n\nconst ReactPlayer =\n 'default' in _ReactPlayer && _ReactPlayer.default\n ? (_ReactPlayer.default as typeof _ReactPlayer)\n : _ReactPlayer;\n\nexport interface ReactPlayerBlockProps\n extends Omit<MediaVideoProps, 'src' \| 'ref'>,\n ClassNameProps {\n src: string \| string[];\n previewImgUrl?: string;\n customBarControlsClassName?: string;\n showPreview?: boolean;\n onClickPreview?: () => void;\n height?: number;\n ratio?: number;\n autoRatio?: boolean;\n disableAutoSizing?: boolean;\n onIntrinsicSizeChange?: (size: {width: number; height: number}) => void;\n children?: React.ReactNode;\n}\n\ninterface PlayerPropgress {\n played: number;\n playedSeconds: number;\n}\n\n// eslint-disable-next-line react/display-name\nexport const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactPlayerBlockProps>(\n (props, originRef) => {\n const isMobile = React.useContext(MobileContext);\n const {\n src,\n previewImgUrl,\n loop = false,\n controls = MediaVideoControlsType.Default,\n customControlsOptions = {},\n muted: initiallyMuted = false,\n elapsedTime,\n playButton,\n className,\n customBarControlsClassName,\n showPreview,\n onClickPreview,\n onIntrinsicSizeChange,\n disableAutoSizing,\n analyticsEvents,\n height,\n ariaLabel,\n ratio,\n autoRatio,\n contain = true,\n } = props;\n const {\n type: customControlsType = CustomControlsType.WithMuteButton,\n muteButtonShown,\n positioning = CustomControlsButtonPositioning.Center,\n } = customControlsOptions;\n\n const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);\n const mute = initiallyMuted \|\| autoPlay;\n\n const {playingVideoRef, setProps} = React.useContext(VideoContext);\n\n const ref = React.useRef<HTMLDivElement>(null);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n const [playerRef, setPlayerRef] = React.useState<_ReactPlayer>();\n const [isPlaying, setIsPlaying] = React.useState(autoPlay);\n const [playedPercent, setPlayedPercent] = React.useState<number>(0);\n const [currentHeight, setCurrentHeight] = React.useState(height);\n const [duration, setDuration] = React.useState<null \| number>(null);\n const [width, setWidth] = React.useState<number>(0);\n const [actualRatio, setActualRatio] = React.useState<number>();\n const [muted, setMuted] = React.useState<boolean>(mute);\n const [started, setStarted] = React.useState(autoPlay);\n const [ended, setEnded] = React.useState<boolean>(false);\n const [isMounted, setIsMounted] = React.useState(false);\n const [hovered, setHovered] = React.useState(isMobile);\n\n useMount(() => setIsMounted(true));\n\n const videoSrc = React.useMemo(() => checkYoutubeVideos(src), [src]);\n\n const {imageRef: previewImgRef, onLoad: onPreviewImgLoad} = useImageSize({\n onIntrinsicSizeChange,\n });\n\n const eventsArray = React.useMemo(() => {\n if (analyticsEvents) {\n return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];\n }\n\n return [];\n }, [analyticsEvents]);\n const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);\n\n React.useImperativeHandle(originRef, () => {\n if (!playerRef) {\n return;\n }\n\n let play, pause, addEventListener;\n const videoInstance = playerRef.getInternalPlayer();\n if (isYoutubePlayerInstance(videoInstance)) {\n ({pauseVideo: pause, playVideo: play, addEventListener} = videoInstance);\n } else {\n // it is assumed that `videoInstance` is HTMLVideoElement by default\n ({play, pause, addEventListener} = videoInstance);\n }\n\n // eslint-disable-next-line consistent-return\n return {\n play: play.bind(videoInstance),\n pause: pause.bind(videoInstance),\n addEventListener: addEventListener.bind(videoInstance),\n };\n }, [playerRef]);\n\n React.useEffect(() => {\n if (ref.current && !playingVideoRef?.contains(ref.current)) {\n setMuted(true);\n }\n }, [playingVideoRef]);\n\n React.useEffect(() => {\n if (showPreview) {\n playerRef?.showPreview();\n }\n }, [showPreview, playerRef]);\n\n React.useEffect(() => {\n if (playerRef && !started) {\n setIsPlaying(autoPlay);\n }\n }, [autoPlay, playerRef, started]);\n\n React.useEffect(() => setMuted(mute), [mute]);\n\n React.useEffect(() => {\n if (!started && isPlaying) {\n setStarted(true);\n }\n }, [isPlaying, started]);\n\n React.useEffect(() => {\n if (started && !Number.isNaN(Number(elapsedTime))) {\n playerRef?.seekTo(elapsedTime ?? 0, 'seconds');\n }\n }, [elapsedTime, playerRef, started]);\n\n React.useEffect(() => {\n if (disableAutoSizing) {\n return;\n }\n\n const updateSize = debounce(() => {\n if (ref.current) {\n // We need to get parent's width does not equal 0\n const parentElement = getParentElement(ref.current);\n const {paddingLeft, paddingRight} = getComputedStyle(parentElement);\n const newWidth =\n parentElement.offsetWidth -\n parseFloat(paddingLeft) -\n parseFloat(paddingRight);\n\n setWidth(newWidth);\n setCurrentHeight(\n Math.floor(\n getHeight(newWidth, ratio ?? (autoRatio ? actualRatio : undefined)),\n ),\n );\n }\n }, 200);\n\n updateSize();\n window.addEventListener('resize', updateSize, {passive: true});\n // eslint-disable-next-line consistent-return\n return () => {\n window.removeEventListener('resize', updateSize);\n };\n }, [actualRatio, autoRatio, disableAutoSizing, playerRef, ratio]);\n\n const playEvents = React.useMemo(\n () => eventsArray?.filter((e: AnalyticsEvent) => e.type === PredefinedEventTypes.Play),\n [eventsArray],\n );\n const stopEvents = React.useMemo(\n () => eventsArray?.filter((e: AnalyticsEvent) => e.type === PredefinedEventTypes.Stop),\n [eventsArray],\n );\n\n const playIcon = React.useMemo(() => {\n const {theme, type} = playButton \|\| {};\n return (\n <VideoButton\n {...playButton}\n theme={theme \|\| PlayButtonThemes.Blue}\n type={type \|\| PlayButtonType.Default}\n />\n );\n }, [playButton]);\n\n const changeMute = React.useCallback(\n (isMuted: boolean) => {\n if (\n isMuted &&\n playerRef &&\n controls === MediaVideoControlsType.Custom &&\n customControlsType === CustomControlsType.WithMuteButton\n ) {\n playerRef.seekTo(0);\n setPlayedPercent(0);\n }\n\n const events = isMuted ? playEvents : stopEvents;\n handleAnalytics(events);\n\n if (isMuted) {\n setProps({playingVideoRef: ref.current});\n }\n\n // In order to the progress bar to update (equals 0) before displaying\n setTimeout(() => setMuted(!isMuted), 0);\n },\n [\n playerRef,\n customControlsType,\n playEvents,\n stopEvents,\n handleAnalytics,\n setProps,\n controls,\n ],\n );\n\n const handleClickPreview = React.useCallback(() => {\n setIsPlaying(true);\n onClickPreview?.();\n\n handleAnalytics(playEvents);\n }, [onClickPreview, handleAnalytics, playEvents]);\n\n const onPause = React.useCallback(() => {\n // For support correct state for youtube\n if (\n controls !== MediaVideoControlsType.Custom \|\|\n customControlsType !== CustomControlsType.WithMuteButton\n ) {\n setIsPlaying(false);\n }\n }, [controls, customControlsType]);\n\n const onStart = React.useCallback(() => {\n if (!autoPlay && !initiallyMuted) {\n setMuted(false);\n }\n }, [autoPlay, initiallyMuted]);\n\n const onPlay = React.useCallback(() => {\n setIsPlaying(true);\n\n if (\n controls === MediaVideoControlsType.Custom &&\n customControlsType === CustomControlsType.WithMuteButton\n ) {\n if (ended) {\n changeMute(false);\n } else if (!isPlaying) {\n changeMute(muted);\n }\n setEnded(false);\n }\n }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);\n\n const onReady = React.useCallback(\n (player: _ReactPlayer) => {\n setPlayerRef(player);\n const videoElement = player.getInternalPlayer();\n const videoWidth = videoElement.videoWidth as number \| undefined;\n const videoHeight = videoElement.videoHeight as number \| undefined;\n if (videoWidth && videoHeight) {\n setActualRatio(videoHeight / videoWidth);\n onIntrinsicSizeChange?.({width: videoWidth, height: videoHeight});\n }\n },\n [onIntrinsicSizeChange],\n );\n\n const onProgress: ReactPlayerProps['onProgress'] = React.useCallback(\n ({played, playedSeconds}: PlayerPropgress) => {\n setPlayedPercent(played);\n\n if (loop) {\n const {start = 0, end = duration} = typeof loop === 'boolean' ? {} : loop;\n\n // Youtube videos not muted after finishing playing and start again.\n // 'onEnded' does not fire when 'loop' is set to true.\n // It is custom loop with muted sound after finishing playing and start again.\n if (end !== null && playedSeconds >= end) {\n setIsPlaying(true);\n playerRef?.seekTo(start);\n }\n }\n\n if (played === 1) {\n setMuted(true);\n }\n },\n [duration, loop, playerRef],\n );\n\n const onDuration = React.useCallback((currentDuration: number) => {\n setDuration(currentDuration);\n }, []);\n\n const onEnded = React.useCallback(() => {\n setEnded(true);\n }, []);\n\n const onPlayClick = React.useCallback(() => {\n if (isPlaying) {\n onPause();\n } else {\n onPlay();\n }\n }, [isPlaying, onPlay, onPause]);\n\n const handleClick = React.useCallback(() => {\n buttonRef.current?.click();\n\n if (controls === MediaVideoControlsType.Custom) {\n if (customControlsType === CustomControlsType.WithMuteButton) {\n changeMute(muted);\n } else {\n onPlayClick();\n }\n }\n }, [controls, customControlsType, changeMute, muted, onPlayClick]);\n\n const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n const key = e.key.toLowerCase();\n\n if (key === 'enter') {\n buttonRef.current?.click();\n }\n }, []);\n\n const onFocusIn = React.useCallback(() => setHovered(true), []);\n const onFocusOut = React.useCallback(() => setHovered(false), []);\n\n return (\n <div\n className={b(\n {\n wrapper: !currentHeight,\n controls,\n contain,\n 'auto-ratio': autoRatio,\n },\n className,\n )}\n ref={ref}\n onClick={handleClick}\n onMouseEnter={onFocusIn}\n onMouseLeave={onFocusOut}\n onFocus={onFocusIn}\n onBlur={onFocusOut}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {isMounted ? (\n <React.Fragment>\n <ReactPlayer\n className={b('player')}\n url={videoSrc}\n muted={muted}\n controls={controls === MediaVideoControlsType.Default}\n height={currentHeight \|\| '100%'}\n width={width \|\| '100%'}\n light={\n previewImgUrl && (\n <img\n className={b('preview-img')}\n src={previewImgUrl}\n onLoad={onPreviewImgLoad}\n alt=\"\"\n aria-hidden={true}\n ref={previewImgRef}\n />\n )\n }\n playing={isPlaying}\n playIcon={playIcon}\n progressInterval={FPS}\n onClickPreview={handleClickPreview}\n onStart={onStart}\n onReady={onReady}\n onPlay={onPlay}\n onPause={\n autoPlay && customControlsType !== CustomControlsType.WithMuteButton\n ? undefined\n : onPause\n } // to prevent pause icon flickering when autoplayed video ends\n onProgress={onProgress}\n onEnded={onEnded}\n onDuration={onDuration}\n aria-label={ariaLabel}\n previewTabIndex={-1}\n config={{\n file: {\n attributes: {\n pip: isMobile ? 'false' : undefined,\n playsinline: isMobile ? '' : undefined,\n disablepictureinpicture: isMobile ? '' : undefined,\n },\n },\n }}\n />\n {controls === MediaVideoControlsType.Custom && (\n <CustomBarControls\n className={customBarControlsClassName}\n mute={{\n isMuted: muted,\n changeMute: (event: React.MouseEvent) => {\n event.stopPropagation();\n changeMute(muted);\n },\n }}\n elapsedTimePercent={playedPercent}\n type={customControlsType}\n isPaused={!isPlaying}\n onPlayClick={onPlayClick}\n muteButtonShown={muteButtonShown}\n shown={hovered && ((!started && !previewImgUrl) \|\| started)}\n positioning={positioning}\n />\n )}\n </React.Fragment>\n ) : null}\n </div>\n );\n },\n);\n\nfunction getHeight(width: number, ratio: number = 9 / 16): number {\n return width * ratio;\n}\n\nfunction getParentElement(element: HTMLElement): HTMLElement {\n const parentElement = element.parentElement;\n\n if (!parentElement) {\n return element;\n }\n\n return parentElement.offsetWidth ? parentElement : getParentElement(parentElement);\n}\n\nexport default ReactPlayerBlock;\n"]}

package/build/cjs/components/VideoBlock/VideoBlock.css CHANGED Viewed

@@ -22,34 +22,4 @@ unpredictable css rules order in build */
 .pc-VideoBlock__image-wrapper {
   height: 100%;
   width: 100%;
-}
-.pc-VideoBlock__button {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  border: none;
-  outline: none;
-  color: inherit;
-  background: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  width: 64px;
-  height: 64px;
-  color: var(--g-color-base-background);
-  background-color: var(--g-color-base-brand);
-  border-radius: 50%;
-}
-.pc-VideoBlock__button:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-VideoBlock__button:focus:not(:focus-visible) {
-  outline: 0;
-}
-.pc-VideoBlock__icon {
-  margin-left: 1px;
 }

package/build/cjs/components/VideoBlock/VideoBlock.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { AnalyticsEventsBase } from "../../models/common.js";
+import { VideoButtonProps } from "../VideoButton/VideoButton.js";
 export declare const AUTOPLAY_ATTRIBUTES: {
     autoplay: number;
     mute: number;
@@ -13,7 +14,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     attributes?: Record<string, string>;
     className?: string;
     previewImg?: string;
-    playButton?: React.ReactNode;
+    playButton?: React.ReactNode | VideoButtonProps;
     playButtonId?: string;
     height?: number;
     fullscreen?: boolean;

package/build/cjs/components/VideoBlock/VideoBlock.js CHANGED Viewed

@@ -5,7 +5,6 @@ exports.getHeight = getHeight;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce.js"));
 const uuid_1 = require("uuid");
@@ -13,6 +12,7 @@ const useAnalytics_1 = require("../../hooks/useAnalytics.js");
 const common_1 = require("../../models/common.js");
 const utils_1 = require("../../utils/index.js");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image.js"));
+const VideoButton_1 = tslib_1.__importDefault(require("../VideoButton/VideoButton.js"));
 const i18n_1 = require("./i18n/index.js");
 const RECORD_URL = 'https://www.youtube.com/embed/';
 const STREAM_URL = 'https://www.youtube.com/embed/live_stream?channel=';
@@ -44,6 +44,18 @@ function getYoutubeVideoSrc(stream, record) {
 function getHeight(width) {
     return (width / 16) * 9;
 }
+const isReactNode = (value) => {
+    if (value === null || typeof value === 'boolean')
+        return true;
+    if (typeof value === 'string' || typeof value === 'number')
+        return true;
+    if (React.isValidElement(value))
+        return true;
+    if (Array.isArray(value)) {
+        return value.every(isReactNode);
+    }
+    return false;
+};
 const VideoBlock = (props) => {
     const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonId, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
     const handleAnalytics = (0, useAnalytics_1.useAnalytics)(common_1.DefaultEventNames.VideoPreview);
@@ -95,10 +107,14 @@ const VideoBlock = (props) => {
     React.useEffect(() => {
         setHidePreview(false);
     }, [src]);
+    const buttonProps = React.useMemo(() => isReactNode(playButton)
+        ? { customButton: playButton }
+        : playButton, [playButton]);
+    const buttonLabelId = buttonProps?.customButton ? playButtonId : buttonProps?.id || buttonId;
     if (!src) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), style: { height: currentHeight }, ref: ref, children: [iframeContent, previewImg && !hidePreview && !fullscreen && ((0, jsx_runtime_1.jsxs)("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId, children: [(0, jsx_runtime_1.jsx)(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }), playButton || ((0, jsx_runtime_1.jsx)("button", { title: "Play", id: buttonId, className: b('button'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: 24 }) }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), style: { height: currentHeight }, ref: ref, children: [iframeContent, previewImg && !hidePreview && !fullscreen && ((0, jsx_runtime_1.jsxs)("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, role: "button", tabIndex: 0, "aria-labelledby": buttonLabelId, children: [(0, jsx_runtime_1.jsx)(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }), (0, jsx_runtime_1.jsx)(VideoButton_1.default, { id: buttonId, ...buttonProps })] }))] }));
 };
 exports.default = VideoBlock;
 //# sourceMappingURL=VideoBlock.js.map

package/build/cjs/components/VideoBlock/VideoBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoBlock.js","sourceRoot":"../../../../src","sources":["components/VideoBlock/VideoBlock.tsx"],"names":[],"mappings":";;;AAkDA,8BAEC;;;AApDD,qDAA+B;AAE/B,6CAA2C;AAC3C,6CAAqE;AACrE,0EAAuC;AACvC,+BAAkC;AAElC,8DAAsD;AACtD,mDAA2E;AAC3E,gDAAuD;AACvD,sEAAmC;AAEnC,0CAA4B;AAI5B,MAAM,UAAU,GAAG,gCAAgC,CAAC;AACpD,MAAM,UAAU,GAAG,oDAAoD,CAAC;AACxE,MAAM,SAAS,GAAG,mBAAmB,CAAC;AACtC,MAAM,SAAS,GAAG,sBAAsB,CAAC;AACzC,MAAM,cAAc,GAAG,GAAG,CAAC;AAEd,QAAA,mBAAmB,GAAG;IAC/B,QAAQ,EAAE,CAAC;IACX,IAAI,EAAE,CAAC;CACV,CAAC;AACF,MAAM,sBAAsB,GAAG;IAC3B,QAAQ,EAAE,CAAC;CACd,CAAC;AAEF,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;AAE9B,SAAS,kBAAkB,CAAC,MAAe,EAAE,MAAe;IACxD,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,MAAM;QAC/B,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC;QACjC,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IACnC,IAAI,GAAG,CAAC;IAER,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACxB,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACzB,CAAC;IAED,OAAO,GAAG,CAAC;AACf,CAAC;AAED,SAAgB,SAAS,CAAC,KAAa;IACnC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;AAC5B,CAAC;AAkBD,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1C,MAAM,EACF,MAAM,EACN,MAAM,EACN,WAAW,EACX,UAAU,EACV,SAAS,EACT,EAAE,EACF,UAAU,EACV,UAAU,EACV,YAAY,EACZ,MAAM,EACN,UAAU,EACV,eAAe,EACf,QAAQ,EACR,WAAW,GACd,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,IAAA,2BAAY,EAAC,0BAAiB,CAAC,YAAY,CAAC,CAAC;IAErE,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3E,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,IAAI,SAAS,CAAC,CAAC;IAC9E,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,IAAA,SAAM,GAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,IAAA,iBAAS,GAAE,CAAC;IAE7B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IAE9D,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,GAAG,IAAI,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC;gBACD,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;gBACzB,MAAM,YAAY,GAAG,IAAA,2BAAmB,EAAC;oBACrC,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC;oBACrB,GAAG,CAAC,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,2BAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC;iBAC7E,CAAC,CAAC;gBAEH,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;oBAChC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;gBAEH,OAAO,GAAG,CAAC,IAAI,CAAC;YACpB,CAAC;YAAC,MAAM,CAAC;gBACL,OAAO,GAAG,CAAC;YACf,CAAC;QACL,CAAC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,eAAe,CAAC,eAAe,CAAC,CAAC;QAEjC,YAAY,CAAC,IAAI,CAAC,CAAC;QAEnB,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC,CAAC;IAC3D,CAAC,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAEvC,MAAM,EAAC,SAAS,EAAE,gBAAgB,EAAC,GAAG,IAAA,yBAAiB,EAAC,cAAc,CAAC,CAAC;IAExE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,UAAU,GAAG,IAAA,kBAAQ,EAAC,GAAG,EAAE;YAC7B,gBAAgB,CACZ,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAC3E,CAAC;QACN,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,UAAU,EAAE,CAAC;QACb,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAC/D,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QACrD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,CACH,mCACI,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,SAAS,EACd,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,IAAA,WAAI,EAAC,cAAc,CAAC,EAC3B,WAAW,EAAC,GAAG,EACf,eAAe,EAAE,IAAI,EACrB,SAAS,EAAC,IAAI,EACd,KAAK,EAAC,mIAAmI,EACzI,OAAO,EAAC,MAAM,GAChB,CACL,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAExB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,IAAI,CAAC,GAAG,EAAE,CAAC;QACP,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,aAAa,EAAC,EAAE,GAAG,EAAE,GAAG,aACvE,aAAa,EACb,UAAU,IAAI,CAAC,WAAW,IAAI,CAAC,UAAU,IAAI,CAC1C,iCACI,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EACvB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,gBAAgB,EAC3B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,qBACM,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,aAErD,uBAAC,eAAK,IACF,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,kBAAkB,EAAE,CAAC,CAAC,eAAe,CAAC,EACtC,MAAM,EAAE,WAAW,GACrB,EACD,UAAU,IAAI,CACX,mCAAQ,KAAK,EAAC,MAAM,EAAC,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACrD,uBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,gBAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,GACnD,CACZ,IACC,CACT,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {PlayFill} from '@gravity-ui/icons';\nimport {Icon, useActionHandlers, useUniqId} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport {v4 as uuidv4} from 'uuid';\n\nimport {useAnalytics} from '../../hooks/useAnalytics';\nimport {AnalyticsEventsBase, DefaultEventNames} from '../../models/common';\nimport {block, getPageSearchParams} from '../../utils';\nimport Image from '../Image/Image';\n\nimport {i18n} from './i18n';\n\nimport './VideoBlock.scss';\n\nconst RECORD_URL = 'https://www.youtube.com/embed/';\nconst STREAM_URL = 'https://www.youtube.com/embed/live_stream?channel=';\nconst RECORD_RE = /[0-9A-Za-z_-]{11}/;\nconst STREAM_RE = /[0-9A-Za-z_-]{23,25}/;\nconst AUTOPLAY_DELAY = 300;\n\nexport const AUTOPLAY_ATTRIBUTES = {\n autoplay: 1,\n mute: 1,\n};\nconst NO_AUTOPLAY_ATTRIBUTES = {\n autoplay: 0,\n};\n\nconst b = block('VideoBlock');\n\nfunction getYoutubeVideoSrc(stream?: string, record?: string) {\n if (!stream && !record) {\n return null;\n }\n\n const [videoLink, url, re] = stream\n ? [stream, STREAM_URL, STREAM_RE]\n : [record, RECORD_URL, RECORD_RE];\n const match = videoLink?.match(re);\n let src;\n\n if (match && match.length) {\n src = url + match[0];\n }\n\n return src;\n}\n\nexport function getHeight(width: number): number {\n return (width / 16) * 9;\n}\n\nexport interface VideoBlockProps extends AnalyticsEventsBase {\n id?: string;\n stream?: string;\n record?: string;\n videoIframe?: string;\n attributes?: Record<string, string>;\n className?: string;\n previewImg?: string;\n playButton?: React.ReactNode;\n playButtonId?: string;\n height?: number;\n fullscreen?: boolean;\n autoplay?: boolean;\n onImageLoad?: () => void;\n}\n\nconst VideoBlock = (props: VideoBlockProps) => {\n const {\n stream,\n record,\n videoIframe,\n attributes,\n className,\n id,\n previewImg,\n playButton,\n playButtonId,\n height,\n fullscreen,\n analyticsEvents,\n autoplay,\n onImageLoad,\n } = props;\n const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);\n\n const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);\n const ref = React.useRef<HTMLDivElement>(null);\n const [hidePreview, setHidePreview] = React.useState(false);\n const [currentHeight, setCurrentHeight] = React.useState(height \|\| undefined);\n const fullId = React.useMemo(() => id \|\| uuidv4(), [id]);\n const buttonId = useUniqId();\n\n const [isPlaying, setIsPlaying] = React.useState(!previewImg);\n\n const iframeSrc = React.useMemo(() => {\n if (src && isPlaying) {\n try {\n const url = new URL(src);\n const searchParams = getPageSearchParams({\n ...(attributes \|\| {}),\n ...(previewImg \|\| autoplay ? AUTOPLAY_ATTRIBUTES : NO_AUTOPLAY_ATTRIBUTES),\n });\n\n searchParams.forEach((value, key) => {\n url.searchParams.set(key, value);\n });\n\n return url.href;\n } catch {\n return src;\n }\n }\n\n return undefined;\n }, [attributes, autoplay, isPlaying, previewImg, src]);\n\n const onPreviewClick = React.useCallback(() => {\n handleAnalytics(analyticsEvents);\n\n setIsPlaying(true);\n\n setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);\n }, [handleAnalytics, analyticsEvents]);\n\n const {onKeyDown: onPreviewKeyDown} = useActionHandlers(onPreviewClick);\n\n React.useEffect(() => {\n const updateSize = debounce(() => {\n setCurrentHeight(\n ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined,\n );\n }, 100);\n\n updateSize();\n window.addEventListener('resize', updateSize, {passive: true});\n return () => {\n window.removeEventListener('resize', updateSize);\n };\n }, [height]);\n\n const iframeContent = React.useMemo(() => {\n return (\n <iframe\n id={fullId}\n src={iframeSrc}\n width=\"100%\"\n height=\"100%\"\n title={i18n('iframe-title')}\n frameBorder=\"0\"\n allowFullScreen={true}\n scrolling=\"no\"\n allow=\"autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock\"\n loading=\"lazy\"\n />\n );\n }, [fullId, iframeSrc]);\n\n React.useEffect(() => {\n setHidePreview(false);\n }, [src]);\n\n if (!src) {\n return null;\n }\n\n return (\n <div className={b(null, className)} style={{height: currentHeight}} ref={ref}>\n {iframeContent}\n {previewImg && !hidePreview && !fullscreen && (\n <div\n className={b('preview')}\n onClick={onPreviewClick}\n onKeyDown={onPreviewKeyDown}\n role=\"button\"\n tabIndex={0}\n aria-labelledby={playButton ? playButtonId : buttonId}\n >\n <Image\n src={previewImg}\n className={b('image')}\n containerClassName={b('image-wrapper')}\n onLoad={onImageLoad}\n />\n {playButton \|\| (\n <button title=\"Play\" id={buttonId} className={b('button')}>\n <Icon className={b('icon')} data={PlayFill} size={24} />\n </button>\n )}\n </div>\n )}\n </div>\n );\n};\n\nexport default VideoBlock;\n"]}
1	+ {"version":3,"file":"VideoBlock.js","sourceRoot":"../../../../src","sources":["components/VideoBlock/VideoBlock.tsx"],"names":[],"mappings":";;;AAkDA,8BAEC;;;AApDD,qDAA+B;AAE/B,6CAA+D;AAC/D,0EAAuC;AACvC,+BAAkC;AAElC,8DAAsD;AACtD,mDAA2E;AAC3E,gDAAuD;AACvD,sEAAmC;AACnC,wFAAyE;AAEzE,0CAA4B;AAI5B,MAAM,UAAU,GAAG,gCAAgC,CAAC;AACpD,MAAM,UAAU,GAAG,oDAAoD,CAAC;AACxE,MAAM,SAAS,GAAG,mBAAmB,CAAC;AACtC,MAAM,SAAS,GAAG,sBAAsB,CAAC;AACzC,MAAM,cAAc,GAAG,GAAG,CAAC;AAEd,QAAA,mBAAmB,GAAG;IAC/B,QAAQ,EAAE,CAAC;IACX,IAAI,EAAE,CAAC;CACV,CAAC;AACF,MAAM,sBAAsB,GAAG;IAC3B,QAAQ,EAAE,CAAC;CACd,CAAC;AAEF,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;AAE9B,SAAS,kBAAkB,CAAC,MAAe,EAAE,MAAe;IACxD,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,MAAM;QAC/B,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC;QACjC,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IACnC,IAAI,GAAG,CAAC;IAER,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACxB,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACzB,CAAC;IAED,OAAO,GAAG,CAAC;AACf,CAAC;AAED,SAAgB,SAAS,CAAC,KAAa;IACnC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;AAC5B,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,KAAyC,EAAE,EAAE;IAC9D,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IAE9D,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAExE,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAE7C,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AAkBF,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1C,MAAM,EACF,MAAM,EACN,MAAM,EACN,WAAW,EACX,UAAU,EACV,SAAS,EACT,EAAE,EACF,UAAU,EACV,UAAU,EACV,YAAY,EACZ,MAAM,EACN,UAAU,EACV,eAAe,EACf,QAAQ,EACR,WAAW,GACd,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,IAAA,2BAAY,EAAC,0BAAiB,CAAC,YAAY,CAAC,CAAC;IAErE,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3E,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,IAAI,SAAS,CAAC,CAAC;IAC9E,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,IAAA,SAAM,GAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,IAAA,iBAAS,GAAE,CAAC;IAE7B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IAE9D,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,GAAG,IAAI,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC;gBACD,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;gBACzB,MAAM,YAAY,GAAG,IAAA,2BAAmB,EAAC;oBACrC,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC;oBACrB,GAAG,CAAC,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,2BAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC;iBAC7E,CAAC,CAAC;gBAEH,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;oBAChC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;gBAEH,OAAO,GAAG,CAAC,IAAI,CAAC;YACpB,CAAC;YAAC,MAAM,CAAC;gBACL,OAAO,GAAG,CAAC;YACf,CAAC;QACL,CAAC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,eAAe,CAAC,eAAe,CAAC,CAAC;QAEjC,YAAY,CAAC,IAAI,CAAC,CAAC;QAEnB,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC,CAAC;IAC3D,CAAC,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAEvC,MAAM,EAAC,SAAS,EAAE,gBAAgB,EAAC,GAAG,IAAA,yBAAiB,EAAC,cAAc,CAAC,CAAC;IAExE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,UAAU,GAAG,IAAA,kBAAQ,EAAC,GAAG,EAAE;YAC7B,gBAAgB,CACZ,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAC3E,CAAC;QACN,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,UAAU,EAAE,CAAC;QACb,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAC/D,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QACrD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,CACH,mCACI,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,SAAS,EACd,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,IAAA,WAAI,EAAC,cAAc,CAAC,EAC3B,WAAW,EAAC,GAAG,EACf,eAAe,EAAE,IAAI,EACrB,SAAS,EAAC,IAAI,EACd,KAAK,EAAC,mIAAmI,EACzI,OAAO,EAAC,MAAM,GAChB,CACL,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAExB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC7B,GAAG,EAAE,CACD,WAAW,CAAC,UAAU,CAAC;QACnB,CAAC,CAAC,EAAC,YAAY,EAAE,UAA6B,EAAC;QAC/C,CAAC,CAAE,UAA2C,EACtD,CAAC,UAAU,CAAC,CACf,CAAC;IACF,MAAM,aAAa,GAAG,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,IAAI,QAAQ,CAAC;IAE7F,IAAI,CAAC,GAAG,EAAE,CAAC;QACP,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,aAAa,EAAC,EAAE,GAAG,EAAE,GAAG,aACvE,aAAa,EACb,UAAU,IAAI,CAAC,WAAW,IAAI,CAAC,UAAU,IAAI,CAC1C,iCACI,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EACvB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,gBAAgB,EAC3B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,qBACM,aAAa,aAE9B,uBAAC,eAAK,IACF,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,kBAAkB,EAAE,CAAC,CAAC,eAAe,CAAC,EACtC,MAAM,EAAE,WAAW,GACrB,EACF,uBAAC,qBAAW,IAAC,EAAE,EAAE,QAAQ,KAAM,WAAW,GAAI,IAC5C,CACT,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {useActionHandlers, useUniqId} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport {v4 as uuidv4} from 'uuid';\n\nimport {useAnalytics} from '../../hooks/useAnalytics';\nimport {AnalyticsEventsBase, DefaultEventNames} from '../../models/common';\nimport {block, getPageSearchParams} from '../../utils';\nimport Image from '../Image/Image';\nimport VideoButton, {VideoButtonProps} from '../VideoButton/VideoButton';\n\nimport {i18n} from './i18n';\n\nimport './VideoBlock.scss';\n\nconst RECORD_URL = 'https://www.youtube.com/embed/';\nconst STREAM_URL = 'https://www.youtube.com/embed/live_stream?channel=';\nconst RECORD_RE = /[0-9A-Za-z_-]{11}/;\nconst STREAM_RE = /[0-9A-Za-z_-]{23,25}/;\nconst AUTOPLAY_DELAY = 300;\n\nexport const AUTOPLAY_ATTRIBUTES = {\n autoplay: 1,\n mute: 1,\n};\nconst NO_AUTOPLAY_ATTRIBUTES = {\n autoplay: 0,\n};\n\nconst b = block('VideoBlock');\n\nfunction getYoutubeVideoSrc(stream?: string, record?: string) {\n if (!stream && !record) {\n return null;\n }\n\n const [videoLink, url, re] = stream\n ? [stream, STREAM_URL, STREAM_RE]\n : [record, RECORD_URL, RECORD_RE];\n const match = videoLink?.match(re);\n let src;\n\n if (match && match.length) {\n src = url + match[0];\n }\n\n return src;\n}\n\nexport function getHeight(width: number): number {\n return (width / 16) * 9;\n}\n\nconst isReactNode = (value: React.ReactNode \| VideoButtonProps) => {\n if (value === null \|\| typeof value === 'boolean') return true;\n\n if (typeof value === 'string' \|\| typeof value === 'number') return true;\n\n if (React.isValidElement(value)) return true;\n\n if (Array.isArray(value)) {\n return value.every(isReactNode);\n }\n\n return false;\n};\n\nexport interface VideoBlockProps extends AnalyticsEventsBase {\n id?: string;\n stream?: string;\n record?: string;\n videoIframe?: string;\n attributes?: Record<string, string>;\n className?: string;\n previewImg?: string;\n playButton?: React.ReactNode \| VideoButtonProps;\n playButtonId?: string;\n height?: number;\n fullscreen?: boolean;\n autoplay?: boolean;\n onImageLoad?: () => void;\n}\n\nconst VideoBlock = (props: VideoBlockProps) => {\n const {\n stream,\n record,\n videoIframe,\n attributes,\n className,\n id,\n previewImg,\n playButton,\n playButtonId,\n height,\n fullscreen,\n analyticsEvents,\n autoplay,\n onImageLoad,\n } = props;\n const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);\n\n const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);\n const ref = React.useRef<HTMLDivElement>(null);\n const [hidePreview, setHidePreview] = React.useState(false);\n const [currentHeight, setCurrentHeight] = React.useState(height \|\| undefined);\n const fullId = React.useMemo(() => id \|\| uuidv4(), [id]);\n const buttonId = useUniqId();\n\n const [isPlaying, setIsPlaying] = React.useState(!previewImg);\n\n const iframeSrc = React.useMemo(() => {\n if (src && isPlaying) {\n try {\n const url = new URL(src);\n const searchParams = getPageSearchParams({\n ...(attributes \|\| {}),\n ...(previewImg \|\| autoplay ? AUTOPLAY_ATTRIBUTES : NO_AUTOPLAY_ATTRIBUTES),\n });\n\n searchParams.forEach((value, key) => {\n url.searchParams.set(key, value);\n });\n\n return url.href;\n } catch {\n return src;\n }\n }\n\n return undefined;\n }, [attributes, autoplay, isPlaying, previewImg, src]);\n\n const onPreviewClick = React.useCallback(() => {\n handleAnalytics(analyticsEvents);\n\n setIsPlaying(true);\n\n setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);\n }, [handleAnalytics, analyticsEvents]);\n\n const {onKeyDown: onPreviewKeyDown} = useActionHandlers(onPreviewClick);\n\n React.useEffect(() => {\n const updateSize = debounce(() => {\n setCurrentHeight(\n ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined,\n );\n }, 100);\n\n updateSize();\n window.addEventListener('resize', updateSize, {passive: true});\n return () => {\n window.removeEventListener('resize', updateSize);\n };\n }, [height]);\n\n const iframeContent = React.useMemo(() => {\n return (\n <iframe\n id={fullId}\n src={iframeSrc}\n width=\"100%\"\n height=\"100%\"\n title={i18n('iframe-title')}\n frameBorder=\"0\"\n allowFullScreen={true}\n scrolling=\"no\"\n allow=\"autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock\"\n loading=\"lazy\"\n />\n );\n }, [fullId, iframeSrc]);\n\n React.useEffect(() => {\n setHidePreview(false);\n }, [src]);\n\n const buttonProps = React.useMemo(\n () =>\n isReactNode(playButton)\n ? {customButton: playButton as React.ReactNode}\n : (playButton as VideoButtonProps \| undefined),\n [playButton],\n );\n const buttonLabelId = buttonProps?.customButton ? playButtonId : buttonProps?.id \|\| buttonId;\n\n if (!src) {\n return null;\n }\n\n return (\n <div className={b(null, className)} style={{height: currentHeight}} ref={ref}>\n {iframeContent}\n {previewImg && !hidePreview && !fullscreen && (\n <div\n className={b('preview')}\n onClick={onPreviewClick}\n onKeyDown={onPreviewKeyDown}\n role=\"button\"\n tabIndex={0}\n aria-labelledby={buttonLabelId}\n >\n <Image\n src={previewImg}\n className={b('image')}\n containerClassName={b('image-wrapper')}\n onLoad={onImageLoad}\n />\n <VideoButton id={buttonId} {...buttonProps} />\n </div>\n )}\n </div>\n );\n};\n\nexport default VideoBlock;\n"]}

package/build/cjs/components/VideoButton/VideoButton.css ADDED Viewed

@@ -0,0 +1,64 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-video-button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  transition: color 0.4s, background-color 0.4s;
+}
+.pc-video-button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-video-button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-video-button_theme_blue {
+  color: var(--g-color-base-background);
+  background-color: var(--g-color-base-brand);
+}
+.pc-video-button_theme_blue:hover {
+  background-color: var(--g-color-base-brand-hover);
+}
+.pc-video-button_theme_grey {
+  color: var(--pc-text-header-color);
+  background-color: #eff2f8;
+}
+.pc-video-button_theme_custom {
+  color: var(--pc-video-button-triangle-color);
+  background-color: var(--pc-video-button-circle-color);
+}
+.pc-video-button_theme_custom:hover {
+  color: var(--pc-video-button-triangle-hover-color, var(--pc-video-button-triangle-color));
+  background-color: var(--pc-video-button-circle-hover-color, var(--pc-video-button-circle-color));
+}
+.pc-video-button_text {
+  padding: 16px 32px;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  width: auto;
+  height: auto;
+}
+.pc-video-button__icon {
+  margin-left: 1px;
+}
+@media only screen and (max-width: 577px) {
+  .pc-video-button_text {
+    font-size: 20px;
+    line-height: 24px;
+  }
+}