<commit_before>import PropTypes from 'prop-types'
import React from 'react'
import SharedImage from './Image'
import styled from 'styled-components'
import { replaceStorageUrlPrefix } from '../../utils/url'
import { getSrcSet } from '../../utils/img'

// lodash
import get from 'lodash/get'
import merge from 'lodash/merge'

const _ = {
  get,
  merge
}

const FullScreenContainer = styled.figure`
  position: relative;
  width: 100vw;
  height: 100vh;
`

const ImgPlaceholder = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(5px);
  position: absolute;
  opacity: ${props => props.toShow ? '1' : '0'};
  visibility: ${props => props.toShow ? 'visible' : 'hidden'};
  transition: opacity .5s linear, visibility .5s linear;
`

const StyledPicture = SharedImage.ImgBox.extend`
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`.withComponent('picture')

const ImgFallback = styled.div`
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: ${(props) => {
    return `url(${_.get(props, 'url')})`
  }};
  background-position: center center;
`

class FullScreenImage extends SharedImage {
  constructor(props) {
    super(props)
    this.state = {
      isObjectFit: true
    }
  }

  componentWillMount() {
    if (typeof window !== 'undefined') {
      this.setState({
        isObjectFit: 'objectFit' in _.get(document, 'documentElement.style')
      })
    }
  }

  render() {
    const { isLoaded } = this.state
    const { alt, imgSet, portraitImgSet } = this.props
    const imgSrc = replaceStorageUrlPrefix(_.get(imgSet, 'mobile.url'))
    const imgJSX = this.state.isObjectFit ? (
      <StyledPicture
        toShow={isLoaded}
      >
        <source media={`(orientation: portrait)`} srcSet={getSrcSet(portraitImgSet)} />
        <source srcSet={getSrcSet(imgSet)} />
        <img
          alt={alt}
          ref={node => { this._imgNode = node }}
          onLoad={this.onLoad}
          src={imgSrc}
        />
      </StyledPicture>
    ) : (
      <ImgFallback
        url={imgJSX}
      />
    )
    return (
      <FullScreenContainer>
        <ImgPlaceholder
          src={_.get(imgSet, 'tiny.url')}
          toShow={!isLoaded}
        />
        {imgJSX}
      </FullScreenContainer>
    )
  }
}

FullScreenImage.defaultProps = {
  alt: '',
  imgSet: {},
  portraitImgSet: {}
}

FullScreenImage.propTypes = {
  alt: PropTypes.string,
  imgSet: SharedImage.propTypes.imgSet,
  portraitImgSet: SharedImage.propTypes.imgSet
}

export default FullScreenImage<commit_msg>Render FullScreenImage by using background-image if `useBackgroundImage` prop is true<commit_after>import PropTypes from 'prop-types'
import React from 'react'
import SharedImage from './Image'
import styled from 'styled-components'
import { replaceStorageUrlPrefix } from '../../utils/url'
import { getSrcSet } from '../../utils/img'

// lodash
import get from 'lodash/get'
import merge from 'lodash/merge'

const _ = {
  get,
  merge
}

const FullScreenContainer = styled.figure`
  position: relative;
  width: 100vw;
  height: 100vh;
`

const ImgPlaceholder = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(5px);
  position: absolute;
  opacity: ${props => props.toShow ? '1' : '0'};
  visibility: ${props => props.toShow ? 'visible' : 'hidden'};
  transition: opacity .5s linear, visibility .5s linear;
`

const StyledPicture = SharedImage.ImgBox.extend`
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`.withComponent('picture')

const ImgFallback = styled.div`
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: ${(props) => {
    return `url(${_.get(props, 'url')})`
  }};
  background-position: center center;
`

class FullScreenImage extends SharedImage {
  constructor(props) {
    super(props)
    this.state = {
      isObjectFit: true
    }
  }

  componentWillMount() {
    if (typeof window !== 'undefined') {
      this.setState({
        isObjectFit: 'objectFit' in _.get(document, 'documentElement.style')
      })
    }
  }

  render() {
    const { isLoaded, isObjectFit } = this.state
    const { alt, imgSet, portraitImgSet, useBackgroundImage } = this.props
    const imgJSX = isObjectFit && !useBackgroundImage ? (
      <StyledPicture
        toShow={isLoaded}
      >
        <source media={`(orientation: portrait)`} srcSet={getSrcSet(portraitImgSet)} />
        <source srcSet={getSrcSet(imgSet)} />
        <img
          alt={alt}
          ref={node => { this._imgNode = node }}
          onLoad={this.onLoad}
          src={replaceStorageUrlPrefix(_.get(imgSet, 'mobile.url'))}
        />
      </StyledPicture>
    ) : (
      <ImgFallback
        url={replaceStorageUrlPrefix(_.get(imgSet, 'desktop.url'))}
      />
    )
    return (
      <FullScreenContainer>
        <ImgPlaceholder
          src={_.get(imgSet, 'tiny.url')}
          toShow={!isLoaded}
        />
        {imgJSX}
      </FullScreenContainer>
    )
  }
}

FullScreenImage.defaultProps = {
  alt: '',
  imgSet: {},
  useBackgroundImage: false,
  portraitImgSet: {}
}

FullScreenImage.propTypes = {
  alt: PropTypes.string,
  imgSet: SharedImage.propTypes.imgSet,
  useBackgroundImage: PropTypes.bool,
  portraitImgSet: SharedImage.propTypes.imgSet
}

export default FullScreenImage
{'fraction_non_alphanumeric': 0.13955654928265326, 'fraction_numerical': 0.010806782187441773, 'mean_word_length': 2.944158706833211, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 31, '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': '7576377', 'n_tokens_mistral': 1812, 'n_tokens_neox': 1734, 'n_words': 375}