// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
const FileAttachmentList = require('./file_attachment_list.jsx');
const UserStore = require('../stores/user_store.jsx');
const Utils = require('../utils/utils.jsx');
const Constants = require('../utils/constants.jsx');
const TextFormatting = require('../utils/text_formatting.jsx');
const twemoji = require('twemoji');
const PostBodyAdditionalContent = require('./post_body_additional_content.jsx');
const providers = require('./providers.json');
export default class PostBody extends React.Component {
constructor(props) {
super(props);
this.receivedYoutubeData = false;
this.isGifLoading = false;
this.handleUserChange = this.handleUserChange.bind(this);
this.parseEmojis = this.parseEmojis.bind(this);
this.createEmbed = this.createEmbed.bind(this);
this.createGifEmbed = this.createGifEmbed.bind(this);
this.loadGif = this.loadGif.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), {size: Constants.EMOJI_SIZE});
}
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 (this.checkForOembedContent(trimmedLink)) {
post.props.oEmbedLink = trimmedLink;
post.type = 'oEmbed';
this.setState({post});
return '';
}
const embed = this.createYoutubeEmbed(link);
if (embed != null) {
return embed;
}
if (link.substring(link.length - 4) === '.gif') {
return this.createGifEmbed(link, this.state.gifLoaded);
}
return null;
}
checkForOembedContent(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 true;
}
}
}
return false;
}
loadGif(src) {
if (this.isGifLoading) {
return;
}
this.isGifLoading = true;
const gif = new Image();
gif.onload = (
() => {
this.embed = this.createGifEmbed(src, true);
this.setState({gifLoaded: true});
}
);
gif.src = src;
}
createGifEmbed(link, isLoaded) {
if (!isLoaded) {
this.loadGif(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 (
{'Commented on '}{name}{apostrophe}{' message: '} {message}
); postClass += ' post-comment'; } let loading; if (post.state === Constants.POST_FAILED) { postClass += ' post-fail'; loading = ( {'Retry'} ); } else if (post.state === Constants.POST_LOADING) { postClass += ' post-waiting'; loading = (