soundcloud: Request user interaction if autoplay is blocked

locale/en.yaml

@@ -123,6 +123,8 @@ uwave:
   booth:
     empty: Nobody is playing!
     videoDisabled: Video playback is disabled.
+    autoplayBlocked: Your browser is blocking autoplay. Please press the button below to manually start playing this track.
+    play: Play
     currentDJ: "played by: {{user}}"
     skip:
       self: Skip your turn

src/sources/soundcloud/Player.css

@@ -8,7 +8,14 @@
   width: 400px;
   margin: auto;
   height: 300px;
-  background: var(--background-color);
+}
+
+.src-soundcloud-Player-autoplay {
+  position: relative;
+  z-index: 3;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
 }
 
 .src-soundcloud-Player-meta {

src/sources/soundcloud/Player.js

@@ -2,15 +2,22 @@ import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import createDebug from 'debug';
+import { translate } from 'react-i18next';
+import Paper from 'material-ui/Paper';
+import Button from 'material-ui/Button';
+import Typography from 'material-ui/Typography';
 import SongInfo from './SongInfo';
 import soundcloudLogo from '../../../assets/img/soundcloud-inline.png';
 
 const debug = createDebug('uwave:component:video:soundcloud');
 
 const CLIENT_ID = '9d883cdd4c3c54c6dddda2a5b3a11200';
 
-export default class SoundCloudPlayer extends React.Component {
+const enhance = translate();
+
+class SoundCloudPlayer extends React.Component {
   static propTypes = {
+    t: PropTypes.func.isRequired,
     className: PropTypes.string,
     active: PropTypes.bool.isRequired,
     enabled: PropTypes.bool,
@@ -19,8 +26,15 @@ export default class SoundCloudPlayer extends React.Component {
     volume: PropTypes.number,
   };
 
+  state = {
+    needsTap: false,
+  };
+
   componentDidMount() {
     this.audio = new Audio();
+    this.audio.addEventListener('error', () => {
+      this.handleError(this.audio.error);
+    });
     this.audio.autoplay = true;
     this.play();
   }
@@ -45,6 +59,7 @@ export default class SoundCloudPlayer extends React.Component {
   }
 
   play() {
+    this.setState({ needsTap: false });
     if (this.props.enabled && this.props.active) {
       // In Firefox we have to wait for the "canplaythrough" event before
       // seeking.
@@ -57,7 +72,8 @@ export default class SoundCloudPlayer extends React.Component {
 
       const { streamUrl } = this.props.media.sourceData;
       this.audio.src = `${streamUrl}?client_id=${CLIENT_ID}`;
-      this.audio.play();
+      const res = this.audio.play();
+      if (res && res.then) res.catch(this.handleError);
       debug('currentTime', this.props.seek);
       this.audio.addEventListener('canplaythrough', doSeek, false);
     } else {
@@ -69,17 +85,43 @@ export default class SoundCloudPlayer extends React.Component {
     this.audio.pause();
   }
 
+  handleError = (error) => {
+    if (error.name === 'NotAllowedError') {
+      this.setState({ needsTap: true });
+    }
+  };
+
+  handlePlay = () => {
+    this.play();
+  };
+
   render() {
     if (!this.props.active) {
       return null;
     }
 
-    const { media } = this.props;
+    const { t, media } = this.props;
+    const { needsTap } = this.state;
     const { sourceData } = media;
     if (!sourceData) {
       return <div className={cx('src-soundcloud-Player', this.props.className)} />;
     }
 
+    if (needsTap) {
+      return (
+        <div className={cx('src-soundcloud-Player', this.props.className)}>
+          <Paper className="src-soundcloud-Player-autoplay">
+            <Typography component="p" paragraph>
+              {t('booth.autoplayBlocked')}
+            </Typography>
+            <Button variant="raised" color="primary" onClick={this.handlePlay}>
+              {t('booth.play')}
+            </Button>
+          </Paper>
+        </div>
+      );
+    }
+
     return (
       <div className={cx('src-soundcloud-Player', this.props.className)}>
         <div className="src-soundcloud-Player-meta">
@@ -115,3 +157,5 @@ export default class SoundCloudPlayer extends React.Component {
     );
   }
 }
+
+export default enhance(SoundCloudPlayer);