<commit_before>// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.

import React from 'react';

import OpenGraphStore from 'stores/opengraph_store.jsx';
import * as Utils from 'utils/utils.jsx';
import * as CommonUtils from 'utils/commons.jsx';
import {requestOpenGraphMetadata} from 'actions/global_actions.jsx';

export default class PostAttachmentOpenGraph extends React.Component {
    constructor(props) {
        super(props);
        this.imageDimentions = {  // Image dimentions in pixels.
            height: 150,
            width: 150
        };
        this.maxDescriptionLength = 300;
        this.descriptionEllipsis = '...';
        this.fetchData = this.fetchData.bind(this);
        this.onOpenGraphMetadataChange = this.onOpenGraphMetadataChange.bind(this);
        this.toggleImageVisibility = this.toggleImageVisibility.bind(this);
        this.onImageLoad = this.onImageLoad.bind(this);
    }

    componentWillMount() {
        this.setState({
            data: {},
            imageLoaded: false,
            imageVisible: this.props.previewCollapsed.startsWith('false')
        });
        this.fetchData(this.props.link);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({imageVisible: nextProps.previewCollapsed.startsWith('false')});
        if (!Utils.areObjectsEqual(nextProps.link, this.props.link)) {
            this.fetchData(nextProps.link);
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (nextState.imageVisible !== this.state.imageVisible) {
            return true;
        }
        if (nextState.imageLoaded !== this.state.imageLoaded) {
            return true;
        }
        if (!Utils.areObjectsEqual(nextState.data, this.state.data)) {
            return true;
        }
        return false;
    }

    componentDidMount() {
        OpenGraphStore.addUrlDataChangeListener(this.onOpenGraphMetadataChange);
    }

    componentDidUpdate() {
        if (this.props.childComponentDidUpdateFunction) {
            this.props.childComponentDidUpdateFunction();
        }
    }

    componentWillUnmount() {
        OpenGraphStore.removeUrlDataChangeListener(this.onOpenGraphMetadataChange);
    }

    onOpenGraphMetadataChange(url) {
        if (url === this.props.link) {
            this.fetchData(url);
        }
    }

    fetchData(url) {
        const data = OpenGraphStore.getOgInfo(url);
        this.setState({data, imageLoaded: false});
        if (Utils.isEmptyObject(data)) {
            requestOpenGraphMetadata(url);
        }
    }

    getBestImageUrl() {
        const nearestPointData = CommonUtils.getNearestPoint(this.imageDimentions, this.state.data.images, 'width', 'height');

        const bestImage = nearestPointData.nearestPoint;
        const bestImageLte = nearestPointData.nearestPointLte;  // Best image <= 150px height and width
<commit_msg>Fix JS error from some link previews (#5556)<commit_after>// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.

import React from 'react';

import OpenGraphStore from 'stores/opengraph_store.jsx';
import * as Utils from 'utils/utils.jsx';
import * as CommonUtils from 'utils/commons.jsx';
import {requestOpenGraphMetadata} from 'actions/global_actions.jsx';

export default class PostAttachmentOpenGraph extends React.Component {
    constructor(props) {
        super(props);
        this.imageDimentions = {  // Image dimentions in pixels.
            height: 150,
            width: 150
        };
        this.maxDescriptionLength = 300;
        this.descriptionEllipsis = '...';
        this.fetchData = this.fetchData.bind(this);
        this.onOpenGraphMetadataChange = this.onOpenGraphMetadataChange.bind(this);
        this.toggleImageVisibility = this.toggleImageVisibility.bind(this);
        this.onImageLoad = this.onImageLoad.bind(this);
    }

    componentWillMount() {
        this.setState({
            data: {},
            imageLoaded: false,
            imageVisible: this.props.previewCollapsed.startsWith('false')
        });
        this.fetchData(this.props.link);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({imageVisible: nextProps.previewCollapsed.startsWith('false')});
        if (!Utils.areObjectsEqual(nextProps.link, this.props.link)) {
            this.fetchData(nextProps.link);
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (nextState.imageVisible !== this.state.imageVisible) {
            return true;
        }
        if (nextState.imageLoaded !== this.state.imageLoaded) {
            return true;
        }
        if (!Utils.areObjectsEqual(nextState.data, this.state.data)) {
            return true;
        }
        return false;
    }

    componentDidMount() {
        OpenGraphStore.addUrlDataChangeListener(this.onOpenGraphMetadataChange);
    }

    componentDidUpdate() {
        if (this.props.childComponentDidUpdateFunction) {
            this.props.childComponentDidUpdateFunction();
        }
    }

    componentWillUnmount() {
        OpenGraphStore.removeUrlDataChangeListener(this.onOpenGraphMetadataChange);
    }

    onOpenGraphMetadataChange(url) {
        if (url === this.props.link) {
            this.fetchData(url);
        }
    }

    fetchData(url) {
        const data = OpenGraphStore.getOgInfo(url);
        this.setState({data, imageLoaded: false});
        if (Utils.isEmptyObject(data)) {
            requestOpenGraphMetadata(url);
        }
    }

    getBestImageUrl() {
        if (this.state.data.images == null) {
            return null;
        }

        const nearestPointData = CommonUtils.getNearestPoint(this.imageDimentions, this.state.data.images, 'width', 'height');

        const bestImage = nearestPointData.nearestPoint;
        const bestImageLte = nearestPointData.nearestPointLte;  // Best image <= 150px height and width

{'fraction_non_alphanumeric': 0.10656150360798791, 'fraction_numerical': 0.006041282094311126, 'mean_word_length': 2.6121212121212123, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5934767', 'n_tokens_mistral': 1691, 'n_tokens_neox': 1643, 'n_words': 292}