DmitriyB/pixelstreamingv2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added language change query

Browse Source
This commit is contained in:
DmitriyB
2023-03-20 18:46:15 +05:00
parent 61efa5611d
commit d494abf7ae
33 changed files with 3093 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+1 -1
View File
@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
src/App.css
+1
View File
@@ -22,6 +22,7 @@
background: transparent;
padding: 56px;
box-sizing: border-box;
z-index: 99;
}
src/App.tsx
+49 -15
View File
@@ -5,7 +5,6 @@ import { useEffect } from "react";
import { Redirect, Route, Switch, useHistory } from "react-router-dom";
import { useTranslation } from "react-i18next";
import cookies from "js-cookie";
import { Header } from "components/shared/Header/Header";
import { Card } from "components/pages/Main/Card/Card";
@@ -16,38 +15,73 @@ import { PlanComponent } from "components/pages/Plan/PlanComponent";
import { useAppDispatch, useAppSelector } from "hooks/redux";
import { fetchCards } from "store/reducers/ActionCreator";
import { cardSlice } from "store/reducers/cardSlice";
import { languageSlice } from "store/reducers/languageSlice";
import { ICards } from "models/ICards";
import useQuery from "hooks/useQuery";
import cookies from "js-cookie";
const App: React.FC = () => {
const dispatch = useAppDispatch();
const history = useHistory();
const { handleCurrentCard } = cardSlice.actions;
const { handleChangeLanguage } = languageSlice.actions;
const { cards, currentCard, error } = useAppSelector((state) => state.cardReducer);
const { isLoading } = useAppSelector((state) => state.sessionReducer)
const { currentLang } = useAppSelector((state) => state.languageReducer);
console.log(error)
const query = useQuery()
const langQuery = query.get('lang')
const langArray = ['en', 'ru']
const browserLanguage = window.navigator.language
const handleBrowserLanguage = () => {
return langArray.includes(browserLanguage)
}
const handleCookiesLanguage = () => {
const language = cookies.get("i18next")
return language
}
useEffect(() => {
if (langArray.includes(langQuery as string)) {
dispatch(handleChangeLanguage(langQuery as string));
return
}
else if (handleCookiesLanguage()) {
const languageCookies = handleCookiesLanguage()
console.log(languageCookies)
dispatch(handleChangeLanguage(languageCookies as string))
return
}
let isSupported = handleBrowserLanguage()
dispatch(handleChangeLanguage(isSupported ? browserLanguage : 'en'));
}, [])
useEffect(() => {
dispatch(fetchCards(cookies.get("i18next")));
}, []);
useEffect(() => {
dispatch(fetchCards(cookies.get("i18next")));
if (currentLang) {
dispatch(fetchCards(currentLang))
}
}, [currentLang])
const handleCards = (card: ICards) => {
dispatch(handleCurrentCard(card));
history.push("/connect-page");
};
const closeStream = () => {
history.push("/");
};
const { t } = useTranslation();
console.log(isLoading, 'LOADING')
return (
<Switch>
<Route exact path="/">
@@ -75,7 +109,7 @@ const App: React.FC = () => {
)}
</Route>
<Route exact path="/stream/:id">
<PlayerComponent closeStream={closeStream}></PlayerComponent>
<PlayerComponent ></PlayerComponent>
</Route>
<Route path="/plan">
<Header></Header>
src/components/pages/ConnectPage/LoadingPopup/loader.svg
-9
View File
@@ -1,9 +0,0 @@
<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M103.35 53C104.814 53 106.007 51.8126 105.934 50.3509C105.354 38.7527 100.977 27.6378 93.4384 18.7402C85.328 9.16712 74.0844 2.78179 61.7081 0.720288C49.3319 -1.34121 36.6256 1.05484 25.85 7.48211C15.0745 13.9094 6.92854 23.951 2.86158 35.8204C-1.20539 47.6898 -0.929606 60.6171 3.63985 72.3022C8.2093 83.9873 16.7761 93.6725 27.8159 99.6343C38.8558 105.596 51.6527 107.448 63.9298 104.861C75.3406 102.456 85.6145 96.361 93.1857 87.5559C94.1399 86.4462 93.9256 84.7764 92.7696 83.8789V83.8789C91.6136 82.9813 89.9541 83.1964 88.9938 84.3008C82.1966 92.1174 73.0197 97.5286 62.8368 99.6747C51.7874 102.003 40.2702 100.337 30.3343 94.9709C20.3985 89.6052 12.6884 80.8886 8.57587 70.372C4.46336 59.8554 4.21516 48.2208 7.87542 37.5384C11.5357 26.8559 18.867 17.8184 28.565 12.0339C38.263 6.24936 49.6987 4.09292 60.8373 5.94826C71.976 7.80361 82.0952 13.5504 89.3946 22.1662C96.1215 30.1063 100.051 40.0084 100.626 50.3511C100.708 51.8124 101.886 53 103.35 53V53Z" fill="url(#paint0_angular_2745_13429)"/>
<defs>
<radialGradient id="paint0_angular_2745_13429" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(53 53) rotate(45) scale(52.4673)">
<stop offset="0.874517" stop-color="white"/>
<stop offset="0.982613" stop-color="white" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

src/components/pages/ConnectPage/PopupComponent/PopupComponent.tsx
+5 -20
View File
@@ -7,32 +7,17 @@ import { PopupConnect } from "components/pages/ConnectPage/PopupConnect/PopupCon
import { LoadingPopup } from "components/pages/ConnectPage/LoadingPopup/LoadingPopup";
import { useAppDispatch, useAppSelector } from "hooks/redux";
import { createSession } from "store/reducers/ActionCreator";
import { sessionSlice } from "store/reducers/sessionSlice";
export const PopupComponent: React.FC = () => {
const dispatch = useAppDispatch();
const { currentCard } = useAppSelector((state) => state.cardReducer);
const [visible, setVisible] = useState({
connectPopup: true,
loadingPopup: false,
});
const { cleanErrors } = sessionSlice.actions;
const { isLoading, error } = useAppSelector((state) => state.sessionReducer);
const { isLoading } = useAppSelector((state) => state.sessionReducer);
const { connectPopup, loadingPopup } = visible;
useEffect(() => {
if (isLoading) {
setVisible({ connectPopup: false, loadingPopup: true });
return;
} else if (error) {
setVisible({ connectPopup: false, loadingPopup: false });
return;
}
}, [isLoading, error]);
useEffect(() => {
return () => {
@@ -42,7 +27,7 @@ export const PopupComponent: React.FC = () => {
return (
<AnimatePresence mode="wait">
{connectPopup && (
{!isLoading && (
<motion.div
key={1}
variants={popupAnimation}
@@ -51,13 +36,13 @@ export const PopupComponent: React.FC = () => {
exit={"hidden"}
>
<PopupConnect
isLoading={true}
title={currentCard.app_title}
isLoading={isLoading}
logo={currentCard.logo}
onConnect={() => dispatch(createSession(currentCard.app_title))}
></PopupConnect>
</motion.div>
)}
{loadingPopup && (
{isLoading && (
<motion.div
key={2}
variants={popupAnimation}
src/components/pages/ConnectPage/PopupConnect/PopupConnect.tsx
+18 -11
View File
@@ -1,35 +1,42 @@
import "./PopupConnect.css";
import { useHistory } from "react-router-dom";
import { createSession } from "store/reducers/ActionCreator";
import { useAppDispatch } from "hooks/redux";
import { useTranslation } from "react-i18next";
export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading }) => {
export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading, title }) => {
const history = useHistory();
const { t } = useTranslation();
const dispatch = useAppDispatch();
const handleConnect = () => {
onConnect().then((res: any) => {
if (!res.error) {
history.push(`/stream/${res.payload.session_id}`);
} else {
alert(res.payload);
history.push("/");
}
});
dispatch(createSession(title)).unwrap().then((res) => {
history.push(`/stream/${res.payload.session_id}`);
}).catch((res) => {
alert(res);
history.push("/");
})
};
console.log(isLoading)
return (
<div className="popup">
<div className="popup-img-container">
<img className="popup-logo" src={logo} alt="лого" />
</div>
<div className="popup-button-container">
<button onClick={handleConnect} className="button button-primary">
<button disabled={isLoading} onClick={handleConnect} className="button button-primary">
{t("popup-main-btn-start")}
</button>
<div className="line"></div>
<button onClick={() => history.goBack()} className="button button-type-small">
<button onClick={() => history.goBack()} disabled={isLoading} className="button button-type-small">
{t("popup-main-select")}
</button>
</div>
src/components/pages/Main/Card/Card.css
+1 -1
View File
@@ -8,7 +8,7 @@
.card-image {
border-radius: 4px;
object-fit: cover;
width: 100%;
height: 364px;
min-height: 260px;
src/components/pages/Main/Card/Card.tsx
-5
View File
@@ -1,12 +1,7 @@
import "./Card.css";
import iconButton from "./iconButton.svg";
import { useAppSelector } from "hooks/redux";
export const Card: React.FC<any> = ({ item, onClick }) => {
const { currentLang } = useAppSelector((state) => state.languageReducer);
console.log(currentLang);
return (
<div onClick={() => onClick()} className="card">
<img className="card-image" src={item.preview} alt='building' />
src/components/pages/Stream/ControlPanel/ControlPanel.tsx
+2 -2
View File
@@ -18,8 +18,8 @@ export const ControlPanel: React.FC<any> = ({
return (
<div className="toolbar-field-part">
<div className="toolbar-button-container-border-line"></div>
<ControlButton isActive={isControl} isSidebarWide={isSidebarWide} onClick={handleControlClick}></ControlButton>
<MicroButton isSidebarWide={isSidebarWide} isActive={isMuted} onClick={handleMuteClick}></MicroButton>
<ControlButton isActive={false} isSidebarWide={isSidebarWide} onClick={() => console.log('handleControlClick()')}></ControlButton>
<MicroButton isSidebarWide={isSidebarWide} isActive={false} onClick={() => console.log('handleMuteClick()')}></MicroButton>
<div className="toolbar-button-container-border-line"></div>
<ShareButton isSidebarWide={isSidebarWide} onClick={handleOpenSharePopup}></ShareButton>
<LanguageButton isSidebarWide={isSidebarWide} onClick={() => console.log("click!")}></LanguageButton>
src/components/pages/Stream/Player/Player.tsx
+3
View File
@@ -2,6 +2,9 @@ import './player.css'
export const Player: React.FC = () => {
return (
<>
<div id="playerUI" className="noselect">
<div id="player"></div>
</div>
<div id="overlay">
<div id="controls">
<button className="tooltip" id="fullscreen-btn">
src/components/pages/Stream/Player/player.css
+2 -11
View File
@@ -100,17 +100,8 @@ video {
display: none;
}
#playButton {
display: block;
width: 88px;
height: 88px;
z-index: 30;
backdrop-filter: blur(10px);
border-radius: 112px;
cursor: pointer;
}
#playButtonMob {
#playButton {
display: block;
width: 88px;
height: 88px;
@@ -154,7 +145,7 @@ video {
#playButtonMob:hover {
#playButton:hover {
background: linear-gradient(180deg, #BC75FF 0%, #798FFF 100%);
backdrop-filter: blur(10px)
}
src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx
+23 -30
View File
@@ -1,41 +1,46 @@
import "./PlayerStyles.css";
import React, { useEffect, useState, useRef } from "react";
import { useHistory, useParams } from "react-router-dom";
import useWindowDimensions from "hooks/useWindowDimensions";
import { load } from "utils/app";
import useMobile from "hooks/useMobile";
import { Sidebar } from "components/pages/Stream/Sidebar/Sidebar";
import React, { useEffect, useState } from "react";
import { useParams, useHistory } from "react-router-dom";
import { connectSession } from "store/reducers/ActionCreator";
import { useAppDispatch, useAppSelector } from "hooks/redux";
import { sessionSlice } from "store/reducers/sessionSlice";
import { Player } from "../Player/Player";
import useWindowDimensions from "hooks/useWindowDimensions";
import { load as loadStream, usersArray } from "utils/app";
import useMobile from "hooks/useMobile";
import { Sidebar } from "components/pages/Stream/Sidebar/Sidebar";
import { Player } from "components/pages/Stream/Player/Player";
type link = {
id: string;
};
export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
const frameRef = useRef<HTMLIFrameElement>()
export const PlayerComponent: React.FC<any> = ({ }) => {
const { isMobile } = useMobile();
const windowDimensions = useWindowDimensions();
const width = windowDimensions.width;
const height = windowDimensions.height;
const [popup, setPopup] = useState(false);
const history = useHistory()
console.log(popup);
const { playerCount } = useAppSelector((state) => state.sessionReducer)
const { id } = useParams<link>();
const [click, setClick] = useState(false);
const dispatch = useAppDispatch();
const { cleanErrors } = sessionSlice.actions;
useEffect(() => {
dispatch(connectSession(id)).then((res: any) => {
load()
if (res.error) {
alert(res.payload);
}
dispatch(connectSession(id)).unwrap().then(() => {
}).catch((res) => {
alert(res);
}).finally(() => {
loadStream()
});
return () => {
dispatch(cleanErrors());
@@ -45,11 +50,7 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
};
}, []);
const { url } = useAppSelector((state) => state.sessionReducer);
const exitPopup = () => {
setClick((prev) => !prev);
};
useEffect(() => {
if (isMobile) {
@@ -62,30 +63,22 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
}, [width, height, isMobile]);
return (
<>
<span>{playerCount}</span>
{popup && (
<div className="popup-screen" style={{ height: height }}>
<h2>Переверните устройство</h2>
</div>
)}
<div id="playerUI" className="noselect">
<div id="player"></div>
<div id="overlay">
</div>
</div>
<Player></Player>
<Sidebar
players={playerCount}
heightDevice={height}
isMobile={isMobile}
exitPopup={click}
closeStream={closeStream}
></Sidebar>
</>
);
};
function getElementById(arg0: string) {
throw new Error("Function not implemented.");
}
src/components/pages/Stream/Sidebar/Sidebar.css
-1
View File
@@ -2,7 +2,6 @@
user-select: none;
display: flex;
position: relative;
height: 100vh;
padding: 0;
margin: 0;
padding: 10px;
src/components/pages/Stream/Sidebar/Sidebar.tsx
+20 -10
View File
@@ -1,25 +1,31 @@
import "./Sidebar.css";
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router";
import { SidebarDesktop } from "../SidebarDesktop/SidebarDesktop";
import { SidebarMobile } from "../SidebarMobile/SidebarMobile";
import { closeStream } from "utils/app";
import { useAppSelector } from "hooks/redux";
export const Sidebar: React.FC<any> = ({ closeStream, exitPopup, isMobile, heightDevice }) => {
export const Sidebar: React.FC<any> = ({ exitPopup, isMobile, heightDevice, players }) => {
const [isMuted, setMuted] = useState(true);
const [isControl, setControl] = useState(false);
const [height, setHeight] = useState(heightDevice);
const history = useHistory()
useEffect(() => {
if (isMobile) {
setHeight(heightDevice)
}
}, [heightDevice])
const { playerCount } = useAppSelector((state) => state.sessionReducer);
const handleCloseStream = () => {
closeStream()
history.push('/')
}
const handleMuteClick = () => {
setMuted((prev) => !prev);
};
@@ -32,22 +38,26 @@ export const Sidebar: React.FC<any> = ({ closeStream, exitPopup, isMobile, heigh
<>
{isMobile ? (
<SidebarMobile
userArr={playerCount}
isMobile={isMobile}
height={height}
height={heightDevice}
isMuted={isMuted}
isControl={isControl}
handleMuteClick={handleMuteClick}
handleControlClick={handleControlClick}
closeStream={closeStream}
closeStream={handleCloseStream}
></SidebarMobile>
) : (
<SidebarDesktop
userArr={playerCount}
height={heightDevice}
isMobile={isMobile}
isMuted={isMuted}
isControl={isControl}
handleMuteClick={handleMuteClick}
handleControlClick={handleControlClick}
closeStream={closeStream}
closeStream={handleCloseStream}
exitPopup={exitPopup}
></SidebarDesktop>
)}
src/components/pages/Stream/SidebarDesktop/SidebarDesktop.tsx
+6 -1
View File
@@ -20,9 +20,11 @@ export const SidebarDesktop: React.FC<any> = ({
exitPopup,
isMuted,
isControl,
height,
handleMuteClick,
handleControlClick,
isMobile
isMobile,
userArr
}) => {
const [open, setOpen] = useState(false);
const [popup, setPopup] = useState({
@@ -89,6 +91,8 @@ export const SidebarDesktop: React.FC<any> = ({
animate={open ? "open" : "closed"}
variants={wideSidebar ? setAnimation() : sidebarVariants}
className="toolbar-container"
style={{ height: height }}
>
<div
style={wideSidebar ? { overflow: "hidden" } : { overflow: "visible" }}
@@ -98,6 +102,7 @@ export const SidebarDesktop: React.FC<any> = ({
<FullscreenButton isSidebarWide={wideSidebar}> </FullscreenButton>
<div className="toolbar-button-container-border-line"></div>
<UserList
userArr={userArr}
isMobile={isMobile}
closeSidebar={closeSideBar}
isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
src/components/pages/Stream/UserList/UserList.tsx
+4 -2
View File
@@ -1,9 +1,11 @@
import { User } from "components/pages/Stream/User/User";
export const UserList: React.FC<any> = ({ isSidebarWide, isAdmin, closeSidebar, isMobile }) => {
export const UserList: React.FC<any> = ({ isSidebarWide, isAdmin, closeSidebar, isMobile, userArr }) => {
console.log(userArr)
return (
<div className="toolbar-field-part">
<User closeSidebar={closeSidebar} isAdmin={isAdmin} isSidebarWide={isSidebarWide}></User>
{userArr.map((i: any) => (<User closeSidebar={closeSidebar} isAdmin={isAdmin} isSidebarWide={isSidebarWide}></User>
))}
<div className="toolbar-button-container-border-line"></div>
</div>
);
src/components/shared/Footer/footer.css
+2 -3
View File
@@ -1,7 +1,6 @@
.footer__container {
box-sizing: border-box;
background-color: transparent;
background: #141414;
background: #1C1D21;
border-radius: 32px 32px 0px 0px;
color: #EBEBEB;
display: flex;
@@ -388,7 +387,7 @@
width: 100%;
padding: 0;
}
.footer__block_copyright {
src/components/shared/Header/Header.tsx
+1 -2
View File
@@ -6,7 +6,6 @@ import ru from 'images/icons/RU.svg'
import en from 'images/icons/EN.svg'
import React, { CSSProperties, useState } from "react";
import { useLocation } from "react-router-dom";
import { useAppSelector, useAppDispatch } from "hooks/redux";
@@ -30,7 +29,7 @@ export const Header: React.FC = ({ }) => {
return (
<header className={location.pathname === '/' ? 'header' : 'header header-popup'}>
<a className="header-logo" target='_blank' href="https://estate.graff.tech/" style={{ cursor: "pointer" }}><img alt="company-logo" src={logo} />
<a className="header-logo" href={`https://estate.graff.tech/?lang=${currentLang}`} style={{ cursor: "pointer" }}><img alt="company-logo" src={logo} />
</a>
<div className="header-button-container">
{buttons.map((item, index) => (<button key={index} onClick={() => dispatch(handleChangeLanguage(item.value))} value={item.value} className={currentLang === item.value ? 'button-lang button-lang-active' : "button-lang"}><img src={item.icon}></img></button>
src/hooks/useQuery.ts
+5
View File
@@ -0,0 +1,5 @@
import { useLocation } from "react-router";
const useQuery = () => new URLSearchParams(useLocation().search);
export default useQuery
src/hooks/useWindowDimensions.ts
+2 -1
View File
@@ -1,7 +1,8 @@
import { useState, useEffect } from "react";
function getWindowDimensions() {
const { width: width, height: height } = window.visualViewport;
const width = window.innerWidth;
const height = window.innerHeight
return {
width,
height,
src/index.css
-7
View File
@@ -44,13 +44,6 @@ button {
}
.player {
position: absolute;
height: 100%;
width: 100%;
border-style: none;
border-width: 0;
}
.main {
margin: 0 auto;
src/index.tsx
-22
View File
@@ -7,32 +7,10 @@ import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { setupStore } from "./store/store";
import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import HttpApi from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
export const store = setupStore();
i18next
.use(HttpApi)
.use(LanguageDetector)
.use(initReactI18next)
.init({
supportedLngs: ["en", "ru"],
fallbackLng: "en",
debug: false,
// Options for language detector
detection: {
order: ["cookie", "navigator"],
caches: ["cookie"],
},
// react: { useSuspense: false },
backend: {
loadPath: "/assets/locales/{{lng}}/translation.json",
},
});
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
src/store/reducers/ActionCreator.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { createAsyncThunk } from "@reduxjs/toolkit";
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://a1.coord.graff.tech',
baseURL: 'https://a1.test.coord.graff.tech',
});
instance.defaults.headers.post['Content-Type'] = 'application/json';
src/store/reducers/app.js
+2894
View File
File diff suppressed because it is too large Load Diff
src/store/reducers/languageSlice.ts
+27 -3
View File
@@ -1,14 +1,38 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import HttpApi from "i18next-http-backend";
import cookies from "js-cookie";
import LanguageDetector from "i18next-browser-languagedetector";
i18next
.use(HttpApi)
.use(LanguageDetector)
.use(initReactI18next)
.init({
supportedLngs: ["en", "ru"],
fallbackLng: "en",
debug: false,
// Options for language detector
detection: {
order: ["cookie", "navigator"],
caches: ["cookie"],
},
// react: { useSuspense: false },
backend: {
loadPath: "/assets/locales/{{lng}}/translation.json",
},
});
interface LanguageState {
currentLang: string;
}
const initialState: LanguageState = {
currentLang: cookies.get("i18next"),
currentLang: '',
};
export const languageSlice = createSlice({
@@ -16,8 +40,8 @@ export const languageSlice = createSlice({
initialState,
reducers: {
handleChangeLanguage(state, action: PayloadAction<string>) {
i18next.changeLanguage(action.payload);
state.currentLang = action.payload;
i18next.changeLanguage(action.payload)
state.currentLang = action.payload
},
},
});
src/store/reducers/sessionSlice.ts
+10 -3
View File
@@ -7,6 +7,7 @@ export interface sessionState {
error: any;
url: string;
id: string;
playerCount: any
}
interface ConnectSessionResponseInterface {
@@ -19,9 +20,10 @@ interface CreateSessionResponseInterface {
const initialState: sessionState = {
isLoading: false,
error: "",
error: null,
url: "",
id: "",
playerCount: [],
};
export const sessionSlice = createSlice({
@@ -29,8 +31,14 @@ export const sessionSlice = createSlice({
initialState,
reducers: {
cleanErrors(state) {
state.error = null;
state = initialState
},
setUserCount(state, action) {
console.log(action.payload)
const newArr = new Array(action.payload).fill('user')
state.playerCount = newArr
}
},
extraReducers: {
[createSession.fulfilled.type]: (
@@ -41,7 +49,6 @@ export const sessionSlice = createSlice({
state.id = action.payload.session_id;
},
[createSession.rejected.type]: (state, action: PayloadAction<any>) => {
console.log(action.payload)
state.isLoading = false;
state.error = action.payload;
},
src/utils/api.ts
-48
View File
@@ -1,48 +0,0 @@
export default class MainApi {
private _url: string;
constructor(url: string) {
this._url = url;
}
_checkStatus(promise: Promise<any>) {
return promise.then((res: any) => {
if (res.ok) {
return res.json();
}
console.log(res.text(), 'test')
return Promise.reject(res.status);
});
}
getRC() {
const promise = fetch(`${this._url}/title/get`, {
method: "GET",
});
return this._checkStatus(promise);
}
createSession(name: string) {
const promise = fetch(`${this._url}/session/create`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: name,
}),
});
return this._checkStatus(promise);
}
connectSession(code: any) {
const promise = fetch(
`${this._url}/session/connect?` +
new URLSearchParams({ session_id: code }),
{
method: "GET",
}
);
return this._checkStatus(promise);
}
}
src/utils/app.js
+16 -12
View File
@@ -1,7 +1,11 @@
import { webRtcPlayer } from './webRtcPlayer'
import { store } from 'index'
import { sessionSlice } from "store/reducers/sessionSlice";
import play from './Play.png'
export const usersArray = []
class TwoWayMap {
constructor(map = {}) {
this.map = map;
@@ -37,7 +41,6 @@ let controllers = {};
let rAF = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.requestAnimationFrame;
let webRtcPlayerObj = null;
let print_stats = false;
let print_inputs = false;
@@ -96,6 +99,8 @@ let afk = {
countdownTimer: undefined, // The timer used to tick the seconds shown on the inactivity warning overlay.
}
// If the user focuses on a UE input widget then we show them a button to open
// the on-screen keyboard. JavaScript security means we can only show the
// on-screen keyboard in response to a user interaction.
@@ -1067,7 +1072,7 @@ function playVideo() {
function showPlayOverlay() {
let img = document.createElement('img');
img.id = 'playButtonMob';
img.id = 'playButton';
img.src = play
img.alt = 'Start Streaming';
setOverlay('clickableState', img, event => {
@@ -1363,14 +1368,8 @@ function setupWebRtcPlayer(htmlElement, config) {
webRtcPlayerObj.onVideoInitialised = function () {
if (ws && ws.readyState === WS_OPEN_STATE) {
if (shouldShowPlayOverlay) {
showPlayOverlay();
resizePlayerStyle();
}
else {
resizePlayerStyle();
playStream();
}
resizePlayerStyle();
playStream();
}
};
@@ -2701,7 +2700,7 @@ function connect() {
}
// Make a new websocket connection
let connectionUrl = store.getState().sessionReducer.url
let connectionUrl = 'wss://a2.sess.graff.tech/s2/14000/'
console.log(`Creating a websocket connection to: ${connectionUrl}`);
ws = new WebSocket(connectionUrl);
ws.attemptStreamReconnection = true;
@@ -2717,6 +2716,8 @@ function connect() {
});
}
ws.onmessage = function (event) {
// Check if websocket message is binary, if so, stringify it.
@@ -2730,6 +2731,7 @@ function connect() {
console.log("%c[Inbound SS (config)]", "background: lightblue; color: black", msg);
onConfig(msg);
} else if (msg.type === 'playerCount') {
store.dispatch(sessionSlice.actions.setUserCount(msg.count))
console.log("%c[Inbound SS (playerCount)]", "background: lightblue; color: black", msg);
} else if (msg.type === 'offer') {
console.log("%c[Inbound SS (offer)]", "background: lightblue; color: black", msg);
@@ -2786,6 +2788,8 @@ function onConfig(config) {
}
function registerMouse(playerElement) {
clearMouseEvents(playerElement);
@@ -2865,7 +2869,7 @@ function restartStream() {
ws.close();
}
function closeStream() {
export function closeStream() {
console.log("----------------------Closing stream----------------------")
if (webRtcPlayerObj) {
// Remove video element from the page.
src/utils/connection.tsx
-18
View File
@@ -1,18 +0,0 @@
import { ConnectData } from "./connectData";
export class Ws {
ws: WebSocket;
constructor() {
this.ws = new WebSocket(`wss://${ConnectData.pixelIp}:${ConnectData.port}`);
}
WebSokets() {
this.ws.onopen = () => {
this.ws.send('{ "message" : "NEW_SESS" }');
console.log('ws connecting1')
}
}
}
src/utils/contextWindowHeight.ts
-6
View File
@@ -1,6 +0,0 @@
import React from "react";
export const ContextWindowHeightOrientation = React.createContext({
windowHeight: window.screen.availHeight,
isLandscape: window.orientation !== 0
});
src/utils/textEN.js
-70
View File
@@ -1,70 +0,0 @@
const textEN = {
popupConnect: {
caption: 'Start new demonstration',
caption1: 'Connect to an existing one',
caption2: 'Select residential complex',
button: {
connectNew: 'Start',
connectEx: 'Connect'
}
},
popupConnectEx: {
caption: 'Demo connection code',
caption1: 'Select demonstration mode',
button: 'Continue'
},
demos: {
title: 'Available demonstrations',
card: {
title: 'RC «Aivazovsky»',
subTitle: 'Russia, Tyumen.',
caption: 'A new residential area located in a picturesque place on the banks of the Tura in the central part of Tyumen.',
caption1: 'Winner of the prestigious Urban Awards 2019 in the nomination "Best regional business class residential complex under construction".',
},
card1: {
title: 'RC «Masharov»',
subTitle: 'Russia, Tyumen.',
caption: "Quarter 'Masharov' is a new project of Sibintel Development, which has been creating unique objects for the Tyumen region since 2002.",
},
card2: {
title: 'ЖК «Тактика»',
subTitle: 'Россия, Екатеринбург.',
caption: 'Жилой квартал класса комфорт плюс на ВИЗе, в квадрате улиц Татищева-Венгерских Коммунаров-Викулова.',
caption1: 'Рядом Верх-Исетский пруд, по Татищева за 10 минут можно добраться до центра.',
}
},
footer: {
social: 'Social Networks',
captionCompain: 'About',
captionContact: 'Contacts',
cardLarge: {
address: 'st. Moskovskaya, 47,',
city: 'Yekaterinburg',
country: 'Russia'
},
cardLarge1: {
address: 'Dubai',
country: 'UAE'
},
cardSmall: {
caption: 'Write us',
},
cardSmall1: {
caption: 'Call us',
},
copyright: {
caption: 'Privacy Policy',
caption1: '©Graff Interactive. All rights reserved'
}
}
};
export default textEN
src/utils/textRU.js
-71
View File
@@ -1,71 +0,0 @@
const textRU = {
popupConnect: {
caption: 'Начать новую демонстрацию',
caption1: 'Подключиться к существующией',
caption2: 'Выбор жилого комплекса',
button: {
connectNew: 'Начать',
connectEx: 'Подключиться'
}
},
popupConnectEx: {
caption: 'Код подключения к демонстрации',
caption1: 'Выбор способа демонстрации',
button: 'Продолжить'
},
demos: {
title: 'Доступные демонстрации',
card: {
title: 'ЖК «Айвазовский»',
subTitle: 'Россия, Тюмень.',
caption: 'Новый жилой район располагающийся в живописном месте на берегу Туры в центральной части Тюмени. ',
caption1: 'Лауреат престижной премии Urban Awards 2019 в номинации «Лучший строящийся региональный жилой комплекс бизнес-класса».',
},
card1: {
title: 'ЖК «Машаров»',
subTitle: 'Россия, Тюмень.',
caption: 'Авторский Квартал «Машаров» — новый проект компании Сибинтел Девелопмент, которая создает уникальные объекты для тюменского региона с 2002 года.',
},
card2: {
title: 'ЖК «Тактика»',
subTitle: 'Россия, Екатеринбург.',
caption: 'Жилой квартал класса комфорт плюс на ВИЗе, в квадрате улиц Татищева-Венгерских Коммунаров-Викулова.',
caption1: 'Рядом Верх-Исетский пруд, по Татищева за 10 минут можно добраться до центра.',
}
},
footer: {
social: 'Социальные сети',
captionCompain: 'О компании',
captionContact: 'Контакты',
cardLarge: {
address: 'ул. Московская, 47,',
city: 'Екатеринбург',
country: 'Россия'
},
cardLarge1: {
address: 'Дубаи',
country: 'ОАЭ'
},
cardSmall: {
caption: 'Написать нам',
},
cardSmall1: {
caption: 'Позвонить',
},
copyright: {
caption: 'Политика конфиденциальности',
caption1: '©Graff Interactive. Все права защищены'
}
}
};
export default textRU
src/utils/users.js
-24
View File
@@ -1,24 +0,0 @@
import user from '../images/icons/user.svg'
export const users = [
{
id: 1,
type: 'admin',
icon: user,
},
{
id: 2,
type: 'user',
icon: user,
},
{
id: 3,
type: 'user',
icon: user,
},
{
id: 4,
type: 'user',
icon: user,
},
]