{"version":3,"sources":["webpack:///./src/img/blog/updates/inspect-mode-cover.png","webpack:///./src/components/ui/video-modal.js","webpack:///./src/video/updates/inspect-mode-feature-news.webm","webpack:///./src/pages/blog/inspect-mode.js"],"names":["module","exports","Container","styled","div","Box","Close","span","VideoWrapped","Video","VideoModal","props","escFunction","event","showModal","state","keyCode","closeModal","setState","openModal","window","innerWidth","componentDidMount","document","addEventListener","this","componentWillUnmount","removeEventListener","render","src","videoStyle","videoModalStyle","modal","onClick","style","width","height","autoPlay","muted","loop","webm","type","React","Component","defaultProps","Wrapped","BlogArticle","className","video1","href","frontmatter","title","url","description","author","img","date","category","group","imgSocial","process","descriptionSocial"],"mappings":"iFAAAA,EAAOC,QAAU,IAA0B,kE,mFCIrCC,EAAYC,IAAOC,IAAV,4EAAGD,CAAH,gKAaTE,EAAMF,IAAOC,IAAV,sEAAGD,CAAH,4JAYHG,EAAQH,IAAOI,KAAV,wEAAGJ,CAAH,kRAkBLK,EAAeL,IAAOC,IAAV,+EAAGD,CAAH,6EASZM,EAAQN,IAAOC,IAAV,wEAAGD,CAAH,yEAFY,KAWjBO,E,YACJ,WAAYC,GAAQ,IAAD,SACjB,cAAMA,IAAN,MAeFC,YAAc,SAACC,GACb,IAAQC,EAAc,EAAKC,MAAnBD,UAEc,KAAlBD,EAAMG,SAAkBF,GAC1B,EAAKG,cApBU,EAwBnBA,WAAa,WACX,EAAKC,SAAS,CAAEJ,WAAW,KAzBV,EA4BnBK,UAAY,WACNC,OAAOC,YAzCQ,KA0CjB,EAAKH,SAAS,CAAEJ,WAAW,KA3B7B,EAAKC,MAAQ,CACXD,WAAW,GAJI,E,4CAQnBQ,kBAAA,WACEC,SAASC,iBAAiB,UAAWC,KAAKb,aAAa,I,EAGzDc,qBAAA,WACEH,SAASI,oBAAoB,UAAWF,KAAKb,aAAa,I,EAqB5DgB,OAAA,WACE,IAAQd,EAAcW,KAAKV,MAAnBD,UACR,EAA6CW,KAAKd,MAA1CkB,EAAR,EAAQA,IAAKC,EAAb,EAAaA,WAAYC,EAAzB,EAAyBA,gBAEnBC,EACJ,kBAAC9B,EAAD,CAAW+B,QAASR,KAAKR,YACvB,kBAACX,EAAD,CAAO2B,QAASR,KAAKR,YAArB,KACA,kBAACZ,EAAD,CAAK4B,QAASR,KAAKR,YACjB,kBAACT,EAAD,CAAc0B,MAAOH,GACnB,2BAAOI,MAAM,OAAOC,OAAO,OAAOC,UAAQ,EAACC,OAAK,EAACC,MAAI,GAClDV,EAAIW,MAAQ,4BAAQX,IAAKA,EAAIW,KAAMC,KAAK,mBAOnD,OACE,oCACE,kBAAChC,EAAD,CAAOyB,MAAOJ,EAAYG,QAASR,KAAKN,WACtC,2BAAOgB,MAAM,OAAOC,OAAO,OAAOC,UAAQ,EAACC,OAAK,EAACC,MAAI,GAClDV,EAAIW,MAAQ,4BAAQX,IAAKA,EAAIW,KAAMC,KAAK,iBAG5C3B,GAAakB,I,GA3DGU,IAAMC,WAiEhBjC,MAQfA,EAAWkC,aAAe,CACxBd,WAAY,KACZC,gBAAiB,O,qBC5InB/B,EAAOC,QAAU,IAA0B,0E,kCCA3C,0JA4CM4C,EAAUC,aAnCA,WACd,OACE,6BACE,4EACgD,gDADhD,KAGA,uBAAGC,UAAU,QAAb,wPAKA,uBAAGA,UAAU,aACX,kBAAC,IAAD,CAAYlB,IAAK,CAAEW,KAAMQ,QAE3B,sGACA,4BACE,4BACE,gDADF,iLAG+B,KAE/B,4BACE,wCADF,sJAEiF,MAGnF,uBAAGD,UAAU,QAAb,gKAEsE,IACpE,uBAAGE,KAAK,+BAAR,6BAQKC,EAAc,CACzBC,MAAO,eACPC,IAAK,sBACLC,YACE,yFACFC,WACAC,QACAC,KAAM,aACNC,SAAU,kBACVC,MAAO,WAGM,4BACb,kBAACb,EAAD,CACEM,MAAOD,EAAYC,MACnBM,SAAUP,EAAYO,SACtBJ,YAAaH,EAAYG,YACzBG,KAAMN,EAAYM,KAClBF,OAAQJ,EAAYI,OACpBF,IAAKF,EAAYE,IACjBG,IAAKL,EAAYK,IACjBG,MAAOR,EAAYQ,MACnBC,UAAWC,wBAA0BV,EAAYK,IACjDM,kBAAmBX,EAAYW,mBAAqBX,EAAYG","file":"component---src-pages-blog-inspect-mode-js-dca6e30de005e88b2284.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/inspect-mode-cover-1440c5855f0d1f2fb80b355f25c49351.png\";","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 VideoWrapped = styled.div`\n  max-width: 100%;\n  max-height: 100%;\n  display: block;\n  margin: 0 auto;\n  border: none;\n`;\nconst minWidthToShow = 600;\n\nconst Video = styled.div`\n  max-width: 100%;\n  height: auto;\n\n  @media (min-width: ${minWidthToShow}px) {\n    cursor: pointer;\n  }\n`;\n\nclass VideoModal 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, videoStyle, videoModalStyle } = this.props;\n\n    const modal = (\n      <Container onClick={this.closeModal}>\n        <Close onClick={this.closeModal}>&times;</Close>\n        <Box onClick={this.closeModal}>\n          <VideoWrapped style={videoModalStyle}>\n            <video width=\"100%\" height=\"100%\" autoPlay muted loop>\n              {src.webm && <source src={src.webm} type=\"video/webm\" />}\n            </video>\n          </VideoWrapped>\n        </Box>\n      </Container>\n    );\n\n    return (\n      <>\n        <Video style={videoStyle} onClick={this.openModal}>\n          <video width=\"100%\" height=\"100%\" autoPlay muted loop>\n            {src.webm && <source src={src.webm} type=\"video/webm\" />}\n          </video>\n        </Video>\n        {showModal && modal}\n      </>\n    );\n  }\n}\n\nexport default VideoModal;\n\nVideoModal.propTypes = {\n  src: PropTypes.oneOfType([PropTypes.object]).isRequired,\n  videoStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  videoModalStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n};\n\nVideoModal.defaultProps = {\n  videoStyle: null,\n  videoModalStyle: null,\n};\n","module.exports = __webpack_public_path__ + \"static/inspect-mode-feature-news-3fc6458f289724ff4a3bb714204406d2.webm\";","import React from 'react';\n\nimport BlogArticle from 'components/blog/blogArticle';\nimport { authorPawel as author } from 'data/authors';\n\nimport img from 'img/blog/updates/inspect-mode-cover.png';\nimport video1 from 'video/updates/inspect-mode-feature-news.webm';\nimport VideoModal from 'components/ui/video-modal';\n\nconst Content = () => {\n  return (\n    <div>\n      <p>\n        We just introduced a brand new feature called <strong>inspect mode</strong>.\n      </p>\n      <p className=\"mt-5\">\n        When you’re watching a recording, you can switch to the Page Insights tab. The recording\n        will stop and you’ll be able to select a particular element. This will allow you to browse\n        recordings in which the users have interacted with this element.\n      </p>\n      <p className=\"mt-5 mb-5\">\n        <VideoModal src={{ webm: video1 }} />\n      </p>\n      <p>You can choose to browse sessions according to two different variables:</p>\n      <ul>\n        <li>\n          <strong>CSS selector</strong> – For instance, if there are different “sign up” buttons on\n          the website, you can choose to see sessions where the users have interacted with one\n          particular “sign up” button.{' '}\n        </li>\n        <li>\n          <strong>Text</strong> – When you choose to see sessions where someone has interacted with\n          the “sign up” text, it will apply to all the “sign up” buttons and hyperlinks.{' '}\n        </li>\n      </ul>\n      <p className=\"mt-3\">\n        We hope you like it! Other new improvements are coming soon. If you think something needs\n        improvement, or do you have an idea for functionality? Write to us:{' '}\n        <a href=\"mailto:hello@livesession.io\">hello@livesession.io</a>\n      </p>\n    </div>\n  );\n};\n\nconst Wrapped = BlogArticle(Content);\n\nexport const frontmatter = {\n  title: 'Inspect mode',\n  url: '/blog/inspect-mode/',\n  description:\n    \"Finding sessions with website elements' interactions it's now easier with inspect mode\",\n  author,\n  img,\n  date: '2019-11-10',\n  category: 'Product Updates',\n  group: 'updates',\n};\n\nexport default () => (\n  <Wrapped\n    title={frontmatter.title}\n    category={frontmatter.category}\n    description={frontmatter.description}\n    date={frontmatter.date}\n    author={frontmatter.author}\n    url={frontmatter.url}\n    img={frontmatter.img}\n    group={frontmatter.group}\n    imgSocial={process.env.GATSBY_HOST + frontmatter.img}\n    descriptionSocial={frontmatter.descriptionSocial || frontmatter.description}\n  />\n);\n"],"sourceRoot":""}