diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/youtube_video.jsx | 62 |
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' |