{"version":3,"sources":["webpack:///./src/templates/video-asset-template.js"],"names":["_ref","name","styles","_ref2","_ref3","_ref4","_ref5","_ref6","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12","_ref13","VideoAssetTemplate","_ref14","data","isVideoClicked","setIsVideoClicked","useState","title","tags","ordering","videoPagePosterImage","videoUrl","description","thumbnail","patientBio","questionsToAskButton","shouldLearnAboutCalloutAppear","meta","contentfulVideoAsset","duration","videoSrc","noCookie","includes","replace","whatsNextCounter","___EmotionJSX","Layout","canonicalURL","OGTitle","OGDescription","OGImage","OGImageURL","Logo","OGUrl","OGType","type","dangerouslySetInnerHTML","__html","fluid","src","Container","css","Row","Col","lg","xl","href","onClick","ReactPlayer","width","height","url","controls","playing","config","youtube","embedOptions","host","VideoDescription","json","React","Fragment","PatientBio","bio","QuestionsToAsk","LearnAbout","allContentfulVideoAsset","edges","sort","Math","random","slice","map","_ref15","i","node","sm","WatchNextVideo","key","img","category","slug","urlSlug","nowViewing","alt"],"mappings":"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","file":"9fa0c9bf-0ea5fa1826602dae6bc4.js","sourcesContent":["import React, { useState } from \"react\"\r\nimport { useStaticQuery, graphql } from \"gatsby\"\r\nimport { Container, Row, Col } from \"react-bootstrap\"\r\nimport ReactPlayer from \"react-player\"\r\nimport { css } from \"@emotion/core\"\r\nimport PropTypes from \"prop-types\"\r\nimport Logo from \"../assets/images/header-logo.png\"\r\n\r\nimport Layout from \"../components/Layout\"\r\nimport VideoDescription from \"../components/VideoDescription\"\r\nimport PatientBio from \"../components/PatientBio\"\r\nimport LearnAbout from \"../components/about/LearnAbout\"\r\nimport QuestionsToAsk from \"../components/QuestionsToAsk\"\r\nimport WatchNextVideo from \"../components/WatchNextVideo\"\r\n\r\nconst VideoAssetTemplate = ({ data }) => {\r\n  const [isVideoClicked, setIsVideoClicked] = useState(false)\r\n  const WATCH_NEXT_MAP = {\r\n    'Newly Diagnosed': [\r\n      'Hodgkin Lymphoma – An Attentive Doctor is Key',\r\n      'Hodgkin Lymphoma - The Importance of the Doctor-Patient Relationship',\r\n      'Hodgkin Lymphoma - Becoming Your Best Advocate',\r\n      'Hodgkin Lymphoma Treatment Questions',\r\n      'Self-Advocacy During a Hodgkin Lymphoma Diagnosis '\r\n    ],\r\n    'Making Treatment Decisions': [\r\n      'Hodgkin Lymphoma - Getting a Second Opinion',\r\n      'How to Approach an Advanced Hodgkin Lymphoma Treatment Decision',\r\n      'Evaluating All Potential Hodgkin Lymphoma Treatment Options',\r\n      'Discussing Hodgkin Lymphoma Treatment Options with Your Oncologist',\r\n      'Dealing with Emotions Before Hodgkin Lymphoma Treatment'\r\n    ],\r\n    'Preparing for Treatment': [\r\n      'Preparing for Treatment Conversations with Your Oncologist ',\r\n      'Dealing with Hodgkin Lymphoma as a College Student',\r\n      'Discussing Treatment Options for Hodgkin Lymphoma',\r\n      'Life Outlook While Going Through Hodgkin Lymphoma',\r\n      'Hodgkin Lymphoma - Maintaining a Positive Mindset'\r\n    ],\r\n    'Managing Treatment': [\r\n      'Adjusting to Life After Hodgkin Lymphoma Diagnosis',\r\n      'Hodgkin Lymphoma - Value of a Strong Support System ',\r\n      'Becoming a Resource for Other Hodgkin Lymphoma Patients',\r\n      'Challenges During Hodgkin Lymphoma Treatment',\r\n      'Hodgkin Lymphoma - Positivity After Hodgkin Lymphoma Diagnosis'\r\n    ]\r\n  };\r\n\r\n  const {\r\n    title,\r\n    tags,\r\n    ordering,\r\n    videoPagePosterImage,\r\n    videoUrl,\r\n    description,\r\n    /* patientBio is an array\r\n    Patient Bio reference set to many instead of one\r\n    May be a good thing if in the future multiple bios\r\n    can be on a page. For now, the code takes the first\r\n    bio.\r\n    */\r\n    thumbnail,\r\n    patientBio,\r\n    questionsToAskButton,\r\n    shouldLearnAboutCalloutAppear,\r\n    meta,\r\n  } = data.contentfulVideoAsset\r\n\r\n  const WATCH_NEXT_LIST = WATCH_NEXT_MAP[tags[0]];\r\n  const duration = meta.duration ? meta.duration : \"PT1M30S\";\r\n  let videoSrc = videoUrl;\r\n  let noCookie = false;\r\n  if (videoUrl.includes('youtube-nocookie')) {\r\n    noCookie = true;\r\n    videoSrc = videoSrc.replace(\"youtube-nocookie\", \"youtube\");\r\n  }\r\n\r\n  let whatsNextCounter = 1;\r\n\r\n  return (\r\n    <Layout\r\n      title={meta.title}\r\n      description={meta.description}\r\n      canonicalURL={meta.canonicalURL}\r\n      OGTitle={meta.OGTitle}\r\n      OGDescription={meta.OGDescription}\r\n      OGImage={meta.OGImageURL || Logo}\r\n      OGUrl={meta.OGUrl}\r\n      OGType='Website'\r\n    >\r\n      <script type=\"application/ld+json\" dangerouslySetInnerHTML={{ __html: `{\"@context\": \"https://schema.org\",\"@type\": \"VideoObject\", \"description\": \"${meta.description}\",\"duration\": \"${duration}\",\"name\": \"${meta.OGTitle}\",\"thumbnail\": \"${thumbnail.fluid.src}\"}` }} />\r\n      <Container\r\n        css={css`\r\n          h1 {\r\n            font-size: 28px;\r\n            font-weight: bold;\r\n            line-height: 32px;\r\n            color: #69696a;\r\n            text-transform: uppercase;\r\n          }\r\n          h2 {\r\n            font-size: 28px;\r\n            font-weight: bold;\r\n            line-height: 32px;\r\n            color: #69696a;\r\n            text-transform: uppercase;\r\n          }\r\n        `}\r\n      >\r\n        <Row>\r\n          <Col lg={9} xl={8}>\r\n            <Row>\r\n              <Col\r\n                css={css`\r\n                  margin: 16px 0;\r\n                  font-size: 14px;\r\n                  line-height: 34px;\r\n                `}\r\n              >\r\n                <a\r\n                  css={css`\r\n                    color: #01aef1;\r\n                    &:hover {\r\n                      text-decoration: none;\r\n                      color: #7f3f95;\r\n                    }\r\n                  `}\r\n                  href=\"/videos/\"\r\n                >\r\n                  &lt; BACK TO VIDEO LIBRARY\r\n                </a>\r\n                {/* {\" \"}\r\n                |{\" \"}\r\n                <span\r\n                  css={css`\r\n                    text-transform: uppercase;\r\n                  `}\r\n                >\r\n                  {tags[0]}\r\n                </span> */}\r\n              </Col>\r\n            </Row>\r\n            <Row>\r\n              <Col onClick={() => setIsVideoClicked(true)}>\r\n                <div\r\n                  css={css`\r\n                    position: relative;\r\n                    padding-top: 56.25%;\r\n                    margin-bottom: 24px;\r\n                  `}\r\n                >\r\n                  <ReactPlayer\r\n                    width=\"100%\"\r\n                    height=\"100%\"\r\n                    url={videoSrc}\r\n                    controls={true}\r\n                    playing\r\n                    config={{\r\n                      youtube: {\r\n                        embedOptions: {\r\n                          host: noCookie && 'https://www.youtube-nocookie.com'\r\n                        }\r\n                      }\r\n                    }}\r\n                    css={css`\r\n                      position: absolute;\r\n                      top: 0;\r\n                      left: 0;\r\n                      .react-player__shadow {\r\n                        display: none !important;\r\n                      }\r\n                    `}\r\n                  />\r\n                </div>\r\n              </Col>\r\n            </Row>\r\n            <Row>\r\n              <Col>\r\n                <h1>{title}</h1>\r\n                <div\r\n                  css={css`\r\n                    font-size: 18px;\r\n                    line-height: 21px;\r\n                    margin-bottom: 32px;\r\n                    a {\r\n                      color: #01aef1;\r\n                      font-weight: bold;\r\n                      &:hover {\r\n                        text-decoration: none;\r\n                        color: #7f3f95;\r\n                      }\r\n                    }\r\n                  `}\r\n                >\r\n                  <VideoDescription json={description.json} />\r\n                </div>\r\n              </Col>\r\n            </Row>\r\n            {patientBio && (\r\n              <>\r\n                <Row>\r\n                  <Col>\r\n                    <PatientBio bio={patientBio[0]} />\r\n                  </Col>\r\n                </Row>\r\n              </>\r\n            )}\r\n            {questionsToAskButton ? <QuestionsToAsk /> : \"\"}\r\n            {shouldLearnAboutCalloutAppear && <LearnAbout />}\r\n          </Col>\r\n\r\n          <Col\r\n            lg={3}\r\n            xl={4}\r\n            css={css`\r\n              margin-top: 65px;\r\n              padding-bottom: 10px;\r\n              height: fit-content;\r\n              background: #eeeeee;\r\n            `}\r\n          >\r\n            <div\r\n              css={css`\r\n                padding-top: 30px;\r\n              `}\r\n            >\r\n              <h2 css={css`\r\n                margin-bottom: 20px;\r\n              `}>\r\n                Watch Next\r\n              </h2>\r\n              {/* {tags} */}\r\n              {data.allContentfulVideoAsset.edges\r\n                .sort(() => Math.random() - Math.random()).slice(0, 5)\r\n                .map(({ node }, i) => {\r\n                  if (title != node.title) {\r\n                    return (\r\n                      <Row>\r\n                        <Col\r\n                          sm={1}\r\n                          css={css`\r\n                            align-self: center;\r\n                          `}\r\n                        >\r\n                          <p\r\n                            css={css`\r\n                              color: #01aef1;\r\n                              font-size: 24px;\r\n                              margin-bottom: 10px;\r\n                            `}\r\n                          >\r\n                            {\r\n                              //i + 1\r\n                              whatsNextCounter++\r\n                            }\r\n                            {/* {title === node.title ? (\r\n                              // <img\r\n                              //   loading='lazy'\r\n                              //   css={css`\r\n                              //     color: #01aef1;\r\n                              //     text-shadow: 3px 5px 9px rgba(0, 0, 0, 0.82);\r\n                              //     font-size: 40px;\r\n                              //     ${[mq[2]]} {\r\n                              //       font-size: 30px;\r\n                              //     }\r\n                              //     path {\r\n                              //       color: inherit;\r\n                              //       text-shadow: inherit;\r\n                              //     }\r\n                              //   `}\r\n                              //   src={arrowRight}\r\n                              // />\r\n                              i + 1\r\n                            ) : (\r\n                              i + 1\r\n                            )} */}\r\n                          </p>\r\n                        </Col>\r\n                        <Col\r\n                          sm={5}\r\n                          lg={10}\r\n                          xl={5}\r\n                          css={css`\r\n                            align-self: center;\r\n                            margin-bottom: 10px;\r\n                          `}\r\n                        >\r\n                          {node.title}\r\n                        </Col>\r\n                        <Col\r\n                          sm={6}\r\n                          lg={12}\r\n                          xl={6}\r\n                          css={css`\r\n                            margin-bottom: 24px;\r\n                          `}\r\n                        >\r\n                          <WatchNextVideo\r\n                            key={`home ${node.tags[0]}`}\r\n                            img={node.thumbnail.fluid.src}\r\n                            category={node.tags[0]}\r\n                            slug={node.urlSlug}\r\n                            nowViewing={title === node.title}\r\n                            alt={meta.alt}\r\n                          />\r\n                        </Col>\r\n                      </Row>\r\n                    )\r\n                  }\r\n                })\r\n              }\r\n            </div>\r\n          </Col>\r\n        </Row>\r\n      </Container>\r\n    </Layout>\r\n  )\r\n}\r\n\r\nVideoAssetTemplate.propTypes = {\r\n  data: PropTypes.object.isRequired,\r\n}\r\n\r\nexport default VideoAssetTemplate\r\n\r\nexport const query = graphql`\r\n  query($slug: String!) {\r\n    contentfulVideoAsset(urlSlug: { eq: $slug }) {\r\n      tags\r\n      videoUrl\r\n      videoPagePosterImage {\r\n        fluid {\r\n          ...GatsbyContentfulFluid\r\n        }\r\n      }\r\n      thumbnail {\r\n        fluid {\r\n          src\r\n        }\r\n      }\r\n      title\r\n      description {\r\n        json\r\n        childContentfulRichText {\r\n          html\r\n        }\r\n      }\r\n      meta {\r\n        title\r\n        description\r\n        duration\r\n        canonicalURL\r\n        OGTitle\r\n        OGDescription\r\n        OGUrl\r\n        alt\r\n      }\r\n      patientBio {\r\n        name\r\n        ageDiagnosed\r\n        photo {\r\n          fixed {\r\n            ...GatsbyContentfulFixed\r\n          }\r\n        }\r\n        biography {\r\n          biography\r\n        }\r\n      }\r\n      questionsToAskButton\r\n      shouldLearnAboutCalloutAppear\r\n    }\r\n    allContentfulVideoAsset {\r\n      edges {\r\n        node {\r\n          id\r\n          ordering\r\n          urlSlug\r\n          videoUrl\r\n          tags\r\n          title\r\n          thumbnail {\r\n            fluid {\r\n              src\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n`\r\n"],"sourceRoot":""}