feat: suppress periodic audio in inspector

Avoids being jumpscared by a periodic audio readout that also can't be
silenced, short of closing the tab or navigating away. To replace the
missing feedback on whether periodic audio is configured, also adds a
line to the inspector audio controls to report the readout parameters
that would have been used.

assets/src/components/admin/inspector.tsx

@@ -10,6 +10,8 @@ import { useHistory, useLocation } from "react-router-dom";
 
 import AdminForm from "./admin_form";
 
+import { type AudioConfig } from "Components/v2/screen_container";
+
 import { doSubmit, type Config, type Screen } from "Util/admin";
 import {
   type Message,
@@ -383,6 +385,7 @@ const DataControls: ComponentType<{
 };
 
 const AudioControls: ComponentType<{ screen: ScreenWithId }> = ({ screen }) => {
+  const [config, setConfig] = useState<AudioConfig | null | undefined>();
   // To bypass browser caching, we add a meaningless query param to the URL of
   // the <audio> element, based on the timestamp the Play button was clicked.
   const [playingAt, setPlayingAt] = useState<Date | null>(null);
@@ -394,6 +397,10 @@ const AudioControls: ComponentType<{ screen: ScreenWithId }> = ({ screen }) => {
     [dialogRef, ssml],
   );
 
+  useReceiveMessage((message) => {
+    if (message.type == "audio_config") setConfig(message.config);
+  });
+
   const audioPath = AUDIO_SCREEN_TYPES.has(screen.config.app_id)
     ? `/v2/audio/${screen.id}`
     : null;
@@ -443,6 +450,19 @@ const AudioControls: ComponentType<{ screen: ScreenWithId }> = ({ screen }) => {
               src={`${audioPath}/readout.mp3?at=${playingAt.getTime()}`}
             />
           )}
+
+          {config !== undefined && (
+            <div>
+              {config ? (
+                <span>
+                  🔈 Plays every <b>{config.readoutIntervalMinutes}</b>{" "}
+                  minutes (offset <b>{config.intervalOffsetSeconds}</b> seconds)
+                </span>
+              ) : (
+                "🔇 No periodic audio readout"
+              )}
+            </div>
+          )}
         </>
       ) : (
         <div>Not supported on this screen</div>

assets/src/hooks/v2/use_audio_readout.tsx

@@ -1,6 +1,7 @@
 import { AudioConfig } from "Components/v2/screen_container";
 import useDriftlessInterval from "Hooks/use_driftless_interval";
 import { fetchDatasetValue } from "Util/dataset";
+import { isFramed, sendToInspector } from "Util/inspector";
 
 const readoutPath = (id: string) => `/v2/audio/${id}/readout.mp3`;
 const volumePath = (id: string) => `/v2/audio/${id}/volume`;
@@ -32,6 +33,13 @@ interface UseAudioReadoutArgs {
 }
 
 const useAudioReadout = ({ id, config }: UseAudioReadoutArgs): void => {
+  if (isFramed()) {
+    // Don't read out periodic audio in the inspector, since there's otherwise
+    // no way to turn it off. Just report the config that would have been used.
+    sendToInspector({ type: "audio_config", config: config });
+    return;
+  }
+
   if (config == null || config.readoutIntervalMinutes === 0) {
     return;
   }

assets/src/util/inspector.ts

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { type AudioConfig } from "Components/v2/screen_container";
 
 /**
  * Defines a protocol the "Inspector" admin UI can use to communicate with
@@ -11,6 +12,7 @@ import { useEffect } from "react";
  */
 
 export type Message =
+  | { type: "audio_config"; config: AudioConfig | null }
   | { type: "data_refreshed"; timestamp: number }
   | { type: "refresh_data" }
   | { type: "set_data_variant"; variant: string | null }
@@ -44,6 +46,7 @@ const receiveHook = (handler: MessageHandler) => {
 };
 
 export {
+  isFramed,
   sendMessage,
   sendToInspector,
   useReceiveMessage,