add better support for native ios

web/css/index.css

@@ -660,10 +660,38 @@ header.active {
   transform: scaleY(0.4);
 }
 
-.recording #background-container {
+/* Don't use background transitions on desktop since
+ * Normal scaling is already smooth enough */
+body:not(.ios) .recording #background-container {
   transition: opacity 0.4 var(--bounce-curve);
 }
 
+/* For native iOS css background image is not performance
+ * so we use inline images instead */
+.ios #background-container {
+  background: none !important;
+}
+
+.ios #background-container:after {
+  display: none !important;
+}
+
+.ios #background-container img {
+  position: absolute;
+  top: 0; bottom: 0;
+  left: 0; right: 0;
+  transition: opacity 0.2s linear;
+}
+
+.ios .recording #background-container img:first-child,
+.ios #background-container img:last-child {
+  opacity: 0;
+}
+
+.ios .recording #background-container img:last-child {
+  opacity: 1;
+}
+
 @media (max-width: 600px) {
   #background-container {
     height: 12.5rem;
@@ -904,7 +932,6 @@ header.active {
   height: var(--hero-height);
   border-bottom: 3px solid var(--base-font-color);
   position: relative;
-  z-index: var(--middle-z-index: 1);
 }
 
 @media (max-width: 600px) {

web/src/lib/app.tsx

@@ -100,7 +100,7 @@ export default class App {
    */
   private bootstrapIOS() {
     document.body.classList.add('ios');
-    //this.renderDebugBox();
+    // this.renderDebugBox();
   }
 
   /**

web/src/lib/components/debug-box.tsx

@@ -24,7 +24,7 @@ export default class DebugBox extends Component<Props, State> {
 
   private addMessage(message: string) {
     let messages = this.state.messages;
-    messages.push(message);
+    messages.unshift(message);
     this.setState({
       messages: messages
     });

web/src/lib/components/pages.tsx

 import { h, Component } from 'preact';
-import { getItunesURL } from '../utility';
+import { getItunesURL, isNativeIOS } from '../utility';
 import Logo from './logo';
 import Icon from './icon';
 import PrivacyContent from './privacy-content';
@@ -66,6 +66,7 @@ export default class Pages extends Component<PagesProps, PagesState> {
   private scroller: HTMLElement;
   private content: HTMLElement;
   private bg: HTMLElement;
+  private iOSBackground: any[];
 
   state = {
     isMenuVisible: false,
@@ -82,6 +83,17 @@ export default class Pages extends Component<PagesProps, PagesState> {
 
   constructor(props) {
     super(props);
+
+    // On native iOS, we found some issues animating the css background
+    // image during recording, so we use this as a more performant alternative.
+    this.iOSBackground = [];
+    if (true || isNativeIOS()) {
+      this.iOSBackground = [
+        <img src="/img/wave-blue-mobile.png" />,
+        <img src="/img/wave-red-mobile.png" />
+      ];
+    }
+
     this.uploadRecordings = this.uploadRecordings.bind(this);
     this.onRecord = this.onRecord.bind(this);
     this.onRecordStop = this.onRecordStop.bind(this);
@@ -158,7 +170,6 @@ export default class Pages extends Component<PagesProps, PagesState> {
 
     // Callback function for when we've hidden the normal background.
     let cb = () => {
-      console.log('does this ever happen?');
       this.bg.removeEventListener('transitionend', cb);
       this.setState({
         transitioning: false,
@@ -334,7 +345,7 @@ export default class Pages extends Component<PagesProps, PagesState> {
         {this.renderNav('main-nav')}
       </header>
       <div id="scroller"><div id="scrollee">
-        <div id="background-container" style={bgStyle}></div>
+        <div id="background-container" style={bgStyle}>{this.iOSBackground}</div>
         <div class="hero">
           <Robot position={(pageName === 'record' && this.state.robot) ||
                            pageName} onClick={page => {

web/src/lib/components/pages/record.tsx

@@ -222,7 +222,10 @@ export default class RecordPage extends Component<RecordProps, RecordState> {
     this.newSentenceSet();
   }
 
-  onRecordClick() {
+  onRecordClick(evt?: any) {
+    evt.preventDefault();
+    evt.stopImmediatePropagation();
+
     if (this.state.recording) {
       this.stopRecording();
 
@@ -342,7 +345,8 @@ export default class RecordPage extends Component<RecordProps, RecordState> {
           <Icon id="undo-clip" type="undo" onClick={this.goBack}
             className={!showBack ? 'hide' : ''}/>
         </div>
-        <div id="record-button" onClick={this.onRecordClick}></div>
+        <div id="record-button" onTouchStart={this.onRecordClick}
+                                onClick={this.onRecordClick}></div>
         <p id="record-help">
           Please tap to record, then read the above sentence aloud.
         </p>

web/src/lib/components/pages/record/audio-ios.ts

@@ -3,6 +3,8 @@ import { isNativeIOS } from '../../../utility';
 import { AudioInfo } from './audio-web';
 import confirm from '../../confirm';
 
+const LEVELS_THROTTLE = 50;
+
 declare var webkit;
 declare var vcopensettings;
 
@@ -10,7 +12,8 @@ export default class AudioIOS {
   postMessage: Function;
   pendingStart: Function;
   pendingStartError: Function;
-  volumeCallback: Function
+  volumeCallback: Function;
+  lastUpdate: number;
 
   static AUDIO_TYPE: string = 'audio/m4a;base64';
   last: AudioInfo;
@@ -61,9 +64,21 @@ export default class AudioIOS {
       throw new Error('cannot use ios audio in web app');
     }
 
-    // Native will call this function with audio info,
-    // but we are not yet interested.
-    window['levels'] = () => {};
+    // Native will call this function with decibels from -120 to 0.
+    this.lastUpdate = Date.now();
+    window['levels'] = (decibels) => {
+      if (!this.volumeCallback) {
+        return;
+      }
+
+      let now = Date.now();
+      if (now - this.lastUpdate > LEVELS_THROTTLE) {
+        this.lastUpdate = now;
+        // Scale and shift to get a nice sound curve.
+        let volume = (parseInt(decibels, 10) + 70) * 1.5;
+        this.volumeCallback(volume);
+      }
+    };
 
     // Handle any messages coming from native.
     window['nativemsgs'] = this.handleNativeMessage.bind(this);