{"version":3,"file":"ImageFeature-Chunk-846497ae3352cdc6276a.js","mappings":"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","sources":["webpack://nikon-client/./components/atoms/Video/Video.tsx","webpack://nikon-client/./components/molecules/InViewVideo/InViewVideo.tsx","webpack://nikon-client/./components/organisms/ImageFeature/ImageFeature.tsx","webpack://nikon-client/./node_modules/.pnpm/framer-motion@10.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/dom/viewport/index.mjs","webpack://nikon-client/./node_modules/.pnpm/framer-motion@10.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/utils/use-in-view.mjs"],"sourcesContent":["import loadable from '@loadable/component';\nimport { AspectRatioType } from '@models/IAspectRatio';\nimport { IVideoAttributes } from '@models/IVideoAttributes';\nimport updateDataLayer from '@utils/helpers/gtm';\nimport classNames from 'classnames';\nimport { motion, MotionValue } from 'framer-motion';\nimport {\n  ChangeEvent,\n  ForwardedRef,\n  forwardRef,\n  useEffect,\n  useState,\n} from 'react';\nimport { Config } from 'react-player';\n\nconst ReactPlayer = loadable(\n  () => import(/* webpackChunkName: \"react-player\" */ 'react-player')\n);\n\ninterface Props {\n  readonly classes?: string;\n  readonly config?: Config;\n  readonly controls?: boolean;\n  readonly epiEdit?: string;\n  readonly isPlaying?: boolean;\n  readonly title?: string;\n  readonly url?: string;\n  readonly videoAttributes?: IVideoAttributes;\n  readonly videoRatio?: AspectRatioType;\n  readonly videoSource?: string;\n  readonly videoWrapperOpacityProgress?: MotionValue<number>;\n  readonly onEndedVideo?: () => void;\n  readonly onVideoReady?: () => void;\n  readonly onVideoStart?: () => void;\n  readonly onVolumeChange?: (videoElement: HTMLVideoElement) => void;\n  readonly setIsPlaying?: (playing: boolean) => void;\n}\n\nconst Video = forwardRef(\n  (\n    {\n      classes,\n      config,\n      controls = true,\n      epiEdit,\n      isPlaying,\n      title,\n      videoAttributes,\n      videoRatio = 'aspect-video',\n      videoSource,\n      videoWrapperOpacityProgress,\n      onEndedVideo,\n      onVideoReady,\n      onVideoStart,\n      onVolumeChange,\n      setIsPlaying,\n    }: Props,\n    ref\n  ) => {\n    const [prevProgress, setPrevProgress] = useState(0);\n    const [isBrowser, setIsBrowser] = useState(false);\n\n    useEffect(() => {\n      setIsBrowser(typeof window !== 'undefined');\n    }, []);\n\n    useEffect(() => {\n      setPrevProgress(0);\n    }, [title]);\n\n    const handleProgressUpdate = (progress: string) => {\n      updateDataLayer({\n        event: 'videoInteraction',\n        video_interaction: 'video_progress',\n        video_progress: progress,\n        video_title: title,\n      });\n    };\n\n    const handleVideoAction = (action: string) => {\n      updateDataLayer({\n        event: 'videoInteraction',\n        video_interaction:\n          action === 'START' ? 'video_start' : 'video_complete',\n        video_progress: action === 'START' ? 'video_start' : 'video_complete',\n        video_title: title,\n      });\n    };\n\n    const updateVideoProgressData = (progress: number) => {\n      if (prevProgress < 0.25 && progress > 0.25) {\n        handleProgressUpdate('25%');\n      }\n      if (prevProgress < 0.5 && progress > 0.5) {\n        handleProgressUpdate('50%');\n      }\n      if (prevProgress < 0.75 && progress > 0.75) {\n        handleProgressUpdate('75%');\n      }\n      if (prevProgress > 0.9 && progress < 0.1) {\n        handleVideoAction('COMPLETE');\n      }\n      setPrevProgress(progress);\n    };\n\n    if (!videoSource) return null;\n\n    return (\n      <motion.div\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        className={classNames(classes, videoRatio, 'w-full')}\n        data-epi-property-name={epiEdit}\n        data-testid={isPlaying ? 'video-playing' : 'video-paused'}\n        style={{\n          opacity: videoWrapperOpacityProgress ?? 1,\n        }}\n      >\n        {isBrowser && (\n          <ReactPlayer\n            url={videoSource}\n            width=\"100%\"\n            height=\"100%\"\n            controls={controls}\n            playing\n            onProgress={({ played }) => updateVideoProgressData(played)}\n            onStart={() => {\n              onVideoStart?.();\n              handleVideoAction('START');\n            }}\n            onEnded={() => {\n              onEndedVideo?.();\n              handleVideoAction('COMPLETE');\n            }}\n            onPause={() => setIsPlaying?.(false)}\n            onPlay={() => setIsPlaying?.(true)}\n            onReady={onVideoReady}\n            config={config}\n            onVolumeChange={(event: ChangeEvent<HTMLVideoElement>) => {\n              onVolumeChange?.(event.target);\n            }}\n            {...videoAttributes}\n          />\n        )}\n      </motion.div>\n    );\n  }\n);\n\nexport default Video;\n","import Icon from '@atoms/Icon/Icon';\nimport Image from '@atoms/Image/Image';\nimport Video from '@atoms/Video/Video';\nimport { AspectRatioType } from '@models/IAspectRatio';\nimport { IImage } from '@models/IImage';\nimport { IMeta } from '@models/IMeta';\nimport { IVideo } from '@models/IVideo';\nimport useAriaLabels from '@utils/hooks/useAriaLabels';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion, MotionValue, useInView } from 'framer-motion';\nimport { RefObject, useEffect, useRef, useState } from 'react';\n\ninterface Props {\n  readonly autoPlay?: boolean;\n  readonly controls?: boolean;\n  readonly coverImage?: IImage;\n  readonly dataTestId?: string;\n  readonly hasInVideoPlayButton?: boolean;\n  readonly inVideoPlayButtonClassName?: string;\n  readonly inVideoPlayButtonPositionClassName?: string;\n  readonly inVideoPlayButtonTabIndex?: number;\n  readonly inViewThreshold?: number;\n  readonly meta?: IMeta;\n  readonly playOnCoverClick?: boolean;\n  readonly video: IVideo;\n  readonly videoClasses?: string;\n  readonly videoRatio?: AspectRatioType;\n  readonly videoWrapperOpacityProgress?: MotionValue<number>;\n  readonly wrapperClasses?: string;\n  readonly onFocusCallback?: (e: React.FocusEvent<HTMLButtonElement>) => void;\n}\n\nconst InViewVideo = ({\n  autoPlay = false,\n  controls,\n  coverImage,\n  dataTestId = 'In-View-Video',\n  hasInVideoPlayButton,\n  inVideoPlayButtonClassName,\n  inVideoPlayButtonPositionClassName = 'bottom-5 left-5',\n  inVideoPlayButtonTabIndex = 0,\n  inViewThreshold = 0.5,\n  meta,\n  onFocusCallback,\n  playOnCoverClick = true,\n  video,\n  videoClasses,\n  videoRatio,\n  videoWrapperOpacityProgress,\n  wrapperClasses,\n}: Props) => {\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [isVideoManuallyPaused, setIsVideoManuallyPaused] = useState(false);\n  const [isMuted, setIsMuted] = useState(false);\n  const [videoReady, setVideoReady] = useState(false);\n  const videoRef = useRef<HTMLDivElement>(null);\n  const inView = useInView(videoRef, { amount: inViewThreshold });\n  const isAutoPlaying = !hasInVideoPlayButton\n    ? autoPlay\n    : autoPlay && !isVideoManuallyPaused;\n  const { playVideoAriaLabel, pauseVideoAriaLabel } = useAriaLabels();\n\n  useEffect(() => {\n    setIsPlaying(isAutoPlaying && inView);\n    setIsMuted(!controls || !inView || isAutoPlaying);\n  }, [isAutoPlaying, inView, controls]);\n\n  return (\n    <div\n      className={classNames('relative', wrapperClasses)}\n      data-testid={dataTestId}\n    >\n      <Video\n        classes={videoClasses}\n        title={video?.url}\n        videoSource={video?.url}\n        ref={videoRef as unknown as RefObject<HTMLDivElement>}\n        videoAttributes={{\n          playsinline: true,\n          muted: isMuted,\n          playing: isPlaying,\n          loop: true,\n        }}\n        onVideoReady={() => setVideoReady(true)}\n        epiEdit={meta?.editHints?.video as string | undefined}\n        controls={controls}\n        videoRatio={videoRatio}\n        isPlaying={isPlaying}\n        setIsPlaying={setIsPlaying}\n        videoWrapperOpacityProgress={videoWrapperOpacityProgress}\n        onVolumeChange={(videoElement) => {\n          setIsMuted(videoElement.volume === 0 || videoElement.muted);\n        }}\n      />\n\n      {hasInVideoPlayButton && videoReady && (\n        <button\n          type=\"button\"\n          aria-label={isPlaying ? pauseVideoAriaLabel : playVideoAriaLabel}\n          className={classNames(\n            'absolute z-20 flex h-7.5 w-7.5 items-center justify-center rounded-full bg-black bg-opacity-50',\n            inVideoPlayButtonPositionClassName,\n            inVideoPlayButtonClassName\n          )}\n          onClick={() => {\n            setIsPlaying(!isPlaying);\n            setIsVideoManuallyPaused(isPlaying);\n          }}\n          onFocus={onFocusCallback}\n          data-testid={`${dataTestId}-${isPlaying ? 'Pause' : 'Play'}-Button`}\n          data-video-control=\"toggle\"\n          tabIndex={inVideoPlayButtonTabIndex}\n        >\n          <Icon\n            name={isPlaying ? 'pause' : 'play_icon_filled'}\n            colorClassName=\"text-white\"\n            size=\"1.4rem\"\n            className=\"pointer-events-none\"\n          />\n        </button>\n      )}\n\n      {(coverImage || !isAutoPlaying) && (\n        <AnimatePresence>\n          {!isPlaying && (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              onClick={() => playOnCoverClick && setIsPlaying(true)}\n              className=\"group absolute inset-0 flex items-center justify-center hover:cursor-pointer\"\n            >\n              {coverImage && (\n                <Image\n                  classes=\"relative w-full h-full\"\n                  image={coverImage}\n                  imageClasses=\"w-full h-full object-cover object-center\"\n                  epiEdit={meta?.editHints?.video as string | undefined}\n                  dataTestId={`${dataTestId}-Cover-Image`}\n                />\n              )}\n\n              {!isAutoPlaying && coverImage && (\n                <button\n                  type=\"button\"\n                  aria-label={playVideoAriaLabel}\n                  className=\"absolute bottom-2.5 left-2.5 flex items-center md:bottom-5 md:left-5\"\n                  onClick={() => setIsPlaying(true)}\n                  data-testid={`${dataTestId}-Play-Button`}\n                >\n                  <div className=\"h-[2.1875rem] w-[2.1875rem] md:h-[2.875rem] md:w-[2.875rem]\">\n                    <Icon name=\"play_icon_circle\" size=\"100%\" />\n                  </div>\n                </button>\n              )}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      )}\n    </div>\n  );\n};\n\nexport default InViewVideo;\n","import { IImageFeature } from '@models/IImageFeature';\nimport { ILightBoxImage } from '@models/ILightBoxImage';\nimport ImageLightBox from '@molecules/ImageLightBox/ImageLightBox';\nimport InViewVideo from '@molecules/InViewVideo/InViewVideo';\nimport classNames from 'classnames';\n\nconst getVideoOverlayClassName = (position: string) =>\n  classNames('hidden lg:block absolute z-10 bg-white dark:bg-black-100', {\n    'top-0 h-13 xl:h-24 w-full': position === 'top',\n    'bottom-0 h-13 xl:h-24 w-full': position === 'bottom',\n    'left-0 top-[-50%] h-full w-13 xl:w-24 translate-y-[50%]':\n      position === 'left',\n    'right-0 top-[-50%] h-full w-13 xl:w-24 translate-y-[50%]':\n      position === 'right',\n  });\n\nconst ImageFeature = ({\n  alignment,\n  mainImage,\n  meta,\n  secondaryMedia,\n  text,\n  title,\n}: IImageFeature) => {\n  const isVideo = !!(\n    secondaryMedia &&\n    'video' in secondaryMedia &&\n    secondaryMedia?.video?.url\n  );\n\n  const isLeftAligned = alignment === 1;\n  const isRightAligned = alignment !== 1;\n\n  return (\n    <section\n      className=\"component-padding bg-white text-black-100 dark:bg-black-100 dark:text-white\"\n      data-testid=\"CT-36-Image-Feature\"\n    >\n      <div\n        className={classNames(\n          isLeftAligned ? 'lg:flex-row' : 'lg:flex-row-reverse',\n          'container flex flex-col lg:items-center'\n        )}\n      >\n        <div className=\"block lg:hidden\">\n          {title && (\n            <h2\n              className=\"mb-10\"\n              data-epi-property-name={meta?.editHints?.title}\n              data-testid=\"CT-36-Image-Feature-Title\"\n            >\n              {title}\n            </h2>\n          )}\n        </div>\n\n        <div\n          className=\"w-full lg:w-7/12\"\n          data-epi-property-name={meta?.editHints?.mainImage}\n        >\n          <ImageLightBox\n            {...mainImage}\n            imageClasses=\"h-full w-full\"\n            contentIds={\n              mainImage?.meta?.contentLink\n                ? [mainImage.meta.contentLink as string]\n                : []\n            }\n            dataTestId=\"CT-36-Image-Feature-Image-LightBox\"\n          />\n        </div>\n\n        <div\n          className={classNames(\n            isLeftAligned ? ' ml-auto' : 'mr-auto',\n            'my-5 w-full lg:my-0',\n            isVideo ? 'lg:w-5/12' : 'lg:w-4/12'\n          )}\n          data-epi-property-name={meta?.editHints?.secondaryImage}\n        >\n          {title && (\n            <h2\n              className={classNames(\n                'hidden lg:block',\n                isVideo ? 'relative z-20 -mb-5 xl:-mb-[70px]' : 'mb-7.5',\n                {\n                  'ml-13 xl:ml-24': isVideo && isLeftAligned,\n                  'mr-13 xl:mr-24': isVideo && isRightAligned,\n                }\n              )}\n              data-testid=\"CT-36-Image-Feature-Title\"\n            >\n              {title}\n            </h2>\n          )}\n\n          {isVideo ? (\n            <div className=\"relative\">\n              <div className={getVideoOverlayClassName('top')} />\n\n              <div\n                className={getVideoOverlayClassName(\n                  isLeftAligned ? 'left' : 'right'\n                )}\n              />\n\n              <div className={getVideoOverlayClassName('bottom')} />\n\n              <InViewVideo\n                autoPlay\n                controls={false}\n                video={secondaryMedia.video}\n                hasInVideoPlayButton\n                videoClasses=\"overflow-hidden max-h-[900px] [&>div>video]:object-cover\"\n                videoRatio=\"aspect-2/3\"\n                inVideoPlayButtonPositionClassName={classNames(\n                  'left-2.5 bottom-2.5 lg:bottom-15 xl:left-5 xl:bottom-[120px]',\n                  isLeftAligned && 'lg:left-15 xl:left-[120px]'\n                )}\n                dataTestId=\"CT-36-Image-Feature-Video\"\n              />\n            </div>\n          ) : (\n            <ImageLightBox\n              {...(secondaryMedia as ILightBoxImage)}\n              imageClasses=\"h-full w-full\"\n              contentIds={\n                secondaryMedia?.meta?.contentLink\n                  ? [secondaryMedia.meta.contentLink as string]\n                  : []\n              }\n              dataTestId=\"CT-36-Image-Feature-Image-LightBox\"\n            />\n          )}\n\n          {text && (\n            <div\n              className={classNames(\n                'body-two hidden lg:block',\n                isVideo ? 'relative z-20 -mt-5 xl:-mt-[70px]' : 'mt-7.5',\n                {\n                  'ml-13 xl:ml-24': isVideo && isLeftAligned,\n                  'mr-13 xl:mr-24': isVideo && isRightAligned,\n                }\n              )}\n              dangerouslySetInnerHTML={{\n                __html: text,\n              }}\n              data-testid=\"CT-36-Image-Feature-Text\"\n            />\n          )}\n        </div>\n\n        <div className=\"block lg:hidden\">\n          {text && (\n            <div\n              className=\"body-two mt-5\"\n              data-epi-property-name={meta?.editHints?.text}\n              dangerouslySetInnerHTML={{\n                __html: text,\n              }}\n              data-testid=\"CT-36-Image-Feature-Text\"\n            />\n          )}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default ImageFeature;\n","import { resolveElements } from '../utils/resolve-element.mjs';\n\nconst thresholds = {\n    some: 0,\n    all: 1,\n};\nfunction inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = \"some\" } = {}) {\n    const elements = resolveElements(elementOrSelector);\n    const activeIntersections = new WeakMap();\n    const onIntersectionChange = (entries) => {\n        entries.forEach((entry) => {\n            const onEnd = activeIntersections.get(entry.target);\n            /**\n             * If there's no change to the intersection, we don't need to\n             * do anything here.\n             */\n            if (entry.isIntersecting === Boolean(onEnd))\n                return;\n            if (entry.isIntersecting) {\n                const newOnEnd = onStart(entry);\n                if (typeof newOnEnd === \"function\") {\n                    activeIntersections.set(entry.target, newOnEnd);\n                }\n                else {\n                    observer.unobserve(entry.target);\n                }\n            }\n            else if (onEnd) {\n                onEnd(entry);\n                activeIntersections.delete(entry.target);\n            }\n        });\n    };\n    const observer = new IntersectionObserver(onIntersectionChange, {\n        root,\n        rootMargin,\n        threshold: typeof amount === \"number\" ? amount : thresholds[amount],\n    });\n    elements.forEach((element) => observer.observe(element));\n    return () => observer.disconnect();\n}\n\nexport { inView };\n","import { useState, useEffect } from 'react';\nimport { inView } from '../render/dom/viewport/index.mjs';\n\nfunction useInView(ref, { root, margin, amount, once = false } = {}) {\n    const [isInView, setInView] = useState(false);\n    useEffect(() => {\n        if (!ref.current || (once && isInView))\n            return;\n        const onEnter = () => {\n            setInView(true);\n            return once ? undefined : () => setInView(false);\n        };\n        const options = {\n            root: (root && root.current) || undefined,\n            margin,\n            amount,\n        };\n        return inView(ref.current, onEnter, options);\n    }, [root, ref, margin, once, amount]);\n    return isInView;\n}\n\nexport { useInView };\n"],"names":["ReactPlayer","loadable","forwardRef","_ref","ref","classes","config","controls","epiEdit","isPlaying","title","videoAttributes","videoRatio","videoSource","videoWrapperOpacityProgress","onEndedVideo","onVideoReady","onVideoStart","onVolumeChange","setIsPlaying","prevProgress","setPrevProgress","useState","isBrowser","setIsBrowser","useEffect","window","handleProgressUpdate","progress","updateDataLayer","event","video_interaction","video_progress","video_title","handleVideoAction","action","React","createElement","motion","div","className","classNames","style","opacity","_extends","url","width","height","playing","onProgress","_ref2","played","onStart","onEnded","onPause","onPlay","onReady","target","autoPlay","coverImage","dataTestId","hasInVideoPlayButton","inVideoPlayButtonClassName","inVideoPlayButtonPositionClassName","inVideoPlayButtonTabIndex","inViewThreshold","meta","onFocusCallback","playOnCoverClick","video","videoClasses","wrapperClasses","isVideoManuallyPaused","setIsVideoManuallyPaused","isMuted","setIsMuted","videoReady","setVideoReady","videoRef","useRef","inView","useInView","amount","isAutoPlaying","playVideoAriaLabel","pauseVideoAriaLabel","useAriaLabels","Video","playsinline","muted","loop","editHints","videoElement","volume","type","onClick","onFocus","tabIndex","Icon","name","colorClassName","size","AnimatePresence","initial","animate","exit","Image","image","imageClasses","getVideoOverlayClassName","position","alignment","mainImage","secondaryMedia","text","isVideo","isLeftAligned","isRightAligned","ImageLightBox","contentIds","contentLink","secondaryImage","InViewVideo","dangerouslySetInnerHTML","__html","thresholds","some","all","root","margin","once","isInView","setInView","current","options","undefined","elementOrSelector","rootMargin","elements","activeIntersections","WeakMap","observer","IntersectionObserver","entries","forEach","entry","onEnd","get","isIntersecting","Boolean","newOnEnd","set","unobserve","delete","threshold","element","observe","disconnect"],"sourceRoot":""}