diff --git a/src/App.tsx b/src/App.tsx index beda414..873fe4f 100644 --- a/src/App.tsx +++ b/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(); diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 57ac950..4b2f801 100644 --- a/src/components/ui/Button.tsx +++ b/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} > diff --git a/src/pages/StreamPage2.tsx b/src/pages/StreamPage2.tsx index 3533509..e0364ec 100644 --- a/src/pages/StreamPage2.tsx +++ b/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)} /> - {/* */} + + + )}