{"version":3,"file":"usePageVisibility.mjs","names":[],"sources":["../../../src/hooks/usePageVisibility/usePageVisibility.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { isServer } from '../../utils/isServer/index.ts';\n\n/**\n * Page visibility state derived from browser's DocumentVisibilityState.\n * Excludes 'prerender' as it is deprecated and not used in modern browsers.\n */\nexport type VisibilityState = Exclude<DocumentVisibilityState, 'prerender'>;\n\n/**\n * Page visibility information\n */\nexport type PageVisibility = {\n  /** True if page is currently visible */\n  isVisible: boolean;\n  /** Current visibility state: 'visible' | 'hidden' */\n  visibilityState: VisibilityState;\n};\n\n/**\n * @description\n * `usePageVisibility` is a React hook that detects page visibility changes.\n * It monitors when the user switches tabs or minimizes the browser using the Page Visibility API.\n * Useful for pausing/resuming animations, videos, or background tasks.\n *\n * **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.\n *\n * @returns {PageVisibility} Page visibility information\n * - `isVisible` - True if page is currently visible to the user\n * - `visibilityState` - Current visibility state: 'visible' | 'hidden'\n *\n * @example\n * function VideoPlayer() {\n *   const { isVisible } = usePageVisibility();\n *   const videoRef = useRef<HTMLVideoElement>(null);\n *\n *   useEffect(() => {\n *     if (!videoRef.current) return;\n *\n *     // Pause video when tab is hidden\n *     if (!isVisible) {\n *       videoRef.current.pause();\n *     }\n *   }, [isVisible]);\n *\n *   return <video ref={videoRef} src=\"video.mp4\" />;\n * }\n *\n * @example\n * function Analytics() {\n *   const { isVisible, visibilityState } = usePageVisibility();\n *\n *   useEffect(() => {\n *     if (visibilityState === 'hidden') {\n *       // Track when user leaves the page\n *       analytics.track('page_hidden');\n *     }\n *   }, [visibilityState]);\n *\n *   return null;\n * }\n */\nexport function usePageVisibility(): PageVisibility {\n  const [pageVisibility, setPageVisibility] = useState<PageVisibility>(() => getPageVisibility());\n\n  useEffect(function handleVisibilityChange() {\n    function updateVisibility() {\n      setPageVisibility(() => getPageVisibility());\n    }\n\n    document.addEventListener('visibilitychange', updateVisibility);\n\n    return function cleanup() {\n      document.removeEventListener('visibilitychange', updateVisibility);\n    };\n  }, []);\n\n  return pageVisibility;\n}\n\nfunction getPageVisibility(): PageVisibility {\n  if (isServer()) {\n    return {\n      isVisible: true,\n      visibilityState: 'visible',\n    };\n  }\n\n  const visibilityState: VisibilityState = document.visibilityState;\n\n  return {\n    isVisible: visibilityState === 'visible',\n    visibilityState,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,SAAgB,oBAAoC;CAClD,MAAM,CAAC,gBAAgB,qBAAqB,eAA+B,kBAAkB,CAAC;CAE9F,UAAU,SAAS,yBAAyB;EAC1C,SAAS,mBAAmB;GAC1B,wBAAwB,kBAAkB,CAAC;EAC7C;EAEA,SAAS,iBAAiB,oBAAoB,gBAAgB;EAE9D,OAAO,SAAS,UAAU;GACxB,SAAS,oBAAoB,oBAAoB,gBAAgB;EACnE;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;AACT;AAEA,SAAS,oBAAoC;CAC3C,IAAI,SAAS,GACX,OAAO;EACL,WAAW;EACX,iBAAiB;CACnB;CAGF,MAAM,kBAAmC,SAAS;CAElD,OAAO;EACL,WAAW,oBAAoB;EAC/B;CACF;AACF"}