From 7da327c1312dc3e18d1bdebf9cc18038a8d66c5e Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Sun, 27 Aug 2023 23:04:57 +0300
Subject: [PATCH] Embed youtube video

---
 .../src/components/Common/EmbedYoutube.tsx    | 31 +++++++++++++
 .../src/components/Help/HelpRSLang.tsx        | 44 ++++++++++++++-----
 rsconcept/frontend/src/hooks/useWindowSize.ts | 31 +++++++++++++
 rsconcept/frontend/src/utils/constants.ts     |  4 ++
 4 files changed, 100 insertions(+), 10 deletions(-)
 create mode 100644 rsconcept/frontend/src/components/Common/EmbedYoutube.tsx
 create mode 100644 rsconcept/frontend/src/hooks/useWindowSize.ts

diff --git a/rsconcept/frontend/src/components/Common/EmbedYoutube.tsx b/rsconcept/frontend/src/components/Common/EmbedYoutube.tsx
new file mode 100644
index 00000000..bbb4da35
--- /dev/null
+++ b/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;
diff --git a/rsconcept/frontend/src/components/Help/HelpRSLang.tsx b/rsconcept/frontend/src/components/Help/HelpRSLang.tsx
index 3daac446..dfe749cf 100644
--- a/rsconcept/frontend/src/components/Help/HelpRSLang.tsx
+++ b/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>
   );
 }
diff --git a/rsconcept/frontend/src/hooks/useWindowSize.ts b/rsconcept/frontend/src/hooks/useWindowSize.ts
new file mode 100644
index 00000000..0bf2e8de
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts
index 933b6e94..226cf559 100644
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/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',