dualsense-ts 6.2.0 → 6.4.0

package/webhid_example/src/App.tsx

@@ -9,6 +9,8 @@ import {
   BatteryIndicator,
   MuteLedControls,
 } from "./hud";
+import { AudioIndicator } from "./hud/AudioIndicator";
+import { ColorIndicator } from "./hud/ColorIndicator";
 import { Debugger } from "./hud/Debugger";
 import { RightStick } from "./hud/RightStick";
 import { LeftShoulder, RightShoulder } from "./hud/ShoulderVisualization";
@@ -394,6 +396,7 @@ function useManagerState() {
   const [activeCount, setActiveCount] = React.useState(
     manager?.state.active ?? 0,
   );
+  const [pending, setPending] = React.useState(manager?.pending ?? false);
 
   React.useEffect(() => {
     const m = manager;
@@ -401,13 +404,14 @@ function useManagerState() {
     const update = () => {
       setControllers([...m.controllers]);
       setActiveCount(m.state.active);
+      setPending(m.pending);
     };
     m.on("change", update);
     const interval = setInterval(update, 500);
     return () => clearInterval(interval);
   }, []);
 
-  return { controllers, activeCount };
+  return { controllers, activeCount, pending };
 }
 
 export const App = () => {
@@ -505,6 +509,8 @@ export const App = () => {
             <ControllerConnection />
             <BatteryIndicator />
             <MuteLedControls />
+            <AudioIndicator />
+            <ColorIndicator />
             <LightbarFadeButtons />
             {connected && (
               <>

package/webhid_example/src/hud/AudioIndicator.tsx

@@ -0,0 +1,116 @@
+import { useContext, useEffect, useState } from "react";
+import { Tag } from "@blueprintjs/core";
+
+import { ControllerContext } from "../Controller";
+
+export const AudioIndicator = () => {
+  const controller = useContext(ControllerContext);
+  const [mic, setMic] = useState(controller.microphone.state);
+  const [headphone, setHeadphone] = useState(controller.headphone.state);
+  const [connected, setConnected] = useState(controller.connection.state);
+
+  useEffect(() => {
+    setMic(controller.microphone.state);
+    setHeadphone(controller.headphone.state);
+    setConnected(controller.connection.state);
+    controller.microphone.on("change", ({ state }) => setMic(state));
+    controller.headphone.on("change", ({ state }) => setHeadphone(state));
+    controller.connection.on("change", ({ state }) => setConnected(state));
+  }, [controller]);
+
+  if (!connected) return null;
+  if (!mic && !headphone) return null;
+
+  let label: string;
+  if (mic && headphone) {
+    label = "Headset";
+  } else if (headphone) {
+    label = "Headphones";
+  } else {
+    label = "Mic";
+  }
+
+  const icon = (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="currentColor"
+      style={{ display: "block" }}
+    >
+      {headphone ? (
+        <>
+          {/* Headphone band */}
+          <path
+            d="M2 8 Q2 2 7 2 Q12 2 12 8"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+          />
+          {/* Left ear cup */}
+          <rect x="1" y="7.5" width="2.5" height="4" rx="1" />
+          {/* Right ear cup */}
+          <rect x="10.5" y="7.5" width="2.5" height="4" rx="1" />
+          {/* Mic boom (only when mic is also connected) */}
+          {mic && (
+            <>
+              <line
+                x1="3"
+                y1="11"
+                x2="5"
+                y2="13"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                strokeLinecap="round"
+              />
+              <circle cx="5.5" cy="13" r="1" />
+            </>
+          )}
+        </>
+      ) : (
+        <>
+          {/* Standalone microphone */}
+          <rect x="4.5" y="1" width="5" height="7" rx="2.5" />
+          <path
+            d="M2.5 6.5 Q2.5 11 7 11 Q11.5 11 11.5 6.5"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+          />
+          <line
+            x1="7"
+            y1="11"
+            x2="7"
+            y2="13"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+          />
+          <line
+            x1="5"
+            y1="13"
+            x2="9"
+            y2="13"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+          />
+        </>
+      )}
+    </svg>
+  );
+
+  return (
+    <Tag minimal={true} intent="none" icon={icon} title={
+      mic && headphone
+        ? "Headset with microphone connected"
+        : headphone
+          ? "Headphones connected (no microphone)"
+          : "Microphone connected (no headphones)"
+    }>
+      {label}
+    </Tag>
+  );
+};

package/webhid_example/src/hud/BatteryIndicator.tsx

@@ -47,11 +47,13 @@ export const BatteryIndicator = () => {
   const [connected, setConnected] = useState(controller.connection.state);
 
   useEffect(() => {
+    setLevel(controller.battery.level.state);
+    setStatus(controller.battery.status.state);
+    setConnected(controller.connection.state);
     controller.battery.level.on("change", ({ state }) => setLevel(state));
     controller.battery.status.on("change", ({ state }) => setStatus(state));
     controller.connection.on("change", ({ state }) => setConnected(state));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [controller]);
 
   if (!connected) return null;
 

package/webhid_example/src/hud/ColorIndicator.tsx

@@ -0,0 +1,72 @@
+import { useContext, useEffect, useState } from "react";
+import { Tag } from "@blueprintjs/core";
+import styled from "styled-components";
+import type { FactoryInfo } from "dualsense-ts";
+
+import { ControllerContext } from "../Controller";
+
+/** Approximate CSS colors for known DualSense body colors */
+const colorCss: Record<string, string> = {
+  "00": "#e8e8e8",
+  "01": "#1a1a2e",
+  "02": "#c8102e",
+  "03": "#f2a6c0",
+  "04": "#6b3fa0",
+  "05": "#5b9bd5",
+  "06": "#8a9a7b",
+  "07": "#9b2335",
+  "08": "#c0c0c0",
+  "09": "#1e3a5f",
+  "10": "#2db5a0",
+  "11": "#3d4f7c",
+  "12": "#e8dfd0",
+  "30": "#4a4a4a",
+};
+
+const ColorDot = styled.span<{ $color: string }>`
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: ${(p) => p.$color};
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  flex-shrink: 0;
+`;
+
+export const ColorIndicator = () => {
+  const controller = useContext(ControllerContext);
+  const [factory, setFactory] = useState<FactoryInfo | undefined>(
+    controller.factoryInfo
+  );
+  const [connected, setConnected] = useState(controller.connection.state);
+
+  useEffect(() => {
+    setConnected(controller.connection.state);
+    setFactory(controller.factoryInfo);
+    controller.on("change", (c) => {
+      if (c.factoryInfo) {
+        setFactory(c.factoryInfo);
+      }
+    });
+    controller.connection.on("change", ({ state }) => {
+      setConnected(state);
+      if (!state) setFactory(undefined);
+    });
+  }, [controller]);
+
+  if (!connected || !factory) return null;
+
+  const css = colorCss[factory.colorCode];
+  const label = factory.colorName ?? factory.colorCode;
+
+  return (
+    <Tag
+      minimal={true}
+      intent="none"
+      icon={css ? <ColorDot $color={css} /> : undefined}
+      title={`Controller color: ${label}${factory.boardRevision ? ` (${factory.boardRevision})` : ""}`}
+    >
+      {label}
+    </Tag>
+  );
+};

package/webhid_example/src/hud/ControllerConnection.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState, useContext } from "react";
-import { Button as BlueprintButton, Tag } from "@blueprintjs/core";
+import { Button as BlueprintButton, Tag, Spinner } from "@blueprintjs/core";
 import styled, { keyframes } from "styled-components";
 
-import { ControllerContext, requestPermission } from "../Controller";
+import { ControllerContext, ManagerContext, requestPermission } from "../Controller";
 
 const StatusContainer = styled.div`
   display: flex;
@@ -21,14 +21,41 @@ const PulsingButton = styled(BlueprintButton)`
 
 export const ControllerConnection = () => {
   const controller = useContext(ControllerContext);
+  const manager = useContext(ManagerContext);
   const [connected, setConnected] = useState(controller.connection.state);
+  const [pending, setPending] = useState(manager?.pending ?? false);
 
   useEffect(() => {
+    // Sync immediately — the controller may already be connected when the
+    // context switches (e.g. after a provisional slot promotes).
+    setConnected(controller.connection.state);
     const handler = ({ state }: { state: boolean }) => setConnected(state);
     controller.connection.on("change", handler);
   }, [controller]);
 
+  // The manager doesn't expose a typed event for `pending` flips, so we
+  // poll its state alongside the existing 500ms App-level poll.
+  useEffect(() => {
+    if (!manager) return;
+    const tick = () => setPending(manager.pending);
+    tick();
+    const interval = setInterval(tick, 250);
+    return () => clearInterval(interval);
+  }, [manager]);
+
   if (!connected) {
+    // A controller has been opened but firmware/identity is still loading —
+    // show a spinner instead of the "Connect" button so we don't ask the
+    // user to take action on a controller that is already wired up.
+    if (pending) {
+      return (
+        <StatusContainer>
+          <Tag minimal={true} intent="warning" icon={<Spinner size={12} />}>
+            Connecting...
+          </Tag>
+        </StatusContainer>
+      );
+    }
     return (
       <StatusContainer>
         <PulsingButton

package/webhid_example/src/hud/Debugger.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Card, Switch } from "@blueprintjs/core";
-import { DualsenseHIDState } from "dualsense-ts";
+import { DualsenseHIDState, FirmwareInfo, FactoryInfo, formatFirmwareVersion } from "dualsense-ts";
 
 import { ControllerContext } from "../Controller";
 import { TriggerEffectControls } from "./TriggerEffectControls";
@@ -27,10 +27,22 @@ export const Debugger = ({ panel }: DebuggerProps) => {
 
   const [showReport, setShowReport] = React.useState<boolean>(false);
   const [showState, setShowState] = React.useState<boolean>(false);
+  const [firmware, setFirmware] = React.useState<FirmwareInfo | undefined>(
+    controller.firmwareInfo
+  );
+  const [factory, setFactory] = React.useState<FactoryInfo | undefined>(
+    controller.factoryInfo
+  );
 
   React.useEffect(() => {
     controller.on("change", (controller) => {
       setDebugState(controller.hid.state);
+      if (!firmware && controller.firmwareInfo) {
+        setFirmware(controller.firmwareInfo);
+      }
+      if (!factory && controller.factoryInfo) {
+        setFactory(controller.factoryInfo);
+      }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -54,6 +66,24 @@ export const Debugger = ({ panel }: DebuggerProps) => {
 
   return (
     <>
+      {firmware && (
+        <Card compact={true}>
+          <p style={{ fontSize: 12, opacity: 0.7, margin: 0 }}>
+            Firmware: v{formatFirmwareVersion(firmware.mainFirmwareVersion)}
+            {" · "}HW: {firmware.hardwareInfo}
+            {" · "}DSP: {firmware.dspFirmwareVersion}
+            {" · "}SBL: v{formatFirmwareVersion(firmware.sblFirmwareVersion)}
+            {" · "}Built: {firmware.buildDate} {firmware.buildTime}
+          </p>
+          {factory && (
+            <p style={{ fontSize: 12, opacity: 0.7, margin: "4px 0 0" }}>
+              Color: {factory.colorName ?? factory.colorCode}
+              {" · "}{factory.boardRevision ?? "Unknown board"}
+              {" · "}Serial: {factory.serialNumber}
+            </p>
+          )}
+        </Card>
+      )}
       <Card compact={true}>
         <Switch
           label="Input State"

package/webhid_example/src/hud/LightbarFadeButtons.tsx

@@ -40,9 +40,9 @@ export const LightbarFadeButtons = () => {
   const [connected, setConnected] = React.useState(controller.connection.state);
 
   React.useEffect(() => {
+    setConnected(controller.connection.state);
     controller.connection.on("change", ({ state }) => setConnected(state));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [controller]);
 
   if (!connected) return null;
 

package/webhid_example/src/hud/MuteLedControls.tsx

@@ -9,10 +9,11 @@ export const MuteLedControls = () => {
   const [connected, setConnected] = useState(controller.connection.state);
 
   useEffect(() => {
+    setLedOn(controller.mute.status.state);
+    setConnected(controller.connection.state);
     controller.mute.status.on("change", ({ state }) => setLedOn(state));
     controller.connection.on("change", ({ state }) => setConnected(state));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [controller]);
 
   if (!connected) return null;
 

package/webhid_example/src/hud/index.tsx

@@ -2,8 +2,10 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from "./AudioIndicator";
 export * from "./BatteryIndicator";
 export * from "./BumperVisualization";
+export * from "./ColorIndicator";
 export * from "./ControllerConnection";
 export * from "./Debugger";
 export * from "./DpadVisualization";