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

@gravity-ui/page-constructor 8.14.2 → 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 (36) hide show

package/build/cjs/models/constructor-items/common.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"common.js","sourceRoot":"../../../../src","sources":["models/constructor-items/common.ts"],"names":[],"mappings":";;;AAQA,QAAQ;AACR,IAAY,UAGX;AAHD,WAAY,UAAU;IAClB,+BAAiB,CAAA;IACjB,2BAAa,CAAA;AACjB,CAAC,EAHW,UAAU,0BAAV,UAAU,QAGrB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,+CAA2B,CAAA;IAC3B,yCAAqB,CAAA;AACzB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED,IAAY,eAMX;AAND,WAAY,eAAe;IACvB,gCAAa,CAAA;IACb,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,oCAAiB,CAAA;IACjB,8BAAW,CAAA;AACf,CAAC,EANW,eAAe,+BAAf,eAAe,QAM1B;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,+BAAa,CAAA;AACjB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,iCAAa,CAAA;IACb,iCAAa,CAAA;AACjB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,yDAAmC,CAAA;IACnC,oEAA8C,CAAA;AAClD,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,+BAIX;AAJD,WAAY,+BAA+B;IACvC,gDAAa,CAAA;IACb,kDAAe,CAAA;IACf,oDAAiB,CAAA;AACrB,CAAC,EAJW,+BAA+B,+CAA/B,+BAA+B,QAI1C;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,mCAAiB,CAAA;AACrB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,sBAGX;AAHD,WAAY,sBAAsB;IAC9B,6CAAmB,CAAA;IACnB,2CAAiB,CAAA;AACrB,CAAC,EAHW,sBAAsB,sCAAtB,sBAAsB,QAGjC;AAED,IAAY,SAGX;AAHD,WAAY,SAAS;IACjB,gCAAmB,CAAA;IACnB,6CAAgC,CAAA;AACpC,CAAC,EAHW,SAAS,yBAAT,SAAS,QAGpB;AAuED,SAAS;AAET,IAAY,MAIX;AAJD,WAAY,MAAM;IACd,6BAAmB,CAAA;IACnB,2BAAiB,CAAA;IACjB,2BAAiB,CAAA;AACrB,CAAC,EAJW,MAAM,sBAAN,MAAM,QAIjB","sourcesContent":["import * as React from 'react';\n\nimport * as icons from '@gravity-ui/icons';\nimport {ButtonView, IconData, ButtonProps as UikitButtonProps} from '@gravity-ui/uikit';\n\nimport {ThemeSupporting} from '../../utils';\nimport {AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps} from '../common';\n\n// enums\nexport enum AuthorType {\n Column = 'column',\n Line = 'line',\n}\n\nexport enum PriceDetailsType {\n MARKED_LIST = 'marked-list',\n SETTINGS = 'settings',\n}\n\nexport enum PriceLabelColor {\n BLUE = 'blue',\n GREEN = 'green',\n YELLOW = 'yellow',\n PURPLE = 'purple',\n RED = 'red',\n}\n\nexport enum PlayButtonType {\n Default = 'default',\n Text = 'text',\n}\n\nexport enum PlayButtonThemes {\n Blue = 'blue',\n Grey = 'grey',\n}\n\nexport enum CustomControlsType {\n WithMuteButton = 'with-mute-button',\n WithPlayPauseButton = 'with-play-pause-button',\n}\n\nexport enum CustomControlsButtonPositioning {\n Left = 'left',\n Right = 'right',\n Center = 'center',\n}\n\nexport enum MediaVideoType {\n Default = 'default',\n Player = 'player',\n}\n\nexport enum MediaVideoControlsType {\n Default = 'default',\n Custom = 'custom',\n}\n\nexport enum QuoteType {\n Chevron = 'chevron', // « »\n EnglishDouble = 'english-double', // “ ”\n}\n\n// types\nexport type TextTheme = 'light' \| 'dark';\nexport type TextSize = 'xs' \| 's' \| 'sm' \| 'm' \| 'l';\nexport type DividerSize = '0' \| 'xxs' \| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| 'xxxl';\nexport type HeaderWidth = 's' \| 'm' \| 'l';\nexport type HeaderImageSize = 's' \| 'm';\nexport type HeaderOffset = 'default' \| 'large';\nexport type Justify = 'start' \| 'center' \| 'end';\nexport type ColumnsCount = 1 \| 2 \| 3 \| 4;\nexport type LegendTableMarkerType = 'disk' \| 'tick';\nexport type LinkTheme = 'file-link' \| 'normal' \| 'back' \| 'underline';\nexport type MediaDirection = 'media-content' \| 'content-media';\nexport type PriceDescriptionColor = 'cornflower' \| 'black';\nexport type ContentSize = 's' \| 'm' \| 'l' \| 'xl';\nexport type ContentTextSize = 's' \| 'm' \| 'l';\nexport type ContentTheme = 'default' \| 'dark' \| 'light';\nexport type FileLinkType = 'vertical' \| 'horizontal';\nexport type ImageCardMargins = 's' \| 'm';\nexport type LayoutItemContentMargin = 'm' \| 'l';\nexport type GravityIconProps = string \| {name: keyof typeof icons; color: 'brand' \| 'text-color'};\n\n// modifiers\nexport interface Themable {\n theme?: TextTheme;\n}\n\nexport interface Justifyable {\n justify?: Justify;\n}\n\nexport interface Stylable {\n className?: string;\n}\n\nexport interface Animatable {\n animated?: boolean;\n}\n\nexport interface Tabbable {\n tabIndex?: number;\n}\n\nexport interface Roleable {\n role?: React.AriaRole;\n}\n\nexport interface AriaProps {\n ariaProps?: React.AriaAttributes;\n}\n\n//common props\nexport interface Background {\n image?: string;\n color?: string;\n}\n\nexport interface AnchorProps {\n text: string;\n url: string;\n}\n\n/*\n @deprecated Component VideoBlock will be deleted, which uses this logic\n /\ninterface LoopProps {\n start: number;\n end?: number;\n}\n\n// images\n\nexport enum Device {\n Desktop = 'desktop',\n Mobile = 'mobile',\n Tablet = 'tablet',\n}\n\nexport interface ImageInfoProps\n extends Pick<\n React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,\n 'aria-describedby' \| 'loading'\n >,\n ImageDevicesVisibleProps {\n alt?: string;\n fetchPriority?: 'high' \| 'low' \| 'auto';\n disableCompress?: boolean;\n}\n\nexport interface ImageObjectProps extends ImageInfoProps {\n src: string;\n}\n\nexport interface ImageDeviceProps extends ImageInfoProps {\n [Device.Desktop]: string;\n [Device.Mobile]: string;\n [Device.Tablet]?: string;\n}\n\nexport interface ImageDevicesVisibleProps {\n hide?: boolean \| Partial<Record<Device, boolean>>;\n}\n\nexport type ImageProps = string \| ImageObjectProps \| ImageDeviceProps;\nexport type ThemedImage = ThemeSupporting<ImageProps>;\n\nexport interface BackgroundImageProps\n extends React.HTMLProps<HTMLDivElement>,\n Partial<ImageDeviceProps>,\n Partial<ImageObjectProps>,\n QAProps,\n ImageDevicesVisibleProps {\n style?: React.CSSProperties;\n imageClassName?: string;\n}\n\n//components props\nexport interface MediaVideoProps extends AnalyticsEventsBase {\n src: string[];\n type?: MediaVideoType;\n loop?: LoopProps \| boolean;\n muted?: boolean;\n autoplay?: boolean;\n elapsedTime?: number;\n playButton?: PlayButtonProps;\n controls?: MediaVideoControlsType;\n customControlsOptions?: CustomControlsOptions;\n ariaLabel?: string;\n contain?: boolean;\n onVideoEnd?: () => void;\n ref?: React.Ref<HTMLVideoElement \| null>;\n}\n\n// links\nexport interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {\n url: string;\n urlTitle?: string;\n text?: string;\n textSize?: TextSize;\n theme?: LinkTheme;\n colorTheme?: TextTheme;\n arrow?: boolean;\n target?: string;\n extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\nexport interface FileLinkProps extends ClassNameProps, Tabbable {\n href: string;\n text: React.ReactNode;\n type?: FileLinkType;\n textSize?: TextSize;\n theme?: ContentTheme;\n urlTitle?: string;\n onClick?: () => void;\n extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\n// buttons\nexport type ButtonTheme =\n \| ButtonView\n \| 'github'\n \| 'app-store'\n \| 'google-play'\n \| 'scale'\n \| 'monochrome';\n\nexport interface ButtonProps extends AnalyticsEventsBase {\n text: string;\n url: string;\n urlTitle?: string;\n primary?: boolean;\n theme?: ButtonTheme;\n img?: ButtonImageProps \| string;\n target?: string;\n size?: UikitButtonProps['size'];\n width?: UikitButtonProps['width'];\n extraProps?: UikitButtonProps['extraProps'];\n}\n\nexport type ButtonImagePosition = 'left' \| 'right';\n\nexport interface ButtonImageProps {\n url?: string;\n position?: ButtonImagePosition;\n alt?: string;\n iconData?: IconData;\n iconSize?: number;\n className?: string;\n}\n\nexport interface CustomControlsOptions {\n type?: CustomControlsType;\n muteButtonShown?: boolean;\n positioning?: CustomControlsButtonPositioning;\n}\n\nexport interface PlayButtonProps extends ClassNameProps {\n type?: PlayButtonType;\n theme?: PlayButtonThemes;\n text?: string;\n}\n\nexport type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;\n\nexport interface MediaComponentVideoProps extends AnalyticsEventsBase {\n video: MediaVideoProps;\n height?: number;\n ratio?: number \| 'auto';\n previewImg?: string;\n}\n\nexport interface MediaComponentVideoIframeProps {\n videoIframe: string;\n}\n\nexport interface MediaComponentYoutubeProps {\n youtube: string;\n previewImg?: string;\n fullscreen?: boolean;\n}\n\nexport interface MediaComponentImageProps {\n image: ImageProps \| ImageProps[] \| ImageDeviceProps;\n video?: MediaVideoProps;\n parallax?: boolean;\n height?: number;\n disableImageSliderForArrayInput?: boolean;\n}\n\nexport interface MediaComponentDataLensProps {\n dataLens: DataLensProps;\n}\n\nexport interface MediaComponentIframeProps {\n iframe: IframeProps;\n margins?: boolean;\n}\n\nexport interface MediaProps\n extends Animatable,\n Partial<MediaComponentDataLensProps>,\n Partial<MediaComponentYoutubeProps>,\n Partial<MediaComponentVideoIframeProps>,\n Partial<MediaComponentImageProps>,\n Partial<MediaComponentIframeProps>,\n Partial<MediaComponentVideoProps> {\n color?: string;\n videoMicrodata?: {\n name?: string;\n description?: string;\n duration?: string;\n uploadDate?: string;\n contentUrl?: string;\n thumbnailUrl?: string;\n };\n}\n\nexport interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {\n fullWidthMedia?: boolean;\n className?: string;\n mediaClassName?: string;\n}\n\nexport type Coordinate = [number, number];\n\nexport interface MapBaseProps {\n zoom?: number;\n className?: string;\n forceAspectRatio?: boolean;\n}\n\nexport interface GMapProps extends MapBaseProps {\n address: string;\n}\n\nexport type YMapMargin =\n \| number\n \| [vertical: number, horizontal: number]\n \| [top: number, right: number, bottom: number, left: number];\n\nexport interface YMapCopyrightPosition {\n top?: number;\n right?: number;\n bottom?: number;\n left?: number;\n}\n\nexport interface YMapProps extends MapBaseProps {\n markers: YMapMarker[];\n disableControls?: boolean;\n disableBalloons?: boolean;\n areaMargin?: YMapMargin;\n copyrightPosition?: YMapCopyrightPosition;\n id: string;\n}\n\nexport interface YMapMarker {\n address?: string;\n coordinate?: Coordinate;\n label?: YMapMarkerLabel;\n}\n\nexport interface YMapMarkerLabel {\n iconCaption?: string;\n iconContent?: string;\n iconColor?: string;\n iconImageHref?: string;\n iconImageSize?: [number, number];\n iconImageOffset?: [number, number];\n iconImageClipRect?: [[number, number], [number, number]];\n iconLayout?: 'default#image';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n iconShape?: Record<string, any>;\n preset?: string;\n}\n\nexport interface YMapMarkerPrivate extends YMapMarker {\n label?: YMapMarkerLabelPrivate;\n}\n\nexport interface YMapMarkerLabelPrivate extends YMapMarkerLabel {\n cursor?: string;\n interactivityModel?: string;\n}\n\nexport type MapProps = GMapProps \| YMapProps;\n\nexport type ThemedMediaProps = ThemeSupporting<MediaProps>;\n\nexport interface DataLensObjectProps {\n id: string;\n theme: 'dark' \| 'light';\n}\n\nexport interface IframeProps {\n src: string;\n width?: number;\n height?: number;\n title?: string;\n name?: string;\n}\n\nexport type DataLensProps = string \| DataLensObjectProps;\n\nexport interface AuthorItem {\n firstName: string;\n secondName: string;\n description?: string;\n avatar?: ThemeSupporting<ImageProps> \| JSX.Element;\n}\n\nexport interface HeaderBreadCrumbsProps extends ClassNameProps, QAProps {\n items: {\n url: string;\n text: React.ReactNode;\n }[];\n theme?: TextTheme;\n analyticsEvents?: AnalyticsEventsProp;\n}\n\nexport interface TitleItemProps extends Justifyable, TitleItemBaseProps, AnalyticsEventsBase {\n navTitle?: string;\n anchor?: string;\n}\n\nexport interface TitleItemBaseProps {\n text: string;\n textSize?: TextSize;\n url?: string;\n urlTitle?: string;\n custom?: string \| React.ReactNode;\n onClick?: () => void;\n}\n\nexport type MediaView = 'fit' \| 'full';\n\n// card\nexport type MediaBorder = 'shadow' \| 'line' \| 'none';\nexport type CardBorder = MediaBorder;\nexport type ControlPosition = 'content' \| 'footer';\n\nexport interface CardBaseProps {\n border?: CardBorder;\n}\n\nexport type CardLayoutProps = {\n controlPosition?: ControlPosition;\n};\n\n//price\nexport interface PriceDescriptionProps {\n title: string;\n detailedTitle?: string;\n description: string;\n label?: {\n color: PriceLabelColor;\n text?: string;\n size?: TextSize;\n };\n}\n\nexport interface PriceDetailsSettingsProps {\n title: string;\n description: string;\n}\n\nexport interface PriceDetailsListProps {\n text: string;\n}\n\nexport interface PriceDetailsProps {\n items?: PriceDetailsSettingsProps[] \| PriceDetailsListProps[];\n}\n\nexport interface PriceItemProps\n extends PriceDetailsProps,\n PriceDescriptionProps,\n AnalyticsEventsBase {}\n\nexport interface PriceFoldableDetailsProps {\n title: string;\n size?: TextSize;\n titleColor?: PriceDescriptionColor;\n}\n\n/* @deprecated /\nexport interface PriceDetailedProps extends CardBaseProps {\n items: PriceItemProps[];\n description?: {\n titleSize?: TextSize;\n descriptionSize?: TextSize;\n titleColor?: PriceDescriptionColor;\n };\n details?: {\n titleSize?: TextSize;\n descriptionSize?: TextSize;\n };\n priceType?: PriceDetailsType;\n numberGroupItems?: 3 \| 4 \| 5;\n isCombined?: boolean;\n useMixedView?: boolean;\n foldable?: PriceFoldableDetailsProps;\n labelsDefaultText?: Record<PriceLabelColor, string>;\n}\n\nexport interface AuthorProps extends QAProps {\n author: AuthorItem;\n className?: string;\n authorContainerClassName?: string;\n type?: AuthorType;\n theme?: ContentTheme;\n}\n\nexport interface TitleProps {\n title?: TitleItemProps \| string;\n subtitle?: string;\n}\n\nexport interface YandexFormProps extends AnalyticsEventsBase {\n id: number \| string;\n containerId?: string;\n theme?: string;\n className?: string;\n headerHeight?: number;\n customFormOrigin?: string;\n customFormSection?: string;\n params?: {[key: string]: string};\n\n onSubmit?: () => void;\n onLoad?: () => void;\n}\n\nexport interface WithBorder {\n border?: MediaBorder;\n /\n @deprecated use custom class for media-component\n */\n disableShadow?: boolean;\n}\n"]}
1	+ {"version":3,"file":"common.js","sourceRoot":"../../../../src","sources":["models/constructor-items/common.ts"],"names":[],"mappings":";;;AAQA,QAAQ;AACR,IAAY,UAGX;AAHD,WAAY,UAAU;IAClB,+BAAiB,CAAA;IACjB,2BAAa,CAAA;AACjB,CAAC,EAHW,UAAU,0BAAV,UAAU,QAGrB;AAED,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,+CAA2B,CAAA;IAC3B,yCAAqB,CAAA;AACzB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED,IAAY,eAMX;AAND,WAAY,eAAe;IACvB,gCAAa,CAAA;IACb,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,oCAAiB,CAAA;IACjB,8BAAW,CAAA;AACf,CAAC,EANW,eAAe,+BAAf,eAAe,QAM1B;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,+BAAa,CAAA;AACjB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,iCAAa,CAAA;IACb,iCAAa,CAAA;IACb,qCAAiB,CAAA;AACrB,CAAC,EAJW,gBAAgB,gCAAhB,gBAAgB,QAI3B;AAED,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,yDAAmC,CAAA;IACnC,oEAA8C,CAAA;AAClD,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,+BAIX;AAJD,WAAY,+BAA+B;IACvC,gDAAa,CAAA;IACb,kDAAe,CAAA;IACf,oDAAiB,CAAA;AACrB,CAAC,EAJW,+BAA+B,+CAA/B,+BAA+B,QAI1C;AAED,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,mCAAiB,CAAA;AACrB,CAAC,EAHW,cAAc,8BAAd,cAAc,QAGzB;AAED,IAAY,sBAGX;AAHD,WAAY,sBAAsB;IAC9B,6CAAmB,CAAA;IACnB,2CAAiB,CAAA;AACrB,CAAC,EAHW,sBAAsB,sCAAtB,sBAAsB,QAGjC;AAED,IAAY,SAGX;AAHD,WAAY,SAAS;IACjB,gCAAmB,CAAA;IACnB,6CAAgC,CAAA;AACpC,CAAC,EAHW,SAAS,yBAAT,SAAS,QAGpB;AAuED,SAAS;AAET,IAAY,MAIX;AAJD,WAAY,MAAM;IACd,6BAAmB,CAAA;IACnB,2BAAiB,CAAA;IACjB,2BAAiB,CAAA;AACrB,CAAC,EAJW,MAAM,sBAAN,MAAM,QAIjB","sourcesContent":["import * as React from 'react';\n\nimport * as icons from '@gravity-ui/icons';\nimport {ButtonView, IconData, ButtonProps as UikitButtonProps} from '@gravity-ui/uikit';\n\nimport {ThemeSupporting} from '../../utils';\nimport {AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps} from '../common';\n\n// enums\nexport enum AuthorType {\n Column = 'column',\n Line = 'line',\n}\n\nexport enum PriceDetailsType {\n MARKED_LIST = 'marked-list',\n SETTINGS = 'settings',\n}\n\nexport enum PriceLabelColor {\n BLUE = 'blue',\n GREEN = 'green',\n YELLOW = 'yellow',\n PURPLE = 'purple',\n RED = 'red',\n}\n\nexport enum PlayButtonType {\n Default = 'default',\n Text = 'text',\n}\n\nexport enum PlayButtonThemes {\n Blue = 'blue',\n Grey = 'grey',\n Custom = 'custom',\n}\n\nexport enum CustomControlsType {\n WithMuteButton = 'with-mute-button',\n WithPlayPauseButton = 'with-play-pause-button',\n}\n\nexport enum CustomControlsButtonPositioning {\n Left = 'left',\n Right = 'right',\n Center = 'center',\n}\n\nexport enum MediaVideoType {\n Default = 'default',\n Player = 'player',\n}\n\nexport enum MediaVideoControlsType {\n Default = 'default',\n Custom = 'custom',\n}\n\nexport enum QuoteType {\n Chevron = 'chevron', // « »\n EnglishDouble = 'english-double', // “ ”\n}\n\n// types\nexport type TextTheme = 'light' \| 'dark';\nexport type TextSize = 'xs' \| 's' \| 'sm' \| 'm' \| 'l';\nexport type DividerSize = '0' \| 'xxs' \| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| 'xxxl';\nexport type HeaderWidth = 's' \| 'm' \| 'l';\nexport type HeaderImageSize = 's' \| 'm';\nexport type HeaderOffset = 'default' \| 'large';\nexport type Justify = 'start' \| 'center' \| 'end';\nexport type ColumnsCount = 1 \| 2 \| 3 \| 4;\nexport type LegendTableMarkerType = 'disk' \| 'tick';\nexport type LinkTheme = 'file-link' \| 'normal' \| 'back' \| 'underline';\nexport type MediaDirection = 'media-content' \| 'content-media';\nexport type PriceDescriptionColor = 'cornflower' \| 'black';\nexport type ContentSize = 's' \| 'm' \| 'l' \| 'xl';\nexport type ContentTextSize = 's' \| 'm' \| 'l';\nexport type ContentTheme = 'default' \| 'dark' \| 'light';\nexport type FileLinkType = 'vertical' \| 'horizontal';\nexport type ImageCardMargins = 's' \| 'm';\nexport type LayoutItemContentMargin = 'm' \| 'l';\nexport type GravityIconProps = string \| {name: keyof typeof icons; color: 'brand' \| 'text-color'};\n\n// modifiers\nexport interface Themable {\n theme?: TextTheme;\n}\n\nexport interface Justifyable {\n justify?: Justify;\n}\n\nexport interface Stylable {\n className?: string;\n}\n\nexport interface Animatable {\n animated?: boolean;\n}\n\nexport interface Tabbable {\n tabIndex?: number;\n}\n\nexport interface Roleable {\n role?: React.AriaRole;\n}\n\nexport interface AriaProps {\n ariaProps?: React.AriaAttributes;\n}\n\n//common props\nexport interface Background {\n image?: string;\n color?: string;\n}\n\nexport interface AnchorProps {\n text: string;\n url: string;\n}\n\n/*\n @deprecated Component VideoBlock will be deleted, which uses this logic\n /\ninterface LoopProps {\n start: number;\n end?: number;\n}\n\n// images\n\nexport enum Device {\n Desktop = 'desktop',\n Mobile = 'mobile',\n Tablet = 'tablet',\n}\n\nexport interface ImageInfoProps\n extends Pick<\n React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,\n 'aria-describedby' \| 'loading'\n >,\n ImageDevicesVisibleProps {\n alt?: string;\n fetchPriority?: 'high' \| 'low' \| 'auto';\n disableCompress?: boolean;\n}\n\nexport interface ImageObjectProps extends ImageInfoProps {\n src: string;\n}\n\nexport interface ImageDeviceProps extends ImageInfoProps {\n [Device.Desktop]: string;\n [Device.Mobile]: string;\n [Device.Tablet]?: string;\n}\n\nexport interface ImageDevicesVisibleProps {\n hide?: boolean \| Partial<Record<Device, boolean>>;\n}\n\nexport type ImageProps = string \| ImageObjectProps \| ImageDeviceProps;\nexport type ThemedImage = ThemeSupporting<ImageProps>;\n\nexport interface BackgroundImageProps\n extends React.HTMLProps<HTMLDivElement>,\n Partial<ImageDeviceProps>,\n Partial<ImageObjectProps>,\n QAProps,\n ImageDevicesVisibleProps {\n style?: React.CSSProperties;\n imageClassName?: string;\n}\n\n//components props\nexport interface MediaVideoProps extends AnalyticsEventsBase {\n src: string[];\n type?: MediaVideoType;\n loop?: LoopProps \| boolean;\n muted?: boolean;\n autoplay?: boolean;\n elapsedTime?: number;\n playButton?: PlayButtonProps;\n controls?: MediaVideoControlsType;\n customControlsOptions?: CustomControlsOptions;\n ariaLabel?: string;\n contain?: boolean;\n onVideoEnd?: () => void;\n ref?: React.Ref<HTMLVideoElement \| null>;\n}\n\n// links\nexport interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {\n url: string;\n urlTitle?: string;\n text?: string;\n textSize?: TextSize;\n theme?: LinkTheme;\n colorTheme?: TextTheme;\n arrow?: boolean;\n target?: string;\n extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\nexport interface FileLinkProps extends ClassNameProps, Tabbable {\n href: string;\n text: React.ReactNode;\n type?: FileLinkType;\n textSize?: TextSize;\n theme?: ContentTheme;\n urlTitle?: string;\n onClick?: () => void;\n extraProps?: React.HTMLProps<HTMLAnchorElement>;\n}\n\n// buttons\nexport type ButtonTheme =\n \| ButtonView\n \| 'github'\n \| 'app-store'\n \| 'google-play'\n \| 'scale'\n \| 'monochrome';\n\nexport interface ButtonProps extends AnalyticsEventsBase {\n text: string;\n url: string;\n urlTitle?: string;\n primary?: boolean;\n theme?: ButtonTheme;\n img?: ButtonImageProps \| string;\n target?: string;\n size?: UikitButtonProps['size'];\n width?: UikitButtonProps['width'];\n extraProps?: UikitButtonProps['extraProps'];\n}\n\nexport type ButtonImagePosition = 'left' \| 'right';\n\nexport interface ButtonImageProps {\n url?: string;\n position?: ButtonImagePosition;\n alt?: string;\n iconData?: IconData;\n iconSize?: number;\n className?: string;\n}\n\nexport interface CustomControlsOptions {\n type?: CustomControlsType;\n muteButtonShown?: boolean;\n positioning?: CustomControlsButtonPositioning;\n}\n\nexport interface PlayButtonColors {\n circleColor?: string;\n circleHoverColor?: string;\n triangleColor?: string;\n triangleHoverColor?: string;\n}\n\nexport interface PlayButtonProps extends ClassNameProps {\n type?: PlayButtonType;\n theme?: PlayButtonThemes;\n text?: string;\n}\n\nexport type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;\n\nexport interface MediaComponentVideoProps extends AnalyticsEventsBase {\n video: MediaVideoProps;\n height?: number;\n ratio?: number \| 'auto';\n previewImg?: string;\n}\n\nexport interface MediaComponentVideoIframeProps {\n videoIframe: string;\n}\n\nexport interface MediaComponentYoutubeProps {\n youtube: string;\n previewImg?: string;\n fullscreen?: boolean;\n}\n\nexport interface MediaComponentImageProps {\n image: ImageProps \| ImageProps[] \| ImageDeviceProps;\n video?: MediaVideoProps;\n parallax?: boolean;\n height?: number;\n disableImageSliderForArrayInput?: boolean;\n}\n\nexport interface MediaComponentDataLensProps {\n dataLens: DataLensProps;\n}\n\nexport interface MediaComponentIframeProps {\n iframe: IframeProps;\n margins?: boolean;\n}\n\nexport interface MediaProps\n extends Animatable,\n Partial<MediaComponentDataLensProps>,\n Partial<MediaComponentYoutubeProps>,\n Partial<MediaComponentVideoIframeProps>,\n Partial<MediaComponentImageProps>,\n Partial<MediaComponentIframeProps>,\n Partial<MediaComponentVideoProps> {\n color?: string;\n videoMicrodata?: {\n name?: string;\n description?: string;\n duration?: string;\n uploadDate?: string;\n contentUrl?: string;\n thumbnailUrl?: string;\n };\n}\n\nexport interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {\n fullWidthMedia?: boolean;\n className?: string;\n mediaClassName?: string;\n}\n\nexport type Coordinate = [number, number];\n\nexport interface MapBaseProps {\n zoom?: number;\n className?: string;\n forceAspectRatio?: boolean;\n}\n\nexport interface GMapProps extends MapBaseProps {\n address: string;\n}\n\nexport type YMapMargin =\n \| number\n \| [vertical: number, horizontal: number]\n \| [top: number, right: number, bottom: number, left: number];\n\nexport interface YMapCopyrightPosition {\n top?: number;\n right?: number;\n bottom?: number;\n left?: number;\n}\n\nexport interface YMapProps extends MapBaseProps {\n markers: YMapMarker[];\n disableControls?: boolean;\n disableBalloons?: boolean;\n areaMargin?: YMapMargin;\n copyrightPosition?: YMapCopyrightPosition;\n id: string;\n}\n\nexport interface YMapMarker {\n address?: string;\n coordinate?: Coordinate;\n label?: YMapMarkerLabel;\n}\n\nexport interface YMapMarkerLabel {\n iconCaption?: string;\n iconContent?: string;\n iconColor?: string;\n iconImageHref?: string;\n iconImageSize?: [number, number];\n iconImageOffset?: [number, number];\n iconImageClipRect?: [[number, number], [number, number]];\n iconLayout?: 'default#image';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n iconShape?: Record<string, any>;\n preset?: string;\n}\n\nexport interface YMapMarkerPrivate extends YMapMarker {\n label?: YMapMarkerLabelPrivate;\n}\n\nexport interface YMapMarkerLabelPrivate extends YMapMarkerLabel {\n cursor?: string;\n interactivityModel?: string;\n}\n\nexport type MapProps = GMapProps \| YMapProps;\n\nexport type ThemedMediaProps = ThemeSupporting<MediaProps>;\n\nexport interface DataLensObjectProps {\n id: string;\n theme: 'dark' \| 'light';\n}\n\nexport interface IframeProps {\n src: string;\n width?: number;\n height?: number;\n title?: string;\n name?: string;\n}\n\nexport type DataLensProps = string \| DataLensObjectProps;\n\nexport interface AuthorItem {\n firstName: string;\n secondName: string;\n description?: string;\n avatar?: ThemeSupporting<ImageProps> \| JSX.Element;\n}\n\nexport interface HeaderBreadCrumbsProps extends ClassNameProps, QAProps {\n items: {\n url: string;\n text: React.ReactNode;\n }[];\n theme?: TextTheme;\n analyticsEvents?: AnalyticsEventsProp;\n}\n\nexport interface TitleItemProps extends Justifyable, TitleItemBaseProps, AnalyticsEventsBase {\n navTitle?: string;\n anchor?: string;\n}\n\nexport interface TitleItemBaseProps {\n text: string;\n textSize?: TextSize;\n url?: string;\n urlTitle?: string;\n custom?: string \| React.ReactNode;\n onClick?: () => void;\n}\n\nexport type MediaView = 'fit' \| 'full';\n\n// card\nexport type MediaBorder = 'shadow' \| 'line' \| 'none';\nexport type CardBorder = MediaBorder;\nexport type ControlPosition = 'content' \| 'footer';\n\nexport interface CardBaseProps {\n border?: CardBorder;\n}\n\nexport type CardLayoutProps = {\n controlPosition?: ControlPosition;\n};\n\n//price\nexport interface PriceDescriptionProps {\n title: string;\n detailedTitle?: string;\n description: string;\n label?: {\n color: PriceLabelColor;\n text?: string;\n size?: TextSize;\n };\n}\n\nexport interface PriceDetailsSettingsProps {\n title: string;\n description: string;\n}\n\nexport interface PriceDetailsListProps {\n text: string;\n}\n\nexport interface PriceDetailsProps {\n items?: PriceDetailsSettingsProps[] \| PriceDetailsListProps[];\n}\n\nexport interface PriceItemProps\n extends PriceDetailsProps,\n PriceDescriptionProps,\n AnalyticsEventsBase {}\n\nexport interface PriceFoldableDetailsProps {\n title: string;\n size?: TextSize;\n titleColor?: PriceDescriptionColor;\n}\n\n/* @deprecated /\nexport interface PriceDetailedProps extends CardBaseProps {\n items: PriceItemProps[];\n description?: {\n titleSize?: TextSize;\n descriptionSize?: TextSize;\n titleColor?: PriceDescriptionColor;\n };\n details?: {\n titleSize?: TextSize;\n descriptionSize?: TextSize;\n };\n priceType?: PriceDetailsType;\n numberGroupItems?: 3 \| 4 \| 5;\n isCombined?: boolean;\n useMixedView?: boolean;\n foldable?: PriceFoldableDetailsProps;\n labelsDefaultText?: Record<PriceLabelColor, string>;\n}\n\nexport interface AuthorProps extends QAProps {\n author: AuthorItem;\n className?: string;\n authorContainerClassName?: string;\n type?: AuthorType;\n theme?: ContentTheme;\n}\n\nexport interface TitleProps {\n title?: TitleItemProps \| string;\n subtitle?: string;\n}\n\nexport interface YandexFormProps extends AnalyticsEventsBase {\n id: number \| string;\n containerId?: string;\n theme?: string;\n className?: string;\n headerHeight?: number;\n customFormOrigin?: string;\n customFormSection?: string;\n params?: {[key: string]: string};\n\n onSubmit?: () => void;\n onLoad?: () => void;\n}\n\nexport interface WithBorder {\n border?: MediaBorder;\n /\n @deprecated use custom class for media-component\n */\n disableShadow?: boolean;\n}\n"]}

