upd

src/App.tsx

@@ -35,6 +35,7 @@ function App() {
   const { t, i18n } = useTranslation();
   const build = searchParams.get("build") || null;
   const type = searchParams.get("type") || "demo";
+  const endAt = searchParams.get("endAt");
 
   function toastError(text: string) {
     toast.error(text, {
@@ -89,7 +90,7 @@ function App() {
         .get(
           `${
             import.meta.env.VITE_COORD_URL
-          }/start?location=${location}&build=${build}&type=${type}`
+          }/start?location=${location}&build=${build}&type=${type}&endAt=${endAt}`
         )
         .json();
 

src/components/ui/Button.tsx

@@ -49,8 +49,8 @@ function Button({
         variantClasses.find((item) => item.name === variant)?.classes
       } ${fullWidth ? "w-full" : "w-fit"} ${
         large
-          ? `h-10  ${onlyIcon ? "p-2" : icon ? "pl-4 pr-6" : "px-4"}`
-          : `h-8 ${onlyIcon ? "p-1" : icon ? "pl-2 pr-4" : "px-6"}`
+          ? `h-10  ${onlyIcon ? "p-2" : icon ? "pl-4 pr-6" : "px-6"}`
+          : `h-8 ${onlyIcon ? "p-1" : icon ? "pl-2 pr-4" : "px-4"}`
       } ${className}`}
       onClick={onClick}
     >

src/pages/StreamPage2.tsx

@@ -56,6 +56,15 @@ import { useClipboard } from "use-clipboard-copy";
 import QRCode from "react-qr-code";
 import Star12Icon from "../components/icons/Star12Icon";
 import { Trans, useTranslation } from "react-i18next";
+import Countdown from "react-countdown";
+
+const renderer = ({ minutes, seconds }: any) => {
+  return (
+    <>
+      {String(minutes).padStart(2, "0")}:{String(seconds).padStart(2, "0")}
+    </>
+  );
+};
 
 function StreamPage2() {
   const { t, i18n } = useTranslation();
@@ -88,6 +97,7 @@ function StreamPage2() {
   const clipboard = useClipboard();
   const link = window.location.origin + window.location.pathname;
   const [anyNewMessages, setAnyNewMessages] = useState(false);
+  const [endAt, setEndAt] = useState();
 
   async function getLang() {
     const { countryCode, error }: { countryCode: string; error: string } =
@@ -145,6 +155,10 @@ function StreamPage2() {
       .get(`activeSessions/${params.id}`)
       .json();
 
+    if (activeSession?.endAt) {
+      setEndAt(activeSession.endAt);
+    }
+
     return activeSession;
   }
 
@@ -611,8 +625,21 @@ function StreamPage2() {
                   onlyIcon
                   onClick={() => setIsShowInviteModal((prev) => !prev)}
                 />
-                {/* <Button variant="secondary" icon={<GearIcon />} onlyIcon /> */}
               </div>
+              {endAt && searchParams.has("admin", "true") && (
+                <>
+                  <div id="divider" className="w-px h-4 bg-[#DAE0E5]"></div>
+                  <div className="flex items-center gap-4">
+                    <p className="text-[#77828C] font-semibold text-sm">
+                      До завершения сеанса
+                    </p>
+                    <p className="font-semibold text-sm w-10">
+                      <Countdown date={new Date(endAt)} renderer={renderer} />
+                    </p>
+                    {/* <Button variant="secondary">Завершить</Button> */}
+                  </div>
+                </>
+              )}
             </div>
           </div>
           <div className="main flex-1 bg-white flex">