Add IFrameBlock (#313)

* Add IFrameBlock

* Fix styles

* Fix

* fix: change link to prod translation

---------

Co-authored-by: timofeyevvv <[email protected]>

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%;
+    }
+}

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<IframeProps> = ({
+    animated,
+    src,
+    width,
+    height,
+    allow,
+    frameBorder = 0,
+    scrolling = 'no',
+}) => {
+    return (
+        <AnimateBlock className={b()} animate={animated}>
+            <div className={b('wrapper')} style={{paddingBottom: `${(height * 100) / width}%`}}>
+                <iframe
+                    className={b('iframe')}
+                    src={src}
+                    allow={allow}
+                    frameBorder={frameBorder}
+                    scrolling={scrolling}
+                ></iframe>
+            </div>
+        </AnimateBlock>
+    );
+};
+
+export default IFrameBlock;

src/blocks/constants.ts

@@ -6,4 +6,5 @@ export enum CustomBlock {
     Templates = 'templates',
     GithubStars = 'github-stars-promotion',
     Contributors = 'contributors',
+    Iframe = 'iframe',
 }

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;

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,
                     },
                 }}
             />

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,