diff --git a/package-lock.json b/package-lock.json index feee4d6a6..9ff5fb33f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14780,7 +14780,7 @@ }, "node_modules/solarxr-protocol": { "version": "1.0.0", - "resolved": "git+ssh://git@github.com/SlimeVR/SolarXR-Protocol.git#d726aed10154539717e9179323babdf55fbf3a16", + "resolved": "git+ssh://git@github.com/SlimeVR/SolarXR-Protocol.git#40e3c5ef8431ec7c9b5ea0446a7fe3590bb7596f", "license": "ISC", "dependencies": { "flatbuffers": "^2.0.6" @@ -25335,7 +25335,7 @@ } }, "solarxr-protocol": { - "version": "git+ssh://git@github.com/SlimeVR/SolarXR-Protocol.git#d726aed10154539717e9179323babdf55fbf3a16", + "version": "git+ssh://git@github.com/SlimeVR/SolarXR-Protocol.git#40e3c5ef8431ec7c9b5ea0446a7fe3590bb7596f", "from": "solarxr-protocol@github:SlimeVR/SolarXR-Protocol", "requires": { "flatbuffers": "^2.0.6" diff --git a/src/components/BVHButton.tsx b/src/components/BVHButton.tsx index 82ec7363b..9df19c0ff 100644 --- a/src/components/BVHButton.tsx +++ b/src/components/BVHButton.tsx @@ -23,7 +23,7 @@ export function BVHButton() { return ( } + icon={} onClick={toggleBVH} > ); diff --git a/src/components/MainLayout.tsx b/src/components/MainLayout.tsx index 39b1db300..ba7bbd4cb 100644 --- a/src/components/MainLayout.tsx +++ b/src/components/MainLayout.tsx @@ -6,6 +6,7 @@ import { Navbar } from './Navbar'; import { ResetButton } from './home/ResetButton'; import { TopBar } from './TopBar'; import classNames from 'classnames'; +import { OverlayWidget } from './widgets/OverlayWidget'; export function MainLayoutRoute({ children, @@ -39,16 +40,15 @@ export function MainLayoutRoute({ {children} {widgets && ( -
-
+
+
-
-
-
-
+
+ +
)}
diff --git a/src/components/commons/BigButton.tsx b/src/components/commons/BigButton.tsx index 76f7ef0ae..2af285a0b 100644 --- a/src/components/commons/BigButton.tsx +++ b/src/components/commons/BigButton.tsx @@ -19,7 +19,7 @@ export function BigButton({ {...props} type="button" className={classNames( - 'flex w-full justify-center rounded-md py-5 gap-5 px-5 cursor-pointer items-center ', + 'flex flex-col justify-center rounded-md py-3 gap-1 px-3 cursor-pointer items-center ', { 'bg-background-60 hover:bg-background-60 cursor-not-allowed text-background-40 fill-background-40': disabled, diff --git a/src/components/commons/Checkbox.tsx b/src/components/commons/Checkbox.tsx index b29df3cdf..cea1df958 100644 --- a/src/components/commons/Checkbox.tsx +++ b/src/components/commons/Checkbox.tsx @@ -38,7 +38,7 @@ export function CheckBox({ ( + render={({ field: { onChange, value, ref, onBlur, name } }) => (
+ ); diff --git a/src/components/commons/icon/ResetIcon.tsx b/src/components/commons/icon/ResetIcon.tsx index 60a117408..c6f7c067a 100644 --- a/src/components/commons/icon/ResetIcon.tsx +++ b/src/components/commons/icon/ResetIcon.tsx @@ -1,7 +1,7 @@ -export function ResetIcon() { +export function ResetIcon({ width = 33 }: { width?: number }) { return ( : } + icon={ + type === ResetType.Quick ? ( + + ) : ( + + ) + } onClick={reset} disabled={reseting} > diff --git a/src/components/widgets/OverlayWidget.tsx b/src/components/widgets/OverlayWidget.tsx new file mode 100644 index 000000000..9fbd03175 --- /dev/null +++ b/src/components/widgets/OverlayWidget.tsx @@ -0,0 +1,70 @@ +import { useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { + OverlayDisplayModeChangeRequestT, + OverlayDisplayModeRequestT, + OverlayDisplayModeResponseT, + RpcMessage, +} from 'solarxr-protocol'; +import { useWebsocketAPI } from '../../hooks/websocket-api'; +import { CheckBox } from '../commons/Checkbox'; + +export function OverlayWidget() { + const { sendRPCPacket, useRPCPacket } = useWebsocketAPI(); + + const { reset, control, handleSubmit, watch, setValue } = useForm<{ + isVisible: boolean; + isMirrored: boolean; + }>({ + defaultValues: { + isVisible: false, + isMirrored: false, + }, + }); + + useRPCPacket( + RpcMessage.OverlayDisplayModeResponse, + (res: OverlayDisplayModeResponseT) => { + reset({ + isMirrored: res.isMirrored, + isVisible: res.isVisible, + }); + } + ); + + useEffect(() => { + sendRPCPacket( + RpcMessage.OverlayDisplayModeRequest, + new OverlayDisplayModeRequestT() + ); + }, []); + + useEffect(() => { + const subscription = watch(() => handleSubmit(onSubmit)()); + return () => subscription.unsubscribe(); + }, []); + + const onSubmit = (val: { isVisible: boolean; isMirrored: boolean }) => { + const req = new OverlayDisplayModeChangeRequestT(); + req.isMirrored = val.isMirrored; + req.isVisible = val.isVisible; + sendRPCPacket(RpcMessage.OverlayDisplayModeChangeRequest, req); + }; + + return ( +
+ + +
+ ); +}