git ssb

1+

Daan Patchwork / manyverse



Commit a0b4d5eca339d751888099af99692167b4c58ddb

ux: improve the user experience of the audio player

Andre Staltz committed on 11/4/2020, 3:00:39 PM
Parent: b772acd28751e153112a3a83641af57ab5cda45c

Files changed

src/frontend/components/AudioPlayer.tschanged
src/frontend/components/AudioPlayer.tsView
@@ -136,8 +136,17 @@
136136 );
137137 this.setState({duration, fetchingFile: false}, () =>
138138 breathingAnimation.stop(),
139139 );
140+
141+ (this.player as any).on?.('ended', () => {
142+ this.setState({
143+ playState: PlayState.PAUSED,
144+ elapsed: 0,
145+ elapsedSlider: 0,
146+ editingSlider: false,
147+ });
148+ });
140149 });
141150 }
142151
143152 public componentWillUnmount() {
@@ -166,28 +175,28 @@
166175 this.setState({editingSlider: true, elapsed: value});
167176 };
168177
169178 private play = () => {
170- requestAnimationFrame(() => {
179+ if (!this.player) return;
180+
181+ if (this.state.timer) clearInterval(this.state.timer);
182+
183+ const timer = setInterval(() => {
171184 if (!this.player) return;
185+ if (
186+ this.state.playState !== PlayState.PLAYING ||
187+ this.state.editingSlider
188+ ) {
189+ return;
190+ }
172191
173- const timer = setInterval(() => {
174- if (!this.player) return;
175- if (
176- this.state.playState !== PlayState.PLAYING ||
177- this.state.editingSlider
178- ) {
179- return;
180- }
192+ const currentTime = Math.round(this.player.currentTime);
193+ const elapsed = convertMillisecondsToSeconds(Math.max(0, currentTime));
194+ this.setState({elapsed, elapsedSlider: elapsed});
195+ }, 333);
181196
182- const currentTime = Math.round(this.player.currentTime);
183- const elapsed = convertMillisecondsToSeconds(Math.max(0, currentTime));
184- this.setState({elapsed, elapsedSlider: elapsed});
185- }, 333);
186-
187- this.player.play(() => {
188- this.setState({playState: PlayState.PLAYING, timer});
189- });
197+ this.player.play(() => {
198+ this.setState({playState: PlayState.PLAYING, timer});
190199 });
191200 };
192201
193202 private pause = () => {

Built with git-ssb-web