// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import FileAttachmentList from './file_attachment_list.jsx'; import UserStore from '../stores/user_store.jsx'; import * as Utils from '../utils/utils.jsx'; import * as Emoji from '../utils/emoticons.jsx'; import Constants from '../utils/constants.jsx'; const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; import * as TextFormatting from '../utils/text_formatting.jsx'; import twemoji from 'twemoji'; import PostBodyAdditionalContent from './post_body_additional_content.jsx'; import providers from './providers.json'; export default class PostBody extends React.Component { constructor(props) { super(props); this.receivedYoutubeData = false; this.isImgLoading = false; this.handleUserChange = this.handleUserChange.bind(this); this.parseEmojis = this.parseEmojis.bind(this); this.createEmbed = this.createEmbed.bind(this); this.createImageEmbed = this.createImageEmbed.bind(this); this.loadImg = this.loadImg.bind(this); this.createYoutubeEmbed = this.createYoutubeEmbed.bind(this); const linkData = Utils.extractLinks(this.props.post.message); const profiles = UserStore.getProfiles(); this.state = { links: linkData.links, message: linkData.text, post: this.props.post, hasUserProfiles: profiles && Object.keys(profiles).length > 1 }; } getAllChildNodes(nodeIn) { var textNodes = []; function getTextNodes(node) { textNodes.push(node); for (var i = 0, len = node.childNodes.length; i < len; ++i) { getTextNodes(node.childNodes[i]); } } getTextNodes(nodeIn); return textNodes; } parseEmojis() { twemoji.parse(ReactDOM.findDOMNode(this), { className: 'emoji twemoji', base: '', folder: Emoji.getImagePathForEmoticon() }); } componentWillMount() { if (this.props.post.filenames.length === 0 && this.state.links && this.state.links.length > 0) { this.embed = this.createEmbed(this.state.links[0]); } } componentDidMount() { this.parseEmojis(); UserStore.addChangeListener(this.handleUserChange); } componentDidUpdate() { this.parseEmojis(); } componentWillUnmount() { UserStore.removeChangeListener(this.handleUserChange); } handleUserChange() { if (!this.state.hasProfiles) { const profiles = UserStore.getProfiles(); this.setState({hasProfiles: profiles && Object.keys(profiles).length > 1}); } } componentWillReceiveProps(nextProps) { const linkData = Utils.extractLinks(nextProps.post.message); if (this.props.post.filenames.length === 0 && this.state.links && this.state.links.length > 0) { this.embed = this.createEmbed(linkData.links[0]); } this.setState({links: linkData.links, message: linkData.text}); } createEmbed(link) { const post = this.state.post; if (!link) { if (post.type === 'oEmbed') { post.props.oEmbedLink = ''; post.type = ''; } return null; } const trimmedLink = link.trim(); if (Utils.isFeatureEnabled(PreReleaseFeatures.EMBED_PREVIEW)) { const provider = this.getOembedProvider(trimmedLink); if (provider != null) { post.props.oEmbedLink = trimmedLink; post.type = 'oEmbed'; this.setState({post, provider}); return ''; } } const embed = this.createYoutubeEmbed(link); if (embed != null) { return embed; } for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) { const imageType = Constants.IMAGE_TYPES[i]; const suffix = link.substring(link.length - (imageType.length + 1)); if (suffix === '.' + imageType || suffix === '=' + imageType) { return this.createImageEmbed(link, this.state.imgLoaded); } } return null; } getOembedProvider(link) { for (let i = 0; i < providers.length; i++) { for (let j = 0; j < providers[i].patterns.length; j++) { if (link.match(providers[i].patterns[j])) { return providers[i]; } } } return null; } loadImg(src) { if (this.isImgLoading) { return; } this.isImgLoading = true; const img = new Image(); img.onload = ( () => { this.embed = this.createImageEmbed(src, true); this.setState({imgLoaded: true}); } ); img.src = src; } createImageEmbed(link, isLoaded) { if (!isLoaded) { this.loadImg(link); return ( ); } return ( ); } handleYoutubeTime(link) { const timeRegex = /[\\?&]t=([0-9hms]+)/; const time = link.match(timeRegex); if (!time || !time[1]) { return ''; } const hours = time[1].match(/([0-9]+)h/); const minutes = time[1].match(/([0-9]+)m/); const seconds = time[1].match(/([0-9]+)s/); let ticks = 0; if (hours && hours[1]) { ticks += parseInt(hours[1], 10) * 3600; } if (minutes && minutes[1]) { ticks += parseInt(minutes[1], 10) * 60; } if (seconds && seconds[1]) { ticks += parseInt(seconds[1], 10); } return '&start=' + ticks.toString(); } createYoutubeEmbed(link) { const ytRegex = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|watch\?(?:[a-zA-Z-_]+=[a-zA-Z0-9-_]+&)+v=)([^#\&\?]*).*/; const match = link.trim().match(ytRegex); if (!match || match[1].length !== 11) { return null; } const youtubeId = match[1]; const time = this.handleYoutubeTime(link); function onClick(e) { var div = $(e.target).closest('.video-thumbnail__container')[0]; var iframe = document.createElement('iframe'); iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.id + '?autoplay=1&autohide=1&border=0&wmode=opaque&fs=1&enablejsapi=1' + time); iframe.setAttribute('width', '480px'); iframe.setAttribute('height', '360px'); iframe.setAttribute('type', 'text/html'); iframe.setAttribute('frameborder', '0'); iframe.setAttribute('allowfullscreen', 'allowfullscreen'); div.parentNode.replaceChild(iframe, div); } function success(data) { if (!data.items.length || !data.items[0].snippet) { return null; } var metadata = data.items[0].snippet; this.receivedYoutubeData = true; this.setState({youtubeTitle: metadata.title}); } if (global.window.mm_config.GoogleDeveloperKey && !this.receivedYoutubeData) { $.ajax({ async: true, url: 'https://www.googleapis.com/youtube/v3/videos', type: 'GET', data: {part: 'snippet', id: youtubeId, key: global.window.mm_config.GoogleDeveloperKey}, success: success.bind(this) }); } let header = 'Youtube'; if (this.state.youtubeTitle) { header = header + ' - '; } return (