Media modal (#72)

* Media modal, CMS
2026-02-28 18:54:09 +00:00 · 2022-05-26 16:30:44 +02:00 · 2022-05-26 16:30:44 +02:00 · a0b77abec7
commit a0b77abec7
parent 56a35ca0a6
8 changed files with 422 additions and 93 deletions
--- a/package.json
+++ b/package.json
@ -23,6 +23,7 @@
    "@graphql-codegen/typescript-operations": "^2.3.5",
    "@juggle/resize-observer": "^3.3.1",
    "@radix-ui/react-polymorphic": "^0.0.14",
+    "@reach/dialog": "^0.17.0",
    "@types/lodash": "^4.14.182",
    "@types/marked": "^4.0.3",
    "clsx": "^1.1.1",
@ -47,6 +48,7 @@
    "react-merge-refs": "^1.1.0",
    "react-query": "^3.35.0",
    "react-use-measure": "^2.1.1",
+    "react-youtube": "^9.0.2",
    "sharp": "^0.30.4",
    "tiny-json-http": "^7.4.2"
  },
--- a/src/components/common/modal/index.tsx
+++ b/src/components/common/modal/index.tsx
@ -0,0 +1,28 @@
+import '@reach/dialog/styles.css'
+
+import { DialogContent, DialogOverlay } from '@reach/dialog'
+import { ReactNode } from 'react'
+
+import s from './modal.module.scss'
+
+interface Props {
+  children: ReactNode
+  showDialog: boolean
+  close: () => void
+}
+
+function Modal({ children, showDialog, close }: Props) {
+  return (
+    <DialogOverlay
+      className={s.modal__bg}
+      isOpen={showDialog}
+      onDismiss={close}
+    >
+      <DialogContent aria-label="modal opened" className={s.modal}>
+        {children}
+      </DialogContent>
+    </DialogOverlay>
+  )
+}
+
+export default Modal
--- a/src/components/common/modal/modal.module.scss
+++ b/src/components/common/modal/modal.module.scss
@ -0,0 +1,40 @@
+@import '~/css/helpers';
+
+.modal {
+  @include respond-to('mobile') {
+    width: 90vw;
+  }
+
+  min-width: tovw(600px, 'default', 600px);
+  background-color: unset;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 50vw;
+  transform: translate(-50%, -50%);
+  padding: 0;
+  margin: 0;
+  animation: fadein 1200ms;
+
+  &__bg {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgb(0 0 0 / 0.5);
+    z-index: 50;
+    backdrop-filter: blur(2px);
+    animation: fadein 800ms;
+  }
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
--- a/src/components/common/video/index.tsx
+++ b/src/components/common/video/index.tsx
@ -0,0 +1,28 @@
+import YouTube from 'react-youtube'
+
+import s from './video.module.scss'
+
+interface Props {
+  videoLink: string
+}
+
+function Video({ videoLink }: Props) {
+  const youtubeOptions = {
+    height: '100%',
+    width: '100%',
+    frameBorder: '0',
+    playerVars: {
+      autoplay: 0,
+      rel: 0,
+      modestbranding: 1
+    }
+  }
+
+  return (
+    <div className={s.video__container}>
+      <YouTube opts={youtubeOptions} videoId={videoLink} />
+    </div>
+  )
+}
+
+export default Video
--- a/src/components/common/video/video.module.scss
+++ b/src/components/common/video/video.module.scss
@ -0,0 +1,29 @@
+// .video__container {
+//   width: 80vw;
+//   aspect-ratio: 16 / 9;
+//   border-top: 5px solid var(--color-grey-light);
+//   border-bottom: 5px solid var(--color-grey-light);
+// }
+
+@import '~/css/helpers';
+
+.video__container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  filter: opacity(100%) grayscale(0);
+  transition: filter 900ms;
+  border-top: tovw(1px, 'default', 1px) solid var(--color-white);
+  border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
+  aspect-ratio: 16 / 9;
+
+  > div {
+    width: 100%;
+    height: 100%;
+
+    iframe {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
--- a/src/components/sections/newsroom/media/index.tsx
+++ b/src/components/sections/newsroom/media/index.tsx
@ -1,8 +1,12 @@
 import { useKeenSlider } from 'keen-slider/react'
+import { useEffect, useState } from 'react'

+import Modal from '~/components/common/modal'
+import Video from '~/components/common/video'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
+import { useMedia } from '~/hooks/use-media'

 import s from './media.module.scss'

@ -21,6 +25,17 @@ interface Props {
 }

 const Media = ({ data }: Props) => {
+  const isMobile = useMedia('(max-width: 900px)')
+
+  const [showDialog, setShowDialog] = useState(false)
+  const [videoLink, setVideoLink] = useState<string>('')
+
+  const close = () => setShowDialog(false)
+  const open = (link: string) => {
+    setVideoLink(link)
+    setShowDialog(true)
+  }
+
  const [sliderRef] = useKeenSlider<HTMLDivElement>({
    initial: 0,
    loop: true,
@ -35,99 +50,133 @@ const Media = ({ data }: Props) => {
    }
  })

+  useEffect(() => {
+    const html = document.querySelector('html')
+
+    if (showDialog) {
+      showDialog && html?.style.setProperty('overflow', 'hidden')
+      showDialog &&
+        html?.style.setProperty('margin-right', `${!isMobile ? '17px' : '0px'}`)
+    }
+
+    if (!showDialog) {
+      !showDialog && html?.style.removeProperty('overflow')
+      !showDialog && html?.style.removeProperty('margin-right')
+    }
+  }, [isMobile, showDialog])
+
  return (
-    <Section className={s['section']}>
-      <Container className={s['container']}>
-        <div className={s['header']}>
-          <Heading as="h2" variant="md">
-            {data?.mediaHeading}
-          </Heading>
-          <span>04</span>
-        </div>
-        <div className={`${s.media__block} keen-slider`} ref={sliderRef}>
-          <div className={`${s.item} keen-slider__slide`}>
-            <div className={s['image__container']}>
-              <img
-                alt="image"
-                loading="lazy"
-                src="/images/newsroom/prev01.jpg"
-              />
-              <img
-                alt="play"
-                loading="lazy"
-                className={s.play}
-                src="/images/newsroom/play.svg"
-              />
+    <>
+      <Section className={s['section']}>
+        <Container className={s['container']}>
+          <div className={s['header']}>
+            <Heading as="h2" variant="md">
+              {data?.mediaHeading}
+            </Heading>
+            <span>04</span>
+          </div>
+          <div className={`${s.media__block} keen-slider`} ref={sliderRef}>
+            <div className={`${s.item} keen-slider__slide`}>
+              <div
+                className={s['image__container']}
+                onClick={() => open(data?.mediaVideo01Link)}
+              >
+                <img
+                  alt="image"
+                  loading="lazy"
+                  src="/images/newsroom/prev01.jpg"
+                />
+                <img
+                  alt="play"
+                  loading="lazy"
+                  className={s.play}
+                  src="/images/newsroom/play.svg"
+                />
+              </div>
+              <div className={s['content']}>
+                <Heading as="h2" variant="sm" font="tthoves">
+                  {data?.mediaVideo01Label}
+                </Heading>
+              </div>
            </div>
-            <div className={s['content']}>
-              <Heading as="h2" variant="sm" font="tthoves">
-                {data?.mediaVideo01Label}
-              </Heading>
+            <div className={`${s.item} keen-slider__slide`}>
+              <div
+                className={s['image__container']}
+                onClick={() => open(data?.mediaVideo02Link)}
+              >
+                <img
+                  alt="image"
+                  loading="lazy"
+                  src="/images/newsroom/prev02.jpg"
+                />
+                <img
+                  alt="play"
+                  loading="lazy"
+                  className={s.play}
+                  src="/images/newsroom/play.svg"
+                />
+              </div>
+              <div className={s['content']}>
+                <Heading as="h2" variant="sm" font="tthoves">
+                  {data?.mediaVideo02Label}
+                </Heading>
+              </div>
+            </div>
+            <div className={`${s.item} keen-slider__slide`}>
+              <div
+                className={s['image__container']}
+                onClick={() => open(data?.mediaVideo03Link)}
+              >
+                <img
+                  alt="image"
+                  loading="lazy"
+                  src="/images/newsroom/prev03.jpg"
+                />
+                <img
+                  alt="play"
+                  loading="lazy"
+                  className={s.play}
+                  src="/images/newsroom/play.svg"
+                />
+              </div>
+              <div className={s['content']}>
+                <Heading as="h2" variant="sm" font="tthoves">
+                  {data?.mediaVideo03Label}
+                </Heading>
+              </div>
+            </div>
+            <div className={`${s.item} keen-slider__slide`}>
+              <div
+                className={s['image__container']}
+                onClick={() => open(data?.mediaVideo04Link)}
+              >
+                <img
+                  alt="image"
+                  loading="lazy"
+                  src="/images/newsroom/prev04.jpg"
+                />
+                <img
+                  alt="play"
+                  loading="lazy"
+                  className={s.play}
+                  src="/images/newsroom/play.svg"
+                />
+              </div>
+              <div className={s['content']}>
+                <Heading as="h2" variant="sm" font="tthoves">
+                  {data?.mediaVideo04Label}
+                </Heading>
+              </div>
            </div>
          </div>
-          <div className={`${s.item} keen-slider__slide`}>
-            <div className={s['image__container']}>
-              <img
-                alt="image"
-                loading="lazy"
-                src="/images/newsroom/prev02.jpg"
-              />
-              <img
-                alt="play"
-                loading="lazy"
-                className={s.play}
-                src="/images/newsroom/play.svg"
-              />
-            </div>
-            <div className={s['content']}>
-              <Heading as="h2" variant="sm" font="tthoves">
-                {data?.mediaVideo02Label}
-              </Heading>
-            </div>
-          </div>
-          <div className={`${s.item} keen-slider__slide`}>
-            <div className={s['image__container']}>
-              <img
-                alt="image"
-                loading="lazy"
-                src="/images/newsroom/prev03.jpg"
-              />
-              <img
-                alt="play"
-                loading="lazy"
-                className={s.play}
-                src="/images/newsroom/play.svg"
-              />
-            </div>
-            <div className={s['content']}>
-              <Heading as="h2" variant="sm" font="tthoves">
-                {data?.mediaVideo03Label}
-              </Heading>
-            </div>
-          </div>
-          <div className={`${s.item} keen-slider__slide`}>
-            <div className={s['image__container']}>
-              <img
-                alt="image"
-                loading="lazy"
-                src="/images/newsroom/prev04.jpg"
-              />
-              <img
-                alt="play"
-                loading="lazy"
-                className={s.play}
-                src="/images/newsroom/play.svg"
-              />
-            </div>
-            <div className={s['content']}>
-              <Heading as="h2" variant="sm" font="tthoves">
-                {data?.mediaVideo04Label}
-              </Heading>
-            </div>
-          </div>
-        </div>
-      </Container>
-    </Section>
+        </Container>
+      </Section>
+
+      <Modal showDialog={showDialog} close={close}>
+        <Video videoLink={videoLink} />
+        {/* <div>culo</div> */}
+      </Modal>
+    </>
  )
 }

--- a/src/css/global.scss
+++ b/src/css/global.scss
@ -76,8 +76,8 @@ html.has-custom-cursor ::before {
 }

 body {
-  background-color: var(--color-black);
  overflow-x: hidden;
+  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-tthoves);
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -436,6 +436,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.12.13":
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
+  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7":
  version "7.16.7"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@ -1009,6 +1016,35 @@
  resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz#fc6cefee6686db8c5a7ff14c8c1b9b5abdee325b"
  integrity sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==

+"@reach/dialog@^0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.17.0.tgz#81c48dd4405945dfc6b6c3e5e125db2c4324e9e8"
+  integrity sha512-AnfKXugqDTGbeG3c8xDcrQDE4h9b/vnc27Sa118oQSquz52fneUeX9MeFb5ZEiBJK8T5NJpv7QUTBIKnFCAH5A==
+  dependencies:
+    "@reach/portal" "0.17.0"
+    "@reach/utils" "0.17.0"
+    prop-types "^15.7.2"
+    react-focus-lock "^2.5.2"
+    react-remove-scroll "^2.4.3"
+    tslib "^2.3.0"
+
+"@reach/portal@0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.17.0.tgz#1dd69ffc8ffc8ba3e26dd127bf1cc4b15f0c6bdc"
+  integrity sha512-+IxsgVycOj+WOeNPL2NdgooUdHPSY285wCtj/iWID6akyr4FgGUK7sMhRM9aGFyrGpx2vzr+eggbUmAVZwOz+A==
+  dependencies:
+    "@reach/utils" "0.17.0"
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
+"@reach/utils@0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.17.0.tgz#3d1d2ec56d857f04fe092710d8faee2b2b121303"
+  integrity sha512-M5y8fCBbrWeIsxedgcSw6oDlAMQDkl5uv3VnMVJ7guwpf4E48Xlh1v66z/1BgN/WYe2y8mB/ilFD2nysEfdGeA==
+  dependencies:
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
 "@rushstack/eslint-patch@1.0.8":
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.8.tgz#be3e914e84eacf16dbebd311c0d0b44aa1174c64"
@ -2157,7 +2193,7 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, d
  dependencies:
    ms "2.1.2"

-debug@^2.1.3, debug@^2.6.9:
+debug@^2.1.3, debug@^2.6.6, debug@^2.6.9:
  version "2.6.9"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@ -2257,6 +2293,11 @@ detect-libc@^2.0.0, detect-libc@^2.0.1:
  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd"
  integrity sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==

+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detect-node@^2.0.4, detect-node@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
@ -2764,7 +2805,7 @@ extract-files@^9.0.0:
  resolved "https://registry.yarnpkg.com/extract-files/-/extract-files-9.0.0.tgz#8a7744f2437f81f5ed3250ed9f1550de902fe54a"
  integrity sha512-CvdFfHkC95B4bBBk36hcEmvdR2awOdhhVUYH6S/zrVj3477zven/fJMYg7121h4T1xHZC+tetUpubpAhxwI7hQ==

-fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@ -2896,6 +2937,13 @@ flatted@^3.1.0:
  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
  integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==

+focus-lock@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.11.2.tgz#aeef3caf1cea757797ac8afdebaec8fd9ab243ed"
+  integrity sha512-pZ2bO++NWLHhiKkgP1bEXHhR1/OjVcSvlCJ98aNJDFeb7H5OOQaO+SKOZle6041O9rv2tmbrO4JzClAvDUHf0g==
+  dependencies:
+    tslib "^2.0.3"
+
 form-data-encoder@^1.7.1:
  version "1.7.2"
  resolved "https://registry.yarnpkg.com/form-data-encoder/-/form-data-encoder-1.7.2.tgz#1f1ae3dccf58ed4690b86d87e4f57c654fbab040"
@ -2976,6 +3024,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
    has "^1.0.3"
    has-symbols "^1.0.1"

+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-stdin@^8.0.0:
  version "8.0.0"
  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
@ -3917,6 +3970,11 @@ listr@^0.14.3:
    p-map "^2.0.0"
    rxjs "^6.3.3"

+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
+
 locate-path@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@ -4828,7 +4886,7 @@ promise@^7.1.1:
  dependencies:
    asap "~2.0.3"

-prop-types@^15.5.10, prop-types@^15.8.1:
+prop-types@15.8.1, prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -4870,6 +4928,13 @@ rc@^1.2.7, rc@^1.2.8:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

+react-clientside-effect@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
+  integrity sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+
 react-datocms@^3.0.12:
  version "3.0.12"
  resolved "https://registry.yarnpkg.com/react-datocms/-/react-datocms-3.0.12.tgz#d0cccb0bf0171569cb2f48e86a420fca4a4fb790"
@ -4902,6 +4967,18 @@ react-fast-marquee@^1.3.1:
  resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.3.1.tgz#e026ecbf95e73f287c94af9233bed5886913883c"
  integrity sha512-JUlQMU+IVVNKV+D4BRfRaNEaBj+VyHcI0uupBKyeFhkSY2GBkKw7oGvpNdCkPtKd8Q3H0M5eY7PyUj7AdmKCRA==

+react-focus-lock@^2.5.2:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.9.1.tgz#094cfc19b4f334122c73bb0bff65d77a0c92dd16"
+  integrity sha512-pSWOQrUmiKLkffPO6BpMXN7SNKXMsuOakl652IBuALAu1esk+IcpJyM+ALcYzPTTFz1rD0R54aB9A4HuP5t1Wg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    focus-lock "^0.11.2"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.2.6"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-hook-form@^7.30.0:
  version "7.30.0"
  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.30.0.tgz#c9e2fd54d3627e43bd94bf38ef549df2e80c1371"
@ -4940,6 +5017,34 @@ react-query@^3.35.0:
    broadcast-channel "^3.4.1"
    match-sorter "^6.0.2"

+react-remove-scroll-bar@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.1.tgz#9f13b05b249eaa57c8d646c1ebb83006b3581f5f"
+  integrity sha512-IvGX3mJclEF7+hga8APZczve1UyGMkMG+tjS0o/U1iLgvZRpjFAQEUBJ4JETfvbNlfNnZnoDyWJCICkA15Mghg==
+  dependencies:
+    react-style-singleton "^2.2.0"
+    tslib "^2.0.0"
+
+react-remove-scroll@^2.4.3:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.3.tgz#a152196e710e8e5811be39dc352fd8a90b05c961"
+  integrity sha512-NQ1bXrxKrnK5pFo/GhLkXeo3CrK5steI+5L+jynwwIemvZyfXqaL0L5BzwJd7CSwNCU723DZaccvjuyOdoy3Xw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.1"
+    react-style-singleton "^2.2.0"
+    tslib "^2.0.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
+react-style-singleton@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.0.tgz#70f45f5fef97fdb9a52eed98d1839fa6b9032b22"
+  integrity sha512-nK7mN92DMYZEu3cQcAhfwE48NpzO5RpxjG4okbSqRRbfal9Pk+fG2RdQXTMp+f6all1hB9LIJSt+j7dCYrU11g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react-use-measure@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
@ -4947,6 +5052,15 @@ react-use-measure@^2.1.1:
  dependencies:
    debounce "^1.2.1"

+react-youtube@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-9.0.2.tgz#86edf107b5c8537e7e46eb79b1b26f52de728d8b"
+  integrity sha512-qgNXo+axgsWtEqZlesSy+ruV2xaDW2NQFTFx0zqfeA3QyE8QEsyLMuTCF6aC4LyMMf+LsHCSGQw2gTngVkb6NQ==
+  dependencies:
+    fast-deep-equal "3.1.3"
+    prop-types "15.8.1"
+    youtube-player "5.5.2"
+
 react@^18.0.0:
  version "18.0.0"
  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
@ -5361,6 +5475,11 @@ sirv@^1.0.7:
    mrmime "^1.0.0"
    totalist "^1.0.0"

+sister@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4"
+  integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==
+
 slash@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@ -5851,6 +5970,11 @@ tiny-json-http@^7.4.2:
  resolved "https://registry.yarnpkg.com/tiny-json-http/-/tiny-json-http-7.4.2.tgz#2948d7a7f650d69df65f10982f126b5c5520ce3d"
  integrity sha512-+3ns4PfQTLaF69zGASkAfDoOEVmwYTXSDrU6VR93h317uFOW7evFzKa7Ih9JzPHiYSee3lUXHLAGhws2wFSexQ==

+tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 title-case@^3.0.3:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/title-case/-/title-case-3.0.3.tgz#bc689b46f02e411f1d1e1d081f7c3deca0489982"
@ -5939,6 +6063,11 @@ tslib@^2, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@~2.3.0:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==

+tslib@^2.0.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tsutils@^3.21.0:
  version "3.21.0"
  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@ -6068,6 +6197,13 @@ url-parse-lax@^3.0.0:
  dependencies:
    prepend-http "^2.0.0"

+use-callback-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
+
 use-deep-compare-effect@^1.6.1:
  version "1.8.1"
  resolved "https://registry.yarnpkg.com/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz#ef0ce3b3271edb801da1ec23bf0754ef4189d0c6"
@ -6076,6 +6212,14 @@ use-deep-compare-effect@^1.6.1:
    "@babel/runtime" "^7.12.5"
    dequal "^2.0.2"

+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@ -6332,3 +6476,12 @@ yocto-queue@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+youtube-player@5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.2.tgz#052b86b1eabe21ff331095ffffeae285fa7f7cb5"
+  integrity sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==
+  dependencies:
+    debug "^2.6.6"
+    load-script "^1.0.0"
+    sister "^3.0.0"