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";
}
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>
src/ScheduledPage.tsx
+16
View File
@@ -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>
);
}
src/components/Video.tsx
+7 -7
View File
@@ -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>
)}
src/pages/StreamPage.tsx
+5
View File
@@ -366,6 +366,11 @@ function StreamPage() {
updateRemoteStreams();
}, [users.length]);
useEffect(() => {
toggleCamera();
toggleMic();
}, [localStream]);
return (
<div
ref={fullscreenRef}