@gravity-ui/page-constructor 5.0.1 → 5.1.1-alpha.0

package/build/cjs/components/BackgroundMedia/BackgroundMedia.js

@@ -13,6 +13,9 @@ const BackgroundMedia = (_a) => {
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'media');
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(null, className), style: { backgroundColor: color }, animate: animated, qa: qaAttributes.animate },
         react_1.default.createElement(Media_1.default, Object.assign({ className: b('media', { 'full-width-media': fullWidthMedia }, mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, qa: qaAttributes.media }, Object.assign({ height: 720, color,
-            parallax, video: isMobile ? undefined : video }, props)))));
+            parallax, video: isMobile ? undefined : video }, props), { 
+            // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+            // temporal solution for Safari 17
+            shouldPreload: false }))));
 };
 exports.default = BackgroundMedia;

package/build/cjs/components/DefaultVideo/DefaultVideo.d.ts

@@ -6,6 +6,7 @@ interface DefaultVideoProps {
     qa?: string;
     customBarControlsClassName?: string;
     className?: string;
+    shouldPreload?: boolean;
 }
 export declare const DefaultVideo: React.ForwardRefExoticComponent<DefaultVideoProps & React.RefAttributes<DefaultVideoRefType>>;
 export {};

package/build/cjs/components/DefaultVideo/DefaultVideo.js

