Merge branch 'master' of github.com:mozilla/voice-web into activate

web/css/index.css

@@ -646,6 +646,39 @@ header.active {
   background: none;
 }
 
+#install-app {
+  position: fixed;
+  bottom: 0;
+  left: 0; right: 0;
+  background-color: rgba(61, 254, 253, 0.9);
+  height: 3rem;
+  line-height: 3rem;
+  vertical-align: middle;
+  cursor: pointer;
+  text-align: center;
+  color: white;
+  font-weight: bold;
+  z-index: var(--top-z-index);
+  transform: translateY(3rem);
+  transition: transform 0.2s linear;
+}
+
+@media (max-width: 600px) {
+  .safari #install-app {
+    transform: translateY(0);
+  }
+  .safari #install-app.hide {
+    transform: translateY(3rem);
+  }
+}
+
+#install-app a {
+  position: absolute;
+  right: 0;
+  height: 100%;
+  width: 3rem;
+  color: white;
+}
 
 /**
  * We have two different page transition types:

web/src/lib/app.tsx

@@ -2,7 +2,7 @@ import { h, render } from 'preact';
 import User from './user';
 import API from './api';
 import Pages from './components/pages';
-import { isFocus, isNativeIOS } from './utility';
+import { isSafari, isFocus, isNativeIOS } from './utility';
 import DebugBox from './components/debug-box';
 
 const LOAD_DELAY = 500; // before pulling the curtain
@@ -54,6 +54,10 @@ export default class App {
       document.body.classList.add('focus');
     }
 
+    if (isSafari()) {
+      document.body.classList.add('safari');
+    }
+
     this.user = new User();
     this.api = new API(this.user);
     this.loaded = false;

web/src/lib/components/pages.tsx

 import { h, Component } from 'preact';
+import { getItunesURL } from '../utility';
 import Logo from './logo';
 import Icon from './icon';
 import PrivacyContent from './privacy-content';
@@ -83,6 +84,18 @@ export default class Pages extends Component<PagesProps, PagesState> {
     this.renderUser = this.renderUser.bind(this);
     this.linkNavigate = this.linkNavigate.bind(this);
     this.clearRobot = this.clearRobot.bind(this);
+    this.openInApp = this.openInApp.bind(this);
+    this.closeOpenInApp = this.closeOpenInApp.bind(this);
+  }
+
+  private openInApp() {
+    window.location.href = getItunesURL();
+  }
+
+  private closeOpenInApp(evt) {
+    evt.stopPropagation();
+    evt.preventDefault();
+    document.getElementById('install-app').classList.add('hide');
   }
 
   private getCurrentPageName() {
@@ -270,6 +283,8 @@ export default class Pages extends Component<PagesProps, PagesState> {
 
     let className = pageName + (this.state.recording ? ' recording' : '');
     return <div id="main" className={className}>
+      <div onClick={this.openInApp} id="install-app">Open in App
+        <a onClick={this.closeOpenInApp}>X</a></div>
       <header className={(this.state.isMenuVisible || this.state.scrolled ?
                           'active' : '')}>
         <Logo navigate={this.props.navigate}/>

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

@@ -8,7 +8,8 @@ import AudioWeb, { AudioInfo } from './record/audio-web';
 import ListenBox from '../listen-box';
 import ProgressButton from '../progress-button';
 import ERROR_MSG from '../../../error-msg';
-import { isFocus, countSyllables, isNativeIOS, generateGUID } from '../../utility';
+import { getItunesURL, isFocus, countSyllables, isNativeIOS, generateGUID }
+  from '../../utility';
 import confirm from '../confirm';
 
 const SET_COUNT = 3;
@@ -243,7 +244,7 @@ export default class RecordPage extends Component<RecordProps, RecordState> {
             <Icon type="chrome" />Chrome</a>
         </p>
         <p><b>iOS</b> users can download our free app:</p>
-        <a target="_blank" href="https://itunes.apple.com/us/app/project-common-voice-by-mozilla/id1240588326"><img src="/img/appstore.svg" /></a>
+        <a target="_blank" href={getItunesURL()}><img src="/img/appstore.svg" /></a>
       </div>;
     }
 

web/src/lib/utility.ts

@@ -42,6 +42,14 @@ export function isFocus(): boolean {
   return navigator.userAgent.indexOf('Focus') !== -1;
 }
 
+export function isSafari(): boolean {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+
 export function isProduction(): boolean {
   return window.location.origin === 'https://voice.mozilla.org';
 }
+
+export function getItunesURL(): string {
+  return 'https://itunes.apple.com/us/app/project-common-voice-by-mozilla/id1240588326';
+}