PLT 783 Fix Previews for removed YouTube videos (#3073)

* PLT-783 Fix Previews for removed YouTube videos render incorrectly and throw a 404

* Updating video poster for video not found (#3072)

1 files changed, 49 insertions, 13 deletions

diff --git a/webapp/components/youtube_video.jsx b/webapp/components/youtube_video.jsx
index f96504e88..04a10bc31 100644
--- a/webapp/components/youtube_video.jsx
+++ b/webapp/components/youtube_video.jsx
@@ -1,13 +1,13 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
 import ChannelStore from 'stores/channel_store.jsx';
+import WebClient from 'utils/web_client.jsx';
+import * as Utils from 'utils/utils.jsx';
 
 const ytRegex = /(?:http|https):\/\/(?:www\.)?(?:(?:youtube\.com\/(?:(?:v\/)|(\/u\/\w\/)|(?:(?:watch|embed\/watch)(?:\/|.*v=))|(?:embed\/)|(?:user\/[^\/]+\/u\/[0-9]\/)))|(?:youtu\.be\/))([^#&\?]*)/;
 
 import React from 'react';
-import {Link} from 'react-router';
 
 export default class YoutubeVideo extends React.Component {
     constructor(props) {
@@ -15,12 +15,15 @@ export default class YoutubeVideo extends React.Component {
 
         this.updateStateFromProps = this.updateStateFromProps.bind(this);
         this.handleReceivedMetadata = this.handleReceivedMetadata.bind(this);
+        this.handleMetadataError = this.handleMetadataError.bind(this);
 
         this.play = this.play.bind(this);
         this.stop = this.stop.bind(this);
         this.stopOnChannelChange = this.stopOnChannelChange.bind(this);
 
         this.state = {
+            loaded: false,
+            failed: global.window.mm_config.GoogleDeveloperKey === '',
             playing: false,
             title: ''
         };
@@ -78,23 +81,33 @@ export default class YoutubeVideo extends React.Component {
     }
 
     componentDidMount() {
-        if (global.window.mm_config.GoogleDeveloperKey) {
-            $.ajax({
-                async: true,
-                url: 'https://www.googleapis.com/youtube/v3/videos',
-                type: 'GET',
-                data: {part: 'snippet', id: this.state.videoId, key: global.window.mm_config.GoogleDeveloperKey},
-                success: this.handleReceivedMetadata
-            });
+        const key = global.window.mm_config.GoogleDeveloperKey;
+        if (key) {
+            WebClient.getYoutubeVideoInfo(key, this.state.videoId,
+                this.handleReceivedMetadata, this.handleMetadataError);
         }
     }
 
+    handleMetadataError() {
+        this.setState({
+            failed: true,
+            loaded: true,
+            title: Utils.localizeMessage('youtube_video.notFound', 'Video not found')
+        });
+    }
+
     handleReceivedMetadata(data) {
-        if (!data.items.length || !data.items[0].snippet) {
+        if (!data || !data.items || !data.items.length || !data.items[0].snippet) {
+            this.setState({
+                failed: true,
+                loaded: true,
+                title: Utils.localizeMessage('youtube_video.notFound', 'Video not found')
+            });
             return null;
         }
         var metadata = data.items[0].snippet;
         this.setState({
+            loaded: true,
             receivedYoutubeData: true,
             title: metadata.title
         });
@@ -120,13 +133,28 @@ export default class YoutubeVideo extends React.Component {
     }
 
     render() {
+        if (!this.state.loaded) {
+            return <div className='video-loading'/>;
+        }
+
         let header = 'Youtube';
         if (this.state.title) {
             header = header + ' - ';
         }
 
         let content;
-        if (this.state.playing) {
+        if (this.state.failed) {
+            content = (
+                <div>
+                    <div className='video-thumbnail__container'>
+                        <div className='video-thumbnail__error'>
+                            <div><i className='fa fa-warning fa-2x'/></div>
+                            <div>{Utils.localizeMessage('youtube_video.notFound', 'Video not found')}</div>
+                        </div>
+                    </div>
+                </div>
+            );
+        } else if (this.state.playing) {
             content = (
                 <iframe
                     src={'https://www.youtube.com/embed/' + this.state.videoId + '?autoplay=1&autohide=1&border=0&wmode=opaque&fs=1&enablejsapi=1' + this.state.time}
@@ -157,7 +185,15 @@ export default class YoutubeVideo extends React.Component {
             <div>
                 <h4>
                     <span className='video-type'>{header}</span>
-                    <span className='video-title'><Link to={this.props.link}>{this.state.title}</Link></span>
+                    <span className='video-title'>
+                        <a
+                            href={this.props.link}
+                            target='blank'
+                            rel='noopener noreferrer'
+                        >
+                            {this.state.title}
+                        </a>
+                    </span>
                 </h4>
                 <div
                     className='video-div embed-responsive-item'