Commit 22373410 authored by Michael Henretty's avatar Michael Henretty

add better support for native ios

parent b315c3fc
......@@ -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) {
......
......@@ -100,7 +100,7 @@ export default class App {
*/
private bootstrapIOS() {
document.body.classList.add('ios');
//this.renderDebugBox();
// this.renderDebugBox();
}
/**
......
......@@ -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
});
......
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 => {
......
......@@ -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>
......
......@@ -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);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment