Embed youtube video

rsconcept/frontend/src/components/Common/EmbedYoutube.tsx

@@ -0,0 +1,31 @@
+interface EmbedYoutubeProps {
+  videoID: string
+  pxHeight: number
+  pxWidth?: number
+}
+
+function EmbedYoutube({ videoID, pxHeight, pxWidth }: EmbedYoutubeProps) {
+  if (!pxWidth) {
+    pxWidth = pxHeight * 16 / 9;
+    console.log(pxWidth);
+  }
+  return (
+    <div 
+      className='relative'
+      style={{height: 0, paddingBottom: `${pxHeight}px`, paddingLeft: `${pxWidth}px`}}
+    >
+      <iframe
+        className='absolute top-0 left-0 clr-border'
+        style={{minHeight: `${pxHeight}px`, minWidth: `${pxWidth}px`}}
+        width={`${pxWidth}px`}
+        height={`${pxHeight}px`}
+        src={`https://www.youtube.com/embed/${videoID}`}
+        allow='accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+        allowFullScreen
+        title='Встроенное видео Youtube'
+      />
+    </div>
+  );
+}
+
+export default EmbedYoutube;

rsconcept/frontend/src/components/Help/HelpRSLang.tsx

@@ -1,16 +1,40 @@
-import { urls } from '../../utils/constants';
+import { useMemo } from 'react';
+
+import useWindowSize from '../../hooks/useWindowSize';
+import { urls, youtube } from '../../utils/constants';
+import EmbedYoutube from '../Common/EmbedYoutube';
+
+const OPT_VIDEO_H = 1080
 
 function HelpRSLang() {
+  const windowSize = useWindowSize();
+
+  const videoHeight = useMemo(
+  () => {
+    const viewH = windowSize.height ?? 0;
+    const viewW = windowSize.width ?? 0;
+    return Math.min(OPT_VIDEO_H, viewH - 370, Math.floor((viewW - 250)*9/16));
+  }, [windowSize]);
+
   return (
-    <div>
-      <h1>Язык родов структур</h1>
-      <p>Формальная запись (<u>экспликация</u>) концептуальных схем осуществляется с помощью языка родов структур. Данный математический аппарат основан на аксиоматической теории множеств Цермелло-Френкеля и аппарате родов структур Н.Бурбаки.</p>
-      <p>Для ознакомления с основами родов структур можно использовать следующие материалы:</p>
-      <ul>
-        <li>1. <a className='underline' href={urls.intro_video}>Краткое введение в мат. аппарат</a></li>
-        <li>2. <a className='underline' href={urls.full_course}>Видео лекций по мат. аппарату для 4 курса (второй семестр 2022-23 год)</a></li>
-        <li>3. <a className='underline' href={urls.ponomarev}>Учебник И. Н. Пономарева</a></li>
-      </ul>
+    <div className='flex flex-col w-full gap-4'>
+      <div>
+        <h1>Язык родов структур</h1>
+        <p>Формальная запись (<u>экспликация</u>) концептуальных схем осуществляется с помощью языка родов структур.</p>
+        <p>Данный математический аппарат основан на аксиоматической теории множеств Цермелло-Френкеля и аппарате родов структур Н.Бурбаки.</p>
+        <p>Для ознакомления с основами родов структур можно использовать следующие материалы:</p>
+        <ul>
+          <li>1. <a className='underline' href={urls.intro_video}>Краткое введение в мат. аппарат</a></li>
+          <li>2. <a className='underline' href={urls.full_course}>Видео лекций по мат. аппарату для 4 курса (второй семестр 2022-23 год)</a></li>
+          <li>3. <a className='underline' href={urls.ponomarev}>Учебник И. Н. Пономарева</a></li>
+        </ul>
+      </div>
+      <div className='justify-center hidden w-full md:flex fleex-col'>
+        <EmbedYoutube
+          videoID={youtube.intro}
+          pxHeight={videoHeight}
+        />
+      </div>
     </div>
   );
 }

rsconcept/frontend/src/hooks/useWindowSize.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+function useWindowSize() {
+  const isClient = typeof window === "object";
+
+  function getSize() {
+    return {
+      width: isClient ? window.innerWidth : undefined,
+      height: isClient ? window.innerHeight : undefined
+    };
+  }
+
+  const [windowSize, setWindowSize] = useState(getSize);
+
+  useEffect(
+  () => {
+    if (!isClient) {
+      return;
+    }
+    function handleResize() {
+      setWindowSize(getSize());
+    }
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return windowSize;
+}
+
+export default useWindowSize;

rsconcept/frontend/src/utils/constants.ts

@@ -13,6 +13,10 @@ const dev = {
 export const config = process.env.NODE_ENV === 'production' ? prod : dev;
 export const TIMEOUT_UI_REFRESH = 100;
 
+export const youtube = {
+  intro: '0Ty9mu9sOJo'
+};
+
 export const urls = {
   concept: 'https://www.acconcept.ru/',
   exteor32: 'https://drive.google.com/open?id=1IHlMMwaYlAUBRSxU1RU_hXM5mFU9-oyK&usp=drive_fs',