Adds feat to show WebSocket status on OverlayController.

public/locales/de.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Mit WebSocket-Server verbunden",
 	"Notification.webSocketDisconnected": "Verbindung zum WebSocket-Server fehlgeschlagen",
 
+	"overlay.connected": "Verbunden",
+	"overlay.notConnected": "Nicht verbunden",
 	"overlay.noData": "Keine Daten",
 	"overlay.hideOverlay": "Overlay Ausblenden",
 	"overlay.showOverlay": "Overlay Anzeigen",

public/locales/en.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Connected to WebSocket Server",
 	"Notification.webSocketDisconnected": "Failed to Connect to WebSocket Server",
 
+	"overlay.connected": "Connected",
+	"overlay.notConnected": "Not Connected",
 	"overlay.noData": "No Data",
 	"overlay.hideOverlay": "Hide Overlay",
 	"overlay.showOverlay": "Show Overlay",

public/locales/es-419.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Conectado al servidor WebSocket",
 	"Notification.webSocketDisconnected": "No se pudo conectar al servidor WebSocket",
 
+	"overlay.connected": "Conectado",
+	"overlay.notConnected": "No conectado",
 	"overlay.noData": "Sin datos",
 	"overlay.hideOverlay": "Cerrar superposición",
 	"overlay.showOverlay": "Abrir superposición",

public/locales/es.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Conectado al servidor WebSocket",
 	"Notification.webSocketDisconnected": "No se pudo conectar al servidor WebSocket",
 
+	"overlay.connected": "Conectado",
+	"overlay.notConnected": "No conectado",
 	"overlay.noData": "Sin datos",
 	"overlay.hideOverlay": "Cerrar superposición",
 	"overlay.showOverlay": "Abrir superposición",

public/locales/fr-CA.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Connecté au serveur WebSocket",
 	"Notification.webSocketDisconnected": "Échec de la connexion au serveur WebSocket",
 
+	"overlay.connected": "Connecté",
+	"overlay.notConnected": "Non connecté",
 	"overlay.noData": "Aucune donnée",
 	"overlay.hideOverlay": "Masquer la superposition",
 	"overlay.showOverlay": "Afficher la superposition",

public/locales/fr.json

@@ -56,6 +56,8 @@
 	"Notification.webSocketConnected": "Connecté au serveur WebSocket",
 	"Notification.webSocketDisconnected": "Échec de la connexion au serveur WebSocket",
 
+	"overlay.connected": "Connecté",
+	"overlay.notConnected": "Non connecté",
 	"overlay.noData": "Aucune donnée",
 	"overlay.hideOverlay": "Masquer la superposition",
 	"overlay.showOverlay": "Afficher la superposition",

public/locales/it.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Connesso al server WebSocket",
 	"Notification.webSocketDisconnected": "Connessione al server WebSocket fallita",
 
+	"overlay.connected": "Connesso",
+	"overlay.notConnected": "Non connesso",
 	"overlay.noData": "Nessun dato",
 	"overlay.hideOverlay": "Nascondi sovrapposizione",
 	"overlay.showOverlay": "Mostra sovrapposizione",

public/locales/ja.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "WebSocketサーバーに接続しました",
 	"Notification.webSocketDisconnected": "WebSocketサーバーに接続できませんでした",
 
+	"overlay.connected": "接続済み",
+	"overlay.notConnected": "未接続",
 	"overlay.noData": "データなし",
 	"overlay.hideOverlay": "オーバーレイを非表示",
 	"overlay.showOverlay": "オーバーレイを表示",

public/locales/ko.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "WebSocket 서버에 연결됨",
 	"Notification.webSocketDisconnected": "WebSocket 서버에 연결 실패",
 
+	"overlay.connected": "연결됨",
+	"overlay.notConnected": "연결되지 않음",
 	"overlay.noData": "데이터 없음",
 	"overlay.hideOverlay": "오버레이 끄기",
 	"overlay.showOverlay": "오버레이 켜기",

public/locales/nl.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Verbonden met WebSocket-server",
 	"Notification.webSocketDisconnected": "Verbinding met WebSocket-server mislukt",
 
+	"overlay.connected": "Verbonden",
+	"overlay.notConnected": "Niet verbonden",
 	"overlay.noData": "Geen gegevens",
 	"overlay.hideOverlay": "Verberg overlay",
 	"overlay.showOverlay": "Toon overlay",

public/locales/ru.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Подключено к WebSocket серверу",
 	"Notification.webSocketDisconnected": "Не удалось подключиться к WebSocket серверу",
 
