{"version":3,"file":"static/js/82ac7f1f62dd7171aee3.bundle.js","mappings":"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","sources":["webpack://Msdyn365.Commerce.Online/./src/modules/mod-video-player/components/additional-content.tsx?1c7b","webpack://Msdyn365.Commerce.Online/./src/modules/mod-video-player/mod-video-player.tsx?6c7e","webpack://Msdyn365.Commerce.Online/./src/modules/mod-video-player/mod-video-player.view.tsx?e636","webpack://Msdyn365.Commerce.Online/./lib/mod-video-player/module-registration.js?ff94","webpack://Msdyn365.Commerce.Online/external var \"React\"?0d3b","webpack://Msdyn365.Commerce.Online/external var \"ReactDOM\"?853b"],"sourcesContent":["/*!\r\n * Copyright (c) Microsoft Corporation.\r\n * All rights reserved. See LICENSE in the project root for license information.\r\n */\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\nimport { INodeProps } from '@msdyn365-commerce-modules/utilities';\r\nimport * as React from 'react';\r\n\r\nimport { IAdditionalContentData, ILinksData } from '../mod-video-player.props.autogenerated';\r\n\r\n/**\r\n * IVideoPlayerAdditionalContentProps: Interface for\r\n * Video Player Additional Content Component props.\r\n */\r\nexport interface IVideoPlayerAdditionalContentProps {\r\n requestContext: Msdyn365.IRequestContext;\r\n additionalContent: IAdditionalContentData | undefined;\r\n handleAdditionalTextChange(event: Msdyn365.ContentEditableEvent): void;\r\n handleAdditionalParagraphChange(event: Msdyn365.ContentEditableEvent): void;\r\n handleAdditionalLinkTextChange(linkIndex: number, event: Msdyn365.ContentEditableEvent): void;\r\n}\r\n\r\n/**\r\n * IVideoPlayerAdditionalContentProps: Interface for\r\n * Video Player Additional Content view props.\r\n */\r\nexport interface IVideoPlayerAdditionalContentViewProps {\r\n additionalContentNode: INodeProps;\r\n additionalContentItems?: IVideoPlayerAdditionalContentItemViewProps;\r\n}\r\n\r\n/**\r\n * IVideoPlayerAdditionalContentProps: Interface for\r\n * Video Player Additional Content Item view props.\r\n */\r\nexport interface IVideoPlayerAdditionalContentItemViewProps {\r\n heading: React.ReactNode;\r\n text: React.ReactNode;\r\n links: React.ReactNode;\r\n additionalContentItemContainer: INodeProps;\r\n additionalContentItemLinks: INodeProps;\r\n}\r\n\r\n/**\r\n * Renders additional content heading.\r\n * @param additionalContentHeading - Additional content heading.\r\n * @param props - Video Player Additional content component props.\r\n * @returns Heading Node.\r\n */\r\nconst renderHeading = (additionalContentHeading: string, props: IVideoPlayerAdditionalContentProps) => {\r\n const requestContext = props.requestContext;\r\n return (\r\n {\r\n props.handleAdditionalTextChange(event);\r\n },\r\n requestContext\r\n }}\r\n />\r\n );\r\n};\r\n\r\n/**\r\n * Renders additional content heading.\r\n * @param additionalContentParagraphText - Additional content paragraph text.\r\n * @param props - Video Player Additional content component props.\r\n * @returns Paragraph Node.\r\n */\r\nconst renderParagraph = (additionalContentParagraphText: string, props: IVideoPlayerAdditionalContentProps) => {\r\n const requestContext = props.requestContext;\r\n return (\r\n {\r\n props.handleAdditionalParagraphChange(event);\r\n },\r\n requestContext\r\n }}\r\n />\r\n );\r\n};\r\n\r\n/**\r\n * Renders additional content heading.\r\n * @param ctaLink - Additional content link.\r\n * @param props - Video Player Additional content component props.\r\n * @param linkIndex - Additional content link index.\r\n * @returns Link Node.\r\n */\r\nconst renderLinks = (ctaLink: ILinksData, props: IVideoPlayerAdditionalContentProps, linkIndex: number) => {\r\n const editableLink: Msdyn365.ILinksData = {\r\n ariaLabel: ctaLink.ariaLabel,\r\n className: 'ms-video-player__details__additional-content__cta__links',\r\n linkText: ctaLink.linkText,\r\n linkUrl: ctaLink.linkUrl.destinationUrl,\r\n openInNewTab: ctaLink.openInNewTab,\r\n role: 'link'\r\n };\r\n const requestContext = props.requestContext;\r\n return (\r\n {\r\n props.handleAdditionalLinkTextChange(linkIndex, event);\r\n },\r\n requestContext\r\n }}\r\n />\r\n );\r\n};\r\n\r\n/**\r\n * Create node for each additonal content item.\r\n * @param item - Video Player additonal content item props.\r\n * @param props - Video Player Additional content component props.\r\n * @returns IVideoPlayerAdditionalContentItemViewProps.\r\n */\r\nconst getAdditionalContentItems = (\r\n item: IAdditionalContentData,\r\n props: IVideoPlayerAdditionalContentProps\r\n): IVideoPlayerAdditionalContentItemViewProps => {\r\n const headingNode = item.heading && renderHeading(item.heading, props);\r\n const paragraphNode = item.subtext && renderParagraph(item.subtext, props);\r\n const linksNode = item.links?.map((ctaLink: ILinksData, index: number) => {\r\n return renderLinks(ctaLink, props, index);\r\n });\r\n\r\n return {\r\n heading: headingNode,\r\n text: paragraphNode,\r\n links: linksNode,\r\n additionalContentItemContainer: { className: 'ms-video-player__details__additional-content__container' },\r\n additionalContentItemLinks: { className: 'ms-video-player__details__additional-content__cta' }\r\n };\r\n};\r\n\r\n/**\r\n * VideoPlayerAdditionalContent component.\r\n * @param props - Video Player Additional content component props.\r\n * @returns Video Player Additional content view props.\r\n */\r\nexport const videoPlayerAdditionalContent = (\r\n props: IVideoPlayerAdditionalContentProps\r\n): IVideoPlayerAdditionalContentViewProps | undefined => {\r\n const { additionalContent } = props;\r\n if (!additionalContent) {\r\n return undefined;\r\n }\r\n\r\n const reactNodes: IVideoPlayerAdditionalContentItemViewProps = getAdditionalContentItems(additionalContent, props);\r\n return {\r\n additionalContentNode: { className: 'ms-video-player__details__additional-content' },\r\n additionalContentItems: reactNodes\r\n };\r\n};\r\n","/*!\r\n * Copyright (c) Microsoft Corporation.\r\n * All rights reserved. See LICENSE in the project root for license information.\r\n */\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport { IPlayerData, IPlayerOptions, IPlayerResources, IVideoMetadata, Player } from '@msdyn365-commerce/components';\r\nimport * as MsDyn365 from '@msdyn365-commerce/core';\r\nimport {\r\n getPayloadObject,\r\n getTelemetryAttributes,\r\n getTelemetryObject,\r\n INodeProps,\r\n isMobile,\r\n ITelemetryContent,\r\n VariantType\r\n} from '@msdyn365-commerce-modules/utilities';\r\nimport * as React from 'react';\r\n\r\nimport { IVideoPlayerAdditionalContentViewProps, videoPlayerAdditionalContent } from './components/additional-content';\r\nimport { ILinksData, IModVideoPlayerConfig, IModVideoPlayerProps } from './mod-video-player.props.autogenerated';\r\n\r\nexport interface IVideoPlayerViewProps extends IModVideoPlayerProps<{}> {\r\n posterUrl?: string;\r\n player: React.ReactNode;\r\n title?: React.ReactNode;\r\n text?: React.ReactNode;\r\n links?: React.ReactNode;\r\n detailsContainer?: INodeProps;\r\n detailsContainerCta?: INodeProps;\r\n additionalContent?: IVideoPlayerAdditionalContentViewProps;\r\n handleText?(): void;\r\n handleParagraph?(): void;\r\n handleAdditionalText?(): void;\r\n handleAdditionalParagraph?(): void;\r\n handleLink?(): void;\r\n handleAdditionalLink?(): void;\r\n}\r\n\r\n/**\r\n *\r\n * VideoPlayer component.\r\n * @extends {React.PureComponent>}\r\n */\r\nclass VideoPlayer extends React.PureComponent> {\r\n private readonly telemetryContent: ITelemetryContent;\r\n\r\n private readonly isMobileDevice: boolean;\r\n private readonly playerRef: React.LegacyRef = React.createRef();\r\n\r\n public constructor(props: IModVideoPlayerProps) {\r\n super(props);\r\n this.isMobileDevice = isMobile({ variant: VariantType.Viewport, context: this.props.context.request }) === 'xs';\r\n this.telemetryContent = getTelemetryObject(\r\n this.props.context.request.telemetryPageName!,\r\n this.props.friendlyName,\r\n this.props.telemetry\r\n );\r\n }\r\n\r\n public render(): JSX.Element {\r\n const options = {\r\n ...this.props.config,\r\n isMobileDevice: this.isMobileDevice\r\n };\r\n const video: MsDyn365.IVideoData = this.props.config.video;\r\n const playerResources: IPlayerResources = {\r\n playAriaLabel: this.props.resources.playLabel,\r\n pauseAriaLabel: this.props.resources.pauseLabel,\r\n playingAriaLabel: this.props.resources.playingLabel,\r\n pausedAriaLabel: this.props.resources.pausedLabel,\r\n muteAriaLabel: this.props.resources.muteLabel,\r\n unMuteAriaLabel: this.props.resources.unMuteLabel,\r\n fullScreenAriaLabel: this.props.resources.fullScreenLabel,\r\n exitFullScreenAriaLabel: this.props.resources.exitFullScreenLabel,\r\n seekBarLabel: this.props.resources.seekBarLabel,\r\n videoTimeDurationLabel: this.props.resources.videoTimeDurationLabel,\r\n closedCaptionLabel: this.props.resources.closedCaptionLabel\r\n };\r\n const videoMetaData: IVideoMetadata = {};\r\n\r\n if (video) {\r\n videoMetaData.videoId = video.id;\r\n videoMetaData.title = video.title;\r\n videoMetaData.duration = video.playTime;\r\n\r\n if (video.thumbnail) {\r\n videoMetaData.posterframeUrl = video.thumbnail.src;\r\n }\r\n\r\n if (video._links?.binaryReferences) {\r\n videoMetaData.videoBinaryReferences = video._links.binaryReferences;\r\n }\r\n }\r\n const videoPlayerData: IPlayerData = { options: options as IPlayerOptions, metaData: videoMetaData };\r\n const viewProps = {\r\n // Context for telemetry and raw data for C1 to do customization\r\n // Including computed data, state data and methods\r\n ...this.props,\r\n playerRef: this.playerRef,\r\n player: (\r\n \r\n \r\n \r\n ),\r\n posterUrl: videoMetaData.posterframeUrl,\r\n title: this._getVideoDetailsHeading(),\r\n text: this._getVideoDetailsParagraph(),\r\n links: this._getVideoDetailsLinks(),\r\n detailsContainer: { className: 'ms-video-player__details' },\r\n detailsContainerCTA: { className: 'ms-video-player__details__cta' },\r\n additionalContent: videoPlayerAdditionalContent({\r\n requestContext: this.props.context.request,\r\n additionalContent: this.props.config.additionalContent,\r\n handleAdditionalTextChange: this.handleAdditionalTextChange,\r\n handleAdditionalParagraphChange: this.handleAdditionalParagraphChange,\r\n handleAdditionalLinkTextChange: this.handleAdditionalLinkTextChange\r\n }),\r\n handleText: this.handleTextChange,\r\n handleParagraph: this.handleParagraphChange,\r\n handleAdditionalText: this.handleAdditionalTextChange,\r\n handleAdditionalParagraph: this.handleAdditionalParagraphChange,\r\n handleLink: this.handleLinkTextChange,\r\n handleAdditionalLink: this.handleAdditionalTextChange\r\n };\r\n return this.props.renderView(viewProps) as React.ReactElement;\r\n }\r\n\r\n /**\r\n * Handle link text change.\r\n * @param linkIndex - The link index.\r\n * @param event - The dialog that is allowed to remain open.\r\n */\r\n public handleLinkTextChange(linkIndex: number, event: MsDyn365.ContentEditableEvent): void {\r\n if (this.props.config.links && this.props.config.links[Number(linkIndex)]) {\r\n this.props.config.links[Number(linkIndex)].linkText = event.target.value;\r\n }\r\n }\r\n\r\n /**\r\n * Handle text change.\r\n * @param event - The dialog that is allowed to remain open.\r\n */\r\n public handleTextChange = (event: MsDyn365.ContentEditableEvent): void => {\r\n this.props.config.heading!.text = event.target.value;\r\n };\r\n\r\n /**\r\n * Handle paragraph change.\r\n * @param event - The dialog that is allowed to remain open.\r\n */\r\n public handleParagraphChange = (event: MsDyn365.ContentEditableEvent): void => {\r\n this.props.config.paragraph = event.target.value;\r\n };\r\n\r\n /**\r\n * Handle additional text change.\r\n * @param event - The dialog that is allowed to remain open.\r\n */\r\n public handleAdditionalTextChange(event: MsDyn365.ContentEditableEvent): void {\r\n if (this.props.config.additionalContent) {\r\n this.props.config.additionalContent.heading = event.target.value;\r\n }\r\n }\r\n\r\n /**\r\n * Handle additional link text change.\r\n * @param linkIndex - The link index.\r\n * @param event - The dialog that is allowed to remain open.\r\n */\r\n public handleAdditionalLinkTextChange(linkIndex: number, event: MsDyn365.ContentEditableEvent): void {\r\n const additionalContent = this.props.config.additionalContent ?? {};\r\n if (additionalContent.links) {\r\n additionalContent.links[Number(linkIndex)].linkText = event.target.value;\r\n }\r\n }\r\n\r\n /**\r\n * Handle additional paragraph change.\r\n * @param event - The dialog that is allowed to remain open.\r\n */\r\n public handleAdditionalParagraphChange(event: MsDyn365.ContentEditableEvent): void {\r\n if (this.props.config.additionalContent) {\r\n this.props.config.additionalContent.subtext = event.target.value;\r\n }\r\n }\r\n\r\n // public componentDidMount(): void {\r\n // if (this.videoUrl && this.secondVideoUrl) {\r\n // const ref = this.playerRef as { current: any };\r\n // const player = ref.current;\r\n // player._onPause = () => {\r\n // const { state, videoUrl } = player;\r\n // const { playPosition } = state;\r\n // const currentTime = playPosition.currentTime.toFixed(2);\r\n // const endTime = playPosition.endTime.toFixed(2);\r\n // if (currentTime === endTime) {\r\n // player.videoUrl = videoUrl === this.secondVideoUrl ? this.videoUrl : this.secondVideoUrl;\r\n // player.play();\r\n // }\r\n // };\r\n // }\r\n // }\r\n\r\n /**\r\n * Get video details links.\r\n * @returns - React node.\r\n */\r\n private _getVideoDetailsLinks(): React.ReactNode[] | undefined {\r\n const { links } = this.props.config;\r\n const payLoad = getPayloadObject('click', this.telemetryContent, '');\r\n\r\n return links?.map((linkData: ILinksData, index: number) => {\r\n payLoad.contentAction.etext = linkData.linkText;\r\n const attributes = getTelemetryAttributes(this.telemetryContent, payLoad);\r\n const linkId = index;\r\n const editableLink: MsDyn365.ILinksData = {\r\n ariaLabel: linkData.ariaLabel,\r\n className: 'ms-video-player__details__cta__link',\r\n linkText: linkData.linkText,\r\n linkUrl: linkData.linkUrl.destinationUrl,\r\n openInNewTab: linkData.openInNewTab,\r\n role: 'button',\r\n additionalProperties: attributes\r\n };\r\n\r\n return (\r\n {\r\n this.handleLinkTextChange(index, event);\r\n },\r\n requestContext: this.props.context.request\r\n }}\r\n />\r\n );\r\n });\r\n }\r\n\r\n private _getVideoDetailsHeading(): React.ReactNode | undefined {\r\n const { heading } = this.props.config;\r\n\r\n return (\r\n heading && (\r\n \r\n )\r\n );\r\n }\r\n\r\n private _getVideoDetailsParagraph(): React.ReactNode | undefined {\r\n const { paragraph } = this.props.config;\r\n\r\n return (\r\n paragraph && (\r\n \r\n )\r\n );\r\n }\r\n}\r\n\r\nexport default VideoPlayer;\r\n","/*!\r\n * Copyright (c) Microsoft Corporation.\r\n * All rights reserved. See LICENSE in the project root for license information.\r\n */\r\n\r\n/* eslint-disable no-duplicate-imports */\r\nimport { Node } from '@msdyn365-commerce-modules/utilities';\r\nimport * as React from 'react';\r\n\r\nimport { Player } from '@msdyn365-commerce/components';\r\nimport { IVideoPlayerAdditionalContentViewProps } from './components/additional-content';\r\nimport { IVideoPlayerViewProps } from './mod-video-player';\r\n\r\n/**\r\n * Render Additional Content.\r\n * @param additionalContent - Additional content view props.\r\n * @returns JSX Element.\r\n */\r\nconst renderAdditionalContent = (additionalContent: IVideoPlayerAdditionalContentViewProps) => {\r\n if (additionalContent.additionalContentItems) {\r\n return (\r\n \r\n <>\r\n {additionalContent.additionalContentItems.heading}\r\n \r\n {additionalContent.additionalContentItems.text}\r\n \r\n {additionalContent.additionalContentItems.links}\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n return null;\r\n};\r\n\r\nconst Icon = ({ type }: { type: 'paused' | 'play' }) => {\r\n if (type !== 'paused') {\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst VideoPlayerView: React.FC }> = props => {\r\n const { config, posterUrl } = props;\r\n const { secondVideo, video } = config;\r\n const { _links } = secondVideo ?? {};\r\n const [secondVideoLink] = _links?.binaryReferences ?? [];\r\n const videoSrcs = [video, secondVideo ?? {}].map(({ _links }) => _links?.binaryReferences?.[0].clientHref ?? '');\r\n const [playerState, setPlayerState] = React.useState<'play' | 'paused'>('play');\r\n const [currentPlayer, setCurrentPlayer] = React.useState(0);\r\n const [isInit, setIsInit] = React.useState(true);\r\n const videoElem = React.useRef(null);\r\n const secondVideoElem = React.useRef(null);\r\n\r\n React.useEffect(() => {\r\n if (!secondVideoLink) {\r\n setPlayerState((props.playerRef as { current: any }).current.playerState);\r\n }\r\n videoElem.current?.pause();\r\n videoElem.current?.play();\r\n setIsInit(false);\r\n }, []);\r\n\r\n return (\r\n
\r\n {\r\n if (!secondVideo) {\r\n const { current } = props.playerRef as { current: any };\r\n if (current.playerState === 'paused') {\r\n setPlayerState('play');\r\n current.play();\r\n }\r\n if (current.playerState !== 'paused') {\r\n setPlayerState('paused');\r\n current.pause();\r\n }\r\n return;\r\n }\r\n const elem = currentPlayer === 0 ? videoElem.current : secondVideoElem.current;\r\n void elem?.[elem.paused ? 'play' : 'pause']();\r\n setPlayerState(elem?.paused ? 'paused' : 'play');\r\n }}\r\n >\r\n \r\n \r\n \r\n Reduce motion\r\n \r\n {!secondVideoLink ? props.player : null}\r\n {secondVideoLink ? (\r\n
\r\n {videoSrcs.map((url, i) => (\r\n void videoElem.current?.classList.add('no-blur')}\r\n onEnded={() => {\r\n setCurrentPlayer(state => (state === 0 ? 1 : 0));\r\n void (currentPlayer === 0 ? secondVideoElem : videoElem).current?.play();\r\n }}\r\n aria-hidden='true'\r\n />\r\n ))}\r\n
\r\n ) : null}\r\n \r\n {props.title}\r\n {props.text}\r\n {props.additionalContent && renderAdditionalContent(props.additionalContent)}\r\n \r\n {props.links}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default VideoPlayerView;\r\n","const binding = { modules: {}, dataActions: {} };\n\n (binding.modules['mod-video-player'] = {\n c: () => require('partner/modules/mod-video-player/mod-video-player.tsx'),\n $type: 'contentModule',\n da: [],\n \n iNM: false,\n ns: '__local__',\n n: 'mod-video-player',\n p: '__local__',\n \n pdp: '',\n \n \n md: 'src/modules/mod-video-player'\n });\n \n\n \n window.__bindings__ = window.__bindings__ || {};\n window.__bindings__.modules = {\n ...window.__bindings__.modules || {},\n ...binding.modules\n };\n \n window.__bindings__.dataActions = {\n ...window.__bindings__.dataActions || {},\n ...binding.dataActions\n };\n export const viewDictionary = {};\n viewDictionary['__local__|__local__|modules|mod-video-player|mod-video-player'] = {\n c: () => require('partner/modules/mod-video-player/mod-video-player.view.tsx'),\n cn: '__local__-__local__-mod-video-player'\n };\nwindow.__bindings__ = window.__bindings__ || {};\nwindow.__bindings__.viewDictionary = {\n ...window.__bindings__.viewDictionary || {},\n ...viewDictionary\n };","module.exports = React;","module.exports = ReactDOM;"],"names":["getAdditionalContentItems","item","props","_item$links","heading","renderHeading","additionalContentHeading","requestContext","React","Msdyn365","text","tag","className","editProps","onEdit","event","handleAdditionalTextChange","subtext","renderParagraph","additionalContentParagraphText","handleAdditionalParagraphChange","links","map","ctaLink","index","renderLinks","linkIndex","editableLink","ariaLabel","linkText","linkUrl","destinationUrl","openInNewTab","role","key","link","onTextChange","handleAdditionalLinkTextChange","additionalContentItemContainer","additionalContentItemLinks","videoPlayerAdditionalContent","additionalContent","additionalContentNode","additionalContentItems","VideoPlayer","constructor","super","playerRef","handleTextChange","this","config","target","value","handleParagraphChange","paragraph","isMobileDevice","isMobile","variant","VariantType","Viewport","context","request","telemetryContent","getTelemetryObject","telemetryPageName","friendlyName","telemetry","render","options","_objectSpread","video","playerResources","playAriaLabel","resources","playLabel","pauseAriaLabel","pauseLabel","playingAriaLabel","playingLabel","pausedAriaLabel","pausedLabel","muteAriaLabel","muteLabel","unMuteAriaLabel","unMuteLabel","fullScreenAriaLabel","fullScreenLabel","exitFullScreenAriaLabel","exitFullScreenLabel","seekBarLabel","videoTimeDurationLabel","closedCaptionLabel","videoMetaData","_video$_links","videoId","id","title","duration","playTime","thumbnail","posterframeUrl","src","_links","binaryReferences","videoBinaryReferences","videoPlayerData","metaData","viewProps","player","MsDyn365","Player","ref","playerData","isEditor","params","posterUrl","_getVideoDetailsHeading","_getVideoDetailsParagraph","_getVideoDetailsLinks","detailsContainer","detailsContainerCTA","handleText","handleParagraph","handleAdditionalText","handleAdditionalParagraph","handleLink","handleLinkTextChange","handleAdditionalLink","renderView","Number","_this$props$config$ad","payLoad","getPayloadObject","linkData","contentAction","etext","attributes","getTelemetryAttributes","linkId","additionalProperties","_heading$tag","Icon","_ref","type","fill","width","height","xmlns","viewBox","d","_links$binaryReferenc","secondVideo","secondVideoLink","videoSrcs","_ref2","_links$binaryReferenc2","_links$binaryReferenc3","clientHref","playerState","setPlayerState","currentPlayer","setCurrentPlayer","isInit","setIsInit","videoElem","secondVideoElem","_videoElem$current","_videoElem$current2","current","pause","play","Object","assign","renderModuleAttributes","onClick","elem","paused","url","i","muted","preload","autoPlay","poster","onPlaying","_videoElem$current3","classList","add","onEnded","_current","state","Node","detailsContainerCta","binding","modules","dataActions","c","require","$type","da","iNM","ns","n","p","pdp","md","window","__bindings__","viewDictionary","cn","module","exports","ReactDOM"],"sourceRoot":""}