{"version":3,"file":"js/scripts_react_shared_components_VideoModal_index_js-scripts_react_shared_hooks_useModalOptions_js.js?_t=7e01fc14a7a4b62b40d8","mappings":";;;;;;;;;;;;;;;;;AAAA;AACA;AAEA;AAEA;AACA;AAEA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIA;AAIA;AACA;AAEA;AACA;AAGA;AAEA;;;;;;;;;;;;;;;;ACnDA;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AAEA;AACA;AAwBA;AAGA;AAEA;;;;;;;;;;;;;;;;AClCA;;;;;;;;;;;;;;;;;ACAA;AACA;AAEA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AAIA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;AC3BA;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAOA;AAEA;;;;;;;;;;;;;;;;AChBA;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AAEA;AAEA;AACA;AAAA;AAEA;AAAA;AACA;AAEA;AAAA;AACA;AAEA;AAAA;AACA;AAEA;AAAA;AACA;AAGA;AAAA;AACA;AAGA;AAAA;AACA;AAGA;AAAA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAEA;;;;;;;;;;;;;;;;AC/DA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;AC/BA;;;;;;;;;;;;;;;;;;;;;;ACAA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AAAA;AACA;AAEA;AAAA;AAGA;AAAA;AAAA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AACA;AAEA;AASA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAiBA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAKA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AAAA;AAKA;AAAA;AAAA;AACA;AACA;AAAA;AAIA;AAAA;AAAA;AACA;AACA;AAAA;AAIA;AAEA;AAGA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAYA;AAMA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAIA;AAIA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAOA;;;;;;;;;;;;;;;;AClKA","sources":["webpack://@mlssoccer/netcore/./scripts/react/shared/components/AnimatedModal/AnimatedModal.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/AnimatedModal/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/BlockHeader/BlockHeader.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/BlockHeader/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/DefaultModal/DefaultModal.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/DefaultModal/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/VideoModal/VideoModal.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/VideoModal/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useModalOptions.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/CloseIcon/CloseIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/CloseIcon/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/Svg.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/index.js"],"sourcesContent":["import React from \"react\";\nimport { useTransition, config, animated } from \"react-spring\";\n\nimport { DialogOverlay, DialogContent } from \"@reach/dialog\";\n\nconst AnimatedDialogOverlay = animated(DialogOverlay);\nconst AnimatedDialogContent = animated(DialogContent);\n\nconst AnimatedModal = props => {\n  const { isOpen, onHide, focusRef = null, children, label = \"modal\", style = {}, className } = props;\n\n  const modalTransition = useTransition(!!isOpen, {\n    config: isOpen ? { ...config.stiff } : { duration: 150 },\n    from: { opacity: 0, transform: `translate3d(0px, -10px, 0px)` },\n    enter: { opacity: 1, transform: `translate3d(0px, 0px, 0px)` },\n    leave: { opacity: 0, transform: `translate3d(0px, 10px, 0px)` }\n  });\n\n  return modalTransition(\n    (styles, isOpen) =>\n      isOpen && (\n        <AnimatedDialogOverlay\n          className={className}\n          allowPinchZoom\n          initialFocusRef={focusRef}\n          onDismiss={onHide}\n          isOpen={isOpen}\n          style={{ opacity: styles.opacity }}\n        >\n          <AnimatedDialogContent\n            style={{\n              ...style,\n              ...styles\n            }}\n            aria-label={label}\n          >\n            {\n              React.Children.map(children, child => {\n                return !child\n                  ? null\n                  : typeof child.type === 'string'\n                    ? child\n                    : React.cloneElement(child);\n              })\n            }\n          </AnimatedDialogContent>\n        </AnimatedDialogOverlay>\n      )\n  );\n};\n\nexport default AnimatedModal;\n","export { default } from './AnimatedModal';\n","import React from 'react';\nimport { Chevron } from \"../../svg\";\nimport { chevronDirection } from \"../../svg/Svg\";\n\nfunction BlockHeader({ title, link, iconSize = \"medium\", ...otherProps }) {\n  return (\n    <div className=\"d3-l-grid--outer\">\n      <div className=\"d3-l-grid--inner\">\n        <div className=\"d3-l-col__col-12\">\n          <div className=\"mls-o-block-header\">\n            {\n              link\n                ? (\n                  <a {...otherProps} className=\"mls-o-block-header__title\" href={link}>\n                    {title}\n                    <Chevron direction={chevronDirection.right} size={iconSize} />\n                  </a>\n                )\n                : (\n                  <div {...otherProps} className=\"mls-o-block-header__title\">\n                    {title}\n                  </div>\n                )\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nBlockHeader = React.memo(BlockHeader);\n\nexport default BlockHeader;\n","export { default } from './BlockHeader';\n","import React from \"react\";\nimport { DialogOverlay, DialogContent } from \"@reach/dialog\";\n\nconst DefaultModal = props => {\n  const { isOpen, onHide, children, label = \"modal\", style = {}, className } = props;\n\n  return (\n    <DialogOverlay\n      className={className}\n      onDismiss={onHide}\n      isOpen={isOpen}\n    >\n      <DialogContent style={{ ...style }} aria-label={label}>\n        {\n          React.Children.map(children, child => {\n            return !child\n              ? null\n              : typeof child.type === 'string'\n                ? child\n                : React.cloneElement(child);\n          })\n        }\n      </DialogContent>\n    </DialogOverlay>\n  );\n};\n\nexport default DefaultModal;\n","export { default } from './DefaultModal';\n","import React from \"react\";\nimport CloseIcon from \"../../svg/CloseIcon\";\nimport { svgSizes } from \"../../utils\";\nimport BlockHeader from \"../BlockHeader\";\nimport BrightCoveVideoPlaylist from \"../../../brightcove-video-playlist/main\";\n\nfunction VideoModal({ closeModal, videoList, label }) {\n  return (\n    <>\n      <CloseIcon size={svgSizes.xSmall} handleClick={closeModal} wrapperElement={\"button\"} />\n      <BlockHeader title={label} />\n      <BrightCoveVideoPlaylist options={{ isAutoplay: true, videoList, disableUrlFragment: true, initialVideoPosition: 0 }} />\n    </>\n  );\n}\n\nexport default VideoModal;\n","export { default } from './VideoModal';\n","import { useReducer, useRef } from \"react\";\nimport AnimatedModal from \"../components/AnimatedModal\";\nimport DefaultModal from \"../components/DefaultModal\";\n\nexport const modalActionTypes = {\n  show: 'show',\n  modalData: 'modalData',\n  component: 'component',\n  label: 'label',\n  modalType: 'modalType',\n  modalClassName: 'modalClassName'\n};\n\nexport const modalTypes = {\n  animated: 'animated',\n  default: 'default'\n};\n\nexport function modalReducer(state, action) {\n  switch (action.type) {\n    case modalActionTypes.modalClassName: {\n      return { ...state, modalClassName: action.payload };\n    }\n    case modalActionTypes.modalType: {\n      return { ...state, modalType: action.payload };\n    }\n    case modalActionTypes.label: {\n      return { ...state, label: action.payload };\n    }\n    case modalActionTypes.component: {\n      return { ...state, component: action.payload };\n    }\n\n    case modalActionTypes.show: {\n      return { ...state, show: !state.show };\n    }\n\n    case modalActionTypes.modalData: {\n      return { ...state, modalData: action.payload };\n    }\n\n    default: {\n      throw new Error(`Unsupported Modal Options type: ${action.type}`);\n    }\n  }\n}\n\nexport function useModalOptions({ initialState, reducer = modalReducer } = {}) {\n  const { current: currentState } = useRef(initialState);\n  const [state, dispatch] = useReducer(reducer, currentState);\n\n  const { component, modalType } = state || {};\n  const Modal = modalType === modalTypes.animated ? AnimatedModal : DefaultModal;\n  const Component = component;\n\n  const updateModalOptions = ({ type, payload }) => dispatch({ type, payload });\n\n  return {\n    state,\n    Component,\n    Modal,\n    updateModalOptions,\n  };\n}\n","import React, { useState } from \"react\";\n\nfunction CloseIcon(props) {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\", ...otherProps } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      {...otherProps}\n      onClick={handleClick}\n      role=\"img\"\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--close-button icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg viewBox=\"0 0 12 12\">\n          <path\n            d=\"M1.652 10.26l8.608-8.608m-8.608 0l8.608 8.608\"\n            stroke=\"#151516\"\n            strokeWidth={1.2}\n            fill=\"none\"\n            fillRule=\"evenodd\"\n            strokeLinecap=\"square\"\n          />\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nCloseIcon = React.memo(CloseIcon);\n\nexport default CloseIcon;\n","export { default } from './CloseIcon';\n","import React from \"react\";\n\nexport const chevronDirection = {\n  down: \"down\",\n  up: \"up\",\n  left: \"left\",\n  right: \"right\",\n};\n\nexport const Chevron = ({\n  useEmptyClasses = false,\n  extraClasses,\n  direction = chevronDirection.down,\n  size = \"small\",\n}) =>\n  !useEmptyClasses ? (\n    <div\n      role=\"img\"\n      className={`mls-o-buttons__svg transform ${\n        extraClasses ? extraClasses : \"\"\n      }`}\n    >\n      <span\n        className={`oc-o-icon--chevron-${direction} fa-icon-svg fa-icon-svg--${size}`}\n      >\n        <svg\n          className=\"fa-icon-svg fa-icon-svg--chevron-down\"\n          viewBox=\"0 0 30 30\"\n        >\n          <use xlinkHref=\"#chevron-down\" />\n        </svg>\n      </span>\n    </div>\n  ) : (\n    <div role=\"img\" className={extraClasses ? extraClasses : \"\"}>\n      <svg viewBox=\"0 0 30 30\">\n        <use xlinkHref=\"#chevron-down\" />\n      </svg>\n    </div>\n  );\n\nexport const Filters = ({ extraClasses, size = \"small\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span className={`oc-o-icon--filters fa-icon-svg fa-icon-svg--${size}`}>\n      <svg className=\"fa-icon-svg fa-icon-svg--filters\" viewBox=\"0 0 23 23\">\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <path d=\"M.6.6h21.6v21.6H.6z\" />\n          <g stroke=\"#000\" transform=\"translate(4.2 4.2)\">\n            <path strokeLinecap=\"square\" d=\"M1.8.2v3m0 2.4v8.3\" />\n            <circle cx={1.8} cy={4.4} r={1} />\n            <path strokeLinecap=\"square\" d=\"M7.2 11.2v2.7M7.2.2v7.9\" />\n            <circle cx={7.2} cy={9.7} r={1} />\n            <path strokeLinecap=\"square\" d=\"M12.7.2v3m0 2.4v8.3\" />\n            <circle cx={12.7} cy={4.4} r={1} />\n          </g>\n        </g>\n      </svg>\n    </span>\n  </div>\n);\n\nexport const NoResults = ({ extraClasses, size = \"large\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span className={`oc-o-icon--no-results fa-icon-svg fa-icon-svg--${size}`}>\n      <svg className=\"fa-icon-svg fa-icon-svg--no-results\" viewBox=\"0 0 159 87\">\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <path\n            className=\"fa-icon-svg__ball\"\n            stroke=\"#000\"\n            strokeWidth={5}\n            d=\"M156.2 20a14.6 14.6 0 11-29.2 0 14.6 14.6 0 0129.2 0zm-34 17.5L74.9 85m47.5-27.5L94.8 85\"\n          />\n          <path\n            className=\"fa-icon-svg__goal\"\n            fill=\"#000\"\n            d=\"M6 0L0 6v50.8h.2L5 52V5h83.3v51.8h.1l4.9-4.9V0z\"\n          />\n        </g>\n      </svg>\n    </span>\n  </div>\n);\n\nexport const MediaPlayingSVG = ({ extraClasses, size = \"large\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span\n      className={`oc-o-icon--media-playing fa-icon-svg fa-icon-svg--${size}`}\n    >\n      <svg viewBox=\"0 0 8 8\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <path d=\"M-6-6h20v20H-6z\" />\n          <path\n            fill=\"#FFF\"\n            d=\"M.67 2H2v6H.67zM3.33 0h1.34v8H3.33zM6 4h1.33v4H6z\"\n          />\n          <g>\n            <path d=\"M-6-6h20v20H-6z\" />\n            <path\n              fill=\"#FFF\"\n              d=\"M.67 2H2v6H.67zM3.33 0h1.34v8H3.33zM6 4h1.33v4H6z\"\n            />\n          </g>\n        </g>\n      </svg>\n    </span>\n  </div>\n);\n\nexport const CardBackground = ({ extraClasses }) => (\n  <div className={extraClasses}>\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      preserveAspectRatio=\"xMinYMin slice\"\n      viewBox=\"0 0 329 218\"\n    >\n      <defs>\n        <linearGradient id=\"b\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n          <stop offset=\"0%\" stopColor=\"#FBFBFB\" />\n          <stop offset=\"100%\" stopColor=\"#F5F6F6\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient id=\"d\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n          <stop offset=\"0%\" stopColor=\"#F5F6F6\" stopOpacity=\"0\" />\n          <stop offset=\"100%\" stopColor=\"#FBFBFB\" />\n        </linearGradient>\n        <path id=\"a\" d=\"M0 0h327v218H0z\" />\n      </defs>\n      <g fill=\"none\" fillRule=\"evenodd\" transform=\"translate(1)\">\n        <mask id=\"c\" fill=\"#fff\">\n          <use xlinkHref=\"#a\" />\n        </mask>\n        <use fill=\"#E5E6E6\" fillRule=\"nonzero\" xlinkHref=\"#a\" />\n        <path\n          fill=\"url(#b)\"\n          d=\"M0-1h246l-60 214H0z\"\n          mask=\"url(#c)\"\n          opacity=\".7\"\n        />\n        <path fill=\"url(#d)\" d=\"M-2 109h84L22 323H-2z\" mask=\"url(#c)\" />\n      </g>\n    </svg>\n  </div>\n);\n\nexport const TriangleSVG = ({ extraClasses, size = \"small\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span className={`oc-o-icon--triangle fa-icon-svg fa-icon-svg--${size}`}>\n      <svg viewBox=\"0 0 4 6\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M0 0v6.04l3.5-3.02z\" fill=\"#FFF\" fillRule=\"evenodd\" />\n      </svg>\n    </span>\n  </div>\n);\n","export { Chevron } from './Svg';\n"],"names":[],"sourceRoot":""}