@@ -3,18 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultVideo = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+// ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+// temporal solution for Safari 17
+const blockPreloadVideoMetadataContext_1 = require("../../context/blockPreloadVideoMetadataContext");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const utils_2 = require("../Media/Video/utils");
 const CustomBarControls_1 = tslib_1.__importDefault(require("../ReactPlayer/CustomBarControls"));
 const b = (0, utils_1.block)('default-video');
 exports.DefaultVideo = react_1.default.forwardRef((props, ref) => {
-    const { video, qa, customBarControlsClassName } = props;
+    const { video, qa, customBarControlsClassName, shouldPreload = true } = props;
     const { controls, customControlsOptions, muted: initiallyMuted = true } = video;
     const { muteButtonShown, positioning, type: customControlsType, } = customControlsOptions || {};
     const [isPaused, setIsPaused] = (0, react_1.useState)(false);
     const [isMuted, setIsMuted] = (0, react_1.useState)(initiallyMuted);
     const videoRef = (0, react_1.useRef)(null);
+    // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+    // temporal solution for Safari 17
+    const blockPreloadVideoMetadata = (0, react_1.useContext)(blockPreloadVideoMetadataContext_1.BlockPreloadVideoMetadataContext);
     // one may not use this hook and work with `ref` variable only, but
     // in this case one should support both function type and object type,
     // according to ForwardedRef type.
@@ -47,11 +53,22 @@ exports.DefaultVideo = react_1.default.forwardRef((props, ref) => {
             onPlayToggle();
         }
     }, [onPlayToggle, customControlsType]);
+    // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+    // temporal solution for Safari 17
+    // eslint-disable-next-line no-nested-ternary
+    const preload = blockPreloadVideoMetadata
+        ? shouldPreload
+            ? 'metadata'
+            : undefined
+        : 'metadata';
     return (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement("video", { disablePictureInPicture: true, playsInline: true, 
             // @ts-ignore
             // eslint-disable-next-line react/no-unknown-property
-            pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick }, (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type, "data-qa": qa })))),
+            pip: "false", className: b(), ref: videoRef, 
+            // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+            // temporal solution for Safari 17
+            preload: preload, muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick }, (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type, "data-qa": qa })))),
         controls === models_1.MediaVideoControlsType.Custom && (react_1.default.createElement(CustomBarControls_1.default, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
                 isMuted: Boolean(isMuted),
                 changeMute: onMuteToggle,

package/build/cjs/components/Media/Media.d.ts

@@ -6,6 +6,7 @@ export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAddi
     youtubeClassName?: string;
     autoplay?: boolean;
     onImageLoad?: () => void;
+    shouldPreload?: boolean;
 }
 export declare const Media: (props: MediaAllProps) => JSX.Element;
 export default Media;

package/build/cjs/components/Media/Media.js

@@ -12,7 +12,10 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, 
+    // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+    // temporal solution for Safari 17
+    shouldPreload, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
@@ -34,11 +37,16 @@ const Media = (props) => {
                 hasVideoFallback,
                 setHasVideoFallback,
                 ratio,
+                // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+                // temporal solution for Safari 17
+                shouldPreload,
             };
             if (fullscreen) {
                 result.push(react_1.default.createElement(FullscreenVideo_1.default, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
             else {
+                // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+                // temporal solution for Safari 17
                 result.push(react_1.default.createElement(Video_1.default, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
         }
@@ -74,6 +82,9 @@ const Media = (props) => {
         playButton,
         customBarControlsClassName,
         ratio,
+        // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+        // temporal solution for Safari 17
+        shouldPreload,
         youtubeClassName,
         autoplay,
         margins,

package/build/cjs/components/Media/Video/Video.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MediaComponentVideoProps, PlayButtonProps, QAProps } from '../../../models';
+import { LoopProps, MediaComponentVideoProps, PlayButtonProps, QAProps } from '../../../models';
 export interface VideoAdditionProps {
     playButton?: PlayButtonProps;
     customBarControlsClassName?: string;
@@ -9,7 +9,9 @@ export interface VideoAdditionProps {
 interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;
     hasVideoFallback: boolean;
+    shouldPreload?: boolean;
 }
 export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps & QAProps;
+export declare const getShouldPreloadMetadata: (loop: boolean | LoopProps | undefined) => boolean;
 declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;

package/build/cjs/components/Media/Video/Video.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getShouldPreloadMetadata = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const models_1 = require("../../../models");
@@ -7,8 +8,18 @@ const utils_1 = require("../../../utils");
 const DefaultVideo_1 = require("../../DefaultVideo/DefaultVideo");
 const ReactPlayer_1 = tslib_1.__importDefault(require("../../ReactPlayer/ReactPlayer"));
 const b = (0, utils_1.block)('media-component-video');
+const getShouldPreloadMetadata = (loop) => {
+    if (loop === undefined) {
+        return true;
+    }
+    if (typeof loop === 'boolean') {
+        return !loop;
+    }
+    return false;
+};
+exports.getShouldPreloadMetadata = getShouldPreloadMetadata;
 const Video = (props) => {
-    const { video, height, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, } = props;
+    const { video, height, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, shouldPreload, } = props;
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'source');
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -45,8 +56,14 @@ const Video = (props) => {
         ratio,
     ]);
     const defaultVideoBlock = (0, react_1.useMemo)(() => {
+        // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+        // temporal solution for Safari 17
+        const shouldPreloadLocal = (0, exports.getShouldPreloadMetadata)(video.loop);
         return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height }, "data-qa": qaAttributes.default },
-            react_1.default.createElement(DefaultVideo_1.DefaultVideo, { ref: ref, video: video, qa: qaAttributes.source }))) : null;
+            react_1.default.createElement(DefaultVideo_1.DefaultVideo, { ref: ref, video: video, qa: qaAttributes.source, 
+                // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+                // temporal solution for Safari 17
+                shouldPreload: shouldPreload ? shouldPreloadLocal : shouldPreload }))) : null;
     }, [
         video,
         hasVideoFallback,
@@ -54,6 +71,9 @@ const Video = (props) => {
         height,
         qaAttributes.default,
         qaAttributes.source,
+        // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+        // temporal solution for Safari 17
+        shouldPreload,
     ]);
     switch (video.type) {
         case models_1.MediaVideoType.Player:

package/build/cjs/containers/PageConstructor/Provider.d.ts

@@ -16,5 +16,6 @@ export interface PageConstructorProviderProps {
     projectSettings?: ProjectSettingsContextProps;
     analytics?: AnalyticsContextProps;
     image?: ImageContextProps;
+    blockPreloadVideoMetadata?: boolean;
 }
 export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;

package/build/cjs/containers/PageConstructor/Provider.js

@@ -5,6 +5,9 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const constants_1 = require("../../components/constants");
 const analyticsContext_1 = require("../../context/analyticsContext");
+// ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+// temporal solution for Safari 17
+const blockPreloadVideoMetadataContext_1 = require("../../context/blockPreloadVideoMetadataContext");
 const imageContext_1 = require("../../context/imageContext");
 const localeContext_1 = require("../../context/localeContext");
 const locationContext_1 = require("../../context/locationContext");
@@ -14,7 +17,10 @@ const projectSettingsContext_1 = require("../../context/projectSettingsContext")
 const ssrContext_1 = require("../../context/ssrContext");
 const theme_1 = require("../../context/theme");
 const PageConstructorProvider = (props) => {
-    const { isMobile, mapsContext = mapsContext_1.initialMapValue, locale = {}, location = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = constants_1.DEFAULT_THEME, children, image = {}, } = props;
+    const { isMobile, mapsContext = mapsContext_1.initialMapValue, locale = {}, location = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = constants_1.DEFAULT_THEME, children, image = {}, 
+    // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+    // temporal solution for Safari 17
+    blockPreloadVideoMetadata, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
         react_1.default.createElement(theme_1.ThemeContext.Provider, { value: { theme } }),
@@ -23,6 +29,9 @@ const PageConstructorProvider = (props) => {
         react_1.default.createElement(imageContext_1.ImageContext.Provider, { value: image }),
         react_1.default.createElement(locationContext_1.LocationContext.Provider, { value: location }),
         react_1.default.createElement(mobileContext_1.MobileContext.Provider, { value: Boolean(isMobile) }),
+        // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+        // temporal solution for Safari 17
+        react_1.default.createElement(blockPreloadVideoMetadataContext_1.BlockPreloadVideoMetadataContext.Provider, { value: Boolean(blockPreloadVideoMetadata) }),
         react_1.default.createElement(mapsContext_1.MapsContext.Provider, { value: mapsContext }),
         react_1.default.createElement(analyticsContext_1.AnalyticsContext.Provider, { value: analytics }),
         react_1.default.createElement(ssrContext_1.SSRContext.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),

package/build/cjs/context/blockPreloadVideoMetadataContext/blockPreloadVideoMetadataContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BlockPreloadVideoMetadataContext: React.Context<boolean>;

package/build/cjs/context/blockPreloadVideoMetadataContext/blockPreloadVideoMetadataContext.js

@@ -0,0 +1,8 @@
+"use strict";
+// ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+// temporal solution for Safari 17
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockPreloadVideoMetadataContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.BlockPreloadVideoMetadataContext = react_1.default.createContext(false);

package/build/cjs/context/blockPreloadVideoMetadataContext/index.d.ts

@@ -0,0 +1 @@
+export * from './blockPreloadVideoMetadataContext';

package/build/cjs/context/blockPreloadVideoMetadataContext/index.js

@@ -0,0 +1,6 @@
+"use strict";
+// ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+// temporal solution for Safari 17
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./blockPreloadVideoMetadataContext"), exports);

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

@@ -92,7 +92,7 @@ export interface AnchorProps {
 /**
  * @deprecated Component VideoBlock will be deleted, which uses this logic
  */
-interface LoopProps {
+export interface LoopProps {
     start: number;
     end?: number;
 }
@@ -358,4 +358,3 @@ export interface WithBorder {
      */
     disableShadow?: boolean;
 }
-export {};

package/build/esm/components/BackgroundMedia/BackgroundMedia.js

@@ -12,6 +12,9 @@ const BackgroundMedia = (_a) => {
     const qaAttributes = getQaAttrubutes(qa, 'media');
     return (React.createElement(AnimateBlock, { className: b(null, className), style: { backgroundColor: color }, animate: animated, qa: qaAttributes.animate },
         React.createElement(Media, Object.assign({ className: b('media', { 'full-width-media': fullWidthMedia }, mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, qa: qaAttributes.media }, Object.assign({ height: 720, color,
-            parallax, video: isMobile ? undefined : video }, props)))));
+            parallax, video: isMobile ? undefined : video }, props), { 
+            // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+            // temporal solution for Safari 17
+            shouldPreload: false }))));
 };
 export default BackgroundMedia;

package/build/esm/components/DefaultVideo/DefaultVideo.d.ts

@@ -7,6 +7,7 @@ interface DefaultVideoProps {
     qa?: string;
     customBarControlsClassName?: string;
     className?: string;
+    shouldPreload?: boolean;
 }
 export declare const DefaultVideo: React.ForwardRefExoticComponent<DefaultVideoProps & React.RefAttributes<DefaultVideoRefType>>;
 export {};

package/build/esm/components/DefaultVideo/DefaultVideo.js

@@ -1,4 +1,7 @@
-import React, { Fragment, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useContext, useImperativeHandle, useRef, useState, } from 'react';
+// ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+// temporal solution for Safari 17
+import { BlockPreloadVideoMetadataContext } from '../../context/blockPreloadVideoMetadataContext';
 import { CustomControlsType, MediaVideoControlsType } from '../../models';
 import { block } from '../../utils';
 import { getVideoTypesWithPriority } from '../Media/Video/utils';
@@ -6,12 +9,15 @@ import CustomBarControls from '../ReactPlayer/CustomBarControls';
 import './DefaultVideo.css';
 const b = block('default-video');
 export const DefaultVideo = React.forwardRef((props, ref) => {
-    const { video, qa, customBarControlsClassName } = props;
+    const { video, qa, customBarControlsClassName, shouldPreload = true } = props;
     const { controls, customControlsOptions, muted: initiallyMuted = true } = video;
     const { muteButtonShown, positioning, type: customControlsType, } = customControlsOptions || {};
     const [isPaused, setIsPaused] = useState(false);
     const [isMuted, setIsMuted] = useState(initiallyMuted);
     const videoRef = useRef(null);
+    // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+    // temporal solution for Safari 17
+    const blockPreloadVideoMetadata = useContext(BlockPreloadVideoMetadataContext);
     // one may not use this hook and work with `ref` variable only, but
     // in this case one should support both function type and object type,
     // according to ForwardedRef type.
@@ -44,11 +50,22 @@ export const DefaultVideo = React.forwardRef((props, ref) => {
             onPlayToggle();
         }
     }, [onPlayToggle, customControlsType]);
+    // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+    // temporal solution for Safari 17
+    // eslint-disable-next-line no-nested-ternary
+    const preload = blockPreloadVideoMetadata
+        ? shouldPreload
+            ? 'metadata'
+            : undefined
+        : 'metadata';
     return (React.createElement(Fragment, null,
         React.createElement("video", { disablePictureInPicture: true, playsInline: true, 
             // @ts-ignore
             // eslint-disable-next-line react/no-unknown-property
-            pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type, "data-qa": qa })))),
+            pip: "false", className: b(), ref: videoRef, 
+            // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+            // temporal solution for Safari 17
+            preload: preload, muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type, "data-qa": qa })))),
         controls === MediaVideoControlsType.Custom && (React.createElement(CustomBarControls, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
                 isMuted: Boolean(isMuted),
                 changeMute: onMuteToggle,

package/build/esm/components/Media/Media.d.ts

@@ -7,6 +7,7 @@ export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAddi
     youtubeClassName?: string;
     autoplay?: boolean;
     onImageLoad?: () => void;
+    shouldPreload?: boolean;
 }
 export declare const Media: (props: MediaAllProps) => JSX.Element;
 export default Media;

package/build/esm/components/Media/Media.js

@@ -9,7 +9,10 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, 
+    // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+    // temporal solution for Safari 17
+    shouldPreload, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
@@ -31,11 +34,16 @@ export const Media = (props) => {
                 hasVideoFallback,
                 setHasVideoFallback,
                 ratio,
+                // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+                // temporal solution for Safari 17
+                shouldPreload,
             };
             if (fullscreen) {
                 result.push(React.createElement(FullscreenVideo, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
             else {
+                // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+                // temporal solution for Safari 17
                 result.push(React.createElement(Video, Object.assign({}, videoProps, { qa: qaAttributes.video })));
             }
         }
@@ -71,6 +79,9 @@ export const Media = (props) => {
         playButton,
         customBarControlsClassName,
         ratio,
+        // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+        // temporal solution for Safari 17
+        shouldPreload,
         youtubeClassName,
         autoplay,
         margins,

package/build/esm/components/Media/Video/Video.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MediaComponentVideoProps, PlayButtonProps, QAProps } from '../../../models';
+import { LoopProps, MediaComponentVideoProps, PlayButtonProps, QAProps } from '../../../models';
 import './Video.css';
 export interface VideoAdditionProps {
     playButton?: PlayButtonProps;
@@ -10,7 +10,9 @@ export interface VideoAdditionProps {
 interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;
     hasVideoFallback: boolean;
+    shouldPreload?: boolean;
 }
 export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps & QAProps;
+export declare const getShouldPreloadMetadata: (loop: boolean | LoopProps | undefined) => boolean;
 declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;

package/build/esm/components/Media/Video/Video.js

@@ -1,12 +1,21 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import { MediaVideoType } from '../../../models';
+import { MediaVideoType, } from '../../../models';
 import { block, getQaAttrubutes } from '../../../utils';
 import { DefaultVideo } from '../../DefaultVideo/DefaultVideo';
 import ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';
 import './Video.css';
 const b = block('media-component-video');
+export const getShouldPreloadMetadata = (loop) => {
+    if (loop === undefined) {
+        return true;
+    }
+    if (typeof loop === 'boolean') {
+        return !loop;
+    }
+    return false;
+};
 const Video = (props) => {
-    const { video, height, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, } = props;
+    const { video, height, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, shouldPreload, } = props;
     const qaAttributes = getQaAttrubutes(qa, 'source');
     const ref = useRef(null);
     useEffect(() => {
@@ -43,8 +52,14 @@ const Video = (props) => {
         ratio,
     ]);
     const defaultVideoBlock = useMemo(() => {
+        // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+        // temporal solution for Safari 17
+        const shouldPreloadLocal = getShouldPreloadMetadata(video.loop);
         return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height }, "data-qa": qaAttributes.default },
-            React.createElement(DefaultVideo, { ref: ref, video: video, qa: qaAttributes.source }))) : null;
+            React.createElement(DefaultVideo, { ref: ref, video: video, qa: qaAttributes.source, 
+                // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+                // temporal solution for Safari 17
+                shouldPreload: shouldPreload ? shouldPreloadLocal : shouldPreload }))) : null;
     }, [
         video,
         hasVideoFallback,
@@ -52,6 +67,9 @@ const Video = (props) => {
         height,
         qaAttributes.default,
         qaAttributes.source,
+        // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+        // temporal solution for Safari 17
+        shouldPreload,
     ]);
     switch (video.type) {
         case MediaVideoType.Player:

package/build/esm/containers/PageConstructor/Provider.d.ts

@@ -16,5 +16,6 @@ export interface PageConstructorProviderProps {
     projectSettings?: ProjectSettingsContextProps;
     analytics?: AnalyticsContextProps;
     image?: ImageContextProps;
+    blockPreloadVideoMetadata?: boolean;
 }
 export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;

package/build/esm/containers/PageConstructor/Provider.js

@@ -1,6 +1,9 @@
 import React, { Fragment } from 'react';
 import { DEFAULT_THEME } from '../../components/constants';
 import { AnalyticsContext } from '../../context/analyticsContext';
+// ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+// temporal solution for Safari 17
+import { BlockPreloadVideoMetadataContext } from '../../context/blockPreloadVideoMetadataContext';
 import { ImageContext } from '../../context/imageContext';
 import { LocaleContext } from '../../context/localeContext';
 import { LocationContext } from '../../context/locationContext';
@@ -10,7 +13,10 @@ import { ProjectSettingsContext, } from '../../context/projectSettingsContext';
 import { SSRContext } from '../../context/ssrContext';
 import { ThemeContext } from '../../context/theme';
 export const PageConstructorProvider = (props) => {
-    const { isMobile, mapsContext = initialMapValue, locale = {}, location = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, image = {}, } = props;
+    const { isMobile, mapsContext = initialMapValue, locale = {}, location = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, image = {}, 
+    // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+    // temporal solution for Safari 17
+    blockPreloadVideoMetadata, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
         React.createElement(ThemeContext.Provider, { value: { theme } }),
@@ -19,6 +25,9 @@ export const PageConstructorProvider = (props) => {
         React.createElement(ImageContext.Provider, { value: image }),
         React.createElement(LocationContext.Provider, { value: location }),
         React.createElement(MobileContext.Provider, { value: Boolean(isMobile) }),
+        // ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+        // temporal solution for Safari 17
+        React.createElement(BlockPreloadVideoMetadataContext.Provider, { value: Boolean(blockPreloadVideoMetadata) }),
         React.createElement(MapsContext.Provider, { value: mapsContext }),
         React.createElement(AnalyticsContext.Provider, { value: analytics }),
         React.createElement(SSRContext.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),

package/build/esm/context/blockPreloadVideoMetadataContext/blockPreloadVideoMetadataContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BlockPreloadVideoMetadataContext: React.Context<boolean>;

package/build/esm/context/blockPreloadVideoMetadataContext/blockPreloadVideoMetadataContext.js

@@ -0,0 +1,4 @@
+// ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+// temporal solution for Safari 17
+import React from 'react';
+export const BlockPreloadVideoMetadataContext = React.createContext(false);

package/build/esm/context/blockPreloadVideoMetadataContext/index.d.ts

@@ -0,0 +1 @@
+export * from './blockPreloadVideoMetadataContext';

package/build/esm/context/blockPreloadVideoMetadataContext/index.js

@@ -0,0 +1,3 @@
+// ISSUE-853 https://github.com/gravity-ui/page-constructor/issues/853
+// temporal solution for Safari 17
+export * from './blockPreloadVideoMetadataContext';

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

@@ -92,7 +92,7 @@ export interface AnchorProps {
 /**
  * @deprecated Component VideoBlock will be deleted, which uses this logic
  */
-interface LoopProps {
+export interface LoopProps {
     start: number;
     end?: number;
 }
@@ -358,4 +358,3 @@ export interface WithBorder {
      */
     disableShadow?: boolean;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.0.1",
+  "version": "5.1.1-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -83,7 +83,7 @@
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/components": "^3.0.0",
     "@gravity-ui/dynamic-forms": "^4.0.0",
-    "@gravity-ui/i18n": "^1.2.0",
+    "@gravity-ui/i18n": "^1.3.0",
     "@react-spring/web": "^9.7.3",
     "ajv": "^8.12.0",
     "ajv-keywords": "^5.1.0",
@@ -116,13 +116,13 @@
     "@babel/preset-typescript": "^7.22.5",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@diplodoc/transform": "^4.10.4",
+    "@diplodoc/transform": "^4.10.8",
     "@gravity-ui/eslint-config": "^2.0.0",
     "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.0.0",
+    "@gravity-ui/uikit": "^6.2.0",
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-knobs": "^7.0.2",

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

@@ -92,7 +92,7 @@ export interface AnchorProps {
 /**
  * @deprecated Component VideoBlock will be deleted, which uses this logic
  */
-interface LoopProps {
+export interface LoopProps {
     start: number;
     end?: number;
 }
@@ -358,4 +358,3 @@ export interface WithBorder {
      */
     disableShadow?: boolean;
 }
-export {};