Set dial indicators to grey when not connected

Fixes #374

.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,15 @@
     "editor.formatOnSave": false
   },
   "svg.preview.background": "editor",
-  "cSpell.words": ["elgato", "streamdeck"]
+  "cSpell.words": [
+    "Autopurge",
+    "Callsign",
+    "callsigns",
+    "coms",
+    "elgato",
+    "stationvolume",
+    "streamdeck",
+    "trackaudio",
+    "Typeguard"
+  ]
 }

src/controllers/mainVolume.ts

@@ -1,11 +1,11 @@
 import { MainVolumeSettings } from "@actions/mainVolume";
 import { DialAction } from "@elgato/streamdeck";
 import { Controller } from "@interfaces/controller";
+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 +57,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;

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,11 @@
 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 { 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 +21,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 +75,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 +223,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 (this.isAvailable === undefined) {
+      this.setFeedbackImage(this.unavailableTemplatePath, {
+        ...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 +255,10 @@ export class StationVolumeController extends BaseController {
   }
 
   private refreshTitle(): void {
-    // Set the unavilable state if the station is not available.
-    if (this.isAvailable !== undefined && !this.isAvailable) {
+    // Set the unavailable state if the station is not available.
+    // If TrackAudio voice isn't connected isAvailable is undefined
+    // and things get shown in the same state.
+    if (this.isAvailable === undefined || !this.isAvailable) {
       this.action
         .setFeedback({
           title: {
@@ -269,7 +279,7 @@ export class StationVolumeController extends BaseController {
       return;
     }
 
-    // Nomral connected state.
+    // Normal connected state.
     this.action
       .setFeedback({
         title: {