<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { onlyUpdateForKeys } from 'recompose';
import { createComponent } from 'react-fela';
import { Image } from 'cloudinary-react';
import Placeholder from 'olymp-fela/image/placeholder';

const Container = createComponent(
  ({
    ratio,
    height,
    width,
    minWidth,
    maxWidth,
    minHeight,
    maxHeight,
    circle,
    fade,
  }) => ({
    position: 'relative',
    overflow: 'hidden',
    width,
    height,
    minWidth,
    maxWidth,
    minHeight,
    maxHeight,
    onBefore: {
      display: 'block',
      content: '""',
      width: '100%',
      height: 0,
      paddingTop: `${ratio * 100}%`,
    },
    '> img': {
      borderRadius: circle && '50%',
      zIndex: 0,
      center: true,
    },
    '> img.front': {
      zIndex: 1,
      animationDuration: '1s',
      animationIterationCount: 1,
      animationTimingFunction: 'ease-out',
      animationName: fade
        ? {
            from: { opacity: 0 },
            to: { opacity: 1 },
          }
        : null,
    },
  }),
  ({ attributes, ...p }) => <div {...p} {...attributes} />,
  ['onClick', 'onMouseEnter', 'attributes', 'style', 'className', 'children']
);

const CloudinaryImage = ({
  fade,
  value,
  mode,
  ratio,
  circle,
  className,
  onClick,
  onMouseEnter,
  attributes,
  width,
  height,
  maxWidth,
  maxHeight,
  children,
  style,
}) => {
  if (!value) {
    value = {};
  }
  const imageWidth = (value.crop && value.crop[0]) || value.width;
  const imageHeight = (value.crop && value.crop[1]) || value.height;
  const parts = value.url ? value.url.split('/') : null;
  const cloud = parts && parts[3];
  const publicId =
    parts &&
    parts
      .slice(7)
      .join('/')
      .split('.')[0];

  return (
    <Container
      fade={fade}
      onClick={onClick}
      onMouseEnter={onMouseEnter}
      width={width}
      height={height}
      maxWidth={maxWidth}
      maxHeight={maxHeight}
      ratio={ratio || imageHeight / imageWidth}
      circle={circle}
      className={className}
      attributes={attributes}
      style={style}
    >
      {children}
      {!value.url && <Placeholder height="100%" width="100%" circle={circle} />}
      {value.url && (
        <Image
          secure
          cloudName={cloud}
          publicId={publicId}
          html_width="100%"
          html_height="auto"
          responsive={false}
          transformation={{
            gravity: 'auto',
            crop: mode || 'fill',
            quality: 0,
            fetchFormat: 'auto',
            width: 4,
            aspectRatio:
              ratio || `${Math.floor(imageWidth)}:${Math.floor(imageHeight)}`,
          }}
        />
      )}
      {typeof window !== 'undefined' &&
        value.url && (
          <Image
            className="front"
            secure
            cloudName={cloud}
            publicId={publicId}
            html_width="100%"
            html_height="auto"
            responsive={typeof window !== 'undefined'}
            transformation={{
              gravity: 'auto',
              crop: mode || 'fill',
              quality: 'auto',<commit_msg>small fix in image<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { onlyUpdateForKeys } from 'recompose';
import { createComponent } from 'react-fela';
import { Image } from 'cloudinary-react';
import Placeholder from 'olymp-fela/image/placeholder';

const Container = createComponent(
  ({
    theme,
    ratio,
    height,
    width,
    minWidth,
    maxWidth,
    minHeight,
    maxHeight,
    circle,
    fade,
  }) => ({
    position: 'relative',
    overflow: 'hidden',
    width,
    height,
    minWidth,
    maxWidth,
    minHeight,
    maxHeight,
    onBefore: {
      display: 'block',
      content: '""',
      width: '100%',
      height: 0,
      paddingTop: `${ratio * 100}%`,
    },
    '> img': {
      borderRadius: circle ? '50%' : theme.borderRadius,
      zIndex: 0,
      center: true,
    },
    '> img.front': {
      zIndex: 1,
      animationDuration: '1s',
      animationIterationCount: 1,
      animationTimingFunction: 'ease-out',
      animationName: fade
        ? {
            from: { opacity: 0 },
            to: { opacity: 1 },
          }
        : null,
    },
  }),
  ({ attributes, ...p }) => <div {...p} {...attributes} />,
  ['onClick', 'onMouseEnter', 'attributes', 'style', 'className', 'children'],
);

const CloudinaryImage = ({
  fade,
  value,
  mode,
  ratio,
  circle,
  className,
  onClick,
  onMouseEnter,
  attributes,
  width,
  height,
  maxWidth,
  maxHeight,
  children,
  style,
}) => {
  if (!value) {
    value = {};
  }
  const imageWidth = (value.crop && value.crop[0]) || value.width;
  const imageHeight = (value.crop && value.crop[1]) || value.height;
  const parts = value.url ? value.url.split('/') : null;
  const cloud = parts && parts[3];
  const publicId =
    parts &&
    parts
      .slice(7)
      .join('/')
      .split('.')[0];

  return (
    <Container
      fade={fade}
      onClick={onClick}
      onMouseEnter={onMouseEnter}
      width={width}
      height={height}
      maxWidth={maxWidth}
      maxHeight={maxHeight}
      ratio={ratio || imageHeight / imageWidth}
      circle={circle}
      className={className}
      attributes={attributes}
      style={style}
    >
      {children}
      {!value.url && <Placeholder height="100%" width="100%" circle={circle} />}
      {value.url && (
        <Image
          secure
          cloudName={cloud}
          publicId={publicId}
          html_width="100%"
          html_height="auto"
          responsive={false}
          transformation={{
            gravity: 'auto',
            crop: mode || 'fill',
            quality: 0,
            fetchFormat: 'auto',
            width: 50,
            aspectRatio:
              ratio || `${Math.floor(imageWidth)}:${Math.floor(imageHeight)}`,
          }}
        />
      )}
      {typeof window !== 'undefined' &&
        value.url && (
          <Image
            className="front"
            secure
            cloudName={cloud}
            publicId={publicId}
            html_width="100%"
            html_height="auto"
            responsive={typeof window !== 'undefined'}
            transformation={{
              gravity: 'auto',
              crop: mode || 'fill',
              quality: 'auto',
{'fraction_non_alphanumeric': 0.1502486016159105, 'fraction_numerical': 0.01072094468614046, 'mean_word_length': 1.9609015639374425, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 21, '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': '7460922', 'n_tokens_mistral': 1983, 'n_tokens_neox': 1935, 'n_words': 418}