diff --git a/app/app.global.css b/app/app.global.css index a2e693c..999cb6f 100644 --- a/app/app.global.css +++ b/app/app.global.css @@ -147,6 +147,10 @@ div.class-allow-device-to-connect-alert { z-index: 9999; } +.class-allow-device-to-connect-alert > div > .bp3-button { + border-radius: 50px; +} + /* ALLOW CONNECTION ALERT BLINK ANIMATION START */ div.class-allow-device-to-connect-alert > div.bp3-alert-body diff --git a/app/client/public/locales/en/translation.json b/app/client/public/locales/en/translation.json index e17ebfa..6ea8aae 100644 --- a/app/client/public/locales/en/translation.json +++ b/app/client/public/locales/en/translation.json @@ -1,4 +1,39 @@ { "Waiting for user to click ALLOW button on screen sharing device...": "Waiting for user to click ALLOW button on screen sharing device...", - "Waiting for user to select source to share from screen sharing device...": "Waiting for user to select source to share from screen sharing device..." + "Waiting for user to select source to share from screen sharing device...": "Waiting for user to select source to share from screen sharing device...", + "My Device Info": "My Device Info", + "Device Type": "Device Type", + "Your Device IP should match with Device IP in alert popup appeared on your computer, where Deskreen is running": "Your Device IP should match with \"Device IP\" in alert popup appeared on your computer, where Deskreen is running.", + "Device IP": "Device IP", + "Device Browser": "Device Browser", + "Device OS": "Device OS", + "These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running": "These details should match with the ones that you see in alert popup on screen sharing device.", + "Deskreen Screen Viewer": "Deskreen Screen Viewer", + "Connected!": "Connected!", + "Error occurred": "Error occurred", + "Deskreen Error Dialog": "Deskreen Error Dialog", + "Something went wrong": "Something went wrong", + "You may close this browser window then try to connect again": "You may close this browser window then try to connect again", + "An unknown error occurred": "An unknown error occurred", + "You were not allowed to connect": "You were not allowed to connect", + "You were disconnected": "You were disconnected", + "WebRTC error occurred": "WebRTC error occurred", + "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "If you like Deskreen, consider contributing financially. Deskreen is open-source. Your donations keep us motivated to make Deskreen even better.", + "Donate": "Donate", + "Video stream is paused": "Video stream is paused", + "Video stream is playing": "Video stream is playing", + "Pause": "Pause", + "Play": "Play", + "Video Settings": "Video Settings", + "Flip": "Flip", + "Video quality has been changed to": "Video quality has been changed to", + "Click to Open Video Settings": "Click to Open Video Settings", + "Click to Enter Full Screen Mode": "Click to Enter Full Screen Mode", + "Default video player has been turned OFF": "Default video player has been turned OFF", + "Default video player has been turned ON": "Default video player has been turned ON", + "ON": "ON", + "OFF": "OFF", + "Default Video Player": "Default Video Player", + "Click to visit our website": "Click to visit our website", + "Video is flipped horizontally": "Video is flipped horizontally" } diff --git a/app/client/public/locales/ru/translation.json b/app/client/public/locales/ru/translation.json index 985e9e8..1784441 100644 --- a/app/client/public/locales/ru/translation.json +++ b/app/client/public/locales/ru/translation.json @@ -1,4 +1,39 @@ { - "Waiting for user to click ALLOW button on screen sharing device...": "Жду когда пользователь нажмет кнопку РАЗРЕШИТЬ доступ к экрану компьютера...", - "Waiting for user to select source to share from screen sharing device...": "Жду когда пользователь выберет весь экран или окно приложения для демонстрации..." + "Waiting for user to click ALLOW button on screen sharing device...": "Ждем когда пользователь нажмет кнопку РАЗРЕШИТЬ для доступа к экрану компьютера...", + "Waiting for user to select source to share from screen sharing device...": "Ждем когда пользователь выберет Весь экран или Окно приложения для отображения его здесь...", + "My Device Info": "Информация о моем устройстве", + "Device Type": "Тип устройства", + "Your Device IP should match with Device IP in alert popup appeared on your computer, where Deskreen is running": "IP-aдрес вашего устройства должен совпадать с «IP-адресом устройства» во всплывающем окне с предупреждением на компьютере, где работает Deskreen.", + "Device IP": "IP-aдрес устройства", + "Device Browser": "Веб-браузер устройства", + "Device OS": "ОС устройства", + "These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running": "Эти данные должны совпадать с теми, которые вы видите во всплывающем окне предупреждения на экране компьютера, на котором работает Deskreen.", + "Deskreen Screen Viewer": "Просмотрщик экрана Deskreen", + "Connected!": "Подключено!", + "Error occurred": "Произошла ошибка", + "Deskreen Error Dialog": "Диалог ошибки Deskreen", + "Something went wrong": "Произошло что-то не так", + "You may close this browser window then try to connect again": "Вы можете закрыть это окно браузера и попытаться подключиться снова", + "An unknown error occurred": "Произошла неизвестная ошибка", + "You were not allowed to connect": "Вам не разрешили подключиться", + "You were disconnected": "Вы были отключены", + "WebRTC error occurred": "Произошла ошибка WebRTC", + "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "Если вам нравится Deskreen, подумайте о том, чтобы внести финансовый вклад. Deskreen - это оупенсорсный проэкт. Ваши пожертвования позволяют нам делать Deskreen еще лучше.", + "Donate": "Пожертвовать", + "Video stream is paused": "Видеопоток приостановлен", + "Video stream is playing": "Видеопоток воспроизводится", + "Pause": "Pause", + "Play": "Play", + "Video Settings": "Настройки видео", + "Flip": "Отзеркалить", + "Video quality has been changed to": "Качество видео изменено на", + "Click to Open Video Settings": "Нажмите, чтобы открыть настройки видео", + "Click to Enter Full Screen Mode": "Нажмите, чтобы перейти в полноэкранный режим", + "Default video player has been turned OFF": "Видеоплеер по умолчанию отключен", + "Default video player has been turned ON": "Видеопроигрыватель по умолчанию включен", + "ON": "ВКЛ", + "OFF": "ВЫКЛ", + "Default Video Player": "Видеоплеер по умолчанию", + "Click to visit our website": "Нажмите, чтобы посетить наш сайт", + "Video is flipped horizontally": "Видео отзеркалено" } diff --git a/app/client/public/locales/ua/translation.json b/app/client/public/locales/ua/translation.json index f297036..e786f9f 100644 --- a/app/client/public/locales/ua/translation.json +++ b/app/client/public/locales/ua/translation.json @@ -1,4 +1,39 @@ { - "Waiting for user to click ALLOW button on screen sharing device...": "Чекаэмо коли користувач натисне кнопку ДОЗВОЛИТИ доступ до екрану комп'ютера...", - "Waiting for user to select source to share from screen sharing device...": "Чекаю коли користувач вибере весь екран або вікно програми для демонстрації..." + "Waiting for user to click ALLOW button on screen sharing device...": "Чекаємо коли користувач натисне кнопку ДОЗВОЛИТИ для доступу до екрану комп'ютера...", + "Waiting for user to select source to share from screen sharing device...": "Чекаємо коли користувач вибере Весь екран або Вікно додатка для відображення його тут...", + "My Device Info": "Інформація про мій пристрій", + "Device Type": "Тип пристрою", + "Your Device IP should match with Device IP in alert popup appeared on your computer, where Deskreen is running": "IP-aдрес пристрою вашого пристрою має збігатися з «IP-адресою пристрою» у спливаючому вікні сповіщення, що з’явилося на комп’ютері, де працює Deskreen.", + "Device IP": "IP-aдрес пристрою", + "Device Browser": "Веб-браузер пристрою", + "Device OS": "ОС пристрою", + "These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running": "Ці деталі повинні збігатися з тими, які ви бачите у спливаючому вікні сповіщень на екрані комп’ютера, де запущений Deskreen.", + "Deskreen Screen Viewer": "Переглядач екрану Deskreen", + "Connected!": "Підключено!", + "Error occurred": "Виникла помилка", + "Deskreen Error Dialog": "Діалог помилки Deskreen", + "Something went wrong": "Щось не так сталося", + "You may close this browser window then try to connect again": "Ви можете закрити це вікно браузера та спробувати підключитися знову", + "An unknown error occurred": "Виникла невідома помилка", + "You were not allowed to connect": "Вам не дозволили підключитися", + "You were disconnected": "Ви були відключені", + "WebRTC error occurred": "Сталася помилка WebRTC", + "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "Якщо вам подобається Deskreen, подумайте про те, щоб внести фінансовий внесок. Deskreen - це оупенсорсний проект. Ваші пожертвування дозволяють нам робити Deskreen ще краще.", + "Donate": "Пожертвувати", + "Video stream is paused": "Відеопотік призупинено", + "Video stream is playing": "Відеопотік продовжується", + "Pause": "Pause", + "Play": "Play", + "Video Settings": "Настройки видео", + "Flip": "Віддзеркалити", + "Video quality has been changed to": "Якість відео змінено на", + "Click to Open Video Settings": "Натисніть, щоб відкрити настройки відео", + "Click to Enter Full Screen Mode": "Натисніть для входу в повноекранноий режим", + "Default video player has been turned OFF": "Стандартний відеоплеєр браузера вимкнено", + "Default video player has been turned ON": "Стандартний відеоплеєр браузера включений", + "ON": "ВКЛ", + "OFF": "ВИМК", + "Default Video Player": "Стандартний відеоплеєр браузера", + "Click to visit our website": "Клацніть, щоб відвідати наш веб-сайт", + "Video is flipped horizontally": "Відео віддзеркалено" } diff --git a/app/client/src/components/ErrorDialog/ErrorMessageEnum.ts b/app/client/src/components/ErrorDialog/ErrorMessageEnum.ts index 20fd473..43b83a9 100644 --- a/app/client/src/components/ErrorDialog/ErrorMessageEnum.ts +++ b/app/client/src/components/ErrorDialog/ErrorMessageEnum.ts @@ -1,7 +1,7 @@ export enum ErrorMessage { - UNKNOWN_ERROR = 'An unknown error uccured.', - DENY_TO_CONNECT = 'You were not allowed to connect.', - DISCONNECTED = 'You were disconnected.', - NOT_ALLOWED = 'You were not allowed to connect.', - WEBRTC_ERROR = 'WebRTC error occurred.' + UNKNOWN_ERROR = 'An unknown error occurred', + DENY_TO_CONNECT = 'You were not allowed to connect', + DISCONNECTED = 'You were disconnected', + NOT_ALLOWED = 'You were not allowed to connect', + WEBRTC_ERROR = 'WebRTC error occurred' } diff --git a/app/client/src/components/ErrorDialog/index.tsx b/app/client/src/components/ErrorDialog/index.tsx index 8122117..5c701dc 100644 --- a/app/client/src/components/ErrorDialog/index.tsx +++ b/app/client/src/components/ErrorDialog/index.tsx @@ -9,6 +9,7 @@ import { Icon, } from '@blueprintjs/core'; import { Col, Row } from 'react-flexbox-grid'; +import { useTranslation } from 'react-i18next'; import './index.css'; import { ErrorMessage } from './ErrorMessageEnum'; @@ -18,6 +19,7 @@ interface ErrorDialogProps { } function ErrorDialog(props: ErrorDialogProps) { + const { t } = useTranslation(); const { errorMessage, isOpen } = props; return ( @@ -37,7 +39,7 @@ function ErrorDialog(props: ErrorDialogProps) { > -

Deskreen Error Dialog

+

{t('Deskreen Error Dialog')}

 @@ -51,7 +53,7 @@ function ErrorDialog(props: ErrorDialogProps) { className={Classes.TEXT_DISABLED} style={{ marginBottom: '0px' }} > - Something wrong happened :( + {`${t('Something went wrong')} :(`} @@ -59,9 +61,9 @@ function ErrorDialog(props: ErrorDialogProps) {
-

{errorMessage}

+

{t(`${errorMessage}`)}

-

You may close this browser window then try to connect again.

+

{`${t('You may close this browser window then try to connect again')}.`}

); diff --git a/app/client/src/components/MyDeviceInfoCard/index.tsx b/app/client/src/components/MyDeviceInfoCard/index.tsx index 981a2e6..4a07d19 100644 --- a/app/client/src/components/MyDeviceInfoCard/index.tsx +++ b/app/client/src/components/MyDeviceInfoCard/index.tsx @@ -1,5 +1,6 @@ import React, { useContext } from 'react'; import { Callout, Card, H3, Text, Tooltip, Position } from '@blueprintjs/core'; +import { useTranslation } from 'react-i18next'; import { AppContext } from '../../providers/AppContextProvider'; import { DARK_UI_BACKGROUND, @@ -11,6 +12,7 @@ interface MyDeviceDetailsCardProps { } function MyDeviceInfoCard(props: MyDeviceDetailsCardProps) { + const { t } = useTranslation(); const { isDarkTheme } = useContext(AppContext); const { deviceDetails } = props; @@ -24,11 +26,11 @@ function MyDeviceInfoCard(props: MyDeviceDetailsCardProps) { marginBottom: '30px', }} > -

My Device Info:

+

{`${t('My Device Info')}:`}

- Device Type: {myDeviceType} + {`${t('Device Type')}: ${myDeviceType}`}
- Device IP: {myIP} + {`${t('Device IP')}: ${myIP}`}
- Device Browser: {myBrowser} - Device OS: {myOS} + {`${t('Device Browser')}: ${myBrowser}`} + {`${t('Device OS')}: ${myOS}`} - These details should match with the ones that you see in alert popup on - screen sharing device. + {t('These details should match with the ones that you see in alert popup on computer screen, where Deskreen is running')} ); diff --git a/app/client/src/components/PlayerControlPanel/__snapshots__/index.spec.tsx.snap b/app/client/src/components/PlayerControlPanel/__snapshots__/index.spec.tsx.snap index 0355f9b..cbb869a 100644 --- a/app/client/src/components/PlayerControlPanel/__snapshots__/index.spec.tsx.snap +++ b/app/client/src/components/PlayerControlPanel/__snapshots__/index.spec.tsx.snap @@ -127,7 +127,7 @@ exports[`should match exact snapshot 1`] = `
- Donate! + Donate
diff --git a/app/client/src/components/PlayerControlPanel/index.tsx b/app/client/src/components/PlayerControlPanel/index.tsx index bacc1b8..70fafdb 100644 --- a/app/client/src/components/PlayerControlPanel/index.tsx +++ b/app/client/src/components/PlayerControlPanel/index.tsx @@ -19,6 +19,7 @@ import { Toaster, Intent, } from '@blueprintjs/core'; +import { useTranslation } from 'react-i18next'; import FullScreenEnter from '../../images/fullscreen_24px.svg'; import FullScreenExit from '../../images/fullscreen_exit-24px.svg'; import RedHeartTwemojiPNG from '../../images/red_heart_2764_twemoji_120x120.png'; @@ -50,6 +51,7 @@ interface PlayerControlPanelProps { const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); function PlayerControlPanel(props: PlayerControlPanelProps) { + const { t } = useTranslation(); const { isPlaying, onSwitchChangedCallback, @@ -92,9 +94,9 @@ function PlayerControlPanel(props: PlayerControlPanelProps) { toaster?.show({ icon: 'clean', intent: Intent.PRIMARY, - message: `Video is flipped horizontally`, + message: t('Video is flipped horizontally'), }); - }, [isVideoFlipped, toaster]); + }, [isVideoFlipped, toaster, t]); return ( <> @@ -102,7 +104,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) { @@ -242,7 +246,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) { toaster?.show({ icon: 'clean', intent: Intent.PRIMARY, - message: `Video quality has been changed to ${q}`, + message: `${t('Video quality has been changed to')} ${q}`, }); }} > @@ -256,7 +260,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) { position={Position.BOTTOM} popoverClassName={Classes.POPOVER_CONTENT_SIZING} > - + @@ -271,7 +275,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) { }} /> @@ -222,7 +226,7 @@ export default function ConnectedDevicesListDrawer( }} icon="disable" > - Disconnect + {t('Disconnect')} @@ -241,8 +245,8 @@ export default function ConnectedDevicesListDrawer( setIsAlertDisconectAllOpen(false); }} icon="warning-sign" - cancelButtonText="No, Cancel" - confirmButtonText="Yes, Disconnect All" + cancelButtonText={disconnectAllCancelButtonText} + confirmButtonText={disconnectAllConfirmButtonText} intent="danger" canEscapeKeyCancel canOutsideClickCancel @@ -253,10 +257,14 @@ export default function ConnectedDevicesListDrawer( transitionDuration={isWithReactRevealAnimations() ? 700 : 0} >

- Are you sure you want to disconnect all connected viewing devices? + {t( + 'Are you sure you want to disconnect all connected viewing devices?' + )}

- This step can not be reverted. - You will have to connect all devices manually again. + {`${t('This step can not be undone')}.`} + + {`${t('You will have to connect all devices manually again')}.`} + ); diff --git a/app/components/DeviceInfoCallout/index.tsx b/app/components/DeviceInfoCallout/index.tsx index 7da786f..b1b5c3d 100644 --- a/app/components/DeviceInfoCallout/index.tsx +++ b/app/components/DeviceInfoCallout/index.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { Callout, Text, H4, Tooltip, Position } from '@blueprintjs/core'; import { Row, Col } from 'react-flexbox-grid'; +import { useTranslation } from 'react-i18next'; +import { TFunction } from 'i18next'; interface DeviceInfoCalloutProps { deviceType: string | undefined; @@ -11,24 +13,24 @@ interface DeviceInfoCalloutProps { deviceBrowser: string | undefined; } -function getContentOfTooltip() { +function getContentOfTooltip(t: TFunction) { return ( <> - {`This should match with 'Device IP' displayed on the screen of device - that is trying to connect.`} + {t( + 'This should match with Device IP displayed on the screen of device that is trying to connect' + )} - - {`If IPs don't match click 'Deny' or 'Disconnect' button immediately to - secure your computer!`} - + {t('If IP addresses dont match click Disconnect button')} ); } export default function DeviceInfoCallout(props: DeviceInfoCalloutProps) { + const { t } = useTranslation(); + const { deviceType, deviceIP, @@ -40,15 +42,15 @@ export default function DeviceInfoCallout(props: DeviceInfoCalloutProps) { return ( <>

- Partner Device Info: + {`${t('Partner Device Info')}:`}

- + - Device Type: {deviceType} + {`${t('Device Type')}:`} {deviceType} - +
- Device IP: {deviceIP} + {`${t('Device IP')}:`}{' '} + {deviceIP}
- Device Browser: {deviceBrowser} + {`${t('Device Browser')}:`} {deviceBrowser} - Device OS: {deviceOS} + {`${t('Device OS')}:`} {deviceOS}
- Session ID: {sharingSessionID} + {`${t('Session ID')}:`} {sharingSessionID}
diff --git a/app/components/LanguageSelector/index.tsx b/app/components/LanguageSelector/index.tsx new file mode 100644 index 0000000..9fbe8ce --- /dev/null +++ b/app/components/LanguageSelector/index.tsx @@ -0,0 +1,59 @@ +import React, { useContext, useEffect, useState } from 'react'; +import { remote } from 'electron'; +import { HTMLSelect } from '@blueprintjs/core'; +import i18n from 'i18next'; +import SharingSessionService from '../../features/SharingSessionService'; +import { SettingsContext } from '../../containers/SettingsProvider'; +import i18n_client, { + getLangFullNameToLangISOKeyMap, + getLangISOKeyToLangFullNameMap, +} from '../../configs/i18next.config.client'; + +const sharingSessionService = remote.getGlobal( + 'sharingSessionService' +) as SharingSessionService; + +export default function LanguageSelector() { + const { setCurrentLanguageHook } = useContext(SettingsContext); + + const [languagesList, setLanguagesList] = useState([] as string[]); + + useEffect(() => { + const tmp: string[] = []; + getLangFullNameToLangISOKeyMap().forEach((_, key) => { + tmp.push(key); + }); + setLanguagesList(tmp); + setCurrentLanguageHook(i18n_client.language); + }, [setCurrentLanguageHook]); + + const onChangeLanguageHTMLSelectHandler = ( + event: React.ChangeEvent + ) => { + if ( + event.currentTarget && + getLangFullNameToLangISOKeyMap().has(event.currentTarget.value) + ) { + const newLang = + getLangFullNameToLangISOKeyMap().get(event.currentTarget.value) || + 'English'; + i18n.changeLanguage(newLang); + // TODO: call sharing sessions service here to notify all connected clients about language change + sharingSessionService.sharingSessions.forEach((sharingSession) => { + sharingSession?.appLanguageChanged(); + }); + } + }; + + return ( + + ); +} diff --git a/app/components/SettingsOverlay/SettingsOverlay.tsx b/app/components/SettingsOverlay/SettingsOverlay.tsx index 1454298..013285b 100644 --- a/app/components/SettingsOverlay/SettingsOverlay.tsx +++ b/app/components/SettingsOverlay/SettingsOverlay.tsx @@ -1,10 +1,9 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ -import { ipcRenderer, remote, shell } from 'electron'; -import React, { useContext, useCallback, useEffect, useState } from 'react'; +import { ipcRenderer, shell } from 'electron'; +import React, { useContext, useEffect, useState } from 'react'; import { - Button, Overlay, Classes, H3, @@ -13,38 +12,28 @@ import { Tabs, Tab, Icon, - HTMLSelect, Text, - ControlGroup, Checkbox, } from '@blueprintjs/core'; import { useTranslation } from 'react-i18next'; import { Col, Row } from 'react-flexbox-grid'; import { createStyles, makeStyles } from '@material-ui/core/styles'; -import i18n from 'i18next'; -import SharingSessionService from '../../features/SharingSessionService'; import { DARK_UI_BACKGROUND, LIGHT_UI_BACKGROUND, SettingsContext, } from '../../containers/SettingsProvider'; import CloseOverlayButton from '../CloseOverlayButton'; -import i18n_client, { - getLangFullNameToLangISOKeyMap, - getLangISOKeyToLangFullNameMap, -} from '../../configs/i18next.config.client'; import SettingRowLabelAndInput from './SettingRowLabelAndInput'; import isWithReactRevealAnimations from '../../utils/isWithReactRevealAnimations'; import config from '../../api/config'; +import LanguageSelector from '../LanguageSelector'; +import ToggleThemeBtnGroup from '../ToggleThemeBtnGroup'; const { port } = config; const Fade = require('react-reveal/Fade'); -const sharingSessionService = remote.getGlobal( - 'sharingSessionService' -) as SharingSessionService; - interface SettingsOverlayProps { isSettingsOpen: boolean; handleClose: () => void; @@ -73,13 +62,7 @@ export default function SettingsOverlay(props: SettingsOverlayProps) { const [latestVersion, setLatestVersion] = useState(''); const [currentVersion, setCurrentVersion] = useState(''); - const { - isDarkTheme, - setIsDarkThemeHook, - setCurrentLanguageHook, - } = useContext(SettingsContext); - - const [languagesList, setLanguagesList] = useState([] as string[]); + const { isDarkTheme } = useContext(SettingsContext); useEffect(() => { const getLatestVersion = async () => { @@ -98,96 +81,14 @@ export default function SettingsOverlay(props: SettingsOverlayProps) { getCurrentVersion(); }, []); - useEffect(() => { - const tmp: string[] = []; - getLangFullNameToLangISOKeyMap().forEach((_, key) => { - tmp.push(key); - }); - setLanguagesList(tmp); - setCurrentLanguageHook(i18n_client.language); - }, [setCurrentLanguageHook]); - const getClassesCallback = useStylesWithTheme(isDarkTheme); - const handleToggleDarkTheme = useCallback(() => { - if (!isDarkTheme) { - document.body.classList.toggle(Classes.DARK); - setIsDarkThemeHook(true); - } - // TODO: call sharing sessions service here to notify all connected clients about theme change - sharingSessionService.sharingSessions.forEach((sharingSession) => { - sharingSession?.appThemeChanged(true); - }); - sharingSessionService.setAppTheme(true); - }, [isDarkTheme, setIsDarkThemeHook]); - - const handleToggleLightTheme = useCallback(() => { - if (isDarkTheme) { - document.body.classList.toggle(Classes.DARK); - setIsDarkThemeHook(false); - } - // TODO: call sharing sessions service here to notify all connected clients about theme change - sharingSessionService.sharingSessions.forEach((sharingSession) => { - sharingSession?.appThemeChanged(false); - }); - sharingSessionService.setAppTheme(false); - }, [isDarkTheme, setIsDarkThemeHook]); - - const onChangeLangueageHTMLSelectHandler = ( - event: React.ChangeEvent - ) => { - if ( - event.currentTarget && - getLangFullNameToLangISOKeyMap().has(event.currentTarget.value) - ) { - const newLang = - getLangFullNameToLangISOKeyMap().get(event.currentTarget.value) || - 'English'; - i18n.changeLanguage(newLang); - // TODO: call sharing sessions service here to notify all connected clients about language change - sharingSessionService.sharingSessions.forEach((sharingSession) => { - sharingSession?.appLanguageChanged(newLang); - }); - sharingSessionService.setAppLanguage(newLang); - } - }; - - const getThemeChangingControlGroupInput = () => { - return ( - - @@ -421,13 +366,13 @@ exports[`should match exact snapshot 1`] = ` class="col-xs-6" >
- Disabled +
@@ -594,15 +537,15 @@ exports[`should match exact snapshot 1`] = ` tabindex="0" />
- Security -
-
-
-
- About -
+ />

- General Settings -

+ />
- Colors -
+ />
@@ -878,9 +771,12 @@ exports[`should match exact snapshot 1`] = ` >
@@ -948,13 +836,13 @@ exports[`should match exact snapshot 1`] = ` class="col-xs-6" >
- Disabled +
@@ -1174,7 +1060,7 @@ exports[`should match exact snapshot 1`] = ` unmountOnExit={false} >
- - } - parentId="TabsExample" - selected={false} - title="" - > -

- General Settings -

+ />
- - - - } - label="Colors" + input={} + label="" >
- Colors -
+ />
@@ -1719,115 +1510,141 @@ exports[`should match exact snapshot 1`] = `
- -
+ - - - - - + + - - - - - moon - - - - - - - Dark - - - - -
- + + + moon + + + + + + + + +
+ +
@@ -1837,19 +1654,7 @@ exports[`should match exact snapshot 1`] = ` - } + input={} label="Language" >
- -
+ - - - + English + + + + + - - - double-caret-vertical - - - - - -
- + + + double-caret-vertical + + + + + +
+ +
@@ -2009,12 +1826,12 @@ exports[`should match exact snapshot 1`] = ` icon="automatic-updates" input={ } - label="Automatic Updates" + label="" >
- Automatic Updates -
+ />
@@ -2099,21 +1914,21 @@ exports[`should match exact snapshot 1`] = ` className="row" > diff --git a/app/components/ShareAppOrScreenControlGroup.tsx b/app/components/ShareAppOrScreenControlGroup.tsx index 2139779..b5095a9 100644 --- a/app/components/ShareAppOrScreenControlGroup.tsx +++ b/app/components/ShareAppOrScreenControlGroup.tsx @@ -1,6 +1,7 @@ import React, { useState, useCallback } from 'react'; import { Button, Icon, ControlGroup, Text } from '@blueprintjs/core'; import { createStyles, makeStyles } from '@material-ui/core/styles'; +import { useTranslation } from 'react-i18next'; import ChooseAppOrScreenOverlay from './StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay'; interface ShareAppOrScreenControlGroupProps { @@ -53,6 +54,7 @@ const useStyles = makeStyles(() => export default function ShareAppOrScreenControlGroup( props: ShareAppOrScreenControlGroupProps ) { + const { t } = useTranslation(); const { handleNextEntireScreen, handleNextApplicationWindow } = props; const classes = useStyles(); @@ -103,7 +105,7 @@ export default function ShareAppOrScreenControlGroup( iconSize={100} color="white" /> - Entire Screen + {t('Entire Screen')} void ) => { + const disconnectButtonText = t('Disconnect'); + return (
@@ -35,7 +40,7 @@ const getDeviceConnectedPopoverContent = ( }} style={{ width: '100%', borderRadius: '5px' }} > - Disconnect + {disconnectButtonText} @@ -47,18 +52,20 @@ const getDeviceConnectedPopoverContent = ( export default function DeviceConnectedInfoButton( props: DeviceConnectedInfoButtonProps ) { + const { t } = useTranslation(); + const { device, onDisconnect } = props; return ( <> Click to manage} + content={{t('Click to see more')}} position="right" hoverOpenDelay={400} > @@ -66,7 +73,7 @@ export default function DeviceConnectedInfoButton( id="connected-device-info-stepper-button" intent="success" style={{ - width: '120px', + width: '150px', height: '10px !important', borderRadius: '100px', position: 'relative', @@ -78,7 +85,7 @@ export default function DeviceConnectedInfoButton( - Connected + {t('Connected')} diff --git a/app/components/StepperPanel/__snapshots__/DeviceConnectedInfoButton.spec.tsx.snap b/app/components/StepperPanel/__snapshots__/DeviceConnectedInfoButton.spec.tsx.snap index d4ac99a..6082c51 100644 --- a/app/components/StepperPanel/__snapshots__/DeviceConnectedInfoButton.spec.tsx.snap +++ b/app/components/StepperPanel/__snapshots__/DeviceConnectedInfoButton.spec.tsx.snap @@ -65,7 +65,7 @@ exports[`should match exact snapshot 1`] = ` } } > - Disconnect + @@ -114,7 +114,7 @@ exports[`should match exact snapshot 1`] = ` ellipsize={false} tagName="div" > - Click to manage + } hoverCloseDelay={0} @@ -135,7 +135,7 @@ exports[`should match exact snapshot 1`] = ` ellipsize={false} tagName="div" > - Click to manage + } defaultIsOpen={false} @@ -196,7 +196,7 @@ exports[`should match exact snapshot 1`] = ` "height": "10px !important", "margin": "0 auto", "position": "relative", - "width": "120px", + "width": "150px", } } tabIndex={0} @@ -213,7 +213,7 @@ exports[`should match exact snapshot 1`] = ` "height": "10px !important", "margin": "0 auto", "position": "relative", - "width": "120px", + "width": "150px", } } tabIndex={0} @@ -274,9 +274,7 @@ exports[`should match exact snapshot 1`] = ` >
- Connected -
+ />
diff --git a/app/components/StepsOfStepper/ChooseAppOrScreeenStep.tsx b/app/components/StepsOfStepper/ChooseAppOrScreeenStep.tsx index cda9f3a..0f7f84e 100644 --- a/app/components/StepsOfStepper/ChooseAppOrScreeenStep.tsx +++ b/app/components/StepsOfStepper/ChooseAppOrScreeenStep.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { Row, Col } from 'react-flexbox-grid'; -import { Text } from '@blueprintjs/core'; import ShareEntireScreenOrAppWindowControlGroup from '../ShareAppOrScreenControlGroup'; interface ChooseAppOrScreeenStepProps { @@ -18,9 +17,6 @@ const ChooseAppOrScreeenStep: React.FC = ( -
- Choose Entire Screen or App window you want to share -

- Select Entire Screen to Share + {t('Select Entire Screen to Share')}

) : (

- Select App Window to Share + {t('Select App Window to Share')}

)} @@ -168,7 +171,7 @@ export default function ChooseAppOrScreenOverlay( borderRadius: '100px', }} > - Refresh + {t('Refresh')} diff --git a/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/__snapshots__/ChooseAppOrScreenOverlay.spec.tsx.snap b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/__snapshots__/ChooseAppOrScreenOverlay.spec.tsx.snap index 70bfd7e..87e5d77 100644 --- a/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/__snapshots__/ChooseAppOrScreenOverlay.spec.tsx.snap +++ b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/__snapshots__/ChooseAppOrScreenOverlay.spec.tsx.snap @@ -103,9 +103,7 @@ exports[`should match exact snapshot 1`] = `

- Select Entire Screen to Share -

+ />
- - Refresh -
- Select Entire Screen to Share - + />
- - Refresh -
- Select Entire Screen to Share - + />
@@ -607,12 +591,6 @@ exports[`should match exact snapshot 1`] = ` - - Refresh - diff --git a/app/components/StepsOfStepper/ConfirmStep.tsx b/app/components/StepsOfStepper/ConfirmStep.tsx index 3dd1e22..369281f 100644 --- a/app/components/StepsOfStepper/ConfirmStep.tsx +++ b/app/components/StepsOfStepper/ConfirmStep.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import { remote } from 'electron'; import { Text } from '@blueprintjs/core'; import { Row, Col } from 'react-flexbox-grid'; +import { useTranslation } from 'react-i18next'; import SharingSourcePreviewCard from '../SharingSourcePreviewCard'; import SharingSessionService from '../../features/SharingSessionService'; import DeviceInfoCallout from '../DeviceInfoCallout'; @@ -16,6 +17,7 @@ interface ConfirmStepProps { } export default function ConfirmStep(props: ConfirmStepProps) { + const { t } = useTranslation(); const { device } = props; const [sharingSession, setSharingSession] = useState< SharingSession | undefined @@ -34,7 +36,7 @@ export default function ConfirmStep(props: ConfirmStepProps) { {/* eslint-disable-next-line react/no-unescaped-entities */} - Check if all is OK and click "Confirm" + {t('Check if all is OK and click Confirm')} @@ -53,14 +55,6 @@ export default function ConfirmStep(props: ConfirmStepProps) { /> - - - - {/* eslint-disable-next-line react/no-unescaped-entities */} - Click "Back" if you need to change something - - - ); } diff --git a/app/components/StepsOfStepper/IntermediateStep.tsx b/app/components/StepsOfStepper/IntermediateStep.tsx index 7bda314..7daaac8 100644 --- a/app/components/StepsOfStepper/IntermediateStep.tsx +++ b/app/components/StepsOfStepper/IntermediateStep.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { remote } from 'electron'; -import { Button } from '@blueprintjs/core'; +import { Button, Text } from '@blueprintjs/core'; +import { useTranslation } from 'react-i18next'; +import { TFunction } from 'i18next'; import { Col, Row } from 'react-flexbox-grid'; import DEVICES from '../../constants/test-devices.json'; import ScanQRStep from './ScanQRStep'; @@ -28,6 +30,7 @@ interface IntermediateStepProps { } function getStepContent( + t: TFunction, stepIndex: number, handleNextEntireScreen: () => void, handleNextApplicationWindow: () => void, @@ -38,10 +41,19 @@ function getStepContent( return ; case 1: return ( - + <> + +
+ + {t('Choose Entire Screen or App window you want to share')} + +
+ + + ); case 2: return ; @@ -55,6 +67,8 @@ function isConfirmStep(activeStep: number, steps: string[]) { } export default function IntermediateStep(props: IntermediateStepProps) { + const { t } = useTranslation(); + const { activeStep, steps, @@ -83,6 +97,7 @@ export default function IntermediateStep(props: IntermediateStepProps) { }} > {getStepContent( + t, activeStep, handleNextEntireScreen, handleNextApplicationWindow, @@ -168,7 +183,9 @@ export default function IntermediateStep(props: IntermediateStepProps) { : 'chevron-right' } > - {isConfirmStep(activeStep, steps) ? 'Confirm' : 'Next'} + {isConfirmStep(activeStep, steps) + ? t('Confirm Button Text') + : 'Next'} @@ -185,7 +202,7 @@ export default function IntermediateStep(props: IntermediateStepProps) { }} onClick={handleBack} icon="chevron-left" - text="No, I need to share other thing" + text={t('No, I need to choose other')} /> diff --git a/app/components/StepsOfStepper/ScanQRStep.tsx b/app/components/StepsOfStepper/ScanQRStep.tsx index 04ce9a8..c7a6cd4 100644 --- a/app/components/StepsOfStepper/ScanQRStep.tsx +++ b/app/components/StepsOfStepper/ScanQRStep.tsx @@ -101,13 +101,15 @@ const ScanQRStep: React.FC = () => { borderRadius: '20px', }} > - Make sure your computer and device are connected to same WiFi + {t( + 'Make sure your computer and screen viewing device are connected to same Wi-Fi' + )} {t('Scan the QR code')}
- +
- or type the following address manually in browser address bar on any - device: + {`${t( + 'Or type the following address in browser address bar on any device' + )}:`}
- + ); diff --git a/app/components/StepsOfStepper/__snapshots__/ChooseAppOrScreeenStep.spec.tsx.snap b/app/components/StepsOfStepper/__snapshots__/ChooseAppOrScreeenStep.spec.tsx.snap index fbce799..506fb17 100644 --- a/app/components/StepsOfStepper/__snapshots__/ChooseAppOrScreeenStep.spec.tsx.snap +++ b/app/components/StepsOfStepper/__snapshots__/ChooseAppOrScreeenStep.spec.tsx.snap @@ -61,24 +61,6 @@ exports[`should match exact snapshot 1`] = `
-
- -
- Choose Entire Screen or App window you want to share -
- -
@@ -168,9 +150,7 @@ exports[`should match exact snapshot 1`] = ` >
- Entire Screen -
+ />
- Application Window -
+ /> - - OR - diff --git a/app/components/StepsOfStepper/__snapshots__/ConfirmStep.spec.tsx.snap b/app/components/StepsOfStepper/__snapshots__/ConfirmStep.spec.tsx.snap index c179c37..7b525a0 100644 --- a/app/components/StepsOfStepper/__snapshots__/ConfirmStep.spec.tsx.snap +++ b/app/components/StepsOfStepper/__snapshots__/ConfirmStep.spec.tsx.snap @@ -72,9 +72,7 @@ exports[`should match exact snapshot 1`] = ` >
- Check if all is OK and click "Confirm" -
+ />
@@ -111,15 +109,25 @@ exports[`should match exact snapshot 1`] = ` } } > - Partner Device Info: + :
- Device Type: + : +
@@ -151,8 +160,7 @@ exports[`should match exact snapshot 1`] = ` ellipsize={false} tagName="div" > - This should match with 'Device IP' displayed on the screen of device - that is trying to connect. + - If IPs don't match click 'Deny' or 'Disconnect' button immediately to - secure your computer! + @@ -188,8 +195,7 @@ exports[`should match exact snapshot 1`] = ` ellipsize={false} tagName="div" > - This should match with 'Device IP' displayed on the screen of device - that is trying to connect. + - If IPs don't match click 'Deny' or 'Disconnect' button immediately to - secure your computer! + @@ -277,7 +282,8 @@ exports[`should match exact snapshot 1`] = `
- Device IP: + : + @@ -314,7 +320,8 @@ exports[`should match exact snapshot 1`] = `
- Device Browser: + : +
@@ -325,7 +332,8 @@ exports[`should match exact snapshot 1`] = `
- Device OS: + : +
@@ -345,7 +353,8 @@ exports[`should match exact snapshot 1`] = `
- Session ID: + : +
@@ -500,52 +509,6 @@ exports[`should match exact snapshot 1`] = `
- -
- -
- -
- Click "Back" if you need to change something -
- -
- -
- diff --git a/app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap b/app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap index 6b8b1ab..9e8c4e9 100644 --- a/app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap +++ b/app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap @@ -91,9 +91,7 @@ exports[`should match exact snapshot on each step 1`] = ` "paddingRight": "8px", } } - > - Make sure your computer and device are connected to same WiFi - + />
- or type the following address manually in browser address bar on any device: + :
); - }, []); + }, [donateTooltipContent, t]); const renderConnectedDevicesListButton = useCallback(() => { return (
- +
); - }, [getClassesCallback, handleToggleConnectedDevicesListDrawer]); + }, [getClassesCallback, handleToggleConnectedDevicesListDrawer, t]); const renderHelpButton = useCallback(() => { return (
- +
); - }, [getClassesCallback]); + }, [getClassesCallback, t]); const renderSettingsButton = useCallback(() => { return (
- +
); - }, [getClassesCallback, handleSettingsOpen]); + }, [getClassesCallback, handleSettingsOpen, t]); const renderLogoWithAppName = useCallback(() => { return ( @@ -179,10 +183,7 @@ export default function TopPanel(props: any) { id="logo-with-popover-visit-website" className={getClassesCallback().logoWithAppName} > - + - - - @@ -212,9 +205,7 @@ exports[`should match exact snapshot 1`] = ` >
- Connected Devices -
+ /> @@ -406,9 +392,7 @@ exports[`should match exact snapshot 1`] = ` >
- Connected Devices -
+ /> - - Disconnect all devices - @@ -608,8 +586,8 @@ exports[`should match exact snapshot 1`] = `
- Entire Screen -
+ />
- Application Window -
+ /> - - OR - diff --git a/app/components/__snapshots__/TopPanel.spec.tsx.snap b/app/components/__snapshots__/TopPanel.spec.tsx.snap index 652ca38..aa4e533 100644 --- a/app/components/__snapshots__/TopPanel.spec.tsx.snap +++ b/app/components/__snapshots__/TopPanel.spec.tsx.snap @@ -17,7 +17,7 @@ exports[` should match exact snapshot 1`] = ` > should match exact snapshot 1`] = ` - Donate! - + /> @@ -79,7 +77,7 @@ exports[` should match exact snapshot 1`] = ` id="logo-with-popover-visit-website" > should match exact snapshot 1`] = ` className="makeStyles-topPanelControlButtonMargin-34" > should match exact snapshot 1`] = ` className="makeStyles-topPanelControlButtonMargin-55" > should match exact snapshot 1`] = ` className="makeStyles-topPanelControlButtonMargin-76" > => { const res = new Map(); // eslint-disable-next-line no-restricted-syntax @@ -32,6 +36,27 @@ export const getLangISOKeyToLangFullNameMap = (): Map => { return res; }; +function shuffleArray(array: any[]) { + // eslint-disable-next-line no-plusplus + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } +} + +export const getShuffledArrayOfHello = (): string[] => { + const res: string[] = []; + + res.push(translationUA.Hello); + res.push(translationRU.Hello); + + shuffleArray(res); + + res.unshift(translationEN.Hello); + + return res; +}; + const appPath = remote.getGlobal('appPath'); const i18nextOptions = { diff --git a/app/containers/DeskreenStepper.tsx b/app/containers/DeskreenStepper.tsx index 798e649..483da2a 100644 --- a/app/containers/DeskreenStepper.tsx +++ b/app/containers/DeskreenStepper.tsx @@ -6,10 +6,21 @@ import Stepper from '@material-ui/core/Stepper'; import Step from '@material-ui/core/Step'; import StepLabel from '@material-ui/core/StepLabel'; import { Row, Col, Grid } from 'react-flexbox-grid'; -import { Dialog, H3, H4, H5, Icon, Spinner, Text } from '@blueprintjs/core'; - +import settings from 'electron-settings'; +import { + Button, + Dialog, + H1, + H3, + H4, + H5, + Icon, + Spinner, + Text, +} from '@blueprintjs/core'; +import { useTranslation } from 'react-i18next'; +import { TFunction } from 'i18next'; import { useToasts } from 'react-toast-notifications'; - import SuccessStep from '../components/StepsOfStepper/SuccessStep'; import IntermediateStep from '../components/StepsOfStepper/IntermediateStep'; import AllowConnectionForDeviceAlert from '../components/AllowConnectionForDeviceAlert'; @@ -23,6 +34,9 @@ import SharingSessionService from '../features/SharingSessionService'; import ConnectedDevicesService from '../features/ConnectedDevicesService'; import SharingSessionStatusEnum from '../features/SharingSessionService/SharingSessionStatusEnum'; import Logger from '../utils/LoggerWithFilePrefix'; +import LanguageSelector from '../components/LanguageSelector'; +import { getShuffledArrayOfHello } from '../configs/i18next.config.client'; +import ToggleThemeBtnGroup from '../components/ToggleThemeBtnGroup'; const log = new Logger(__filename); @@ -33,6 +47,8 @@ const connectedDevicesService = remote.getGlobal( 'connectedDevicesService' ) as ConnectedDevicesService; +const Fade = require('react-reveal/Fade'); + const useStyles = makeStyles(() => createStyles({ stepContent: { @@ -51,21 +67,28 @@ const useStyles = makeStyles(() => }) ); -function getSteps() { - return ['Connect', 'Select', 'Confirm']; +function getSteps(t: TFunction) { + return [t('Connect'), t('Select'), t('Confirm')]; } // eslint-disable-next-line react/display-name const DeskreenStepper = React.forwardRef((_props, ref) => { + const { t } = useTranslation(); + const classes = useStyles(); - const { isDarkTheme, currentLanguage } = useContext(SettingsContext); + const { isDarkTheme } = useContext(SettingsContext); const { addToast } = useToasts(); const [isAlertOpen, setIsAlertOpen] = useState(false); const [isUserAllowedConnection, setIsUserAllowedConnection] = useState(false); const [isNoWiFiError, setisNoWiFiError] = useState(false); + const [isSelectLanguageDialogOpen, setIsSelectLanguageDialogOpen] = useState( + false + ); + const [isDisplayHelloWord, setIsDisplayHelloWord] = useState(true); + const [helloWord, setHelloWord] = useState('Hello'); const [ pendingConnectionDevice, @@ -109,9 +132,29 @@ const DeskreenStepper = React.forwardRef((_props, ref) => { }, []); useEffect(() => { - sharingSessionService.setAppLanguage(currentLanguage); - sharingSessionService.setAppTheme(isDarkTheme); - }, [currentLanguage, isDarkTheme]); + const isFirstTimeStart = !settings.hasSync('isNotFirstTimeAppStart'); + setIsSelectLanguageDialogOpen(isFirstTimeStart); + + if (!isFirstTimeStart) return () => {}; + + const helloWords = getShuffledArrayOfHello(); + + let pos = 0; + const helloInterval = setInterval(() => { + setIsDisplayHelloWord(false); + if (pos + 1 === helloWords.length) { + pos = 0; + } else { + pos += 1; + } + setHelloWord(helloWords[pos]); + setIsDisplayHelloWord(true); + }, 4000); + + return () => { + clearInterval(helloInterval); + }; + }, []); const [activeStep, setActiveStep] = useState(0); const [isEntireScreenSelected, setIsEntireScreenSelected] = useState(false); @@ -119,7 +162,7 @@ const DeskreenStepper = React.forwardRef((_props, ref) => { isApplicationWindowSelected, setIsApplicationWindowSelected, ] = useState(false); - const steps = getSteps(); + const steps = getSteps(t); const handleNext = useCallback(() => { if (activeStep === steps.length - 1) { @@ -238,7 +281,9 @@ const DeskreenStepper = React.forwardRef((_props, ref) => { addToast( - Device is successfully disconnected by you. You can connect new device + {t( + 'Device is successfully disconnected by you You can connect a new device' + )} , { appearance: 'info', @@ -247,7 +292,7 @@ const DeskreenStepper = React.forwardRef((_props, ref) => { isdarktheme: `${isDarkTheme}`, } ); - }, [addToast, handleResetWithSharingSessionRestart, isDarkTheme]); + }, [addToast, handleResetWithSharingSessionRestart, isDarkTheme, t]); const renderIntermediateOrSuccessStepContent = useCallback(() => { return activeStep === steps.length ? ( @@ -365,6 +410,54 @@ const DeskreenStepper = React.forwardRef((_props, ref) => { + + +
+ + +

{helloWord}

+ + + + + + + + +
{t('Language')}
+ + + + + + + + + + +
{t('Color Theme')}
+ + + + + + + + + +
+ + ); }); diff --git a/app/containers/__snapshots__/DeskreenStepper.spec.tsx.snap b/app/containers/__snapshots__/DeskreenStepper.spec.tsx.snap index 2010fc4..215b8b0 100644 --- a/app/containers/__snapshots__/DeskreenStepper.spec.tsx.snap +++ b/app/containers/__snapshots__/DeskreenStepper.spec.tsx.snap @@ -159,7 +159,7 @@ exports[`should match exact snapshot 1`] = ` } disabled={false} index={0} - key=".$Connect" + key=".$" last={false} orientation="horizontal" > @@ -350,9 +350,7 @@ exports[`should match exact snapshot 1`] = ` >
- Connect -
+ /> @@ -375,7 +373,7 @@ exports[`should match exact snapshot 1`] = ` } disabled={true} index={1} - key=".$Select" + key=".$" last={false} orientation="horizontal" > @@ -622,9 +620,7 @@ exports[`should match exact snapshot 1`] = ` >
- Select -
+ /> @@ -647,7 +643,7 @@ exports[`should match exact snapshot 1`] = ` } disabled={true} index={2} - key=".$Confirm" + key=".$" last={true} orientation="horizontal" > @@ -894,9 +890,7 @@ exports[`should match exact snapshot 1`] = ` >
- Confirm -
+ /> @@ -940,9 +934,9 @@ exports[`should match exact snapshot 1`] = ` resetUserAllowedConnection={[Function]} steps={ Array [ - "Connect", - "Select", - "Confirm", + "", + "", + "", ] } > @@ -997,9 +991,7 @@ exports[`should match exact snapshot 1`] = ` "paddingRight": "8px", } } - > - Make sure your computer and device are connected to same WiFi - + />
- or type the following address manually in browser address bar on any device: + :
+ + + + + +
+ +
+ + + + + + + + } + > + +
+
+
+
+
+
+
+
+
+

+ Hello +

+
+
+
+
+
+
+ + + + translate + + + + +
+
+
+ Language +
+
+
+
+ + + + + double-caret-vertical + + + + +
+
+
+
+
+ + + + style + + + + +
+
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ } + > + +
+ + +
+ + + + +
+
+ +
+
+ +
+ + +
+
+ +

+ Hello +

+ +
+
+ + +
+ + +
+ +
+ +
+ + + + + translate + + + + + +
+ + +
+ +
+ Language +
+ +
+ + +
+ + +
+ + + + + + double-caret-vertical + + + + + +
+ + +
+ +
+ + +
+ +
+ + + + + style + + + + + +
+ + +
+ +
+ +
+ + +
+ + +
+ + + + + + +
+ + +
+ +
+ +
+ + +
+ + + +
+ +
+
+ +
+
+ + +
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+

+ Hello +

+
+
+
+
+
+
+ + + + translate + + + + +
+
+
+ Language +
+
+
+
+ + + + + double-caret-vertical + + + + +
+
+
+
+
+ + + + style + + + + +
+
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
} > diff --git a/app/containers/__snapshots__/HomePage.spec.tsx.snap b/app/containers/__snapshots__/HomePage.spec.tsx.snap index 79324f9..8ef6696 100644 --- a/app/containers/__snapshots__/HomePage.spec.tsx.snap +++ b/app/containers/__snapshots__/HomePage.spec.tsx.snap @@ -83,7 +83,7 @@ exports[`should match exact snapshot 1`] = ` className="" >
- Donate! -
+ />
@@ -270,7 +268,7 @@ exports[`should match exact snapshot 1`] = ` id="logo-with-popover-visit-website" > @@ -1272,9 +1270,7 @@ exports[`should match exact snapshot 1`] = ` >
- Connect -
+ /> @@ -1297,7 +1293,7 @@ exports[`should match exact snapshot 1`] = ` } disabled={true} index={1} - key=".$Select" + key=".$" last={false} orientation="horizontal" > @@ -1544,9 +1540,7 @@ exports[`should match exact snapshot 1`] = ` >
- Select -
+ /> @@ -1569,7 +1563,7 @@ exports[`should match exact snapshot 1`] = ` } disabled={true} index={2} - key=".$Confirm" + key=".$" last={true} orientation="horizontal" > @@ -1816,9 +1810,7 @@ exports[`should match exact snapshot 1`] = ` >
- Confirm -
+ /> @@ -1862,9 +1854,9 @@ exports[`should match exact snapshot 1`] = ` resetUserAllowedConnection={[Function]} steps={ Array [ - "Connect", - "Select", - "Confirm", + "", + "", + "", ] } > @@ -1919,9 +1911,7 @@ exports[`should match exact snapshot 1`] = ` "paddingRight": "8px", } } - > - Make sure your computer and device are connected to same WiFi - + />
- or type the following address manually in browser address bar on any device: + :
+ + + + + +
+ +
+ + + + + + + + } + > + +
+
+
+
+
+
+
+
+
+

+ Hello +

+
+
+
+
+
+
+ + + + translate + + + + +
+
+
+ Language +
+
+
+
+ + + + + double-caret-vertical + + + + +
+
+
+
+
+ + + + style + + + + +
+
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ } + > + +
+ + +
+ + + + +
+
+ +
+
+ +
+ + +
+
+ +

+ Hello +

+ +
+
+ + +
+ + +
+ +
+ +
+ + + + + translate + + + + + +
+ + +
+ +
+ Language +
+ +
+ + +
+ + +
+ + + + + + double-caret-vertical + + + + + +
+ + +
+ +
+ + +
+ +
+ + + + + style + + + + + +
+ + +
+ +
+ +
+ + +
+ + +
+ + + + + + +
+ + +
+ +
+ +
+ + +
+ + + +
+ +
+
+ +
+
+ + +
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+

+ Hello +

+
+
+
+
+
+
+ + + + translate + + + + +
+
+
+ Language +
+
+
+
+ + + + + double-caret-vertical + + + + +
+
+
+
+
+ + + + style + + + + +
+
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
} > diff --git a/app/features/PeerConnection/createDesktopCapturerStream.spec.ts b/app/features/PeerConnection/createDesktopCapturerStream.spec.ts index 5177d8a..139bb7a 100644 --- a/app/features/PeerConnection/createDesktopCapturerStream.spec.ts +++ b/app/features/PeerConnection/createDesktopCapturerStream.spec.ts @@ -1,7 +1,5 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import { - TEST_APP_LANGUAGE, - TEST_APP_THEME, TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, @@ -38,8 +36,6 @@ describe('createDesktopCapturerStream callback', () => { TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, - TEST_APP_THEME, - TEST_APP_LANGUAGE, {} as RoomIDService, {} as ConnectedDevicesService, {} as SharingSessionService, diff --git a/app/features/PeerConnection/handleCreatePeer.spec.ts b/app/features/PeerConnection/handleCreatePeer.spec.ts index 29e8815..45f4065 100644 --- a/app/features/PeerConnection/handleCreatePeer.spec.ts +++ b/app/features/PeerConnection/handleCreatePeer.spec.ts @@ -1,8 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/ban-ts-comment */ import { - TEST_APP_LANGUAGE, - TEST_APP_THEME, TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, @@ -58,8 +56,6 @@ describe('handleCreatePeer callback', () => { TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, - TEST_APP_THEME, - TEST_APP_LANGUAGE, {} as RoomIDService, {} as ConnectedDevicesService, {} as SharingSessionService, diff --git a/app/features/PeerConnection/handlePeerOnData.spec.ts b/app/features/PeerConnection/handlePeerOnData.spec.ts index d72c205..e4af261 100644 --- a/app/features/PeerConnection/handlePeerOnData.spec.ts +++ b/app/features/PeerConnection/handlePeerOnData.spec.ts @@ -3,8 +3,6 @@ import handlePeerOnData from './handlePeerOnData'; import getDesktopSourceStreamBySourceID from './getDesktopSourceStreamBySourceID'; import { - TEST_APP_LANGUAGE, - TEST_APP_THEME, TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, @@ -50,8 +48,6 @@ describe('handlePeerOnData callback', () => { TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, - TEST_APP_THEME, - TEST_APP_LANGUAGE, {} as RoomIDService, {} as ConnectedDevicesService, {} as SharingSessionService, diff --git a/app/features/PeerConnection/handleRecieveEncryptedMessage.spec.ts b/app/features/PeerConnection/handleRecieveEncryptedMessage.spec.ts index 96e5410..274fedf 100644 --- a/app/features/PeerConnection/handleRecieveEncryptedMessage.spec.ts +++ b/app/features/PeerConnection/handleRecieveEncryptedMessage.spec.ts @@ -1,8 +1,6 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import uuid from 'uuid'; import { - TEST_APP_LANGUAGE, - TEST_APP_THEME, TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, @@ -17,6 +15,8 @@ import handleRecieveEncryptedMessage, { handleDeviceIPMessage, } from './handleRecieveEncryptedMessage'; import DesktopCapturerSourcesService from '../DesktopCapturerSourcesService'; +import getAppTheme from '../../utils/getAppTheme'; +import getAppLanguage from '../../utils/getAppLanguage'; jest.useFakeTimers(); @@ -51,8 +51,6 @@ describe('handleRecieveEncryptedMessage.ts', () => { TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, - TEST_APP_THEME, - TEST_APP_LANGUAGE, {} as RoomIDService, {} as ConnectedDevicesService, {} as SharingSessionService, @@ -123,7 +121,7 @@ describe('handleRecieveEncryptedMessage.ts', () => { peerConnection.sendEncryptedMessage = jest.fn(); const TEST_GET_APP_THEME_PAYLOAD = { type: 'APP_THEME', - payload: { value: peerConnection.appColorTheme }, + payload: { value: getAppTheme() }, }; // @ts-ignore processMessage.mockImplementation(() => { @@ -149,7 +147,7 @@ describe('handleRecieveEncryptedMessage.ts', () => { peerConnection.sendEncryptedMessage = jest.fn(); const TEST_GET_APP_LANGUAGE_PAYLOAD = { type: 'APP_LANGUAGE', - payload: { value: peerConnection.appLanguage }, + payload: { value: getAppLanguage() }, }; // @ts-ignore processMessage.mockImplementation(() => { diff --git a/app/features/PeerConnection/handleRecieveEncryptedMessage.ts b/app/features/PeerConnection/handleRecieveEncryptedMessage.ts index b01656d..8d08aeb 100644 --- a/app/features/PeerConnection/handleRecieveEncryptedMessage.ts +++ b/app/features/PeerConnection/handleRecieveEncryptedMessage.ts @@ -1,3 +1,4 @@ +import settings from 'electron-settings'; import uuid from 'uuid'; import { process as processMessage } from '../../utils/message'; @@ -42,13 +43,21 @@ export default async function handleRecieveEncryptedMessage( if (message.type === 'GET_APP_THEME') { peerConnection.sendEncryptedMessage({ type: 'APP_THEME', - payload: { value: peerConnection.appColorTheme }, + payload: { + value: settings.hasSync('appIsDarkTheme') + ? settings.getSync('appIsDarkTheme') === 'true' + : false, + }, }); } if (message.type === 'GET_APP_LANGUAGE') { peerConnection.sendEncryptedMessage({ type: 'APP_LANGUAGE', - payload: { value: peerConnection.appLanguage }, + payload: { + value: settings.hasSync('appLanguage') + ? settings.getSync('appLanguage') + : 'en', + }, }); } } diff --git a/app/features/PeerConnection/handleSelfDestroy.spec.ts b/app/features/PeerConnection/handleSelfDestroy.spec.ts index 1628fc1..09acbbe 100644 --- a/app/features/PeerConnection/handleSelfDestroy.spec.ts +++ b/app/features/PeerConnection/handleSelfDestroy.spec.ts @@ -1,7 +1,5 @@ import handleSelfDestroy from './handleSelfDestroy'; import { - TEST_APP_LANGUAGE, - TEST_APP_THEME, TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, @@ -38,8 +36,6 @@ describe('handleSelfDestroy callback', () => { TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, - TEST_APP_THEME, - TEST_APP_LANGUAGE, ({ unmarkRoomIDAsTaken: jest.fn(), } as unknown) as RoomIDService, diff --git a/app/features/PeerConnection/handleSetDisplaySizeFromLocalStream.spec.ts b/app/features/PeerConnection/handleSetDisplaySizeFromLocalStream.spec.ts index bedf251..e3490dc 100644 --- a/app/features/PeerConnection/handleSetDisplaySizeFromLocalStream.spec.ts +++ b/app/features/PeerConnection/handleSetDisplaySizeFromLocalStream.spec.ts @@ -1,7 +1,5 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import { - TEST_APP_LANGUAGE, - TEST_APP_THEME, TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, @@ -30,8 +28,6 @@ describe('setDisplaySizeFromLocalStream callback', () => { TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, - TEST_APP_THEME, - TEST_APP_LANGUAGE, {} as RoomIDService, {} as ConnectedDevicesService, {} as SharingSessionService, diff --git a/app/features/PeerConnection/handleSocket.spec.ts b/app/features/PeerConnection/handleSocket.spec.ts index d03cfe5..e231027 100644 --- a/app/features/PeerConnection/handleSocket.spec.ts +++ b/app/features/PeerConnection/handleSocket.spec.ts @@ -1,8 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/ban-ts-comment */ import { - TEST_APP_LANGUAGE, - TEST_APP_THEME, TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, @@ -51,8 +49,6 @@ describe('handleSocket callback', () => { TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, - TEST_APP_THEME, - TEST_APP_LANGUAGE, {} as RoomIDService, {} as ConnectedDevicesService, {} as SharingSessionService, diff --git a/app/features/PeerConnection/handleSocketUserEnter.spec.ts b/app/features/PeerConnection/handleSocketUserEnter.spec.ts index 1aad2c3..a499543 100644 --- a/app/features/PeerConnection/handleSocketUserEnter.spec.ts +++ b/app/features/PeerConnection/handleSocketUserEnter.spec.ts @@ -1,8 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/ban-ts-comment */ import { - TEST_APP_LANGUAGE, - TEST_APP_THEME, TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, @@ -55,8 +53,6 @@ describe('handleSocketUserEnter callback', () => { TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, - TEST_APP_THEME, - TEST_APP_LANGUAGE, {} as RoomIDService, {} as ConnectedDevicesService, {} as SharingSessionService, diff --git a/app/features/PeerConnection/handleSocketUserExit.spec.ts b/app/features/PeerConnection/handleSocketUserExit.spec.ts index 24ae5ea..b3686f8 100644 --- a/app/features/PeerConnection/handleSocketUserExit.spec.ts +++ b/app/features/PeerConnection/handleSocketUserExit.spec.ts @@ -1,8 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/ban-ts-comment */ import { - TEST_APP_LANGUAGE, - TEST_APP_THEME, TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, @@ -27,8 +25,6 @@ describe('handleSocketUserExit callback', () => { TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, - TEST_APP_THEME, - TEST_APP_LANGUAGE, {} as RoomIDService, {} as ConnectedDevicesService, {} as SharingSessionService, diff --git a/app/features/PeerConnection/index.spec.ts b/app/features/PeerConnection/index.spec.ts index f14b9ec..0605276 100644 --- a/app/features/PeerConnection/index.spec.ts +++ b/app/features/PeerConnection/index.spec.ts @@ -6,8 +6,6 @@ import ConnectedDevicesService from '../ConnectedDevicesService'; import SharingSessionService from '../SharingSessionService'; import DesktopCapturerSourcesService from '../DesktopCapturerSourcesService'; import { - TEST_APP_LANGUAGE, - TEST_APP_THEME, TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, @@ -17,6 +15,8 @@ import handleSelfDestroy from './handleSelfDestroy'; import handleRecieveEncryptedMessage from './handleRecieveEncryptedMessage'; import handleCreatePeer from './handleCreatePeer'; import { prepare as prepareMessage } from '../../utils/message'; +import getAppLanguage from '../../utils/getAppLanguage'; +import getAppTheme from '../../utils/getAppTheme'; jest.useFakeTimers(); @@ -60,8 +60,6 @@ describe('PeerConnection index.ts tests', () => { TEST_ROOM_ID, TEST_SHARING_SESSION_ID, TEST_USER, - TEST_APP_THEME, // TODO getAppTheme - TEST_APP_LANGUAGE, // TODO getLanguage {} as RoomIDService, {} as ConnectedDevicesService, {} as SharingSessionService, @@ -82,32 +80,6 @@ describe('PeerConnection index.ts tests', () => { expect(peerConnection.sharingSessionService).toBeDefined(); }); - describe('when setAppLanguage was called', () => { - it('should set peerConnection app language and call notifyClientWithNewLanguage', () => { - const TEST_APP_LANG = 'ua'; - const mockNotify = jest.fn(); - peerConnection.notifyClientWithNewLanguage = mockNotify; - - peerConnection.setAppLanguage(TEST_APP_LANG); - - expect(mockNotify).toBeCalled(); - expect(peerConnection.appLanguage).toBe(TEST_APP_LANG); - }); - }); - - describe('when setAppTheme was called', () => { - it('should set peerConnection theme and call notifyClientWithNewColorTheme', () => { - const APP_THEME = true; - const mockNotify = jest.fn(); - peerConnection.notifyClientWithNewColorTheme = mockNotify; - - peerConnection.setAppTheme(APP_THEME); - - expect(mockNotify).toBeCalled(); - expect(peerConnection.appColorTheme).toBe(APP_THEME); - }); - }); - describe('when notifyClientWithNewLanguage was called', () => { it('should call sendEncryptedMessage with proper payload', () => { peerConnection.sendEncryptedMessage = jest.fn(); @@ -116,7 +88,7 @@ describe('PeerConnection index.ts tests', () => { expect(peerConnection.sendEncryptedMessage).toBeCalledWith({ type: 'APP_LANGUAGE', - payload: { value: peerConnection.appLanguage }, + payload: { value: getAppLanguage() }, }); }); }); @@ -129,7 +101,7 @@ describe('PeerConnection index.ts tests', () => { expect(peerConnection.sendEncryptedMessage).toBeCalledWith({ type: 'APP_THEME', - payload: { value: peerConnection.appColorTheme }, + payload: { value: getAppTheme() }, }); }); }); diff --git a/app/features/PeerConnection/index.ts b/app/features/PeerConnection/index.ts index 8d54803..7db8373 100644 --- a/app/features/PeerConnection/index.ts +++ b/app/features/PeerConnection/index.ts @@ -17,6 +17,8 @@ import NullUser from './NullUser'; import NullSimplePeer from './NullSimplePeer'; import setDisplaySizeFromLocalStream from './handleSetDisplaySizeFromLocalStream'; import DesktopCapturerSourceType from '../DesktopCapturerSourcesService/DesktopCapturerSourceType'; +import getAppLanguage from '../../utils/getAppLanguage'; +import getAppTheme from '../../utils/getAppTheme'; type DisplaySize = { width: number; height: number }; @@ -41,15 +43,11 @@ export default class PeerConnection { onDeviceConnectedCallback: (device: Device) => void; displayID: string; sourceDisplaySize: DisplaySize | undefined; - appLanguage: string; - appColorTheme: boolean; constructor( roomID: string, sharingSessionID: string, user: LocalPeerUser, - appColorTheme: boolean, - appLanguage: string, roomIDService: RoomIDService, connectedDevicesService: ConnectedDevicesService, sharingSessionsService: SharingSessionService, @@ -71,8 +69,6 @@ export default class PeerConnection { this.localStream = null; this.displayID = ''; this.sourceDisplaySize = undefined; - this.appLanguage = appLanguage; - this.appColorTheme = appColorTheme; this.desktopCapturerSourcesService = desktopCapturerSourcesService; this.onDeviceConnectedCallback = () => {}; @@ -83,27 +79,19 @@ export default class PeerConnection { }); } - setAppLanguage(lang: string) { - this.appLanguage = lang; - this.notifyClientWithNewLanguage(); - } - - setAppTheme(theme: boolean) { - this.appColorTheme = theme; - this.notifyClientWithNewColorTheme(); - } - notifyClientWithNewLanguage() { this.sendEncryptedMessage({ type: 'APP_LANGUAGE', - payload: { value: this.appLanguage }, + payload: { + value: getAppLanguage(), + }, }); } notifyClientWithNewColorTheme() { this.sendEncryptedMessage({ type: 'APP_THEME', - payload: { value: this.appColorTheme }, + payload: { value: getAppTheme() }, }); } diff --git a/app/features/SharingSessionService/SharingSession.spec.ts b/app/features/SharingSessionService/SharingSession.spec.ts index b17a4bc..51dd702 100644 --- a/app/features/SharingSessionService/SharingSession.spec.ts +++ b/app/features/SharingSessionService/SharingSession.spec.ts @@ -6,8 +6,6 @@ import SharingType from './SharingTypeEnum'; jest.useFakeTimers(); -const testAppLang = 'ua'; -const testAppTheme = true; const testUser = { username: '', privateKey: '', @@ -19,24 +17,18 @@ describe('SharingSession unit tests', () => { beforeEach(() => { process.env.RUN_MODE = 'test-jest'; - sharingSession = new SharingSession( - '1234', - testUser, - { - // @ts-ignore: fine here - createPeerConnectionHelperRenderer: () => { - return { - webContents: { - on: jest.fn(), - send: jest.fn(), - }, - close: jest.fn(), - }; - }, + sharingSession = new SharingSession('1234', testUser, { + // @ts-ignore: fine here + createPeerConnectionHelperRenderer: () => { + return { + webContents: { + on: jest.fn(), + send: jest.fn(), + }, + close: jest.fn(), + }; }, - testAppLang, - testAppTheme - ); + }); }); afterEach(() => { @@ -99,8 +91,6 @@ describe('SharingSession unit tests', () => { roomID: sharingSession.roomID, sharingSessionID: sharingSession.id, user: testUser, - appTheme: testAppTheme, - appLanguage: testAppLang, }); }); }); @@ -258,25 +248,21 @@ describe('SharingSession unit tests', () => { describe('when appLanguageChanged() is called', () => { it('should call .webContents.send with proper event name', () => { - const testLang = 'ua'; - - sharingSession.appLanguageChanged(testLang); + sharingSession.appLanguageChanged(); expect( sharingSession.peerConnectionHelperRenderer?.webContents.send - ).toBeCalledWith('app-language-changed', testLang); + ).toBeCalledWith('app-language-changed'); }); }); describe('when appThemeChanged() is called', () => { it('should call .webContents.send with proper event name', () => { - const testTheme = true; - - sharingSession.appThemeChanged(testTheme); + sharingSession.appThemeChanged(); expect( sharingSession.peerConnectionHelperRenderer?.webContents.send - ).toBeCalledWith('app-color-theme-changed', testTheme); + ).toBeCalledWith('app-color-theme-changed'); }); }); }); diff --git a/app/features/SharingSessionService/SharingSession.ts b/app/features/SharingSessionService/SharingSession.ts index 462fa67..6201053 100644 --- a/app/features/SharingSessionService/SharingSession.ts +++ b/app/features/SharingSessionService/SharingSession.ts @@ -5,8 +5,6 @@ import SharingSessionStatusEnum from './SharingSessionStatusEnum'; import SharingTypeEnum from './SharingTypeEnum'; import PeerConnectionHelperRendererService from '../PeerConnectionHelperRendererService'; -// type OnDeviceConnectedCallbackType = undefined | (device: Device) => void; - export default class SharingSession { id: string; deviceID: string; @@ -24,9 +22,7 @@ export default class SharingSession { constructor( _roomID: string, user: LocalPeerUser, - peerConnectionHelperRendererService: PeerConnectionHelperRendererService, - appLanguage: string, - isDarkTheme: boolean + peerConnectionHelperRendererService: PeerConnectionHelperRendererService ) { this.id = uuid.v4(); this.deviceID = ''; @@ -51,8 +47,6 @@ export default class SharingSession { roomID: this.roomID, sharingSessionID: this.id, user, - appTheme: isDarkTheme, - appLanguage, } ); }); @@ -111,17 +105,13 @@ export default class SharingSession { ); } - appLanguageChanged(newLang: string) { - this.peerConnectionHelperRenderer?.webContents.send( - 'app-language-changed', - newLang - ); + appLanguageChanged() { + this.peerConnectionHelperRenderer?.webContents.send('app-language-changed'); } - appThemeChanged(isDarkTheme: boolean) { + appThemeChanged() { this.peerConnectionHelperRenderer?.webContents.send( - 'app-color-theme-changed', - isDarkTheme + 'app-color-theme-changed' ); } diff --git a/app/features/SharingSessionService/index.spec.ts b/app/features/SharingSessionService/index.spec.ts index 15f379c..b92fd1d 100644 --- a/app/features/SharingSessionService/index.spec.ts +++ b/app/features/SharingSessionService/index.spec.ts @@ -104,26 +104,6 @@ describe('SharingSessionService unit tests', () => { }); }); - describe('when setAppLanguage is called', () => { - it('should set app language accordingly', () => { - const testLang = 'be'; - - sharingSessionService.setAppLanguage(testLang); - - expect(sharingSessionService.appLanguage).toBe(testLang); - }); - }); - - describe('when setAppTheme is called', () => { - it('should set app language accordingly', () => { - const testTheme = true; - - sharingSessionService.setAppTheme(testTheme); - - expect(sharingSessionService.isDarkTheme).toBe(testTheme); - }); - }); - describe('when createWaitingForConnectionSharingSession is called', () => { it('should call waitWhileUserIsNotCreated', async () => { sharingSessionService.waitWhileUserIsNotCreated = jest diff --git a/app/features/SharingSessionService/index.ts b/app/features/SharingSessionService/index.ts index 4266a34..2d485a6 100644 --- a/app/features/SharingSessionService/index.ts +++ b/app/features/SharingSessionService/index.ts @@ -17,8 +17,6 @@ export default class SharingSessionService { connectedDevicesService: ConnectedDevicesService; rendererWebrtcHelpersService: RendererWebrtcHelpersService; isCreatingNewSharingSession: boolean; - appLanguage = 'en'; - isDarkTheme = false; constructor( _roomIDService: RoomIDService, @@ -40,14 +38,6 @@ export default class SharingSessionService { }, 1000 * 60 * 60); // every hour } - setAppLanguage(newLang: string): void { - this.appLanguage = newLang; - } - - setAppTheme(isDarkTheme: boolean): void { - this.isDarkTheme = isDarkTheme; - } - createUser(): Promise { // eslint-disable-next-line no-async-promise-executor return new Promise(async (resolve) => { @@ -90,9 +80,7 @@ export default class SharingSessionService { const sharingSession = new SharingSession( roomID, this.user as LocalPeerUser, - this.rendererWebrtcHelpersService, - this.appLanguage, - this.isDarkTheme + this.rendererWebrtcHelpersService ); this.sharingSessions.set(sharingSession.id, sharingSession); return sharingSession; diff --git a/app/locales/en/translation.json b/app/locales/en/translation.json index da5c221..34c5e4e 100644 --- a/app/locales/en/translation.json +++ b/app/locales/en/translation.json @@ -1,8 +1,73 @@ { - "Language": "Language 🇬🇧 / 🇺🇸", - "Signaling server is running on port": "Signaling server is running on port ⚓", + "Hello": "Hello", + "Continue": "Continue", + "Language": "Language", "ru": "Русский", "en": "English", "ua": "Українська", - "Scan the QR code": "Scan the QR code" + "Donate": "Donate", + "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "If you like Deskreen, consider contributing financially. Deskreen is open-source. Your donations keep us motivated to make Deskreen even better.", + "Click to visit our website": "Click to visit our website", + "Connected Devices": "Connected Devices", + "Tutorial": "Tutorial", + "Settings": "Settings", + "Connect": "Connect", + "Select": "Select", + "Confirm": "Confirm", + "Scan the QR code": "Scan the QR code", + "Make sure your computer and screen viewing device are connected to same Wi-Fi": "Make sure your computer and screen viewing device are connected to same Wi-Fi", + "Or type the following address in browser address bar on any device": "Or type the following address in browser address bar on any device", + "Someone is trying to connect, do you allow?": "Someone is trying to connect, do you allow?", + "Click to make bigger": "Click to make bigger", + "Click to copy": "Click to copy", + "Partner Device Info": "Partner Device Info", + "Device Type": "Device Type", + "Device IP": "Device IP", + "Device Browser": "Device Browser", + "Device OS": "Device OS", + "Session ID": "Session ID", + "Allow": "Allow", + "Deny": "Deny", + "Device is successfully disconnected by you You can connect a new device": "Device is successfully disconnected by you. You can connect a new device.", + "Deskreen Update is Available!": "Deskreen Update is Available!", + "Your current version is": "Your current version is", + "Click to download new updated version": "Click to download new updated version", + "Connected": "Connected", + "Click to see more": "Click to see more", + "This should match with Device IP displayed on the screen of device that is trying to connect": "This should match with Device IP displayed on the screen of device that is trying to connect.", + "If IP addresses dont match click Disconnect button": "If IP addresses don't match click Disconnect button to prevent unauthorized access to your computer screen.", + "Disconnect": "Disconnect", + "Choose Entire Screen or App window you want to share": "Choose Entire Screen or App window you want to share", + "OR": "OR", + "Entire Screen": "Entire Screen", + "Application Window": "Application Window", + "Check if all is OK and click Confirm": "Check if all is OK and click Confirm", + "Confirm Button Text": "Confirm", + "No, I need to choose other": "No, I need to share other thing", + "Done!": "Done!", + "Now you can see your screen on other device": "Now you can see your screen on other device.", + "You can manage connected devices by clicking Connected Devices button in top panel": "You can manage connected devices by clicking Connected Devices button in top panel.", + "Connect New Device": "Connect New Device", + "Select Entire Screen to Share": "Select Entire Screen to Share", + "Select App Window to Share": "Select App Window to Share", + "Refresh": "Refresh", + "Disconnect all devices": "Disconnect all devices", + "Are you sure you want to disconnect all connected viewing devices?": "Are you sure you want to disconnect all connected viewing devices?", + "This step can not be undone": "This step can not be reverted", + "You will have to connect all devices manually again": "You will have to connect all devices manually again", + "No, Cancel": "No, Cancel", + "Yes, Disconnect All": "Yes, Disconnect All", + "A new version of Deskreen is available! Click to download new version": "A new version of Deskreen is available! Click to download new version", + "Security": "Security", + "General": "General", + "About": "About", + "Website": "Website", + "About Deskreen": "About Deskreen", + "Security Settings": "Security Settings", + "Color Theme": "Color Theme", + "Automatic Updates": "Automatic Updates", + "General Settings": "General Settings", + "Disabled": "Disabled", + "Version": "Version", + "Copyright": "Copyright" } diff --git a/app/locales/en/translation.missing.json b/app/locales/en/translation.missing.json index e69de29..564ddc9 100644 --- a/app/locales/en/translation.missing.json +++ b/app/locales/en/translation.missing.json @@ -0,0 +1,9 @@ +{ + "Confirm": "Confirm", + "No, Cancel": "No, Cancel", + "Yes, Disconnect All": "Yes, Disconnect All", + "Disconnect all devices": "Disconnect all devices", + "Are you sure you want to disconnect all connected viewing devices?": "Are you sure you want to disconnect all connected viewing devices?", + "This step can not be reverted": "This step can not be reverted", + "You will have to connect all devices manually again": "You will have to connect all devices manually again" +} diff --git a/app/locales/ru/translation.json b/app/locales/ru/translation.json index 31dbf68..fd6a551 100644 --- a/app/locales/ru/translation.json +++ b/app/locales/ru/translation.json @@ -1,8 +1,73 @@ { - "Language": "Язык 🇷🇺", - "Signaling server is running on port": "Сигнальный сервер работает на порте ⚓", + "Hello": "Привет", + "Continue": "Продолжить", + "Language": "Язык", "ru": "Русский", "en": "English", "ua": "Українська", - "Scan the QR code": "Отсканируйте QR код" + "Donate": "Пожертвовать", + "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "Если вам нравится Deskreen, подумайте о том, чтобы внести финансовый вклад. Deskreen - это оупенсорсный проэкт. Ваши пожертвования позволяют нам делать Deskreen еще лучше.", + "Click to visit our website": "Нажмите, чтобы посетить наш сайт", + "Connected Devices": "Подключенные устройства", + "Tutorial": "Инструкция по использованию", + "Settings": "Настройки", + "Connect": "Подключите", + "Select": "Выберите", + "Confirm": "Подтвердите", + "Scan the QR code": "Отсканируйте QR код", + "Make sure your computer and screen viewing device are connected to same Wi-Fi": "Убедитесь, что ваш компьютер и устройство просмотра экрана подключены к одному и тому же Wi-Fi", + "Or type the following address in browser address bar on any device": "Или введите следующий адрес вручную в адресной строке браузера на любом устройстве", + "Someone is trying to connect, do you allow?": "Кто-то пытается подключиться, вы разрешаете?", + "Click to make bigger": "Нажмите, чтобы увеличить", + "Click to copy": "Нажмите, чтобы скопировать", + "Partner Device Info": "Информация об устройстве партнера", + "Device Type": "Тип устройства", + "Device IP": "IP-aдрес устройства", + "Device Browser": "Веб-браузер устройства", + "Device OS": "ОС устройства", + "Session ID": "ID сессии", + "Allow": "Разрешить", + "Deny": "Отказать", + "Device is successfully disconnected by you You can connect a new device": "Устройство успешно отключено вами. Вы можете подключить новое устройство.", + "Deskreen Update is Available!": "Вышло обновление Deskreen!", + "Your current version is": "Ваша текущая версия", + "Click to download new updated version": "Нажмите, чтобы загрузить новую обновленную версию", + "Connected": "Подключено", + "Click to see more": "Нажмите, чтобы увидеть больше", + "This should match with Device IP displayed on the screen of device that is trying to connect": "Это должно совпадать с IP-адресом устройства, отображаемым на экране устройства, которое пытается подключиться.", + "If IP addresses dont match click Disconnect button": "Если IP-адреса не совпадают, нажмите кнопку «Отключить», чтобы предотвратить несанкционированный доступ к экрану вашего компьютера.", + "Disconnect": "Отсоединить", + "Choose Entire Screen or App window you want to share": "Выберите Весь экран или Окно приложения, которым хотите поделиться", + "OR": "ИЛИ", + "Entire Screen": "Весь экран", + "Application Window": "Окно приложения", + "Check if all is OK and click Confirm": "Убедитесь, что все в порядке, и нажмите Подтвердить", + "Confirm Button Text": "Подтвердить", + "No, I need to choose other": "Нет, мне нужно выбрать другое", + "Done!": "Сделано!", + "Now you can see your screen on other device": "Теперь вы можете видеть свой экран на другом устройстве.", + "You can manage connected devices by clicking Connected Devices button in top panel": "Вы можете управлять подключенными устройствами, нажав кнопку «Подключенные устройства» на верхней панели.", + "Connect New Device": "Подключить новое устройство", + "Select Entire Screen to Share": "Выберите экран которым хотите поделиться", + "Select App Window to Share": "Выберите окно приложения которым хотите поделиться", + "Refresh": "Обновить", + "Disconnect all devices": "Отсоединить все устройства", + "Are you sure you want to disconnect all connected viewing devices?": "Вы уверены, что хотите отключить все подключенные устройства просмотра?", + "This step can not be undone": "Этот шаг невозможно будет отменить", + "You will have to connect all devices manually again": "После этого вам придется снова подключить каждое устройство", + "No, Cancel": "Нет, отменить", + "Yes, Disconnect All": "Да, отсоединить все устройства", + "A new version of Deskreen is available! Click to download new version": "Доступна новая версия Deskreen! Нажмите, чтобы загрузить новую версию", + "Security": "Безопасность", + "General": "Общие", + "About": "О нас", + "Website": "Веб-сайт", + "About Deskreen": "Про Deskreen", + "Security Settings": "Настройки безопасности", + "Color Theme": "Цветовая схема", + "Automatic Updates": "Авто-обновления", + "General Settings": "Общие настройки", + "Disabled": "Отключено", + "Version": "Версия", + "Copyright": "Авторские права" } diff --git a/app/locales/ua/translation.json b/app/locales/ua/translation.json index d48283b..cf175b2 100644 --- a/app/locales/ua/translation.json +++ b/app/locales/ua/translation.json @@ -1,8 +1,73 @@ { - "Language": "Мова 🇺🇦", - "Signaling server is running on port": "Сигнальный сервер працює на порту ⚓", + "Hello": "Привіт", + "Continue": "Продовжити", + "Language": "Мова", "ru": "Русский", "en": "English", "ua": "Українська", - "Scan the QR code": "Відскануйте QR код" + "Donate": "Пожертвувати", + "If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better": "Якщо вам подобається Deskreen, подумайте про те, щоб внести фінансовий внесок. Deskreen - це оупенсорсний проект. Ваші пожертвування дозволяють нам робити Deskreen ще краще.", + "Click to visit our website": "Натисніть, щоб відвідати наш сайт", + "Connected Devices": "Підключені пристрої", + "Tutorial": "Інструкція по використанню", + "Settings": "Налаштування", + "Connect": "Підключіть", + "Select": "Виберіть", + "Confirm": "Підтвердіть", + "Scan the QR code": "Відскануйте QR код", + "Make sure your computer and screen viewing device are connected to same Wi-Fi": "Переконайтеся, що ваш комп'ютер і пристрій перегляду екрану підключені до одного й того ж Wi-Fi", + "Or type the following address in browser address bar on any device": "Або введіть наступну адресу в адресному рядку браузера на будь-якому пристрої", + "Someone is trying to connect, do you allow?": "Хтось намагається підключитися, ви дозволяєте?", + "Click to make bigger": "Натисніть, щоб збільшити", + "Click to copy": "Натисніть, щоб скопіювати", + "Partner Device Info": "Інформація про пристрій партнера", + "Device Type": "Тип пристрою", + "Device IP": "IP-aдрес пристрою", + "Device Browser": "Веб-браузер пристрою", + "Device OS": "ОС пристрою", + "Session ID": "ID сесії", + "Allow": "Дозволити", + "Deny": "Відмовити", + "Device is successfully disconnected by you You can connect a new device": "Пристрій успішно відключено вами. Ви можете підключити новий пристрій.", + "Deskreen Update is Available!": "Вийшло оновлення Deskreen!", + "Your current version is": "Ваша поточна версія", + "Click to download new updated version": "Натисніть, щоб завантажити нову оновлену версію", + "Connected": "З'єднано", + "Click to see more": "Натисніть, щоб побачити більше", + "This should match with Device IP displayed on the screen of device that is trying to connect": "Це повинно збігатися з IP-адресою пристрою на екрані пристрою, який намагається підключитися.", + "If IP addresses dont match click Disconnect button": "Якщо IP-адреси не збігаються, натисніть кнопку «Відключити», щоб запобігти несанкціонованому доступу до екрану вашого комп'ютера.", + "Disconnect": "Від'єднати", + "Choose Entire Screen or App window you want to share": "Виберіть Весь екран або Вікно додатка, яким хочете поділитися", + "OR": "ЧИ", + "Entire Screen": "Весь екран", + "Application Window": "Вікно додатка", + "Check if all is OK and click Confirm": "Переконайтеся, що все гаразд, і натисніть Підтвердити", + "Confirm Button Text": "Підтвердити", + "No, I need to choose other": "Ні, мені потрібно вибрати інше", + "Done!": "Зроблено!", + "Now you can see your screen on other device": "Тепер ви можете бачити свій екран на іншому пристрою.", + "You can manage connected devices by clicking Connected Devices button in top panel": "Ви можете управляти підключеними пристроями, натиснувши кнопку «Підключені пристрої» на верхній панелі.", + "Connect New Device": "Підключити новий пристрій", + "Select Entire Screen to Share": "Виберіть екран яким хочете поділитися", + "Select App Window to Share": "Виберіть вікно додатка яким хочете поділитися", + "Refresh": "Відновити", + "Disconnect all devices": "Від'єднати всі пристрої", + "Are you sure you want to disconnect all connected viewing devices?": "Ви впевнені, що хочете відключити всі підключені пристрої перегляду?", + "This step can not be undone": "Цей крок неможливо буде скасувати", + "You will have to connect all devices manually again": "Після цього вам доведеться знову підключити кожен пристрій", + "No, Cancel": "Ні, скасувати", + "Yes, Disconnect All": "Так, від'єднати всі пристрої", + "A new version of Deskreen is available! Click to download new version": "Доступна нова версія Deskreen! Натисніть, щоб завантажити нову версію", + "Security": "Безпека", + "General": "Загальні", + "About": "Про нас", + "Website": "Веб сайт", + "About Deskreen": "Про Deskreen", + "Security Settings": "Налаштування безпеки", + "Color Theme": "Схема кольорів", + "Automatic Updates": "Авто-оновлення", + "General Settings": "Загальні налаштування", + "Disabled": "Відключено", + "Version": "Версія", + "Copyright": "Авторські права" } diff --git a/app/main.dev.ts b/app/main.dev.ts index 6114d89..5c98167 100644 --- a/app/main.dev.ts +++ b/app/main.dev.ts @@ -62,8 +62,12 @@ export default class DeskreenApp { const showNotification = () => { const notification = { - title: 'Deskreen Update is Available!', - body: `Your current version is ${this.appVersion} Click to download new ${this.latestVersion} updated version.`, + title: i18n.t('Deskreen Update is Available!'), + body: `${i18n.t('Your current version is')} ${ + this.appVersion + } | ${i18n.t('Click to download new updated version')} ${ + this.latestVersion + }`, }; const notificationInstance = new Notification(notification); notificationInstance.show(); diff --git a/app/package-lock.json b/app/package-lock.json index f879111..cd8dd05 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -1,5 +1,5 @@ { "name": "Deskreen", - "version": "1.0.5", + "version": "1.0.6", "lockfileVersion": 1 } diff --git a/app/package.json b/app/package.json index 696ae93..00c0e94 100644 --- a/app/package.json +++ b/app/package.json @@ -1,7 +1,7 @@ { "name": "deskreen", "productName": "Deskreen", - "version": "1.0.5", + "version": "1.0.6", "description": "Deskreen turns any device into a secondary screen for your computer", "main": "./main.prod.js", "author": { diff --git a/app/peerConnectionHelperRendererWindowIndex.spec.ts b/app/peerConnectionHelperRendererWindowIndex.spec.ts index 22ce4f0..bff66be 100644 --- a/app/peerConnectionHelperRendererWindowIndex.spec.ts +++ b/app/peerConnectionHelperRendererWindowIndex.spec.ts @@ -252,40 +252,6 @@ describe('peerConnectionHelperRendererWindowIndex tests', () => { ).toHaveBeenCalled(); }); }); - - describe('when ipcRenderer.on("app-color-theme-changed" callback occurred', () => { - it('should call peerConnection.setAppTheme(newTheme)', () => { - const peerConnectionInstance = mockAndGetPeerConnectionInstance(); - - const setAppThemeCallback = - // @ts-ignore - ipcRenderer.on.mock.calls[6][1]; - const testTheme = true; - - setAppThemeCallback(undefined, testTheme); - - expect(peerConnectionInstance.setAppTheme).toHaveBeenCalledWith( - testTheme - ); - }); - }); - - describe('when ipcRenderer.on("app-language-changed" callback occurred', () => { - it('should call peerConnection.testAppLang(newLang)', () => { - const peerConnectionInstance = mockAndGetPeerConnectionInstance(); - - const setAppLangCallback = - // @ts-ignore - ipcRenderer.on.mock.calls[7][1]; - const testAppLang = 'eu'; - - setAppLangCallback(undefined, testAppLang); - - expect(peerConnectionInstance.setAppLanguage).toHaveBeenCalledWith( - testAppLang - ); - }); - }); }); }); }); diff --git a/app/peerConnectionHelperRendererWindowIndex.tsx b/app/peerConnectionHelperRendererWindowIndex.tsx index 6953af2..d611676 100644 --- a/app/peerConnectionHelperRendererWindowIndex.tsx +++ b/app/peerConnectionHelperRendererWindowIndex.tsx @@ -26,8 +26,6 @@ export function handleIpcRenderer() { data.roomID, data.sharingSessionID, data.user, - data.appTheme, // TODO getAppTheme - data.appLanguage, // TODO getLanguage roomIDService, connectedDevicesService, sharingSessionService, @@ -59,12 +57,12 @@ export function handleIpcRenderer() { peerConnection.sendUserAllowedToConnect(); }); - ipcRenderer.on('app-color-theme-changed', (_, newTheme: boolean) => { - peerConnection.setAppTheme(newTheme); + ipcRenderer.on('app-color-theme-changed', () => { + peerConnection.notifyClientWithNewColorTheme(); }); - ipcRenderer.on('app-language-changed', (_, newLang: string) => { - peerConnection.setAppLanguage(newLang); + ipcRenderer.on('app-language-changed', () => { + peerConnection.notifyClientWithNewLanguage(); }); }); } diff --git a/app/utils/getAppLanguage.ts b/app/utils/getAppLanguage.ts new file mode 100644 index 0000000..77526ca --- /dev/null +++ b/app/utils/getAppLanguage.ts @@ -0,0 +1,7 @@ +import settings from 'electron-settings'; + +export default function getAppLanguage(): string { + return settings.hasSync('appLanguage') + ? (settings.getSync('appLanguage') as string) + : 'en'; +} diff --git a/app/utils/getAppTheme.ts b/app/utils/getAppTheme.ts new file mode 100644 index 0000000..41b7cfd --- /dev/null +++ b/app/utils/getAppTheme.ts @@ -0,0 +1,7 @@ +import settings from 'electron-settings'; + +export default function getAppTheme(): boolean { + return settings.hasSync('appIsDarkTheme') + ? settings.getSync('appIsDarkTheme') === 'true' + : false; +} diff --git a/package.json b/package.json index f98326c..430791d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "deskreen", "productName": "Deskreen", - "version": "1.0.5", + "version": "1.0.6", "description": "Deskreen turns any device into a secondary screen for your computer", "scripts": { "build": "yarn build-client && yarn build-main && yarn build-renderer", @@ -70,7 +70,7 @@ "build": { "productName": "Deskreen", "appId": "com.pavlobu.Deskreen", - "copyright": "Copyright © 2020-present Pavlo (Paul) Buidenkov", + "copyright": "Copyright © 2020-present Pavlo Buidenkov (Paul)", "files": [ "dist/", "node_modules/", @@ -141,7 +141,7 @@ "url": "https://github.com/pavlobu" } ], - "license": "AGPL-3.0 License", + "license": "AGPL-3.0-or-later", "bugs": { "url": "https://github.com/pavlobu/deskreen/issues" }, @@ -308,9 +308,9 @@ "stylelint-config-prettier": "^8.0.2", "stylelint-config-standard": "^20.0.0", "terser-webpack-plugin": "^3.0.7", - "testcafe": "^1.9.2", - "testcafe-browser-provider-electron": "^0.0.15", - "testcafe-react-selectors": "^4.0.0", + "testcafe": "^1.10.1", + "testcafe-browser-provider-electron": "^0.0.16", + "testcafe-react-selectors": "^4.1.4", "ts-jest": "^26.1.4", "typescript": "^3.9.7", "typings-for-css-modules-loader": "^1.7.0", diff --git a/test/ux/Stepper.ux.ts b/test/ux/Stepper.ux.ts index 2d338e5..569a226 100644 --- a/test/ux/Stepper.ux.ts +++ b/test/ux/Stepper.ux.ts @@ -50,7 +50,7 @@ const headerWithTextSelectAppWindow = Selector('h3').withText( const previewShareButton = Selector('.preview-share-thumb-container'); const step3ConfirmButton = Selector('button').withText('Confirm'); const noINeedToShareOtherThingButton = Selector('button').withText( - 'No, I need to share other thing' + 'No, I need to choose other' ); const step4ConnectNewDeviceButton = Selector('button').withText( 'Connect New Device' @@ -68,8 +68,8 @@ const yesDisconnectAllButton = Selector('button').withText( ); const settingsButtonOfTopPanel = Selector('span').withAttribute('icon', 'cog'); const openedSettingsOverlay = Selector('#settings-overlay-inner'); -const darkColorAppSettingButton = Selector('button').withText('Dark'); -const lightColorAppSettingButton = Selector('button').withText('Light'); +const darkColorAppSettingButton = '#dark-theme-toggle-btn'; +const lightColorAppSettingButton = '#light-theme-toggle-btn'; const darkUIClassName = Selector('.bp3-dark'); async function getConnecteddeviceIPFromAllowToConnectDeviceAlert() { @@ -493,10 +493,10 @@ test(`when "Settings" Panel is opened, await t.click(settingsButtonOfTopPanel()); // action and assertion 1 - await t.click(darkColorAppSettingButton()); + await t.click(darkColorAppSettingButton); await t.expect(darkUIClassName().exists).ok(); // action and assertion 2 - await t.click(lightColorAppSettingButton()); + await t.click(lightColorAppSettingButton); await t.expect(darkUIClassName().exists).notOk(); }); diff --git a/yarn.lock b/yarn.lock index 985eb15..5994d2e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13699,10 +13699,10 @@ test-exclude@^6.0.0: glob "^7.1.4" minimatch "^3.0.4" -testcafe-browser-provider-electron@^0.0.15: - version "0.0.15" - resolved "https://registry.npmjs.org/testcafe-browser-provider-electron/-/testcafe-browser-provider-electron-0.0.15.tgz#4c0d084222349501cf2eb400ccac50029cb454ae" - integrity sha512-nmsYcaf0HXv+8yDQxHR9b8kWkPwRPDVV5cwrZUCR2bh43pCozkcmgvWCFn9uD2twFo/oead61oBh9eMMxdTdZA== +testcafe-browser-provider-electron@^0.0.16: + version "0.0.16" + resolved "https://registry.npmjs.org/testcafe-browser-provider-electron/-/testcafe-browser-provider-electron-0.0.16.tgz#cb4255b775bdec226ec76699f408a4aba20a8146" + integrity sha512-3qBIXdlV2gN0I3pLYbEdVlhe6rgfGdihaB6hc/339ZYVtpXE/AOt4CW+EubBJLG6gkwJI+39rv8azzQ6NebgKg== dependencies: babel-runtime "^6.25.0" chrome-remote-interface "^0.27.0" @@ -13788,7 +13788,7 @@ testcafe-legacy-api@4.0.0: pinkie "^2.0.1" strip-bom "^2.0.0" -testcafe-react-selectors@^4.0.0: +testcafe-react-selectors@^4.1.4: version "4.1.4" resolved "https://registry.npmjs.org/testcafe-react-selectors/-/testcafe-react-selectors-4.1.4.tgz#9aebba4eb102c410596e40957dccc81ea8ff59bf" integrity sha512-+YkgZcQiFrdkqGJEE5q/YrANF2QPn6bG9Q1wG11rp0yZA405lG51CB9WXdSJkB2ACcEoIuWIqX2V839hPJ51og== @@ -13818,7 +13818,7 @@ testcafe-reporter-xunit@^2.1.0: resolved "https://registry.npmjs.org/testcafe-reporter-xunit/-/testcafe-reporter-xunit-2.1.0.tgz#e6d66c572ce15af266706af0fd610b2a841dd443" integrity sha1-5tZsVyzhWvJmcGrw/WELKoQd1EM= -testcafe@^1.9.2: +testcafe@^1.10.1: version "1.10.1" resolved "https://registry.npmjs.org/testcafe/-/testcafe-1.10.1.tgz#0dc33954eabbdfb6ea018b789eb21b5557b35582" integrity sha512-c1ErVj+QvQR7fqJs/XVa4S7Ctl5Hf5bxnkTaFVl4Qt2QlliL3EAXtL3WjCOx65Pd8BatxTWUCXJ5NVwAvq7jWg==