{
  "version": 3,
  "sources": ["../src/lazy.tsx", "../src/ConditionalSuspense.tsx", "../src/useIsBrowser.ts", "../src/useIsIntersecting.ts"],
  "sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport type { DetailedHTMLProps, HTMLAttributes } from 'react';\n\nimport ConditionalSuspense from './ConditionalSuspense';\nimport useIsBrowser from './useIsBrowser';\nimport useIsIntersecting from './useIsIntersecting';\n\nimport type { IxPlayerProps, IxPlayerRefAttributes } from './index';\n\ninterface IxPlayerElement extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {\n  nohotkeys?: boolean | undefined;\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'ix-player': IxPlayerElement;\n    }\n  }\n}\n\nconst IxPlayerIndex = React.lazy(() => import('./index'));\n\ninterface FallbackProps extends IxPlayerProps {\n  onIntersection?: () => void;\n}\nconst Fallback = (props: FallbackProps) => {\n  const { style, className, onIntersection, placeholder } = props;\n\n  const intersectionRef = React.useRef<HTMLElement>(null);\n  const isIntersecting = useIsIntersecting(intersectionRef);\n\n  useEffect(() => {\n    if (isIntersecting && onIntersection) {\n      onIntersection();\n    }\n  }, [isIntersecting, onIntersection]);\n\n  return (\n    /* \n    Why do we have a ix-player element before the ix-player bundle is even loaded?\n    Before the bundle is loaded, this ix-player element just acts like a div.\n    However, by calling this placeholder \"ix-player\",\n    it now gets the same CSS applied to it that the eventual \"real\" ix-player element will. \n    */\n    <>\n      <ix-player\n        ref={intersectionRef}\n        data-ix-player-react-lazy-placeholder\n        placeholder={placeholder}\n        style={\n          {\n            '--ix-player-react-lazy-placeholder': placeholder ? `url(${placeholder});` : '',\n            ...style,\n          } as React.CSSProperties\n        }\n        className={className || ''}\n        // since there's a possibility that the bundle loads before Suspense clears this placeholder,\n        // we need to make sure that the placeholder isn't interactive and its player chrome in doesn't get rendered\n        nohotkeys\n        aria-hidden\n        tabIndex={-1}\n      >\n        <div data-ix-player-react-lazy-placeholder-overlay />\n      </ix-player>\n      <style>{\n        /* css */ `\n        ix-player[data-ix-player-react-lazy-placeholder] {\n          aspect-ratio: 16/9;\n          display: block;\n          background-color: var(--media-background-color, #000);\n          width: 100%;\n          position: relative;\n          background-image: var(--ix-player-react-lazy-placeholder);\n          background-repeat: no-repeat;\n          background-size: var(--media-object-fit, contain);\n          background-position: var(--media-object-position, 50% 50%);\n          --controls: none;\n          --controls-backdrop-color: rgba(0, 0, 0, 0.6);\n        }\n        ix-player [data-ix-player-react-lazy-placeholder-overlay] {\n          position: absolute;\n          inset: 0;\n          background-color: var(--controls-backdrop-color);\n        }\n      `\n      }</style>\n    </>\n  );\n};\n\ninterface IxPlayerLazyProps extends IxPlayerProps {\n  loading?: 'page' | 'viewport';\n}\nconst IxPlayer = React.forwardRef<IxPlayerRefAttributes, IxPlayerLazyProps>((props, ref) => {\n  const { loading = 'viewport', ...playerProps } = props;\n\n  // We load ix-player once two conditions are met:\n  // 1. We're in a browser (react.lazy doesn't work on the server in react 17)\n  const isBrowser = useIsBrowser();\n  // 2. The player has entered the viewport, according to the fallback (if enabled).\n  const [isIntersecting, setIsIntersecting] = useState(() => (loading === 'viewport' ? false : true));\n\n  return (\n    <ConditionalSuspense\n      condition={isBrowser && isIntersecting}\n      fallback={\n        <Fallback\n          style={playerProps.style}\n          className={playerProps.className}\n          placeholder={playerProps.placeholder}\n          onIntersection={() => setIsIntersecting(true)}\n        />\n      }\n    >\n      <IxPlayerIndex {...playerProps} ref={ref} />\n    </ConditionalSuspense>\n  );\n});\n\nexport default IxPlayer;\n", "import React, { Suspense } from 'react';\n\ntype Props = {\n  fallback: React.ReactChild | React.ReactFragment | React.ReactPortal | null;\n  condition: boolean;\n  children: React.ReactNode;\n};\nconst ConditionalSuspense = ({ condition, fallback, children, ...rest }: Props) => {\n  return condition ? (\n    <Suspense fallback={fallback} {...rest}>\n      {children}\n    </Suspense>\n  ) : (\n    <>{fallback}</>\n  );\n};\n\nexport default ConditionalSuspense;\n", "import { useState, useEffect } from 'react';\n\nconst useIsBrowser = () => {\n  const [isBrowser, setIsBrowser] = useState(false);\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      setIsBrowser(true);\n    }\n  }, []);\n\n  return isBrowser;\n};\nexport default useIsBrowser;\n", "import { useState, useEffect } from 'react';\n\nconst useIsIntersecting = (ref: React.RefObject<HTMLElement>, options?: IntersectionObserverInit) => {\n  const [isIntersecting, setIsIntersecting] = useState(false);\n\n  useEffect(() => {\n    if (typeof IntersectionObserver === 'function') {\n      const observer = new IntersectionObserver(([entry]) => {\n        setIsIntersecting(entry.isIntersecting);\n      }, options);\n\n      if (ref.current) {\n        observer.observe(ref.current);\n      }\n\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [ref, options]);\n\n  return isIntersecting;\n};\n\nexport default useIsIntersecting;\n"],
  "mappings": "AAAA,OAAOA,GAAS,aAAAC,EAAW,YAAAC,MAAgB,QCA3C,OAAOC,GAAS,YAAAC,MAAgB,QAOhC,IAAMC,EAAsB,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,SAAAC,KAAaC,CAAK,IAC7DH,EACLH,EAAA,cAACC,EAAA,CAAS,SAAUG,EAAW,GAAGE,GAC/BD,CACH,EAEAL,EAAA,cAAAA,EAAA,cAAGI,CAAS,EAITG,EAAQL,ECjBf,OAAS,YAAAM,EAAU,aAAAC,MAAiB,QAEpC,IAAMC,EAAe,IAAM,CACzB,GAAM,CAACC,EAAWC,CAAY,EAAIJ,EAAS,EAAK,EAEhD,OAAAC,EAAU,IAAM,CACV,OAAO,QAAW,aACpBG,EAAa,EAAI,CAErB,EAAG,CAAC,CAAC,EAEED,CACT,EACOE,EAAQH,ECbf,OAAS,YAAAI,EAAU,aAAAC,MAAiB,QAEpC,IAAMC,EAAoB,CAACC,EAAmCC,IAAuC,CACnG,GAAM,CAACC,EAAgBC,CAAiB,EAAIN,EAAS,EAAK,EAE1D,OAAAC,EAAU,IAAM,CACd,GAAI,OAAO,sBAAyB,WAAY,CAC9C,IAAMM,EAAW,IAAI,qBAAqB,CAAC,CAACC,CAAK,IAAM,CACrDF,EAAkBE,EAAM,cAAc,CACxC,EAAGJ,CAAO,EAEV,OAAID,EAAI,SACNI,EAAS,QAAQJ,EAAI,OAAO,EAGvB,IAAM,CACXI,EAAS,WAAW,CACtB,CACF,CACF,EAAG,CAACJ,EAAKC,CAAO,CAAC,EAEVC,CACT,EAEOI,EAAQP,EHFf,IAAMQ,EAAgBC,EAAM,KAAK,IAAM,OAAO,kBAAU,EAKlDC,EAAYC,GAAyB,CACzC,GAAM,CAAE,MAAAC,EAAO,UAAAC,EAAW,eAAAC,EAAgB,YAAAC,CAAY,EAAIJ,EAEpDK,EAAkBP,EAAM,OAAoB,IAAI,EAChDQ,EAAiBC,EAAkBF,CAAe,EAExD,OAAAG,EAAU,IAAM,CACVF,GAAkBH,GACpBA,EAAe,CAEnB,EAAG,CAACG,EAAgBH,CAAc,CAAC,EASjCL,EAAA,cAAAA,EAAA,cACEA,EAAA,cAAC,aACC,IAAKO,EACL,wCAAqC,GACrC,YAAaD,EACb,MACE,CACE,qCAAsCA,EAAc,OAAOA,MAAkB,GAC7E,GAAGH,CACL,EAEF,UAAWC,GAAa,GAGxB,UAAS,GACT,cAAW,GACX,SAAU,IAEVJ,EAAA,cAAC,OAAI,gDAA6C,GAAC,CACrD,EACAA,EAAA,cAAC,aACW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAoBX,CACH,CAEJ,EAKMW,EAAWX,EAAM,WAAqD,CAACE,EAAOU,IAAQ,CAC1F,GAAM,CAAE,QAAAC,EAAU,cAAeC,CAAY,EAAIZ,EAI3Ca,EAAYC,EAAa,EAEzB,CAACR,EAAgBS,CAAiB,EAAIC,EAAS,IAAOL,IAAY,UAA0B,EAElG,OACEb,EAAA,cAACmB,EAAA,CACC,UAAWJ,GAAaP,EACxB,SACER,EAAA,cAACC,EAAA,CACC,MAAOa,EAAY,MACnB,UAAWA,EAAY,UACvB,YAAaA,EAAY,YACzB,eAAgB,IAAMG,EAAkB,EAAI,EAC9C,GAGFjB,EAAA,cAACD,EAAA,CAAe,GAAGe,EAAa,IAAKF,EAAK,CAC5C,CAEJ,CAAC,EAEMQ,EAAQT",
  "names": ["React", "useEffect", "useState", "React", "Suspense", "ConditionalSuspense", "condition", "fallback", "children", "rest", "ConditionalSuspense_default", "useState", "useEffect", "useIsBrowser", "isBrowser", "setIsBrowser", "useIsBrowser_default", "useState", "useEffect", "useIsIntersecting", "ref", "options", "isIntersecting", "setIsIntersecting", "observer", "entry", "useIsIntersecting_default", "IxPlayerIndex", "React", "Fallback", "props", "style", "className", "onIntersection", "placeholder", "intersectionRef", "isIntersecting", "useIsIntersecting_default", "useEffect", "IxPlayer", "ref", "loading", "playerProps", "isBrowser", "useIsBrowser_default", "setIsIntersecting", "useState", "ConditionalSuspense_default", "lazy_default"]
}