1 line
14 KiB
Plaintext
1 line
14 KiB
Plaintext
{"version":3,"sources":["components/MediaInput/MediaInputVideo/CustomPlayerComponents/PlayButton/Button.js","components/MediaInput/MediaInputVideo/CustomPlayerComponents/PlayButton/play.svg","components/MediaInput/MediaInputVideo/CustomPlayerComponents/PlayButton/Play.js","components/MediaInput/MediaInputVideo/CustomPlayerComponents/PlayButton/VjsPlayButton.js","components/MediaInput/MediaInputVideo/CustomPlayerComponents/vjsComponentUtils.js","components/MediaInput/MediaInputVideo/CustomPlayerComponents/InfoBar/InfoBar.js","components/MediaInput/MediaInputVideo/CustomPlayerComponents/InfoBar/VjsDurationInfoBar.js"],"names":["commonHoverAndFocusCss","color","hoverAndFocusCss","cssSelector","colors","DW_BLUE","css","mediaDevice","mouse","StyledButton","styled","variant","className","isA","onClick","noop","onKeyDown","children","disabled","ariaHidden","tabIndex","restProps","Tag","classnames","role","aria-hidden","e","key","keyCodes","ENTER","SPACEBAR","preventDefault","selector","LG_GRAY_13","LG_WHITE","LG_GRAY_2","LG_GRAY_11","LG_GRAY_7","DW_LIGHT_BLUE","LG_GRAY_3","LG_GRAY_6","mediaMin","mobile","_extends","Object","assign","target","i","arguments","length","source","prototype","hasOwnProperty","call","apply","this","_objectWithoutProperties","excluded","sourceKeys","keys","indexOf","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","propertyIsEnumerable","stroke","d","SvgPlay","_ref","svgRef","title","titleId","props","xmlns","viewBox","ref","id","ForwardRef","StyledPlayIcon","videoPlayButtonComponentName","vjsComponent","videojsDefault","getComponent","StyledVideoPlayButton","playerType","buttonTitle","useTranslation","VjsBigPlayButton","player","options","mount","bind","ready","play","isAudio","on","el","querySelector","focus","hide","ReactDOM","render","registerComponent","StyledInfoBar","videoDuration","Text","LG_GRAY_12","durationBarComponentName","VjsDurationInfoBar","getAttribute"],"mappings":"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","file":"static/js/player-custom.19eb3d6e.chunk.js","sourcesContent":["import classnames from 'classnames';\nimport styled, { css } from 'styled-components';\nimport { noop } from '../../../../../utils/commons';\nimport { mediaMin, colors, selector, mediaDevice } from '../../../../../utils/css';\nimport { keyCodes } from '../../../../../constants/keyCodes';\n\n// This button is the DefaultButton in ROAD. We used it as base for the VJS big play button.\nexport const Button = ({\n variant,\n className,\n isA = 'div',\n onClick = noop,\n onKeyDown = noop,\n children,\n disabled,\n 'aria-hidden': ariaHidden,\n tabIndex = disabled || ariaHidden ? -1 : 0,\n ...restProps\n}) => {\n const Tag = isA;\n\n return (\n <Tag\n className={classnames(className, variant)}\n role=\"button\"\n tabIndex={tabIndex}\n disabled={disabled}\n aria-hidden={ariaHidden}\n onClick={onClick}\n onKeyDown={e => {\n onKeyDown(e);\n if (e.key === keyCodes.ENTER || e.key === keyCodes.SPACEBAR) {\n e.key === keyCodes.SPACEBAR && e.preventDefault();\n onClick();\n }\n }}\n {...restProps}\n >\n {children}\n </Tag>\n );\n};\n\nconst commonHoverAndFocusCss = color => `\n box-shadow: 0 0 0 2px ${color} inset;\n text-decoration: none;\n`;\n\nexport const hoverAndFocusCss = ({ cssSelector = '', color = colors.DW_BLUE } = {}) => css`\n ${mediaDevice.mouse`\n &:hover${cssSelector} {\n ${commonHoverAndFocusCss(color)}\n }\n `}\n`;\n\nexport const StyledButton = styled(Button)`\n display: block;\n border: none;\n padding: 0;\n background: none;\n cursor: pointer;\n outline: none;\n ${hoverAndFocusCss()}\n\n &:disabled,\n &${selector.disabled} {\n cursor: default;\n }\n\n &${selector.disabled} {\n pointer-events: none;\n }\n\n &.primary,\n &.secondary,\n &.tertiary {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 30px;\n height: 48px;\n width: 100%;\n overflow: hidden;\n font-size: 1.4rem;\n word-break: break-word;\n color: ${colors.DW_BLUE};\n\n svg {\n fill: ${colors.DW_BLUE};\n }\n\n & > * {\n letter-spacing: 0.04rem;\n font-weight: bold;\n }\n\n &:active {\n background-color: ${colors.LG_GRAY_13};\n color: ${colors.LG_WHITE};\n box-shadow: none;\n\n svg {\n fill: ${colors.LG_WHITE};\n }\n }\n\n &:disabled,\n &${selector.disabled} {\n text-decoration: line-through;\n background-color: ${colors.LG_GRAY_2};\n color: ${colors.LG_GRAY_11};\n box-shadow: none;\n\n svg {\n fill: ${colors.LG_GRAY_7};\n }\n }\n }\n\n &.primary {\n background-color: ${colors.DW_LIGHT_BLUE};\n }\n\n &.secondary {\n background-color: ${colors.LG_GRAY_3};\n }\n\n &.tertiary {\n box-shadow: inset 0px 0px 0px 1px ${colors.LG_GRAY_6};\n ${hoverAndFocusCss()}\n }\n\n ${mediaMin.mobile`\n &.primary, &.secondary, &.tertiary {\n width: fit-content;\n margin-left: auto;\n margin-right: auto;\n }\n `}\n`;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n stroke: \"#FFF\",\n d: \"M3 .467v18.999l16-9.499z\"\n});\n\nfunction SvgPlay(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 20 20\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgPlay);\nexport default __webpack_public_path__ + \"static/media/play.e4d9e1b0.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components';\nimport { ReactComponent as PlayIcon } from './play.svg';\n\nexport const StyledPlayIcon = styled(props => <PlayIcon {...props} />)``;\n","import ReactDOM from 'react-dom';\nimport styled from 'styled-components';\nimport videojsDefault from 'video.js';\nimport { StyledButton as PlayButton } from './Button';\nimport { StyledPlayIcon as PlayIcon } from './Play';\nimport { colors } from '../../../../../utils/css';\nimport { useTranslation } from '../../../../../hooks/useTranslation';\nimport { getPlayerType } from '../vjsComponentUtils';\n\nexport const videoPlayButtonComponentName = 'vjsBigPlayButton';\n\nconst vjsComponent = videojsDefault.getComponent('Component');\n\n// eslint-disable-next-line no-unused-vars\nconst VideoPlayButton = ({ className, playerType, ...restProps }) => {\n const buttonTitle = useTranslation(`common.avplayer.button.play`);\n\n return (\n <PlayButton className={className} title={buttonTitle} {...restProps}>\n <PlayIcon />\n </PlayButton>\n );\n};\n\nconst StyledVideoPlayButton = styled(VideoPlayButton)`\n position: absolute;\n bottom: 0;\n z-index: 2;\n background-color: ${colors.DW_LIGHT_BLUE};\n padding: 15px;\n\n svg {\n fill: ${colors.LG_WHITE};\n width: 20px;\n height: 20px;\n }\n\n @media (min-width: 992px) {\n padding: 18px;\n svg {\n width: 24px;\n height: 24px;\n }\n }\n`;\n\nexport class VjsBigPlayButton extends vjsComponent {\n constructor(player, options) {\n super(player, options);\n this.mount = this.mount.bind(this);\n\n player.ready(() => {\n this.mount({\n onClick: () => player.play(),\n playerType: getPlayerType({ player }),\n });\n });\n\n player.on('play', () => {\n const playButton = player.el().querySelector('.vjs-play-control');\n playButton.focus();\n this.hide();\n });\n }\n\n mount({ onClick, playerType }) {\n ReactDOM.render(<StyledVideoPlayButton onClick={onClick} playerType={playerType} />, this.el());\n }\n}\n\nvjsComponent.registerComponent(videoPlayButtonComponentName, VjsBigPlayButton);\n","export const getPlayerType = ({ player }) => (player.isAudio() ? 'audio' : 'video');\n","import styled from 'styled-components';\nimport { colors } from '../../../../../utils/css';\nimport { StyledTextGray12 as Text } from '../../../../Text/Text';\n\nexport const InfoBar = ({ className, videoDuration }) => (\n <div className={className}>\n <div className=\"vjs-duration-text\">\n <Text>{videoDuration}</Text>\n </div>\n </div>\n);\n\nexport const StyledInfoBar = styled(InfoBar)`\n /* @noflip */\n direction: ltr;\n position: absolute;\n height: 100px;\n bottom: 0;\n width: 100%;\n z-index: 1;\n display: flex;\n align-items: flex-end;\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));\n color: ${colors.LG_GRAY_12};\n\n .vjs-duration-text {\n position: relative;\n left: 65px;\n font-size: 1.6rem;\n height: 50px;\n display: flex;\n align-items: center;\n\n & > span {\n font-size: 1.6rem;\n line-height: 0.156rem;\n letter-spacing: 0.05rem;\n }\n }\n\n @media (min-width: 992px) {\n .vjs-duration-text {\n height: 60px;\n left: 75px;\n }\n }\n`;\n","import ReactDOM from 'react-dom';\nimport videojsDefault from 'video.js';\nimport { StyledInfoBar as InfoBar } from './InfoBar';\n\nexport const durationBarComponentName = 'VjsDurationInfoBar';\n\nconst vjsComponent = videojsDefault.getComponent('Component');\n\nexport class VjsDurationInfoBar extends vjsComponent {\n constructor(player, options) {\n super(player, options);\n this.mount = this.mount.bind(this);\n\n const videoDuration = player.el().getAttribute('data-duration');\n\n player.ready(() => {\n this.mount({ videoDuration });\n });\n\n player.on('play', () => {\n this.hide();\n });\n }\n\n mount({ videoDuration }) {\n ReactDOM.render(<InfoBar videoDuration={videoDuration} />, this.el());\n }\n}\n\nvjsComponent.registerComponent(durationBarComponentName, VjsDurationInfoBar);\n"],"sourceRoot":""} |