disable spectrograms on iOS (untested)

index.html

@@ -1,6 +0,0 @@
-<!doctype html>
-<html>
-  <body>
-    <h1> Vocodes is launching soon! </h1>
-  </body>
-</html>

vocodes/src/App.tsx

@@ -1,7 +1,7 @@
 import './App.scss';
 import React from 'react';
 import { AboutComponent } from './modes/about/AboutComponent';
-import { ExtrasMode } from './modes/speak/extras/ExtrasComponent';
+import { ExtrasMode } from './modes/speak/SpeakComponent';
 import { Footer } from './navigation/Footer';
 import { HistoryComponent } from './modes/history/HistoryComponent';
 import { Mode } from './AppMode';
@@ -12,7 +12,13 @@ import { TermsComponent } from './modes/terms/TermsComponent';
 import { TopNav } from './navigation/TopNav';
 import { Utterance } from './model/utterance';
 
-interface Props {}
+interface Props {
+  // Certan browsers (iPhone) have pitiful support for drawing APIs. Worse yet,
+  // they seem to lose the "touch event sandboxing" that allows for audio to be 
+  // played after user interaction if the XHRs delivering the audio don't do so
+  // as actual audio mimetypes. (Decoding from base64 and trying to play fails.)
+  enableSpectrograms: boolean,
+}
 
 enum SpectrogramMode {
   VIRIDIS,
@@ -66,6 +72,9 @@ class App extends React.Component<Props, State> {
   }
 
   switchExtrasMode = (extrasMode: ExtrasMode) => {
+    if (!this.props.enableSpectrograms && extrasMode == ExtrasMode.SPECTROGRAM) {
+      return;
+    }
     this.setState({ extrasMode: extrasMode });
   }
 
@@ -91,6 +100,9 @@ class App extends React.Component<Props, State> {
   }
 
   updateSpectrogram = (spectrogram: Spectrogram) => {
+    if (!this.props.enableSpectrograms) {
+      return; // unsupported
+    }
     this.setState({ 
       currentSpectrogram: spectrogram,
       extrasMode: ExtrasMode.SPECTROGRAM,
@@ -116,6 +128,7 @@ class App extends React.Component<Props, State> {
     switch (this.state.mode) {
       case Mode.SPEAK_MODE:
         component = <SpeakComponent 
+          enableSpectrograms={this.props.enableSpectrograms}
           extrasMode={this.state.extrasMode}
           currentSpeaker={this.state.speaker} 
           currentSpectrogram={this.state.currentSpectrogram}

vocodes/src/index.tsx

@@ -4,9 +4,13 @@ import './index.css';
 import { App } from './App';
 import * as serviceWorker from './serviceWorker';
 
+const IS_IOS : boolean = /iPad|iPhone|iPod/.test(navigator.platform || "");
+
+let enableSpectrograms = !IS_IOS;
+
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <App enableSpectrograms={enableSpectrograms} />
   </React.StrictMode>,
   document.getElementById('root')
 );

vocodes/src/modes/speak/SpeakComponent.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Form } from './Form';
-import { StatusText } from './StatusText';
-import { getRandomInt } from '../../Utils';
-import { SpeakerDropdown } from './SpeakerDropdown';
 import { Speaker } from '../../model/Speakers';
-import { ExtrasComponent, ExtrasMode } from './extras/ExtrasComponent';
+import { SpeakerDropdown } from './SpeakerDropdown';
+import { SpeakerInfo } from './extras/SpeakerInfo';
 import { Spectrogram } from './extras/Spectrogram';
+import { SpectrogramComponent } from './extras/SpectrogramComponent';
 import { SpectrogramMode } from '../../App';
+import { StatusText } from './StatusText';
 import { Utterance } from '../../model/utterance';
+import { getRandomInt } from '../../Utils';
 
 enum StatusState {
   NONE,
@@ -16,7 +17,13 @@ enum StatusState {
   ERROR,
 }
 
+enum ExtrasMode {
+  SPEAKER_INFO,
+  SPECTROGRAM,
+}
+
 interface Props {
+  enableSpectrograms: boolean,
   extrasMode: ExtrasMode,
   currentSpeaker: Speaker,
   currentSpectrogram?: Spectrogram,
@@ -129,16 +136,37 @@ class SpeakComponent extends React.Component<Props, State> {
   }
 
   public render() {
-    let modeText;
+    let speakerPictureOrSpectrogram;
     switch (this.props.extrasMode) {
       case ExtrasMode.SPEAKER_INFO:
-        modeText = "Speaker Info";
+        speakerPictureOrSpectrogram = <SpeakerInfo currentSpeaker={this.props.currentSpeaker} />
         break;
       case ExtrasMode.SPECTROGRAM:
-        modeText = "Spectrogram";
+        speakerPictureOrSpectrogram = <SpectrogramComponent 
+          currentSpectrogram={this.props.currentSpectrogram} 
+          spectrogramMode={this.props.spectrogramMode}
+          changeSpectrogramMode={this.props.changeSpectrogramMode}
+          />
         break;
     }
 
+    let switchButton = <span />
+    if (this.props.enableSpectrograms) {
+      let modeText;
+      switch (this.props.extrasMode) {
+        case ExtrasMode.SPEAKER_INFO:
+          modeText = "Speaker Info";
+          break;
+        case ExtrasMode.SPECTROGRAM:
+          modeText = "Spectrogram";
+          break;
+      }
+
+      switchButton = <button 
+        className="mode_button"
+        onClick={this.toggleMode}>{modeText}</button>
+    }
+
     return (
       <div>
         <SpeakerDropdown 
@@ -146,25 +174,17 @@ class SpeakComponent extends React.Component<Props, State> {
           changeSpeakerCallback={this.props.changeSpeakerCallback} 
           />
 
-        <button 
-          className="mode_button"
-          onClick={this.toggleMode}>{modeText}</button>
+        {switchButton}
 
         <div>
-          <ExtrasComponent 
-            extrasMode={this.props.extrasMode}
-            currentSpeaker={this.props.currentSpeaker} 
-            currentSpectrogram={this.props.currentSpectrogram}
-            spectrogramMode={this.props.spectrogramMode}
-            changeExtrasModeCallback={this.props.changeExtrasModeCallback}
-            changeSpectrogramMode={this.props.changeSpectrogramMode}
-            />
+          {speakerPictureOrSpectrogram}
         </div>
 
         <StatusText 
           statusState={this.state.statusState} 
           statusMessage={this.state.statusMessage}
           />
+
         <Form 
           currentSpeaker={this.props.currentSpeaker}
           currentText={this.props.currentText}
@@ -185,4 +205,4 @@ class SpeakComponent extends React.Component<Props, State> {
   }
 }
 
-export { SpeakComponent, StatusState };
+export { SpeakComponent, StatusState, ExtrasMode };

vocodes/src/modes/speak/extras/ExtrasComponent.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Speaker } from '../../../model/Speakers';
-import { SpeakerInfo } from './SpeakerInfo';
-import { Spectrogram } from './Spectrogram';
-import { SpectrogramComponent } from './SpectrogramComponent';
-import { SpectrogramMode } from '../../../App';
-
-enum ExtrasMode {
-  SPEAKER_INFO,
-  SPECTROGRAM,
-}
-
-interface Props {
-  extrasMode: ExtrasMode,
-  currentSpeaker: Speaker,
-  currentSpectrogram?: Spectrogram,
-  spectrogramMode: SpectrogramMode,
-  changeExtrasModeCallback: (extrasMode: ExtrasMode) => void,
-  changeSpectrogramMode: (spectrogramMode: SpectrogramMode) => void,
-}
-
-interface State {
-}
-
-class ExtrasComponent extends React.Component<Props, State> {
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-    };
-  }
-
-  public render() {
-    let modeComponent;
-    switch (this.props.extrasMode) {
-      case ExtrasMode.SPEAKER_INFO:
-        modeComponent = <SpeakerInfo currentSpeaker={this.props.currentSpeaker} />
-        break;
-      case ExtrasMode.SPECTROGRAM:
-        modeComponent = <SpectrogramComponent 
-          currentSpectrogram={this.props.currentSpectrogram} 
-          spectrogramMode={this.props.spectrogramMode}
-          changeSpectrogramMode={this.props.changeSpectrogramMode}
-          />
-        break;
-    }
-    return (
-      <div>
-        {modeComponent}
-      </div>
-    )
-  }
-}
-
-export { ExtrasComponent, ExtrasMode };