+	"overlay.connected": "Подключено",
+	"overlay.notConnected": "Не подключено",
 	"overlay.noData": "Нет данных",
 	"overlay.hideOverlay": "Скрыть наложение",
 	"overlay.showOverlay": "Показать наложение",

public/locales/zh-CN.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "已连接到WebSocket服务器",
 	"Notification.webSocketDisconnected": "连接WebSocket服务器失败",
 
+	"overlay.connected": "已连接",
+	"overlay.notConnected": "未连接",
 	"overlay.noData": "没有数据",
 	"overlay.hideOverlay": "隐藏叠加",
 	"overlay.showOverlay": "显示叠加",

public/locales/zh-TW.json

@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "已連接到WebSocket伺服器",
 	"Notification.webSocketDisconnected": "連接WebSocket伺服器失敗",
 
+	"overlay.connected": "連接的",
+	"overlay.notConnected": "未連接",
 	"overlay.noData": "沒有資料",
 	"overlay.hideOverlay": "隱藏疊加",
 	"overlay.showOverlay": "顯示疊加",

src/app/App.css

@@ -9,13 +9,3 @@
 	color: #FFF;
 	background: linear-gradient(120deg, #4B0024, #4B2800);
 }
-
-.App-footer {
-	display: inline;
-	margin-left: auto;
-
-	font-size: 75%;
-	text-align: right;
-
-	color: var(--fg-secondary);
-}

src/app/App.tsx

@@ -18,10 +18,6 @@ const App = () => {
 			<div className='App-ui'>
 				<SettingsWindow />
 				<OverlayController />
-
-				<footer className='App-footer'>
-					ShakeStreamKit. Copyright © 2024 mntone. Licensed under the GPLv3 license.
-				</footer>
 			</div>
 		</>
 	)

src/index.css

@@ -93,6 +93,10 @@ html:lang(zh-TW) body, .SelectItem:lang(zh-TW) {
 	}
 }
 
+p {
+	margin: 0;
+}
+
 input,
 input::-webkit-file-upload-button,
 input::-webkit-slider-thumb,
@@ -318,6 +322,19 @@ button {
 	outline: 2px solid #FFFC;
 }
 
