diff --git a/net/web/package-lock.json b/net/web/package-lock.json index 044a3cea..fc33e904 100644 --- a/net/web/package-lock.json +++ b/net/web/package-lock.json @@ -6103,9 +6103,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001507", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001507.tgz", - "integrity": "sha512-SFpUDoSLCaE5XYL2jfqe9ova/pbQHEmbheDf5r4diNwbAgR3qxM9NQtfsiSscjqoya5K7kFcHPUQ+VsUkIJR4A==", + "version": "1.0.30001587", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz", + "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==", "funding": [ { "type": "opencollective", @@ -25227,9 +25227,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001507", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001507.tgz", - "integrity": "sha512-SFpUDoSLCaE5XYL2jfqe9ova/pbQHEmbheDf5r4diNwbAgR3qxM9NQtfsiSscjqoya5K7kFcHPUQ+VsUkIJR4A==" + "version": "1.0.30001587", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz", + "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==" }, "case-sensitive-paths-webpack-plugin": { "version": "2.4.0", diff --git a/net/web/src/App.js b/net/web/src/App.js index 2ef1e566..3f60dc0d 100644 --- a/net/web/src/App.js +++ b/net/web/src/App.js @@ -10,7 +10,7 @@ import { CardContextProvider } from 'context/CardContext'; import { ChannelContextProvider } from 'context/ChannelContext'; import { StoreContextProvider } from 'context/StoreContext'; import { UploadContextProvider } from 'context/UploadContext'; -import { ViewportContextProvider } from 'context/ViewportContext'; +import { SettingsContextProvider } from 'context/SettingsContext'; import { ConversationContextProvider } from 'context/ConversationContext'; import { RingContextProvider } from 'context/RingContext'; @@ -32,7 +32,7 @@ function App() { - + - + diff --git a/net/web/src/access/useAccess.hook.js b/net/web/src/access/useAccess.hook.js index 84cf4f41..5ae730d9 100644 --- a/net/web/src/access/useAccess.hook.js +++ b/net/web/src/access/useAccess.hook.js @@ -1,7 +1,7 @@ import { useContext, useState, useEffect } from 'react'; import { useNavigate, useLocation } from "react-router-dom"; import { AppContext } from 'context/AppContext'; -import { ViewportContext } from 'context/ViewportContext'; +import { SettingsContext } from 'context/SettingsContext'; export function useAccess() { @@ -12,7 +12,7 @@ export function useAccess() { const navigate = useNavigate(); const location = useLocation(); const app = useContext(AppContext); - const viewport = useContext(ViewportContext); + const settings = useContext(SettingsContext); const updateState = (value) => { setState((s) => ({ ...s, ...value })); @@ -43,9 +43,9 @@ export function useAccess() { useEffect(() => { - const { display } = viewport.state; + const { display } = settings.state; updateState({ display }); - }, [viewport.state]); + }, [settings.state]); const actions = {}; diff --git a/net/web/src/context/SettingsContext.js b/net/web/src/context/SettingsContext.js new file mode 100644 index 00000000..97924e75 --- /dev/null +++ b/net/web/src/context/SettingsContext.js @@ -0,0 +1,14 @@ +import { createContext } from 'react'; +import { useSettingsContext } from './useSettingsContext.hook'; + +export const SettingsContext = createContext({}); + +export function SettingsContextProvider({ children }) { + const { state, actions } = useSettingsContext(); + return ( + + {children} + + ); +} + diff --git a/net/web/src/context/ViewportContext.js b/net/web/src/context/ViewportContext.js deleted file mode 100644 index 8eed0d2e..00000000 --- a/net/web/src/context/ViewportContext.js +++ /dev/null @@ -1,14 +0,0 @@ -import { createContext } from 'react'; -import { useViewportContext } from './useViewportContext.hook'; - -export const ViewportContext = createContext({}); - -export function ViewportContextProvider({ children }) { - const { state, actions } = useViewportContext(); - return ( - - {children} - - ); -} - diff --git a/net/web/src/context/useSettingsContext.hook.js b/net/web/src/context/useSettingsContext.hook.js new file mode 100644 index 00000000..8b1889db --- /dev/null +++ b/net/web/src/context/useSettingsContext.hook.js @@ -0,0 +1,151 @@ +import { useEffect, useState } from 'react'; + +const LightTheme = { + background: '#8fbea7', + primary: '#448866', + formBackground: '#f2f2f2', + darkBackground: '#222222', + formFocus: '#f8f8f8', + formHover: '#efefef', + grey: '#888888', + white: '#ffffff', + black: '#000000', + divider: '#dddddd', + mask: '#dddddd', + encircle: '#cccccc', + alert: '#ff8888', + warn: '#dd4444', + enabled: '#444444', + disabled: '#aaaaaa', + text: '#444444', + link: '#0077CC', + itemDivider: '#eeeeee', + connected: '#44cc44', + connecting: '#dd88ff', + requested: '#4488ff', + pending: '#22aaaa', + confirmed: '#aaaaaa', + error: '#ff4444', + profileForm: '#e8e8e8', + profileDivider: '#aaaaaa', + statsForm: '#ededed', + statsDivider: '#afafaf', + channel: '#f2f2f2', + card: '#eeeeee', + selectHover: '#fafafa', +}; + +const DarkTheme = { + background: '#8fbea7', + primary: '#448866', + formBackground: '#f2f2f2', + darkBackground: '#222222', + formFocus: '#f8f8f8', + formHover: '#efefef', + grey: '#888888', + white: '#ffffff', + black: '#000000', + divider: '#dddddd', + mask: '#dddddd', + encircle: '#cccccc', + alert: '#ff8888', + warn: '#dd4444', + enabled: '#444444', + disabled: '#aaaaaa', + text: '#444444', + link: '#0077CC', + itemDivider: '#eeeeee', + connected: '#44cc44', + connecting: '#dd88ff', + requested: '#4488ff', + pending: '#22aaaa', + confirmed: '#aaaaaa', + error: '#ff4444', + profileForm: '#e8e8e8', + profileDivider: '#aaaaaa', + statsForm: '#ededed', + statsDivider: '#afafaf', + channel: '#f2f2f2', + card: '#eeeeee', + selectHover: '#fafafa', +}; + + +export function useSettingsContext() { + + const [state, setState] = useState({ + display: null, + width: null, + height: null, + darkTheme: DarkTheme, + lightTheme: LightTheme, + }); + + const SMALL_MEDIUM = 650; + const MEDIUM_LARGE = 1000; + const LARGE_XLARGE = 1600; + + const updateState = (value) => { + setState((s) => ({ ...s, ...value })); + }; + + const handleResize = () => { + if (window.innerWidth < SMALL_MEDIUM) { + updateState({ display: 'small', width: window.innerWidth, height: window.innerHeight }); + } + else if (window.innerWidth < MEDIUM_LARGE) { + updateState({ display: 'medium', width: window.innerWidth, height: window.innerHeight }); + } + else if (window.innerWidth < LARGE_XLARGE) { + updateState({ display: 'large', width: window.innerWidth, height: window.innerHeight }); + } + else { + updateState({ display: 'xlarge', width: window.innerWidth, height: window.innerHeight }); + } + }; + + useEffect(() => { + for (let i = 0; i < 10; i++) { + setTimeout(handleResize, 100 * i); //cludge for my mobile browser + } + handleResize(); + window.addEventListener('resize', handleResize); + window.addEventListener('orientationchange', handleResize); + + const scheme = localStorage.getItem('color_scheme'); + if (scheme === 'dark') { + updateState({ darkTheme: DarkTheme, lightTheme: DarkTheme }); + } + else if (scheme === 'light') { + updateState({ darkTheme: LightTheme, lightTheme: LightTheme }); + } + else { + updateState({ darkTheme: DarkTheme, lightTheme: LightTheme }); + } + + return () => { + window.removeEventListener('resize', handleResize); + window.removeEventListener('orientationchange', handleResize); + } + // eslint-disable-next-line + }, []); + + const actions = { + setDarkTheme() { + localStorage.setItem('color_scheme', 'dark'); + updateState({ darkTheme: DarkTheme, lightTheme: DarkTheme }); + }, + setLightTheme() { + localStorage.setItem('color_scheme', 'light'); + updateState({ darkTheme: LightTheme, lightTheme: LightTheme }); + }, + steDefaultTheme() { + localStorage.clearItem('color_scheme'); + updateState({ darkTheme: DarkTheme, lightTheme: LightTheme }); + } + } + + return { state, actions } +} + + diff --git a/net/web/src/context/useViewportContext.hook.js b/net/web/src/context/useViewportContext.hook.js deleted file mode 100644 index 0d931ebe..00000000 --- a/net/web/src/context/useViewportContext.hook.js +++ /dev/null @@ -1,51 +0,0 @@ -import { useEffect, useState } from 'react'; - -export function useViewportContext() { - - const [state, setState] = useState({ - display: null, - width: null, - height: null, - }); - - const SMALL_MEDIUM = 650; - const MEDIUM_LARGE = 1000; - const LARGE_XLARGE = 1600; - - const updateState = (value) => { - setState((s) => ({ ...s, ...value })); - }; - - const handleResize = () => { - if (window.innerWidth < SMALL_MEDIUM) { - updateState({ display: 'small', width: window.innerWidth, height: window.innerHeight }); - } - else if (window.innerWidth < MEDIUM_LARGE) { - updateState({ display: 'medium', width: window.innerWidth, height: window.innerHeight }); - } - else if (window.innerWidth < LARGE_XLARGE) { - updateState({ display: 'large', width: window.innerWidth, height: window.innerHeight }); - } - else { - updateState({ display: 'xlarge', width: window.innerWidth, height: window.innerHeight }); - } - }; - - useEffect(() => { - for (let i = 0; i < 10; i++) { - setTimeout(handleResize, 100 * i); //cludge for my mobile browser - } - handleResize(); - window.addEventListener('resize', handleResize); - window.addEventListener('orientationchange', handleResize); - return () => { - window.removeEventListener('resize', handleResize); - window.removeEventListener('orientationchange', handleResize); - } - // eslint-disable-next-line - }, []); - - return { state, actions: {} } -} - - diff --git a/net/web/src/dashboard/accountItem/useAccountItem.hook.js b/net/web/src/dashboard/accountItem/useAccountItem.hook.js index b4679102..f8b9bf5b 100644 --- a/net/web/src/dashboard/accountItem/useAccountItem.hook.js +++ b/net/web/src/dashboard/accountItem/useAccountItem.hook.js @@ -2,7 +2,7 @@ import { useContext, useState, useEffect } from 'react'; import { getAccountImageUrl } from 'api/getAccountImageUrl'; import { setAccountStatus } from 'api/setAccountStatus'; import { addAccountAccess } from 'api/addAccountAccess'; -import { ViewportContext } from 'context/ViewportContext'; +import { SettingsContext } from 'context/SettingsContext'; import { AppContext } from 'context/AppContext'; export function useAccountItem(item, remove) { @@ -15,7 +15,7 @@ export function useAccountItem(item, remove) { }); const app = useContext(AppContext); - const viewport = useContext(ViewportContext); + const settings = useContext(SettingsContext); const updateState = (value) => { setState((s) => ({ ...s, ...value })); @@ -37,8 +37,8 @@ export function useAccountItem(item, remove) { }, [app.state.adminToken, item]); useEffect(() => { - updateState({ display: viewport.state.display }); - }, [viewport]); + updateState({ display: settings.state.display }); + }, [settings]); const actions = { setAccessLink: async () => { diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx index 7fe9b185..4a2b80e1 100644 --- a/net/web/src/session/Session.jsx +++ b/net/web/src/session/Session.jsx @@ -1,4 +1,4 @@ -import { useRef, useState, useEffect } from 'react'; +import { useRef, useState, useEffect, useContext } from 'react'; import { Modal, Drawer, Spin } from 'antd'; import { CallingWrapper, RingingWrapper, SessionWrapper } from './Session.styled'; import { useSession } from './useSession.hook'; @@ -16,10 +16,13 @@ import { BottomNav } from './bottomNav/BottomNav'; import { Logo } from 'logo/Logo'; import { EyeInvisibleOutlined, PhoneOutlined } from '@ant-design/icons'; import { IoVideocamOffOutline, IoVideocamOutline, IoMicOffOutline, IoMicOutline, IoCallOutline } from "react-icons/io5"; +import { ThemeProvider } from "styled-components"; +import { SettingsContext } from 'context/SettingsContext'; export function Session() { const { state, actions } = useSession(); + const settings = useContext(SettingsContext); const [ringing, setRinging] = useState([]); const [callWidth, setCallWidth] = useState(256); const [callHeight, setCallHeight] = useState(256); @@ -156,231 +159,233 @@ export function Session() { } return ( - - { (state.display === 'xlarge') && ( -
-
- -
- -
- { state.loading && ( -