Dim volume dials when no voice connection is available

.vscode/extensions.json

@@ -1,8 +1,9 @@
 {
-	"recommendations": [
-		"paulober.rollup-problem-matcher",
-		"davidanson.vscode-markdownlint",
-		"yzhang.markdown-all-in-one",
-		"jock.svg"
-	]
-}
+  "recommendations": [
+    "paulober.rollup-problem-matcher",
+    "davidanson.vscode-markdownlint",
+    "yzhang.markdown-all-in-one",
+    "jock.svg",
+    "streetsidesoftware.code-spell-checker"
+  ]
+}

.vscode/settings.json

@@ -21,5 +21,16 @@
     "editor.formatOnSave": false
   },
   "svg.preview.background": "editor",
-  "cSpell.words": ["elgato", "streamdeck"]
+  "cSpell.words": [
+    "Autopurge",
+    "Callsign",
+    "callsigns",
+    "coms",
+    "elgato",
+    "stationstatus",
+    "stationvolume",
+    "streamdeck",
+    "trackaudio",
+    "Typeguard"
+  ]
 }

src/controllers/mainVolume.ts

@@ -1,11 +1,12 @@
 import { MainVolumeSettings } from "@actions/mainVolume";
 import { DialAction } from "@elgato/streamdeck";
 import { Controller } from "@interfaces/controller";
+import trackAudioManager from "@managers/trackAudio";
+import { MAIN_VOLUME_CONTROLLER_TYPE } from "@utils/controllerTypes";
 import { handleAsyncException } from "@utils/handleAsyncException";
 import { stringOrUndefined } from "@utils/utils";
 import debounce from "debounce";
 import { BaseController } from "./baseController";
-import { MAIN_VOLUME_CONTROLLER_TYPE } from "@utils/controllerTypes";
 
 const defaultConnectedTemplatePath = "images/actions/mainVolume/template.svg";
 const defaultNotConnectedTemplatePath =
