{"version":3,"sources":["webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/pages/help/what-is-a-session.js","webpack:///./src/components/ui/image-modal.js","webpack:///./src/img/help/what-is-a-session/expires.svg","webpack:///./src/img/help/what-is-a-session/whatisasession.svg","webpack:///./src/img/help/what-is-a-session/whatisasession-2.svg"],"names":["Card","styled","div","props","setMarginBottom","media","desktop","CardBody","HelpImage","cardStyle","className","style","defaultProps","related","link","title","description","frontmatter","metaTitle","metaDescription","canonical","Wrapped","Article","href","target","rel","src","img1","imgStyle","padding","boxShadow","border","imgModalStyle","img3","img2","section","Container","Box","Close","span","ImageWrapped","img","Image","ImageModal","escFunction","event","showModal","state","keyCode","closeModal","setState","openModal","window","innerWidth","componentDidMount","document","addEventListener","this","componentWillUnmount","removeEventListener","render","alt","lazy","modal","onClick","loading","React","Component","module","exports"],"mappings":"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","file":"component---src-pages-help-what-is-a-session-js-f939cd09e9b9f29ee6c1.js","sourcesContent":["import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\n\nexport const Card = styled.div`\n  margin: ${(props) => (props.setMarginBottom ? '2rem 0' : '2rem 0 3rem')};\n  border: none;\n\n  ${media.desktop} {\n    margin: ${(props) => (props.setMarginBottom ? '1.25rem 0' : '1.25rem 0 2rem')};\n  }\n`;\n\nexport const CardBody = styled.div`\n  box-shadow: 0px 0px 10px #00000029;\n  padding: 0;\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ImageModal from 'components/ui/image-modal';\nimport * as Styled from './styled';\n\nconst HelpImage = (props) => {\n  const { cardStyle, setMarginBottom } = props;\n  return (\n    <Styled.Card className=\"card\" style={cardStyle} setMarginBottom={setMarginBottom}>\n      <Styled.CardBody className=\"card-body\" style={cardStyle}>\n        <ImageModal {...props} />\n      </Styled.CardBody>\n    </Styled.Card>\n  );\n};\n\nexport default HelpImage;\n\nHelpImage.propTypes = {\n  cardStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  setMarginBottom: PropTypes.bool,\n};\n\nHelpImage.defaultProps = {\n  cardStyle: null,\n  setMarginBottom: false,\n};\n","import React from 'react';\nimport Article from 'components/help/helpArticle';\nimport Image from 'components/help/helpImage';\nimport img1 from 'img/help/what-is-a-session/whatisasession.svg';\nimport img2 from 'img/help/what-is-a-session/whatisasession-2.svg';\nimport img3 from 'img/help/what-is-a-session/expires.svg';\n\nconst Content = () => {\n  return (\n    <div>\n      <p>A session is a set of the user’s interactions with a website within a timeframe. </p>\n      <p>The session begins when a user visits the website and does one of these things:</p>\n      <ul>\n        <li>scrolls</li>\n        <li>moves a cursor</li>\n        <li>clicks something (on desktop)</li>\n        <li>taps something (on mobile)</li>\n      </ul>\n      <p>\n        One session can contain many clicks, scrolls, page views and other events. What’s more, one\n        user can open multiple sessions, either within one day or over a longer time span.\n      </p>\n      <p>These events are recorded as a part of a session:</p>\n      <ul>\n        <li>mouse movements and clicks</li>\n        <li>mobile touches and taps</li>\n        <li>window resizing and scrolling</li>\n        <li>focusing and blurring elements</li>\n        <li>text selection</li>\n        <li>\n          input value changes (if{' '}\n          <a\n            href=\"https://livesession.io/help/how-to-record-keystrokes/\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            {' '}\n            keystroke logging\n          </a>{' '}\n          is enabled)\n        </li>\n        <li>CSS changes</li>\n        <li>URL changes</li>\n        <li>\n          <a\n            href=\"https://en.wikipedia.org/wiki/Document_Object_Model\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            DOM\n          </a>{' '}\n          mutations\n        </li>\n      </ul>\n      <p>\n        When one session ends, another one can be started. By default, a{' '}\n        <strong>session ends after 30 minutes of inactivity</strong>.\n      </p>\n      <p>\n        Let’s say a user, John, arrives on your website at 11:25 and does one of the actions\n        mentioned above. If he doesn’t do anything after that, the session will end automatically at\n        11:55. If he continues to interact with the website and the last event takes place at 12:27,\n        the session will end automatically at 12:57.{' '}\n      </p>\n      <Image\n        src={img1}\n        imgStyle={{ padding: '20px', boxShadow: 'none', border: 'none' }}\n        imgModalStyle={{ boxShadow: 'none', border: 'none' }}\n        cardStyle={{ boxShadow: 'none', border: 'none' }}\n      />\n      <p>\n        The session is set to <strong>expire after 30 minutes of inactivity</strong>. This means\n        that:\n      </p>\n      <ul>\n        <li>\n          <p>\n            If John leaves the page open, goes for a coffee break and comes back{' '}\n            <strong>29 minutes later</strong>, it stills <strong>counts as one session</strong> –\n            just like he never left the website.\n          </p>\n          <Image\n            src={img3}\n            imgStyle={{ padding: '20px', boxShadow: 'none', border: 'none' }}\n            imgModalStyle={{ boxShadow: 'none', border: 'none' }}\n            cardStyle={{ boxShadow: 'none', border: 'none' }}\n          />\n        </li>\n        <li>\n          <p>\n            If John leaves the page open, goes for a coffee break and comes back{' '}\n            <strong>31 minutes later, a new session starts</strong>. The landing page of that\n            session is the last page of the previous session.\n          </p>\n          <Image\n            src={img2}\n            imgStyle={{ padding: '20px', boxShadow: 'none', border: 'none' }}\n            imgModalStyle={{ boxShadow: 'none', border: 'none' }}\n            cardStyle={{ boxShadow: 'none', border: 'none' }}\n          />\n        </li>\n      </ul>\n    </div>\n  );\n};\n\nconst related = [\n  {\n    link: '/help/how-livesession-script-works/',\n    title: 'How LiveSession tracking script works',\n    description: 'Understand what our tracking code tracks',\n  },\n];\n\nexport const frontmatter = {\n  metaTitle: 'What is a session?',\n  metaDescription:\n    'A session is a set of the user’s interactions with a website within a timeframe.',\n  canonical: '/help/what-is-a-session/',\n};\n\nconst Wrapped = Article(Content);\n\nexport default () => (\n  <Wrapped related={related} section=\"Product\" title={frontmatter.metaTitle} {...frontmatter} />\n);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  top: 0;\n  left: 0;\n  position: fixed;\n  width: 100%;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 99999;\n`;\n\nconst Box = styled.div`\n  background-color: transparent;\n  position: relative;\n  width: 95vw;\n  height: 95vh;\n  padding: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n`;\n\nconst Close = styled.span`\n  position: absolute;\n  font-size: 1.8rem;\n  right: 20px;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: #fff;\n  border-radius: 100px;\n  width: 40px;\n  height: 40px;\n  padding-bottom: 3px;\n  filter: drop-shadow(5px 1px 4px rgba(0, 0, 0, 0.2));\n  z-index: 10;\n`;\n\nconst ImageWrapped = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n  display: block;\n  margin: 0 auto;\n  border: none;\n`;\nconst minWidthToShow = 600;\n\nconst Image = styled.img`\n  border: 1px solid #eaebec;\n  max-width: 100%;\n  height: auto;\n\n  @media (min-width: ${minWidthToShow}px) {\n    cursor: pointer;\n  }\n`;\n\nclass ImageModal extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showModal: false,\n    };\n  }\n\n  componentDidMount() {\n    document.addEventListener('keydown', this.escFunction, false);\n  }\n\n  componentWillUnmount() {\n    document.removeEventListener('keydown', this.escFunction, false);\n  }\n\n  escFunction = (event) => {\n    const { showModal } = this.state;\n\n    if (event.keyCode === 27 && showModal) {\n      this.closeModal();\n    }\n  };\n\n  closeModal = () => {\n    this.setState({ showModal: false });\n  };\n\n  openModal = () => {\n    if (window.innerWidth >= minWidthToShow) {\n      this.setState({ showModal: true });\n    }\n  };\n\n  render() {\n    const { showModal } = this.state;\n    const { src, imgStyle, imgModalStyle, alt, title, lazy } = this.props;\n\n    const modal = (\n      <Container onClick={this.closeModal}>\n        <Close onClick={this.closeModal}>&times;</Close>\n        <Box onClick={this.closeModal}>\n          <ImageWrapped\n            style={imgModalStyle}\n            src={src}\n            alt={alt}\n            title={title}\n            loading={lazy ? 'lazy' : null}\n          />\n        </Box>\n      </Container>\n    );\n\n    return (\n      <>\n        <Image\n          style={imgStyle}\n          onClick={this.openModal}\n          src={src}\n          alt={alt}\n          title={title}\n          loading={lazy ? 'lazy' : null}\n        />\n        {showModal && modal}\n      </>\n    );\n  }\n}\n\nexport default ImageModal;\n\nImageModal.propTypes = {\n  src: PropTypes.string.isRequired,\n  imgStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n  imgModalStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n  alt: PropTypes.string.isRequired,\n  title: PropTypes.string.isRequired,\n  lazy: PropTypes.bool,\n};\n\nImageModal.defaultProps = {\n  lazy: false,\n  imgStyle: null,\n  imgModalStyle: null,\n};\n","module.exports = __webpack_public_path__ + \"static/expires-c9d9b5ddcd644ec4fd579e7bc5546918.svg\";","module.exports = __webpack_public_path__ + \"static/whatisasession-cebe2a036abb4f94fe6d7dd1905918f4.svg\";","module.exports = __webpack_public_path__ + \"static/whatisasession-2-2761779f35dcaa3c8fa1173835d080e6.svg\";"],"sourceRoot":""}