1import React from 'react';
2import { PixelRatio, ScrollView, StyleSheet } from 'react-native';
3
4import AudioModeSelector from './AudioModeSelector';
5import Player from './AudioPlayer';
6import Recorder from './Recorder';
7import HeadingText from '../../components/HeadingText';
8
9interface State {
10  recordingUri?: string;
11}
12
13// See: https://github.com/expo/expo/pull/10229#discussion_r490961694
14// eslint-disable-next-line @typescript-eslint/ban-types
15export default class RecordingScreen extends React.Component<{}, State> {
16  static navigationOptions = {
17    title: 'Audio Recording',
18  };
19
20  readonly state: State = {};
21
22  _handleRecordingFinished = (recordingUri: string) => this.setState({ recordingUri });
23
24  _maybeRenderLastRecording = () =>
25    this.state.recordingUri ? (
26      <>
27        <HeadingText>Last recording</HeadingText>
28        <Player source={{ uri: this.state.recordingUri }} />
29      </>
30    ) : null;
31
32  render() {
33    return (
34      <ScrollView contentContainerStyle={styles.contentContainer}>
35        <HeadingText>Audio mode</HeadingText>
36        <AudioModeSelector />
37        <HeadingText>Recorder</HeadingText>
38        <Recorder onDone={this._handleRecordingFinished} />
39        {this._maybeRenderLastRecording()}
40      </ScrollView>
41    );
42  }
43}
44
45const styles = StyleSheet.create({
46  contentContainer: {
47    padding: 10,
48  },
49  text: {
50    marginVertical: 15,
51    marginHorizontal: 10,
52  },
53  faintText: {
54    color: '#888',
55    marginHorizontal: 30,
56  },
57  oopsTitle: {
58    fontSize: 25,
59    marginBottom: 5,
60    textAlign: 'center',
61  },
62  oopsText: {
63    textAlign: 'center',
64    marginTop: 10,
65    marginHorizontal: 30,
66  },
67  player: {
68    borderBottomWidth: 1.0 / PixelRatio.get(),
69    borderBottomColor: '#cccccc',
70  },
71});
72