@@ -57,7 +58,7 @@ export class MainVolumeController extends BaseController {
   }
 
   /**
-   * Gets the notconnected SVG template path.
+   * Gets the not connected SVG template path.
    */
   get notConnectedTemplatePath(): string {
     return this._notConnectedTemplatePath ?? defaultNotConnectedTemplatePath;
@@ -151,24 +152,31 @@ export class MainVolumeController extends BaseController {
   private refreshImage(): void {
     const replacements = {
       volume: this.volume,
-      state: this.isConnected ? "connected" : "notConnected",
+      state: trackAudioManager.isVoiceConnected ? "connected" : "notConnected",
     };
 
-    const templatePath = this.isConnected
+    const templatePath = trackAudioManager.isConnected
       ? this.connectedTemplatePath
       : this.notConnectedTemplatePath;
 
     this.setFeedbackImage(templatePath, replacements);
   }
 
   private refreshTitle(): void {
+    const color = trackAudioManager.isVoiceConnected ? "white" : "grey";
+
     this.action
       .setFeedback({
+        title: {
+          color: color,
+        },
         indicator: {
           value: this.volume,
+          color,
         },
         value: {
           value: `${this.volume.toString()}%`,
+          color,
         },
       })
       .catch((error: unknown) => {

src/controllers/stationStatus.ts

@@ -3,11 +3,11 @@ import { KeyAction } from "@elgato/streamdeck";
 import { Controller } from "@interfaces/controller";
 import TitleBuilder from "@root/utils/titleBuilder";
 import { stringOrUndefined } from "@root/utils/utils";
+import { STATION_STATUS_CONTROLLER_TYPE } from "@utils/controllerTypes";
+import mainLogger from "@utils/logger";
+import debounce from "debounce";
 import { LRUCache } from "lru-cache";
 import { BaseController } from "./baseController";
-import debounce from "debounce";
-import mainLogger from "@utils/logger";
-import { STATION_STATUS_CONTROLLER_TYPE } from "@utils/controllerTypes";
 
 // Valid values for the ListenTo property. This must match
 // the list of array property names that come from TrackAudio
@@ -211,7 +211,7 @@ export class StationStatusController extends BaseController {
   }
 
   /**
-   * Returns the frequency formated for display. A value of 121900000
+   * Returns the frequency formatted for display. A value of 121900000
    * will be returned as "121.900". If the frequency is undefined or 0
    * then an empty string is returned.
    */
@@ -224,7 +224,7 @@ export class StationStatusController extends BaseController {
   }
 
   /**
-   * Conveinence property to get the listenTo value of settings.
+   * Convenience property to get the listenTo value of settings.
    */
   get listenTo() {
     return this.settings.listenTo ?? "rx";
@@ -384,7 +384,7 @@ export class StationStatusController extends BaseController {
   }
 
   /**
-   * True if the station is actively receiveing.
+   * True if the station is actively receiving.
    */
   get isReceiving() {
     return this._isReceiving;

src/controllers/stationVolume.ts

@@ -1,11 +1,12 @@
 import { StationVolumeSettings } from "@actions/stationVolume";
-import { BaseController } from "./baseController";
 import { DialAction } from "@elgato/streamdeck";
 import { Controller } from "@interfaces/controller";
-import { stringOrUndefined } from "@utils/utils";
+import trackAudioManager from "@managers/trackAudio";
+import { STATION_VOLUME_CONTROLLER_TYPE } from "@utils/controllerTypes";
 import { handleAsyncException } from "@utils/handleAsyncException";
+import { stringOrUndefined } from "@utils/utils";
 import debounce from "debounce";
-import { STATION_VOLUME_CONTROLLER_TYPE } from "@utils/controllerTypes";
+import { BaseController } from "./baseController";
 
 const defaultTemplatePath = "images/actions/stationVolume/template.svg";
 
@@ -21,7 +22,7 @@ export class StationVolumeController extends BaseController {
   private _notMutedTemplatePath?: string;
   private _outputVolume? = 100;
   private _settings: StationVolumeSettings | null = null;
-  private _unavilableTemplatePath?: string;
+  private _unavailableTemplatePath?: string;
 
   /**
    * Creates a new StationVolumeController object.
@@ -75,14 +76,14 @@ export class StationVolumeController extends BaseController {
    * Gets the unavailable SVG template path.
    */
   get unavailableTemplatePath(): string {
-    return this._unavilableTemplatePath ?? defaultTemplatePath;
+    return this._unavailableTemplatePath ?? defaultTemplatePath;
   }
 
   /**
    * Sets the unavailable SVG template path.
    */
   set unavailableTemplatePath(newValue: string | undefined) {
-    this._unavilableTemplatePath = stringOrUndefined(newValue);
+    this._unavailableTemplatePath = stringOrUndefined(newValue);
   }
 
   /**
@@ -223,8 +224,16 @@ export class StationVolumeController extends BaseController {
       volume: this.outputVolume,
     };
 
-    // Set the unavilable state if the station is not available.
-    if (this.isAvailable !== undefined && !this.isAvailable) {
+    if (!trackAudioManager.isVoiceConnected) {
+      this.setFeedbackImage(this.notMutedTemplatePath, {
+        ...replacements,
+        state: "notConnected",
+      });
+      return;
+    }
+
+    // Set the unavailable state if the station is not available.
+    if (!this.isAvailable) {
       this.setFeedbackImage(this.unavailableTemplatePath, {
         ...replacements,
         state: "unavailable",
@@ -247,8 +256,11 @@ export class StationVolumeController extends BaseController {
   }
 
   private refreshTitle(): void {
-    // Set the unavilable state if the station is not available.
-    if (this.isAvailable !== undefined && !this.isAvailable) {
+    if (
+      !trackAudioManager.isConnected ||
+      !trackAudioManager.isVoiceConnected ||
+      !this.isAvailable
+    ) {
       this.action
         .setFeedback({
           title: {
@@ -269,7 +281,7 @@ export class StationVolumeController extends BaseController {
       return;
     }
 
-    // Nomral connected state.
+    // Normal connected state.
     this.action
       .setFeedback({
         title: {