<commit_before>// @flow
import React from 'react';
import { parseURI } from 'lbry-redux';
import classnames from 'classnames';
import Gerbil from './gerbil.png';
import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';

type Props = {
  thumbnail: ?string,
  uri: ?string,
  className?: string,
  thumbnailPreview: ?string,
  obscure?: boolean,
  small?: boolean,
  allowGifs?: boolean,
  claim: ?ChannelClaim,
  doResolveUri: string => void,
  isResolving: boolean,
  showDelayedMessage?: boolean,
};

function ChannelThumbnail(props: Props) {
  const {
    thumbnail: rawThumbnail,
    uri,
    className,
    thumbnailPreview: rawThumbnailPreview,
    obscure,
    small = false,
    allowGifs = false,
    claim,
    doResolveUri,
    isResolving,
    showDelayedMessage = false,
  } = props;
  const [thumbError, setThumbError] = React.useState(false);
  const shouldResolve = claim === undefined;
  const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
  const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
  const channelThumbnail = thumbnail || thumbnailPreview;
  const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
  // Generate a random color class based on the first letter of the channel name
  const { channelName } = parseURI(uri);
  let initializer;
  let colorClassName;
  if (channelName) {
    initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
    colorClassName = `channel-thumbnail__default--${Math.abs(initializer % 4)}`;
  } else {
    colorClassName = `channel-thumbnail__default--4`;
  }

  React.useEffect(() => {
    if (shouldResolve && uri) {
      doResolveUri(uri);
    }
  }, [doResolveUri, shouldResolve, uri]);

  if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
    return <FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)} />;
  }

  return (
    <div
      className={classnames('channel-thumbnail', className, {
        [colorClassName]: !showThumb,
        'channel-thumbnail--small': small,
        'channel-thumbnail--resolving': isResolving,
      })}
    >
      {!showThumb && (
        <img
          alt={__('Channel profile picture')}
          className="channel-thumbnail__default"
          src={thumbnailPreview || Gerbil}
        />
      )}
      {showThumb && (
        <>
          {showDelayedMessage && thumbError ? (
            <div className="chanel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
          ) : (
            <img
              alt={__('Channel profile picture')}
              className="channel-thumbnail__custom"
              src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
              onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
            />
          )}
        </>
      )}
    </div>
  );
}

export default ChannelThumbnail;<commit_msg>Display default image for channel thumbnail on error<commit_after>// @flow
import React from 'react';
import { parseURI } from 'lbry-redux';
import classnames from 'classnames';
import Gerbil from './gerbil.png';
import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';

type Props = {
  thumbnail: ?string,
  uri: ?string,
  className?: string,
  thumbnailPreview: ?string,
  obscure?: boolean,
  small?: boolean,
  allowGifs?: boolean,
  claim: ?ChannelClaim,
  doResolveUri: string => void,
  isResolving: boolean,
  showDelayedMessage?: boolean,
};

function ChannelThumbnail(props: Props) {
  const {
    thumbnail: rawThumbnail,
    uri,
    className,
    thumbnailPreview: rawThumbnailPreview,
    obscure,
    small = false,
    allowGifs = false,
    claim,
    doResolveUri,
    isResolving,
    showDelayedMessage = false,
  } = props;
  const [thumbError, setThumbError] = React.useState(false);
  const shouldResolve = claim === undefined;
  const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
  const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
  const channelThumbnail = thumbnail || thumbnailPreview;
  const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
  // Generate a random color class based on the first letter of the channel name
  const { channelName } = parseURI(uri);
  let initializer;
  let colorClassName;
  if (channelName) {
    initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
    colorClassName = `channel-thumbnail__default--${Math.abs(initializer % 4)}`;
  } else {
    colorClassName = `channel-thumbnail__default--4`;
  }

  React.useEffect(() => {
    if (shouldResolve && uri) {
      doResolveUri(uri);
    }
  }, [doResolveUri, shouldResolve, uri]);

  if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
    return <FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)} />;
  }

  return (
    <div
      className={classnames('channel-thumbnail', className, {
        [colorClassName]: !showThumb,
        'channel-thumbnail--small': small,
        'channel-thumbnail--resolving': isResolving,
      })}
    >
      {!showThumb && (
        <img
          alt={__('Channel profile picture')}
          className="channel-thumbnail__default"
          src={!thumbError && thumbnailPreview ? thumbnailPreview : Gerbil}
          onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
        />
      )}
      {showThumb && (
        <>
          {showDelayedMessage && thumbError ? (
            <div className="chanel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
          ) : (
            <img
              alt={__('Channel profile picture')}
              className="channel-thumbnail__custom"
              src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
              onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
            />
          )}
        </>
      )}
    </div>
  );
}

export default ChannelThumbnail;
{'fraction_non_alphanumeric': 0.13266283524904215, 'fraction_numerical': 0.002554278416347382, 'mean_word_length': 3.0708252111760883, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 28, 'https://': 4, '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': '4109830', 'n_tokens_mistral': 1889, 'n_tokens_neox': 1876, 'n_words': 430}