diff --git a/src/blocks/IFrameBlock/IFrameBlock.scss b/src/blocks/IFrameBlock/IFrameBlock.scss new file mode 100644 index 000000000000..6ea757f85e30 --- /dev/null +++ b/src/blocks/IFrameBlock/IFrameBlock.scss @@ -0,0 +1,23 @@ +@use '~@gravity-ui/page-constructor/styles/styles.scss' as pcStyles; +@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables; +@use '../../variables.scss'; + +$block: '.#{variables.$ns}iframe-block'; + +#{$block} { + @include pcStyles.animate(); + + &__wrapper { + position: relative; + width: 100%; + height: 0; + } + + &__iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} diff --git a/src/blocks/IFrameBlock/IFrameBlock.tsx b/src/blocks/IFrameBlock/IFrameBlock.tsx new file mode 100644 index 000000000000..6e8e6f61354f --- /dev/null +++ b/src/blocks/IFrameBlock/IFrameBlock.tsx @@ -0,0 +1,48 @@ +import {Animatable, AnimateBlock} from '@gravity-ui/page-constructor'; +import React from 'react'; + +import {block} from '../../utils'; +import {CustomBlock} from '../constants'; + +import './IFrameBlock.scss'; + +const b = block('iframe-block'); + +export type IframeProps = Animatable & { + src: string; + width: number; + height: number; + allow?: string; + frameBorder?: number; + scrolling?: string; +}; + +export type IframeModel = IframeProps & { + type: CustomBlock.Iframe; +}; + +export const IFrameBlock: React.FC = ({ + animated, + src, + width, + height, + allow, + frameBorder = 0, + scrolling = 'no', +}) => { + return ( + +
+ +
+
+ ); +}; + +export default IFrameBlock; diff --git a/src/blocks/constants.ts b/src/blocks/constants.ts index 2d2736fd53f1..73f986cca6a2 100644 --- a/src/blocks/constants.ts +++ b/src/blocks/constants.ts @@ -6,4 +6,5 @@ export enum CustomBlock { Templates = 'templates', GithubStars = 'github-stars-promotion', Contributors = 'contributors', + Iframe = 'iframe', } diff --git a/src/blocks/types.ts b/src/blocks/types.ts index 9aa89f212a3e..e9d3f8ba5570 100644 --- a/src/blocks/types.ts +++ b/src/blocks/types.ts @@ -3,6 +3,7 @@ import {CustomExtendedFeaturesModel} from './CustomExtendedFeatures/CustomExtend import {CustomHeaderModel} from './CustomHeader/CustomHeader'; import {ExamplesModel} from './Examples/Examples'; import {GithubStarsModel} from './GithubStarsBlock/GithubStarsBlock'; +import {IframeModel} from './IFrameBlock/IFrameBlock'; import {RoadmapModel} from './RoadmapBlock/RoadmapBlock'; import {TemplatesModel} from './TemplatesBlock/TemplatesBlock'; @@ -13,4 +14,5 @@ export type CustomBlockModel = | RoadmapModel | TemplatesModel | GithubStarsModel - | ContributorsModel; + | ContributorsModel + | IframeModel; diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx index cf7a57723703..a8d37298f5d0 100644 --- a/src/components/Landing/Landing.tsx +++ b/src/components/Landing/Landing.tsx @@ -9,6 +9,7 @@ import {CustomExtendedFeatures} from '../../blocks/CustomExtendedFeatures/Custom import {CustomHeader} from '../../blocks/CustomHeader/CustomHeader'; import {Examples} from '../../blocks/Examples/Examples'; import {GithubStarsBlock} from '../../blocks/GithubStarsBlock/GithubStarsBlock'; +import {IFrameBlock} from '../../blocks/IFrameBlock/IFrameBlock'; import {RoadmapBlock} from '../../blocks/RoadmapBlock/RoadmapBlock'; import TemplatesBlock from '../../blocks/TemplatesBlock/TemplatesBlock'; import {CustomBlock} from '../../blocks/constants'; @@ -60,6 +61,7 @@ export const Landing: React.FC = () => { [CustomBlock.Roadmap]: RoadmapBlock, [CustomBlock.Templates]: TemplatesBlock, [CustomBlock.Contributors]: ContributorsBlock, + [CustomBlock.Iframe]: IFrameBlock, }, }} /> diff --git a/src/content/landing.ts b/src/content/landing.ts index ea824c84f25f..b12885c87dc1 100644 --- a/src/content/landing.ts +++ b/src/content/landing.ts @@ -76,6 +76,13 @@ export const getLanding = (t: TFunction): CustomPageContent => ({ href: 'https://disk.yandex.ru/d/TSMeaU8yvEeVrw', }, }, + { + type: CustomBlock.Iframe, + width: 560, + height: 315, + src: 'https://runtime.strm.yandex.ru/player/episode/vpleycdol66bubppvqg7?autoplay=1&mute=1', + allow: 'autoplay; fullscreen; accelerometer; gyroscope; picture-in-picture; encrypted-media', + }, { type: CustomBlock.CustomExtendedFeatures, animated: false,