Handle YouTube video errors (#1978)

app/components/post_body_additional_content/post_body_additional_content.js

@@ -4,6 +4,7 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
+    Alert,
     Image,
     Linking,
     Platform,
@@ -13,6 +14,7 @@ import {
     View,
 } from 'react-native';
 import {YouTubeStandaloneAndroid, YouTubeStandaloneIOS} from 'react-native-youtube';
+import {intlShape} from 'react-intl';
 
 import ProgressiveImage from 'app/components/progressive_image';
 
@@ -53,6 +55,10 @@ export default class PostBodyAdditionalContent extends PureComponent {
         onLongPress: emptyFunction,
     };
 
+    static contextTypes = {
+        intl: intlShape.isRequired,
+    };
+
     constructor(props) {
         super(props);
 
@@ -348,7 +354,9 @@ export default class PostBodyAdditionalContent extends PureComponent {
         const startTime = this.getYouTubeTime(link);
 
         if (Platform.OS === 'ios') {
-            YouTubeStandaloneIOS.playVideo(videoId, startTime);
+            YouTubeStandaloneIOS.
+                playVideo(videoId, startTime).
+                catch(this.playYouTubeVideoError);
         } else {
             const {config} = this.props;
 
@@ -358,13 +366,30 @@ export default class PostBodyAdditionalContent extends PureComponent {
                     videoId,
                     autoplay: true,
                     startTime,
-                });
+                }).catch(this.playYouTubeVideoError);
             } else {
                 Linking.openURL(link);
             }
         }
     };
 
+    playYouTubeVideoError = (errorMessage) => {
+        const {formatMessage} = this.context.intl;
+
+        Alert.alert(
+            formatMessage({
+                id: 'mobile.youtube_playback_error.title',
+                defaultMessage: 'YouTube playback error',
+            }),
+            formatMessage({
+                id: 'mobile.youtube_playback_error.description',
+                defaultMessage: 'An error occurred while trying to play the YouTube video.\nDetails: {details}',
+            }, {
+                details: errorMessage,
+            }),
+        );
+    };
+
     render() {
         const {link, openGraphData, postProps} = this.props;
         const {linkLoadError} = this.state;

assets/base/i18n/en.json

@@ -2631,6 +2631,8 @@
   "mobile.video.save_error_title": "Save Video Error",
   "mobile.video_playback.failed_description": "An error occurred while trying to play the video.\n",
   "mobile.video_playback.failed_title": "Video playback failed",
+  "mobile.youtube_playback_error.title": "YouTube playback error",
+  "mobile.youtube_playback_error.description": "An error occurred while trying to play the YouTube video.\nDetails: {details}",
   "modal.manual_status.ask": "Do not ask me again",
   "modal.manual_status.auto_responder.message_": "Would you like to switch your status to \"{status}\" and disable Automatic Replies?",
   "modal.manual_status.auto_responder.message_away": "Would you like to switch your status to \"Away\" and disable Automatic Replies?",