@gravity-ui/page-constructor 8.20.1 → 8.21.1

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.
@@ -39,7 +39,7 @@ const Image = (props) => {
39
39
  if (parallax) {
40
40
  const parallaxLevel = 2;
41
41
  springSetScrollY.start({ springScrollY: height && scrollY > height ? height : scrollY });
42
- parallaxInterpolate = springScrollY.to((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
42
+ parallaxInterpolate = springScrollY.to((value) => `translateY(${-Number(value) / parallaxLevel}px)`);
43
43
  }
44
44
  const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
45
45
  const renderFullscreenImage = (item, sliderData) => {
@@ -1 +1 @@
1
- {"version":3,"file":"Image.js","sourceRoot":"../../../../../src","sources":["components/Media/Image/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Interpolation, animated, config, useSpring} from '@react-spring/web';\nimport debounce from 'lodash/debounce';\n\nimport {SliderBlock} from '../../../blocks';\nimport {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport BackgroundImage from '../../BackgroundImage/BackgroundImage';\nimport FullscreenImage, {FullscreenImageProps} from '../../FullscreenImage/FullscreenImage';\nimport ImageView from '../../Image/Image';\n\nimport {getMediaImage} from './utils';\n\nimport './Image.scss';\n\nconst b = block('media-component-image');\n\nexport interface ImageAdditionProps {\n imageClassName?: string;\n isBackground?: boolean;\n fullscreen?: boolean;\n fullscreenClassName?: string;\n onLoad?: () => void;\n onIntrinsicSizeChange?: (size: {width: number; height: number}) => void;\n}\n\ninterface InnerImageProps {\n hasVideoFallback: boolean;\n}\n\ntype ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;\n\nexport const defaultAnimatedDivQa = 'animated-div';\n\nconst Image = (props: ImageAllProps) => {\n const {\n parallax,\n height,\n imageClassName,\n fullscreenClassName,\n isBackground,\n hasVideoFallback,\n video,\n fullscreen,\n disableImageSliderForArrayInput,\n qa,\n onLoad,\n onIntrinsicSizeChange,\n } = props;\n const image =\n Array.isArray(props.image) && disableImageSliderForArrayInput\n ? props.image[0]\n : props.image;\n\n const qaAttributes = getQaAttrubutes(\n qa,\n 'fullscreen-image',\n 'animate',\n 'background-image',\n 'image-view',\n 'slider-block',\n );\n const [scrollY, setScrollY] = React.useState(0);\n const [{springScrollY}, springSetScrollY] = useSpring(() => ({\n springScrollY: 0,\n config: config.molasses,\n }));\n\n let parallaxInterpolate: Interpolation<number, string> | string = '';\n\n React.useEffect(() => {\n if (parallax) {\n const handleScroll = () => setScrollY(window.scrollY);\n const debouncedHandler = debounce(handleScroll, 5);\n\n window.addEventListener('scroll', debouncedHandler, {passive: true});\n return () => window.removeEventListener('scroll', debouncedHandler);\n }\n\n return () => {};\n });\n\n if (parallax) {\n const parallaxLevel = 2;\n springSetScrollY.start({springScrollY: height && scrollY > height ? height : scrollY});\n parallaxInterpolate = springScrollY.to(\n (value) => `translateY(-${Number(value) / parallaxLevel}px)`,\n );\n }\n\n const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName);\n\n const renderFullscreenImage = (\n item: ImageProps,\n sliderData?: FullscreenImageProps['sliderData'],\n ) => {\n const itemData = getMediaImage(item);\n\n return (\n <FullscreenImage\n key={itemData.alt}\n {...itemData}\n imageClassName={imageClass}\n modalImageClass={fullscreenClassName}\n imageStyle={{height}}\n qa={qaAttributes.fullscreenImage}\n sliderData={sliderData}\n onLoad={onLoad}\n onIntrinsicSizeChange={onIntrinsicSizeChange}\n />\n );\n };\n\n const imageBackground = (oneImage: ImageProps) => {\n const imageData = getMediaImage(oneImage);\n return (\n <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>\n <BackgroundImage\n {...imageData}\n className={imageClass}\n style={{height}}\n qa={qaAttributes.backgroundImage}\n />\n </animated.div>\n );\n };\n\n const imageOnly = (oneImage: ImageProps) => {\n const imageData = getMediaImage(oneImage);\n return (\n <ImageView\n {...imageData}\n className={imageClass}\n style={{height}}\n qa={qaAttributes.imageView}\n onLoad={onLoad}\n onIntrinsicSizeChange={onIntrinsicSizeChange}\n />\n );\n };\n\n const imageSlider = (imageArray: ImageProps[]) => {\n const fullscreenItem = fullscreen === undefined || fullscreen;\n\n return (\n <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>\n {imageArray.map((item, index) => (\n <React.Fragment key={index}>\n {fullscreenItem\n ? renderFullscreenImage(item, {items: imageArray, initialIndex: index})\n : imageOnly(item)}\n </React.Fragment>\n ))}\n </SliderBlock>\n );\n };\n\n if (Array.isArray(image)) {\n return imageSlider(image);\n }\n\n if (fullscreen) {\n return renderFullscreenImage(image);\n }\n\n return isBackground ? imageBackground(image) : imageOnly(image);\n};\n\nexport default Image;\n"]}
1
+ {"version":3,"file":"Image.js","sourceRoot":"../../../../../src","sources":["components/Media/Image/Image.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,2CAA6E;AAC7E,0EAAuC;AAEvC,qDAA4C;AAC5C,qDAA0F;AAC1F,mDAAsD;AACtD,uGAAoE;AACpE,uGAA4F;AAC5F,yEAA0C;AAE1C,sCAAsC;AAItC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,uBAAuB,CAAC,CAAC;AAiB5B,QAAA,oBAAoB,GAAG,cAAc,CAAC;AAEnD,MAAM,KAAK,GAAG,CAAC,KAAoB,EAAE,EAAE;IACnC,MAAM,EACF,QAAQ,EACR,MAAM,EACN,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,UAAU,EACV,+BAA+B,EAC/B,EAAE,EACF,MAAM,EACN,qBAAqB,GACxB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GACP,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,+BAA+B;QACzD,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAChB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IAEtB,MAAM,YAAY,GAAG,IAAA,uBAAe,EAChC,EAAE,EACF,kBAAkB,EAClB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,cAAc,CACjB,CAAC;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,EAAC,aAAa,EAAC,EAAE,gBAAgB,CAAC,GAAG,IAAA,eAAS,EAAC,GAAG,EAAE,CAAC,CAAC;QACzD,aAAa,EAAE,CAAC;QAChB,MAAM,EAAE,YAAM,CAAC,QAAQ;KAC1B,CAAC,CAAC,CAAC;IAEJ,IAAI,mBAAmB,GAA2C,EAAE,CAAC;IAErE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,QAAQ,EAAE,CAAC;YACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACtD,MAAM,gBAAgB,GAAG,IAAA,kBAAQ,EAAC,YAAY,EAAE,CAAC,CAAC,CAAC;YAEnD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;YACrE,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QACxE,CAAC;QAED,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,IAAI,QAAQ,EAAE,CAAC;QACX,MAAM,aAAa,GAAG,CAAC,CAAC;QACxB,gBAAgB,CAAC,KAAK,CAAC,EAAC,aAAa,EAAE,MAAM,IAAI,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAC,CAAC,CAAC;QACvF,mBAAmB,GAAG,aAAa,CAAC,EAAE,CAClC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,aAAa,KAAK,CAC/D,CAAC;IACN,CAAC;IAED,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,EAAE,EAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAC,EAAE,cAAc,CAAC,CAAC;IAE/F,MAAM,qBAAqB,GAAG,CAC1B,IAAgB,EAChB,UAA+C,EACjD,EAAE;QACA,MAAM,QAAQ,GAAG,IAAA,qBAAa,EAAC,IAAI,CAAC,CAAC;QAErC,OAAO,CACH,uBAAC,yBAAe,OAER,QAAQ,EACZ,cAAc,EAAE,UAAU,EAC1B,eAAe,EAAE,mBAAmB,EACpC,UAAU,EAAE,EAAC,MAAM,EAAC,EACpB,EAAE,EAAE,YAAY,CAAC,eAAe,EAChC,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,qBAAqB,EAAE,qBAAqB,IARvC,QAAQ,CAAC,GAAG,CASnB,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;QAC7C,MAAM,SAAS,GAAG,IAAA,qBAAa,EAAC,QAAQ,CAAC,CAAC;QAC1C,OAAO,CACH,uBAAC,cAAQ,CAAC,GAAG,IAAC,KAAK,EAAE,EAAC,SAAS,EAAE,mBAAmB,EAAC,aAAW,YAAY,CAAC,OAAO,YAChF,uBAAC,yBAAe,OACR,SAAS,EACb,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,EAAC,MAAM,EAAC,EACf,EAAE,EAAE,YAAY,CAAC,eAAe,GAClC,GACS,CAClB,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,QAAoB,EAAE,EAAE;QACvC,MAAM,SAAS,GAAG,IAAA,qBAAa,EAAC,QAAQ,CAAC,CAAC;QAC1C,OAAO,CACH,uBAAC,eAAS,OACF,SAAS,EACb,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,EAAC,MAAM,EAAC,EACf,EAAE,EAAE,YAAY,CAAC,SAAS,EAC1B,MAAM,EAAE,MAAM,EACd,qBAAqB,EAAE,qBAAqB,GAC9C,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,UAAwB,EAAE,EAAE;QAC7C,MAAM,cAAc,GAAG,UAAU,KAAK,SAAS,IAAI,UAAU,CAAC;QAE9D,OAAO,CACH,uBAAC,oBAAW,IAAC,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,mBAAU,CAAC,SAAS,YACnD,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,uBAAC,KAAK,CAAC,QAAQ,cACV,cAAc;oBACX,CAAC,CAAC,qBAAqB,CAAC,IAAI,EAAE,EAAC,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAC,CAAC;oBACvE,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAHJ,KAAK,CAIT,CACpB,CAAC,GACQ,CACjB,CAAC;IACN,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACb,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,OAAO,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACpE,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Interpolation, animated, config, useSpring} from '@react-spring/web';\nimport debounce from 'lodash/debounce';\n\nimport {SliderBlock} from '../../../blocks';\nimport {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport BackgroundImage from '../../BackgroundImage/BackgroundImage';\nimport FullscreenImage, {FullscreenImageProps} from '../../FullscreenImage/FullscreenImage';\nimport ImageView from '../../Image/Image';\n\nimport {getMediaImage} from './utils';\n\nimport './Image.scss';\n\nconst b = block('media-component-image');\n\nexport interface ImageAdditionProps {\n imageClassName?: string;\n isBackground?: boolean;\n fullscreen?: boolean;\n fullscreenClassName?: string;\n onLoad?: () => void;\n onIntrinsicSizeChange?: (size: {width: number; height: number}) => void;\n}\n\ninterface InnerImageProps {\n hasVideoFallback: boolean;\n}\n\ntype ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;\n\nexport const defaultAnimatedDivQa = 'animated-div';\n\nconst Image = (props: ImageAllProps) => {\n const {\n parallax,\n height,\n imageClassName,\n fullscreenClassName,\n isBackground,\n hasVideoFallback,\n video,\n fullscreen,\n disableImageSliderForArrayInput,\n qa,\n onLoad,\n onIntrinsicSizeChange,\n } = props;\n const image =\n Array.isArray(props.image) && disableImageSliderForArrayInput\n ? props.image[0]\n : props.image;\n\n const qaAttributes = getQaAttrubutes(\n qa,\n 'fullscreen-image',\n 'animate',\n 'background-image',\n 'image-view',\n 'slider-block',\n );\n const [scrollY, setScrollY] = React.useState(0);\n const [{springScrollY}, springSetScrollY] = useSpring(() => ({\n springScrollY: 0,\n config: config.molasses,\n }));\n\n let parallaxInterpolate: Interpolation<number, string> | string = '';\n\n React.useEffect(() => {\n if (parallax) {\n const handleScroll = () => setScrollY(window.scrollY);\n const debouncedHandler = debounce(handleScroll, 5);\n\n window.addEventListener('scroll', debouncedHandler, {passive: true});\n return () => window.removeEventListener('scroll', debouncedHandler);\n }\n\n return () => {};\n });\n\n if (parallax) {\n const parallaxLevel = 2;\n springSetScrollY.start({springScrollY: height && scrollY > height ? height : scrollY});\n parallaxInterpolate = springScrollY.to(\n (value) => `translateY(${-Number(value) / parallaxLevel}px)`,\n );\n }\n\n const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName);\n\n const renderFullscreenImage = (\n item: ImageProps,\n sliderData?: FullscreenImageProps['sliderData'],\n ) => {\n const itemData = getMediaImage(item);\n\n return (\n <FullscreenImage\n key={itemData.alt}\n {...itemData}\n imageClassName={imageClass}\n modalImageClass={fullscreenClassName}\n imageStyle={{height}}\n qa={qaAttributes.fullscreenImage}\n sliderData={sliderData}\n onLoad={onLoad}\n onIntrinsicSizeChange={onIntrinsicSizeChange}\n />\n );\n };\n\n const imageBackground = (oneImage: ImageProps) => {\n const imageData = getMediaImage(oneImage);\n return (\n <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>\n <BackgroundImage\n {...imageData}\n className={imageClass}\n style={{height}}\n qa={qaAttributes.backgroundImage}\n />\n </animated.div>\n );\n };\n\n const imageOnly = (oneImage: ImageProps) => {\n const imageData = getMediaImage(oneImage);\n return (\n <ImageView\n {...imageData}\n className={imageClass}\n style={{height}}\n qa={qaAttributes.imageView}\n onLoad={onLoad}\n onIntrinsicSizeChange={onIntrinsicSizeChange}\n />\n );\n };\n\n const imageSlider = (imageArray: ImageProps[]) => {\n const fullscreenItem = fullscreen === undefined || fullscreen;\n\n return (\n <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>\n {imageArray.map((item, index) => (\n <React.Fragment key={index}>\n {fullscreenItem\n ? renderFullscreenImage(item, {items: imageArray, initialIndex: index})\n : imageOnly(item)}\n </React.Fragment>\n ))}\n </SliderBlock>\n );\n };\n\n if (Array.isArray(image)) {\n return imageSlider(image);\n }\n\n if (fullscreen) {\n return renderFullscreenImage(image);\n }\n\n return isBackground ? imageBackground(image) : imageOnly(image);\n};\n\nexport default Image;\n"]}
@@ -55,6 +55,8 @@ unpredictable css rules order in build */
55
55
  }
56
56
  .pc-video-button__icon {
57
57
  margin-left: 1px;
58
+ height: var(--pc-video-button-icon-size, 24px);
59
+ width: var(--pc-video-button-icon-size, 24px);
58
60
  }
59
61
  @media only screen and (max-width: 577px) {
60
62
  .pc-video-button_text {
@@ -20,7 +20,7 @@ const VideoButton = ({ customButton, text, type, theme: initialTheme, className,
20
20
  return text;
21
21
  case models_1.PlayButtonType.Default:
22
22
  default:
23
- return (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: 24 });
23
+ return (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill });
24
24
  }
25
25
  }, [text, type]);
26
26
  const theme = initialTheme || defaultVideoButtonSettings?.theme || models_1.PlayButtonThemes.Blue;
@@ -1 +1 @@
1
- {"version":3,"file":"VideoButton.js","sourceRoot":"../../../../src","sources":["components/VideoButton/VideoButton.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,6CAA2C;AAC3C,6CAAuC;AAEvC,0FAA4E;AAC5E,wDAA6C;AAC7C,kDAAiG;AACjG,gDAAkD;AAClD,uDAAyC;AAUzC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,EACjB,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,KAAK,EAAE,YAAY,EACnB,SAAS,EACT,GAAG,EACH,EAAE,GACa,EAAE,EAAE;IACnB,MAAM,EAAC,0BAA0B,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,+CAAsB,CAAC,CAAC;IAC9E,MAAM,YAAY,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAEhC,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACzC,QAAQ,IAAI,EAAE,CAAC;YACX,KAAK,uBAAc,CAAC,IAAI;gBACpB,OAAO,IAAI,CAAC;YAChB,KAAK,uBAAc,CAAC,OAAO,CAAC;YAC5B;gBACI,OAAO,uBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,gBAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC;QACxE,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAEjB,MAAM,KAAK,GAAG,YAAY,IAAI,0BAA0B,EAAE,KAAK,IAAI,yBAAgB,CAAC,IAAI,CAAC;IAEzF,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,KAAK,KAAK,yBAAgB,CAAC,MAAM,EAAE,CAAC;YACpC,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,YAAY,GAAG,0BAA0B,EAAE,MAAM;YACnD,CAAC,CAAC,IAAA,sBAAc,EAAC,0BAA0B,CAAC,MAAM,EAAE,YAAY,CAAC;YACjE,CAAC,CAAC,SAAS,CAAC;QAEhB,MAAM,YAAY,GAAG,CAAC,SAAiC,EAAE,EAAE;YACvD,OAAO,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC;QACrC,CAAC,CAAC;QAEF,OAAO;YACH,gCAAgC,EAAE,YAAY,CAAC,aAAa,CAAC;YAC7D,sCAAsC,EAAE,YAAY,CAAC,kBAAkB,CAAC;YACxE,kCAAkC,EAAE,YAAY,CAAC,eAAe,CAAC;YACjE,wCAAwC,EAAE,YAAY,CAAC,oBAAoB,CAAC;SACxD,CAAC;IAC7B,CAAC,EAAE,CAAC,YAAY,EAAE,0BAA0B,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAE9D,IAAI,YAAY,EAAE,CAAC;QACf,OAAO,YAAY,CAAC;IACxB,CAAC;IAED,OAAO,CACH,mCACI,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,EAAC,EAAE,SAAS,CAAC,gBACzC,IAAA,WAAI,EAAC,MAAM,CAAC,EACxB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,YAEX,iBAAiB,GACb,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {PlayFill} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {useTheme} from '../../context/theme';\nimport {PlayButtonColors, PlayButtonProps, PlayButtonThemes, PlayButtonType} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {i18n} from '../ReactPlayer/i18n';\n\nimport './VideoButton.scss';\n\nexport interface VideoButtonProps extends PlayButtonProps {\n customButton?: React.ReactNode;\n ref?: React.LegacyRef<HTMLButtonElement>;\n id?: string;\n}\n\nconst b = block('video-button');\n\nconst VideoButton = ({\n customButton,\n text,\n type,\n theme: initialTheme,\n className,\n ref,\n id,\n}: VideoButtonProps) => {\n const {defaultVideoButtonSettings} = React.useContext(ProjectSettingsContext);\n const currentTheme = useTheme();\n\n const playButtonContent = React.useMemo(() => {\n switch (type) {\n case PlayButtonType.Text:\n return text;\n case PlayButtonType.Default:\n default:\n return <Icon className={b('icon')} data={PlayFill} size={24} />;\n }\n }, [text, type]);\n\n const theme = initialTheme || defaultVideoButtonSettings?.theme || PlayButtonThemes.Blue;\n\n const style = React.useMemo(() => {\n if (theme !== PlayButtonThemes.Custom) {\n return undefined;\n }\n\n const themedColors = defaultVideoButtonSettings?.colors\n ? getThemedValue(defaultVideoButtonSettings.colors, currentTheme)\n : undefined;\n\n const resolveColor = (colorName: keyof PlayButtonColors) => {\n return themedColors?.[colorName];\n };\n\n return {\n '--pc-video-button-circle-color': resolveColor('circleColor'),\n '--pc-video-button-circle-hover-color': resolveColor('circleHoverColor'),\n '--pc-video-button-triangle-color': resolveColor('triangleColor'),\n '--pc-video-button-triangle-hover-color': resolveColor('triangleHoverColor'),\n } as React.CSSProperties;\n }, [currentTheme, defaultVideoButtonSettings?.colors, theme]);\n\n if (customButton) {\n return customButton;\n }\n\n return (\n <button\n className={b({theme, text: Boolean(text)}, className)}\n aria-label={i18n('play')}\n ref={ref}\n id={id}\n style={style}\n >\n {playButtonContent}\n </button>\n );\n};\n\nexport default VideoButton;\n"]}
1
+ {"version":3,"file":"VideoButton.js","sourceRoot":"../../../../src","sources":["components/VideoButton/VideoButton.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,6CAA2C;AAC3C,6CAAuC;AAEvC,0FAA4E;AAC5E,wDAA6C;AAC7C,kDAAiG;AACjG,gDAAkD;AAClD,uDAAyC;AAUzC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,EACjB,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,KAAK,EAAE,YAAY,EACnB,SAAS,EACT,GAAG,EACH,EAAE,GACa,EAAE,EAAE;IACnB,MAAM,EAAC,0BAA0B,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,+CAAsB,CAAC,CAAC;IAC9E,MAAM,YAAY,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAEhC,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACzC,QAAQ,IAAI,EAAE,CAAC;YACX,KAAK,uBAAc,CAAC,IAAI;gBACpB,OAAO,IAAI,CAAC;YAChB,KAAK,uBAAc,CAAC,OAAO,CAAC;YAC5B;gBACI,OAAO,uBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,gBAAQ,GAAI,CAAC;QAC9D,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAEjB,MAAM,KAAK,GAAG,YAAY,IAAI,0BAA0B,EAAE,KAAK,IAAI,yBAAgB,CAAC,IAAI,CAAC;IAEzF,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,KAAK,KAAK,yBAAgB,CAAC,MAAM,EAAE,CAAC;YACpC,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,YAAY,GAAG,0BAA0B,EAAE,MAAM;YACnD,CAAC,CAAC,IAAA,sBAAc,EAAC,0BAA0B,CAAC,MAAM,EAAE,YAAY,CAAC;YACjE,CAAC,CAAC,SAAS,CAAC;QAEhB,MAAM,YAAY,GAAG,CAAC,SAAiC,EAAE,EAAE;YACvD,OAAO,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC;QACrC,CAAC,CAAC;QAEF,OAAO;YACH,gCAAgC,EAAE,YAAY,CAAC,aAAa,CAAC;YAC7D,sCAAsC,EAAE,YAAY,CAAC,kBAAkB,CAAC;YACxE,kCAAkC,EAAE,YAAY,CAAC,eAAe,CAAC;YACjE,wCAAwC,EAAE,YAAY,CAAC,oBAAoB,CAAC;SACxD,CAAC;IAC7B,CAAC,EAAE,CAAC,YAAY,EAAE,0BAA0B,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAE9D,IAAI,YAAY,EAAE,CAAC;QACf,OAAO,YAAY,CAAC;IACxB,CAAC;IAED,OAAO,CACH,mCACI,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,EAAC,EAAE,SAAS,CAAC,gBACzC,IAAA,WAAI,EAAC,MAAM,CAAC,EACxB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,YAEX,iBAAiB,GACb,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {PlayFill} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {useTheme} from '../../context/theme';\nimport {PlayButtonColors, PlayButtonProps, PlayButtonThemes, PlayButtonType} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {i18n} from '../ReactPlayer/i18n';\n\nimport './VideoButton.scss';\n\nexport interface VideoButtonProps extends PlayButtonProps {\n customButton?: React.ReactNode;\n ref?: React.LegacyRef<HTMLButtonElement>;\n id?: string;\n}\n\nconst b = block('video-button');\n\nconst VideoButton = ({\n customButton,\n text,\n type,\n theme: initialTheme,\n className,\n ref,\n id,\n}: VideoButtonProps) => {\n const {defaultVideoButtonSettings} = React.useContext(ProjectSettingsContext);\n const currentTheme = useTheme();\n\n const playButtonContent = React.useMemo(() => {\n switch (type) {\n case PlayButtonType.Text:\n return text;\n case PlayButtonType.Default:\n default:\n return <Icon className={b('icon')} data={PlayFill} />;\n }\n }, [text, type]);\n\n const theme = initialTheme || defaultVideoButtonSettings?.theme || PlayButtonThemes.Blue;\n\n const style = React.useMemo(() => {\n if (theme !== PlayButtonThemes.Custom) {\n return undefined;\n }\n\n const themedColors = defaultVideoButtonSettings?.colors\n ? getThemedValue(defaultVideoButtonSettings.colors, currentTheme)\n : undefined;\n\n const resolveColor = (colorName: keyof PlayButtonColors) => {\n return themedColors?.[colorName];\n };\n\n return {\n '--pc-video-button-circle-color': resolveColor('circleColor'),\n '--pc-video-button-circle-hover-color': resolveColor('circleHoverColor'),\n '--pc-video-button-triangle-color': resolveColor('triangleColor'),\n '--pc-video-button-triangle-hover-color': resolveColor('triangleHoverColor'),\n } as React.CSSProperties;\n }, [currentTheme, defaultVideoButtonSettings?.colors, theme]);\n\n if (customButton) {\n return customButton;\n }\n\n return (\n <button\n className={b({theme, text: Boolean(text)}, className)}\n aria-label={i18n('play')}\n ref={ref}\n id={id}\n style={style}\n >\n {playButtonContent}\n </button>\n );\n};\n\nexport default VideoButton;\n"]}
@@ -36,7 +36,7 @@ const Image = (props) => {
36
36
  if (parallax) {
37
37
  const parallaxLevel = 2;
38
38
  springSetScrollY.start({ springScrollY: height && scrollY > height ? height : scrollY });
39
- parallaxInterpolate = springScrollY.to((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
39
+ parallaxInterpolate = springScrollY.to((value) => `translateY(${-Number(value) / parallaxLevel}px)`);
40
40
  }
41
41
  const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
42
42
  const renderFullscreenImage = (item, sliderData) => {
@@ -1 +1 @@
1
- {"version":3,"file":"Image.js","sourceRoot":"../../../../../src","sources":["components/Media/Image/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Interpolation, animated, config, useSpring} from '@react-spring/web';\nimport debounce from 'lodash/debounce';\n\nimport {SliderBlock} from '../../../blocks';\nimport {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport BackgroundImage from '../../BackgroundImage/BackgroundImage';\nimport FullscreenImage, {FullscreenImageProps} from '../../FullscreenImage/FullscreenImage';\nimport ImageView from '../../Image/Image';\n\nimport {getMediaImage} from './utils';\n\nimport './Image.scss';\n\nconst b = block('media-component-image');\n\nexport interface ImageAdditionProps {\n imageClassName?: string;\n isBackground?: boolean;\n fullscreen?: boolean;\n fullscreenClassName?: string;\n onLoad?: () => void;\n onIntrinsicSizeChange?: (size: {width: number; height: number}) => void;\n}\n\ninterface InnerImageProps {\n hasVideoFallback: boolean;\n}\n\ntype ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;\n\nexport const defaultAnimatedDivQa = 'animated-div';\n\nconst Image = (props: ImageAllProps) => {\n const {\n parallax,\n height,\n imageClassName,\n fullscreenClassName,\n isBackground,\n hasVideoFallback,\n video,\n fullscreen,\n disableImageSliderForArrayInput,\n qa,\n onLoad,\n onIntrinsicSizeChange,\n } = props;\n const image =\n Array.isArray(props.image) && disableImageSliderForArrayInput\n ? props.image[0]\n : props.image;\n\n const qaAttributes = getQaAttrubutes(\n qa,\n 'fullscreen-image',\n 'animate',\n 'background-image',\n 'image-view',\n 'slider-block',\n );\n const [scrollY, setScrollY] = React.useState(0);\n const [{springScrollY}, springSetScrollY] = useSpring(() => ({\n springScrollY: 0,\n config: config.molasses,\n }));\n\n let parallaxInterpolate: Interpolation<number, string> | string = '';\n\n React.useEffect(() => {\n if (parallax) {\n const handleScroll = () => setScrollY(window.scrollY);\n const debouncedHandler = debounce(handleScroll, 5);\n\n window.addEventListener('scroll', debouncedHandler, {passive: true});\n return () => window.removeEventListener('scroll', debouncedHandler);\n }\n\n return () => {};\n });\n\n if (parallax) {\n const parallaxLevel = 2;\n springSetScrollY.start({springScrollY: height && scrollY > height ? height : scrollY});\n parallaxInterpolate = springScrollY.to(\n (value) => `translateY(-${Number(value) / parallaxLevel}px)`,\n );\n }\n\n const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName);\n\n const renderFullscreenImage = (\n item: ImageProps,\n sliderData?: FullscreenImageProps['sliderData'],\n ) => {\n const itemData = getMediaImage(item);\n\n return (\n <FullscreenImage\n key={itemData.alt}\n {...itemData}\n imageClassName={imageClass}\n modalImageClass={fullscreenClassName}\n imageStyle={{height}}\n qa={qaAttributes.fullscreenImage}\n sliderData={sliderData}\n onLoad={onLoad}\n onIntrinsicSizeChange={onIntrinsicSizeChange}\n />\n );\n };\n\n const imageBackground = (oneImage: ImageProps) => {\n const imageData = getMediaImage(oneImage);\n return (\n <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>\n <BackgroundImage\n {...imageData}\n className={imageClass}\n style={{height}}\n qa={qaAttributes.backgroundImage}\n />\n </animated.div>\n );\n };\n\n const imageOnly = (oneImage: ImageProps) => {\n const imageData = getMediaImage(oneImage);\n return (\n <ImageView\n {...imageData}\n className={imageClass}\n style={{height}}\n qa={qaAttributes.imageView}\n onLoad={onLoad}\n onIntrinsicSizeChange={onIntrinsicSizeChange}\n />\n );\n };\n\n const imageSlider = (imageArray: ImageProps[]) => {\n const fullscreenItem = fullscreen === undefined || fullscreen;\n\n return (\n <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>\n {imageArray.map((item, index) => (\n <React.Fragment key={index}>\n {fullscreenItem\n ? renderFullscreenImage(item, {items: imageArray, initialIndex: index})\n : imageOnly(item)}\n </React.Fragment>\n ))}\n </SliderBlock>\n );\n };\n\n if (Array.isArray(image)) {\n return imageSlider(image);\n }\n\n if (fullscreen) {\n return renderFullscreenImage(image);\n }\n\n return isBackground ? imageBackground(image) : imageOnly(image);\n};\n\nexport default Image;\n"]}
1
+ {"version":3,"file":"Image.js","sourceRoot":"../../../../../src","sources":["components/Media/Image/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Interpolation, animated, config, useSpring} from '@react-spring/web';\nimport debounce from 'lodash/debounce';\n\nimport {SliderBlock} from '../../../blocks';\nimport {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport BackgroundImage from '../../BackgroundImage/BackgroundImage';\nimport FullscreenImage, {FullscreenImageProps} from '../../FullscreenImage/FullscreenImage';\nimport ImageView from '../../Image/Image';\n\nimport {getMediaImage} from './utils';\n\nimport './Image.scss';\n\nconst b = block('media-component-image');\n\nexport interface ImageAdditionProps {\n imageClassName?: string;\n isBackground?: boolean;\n fullscreen?: boolean;\n fullscreenClassName?: string;\n onLoad?: () => void;\n onIntrinsicSizeChange?: (size: {width: number; height: number}) => void;\n}\n\ninterface InnerImageProps {\n hasVideoFallback: boolean;\n}\n\ntype ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;\n\nexport const defaultAnimatedDivQa = 'animated-div';\n\nconst Image = (props: ImageAllProps) => {\n const {\n parallax,\n height,\n imageClassName,\n fullscreenClassName,\n isBackground,\n hasVideoFallback,\n video,\n fullscreen,\n disableImageSliderForArrayInput,\n qa,\n onLoad,\n onIntrinsicSizeChange,\n } = props;\n const image =\n Array.isArray(props.image) && disableImageSliderForArrayInput\n ? props.image[0]\n : props.image;\n\n const qaAttributes = getQaAttrubutes(\n qa,\n 'fullscreen-image',\n 'animate',\n 'background-image',\n 'image-view',\n 'slider-block',\n );\n const [scrollY, setScrollY] = React.useState(0);\n const [{springScrollY}, springSetScrollY] = useSpring(() => ({\n springScrollY: 0,\n config: config.molasses,\n }));\n\n let parallaxInterpolate: Interpolation<number, string> | string = '';\n\n React.useEffect(() => {\n if (parallax) {\n const handleScroll = () => setScrollY(window.scrollY);\n const debouncedHandler = debounce(handleScroll, 5);\n\n window.addEventListener('scroll', debouncedHandler, {passive: true});\n return () => window.removeEventListener('scroll', debouncedHandler);\n }\n\n return () => {};\n });\n\n if (parallax) {\n const parallaxLevel = 2;\n springSetScrollY.start({springScrollY: height && scrollY > height ? height : scrollY});\n parallaxInterpolate = springScrollY.to(\n (value) => `translateY(${-Number(value) / parallaxLevel}px)`,\n );\n }\n\n const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName);\n\n const renderFullscreenImage = (\n item: ImageProps,\n sliderData?: FullscreenImageProps['sliderData'],\n ) => {\n const itemData = getMediaImage(item);\n\n return (\n <FullscreenImage\n key={itemData.alt}\n {...itemData}\n imageClassName={imageClass}\n modalImageClass={fullscreenClassName}\n imageStyle={{height}}\n qa={qaAttributes.fullscreenImage}\n sliderData={sliderData}\n onLoad={onLoad}\n onIntrinsicSizeChange={onIntrinsicSizeChange}\n />\n );\n };\n\n const imageBackground = (oneImage: ImageProps) => {\n const imageData = getMediaImage(oneImage);\n return (\n <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>\n <BackgroundImage\n {...imageData}\n className={imageClass}\n style={{height}}\n qa={qaAttributes.backgroundImage}\n />\n </animated.div>\n );\n };\n\n const imageOnly = (oneImage: ImageProps) => {\n const imageData = getMediaImage(oneImage);\n return (\n <ImageView\n {...imageData}\n className={imageClass}\n style={{height}}\n qa={qaAttributes.imageView}\n onLoad={onLoad}\n onIntrinsicSizeChange={onIntrinsicSizeChange}\n />\n );\n };\n\n const imageSlider = (imageArray: ImageProps[]) => {\n const fullscreenItem = fullscreen === undefined || fullscreen;\n\n return (\n <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>\n {imageArray.map((item, index) => (\n <React.Fragment key={index}>\n {fullscreenItem\n ? renderFullscreenImage(item, {items: imageArray, initialIndex: index})\n : imageOnly(item)}\n </React.Fragment>\n ))}\n </SliderBlock>\n );\n };\n\n if (Array.isArray(image)) {\n return imageSlider(image);\n }\n\n if (fullscreen) {\n return renderFullscreenImage(image);\n }\n\n return isBackground ? imageBackground(image) : imageOnly(image);\n};\n\nexport default Image;\n"]}
@@ -55,6 +55,8 @@ unpredictable css rules order in build */
55
55
  }
56
56
  .pc-video-button__icon {
57
57
  margin-left: 1px;
58
+ height: var(--pc-video-button-icon-size, 24px);
59
+ width: var(--pc-video-button-icon-size, 24px);
58
60
  }
59
61
  @media only screen and (max-width: 577px) {
60
62
  .pc-video-button_text {
@@ -18,7 +18,7 @@ const VideoButton = ({ customButton, text, type, theme: initialTheme, className,
18
18
  return text;
19
19
  case PlayButtonType.Default:
20
20
  default:
21
- return _jsx(Icon, { className: b('icon'), data: PlayFill, size: 24 });
21
+ return _jsx(Icon, { className: b('icon'), data: PlayFill });
22
22
  }
23
23
  }, [text, type]);
24
24
  const theme = initialTheme || defaultVideoButtonSettings?.theme || PlayButtonThemes.Blue;
@@ -1 +1 @@
1
- {"version":3,"file":"VideoButton.js","sourceRoot":"../../../../src","sources":["components/VideoButton/VideoButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAC,sBAAsB,EAAC,sDAA6C;AAC5E,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAoC,gBAAgB,EAAE,cAAc,EAAC,8BAAqB;AACjG,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,6BAAoB;AAClD,OAAO,EAAC,IAAI,EAAC,qCAA4B;AAEzC,OAAO,mBAAmB,CAAC;AAQ3B,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,EACjB,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,KAAK,EAAE,YAAY,EACnB,SAAS,EACT,GAAG,EACH,EAAE,GACa,EAAE,EAAE;IACnB,MAAM,EAAC,0BAA0B,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAC9E,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAEhC,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACzC,QAAQ,IAAI,EAAE,CAAC;YACX,KAAK,cAAc,CAAC,IAAI;gBACpB,OAAO,IAAI,CAAC;YAChB,KAAK,cAAc,CAAC,OAAO,CAAC;YAC5B;gBACI,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC;QACxE,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAEjB,MAAM,KAAK,GAAG,YAAY,IAAI,0BAA0B,EAAE,KAAK,IAAI,gBAAgB,CAAC,IAAI,CAAC;IAEzF,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,KAAK,KAAK,gBAAgB,CAAC,MAAM,EAAE,CAAC;YACpC,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,YAAY,GAAG,0BAA0B,EAAE,MAAM;YACnD,CAAC,CAAC,cAAc,CAAC,0BAA0B,CAAC,MAAM,EAAE,YAAY,CAAC;YACjE,CAAC,CAAC,SAAS,CAAC;QAEhB,MAAM,YAAY,GAAG,CAAC,SAAiC,EAAE,EAAE;YACvD,OAAO,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC;QACrC,CAAC,CAAC;QAEF,OAAO;YACH,gCAAgC,EAAE,YAAY,CAAC,aAAa,CAAC;YAC7D,sCAAsC,EAAE,YAAY,CAAC,kBAAkB,CAAC;YACxE,kCAAkC,EAAE,YAAY,CAAC,eAAe,CAAC;YACjE,wCAAwC,EAAE,YAAY,CAAC,oBAAoB,CAAC;SACxD,CAAC;IAC7B,CAAC,EAAE,CAAC,YAAY,EAAE,0BAA0B,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAE9D,IAAI,YAAY,EAAE,CAAC;QACf,OAAO,YAAY,CAAC;IACxB,CAAC;IAED,OAAO,CACH,iBACI,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,EAAC,EAAE,SAAS,CAAC,gBACzC,IAAI,CAAC,MAAM,CAAC,EACxB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,YAEX,iBAAiB,GACb,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {PlayFill} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {useTheme} from '../../context/theme';\nimport {PlayButtonColors, PlayButtonProps, PlayButtonThemes, PlayButtonType} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {i18n} from '../ReactPlayer/i18n';\n\nimport './VideoButton.scss';\n\nexport interface VideoButtonProps extends PlayButtonProps {\n customButton?: React.ReactNode;\n ref?: React.LegacyRef<HTMLButtonElement>;\n id?: string;\n}\n\nconst b = block('video-button');\n\nconst VideoButton = ({\n customButton,\n text,\n type,\n theme: initialTheme,\n className,\n ref,\n id,\n}: VideoButtonProps) => {\n const {defaultVideoButtonSettings} = React.useContext(ProjectSettingsContext);\n const currentTheme = useTheme();\n\n const playButtonContent = React.useMemo(() => {\n switch (type) {\n case PlayButtonType.Text:\n return text;\n case PlayButtonType.Default:\n default:\n return <Icon className={b('icon')} data={PlayFill} size={24} />;\n }\n }, [text, type]);\n\n const theme = initialTheme || defaultVideoButtonSettings?.theme || PlayButtonThemes.Blue;\n\n const style = React.useMemo(() => {\n if (theme !== PlayButtonThemes.Custom) {\n return undefined;\n }\n\n const themedColors = defaultVideoButtonSettings?.colors\n ? getThemedValue(defaultVideoButtonSettings.colors, currentTheme)\n : undefined;\n\n const resolveColor = (colorName: keyof PlayButtonColors) => {\n return themedColors?.[colorName];\n };\n\n return {\n '--pc-video-button-circle-color': resolveColor('circleColor'),\n '--pc-video-button-circle-hover-color': resolveColor('circleHoverColor'),\n '--pc-video-button-triangle-color': resolveColor('triangleColor'),\n '--pc-video-button-triangle-hover-color': resolveColor('triangleHoverColor'),\n } as React.CSSProperties;\n }, [currentTheme, defaultVideoButtonSettings?.colors, theme]);\n\n if (customButton) {\n return customButton;\n }\n\n return (\n <button\n className={b({theme, text: Boolean(text)}, className)}\n aria-label={i18n('play')}\n ref={ref}\n id={id}\n style={style}\n >\n {playButtonContent}\n </button>\n );\n};\n\nexport default VideoButton;\n"]}
1
+ {"version":3,"file":"VideoButton.js","sourceRoot":"../../../../src","sources":["components/VideoButton/VideoButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAC,sBAAsB,EAAC,sDAA6C;AAC5E,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAoC,gBAAgB,EAAE,cAAc,EAAC,8BAAqB;AACjG,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,6BAAoB;AAClD,OAAO,EAAC,IAAI,EAAC,qCAA4B;AAEzC,OAAO,mBAAmB,CAAC;AAQ3B,MAAM,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,EACjB,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,KAAK,EAAE,YAAY,EACnB,SAAS,EACT,GAAG,EACH,EAAE,GACa,EAAE,EAAE;IACnB,MAAM,EAAC,0BAA0B,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAC9E,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAEhC,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACzC,QAAQ,IAAI,EAAE,CAAC;YACX,KAAK,cAAc,CAAC,IAAI;gBACpB,OAAO,IAAI,CAAC;YAChB,KAAK,cAAc,CAAC,OAAO,CAAC;YAC5B;gBACI,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAI,CAAC;QAC9D,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAEjB,MAAM,KAAK,GAAG,YAAY,IAAI,0BAA0B,EAAE,KAAK,IAAI,gBAAgB,CAAC,IAAI,CAAC;IAEzF,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,KAAK,KAAK,gBAAgB,CAAC,MAAM,EAAE,CAAC;YACpC,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,YAAY,GAAG,0BAA0B,EAAE,MAAM;YACnD,CAAC,CAAC,cAAc,CAAC,0BAA0B,CAAC,MAAM,EAAE,YAAY,CAAC;YACjE,CAAC,CAAC,SAAS,CAAC;QAEhB,MAAM,YAAY,GAAG,CAAC,SAAiC,EAAE,EAAE;YACvD,OAAO,YAAY,EAAE,CAAC,SAAS,CAAC,CAAC;QACrC,CAAC,CAAC;QAEF,OAAO;YACH,gCAAgC,EAAE,YAAY,CAAC,aAAa,CAAC;YAC7D,sCAAsC,EAAE,YAAY,CAAC,kBAAkB,CAAC;YACxE,kCAAkC,EAAE,YAAY,CAAC,eAAe,CAAC;YACjE,wCAAwC,EAAE,YAAY,CAAC,oBAAoB,CAAC;SACxD,CAAC;IAC7B,CAAC,EAAE,CAAC,YAAY,EAAE,0BAA0B,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAE9D,IAAI,YAAY,EAAE,CAAC;QACf,OAAO,YAAY,CAAC;IACxB,CAAC;IAED,OAAO,CACH,iBACI,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,EAAC,EAAE,SAAS,CAAC,gBACzC,IAAI,CAAC,MAAM,CAAC,EACxB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,YAEX,iBAAiB,GACb,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {PlayFill} from '@gravity-ui/icons';\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {useTheme} from '../../context/theme';\nimport {PlayButtonColors, PlayButtonProps, PlayButtonThemes, PlayButtonType} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {i18n} from '../ReactPlayer/i18n';\n\nimport './VideoButton.scss';\n\nexport interface VideoButtonProps extends PlayButtonProps {\n customButton?: React.ReactNode;\n ref?: React.LegacyRef<HTMLButtonElement>;\n id?: string;\n}\n\nconst b = block('video-button');\n\nconst VideoButton = ({\n customButton,\n text,\n type,\n theme: initialTheme,\n className,\n ref,\n id,\n}: VideoButtonProps) => {\n const {defaultVideoButtonSettings} = React.useContext(ProjectSettingsContext);\n const currentTheme = useTheme();\n\n const playButtonContent = React.useMemo(() => {\n switch (type) {\n case PlayButtonType.Text:\n return text;\n case PlayButtonType.Default:\n default:\n return <Icon className={b('icon')} data={PlayFill} />;\n }\n }, [text, type]);\n\n const theme = initialTheme || defaultVideoButtonSettings?.theme || PlayButtonThemes.Blue;\n\n const style = React.useMemo(() => {\n if (theme !== PlayButtonThemes.Custom) {\n return undefined;\n }\n\n const themedColors = defaultVideoButtonSettings?.colors\n ? getThemedValue(defaultVideoButtonSettings.colors, currentTheme)\n : undefined;\n\n const resolveColor = (colorName: keyof PlayButtonColors) => {\n return themedColors?.[colorName];\n };\n\n return {\n '--pc-video-button-circle-color': resolveColor('circleColor'),\n '--pc-video-button-circle-hover-color': resolveColor('circleHoverColor'),\n '--pc-video-button-triangle-color': resolveColor('triangleColor'),\n '--pc-video-button-triangle-hover-color': resolveColor('triangleHoverColor'),\n } as React.CSSProperties;\n }, [currentTheme, defaultVideoButtonSettings?.colors, theme]);\n\n if (customButton) {\n return customButton;\n }\n\n return (\n <button\n className={b({theme, text: Boolean(text)}, className)}\n aria-label={i18n('play')}\n ref={ref}\n id={id}\n style={style}\n >\n {playButtonContent}\n </button>\n );\n};\n\nexport default VideoButton;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "8.20.1",
3
+ "version": "8.21.1",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "type": "commonjs",
@@ -103,7 +103,7 @@
103
103
  "@gravity-ui/dynamic-forms": "^5.0.0",
104
104
  "@gravity-ui/i18n": "^1.7.0",
105
105
  "@gravity-ui/icons": "^2.18.0",
106
- "@react-spring/web": "^9.7.3",
106
+ "@react-spring/web": "^10.1.2",
107
107
  "ajv": "^8.12.0",
108
108
  "ajv-keywords": "^5.1.0",
109
109
  "final-form": "^4.20.9",
@@ -112,9 +112,9 @@
112
112
  "lodash": "^4.17.21",
113
113
  "monaco-editor": "^0.52.2",
114
114
  "react-final-form": "^6.5.9",
115
- "react-monaco-editor": "^0.53.0",
115
+ "react-monaco-editor": "^0.59.0",
116
116
  "react-player": "^2.9.0",
117
- "react-slick": "^0.29.0",
117
+ "react-slick": "^0.31.0",
118
118
  "react-transition-group": "^4.4.2",
119
119
  "react-waypoint": "^10.1.0",
120
120
  "sanitize-html": "2.12.1",
package/widget/index.js CHANGED
@@ -1 +1 @@
1
- export default "(self.webpackChunk_gravity_ui_page_constructor=self.webpackChunk_gravity_ui_page_constructor||[]).push([[6033],{16033:function(_,t,e){_.exports=function(_){\"use strict\";function t(_){return _&&\"object\"==typeof _&&\"default\"in _?_:{default:_}}var e=t(_),Y={name:\"zh-cn\",weekdays:\"星期日_星期一_星期二_星期三_星期四_星期五_星期六\".split(\"_\"),weekdaysShort:\"周日_周一_周二_周三_周四_周五_周六\".split(\"_\"),weekdaysMin:\"日_一_二_三_四_五_六\".split(\"_\"),months:\"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月\".split(\"_\"),monthsShort:\"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月\".split(\"_\"),ordinal:function(_,t){return\"W\"===t?_+\"周\":_+\"日\"},weekStart:1,yearStart:4,formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"YYYY/MM/DD\",LL:\"YYYY年M月D日\",LLL:\"YYYY年M月D日Ah点mm分\",LLLL:\"YYYY年M月D日ddddAh点mm分\",l:\"YYYY/M/D\",ll:\"YYYY年M月D日\",lll:\"YYYY年M月D日 HH:mm\",llll:\"YYYY年M月D日dddd HH:mm\"},relativeTime:{future:\"%s内\",past:\"%s前\",s:\"几秒\",m:\"1 分钟\",mm:\"%d 分钟\",h:\"1 小时\",hh:\"%d 小时\",d:\"1 天\",dd:\"%d 天\",M:\"1 个月\",MM:\"%d 个月\",y:\"1 年\",yy:\"%d 年\"},meridiem:function(_,t){var e=100*_+t;return e<600?\"凌晨\":e<900?\"早上\":e<1100?\"上午\":e<1300?\"中午\":e<1800?\"下午\":\"晚上\"}};return e.default.locale(Y,null,!0),Y}(e(74353))}}]);";
1
+ export default "(self.webpackChunk_gravity_ui_page_constructor=self.webpackChunk_gravity_ui_page_constructor||[]).push([[6007],{56007:function(_,t,e){_.exports=function(_){\"use strict\";function t(_){return _&&\"object\"==typeof _&&\"default\"in _?_:{default:_}}var e=t(_),Y={name:\"zh\",weekdays:\"星期日_星期一_星期二_星期三_星期四_星期五_星期六\".split(\"_\"),weekdaysShort:\"周日_周一_周二_周三_周四_周五_周六\".split(\"_\"),weekdaysMin:\"日_一_二_三_四_五_六\".split(\"_\"),months:\"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月\".split(\"_\"),monthsShort:\"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月\".split(\"_\"),ordinal:function(_,t){return\"W\"===t?_+\"周\":_+\"日\"},weekStart:1,yearStart:4,formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"YYYY/MM/DD\",LL:\"YYYY年M月D日\",LLL:\"YYYY年M月D日Ah点mm分\",LLLL:\"YYYY年M月D日ddddAh点mm分\",l:\"YYYY/M/D\",ll:\"YYYY年M月D日\",lll:\"YYYY年M月D日 HH:mm\",llll:\"YYYY年M月D日dddd HH:mm\"},relativeTime:{future:\"%s后\",past:\"%s前\",s:\"几秒\",m:\"1 分钟\",mm:\"%d 分钟\",h:\"1 小时\",hh:\"%d 小时\",d:\"1 天\",dd:\"%d 天\",M:\"1 个月\",MM:\"%d 个月\",y:\"1 年\",yy:\"%d 年\"},meridiem:function(_,t){var e=100*_+t;return e<600?\"凌晨\":e<900?\"早上\":e<1100?\"上午\":e<1300?\"中午\":e<1800?\"下午\":\"晚上\"}};return e.default.locale(Y,null,!0),Y}(e(74353))}}]);";