inmake/stream.graff.tech-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

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