@gravity-ui/page-constructor 8.14.1 → 8.15.0

package/build/esm/components/VideoBlock/VideoBlock.css

@@ -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

@@ -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

@@ -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

@@ -1 +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 {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"]}
+{"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

@@ -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

@@ -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

@@ -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

package/build/esm/components/VideoButton/VideoButton.js.map

@@ -0,0 +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"]}

package/build/esm/context/projectSettingsContext/ProjectSettingsContext.d.ts

@@ -1,8 +1,15 @@
 import * as React from 'react';
+import { PlayButtonColors, PlayButtonProps } from "../../models/index.js";
+import { ThemeSupporting } from "../../utils/index.js";
+type DefaultVideoButtonSettings = Pick<PlayButtonProps, 'theme'> & {
+    colors?: ThemeSupporting<PlayButtonColors>;
+};
 export interface ProjectSettingsContextProps {
     disableCompress?: boolean;
     isAnimationEnabled?: boolean;
     renderInvisibleBlocks?: boolean;
     defaultYandexFormTheme?: string;
+    defaultVideoButtonSettings?: DefaultVideoButtonSettings;
 }
 export declare const ProjectSettingsContext: React.Context<ProjectSettingsContextProps>;
+export {};

package/build/esm/context/projectSettingsContext/ProjectSettingsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectSettingsContext.js","sourceRoot":"../../../../src","sources":["context/projectSettingsContext/ProjectSettingsContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAA8B,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nexport interface ProjectSettingsContextProps {\n    disableCompress?: boolean;\n    isAnimationEnabled?: boolean;\n    renderInvisibleBlocks?: boolean;\n    defaultYandexFormTheme?: string;\n}\n\nexport const ProjectSettingsContext = React.createContext<ProjectSettingsContextProps>({});\n"]}
+{"version":3,"file":"ProjectSettingsContext.js","sourceRoot":"../../../../src","sources":["context/projectSettingsContext/ProjectSettingsContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAA8B,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {PlayButtonColors, PlayButtonProps} from '../../models';\nimport {ThemeSupporting} from '../../utils';\n\ntype DefaultVideoButtonSettings = Pick<PlayButtonProps, 'theme'> & {\n    colors?: ThemeSupporting<PlayButtonColors>;\n};\n\nexport interface ProjectSettingsContextProps {\n    disableCompress?: boolean;\n    isAnimationEnabled?: boolean;\n    renderInvisibleBlocks?: boolean;\n    defaultYandexFormTheme?: string;\n    defaultVideoButtonSettings?: DefaultVideoButtonSettings;\n}\n\nexport const ProjectSettingsContext = React.createContext<ProjectSettingsContextProps>({});\n"]}

package/build/esm/models/constructor-items/common.d.ts

@@ -24,7 +24,8 @@ export declare enum PlayButtonType {
 }
 export declare enum PlayButtonThemes {
     Blue = "blue",
-    Grey = "grey"
+    Grey = "grey",
+    Custom = "custom"
 }
 export declare enum CustomControlsType {
     WithMuteButton = "with-mute-button",
@@ -195,6 +196,12 @@ export interface CustomControlsOptions {
     muteButtonShown?: boolean;
     positioning?: CustomControlsButtonPositioning;
 }
+export interface PlayButtonColors {
+    circleColor?: string;
+    circleHoverColor?: string;
+    triangleColor?: string;
+    triangleHoverColor?: string;
+}
 export interface PlayButtonProps extends ClassNameProps {
     type?: PlayButtonType;
     theme?: PlayButtonThemes;

package/build/esm/models/constructor-items/common.js

@@ -26,6 +26,7 @@ export var PlayButtonThemes;
 (function (PlayButtonThemes) {
     PlayButtonThemes["Blue"] = "blue";
     PlayButtonThemes["Grey"] = "grey";
+    PlayButtonThemes["Custom"] = "custom";
 })(PlayButtonThemes || (PlayButtonThemes = {}));
 export var CustomControlsType;
 (function (CustomControlsType) {

package/build/esm/models/constructor-items/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"../../../../src","sources":["models/constructor-items/common.ts"],"names":[],"mappings":"AAQA,QAAQ;AACR,MAAM,CAAN,IAAY,UAGX;AAHD,WAAY,UAAU;IAClB,+BAAiB,CAAA;IACjB,2BAAa,CAAA;AACjB,CAAC,EAHW,UAAU,KAAV,UAAU,QAGrB;AAED,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,+CAA2B,CAAA;IAC3B,yCAAqB,CAAA;AACzB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAED,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACvB,gCAAa,CAAA;IACb,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,oCAAiB,CAAA;IACjB,8BAAW,CAAA;AACf,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;AAED,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,+BAAa,CAAA;AACjB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAED,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,iCAAa,CAAA;IACb,iCAAa,CAAA;AACjB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,yDAAmC,CAAA;IACnC,oEAA8C,CAAA;AAClD,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,+BAIX;AAJD,WAAY,+BAA+B;IACvC,gDAAa,CAAA;IACb,kDAAe,CAAA;IACf,oDAAiB,CAAA;AACrB,CAAC,EAJW,+BAA+B,KAA/B,+BAA+B,QAI1C;AAED,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,mCAAiB,CAAA;AACrB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAED,MAAM,CAAN,IAAY,sBAGX;AAHD,WAAY,sBAAsB;IAC9B,6CAAmB,CAAA;IACnB,2CAAiB,CAAA;AACrB,CAAC,EAHW,sBAAsB,KAAtB,sBAAsB,QAGjC;AAED,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACjB,gCAAmB,CAAA;IACnB,6CAAgC,CAAA;AACpC,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAuED,SAAS;AAET,MAAM,CAAN,IAAY,MAIX;AAJD,WAAY,MAAM;IACd,6BAAmB,CAAA;IACnB,2BAAiB,CAAA;IACjB,2BAAiB,CAAA;AACrB,CAAC,EAJW,MAAM,KAAN,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"]}
+{"version":3,"file":"common.js","sourceRoot":"../../../../src","sources":["models/constructor-items/common.ts"],"names":[],"mappings":"AAQA,QAAQ;AACR,MAAM,CAAN,IAAY,UAGX;AAHD,WAAY,UAAU;IAClB,+BAAiB,CAAA;IACjB,2BAAa,CAAA;AACjB,CAAC,EAHW,UAAU,KAAV,UAAU,QAGrB;AAED,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,+CAA2B,CAAA;IAC3B,yCAAqB,CAAA;AACzB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAED,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACvB,gCAAa,CAAA;IACb,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,oCAAiB,CAAA;IACjB,8BAAW,CAAA;AACf,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;AAED,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,+BAAa,CAAA;AACjB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAED,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,iCAAa,CAAA;IACb,iCAAa,CAAA;IACb,qCAAiB,CAAA;AACrB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,yDAAmC,CAAA;IACnC,oEAA8C,CAAA;AAClD,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,+BAIX;AAJD,WAAY,+BAA+B;IACvC,gDAAa,CAAA;IACb,kDAAe,CAAA;IACf,oDAAiB,CAAA;AACrB,CAAC,EAJW,+BAA+B,KAA/B,+BAA+B,QAI1C;AAED,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,mCAAiB,CAAA;AACrB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAED,MAAM,CAAN,IAAY,sBAGX;AAHD,WAAY,sBAAsB;IAC9B,6CAAmB,CAAA;IACnB,2CAAiB,CAAA;AACrB,CAAC,EAHW,sBAAsB,KAAtB,sBAAsB,QAGjC;AAED,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACjB,gCAAmB,CAAA;IACnB,6CAAgC,CAAA;AACpC,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAuED,SAAS;AAET,MAAM,CAAN,IAAY,MAIX;AAJD,WAAY,MAAM;IACd,6BAAmB,CAAA;IACnB,2BAAiB,CAAA;IACjB,2BAAiB,CAAA;AACrB,CAAC,EAJW,MAAM,KAAN,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "8.14.1",
+  "version": "8.15.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "type": "commonjs",

package/server/models/constructor-items/common.d.ts

@@ -24,7 +24,8 @@ export declare enum PlayButtonType {
 }
 export declare enum PlayButtonThemes {
     Blue = "blue",
-    Grey = "grey"
+    Grey = "grey",
+    Custom = "custom"
 }
 export declare enum CustomControlsType {
     WithMuteButton = "with-mute-button",
@@ -195,6 +196,12 @@ export interface CustomControlsOptions {
     muteButtonShown?: boolean;
     positioning?: CustomControlsButtonPositioning;
 }
+export interface PlayButtonColors {
+    circleColor?: string;
+    circleHoverColor?: string;
+    triangleColor?: string;
+    triangleHoverColor?: string;
+}
 export interface PlayButtonProps extends ClassNameProps {
     type?: PlayButtonType;
     theme?: PlayButtonThemes;

package/server/models/constructor-items/common.js

@@ -29,6 +29,7 @@ var PlayButtonThemes;
 (function (PlayButtonThemes) {
     PlayButtonThemes["Blue"] = "blue";
     PlayButtonThemes["Grey"] = "grey";
+    PlayButtonThemes["Custom"] = "custom";
 })(PlayButtonThemes || (exports.PlayButtonThemes = PlayButtonThemes = {}));
 var CustomControlsType;
 (function (CustomControlsType) {

package/widget/index.js

@@ -1 +1 @@
-export default "(self.webpackChunk_gravity_ui_page_constructor=self.webpackChunk_gravity_ui_page_constructor||[]).push([[1349],{31349:function(_,t,Y){_.exports=function(_){\"use strict\";function t(_){return _&&\"object\"==typeof _&&\"default\"in _?_:{default:_}}var Y=t(_),e={name:\"zh-tw\",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?_+\"週\":_+\"日\"},formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"YYYY/MM/DD\",LL:\"YYYY年M月D日\",LLL:\"YYYY年M月D日 HH:mm\",LLLL:\"YYYY年M月D日dddd HH: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 Y=100*_+t;return Y<600?\"凌晨\":Y<900?\"早上\":Y<1100?\"上午\":Y<1300?\"中午\":Y<1800?\"下午\":\"晚上\"}};return Y.default.locale(e,null,!0),e}(Y(74353))}}]);";
+export default "(self.webpackChunk_gravity_ui_page_constructor=self.webpackChunk_gravity_ui_page_constructor||[]).push([[122],{87741:function(_,t,e){_.exports=function(_){\"use strict\";function t(_){return _&&\"object\"==typeof _&&\"default\"in _?_:{default:_}}var e=t(_),s={name:\"zh-hk\",months:\"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月\".split(\"_\"),monthsShort:\"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月\".split(\"_\"),weekdays:\"星期日_星期一_星期二_星期三_星期四_星期五_星期六\".split(\"_\"),weekdaysShort:\"週日_週一_週二_週三_週四_週五_週六\".split(\"_\"),weekdaysMin:\"日_一_二_三_四_五_六\".split(\"_\"),ordinal:function(_,t){return\"W\"===t?_+\"週\":_+\"日\"},formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"YYYY/MM/DD\",LL:\"YYYY年M月D日\",LLL:\"YYYY年M月D日 HH:mm\",LLLL:\"YYYY年M月D日dddd HH:mm\"},relativeTime:{future:\"%s內\",past:\"%s前\",s:\"幾秒\",m:\"一分鐘\",mm:\"%d 分鐘\",h:\"一小時\",hh:\"%d 小時\",d:\"一天\",dd:\"%d 天\",M:\"一個月\",MM:\"%d 個月\",y:\"一年\",yy:\"%d 年\"}};return e.default.locale(s,null,!0),s}(e(74353))}}]);";