Commit a0b4d5eca339d751888099af99692167b4c58ddb
ux: improve the user experience of the audio player
Andre Staltz committed on 11/4/2020, 3:00:39 PMParent: b772acd28751e153112a3a83641af57ab5cda45c
Files changed
| src/frontend/components/AudioPlayer.ts | changed |
| src/frontend/components/AudioPlayer.ts | ||
|---|---|---|
| @@ -136,8 +136,17 @@ | ||
| 136 | 136 | ); |
| 137 | 137 | this.setState({duration, fetchingFile: false}, () => |
| 138 | 138 | breathingAnimation.stop(), |
| 139 | 139 | ); |
| 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 | + }); | |
| 140 | 149 | }); |
| 141 | 150 | } |
| 142 | 151 | |
| 143 | 152 | public componentWillUnmount() { |
| @@ -166,28 +175,28 @@ | ||
| 166 | 175 | this.setState({editingSlider: true, elapsed: value}); |
| 167 | 176 | }; |
| 168 | 177 | |
| 169 | 178 | private play = () => { |
| 170 | - requestAnimationFrame(() => { | |
| 179 | + if (!this.player) return; | |
| 180 | + | |
| 181 | + if (this.state.timer) clearInterval(this.state.timer); | |
| 182 | + | |
| 183 | + const timer = setInterval(() => { | |
| 171 | 184 | if (!this.player) return; |
| 185 | + if ( | |
| 186 | + this.state.playState !== PlayState.PLAYING || | |
| 187 | + this.state.editingSlider | |
| 188 | + ) { | |
| 189 | + return; | |
| 190 | + } | |
| 172 | 191 | |
| 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); | |
| 181 | 196 | |
| 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}); | |
| 190 | 199 | }); |
| 191 | 200 | }; |
| 192 | 201 | |
| 193 | 202 | private pause = () => { |
Built with git-ssb-web