From 6c7289744c3a8d6917273744c2f50fc0a10eb969 Mon Sep 17 00:00:00 2001
From: inmake <inmake.ru@gmail.com>
Date: Wed, 16 Oct 2024 17:59:42 +0500
Subject: [PATCH] upd

---
 src/App.tsx              | 108 ++++++++++++++++++++-------------------
 src/ScheduledPage.tsx    |  16 ++++++
 src/components/Video.tsx |  14 ++---
 src/pages/StreamPage.tsx |   5 ++
 4 files changed, 83 insertions(+), 60 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7df5439..2b37b70 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -84,6 +84,8 @@ function App() {
       location = "a2";
     }
 
+    console.log("location", location);
+
     setLoading(true);
 
     try {
@@ -145,11 +147,11 @@ function App() {
               />
 
               <div className="2xl:mt-[72px] lg:mt-16 sm:mt-[88px] mt-14 relative">
-                <div className="absolute flex justify-center items-center w-full -top-8 blur-sm">
+                <div className="absolute flex items-center justify-center w-full -top-8 blur-sm">
                   <img src="/images/shapes/shape-1.svg" alt="" className="" />
                 </div>
 
-                <div className="grid sm:grid-cols-2 lg:gap-4 sm:gap-3 gap-4">
+                <div className="grid gap-4 sm:grid-cols-2 lg:gap-4 sm:gap-3">
                   <p className="2xl:text-[64px] xl:text-[52px] text-[40px] text-gradient w-fit font-gilroy leading-none font-medium">
                     <Trans i18nKey={"main.title"}>
                       Доступные
@@ -167,23 +169,23 @@ function App() {
                   </p>
                 </div>
 
-                <div className="sm:mt-16 mt-8 grid sm:grid-cols-1 lg:gap-4 sm:gap-3 gap-2">
+                <div className="grid gap-2 mt-8 sm:mt-16 sm:grid-cols-1 lg:gap-4 sm:gap-3">
                   {/* <div
                     className="group relative sm:h-full h-[264px] bg-gray-700 bg-no-repeat bg-center bg-cover"
                     style={{
                       backgroundImage: `url("/images/cards/upside.jpg")`,
                     }}
                   >
-                    <div className="bg-gradient-card h-full transition-opacity group-hover:opacity-60 duration-300"></div>
+                    <div className="h-full transition-opacity duration-300 bg-gradient-card group-hover:opacity-60"></div>
 
-                    <div className="p-6 absolute bottom-0 space-y-6">
+                    <div className="absolute bottom-0 p-6 space-y-6">
                       <div>
-                        <p className="xl:text-2xl text-xl font-gilroy font-semibold">
+                        <p className="text-xl font-semibold xl:text-2xl font-gilroy">
                           <Trans i18nKey={"main.cards.title4"}>
                             ЖК «Upside Towers»
                           </Trans>
                         </p>
-                        <p className="lg:text-sm text-xs">
+                        <p className="text-xs lg:text-sm">
                           <Trans i18nKey={"main.cards.city3"}>
                             Россия, Москва
                           </Trans>
@@ -192,7 +194,7 @@ function App() {
 
                       <button
                         onClick={() => void startStream("upsideTowersDev")}
-                        className="flex bg-gradient rounded-full p-2 gap-0 group-hover:gap-1 group-hover:pr-4 group-hover:pl-6 transition-all duration-300"
+                        className="flex gap-0 p-2 transition-all duration-300 rounded-full bg-gradient group-hover:gap-1 group-hover:pr-4 group-hover:pl-6"
                       >
                         <span className="font-medium w-0 opacity-0 group-hover:w-[82px] group-hover:opacity-100 overflow-hidden transition-all duration-300">
                           <Trans i18nKey={"main.cards.button"}>Запустить</Trans>
@@ -202,7 +204,7 @@ function App() {
                     </div>
                   </div> */}
 
-                  <div className="grid lg:grid-cols-2 lg:gap-4 sm:gap-3 gap-2">
+                  <div className="grid gap-2 lg:grid-cols-2 lg:gap-4 sm:gap-3">
                     {i18n.language === "ru" ? (
                       <>
                         <div
@@ -211,16 +213,16 @@ function App() {
                             backgroundImage: `url("/images/cards/nks.jpg")`,
                           }}
                         >
-                          <div className="bg-gradient-card h-full transition-opacity group-hover:opacity-50 duration-300"></div>
+                          <div className="h-full transition-opacity duration-300 bg-gradient-card group-hover:opacity-50"></div>
 
-                          <div className="p-6 absolute bottom-0 space-y-6">
+                          <div className="absolute bottom-0 p-6 space-y-6">
                             <div>
-                              <p className="xl:text-2xl text-xl font-gilroy font-semibold">
+                              <p className="text-xl font-semibold xl:text-2xl font-gilroy">
                                 <Trans i18nKey={"main.cards.title"}>
                                   МФК «Revolution towers»
                                 </Trans>
                               </p>
-                              <p className="lg:text-sm text-xs">
+                              <p className="text-xs lg:text-sm">
                                 <Trans i18nKey={"main.cards.city1"}>
                                   Россия, Екатеринбург
                                 </Trans>
@@ -229,7 +231,7 @@ function App() {
 
                             <button
                               onClick={() => void startStream("nksJukovaDev")}
-                              className="flex bg-gradient rounded-full p-2 gap-0 group-hover:gap-1 group-hover:pr-4 group-hover:pl-6 transition-all duration-300"
+                              className="flex gap-0 p-2 transition-all duration-300 rounded-full bg-gradient group-hover:gap-1 group-hover:pr-4 group-hover:pl-6"
                             >
                               <span className="font-medium w-0 opacity-0 group-hover:w-[82px] group-hover:opacity-100 overflow-hidden transition-all duration-300">
                                 <Trans i18nKey={"main.cards.button"}>
@@ -247,16 +249,16 @@ function App() {
                             backgroundImage: `url("/images/cards/liferes.jpg")`,
                           }}
                         >
-                          <div className="bg-gradient-card h-full transition-opacity group-hover:opacity-50 duration-300"></div>
+                          <div className="h-full transition-opacity duration-300 bg-gradient-card group-hover:opacity-50"></div>
 
-                          <div className="p-6 absolute bottom-0 space-y-6">
+                          <div className="absolute bottom-0 p-6 space-y-6">
                             <div>
-                              <p className="xl:text-2xl text-xl font-gilroy font-semibold">
+                              <p className="text-xl font-semibold xl:text-2xl font-gilroy">
                                 <Trans i18nKey={"main.cards.title2"}>
                                   ЖК «Life Резиденция»
                                 </Trans>
                               </p>
-                              <p className="lg:text-sm text-xs">
+                              <p className="text-xs lg:text-sm">
                                 <Trans i18nKey={"main.cards.city2"}>
                                   Россия, Тюмень
                                 </Trans>
@@ -265,7 +267,7 @@ function App() {
 
                             <button
                               onClick={() => void startStream("lifeResidence")}
-                              className="flex bg-gradient rounded-full p-2 gap-0 group-hover:gap-1 group-hover:pr-4 group-hover:pl-6 transition-all duration-300"
+                              className="flex gap-0 p-2 transition-all duration-300 rounded-full bg-gradient group-hover:gap-1 group-hover:pr-4 group-hover:pl-6"
                             >
                               <span className="font-medium w-0 opacity-0 group-hover:w-[82px] group-hover:opacity-100 overflow-hidden transition-all duration-300">
                                 <Trans i18nKey={"main.cards.button"}>
@@ -283,16 +285,16 @@ function App() {
                             backgroundImage: `url("/images/cards/aivaz.jpg")`,
                           }}
                         >
-                          <div className="bg-gradient-card h-full transition-opacity group-hover:opacity-90 duration-300"></div>
+                          <div className="h-full transition-opacity duration-300 bg-gradient-card group-hover:opacity-90"></div>
 
-                          <div className="p-6 absolute bottom-0 space-y-6">
+                          <div className="absolute bottom-0 p-6 space-y-6">
                             <div>
-                              <p className="xl:text-2xl text-xl font-gilroy font-semibold">
+                              <p className="text-xl font-semibold xl:text-2xl font-gilroy">
                                 <Trans i18nKey={"main.cards.title3"}>
                                   ЖК «Айвазовский City»
                                 </Trans>
                               </p>
-                              <p className="lg:text-sm text-xs">
+                              <p className="text-xs lg:text-sm">
                                 <Trans i18nKey={"main.cards.city2"}>
                                   Россия, Тюмень
                                 </Trans>
@@ -301,7 +303,7 @@ function App() {
 
                             <button
                               onClick={() => void startStream("IvazowskyDev")}
-                              className="flex bg-gradient rounded-full p-2 gap-0 group-hover:gap-1 group-hover:pr-4 group-hover:pl-6 transition-all duration-300"
+                              className="flex gap-0 p-2 transition-all duration-300 rounded-full bg-gradient group-hover:gap-1 group-hover:pr-4 group-hover:pl-6"
                             >
                               <span className="font-medium w-0 opacity-0 group-hover:w-[82px] group-hover:opacity-100 overflow-hidden transition-all duration-300">
                                 <Trans i18nKey={"main.cards.button"}>
@@ -320,19 +322,19 @@ function App() {
                           backgroundImage: `url("/images/cards/shipyard.jpg")`,
                         }}
                       >
-                        <div className="bg-gradient-card h-full transition-opacity group-hover:opacity-90 duration-300"></div>
+                        <div className="h-full transition-opacity duration-300 bg-gradient-card group-hover:opacity-90"></div>
 
-                        <div className="p-6 absolute bottom-0 space-y-6">
+                        <div className="absolute bottom-0 p-6 space-y-6">
                           <div>
-                            <p className="xl:text-2xl text-xl font-gilroy font-semibold">
+                            <p className="text-xl font-semibold xl:text-2xl font-gilroy">
                               IMI Saudi Shipyard
                             </p>
-                            <p className="lg:text-sm text-xs">Saudi Arabia</p>
+                            <p className="text-xs lg:text-sm">Saudi Arabia</p>
                           </div>
 
                           <button
                             onClick={() => void startStream("ShipyardSaudiDev")}
-                            className="flex bg-gradient rounded-full p-2 gap-0 group-hover:gap-1 group-hover:pr-4 group-hover:pl-6 transition-all duration-300"
+                            className="flex gap-0 p-2 transition-all duration-300 rounded-full bg-gradient group-hover:gap-1 group-hover:pr-4 group-hover:pl-6"
                           >
                             <span className="font-medium w-0 opacity-0 group-hover:w-[82px] group-hover:opacity-100 overflow-hidden transition-all duration-300">
                               <Trans i18nKey={"main.cards.button"}>
@@ -349,9 +351,9 @@ function App() {
               </div>
 
               <div className="lg:mt-40 sm:mt-[120px] mt-[88px]">
-                <div className=" grid xl:grid-cols-3 lg:grid-cols-2 lg:gap-4 gap-8">
+                <div className="grid gap-8  xl:grid-cols-3 lg:grid-cols-2 lg:gap-4">
                   <div className="flex flex-col justify-between gap-8 pb-4 border-b border-[#3D425C]">
-                    <div className="flex flex-col xl:gap-8 gap-6">
+                    <div className="flex flex-col gap-6 xl:gap-8">
                       <p className="2xl:text-[64px] xl:text-5xl text-[40px] text-gradient font-gilroy w-fit leading-none font-medium">
                         <Trans i18nKey={"signUp.title"}>
                           Запись на
@@ -361,7 +363,7 @@ function App() {
                           демонстрацию
                         </Trans>
                       </p>
-                      <p className="2xl:text-base text-sm">
+                      <p className="text-sm 2xl:text-base">
                         <Trans i18nKey={"signUp.desc"}>
                           Запись на демонстрацию может быть
                           <br />
@@ -372,9 +374,9 @@ function App() {
                       </p>
                       <button
                         onClick={() => setIsOpen(true)}
-                        className="group relative px-6 py-2 bg-gradient rounded-full lg:text-base text-sm font-medium leading-normal w-fit"
+                        className="relative px-6 py-2 text-sm font-medium leading-normal rounded-full group bg-gradient lg:text-base w-fit"
                       >
-                        <div className="absolute top-0 left-0 w-full h-full rounded-full bg-black opacity-0 group-hover:opacity-10 transition-all"></div>
+                        <div className="absolute top-0 left-0 w-full h-full transition-all bg-black rounded-full opacity-0 group-hover:opacity-10"></div>
                         <span className="relative">
                           <Trans i18nKey={"signUp.button"}>Записаться</Trans>
                         </span>
@@ -402,16 +404,16 @@ function App() {
               </div>
 
               <div className="lg:mt-40 sm:mt-[120px] mt-[88px]">
-                <div className="grid lg:grid-cols-4 grid-cols-1 lg:gap-4 gap-6">
+                <div className="grid grid-cols-1 gap-6 lg:grid-cols-4 lg:gap-4">
                   <div className="col-span-1">
-                    <div className="grid lg:grid-cols-1 sm:grid-cols-2 lg:gap-6 gap-4">
+                    <div className="grid gap-4 lg:grid-cols-1 sm:grid-cols-2 lg:gap-6">
                       <p className="2xl:text-[64px] xl:text-5xl text-[40px] font-gilroy text-gradient font-medium w-fit leading-none">
                         <Trans i18nKey={"feedback.title"}>
                           Свяжитесь
                           <br />с нами
                         </Trans>
                       </p>
-                      <p className="2xl:text-xl lg:text-lg font-gilroy font-semibold leading-tight">
+                      <p className="font-semibold leading-tight 2xl:text-xl lg:text-lg font-gilroy">
                         <Trans i18nKey={"feedback.desc"}>
                           Хотите увеличить конверсию?
                           <br />
@@ -428,13 +430,13 @@ function App() {
               </div>
 
               <div className="mt-[104px] relative">
-                <div className="absolute flex justify-center items-center w-full -top-8 left-32 blur-md">
+                <div className="absolute flex items-center justify-center w-full -top-8 left-32 blur-md">
                   <img src="/images/shapes/shape-2.svg" alt="" className="" />
                 </div>
 
-                <div className="relative grid lg:grid-cols-4 gap-4">
+                <div className="relative grid gap-4 lg:grid-cols-4">
                   <div className="flex gap-4">
-                    <p className="2xl:text-xl font-gilroy font-semibold">
+                    <p className="font-semibold 2xl:text-xl font-gilroy">
                       <Trans i18nKey={"contacts.title"}>Горячая линия</Trans>
                     </p>
                     <div className="w-full h-px bg-[#3D425C]"></div>
@@ -448,7 +450,7 @@ function App() {
                       <span>
                         <Trans i18nKey={"contacts.button1"}>Написать</Trans>
                       </span>
-                      <MailIcon className="lg:w-8 lg:h-8 w-6 h-6" />
+                      <MailIcon className="w-6 h-6 lg:w-8 lg:h-8" />
                     </a>
                     <a
                       href="tel:88007700067"
@@ -457,12 +459,12 @@ function App() {
                       <span>
                         <Trans i18nKey={"contacts.button2"}>Позвонить</Trans>
                       </span>
-                      <PhoneIcon className="lg:w-8 lg:h-8 w-6 h-6" />
+                      <PhoneIcon className="w-6 h-6 lg:w-8 lg:h-8" />
                     </a>
                   </div>
 
-                  <div className="sm:col-span-2 flex sm:justify-end lg:mt-0 mt-10">
-                    <div className="lg:w-auto sm:w-1/2 w-full flex justify-between 2xl:gap-8 lg:gap-6 gap-4">
+                  <div className="flex mt-10 sm:col-span-2 sm:justify-end lg:mt-0">
+                    <div className="flex justify-between w-full gap-4 lg:w-auto sm:w-1/2 2xl:gap-8 lg:gap-6">
                       <p className="2xl:text-xl font-gilroy font-semibold 2xl:-mt-1.5 -mt-1">
                         <Trans i18nKey={"contacts.social.title"}>
                           Социальные
@@ -476,21 +478,21 @@ function App() {
                           target="_blank"
                           className="group border border-[#3D425C] xl:p-4 p-3 rounded-full hover:border-[#52587A] transition-all"
                         >
-                          <YouTubeIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
+                          <YouTubeIcon className="w-6 h-6 2xl:w-8 2xl:h-8" />
                         </a>
                         <a
                           href="https://vk.com/graff.interactive"
                           target="_blank"
                           className="group border border-[#3D425C] xl:p-4 p-3 rounded-full hover:border-[#52587A] transition-all"
                         >
-                          <VKIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
+                          <VKIcon className="w-6 h-6 2xl:w-8 2xl:h-8" />
                         </a>
                         <a
                           href="https://t.me/GRAFFinteractive"
                           target="_blank"
                           className="border rounded-full border-[#52587A] xl:p-4 p-3 opacity-80 hover:opacity-100 transition-all"
                         >
-                          <TelegramIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
+                          <TelegramIcon className="w-6 h-6 2xl:w-8 2xl:h-8" />
                         </a>
                       </div>
                     </div>
@@ -506,8 +508,8 @@ function App() {
                     <div>
                       <LogoIcon />
                     </div>
-                    <div className="flex flex-col sm:gap-1 gap-4">
-                      <p className="flex sm:flex-row flex-col sm:gap-4 gap-1">
+                    <div className="flex flex-col gap-4 sm:gap-1">
+                      <p className="flex flex-col gap-1 sm:flex-row sm:gap-4">
                         <a
                           href="https://graff.tech/privacypolicy"
                           target="_blank"
@@ -530,7 +532,7 @@ function App() {
                   </div>
 
                   <div className="col-span-1 lg:border-l sm:border-b-0 border-b border-[#3D425C] xl:px-8 sm:px-6 px-4 py-6 flex flex-col justify-center">
-                    <div className="flex justify-between items-center">
+                    <div className="flex items-center justify-between">
                       <div className="text-[#EBEBEB] flex flex-col gap-1">
                         <a href="mailto:info@graff.tech">info@graff.tech</a>
                         <a href="tel:88007700067">8 800 770 00 67</a>
@@ -542,7 +544,7 @@ function App() {
                   </div>
 
                   <div className="col-span-1 sm:border-l border-[#3D425C] xl:pl-8 xl:pr-0 sm:px-6 px-4 py-6 flex flex-col justify-center">
-                    <div className="flex justify-between items-center">
+                    <div className="flex items-center justify-between">
                       <div className="text-[#EBEBEB] flex flex-col gap-1">
                         <a href="mailto:waseem@graff.tech">waseem@graff.tech</a>
                         <a href="tel:+971509388902">+971 50 938 8902</a>
@@ -565,11 +567,11 @@ function App() {
         </>
       ) : (
         <div className="bg-[#14161F] h-screen flex justify-center items-center">
-          <p className="self-center text-white flex items-center gap-4 w-fit font-gilroy">
+          <p className="flex items-center self-center gap-4 text-white w-fit font-gilroy">
             <img
               src="/icons/Loader.png"
               alt=""
-              className="animate-spin w-6 h-6"
+              className="w-6 h-6 animate-spin"
             />
             <span>
               <Trans i18nKey="loading">Загрузка</Trans>
diff --git a/src/ScheduledPage.tsx b/src/ScheduledPage.tsx
index 1937467..1e06721 100644
--- a/src/ScheduledPage.tsx
+++ b/src/ScheduledPage.tsx
@@ -11,6 +11,7 @@ function ScheduledPage() {
   const { search } = useLocation();
   const navigate = useNavigate();
   const [countdownSeconds, setCountdownSeconds] = useState<number>();
+  const [showWait, setShowWait] = useState<boolean>();
 
   async function connect() {
     try {
@@ -32,6 +33,15 @@ function ScheduledPage() {
         return;
       }
 
+      if (!result.activeSessionId) {
+        setShowWait(true);
+
+        setTimeout(() => {
+          connect();
+        }, 1000);
+        return;
+      }
+
       navigate(`/stream/${result.activeSessionId}${search}`);
     } catch (error) {
       if (error instanceof Error) {
@@ -57,6 +67,12 @@ function ScheduledPage() {
           </p>
         </div>
       )}
+
+      {showWait && (
+        <div className="space-y-4 w-[340px]">
+          <p className="text-2xl font-gilroy">Пожалуйста, подождите...</p>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/Video.tsx b/src/components/Video.tsx
index a0cfdfa..226f6e1 100644
--- a/src/components/Video.tsx
+++ b/src/components/Video.tsx
@@ -35,13 +35,13 @@ function Video({ mediaStream, muted, user }: Props) {
     remoteVideoRef.current.onplay = () => {
       setIsLoading(false);
     };
+
+    console.log("mediaStream", mediaStream?.getTracks());
   }, [mediaStream]);
 
   useEffect(() => {
-    if (!remoteVideoRef.current) return;
-
-    console.log("remoteVideoRef.current!.muted", remoteVideoRef.current.muted);
-  }, [remoteVideoRef.current?.muted]);
+    console.log("remoteVideoRef.current", remoteVideoRef);
+  }, [remoteVideoRef.current]);
 
   return (
     <div className="relative">
@@ -54,18 +54,18 @@ function Video({ mediaStream, muted, user }: Props) {
         autoPlay
         muted={_muted}
       ></video>
-      <div className="absolute bottom-0 p-2 flex items-center justify-between w-full">
+      <div className="absolute bottom-0 flex items-center justify-between w-full p-2">
         <p className="text-sm text-white">{user?.name}</p>
         <button className="text-white" onClick={toggleSound}>
           {_muted ? <SoundOffIcon /> : <SoundOnIcon />}
         </button>
       </div>
       {isLoading && (
-        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+        <div className="absolute top-0 left-0 flex items-center justify-center w-full h-full">
           <img
             src="/icons/Loader.png"
             alt=""
-            className="animate-spin w-6 h-6"
+            className="w-6 h-6 animate-spin"
           />
         </div>
       )}
diff --git a/src/pages/StreamPage.tsx b/src/pages/StreamPage.tsx
index dd1a699..f15513f 100644
--- a/src/pages/StreamPage.tsx
+++ b/src/pages/StreamPage.tsx
@@ -366,6 +366,11 @@ function StreamPage() {
     updateRemoteStreams();
   }, [users.length]);
 
+  useEffect(() => {
+    toggleCamera();
+    toggleMic();
+  }, [localStream]);
+
   return (
     <div
       ref={fullscreenRef}