package/build/esm/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/esm/components/ReactPlayer/ReactPlayer.js CHANGED Viewed

@@ -1,7 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { PlayFill } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
 import debounce from "lodash/debounce.js";
 import _ReactPlayer from 'react-player';
 import { MobileContext } from "../../context/mobileContext/index.js";
@@ -9,8 +7,8 @@ import { VideoContext } from "../../context/videoContext/index.js";
 import { useAnalytics, useImageSize, useMount } from "../../hooks/index.js";
 import { CustomControlsButtonPositioning, CustomControlsType, DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from "../../models/index.js";
 import { block } from "../../utils/index.js";
+import VideoButton from "../VideoButton/VideoButton.js";
 import CustomBarControls from "./CustomBarControls.js";
-import { i18n } from "./i18n/index.js";
 import { checkYoutubeVideos } from "./utils.js";
 import { isYoutubePlayerInstance } from "./utils/youtube.js";
 import './ReactPlayer.css';
@@ -23,7 +21,6 @@ const ReactPlayer = 'default' in _ReactPlayer && _ReactPlayer.default
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = React.useContext(MobileContext);
     const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, onIntrinsicSizeChange, disableAutoSizing, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain = true, } = props;
-    const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const { type: customControlsType = CustomControlsType.WithMuteButton, muteButtonShown, positioning = CustomControlsButtonPositioning.Center, } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -126,18 +123,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const playEvents = React.useMemo(() => eventsArray?.filter((e) => e.type === PredefinedEventTypes.Play), [eventsArray]);
     const stopEvents = React.useMemo(() => eventsArray?.filter((e) => e.type === PredefinedEventTypes.Stop), [eventsArray]);
     const playIcon = React.useMemo(() => {
-        let playButtonContent;
-        switch (type) {
-            case PlayButtonType.Text:
-                playButtonContent = text;
-                break;
-            case PlayButtonType.Default:
-            default:
-                playButtonContent = _jsx(Icon, { className: b('icon'), data: PlayFill, size: 24 });
-                break;
-        }
-        return (_jsx("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": i18n('play'), ref: buttonRef, children: playButtonContent }));
-    }, [type, theme, text, buttonClassName]);
+        const { theme, type } = playButton || {};
+        return (_jsx(VideoButton, { ...playButton, theme: theme || PlayButtonThemes.Blue, type: type || PlayButtonType.Default }));
+    }, [playButton]);
     const changeMute = React.useCallback((isMuted) => {
         if (isMuted &&
             playerRef &&

package/build/esm/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/esm/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/esm/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";
 import './VideoBlock.css';
 export declare const AUTOPLAY_ATTRIBUTES: {
     autoplay: number;
@@ -14,7 +15,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/esm/components/VideoBlock/VideoBlock.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { PlayFill } from '@gravity-ui/icons';
-import { Icon, useActionHandlers, useUniqId } from '@gravity-ui/uikit';
+import { useActionHandlers, useUniqId } from '@gravity-ui/uikit';
 import debounce from "lodash/debounce.js";
 import { v4 as uuidv4 } from 'uuid';
 import { useAnalytics } from "../../hooks/useAnalytics.js";
 import { DefaultEventNames } from "../../models/common.js";
 import { block, getPageSearchParams } from "../../utils/index.js";
 import Image from "../Image/Image.js";
+import VideoButton from "../VideoButton/VideoButton.js";
 import { i18n } from "./i18n/index.js";
 import './VideoBlock.css';
 const RECORD_URL = 'https://www.youtube.com/embed/';
@@ -40,6 +40,18 @@ function getYoutubeVideoSrc(stream, record) {
 export 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 = useAnalytics(DefaultEventNames.VideoPreview);
@@ -91,10 +103,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 (_jsxs("div", { className: b(null, className), style: { height: currentHeight }, ref: ref, children: [iframeContent, previewImg && !hidePreview && !fullscreen && (_jsxs("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId, children: [_jsx(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }), playButton || (_jsx("button", { title: "Play", id: buttonId, className: b('button'), children: _jsx(Icon, { className: b('icon'), data: PlayFill, size: 24 }) }))] }))] }));
+    return (_jsxs("div", { className: b(null, className), style: { height: currentHeight }, ref: ref, children: [iframeContent, previewImg && !hidePreview && !fullscreen && (_jsxs("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, role: "button", tabIndex: 0, "aria-labelledby": buttonLabelId, children: [_jsx(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }), _jsx(VideoButton, { id: buttonId, ...buttonProps })] }))] }));
 };
 export default VideoBlock;
 //# sourceMappingURL=VideoBlock.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoBlock.js","sourceRoot":"../../../../src","sources":["components/VideoBlock/VideoBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,IAAI,EAAE,iBAAiB,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AACrE,OAAO,QAAQ,2BAAwB;AACvC,OAAO,EAAC,EAAE,IAAI,MAAM,EAAC,MAAM,MAAM,CAAC;AAElC,OAAO,EAAC,YAAY,EAAC,oCAAiC;AACtD,OAAO,EAAsB,iBAAiB,EAAC,+BAA4B;AAC3E,OAAO,EAAC,KAAK,EAAE,mBAAmB,EAAC,6BAAoB;AACvD,OAAO,KAAK,0BAAuB;AAEnC,OAAO,EAAC,IAAI,EAAC,wBAAe;AAE5B,OAAO,kBAAkB,CAAC;AAE1B,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;AAE3B,MAAM,CAAC,MAAM,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,KAAK,CAAC,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,MAAM,UAAU,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,YAAY,CAAC,iBAAiB,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,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,SAAS,EAAE,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,mBAAmB,CAAC;oBACrC,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC;oBACrB,GAAG,CAAC,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,mBAAmB,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,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAExE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,UAAU,GAAG,QAAQ,CAAC,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,iBACI,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,SAAS,EACd,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,IAAI,CAAC,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,eAAK,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,eACI,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,KAAC,KAAK,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,iBAAQ,KAAK,EAAC,MAAM,EAAC,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACrD,KAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,GACnD,CACZ,IACC,CACT,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,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":"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","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/esm/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;
+  }
+}

package/build/esm/components/VideoButton/VideoButton.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { PlayButtonProps } from "../../models/index.js";
+import './VideoButton.css';
+export interface VideoButtonProps extends PlayButtonProps {
+    customButton?: React.ReactNode;
+    ref?: React.LegacyRef<HTMLButtonElement>;
+    id?: string;
+}
+declare const VideoButton: ({ customButton, text, type, theme: initialTheme, className, ref, id, }: VideoButtonProps) => string | number | true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
+export default VideoButton;

package/build/esm/components/VideoButton/VideoButton.js ADDED Viewed

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PlayFill } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { ProjectSettingsContext } from "../../context/projectSettingsContext/index.js";
+import { useTheme } from "../../context/theme/index.js";
+import { PlayButtonThemes, PlayButtonType } from "../../models/index.js";
+import { block, getThemedValue } from "../../utils/index.js";
+import { i18n } from "../ReactPlayer/i18n/index.js";
+import './VideoButton.css';
+const b = block('video-button');
+const VideoButton = ({ customButton, text, type, theme: initialTheme, className, ref, id, }) => {
+    const { defaultVideoButtonSettings } = React.useContext(ProjectSettingsContext);
+    const currentTheme = useTheme();
+    const playButtonContent = React.useMemo(() => {
+        switch (type) {
+            case PlayButtonType.Text:
+                return text;
+            case PlayButtonType.Default:
+            default:
+                return _jsx(Icon, { className: b('icon'), data: PlayFill, size: 24 });
+        }
+    }, [text, type]);
+    const theme = initialTheme || defaultVideoButtonSettings?.theme || PlayButtonThemes.Blue;
+    const style = React.useMemo(() => {
+        if (theme !== PlayButtonThemes.Custom) {
+            return undefined;
+        }
+        const themedColors = defaultVideoButtonSettings?.colors
+            ? getThemedValue(defaultVideoButtonSettings.colors, currentTheme)
+            : undefined;
+        const resolveColor = (colorName) => {
+            return themedColors?.[colorName];
+        };
+        return {
+            '--pc-video-button-circle-color': resolveColor('circleColor'),
+            '--pc-video-button-circle-hover-color': resolveColor('circleHoverColor'),
+            '--pc-video-button-triangle-color': resolveColor('triangleColor'),
+            '--pc-video-button-triangle-hover-color': resolveColor('triangleHoverColor'),
+        };
+    }, [currentTheme, defaultVideoButtonSettings?.colors, theme]);
+    if (customButton) {
+        return customButton;
+    }
+    return (_jsx("button", { className: b({ theme, text: Boolean(text) }, className), "aria-label": i18n('play'), ref: ref, id: id, style: style, children: playButtonContent }));
+};
+export default VideoButton;
+//# sourceMappingURL=VideoButton.js.map