+.StatusText {
+	vertical-align: middle;
+}
+.StatusText-positive {
+	color: var(--fg-pos);
+}
+.StatusText-negative {
+	color: var(--fg-neg);
+}
+.StatusText > .Icon16:first-child {
+	margin-right: .125em;
+}
+
 @keyframes fadeIn {
 	from { opacity: 0; }
 	to { opacity: 1; }

src/modules/overlay/components/OverlayController/index.tsx

@@ -0,0 +1,48 @@
+import './styles.css'
+
+import { memo, useCallback } from 'react'
+import { useIntl } from 'react-intl'
+
+import { CheckIcon, XMarkIcon } from '@heroicons/react/16/solid'
+
+import WebSocketStatus from '@/telemetry/components/WebSocketStatus'
+
+import OverlayMessages from '../../messages'
+import MatchSelector from '../MatchSelector'
+import WaveSelector from '../WaveSelector'
+
+export const OverlayController = function () {
+	const intl = useIntl()
+	const websocketStatusPositive = useCallback(function () {
+		return (
+			<>
+				<CheckIcon className='Icon16' />
+				{intl.formatMessage(OverlayMessages.connected)}
+			</>
+		)
+	}, [intl])
+
+	return (
+		<>
+			<MatchSelector />
+			<WaveSelector />
+
+			<div className='Overlay-last'>
+				<WebSocketStatus
+					positiveChildren={websocketStatusPositive}
+					negativeChildren={(
+						<>
+							<XMarkIcon className='Icon16' />
+							{intl.formatMessage(OverlayMessages.notConnected)}
+						</>
+					)}
+				/>
+				<footer>
+					ShakeStreamKit. © 2024 mntone (GPLv3)
+				</footer>
+			</div>
+		</>
+	)
+}
+
+export default memo(OverlayController)

src/modules/overlay/components/OverlayController/styles.css

@@ -0,0 +1,9 @@
+.Overlay-last {
+	margin-left: auto;
+
+	font-size: 80%;
+	line-height: 1.25;
+	text-align: right;
+
+	color: var(--fg-secondary);
+}

src/modules/overlay/messages.ts

@@ -1,6 +1,14 @@
 import { defineMessages } from 'react-intl'
 
 const OverlayMessages = defineMessages({
+	connected: {
+		id: 'overlay.connected',
+		defaultMessage: 'Connected',
+	},
+	notConnected: {
+		id: 'overlay.notConnected',
+		defaultMessage: 'Not Connected',
+	},
 	noData: {
 		id: 'overlay.noData',
 		defaultMessage: 'No Data',

src/modules/settings/pages/DataSourcePage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext } from 'react'
+import { useCallback } from 'react'
 import { useIntl } from 'react-intl'
 import { useDispatch } from 'react-redux'
 
@@ -7,7 +7,7 @@ import { CheckIcon, XMarkIcon } from '@heroicons/react/16/solid'
 import CheckBox from '@/core/components/CheckBox'
 import SliderBox from '@/core/components/SliderBox'
 import { setMatch } from '@/overlay/slicers'
-import { WebSocketContext } from '@/telemetry/components/WebSocketProvider'
+import WebSocketStatus from '@/telemetry/components/WebSocketStatus'
 import { ShakeEvent } from '@/telemetry/models/telemetry'
 import { setTelemetry } from '@/telemetry/slicers'
 import { RealtimeTelemetrySimulator } from '@/telemetry/utils/simulator'
@@ -21,11 +21,22 @@ import { setSimulation, setSpeed } from '../slicers'
 
 const DataSourcePage = () => {
 	const intl = useIntl()
-	const wsConnect = useContext(WebSocketContext)
 
 	const simulationEnabled = useAppSelector(state => state.config.simulation) === true
 	const simulationSpeed = useAppSelector(state => state.config.speed) ?? 2.0
 
+	const websocketStatusPositive = useCallback(function (url: string) {
+		return (
+			<>
+				<CheckIcon className='Icon16' />
+				{intl.formatMessage(
+					DialogMessages.dataSourceConnected,
+					{ url },
+				)}
+			</>
+		)
+	}, [intl])
+
 	const dispatch = useDispatch()
 	const simulator = new RealtimeTelemetrySimulator(dispatch, simulationSpeed)
 
@@ -55,25 +66,17 @@ const DataSourcePage = () => {
 					{intl.formatMessage(DialogMessages.dataSourceServerAddress)}
 				</h3>
 				<ServerAddressBox />
-
-				{
-					wsConnect && wsConnect.isConnect === true
-						? (
-							<span className='StatusText StatusText-positive'>
-								<CheckIcon className='Icon16' />
-								{intl.formatMessage(
-									DialogMessages.dataSourceConnected,
-									{ url: wsConnect.url },
-								)}
-							</span>
-						)
-						: (
-							<span className='StatusText StatusText-negative'>
+				<p>
+					<WebSocketStatus
+						positiveChildren={websocketStatusPositive}
+						negativeChildren={(
+							<>
 								<XMarkIcon className='Icon16' />
 								{intl.formatMessage(DialogMessages.dataSourceNotConnected)}
-							</span>
-						)
-				}
+							</>
+						)}
+					/>
+				</p>
 			</section>
 
 			<section className='Form-group'>

src/modules/settings/pages/DevelopmentPage.tsx

@@ -31,7 +31,7 @@ const DevelopmentPage = () => {
 					<h3>
 						{intl.formatMessage(DialogMessages.developmentPreview)}
 					</h3>
-					<p>
+					<p className='Form-description'>
 						{intl.formatMessage(DialogMessages.developmentUseCamera)}
 					</p>
 					<CameraSelector />

src/modules/settings/styles.css

@@ -77,6 +77,12 @@ body:not(.env-nonblur) .Dialog-content {
 	background-color: transparent;
 	transition: var(--ctl-transition);
 }
+@media (any-pointer: coarse) {
+	.Dialog-tabitem {
+		padding-top: .375em;
+		padding-bottom: .375em;
+	}
+}
 .Dialog-tabitem[data-state=active] {
 	background-color: var(--ctl-bg);
 }
@@ -135,24 +141,15 @@ body:not(.env-nonblur) .Dialog-content {
 	font-weight: normal;
 }
 
-.Form-group > p {
+.Form-description {
 	margin: -.25em 0 .5em;
 	font-size: .875em;
 	color: #FFFFFFE6;
 }
 
-.StatusText {
+.Form-group .StatusText {
 	font-size: .875em;
 }
-.StatusText-positive {
-	color: var(--fg-pos);
-}
-.StatusText-negative {
-	color: var(--fg-neg);
-}
-.StatusText > .Icon16:first-child {
-	margin-right: .125em;
-}
 
 .SettingsDialog-close {
 	position: absolute;