git ssb

1+

Daan Patchwork / manyverse



Commit 1c161cf0e3145e24df6add856e66f79b44f854fa

dx: update code style in AudioPlayer and others

Andre Staltz committed on 9/3/2020, 5:04:31 PM
Parent: 0ac7754a75f62c453cd30c46c3ed7dcab3a4d94b

Files changed

package-lock.jsonchanged
src/frontend/components/AudioPlayer.tschanged
src/frontend/global-styles/animations.tschanged
package-lock.jsonView
The diff is too large to show. Use a local git client to view these changes.
Old file size: 881872 bytes
New file size: 881894 bytes
src/frontend/components/AudioPlayer.tsView
@@ -1,4 +1,10 @@
1+/* Copyright (C) 2020 The Manyverse Authors.
2+ *
3+ * This Source Code Form is subject to the terms of the Mozilla Public
4+ * License, v. 2.0. If a copy of the MPL was not distributed with this
5+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
6+
17 import {PureComponent} from 'react';
28 import {h} from '@cycle/react';
39 import {
410 Animated,
@@ -9,17 +15,16 @@
915 TouchableOpacityProps,
1016 TextProps,
1117 StyleSheet,
1218 } from 'react-native';
13-import Slider, {SliderProps} from '@react-native-community/slider';
19+import Slider from '@react-native-community/slider';
1420 import {
1521 Player,
1622 MediaStates,
1723 PlayerError,
1824 } from '@react-native-community/audio-toolkit';
1925 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
2026 import RNFetchBlob from 'rn-fetch-blob';
21-
2227 import {t} from '../drivers/localization';
2328 import {Palette} from '../global-styles/palette';
2429 import {Dimensions} from '../global-styles/dimens';
2530 import {Typography} from '../global-styles/typography';
@@ -29,25 +34,17 @@
2934 PAUSED = MediaStates.PAUSED,
3035 PLAYING = MediaStates.PLAYING,
3136 }
3237
33-export type Props = {
34- src: string;
35-};
38+const styles = StyleSheet.create({
39+ container: {
40+ justifyContent: 'center',
41+ backgroundColor: Palette.backgroundTextWeak,
42+ minHeight: 100,
43+ overflow: 'visible',
44+ position: 'relative',
45+ },
3646
37-export type State = {
38- playState: PlayState;
39- elapsed: number;
40- elapsedSlider: number;
41- duration: number;
42-
43- editingSlider: boolean;
44- fetchingFile: boolean;
45-
46- timer?: number;
47-};
48-
49-const styles = StyleSheet.create({
5047 initialLoading: {
5148 fontSize: Typography.fontSizeNormal,
5249 lineHeight: Typography.lineHeightNormal,
5350 fontFamily: Typography.fontFamilyReadableText,
@@ -55,8 +52,18 @@
5552 fontWeight: 'bold',
5653 textAlign: 'center',
5754 },
5855
56+ sliderContainer: {
57+ marginVertical: Dimensions.verticalSpaceBig,
58+ marginHorizontal: Dimensions.horizontalSpaceBig,
59+ flexDirection: 'row',
60+ },
61+
62+ timeText: {
63+ alignSelf: 'center',
64+ },
65+
5966 slider: {
6067 flex: 1,
6168 alignSelf: 'center',
6269 marginHorizontal: Platform.select({ios: 5}),
@@ -66,14 +73,38 @@
6673 borderRadius: 3,
6774 paddingLeft: Dimensions.horizontalSpaceSmall,
6875 paddingRight: Dimensions.horizontalSpaceBig,
6976 },
77+
78+ controlsContainer: {
79+ flexDirection: 'row',
80+ justifyContent: 'center',
81+ marginBottom: Dimensions.verticalSpaceBig,
82+ },
83+
84+ controlButtons: {
85+ marginHorizontal: Dimensions.horizontalSpaceLarge,
86+ },
7087 });
7188
7289 function convertMillisecondsToSeconds(milliseconds: number): number {
7390 return Math.floor(milliseconds / 1000);
7491 }
7592
93+export type Props = {
94+ src: string;
95+};
96+
97+export type State = {
98+ playState: PlayState;
99+ elapsed: number;
100+ elapsedSlider: number;
101+ duration: number;
102+ editingSlider: boolean;
103+ fetchingFile: boolean;
104+ timer?: number;
105+};
106+
76107 export default class AudioPlayer extends PureComponent<Props, State> {
77108 private player: Player | null = null;
78109 private loadingAnim = new Animated.Value(0);
79110
@@ -81,9 +112,8 @@
81112 playState: PlayState.PAUSED,
82113 elapsed: 0,
83114 elapsedSlider: 0,
84115 duration: 0,
85-
86116 editingSlider: false,
87117 fetchingFile: true,
88118 };
89119
@@ -95,20 +125,17 @@
95125 RNFetchBlob.config({
96126 fileCache: true,
97127 })
98128 .fetch('GET', this.props.src)
99- .then(blob => {
129+ .then((blob) => {
100130 this.player = new Player(blob.path(), {
101131 autoDestroy: false,
102132 }).prepare((err: PlayerError | null): void => {
103- if (err || !this.player) {
104- return;
105- }
133+ if (err || !this.player) return;
106134
107135 const duration = convertMillisecondsToSeconds(
108136 Math.round(this.player.duration),
109137 );
110-
111138 this.setState({duration, fetchingFile: false}, () =>
112139 breathingAnimation.stop(),
113140 );
114141 });
@@ -128,29 +155,26 @@
128155
129156 private onSliderEditStart = () => {
130157 this.setState({editingSlider: true});
131158 };
159+
132160 private onSliderEditEnd = (value: number) => {
133161 this.setState({elapsedSlider: value});
134162 this.player?.seek(value * 1000, () => {
135163 this.setState({editingSlider: false, elapsed: value});
136164 });
137165 };
166+
138167 private onSliderValueChange = (value: number) => {
139168 this.setState({editingSlider: true, elapsed: value});
140169 };
141170
142171 private play = () => {
143172 requestAnimationFrame(() => {
144- if (!this.player) {
145- return;
146- }
173+ if (!this.player) return;
147174
148175 const timer = setInterval(() => {
149- if (!this.player) {
150- return;
151- }
152-
176+ if (!this.player) return;
153177 if (
154178 this.state.playState !== PlayState.PLAYING ||
155179 this.state.editingSlider
156180 ) {
@@ -158,9 +182,8 @@
158182 }
159183
160184 const currentTime = Math.round(this.player.currentTime);
161185 const elapsed = convertMillisecondsToSeconds(Math.max(0, currentTime));
162-
163186 this.setState({elapsed, elapsedSlider: elapsed});
164187 }, 100);
165188
166189 this.player.play(() => {
@@ -188,42 +211,31 @@
188211 secondsPreview < 10 ? '0' + secondsPreview : secondsPreview
189212 }`;
190213 }
191214
192- public render() {
193- const currentTimeString = this.getAudioTimeString(this.state.elapsed);
194- const durationString = this.getAudioTimeString(this.state.duration);
215+ private renderTimeText(time: number, accessibilityLabel: string) {
216+ const timeTextProps: TextProps = {
217+ accessible: true,
218+ accessibilityRole: 'text',
219+ style: styles.timeText,
220+ };
221+
222+ return h(
223+ Text,
224+ {...timeTextProps, accessibilityLabel},
225+ this.getAudioTimeString(time),
226+ );
227+ }
228+
229+ private renderControlButtons() {
195230 const touchableProps: TouchableOpacityProps = {
196231 style: styles.touchable,
197232 activeOpacity: 0.2,
198233 accessible: true,
199234 accessibilityRole: 'button',
200235 };
201- const sliderProps: SliderProps = {
202- onSlidingStart: this.onSliderEditStart,
203- onSlidingComplete: this.onSliderEditEnd,
204- onValueChange: this.onSliderValueChange,
205- disabled: this.state.fetchingFile,
206- value: this.state.elapsedSlider,
207- step: 1,
208- minimumValue: 0,
209- maximumValue: this.state.duration,
210- maximumTrackTintColor: Palette.colors.gray6,
211- minimumTrackTintColor: Palette.backgroundBrandWeaker,
212- thumbTintColor: Palette.backgroundBrandStrong,
213- accessible: true,
214- accessibilityRole: 'adjustable',
215- accessibilityLabel: t('message.audio.slider.accessibility_label'),
216- style: styles.slider,
217- };
218- const timeTextProps: TextProps = {
219- accessible: true,
220- accessibilityRole: 'text',
221- accessibilityLabel: 'none',
222- style: {alignSelf: 'center'},
223- };
224236
225- const controlButtons = h(View, {style: {marginHorizontal: 30}}, [
237+ return h(View, {style: styles.controlButtons}, [
226238 this.state.playState === PlayState.PLAYING
227239 ? h(
228240 TouchableOpacity,
229241 {
@@ -254,80 +266,57 @@
254266 }),
255267 ],
256268 ),
257269 ]);
270+ }
258271
259- return h(
260- View,
261- {
262- style: {
263- justifyContent: 'center',
264- backgroundColor: Palette.backgroundTextWeak,
265- minHeight: 100,
266- overflow: 'visible',
267- position: 'relative',
268- },
269- },
270- [
271- h(
272- View,
273- {
274- style: {
275- marginVertical: 15,
276- marginHorizontal: 15,
277- flexDirection: 'row',
278- },
279- },
280- [
281- h(
282- Text,
272+ public render() {
273+ return h(View, {style: styles.container}, [
274+ h(View, {style: styles.sliderContainer}, [
275+ this.renderTimeText(
276+ this.state.elapsed,
277+ t('message.audio.elapsed.accessibility_label'),
278+ ),
279+
280+ h(Slider, {
281+ onSlidingStart: this.onSliderEditStart,
282+ onSlidingComplete: this.onSliderEditEnd,
283+ onValueChange: this.onSliderValueChange,
284+ disabled: this.state.fetchingFile,
285+ value: this.state.elapsedSlider,
286+ step: 1,
287+ minimumValue: 0,
288+ maximumValue: this.state.duration,
289+ maximumTrackTintColor: Palette.colors.gray6,
290+ minimumTrackTintColor: Palette.backgroundBrandWeaker,
291+ thumbTintColor: Palette.backgroundBrandStrong,
292+ accessible: true,
293+ accessibilityRole: 'adjustable',
294+ accessibilityLabel: t('message.audio.slider.accessibility_label'),
295+ style: styles.slider,
296+ }),
297+
298+ this.renderTimeText(
299+ this.state.duration,
300+ t('message.audio.duration.accessibility_label'),
301+ ),
302+ ]),
303+
304+ h(View, {style: styles.controlsContainer}, [
305+ this.state.fetchingFile
306+ ? h(
307+ Animated.Text,
283308 {
284- ...timeTextProps,
309+ accessible: true,
310+ accessibilityRole: 'text',
285311 accessibilityLabel: t(
286- 'message.audio.elapsed.accessibility_label',
312+ 'message.audio.loading.accessbility_label',
287313 ),
314+ style: [styles.initialLoading, {opacity: this.loadingAnim}],
288315 },
289- currentTimeString,
290- ),
291- h(Slider, sliderProps),
292- h(
293- Text,
294- {
295- ...timeTextProps,
296- accessibilityLabel: t(
297- 'message.audio.duration.accessibility_label',
298- ),
299- },
300- durationString,
301- ),
302- ],
303- ),
304- h(
305- View,
306- {
307- style: {
308- flexDirection: 'row',
309- justifyContent: 'center',
310- marginVertical: 15,
311- },
312- },
313- [
314- this.state.fetchingFile
315- ? h(
316- Animated.Text,
317- {
318- accessible: true,
319- accessibilityRole: 'text',
320- accessibilityLabel: t(
321- 'message.audio.loading.accessbility_label',
322- ),
323- style: [styles.initialLoading, {opacity: this.loadingAnim}],
324- },
325- [t('message.audio.loading.text')],
326- )
327- : controlButtons,
328- ],
329- ),
330- ],
331- );
316+ [t('message.audio.loading.text')],
317+ )
318+ : this.renderControlButtons(),
319+ ]),
320+ ]);
332321 }
333322 }
src/frontend/global-styles/animations.tsView
@@ -1,4 +1,10 @@
1+/* Copyright (C) 2020 The Manyverse Authors.
2+ *
3+ * This Source Code Form is subject to the terms of the Mozilla Public
4+ * License, v. 2.0. If a copy of the MPL was not distributed with this
5+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
6+
17 import {Animated, Easing} from 'react-native';
28
39 export function getBreathingComposition(
410 value: Animated.Value,

Built with git-ssb-web