react-visibility-hooks 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var i in e)m(t,i,{get:e[i],enumerable:!0})},b=(t,e,i,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of d(e))!v.call(t,o)&&o!==i&&m(t,o,{get:()=>e[o],enumerable:!(r=f(e,o))||r.enumerable});return t};var p=t=>b(m({},"__esModule",{value:!0}),t);var V={};y(V,{useAutoPauseVideo:()=>E,useDocVisible:()=>n,useIdleVisibility:()=>w,useSmartPolling:()=>x});module.exports=p(V);var u=require("react");function n(){let[t,e]=(0,u.useState)(typeof document=="undefined"||document.visibilityState==="visible");return(0,u.useEffect)(()=>{if(typeof document=="undefined")return;let i=()=>e(document.visibilityState==="visible");return document.addEventListener("visibilitychange",i),()=>document.removeEventListener("visibilitychange",i)},[]),t}var l=require("react");function w(t=6e4){let e=n(),[i,r]=(0,l.useState)(!1);return(0,l.useEffect)(()=>{let o,s=()=>{r(!1),clearTimeout(o),o=setTimeout(()=>r(!0),t)};return window.addEventListener("mousemove",s),window.addEventListener("keydown",s),s(),()=>{window.removeEventListener("mousemove",s),window.removeEventListener("keydown",s),clearTimeout(o)}},[t]),{visible:e,idle:i}}var a=require("react");function E(t){let e=n();(0,a.useEffect)(()=>{let i=t.current;i&&(e?i.play().catch(()=>{}):i.pause())},[e,t])}var c;try{c=require("@tanstack/react-query").useQuery}catch{c=null}function x(t){let e=n();return c?c({queryKey:["smartPolling"],queryFn:t,refetchInterval:e?5e3:!1}):(console.warn("Install @tanstack/react-query to use useSmartPolling hook"),null)}0&&(module.exports={useAutoPauseVideo,useDocVisible,useIdleVisibility,useSmartPolling});
1
+ "use strict";var m=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var x=(t,e)=>{for(var r in e)m(t,r,{get:e[r],enumerable:!0})},R=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of T(e))!L.call(t,n)&&n!==r&&m(t,n,{get:()=>e[n],enumerable:!(o=S(e,n))||o.enumerable});return t};var V=t=>R(m({},"__esModule",{value:!0}),t);var D={};x(D,{useAutoPauseVideo:()=>I,useDocVisible:()=>u,useIdleVisibility:()=>h,useSmartPolling:()=>P});module.exports=V(D);var l=require("react");function u(){let[t,e]=(0,l.useState)(typeof document=="undefined"||document.visibilityState==="visible");return(0,l.useEffect)(()=>{if(typeof document=="undefined")return;let r=()=>e(document.visibilityState==="visible");return document.addEventListener("visibilitychange",r),()=>document.removeEventListener("visibilitychange",r)},[]),t}var d=require("react");function h(t=6e4){let e=u(),[r,o]=(0,d.useState)(!1);return(0,d.useEffect)(()=>{let n,s=()=>{o(!1),clearTimeout(n),n=setTimeout(()=>o(!0),t)};return window.addEventListener("mousemove",s),window.addEventListener("keydown",s),s(),()=>{window.removeEventListener("mousemove",s),window.removeEventListener("keydown",s),clearTimeout(n)}},[t]),{visible:e,idle:r}}var y=require("react");function I(t){let e=u();(0,y.useEffect)(()=>{let r=t.current;r&&(e?r.play().catch(()=>{}):r.pause())},[e,t])}var i=require("react");function P(t,e){let{interval:r=5e3,enabled:o=!0}=e!=null?e:{},n=u(),[s,w]=(0,i.useState)(void 0),[g,v]=(0,i.useState)(!0),[b,p]=(0,i.useState)(void 0),E=(0,i.useRef)(t),f=(0,i.useRef)(void 0);E.current=t;let a=(0,i.useCallback)(async()=>{try{let c=await E.current();w(c),p(void 0)}catch(c){p(c instanceof Error?c:new Error(String(c)))}finally{v(!1)}},[]);return(0,i.useEffect)(()=>{o&&(v(!0),a())},[o,a]),(0,i.useEffect)(()=>{if(!o||!n){clearInterval(f.current);return}return f.current=setInterval(a,r),()=>clearInterval(f.current)},[n,o,r,a]),{data:s,isLoading:g,isError:!!b,error:b,refetch:a}}0&&(module.exports={useAutoPauseVideo,useDocVisible,useIdleVisibility,useSmartPolling});
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/useDocVisible.ts","../src/useIdleVisibility.ts","../src/useAutoPauseVideo.ts","../src/useSmartPolling.ts"],"sourcesContent":["export * from \"./useDocVisible\";\nexport * from \"./useIdleVisibility\";\nexport * from \"./useAutoPauseVideo\";\nexport * from \"./useSmartPolling\";\n","import { useEffect, useState } from \"react\";\n\nexport function useDocVisible(): boolean {\n const [visible, setVisible] = useState(\n typeof document === \"undefined\" || document.visibilityState === \"visible\"\n );\n\n useEffect(() => {\n if (typeof document === \"undefined\") return;\n const handler = () => setVisible(document.visibilityState === \"visible\");\n document.addEventListener(\"visibilitychange\", handler);\n return () => document.removeEventListener(\"visibilitychange\", handler);\n }, []);\n\n return visible;\n}\n","import { useEffect, useState } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useIdleVisibility(timeout = 60000) {\n const visible = useDocVisible();\n const [idle, setIdle] = useState(false);\n\n useEffect(() => {\n let timer: any;\n\n const reset = () => {\n setIdle(false);\n clearTimeout(timer);\n timer = setTimeout(() => setIdle(true), timeout);\n };\n\n window.addEventListener(\"mousemove\", reset);\n window.addEventListener(\"keydown\", reset);\n reset();\n\n return () => {\n window.removeEventListener(\"mousemove\", reset);\n window.removeEventListener(\"keydown\", reset);\n clearTimeout(timer);\n };\n }, [timeout]);\n\n return { visible, idle };\n}\n","import { useEffect } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>) {\n const visible = useDocVisible();\n\n useEffect(() => {\n const video = ref.current;\n if (!video) return;\n\n if (!visible) video.pause();\n else video.play().catch(() => {});\n }, [visible, ref]);\n}\n","import { useDocVisible } from \"./useDocVisible\";\n\nlet useQuery: any;\n\ntry {\n useQuery = require(\"@tanstack/react-query\").useQuery;\n} catch {\n useQuery = null;\n}\n\nexport function useSmartPolling(fetchFn: () => Promise<any>) {\n const visible = useDocVisible();\n\n if (!useQuery) {\n console.warn(\n \"Install @tanstack/react-query to use useSmartPolling hook\"\n );\n return null;\n }\n\n return useQuery({\n queryKey: [\"smartPolling\"],\n queryFn: fetchFn,\n refetchInterval: visible ? 5000 : false,\n });\n}\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,EAAA,kBAAAC,EAAA,sBAAAC,EAAA,oBAAAC,IAAA,eAAAC,EAAAN,GCAA,IAAAO,EAAoC,iBAE7B,SAASC,GAAyB,CACvC,GAAM,CAACC,EAASC,CAAU,KAAI,YAC5B,OAAO,UAAa,aAAe,SAAS,kBAAoB,SAClE,EAEA,sBAAU,IAAM,CACd,GAAI,OAAO,UAAa,YAAa,OACrC,IAAMC,EAAU,IAAMD,EAAW,SAAS,kBAAoB,SAAS,EACvE,gBAAS,iBAAiB,mBAAoBC,CAAO,EAC9C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAO,CACvE,EAAG,CAAC,CAAC,EAEEF,CACT,CCfA,IAAAG,EAAoC,iBAG7B,SAASC,EAAkBC,EAAU,IAAO,CACjD,IAAMC,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,KAAI,YAAS,EAAK,EAEtC,sBAAU,IAAM,CACd,IAAIC,EAEEC,EAAQ,IAAM,CAClBF,EAAQ,EAAK,EACb,aAAaC,CAAK,EAClBA,EAAQ,WAAW,IAAMD,EAAQ,EAAI,EAAGJ,CAAO,CACjD,EAEA,cAAO,iBAAiB,YAAaM,CAAK,EAC1C,OAAO,iBAAiB,UAAWA,CAAK,EACxCA,EAAM,EAEC,IAAM,CACX,OAAO,oBAAoB,YAAaA,CAAK,EAC7C,OAAO,oBAAoB,UAAWA,CAAK,EAC3C,aAAaD,CAAK,CACpB,CACF,EAAG,CAACL,CAAO,CAAC,EAEL,CAAE,QAAAC,EAAS,KAAAE,CAAK,CACzB,CC5BA,IAAAI,EAA0B,iBAGnB,SAASC,EAAkBC,EAAwC,CACxE,IAAMC,EAAUC,EAAc,KAE9B,aAAU,IAAM,CACd,IAAMC,EAAQH,EAAI,QACbG,IAEAF,EACAE,EAAM,KAAK,EAAE,MAAM,IAAM,CAAC,CAAC,EADlBA,EAAM,MAAM,EAE5B,EAAG,CAACF,EAASD,CAAG,CAAC,CACnB,CCXA,IAAII,EAEJ,GAAI,CACFA,EAAW,QAAQ,uBAAuB,EAAE,QAC9C,MAAQ,CACNA,EAAW,IACb,CAEO,SAASC,EAAgBC,EAA6B,CAC3D,IAAMC,EAAUC,EAAc,EAE9B,OAAKJ,EAOEA,EAAS,CACd,SAAU,CAAC,cAAc,EACzB,QAASE,EACT,gBAAiBC,EAAU,IAAO,EACpC,CAAC,GAVC,QAAQ,KACN,2DACF,EACO,KAQX","names":["index_exports","__export","useAutoPauseVideo","useDocVisible","useIdleVisibility","useSmartPolling","__toCommonJS","import_react","useDocVisible","visible","setVisible","handler","import_react","useIdleVisibility","timeout","visible","useDocVisible","idle","setIdle","timer","reset","import_react","useAutoPauseVideo","ref","visible","useDocVisible","video","useQuery","useSmartPolling","fetchFn","visible","useDocVisible"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/useDocVisible.ts","../src/useIdleVisibility.ts","../src/useAutoPauseVideo.ts","../src/useSmartPolling.ts"],"sourcesContent":["export * from \"./useDocVisible\";\nexport * from \"./useIdleVisibility\";\nexport * from \"./useAutoPauseVideo\";\nexport * from \"./useSmartPolling\";\n","import { useEffect, useState } from \"react\";\n\nexport function useDocVisible(): boolean {\n const [visible, setVisible] = useState(\n typeof document === \"undefined\" || document.visibilityState === \"visible\"\n );\n\n useEffect(() => {\n if (typeof document === \"undefined\") return;\n const handler = () => setVisible(document.visibilityState === \"visible\");\n document.addEventListener(\"visibilitychange\", handler);\n return () => document.removeEventListener(\"visibilitychange\", handler);\n }, []);\n\n return visible;\n}\n","import { useEffect, useState } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useIdleVisibility(timeout = 60000) {\n const visible = useDocVisible();\n const [idle, setIdle] = useState(false);\n\n useEffect(() => {\n let timer: any;\n\n const reset = () => {\n setIdle(false);\n clearTimeout(timer);\n timer = setTimeout(() => setIdle(true), timeout);\n };\n\n window.addEventListener(\"mousemove\", reset);\n window.addEventListener(\"keydown\", reset);\n reset();\n\n return () => {\n window.removeEventListener(\"mousemove\", reset);\n window.removeEventListener(\"keydown\", reset);\n clearTimeout(timer);\n };\n }, [timeout]);\n\n return { visible, idle };\n}\n","import { useEffect } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>) {\n const visible = useDocVisible();\n\n useEffect(() => {\n const video = ref.current;\n if (!video) return;\n\n if (!visible) video.pause();\n else video.play().catch(() => {});\n }, [visible, ref]);\n}\n","import { useState, useEffect, useRef, useCallback } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\ninterface SmartPollingOptions {\n interval?: number;\n enabled?: boolean;\n}\n\ninterface SmartPollingResult<T> {\n data: T | undefined;\n isLoading: boolean;\n isError: boolean;\n error: Error | undefined;\n refetch: () => void;\n}\n\nexport function useSmartPolling<T = any>(\n fetchFn: () => Promise<T>,\n options?: SmartPollingOptions,\n): SmartPollingResult<T> {\n const { interval = 5000, enabled = true } = options ?? {};\n const visible = useDocVisible();\n const [data, setData] = useState<T | undefined>(undefined);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState<Error | undefined>(undefined);\n const fetchRef = useRef(fetchFn);\n const timerRef = useRef<ReturnType<typeof setInterval> | undefined>(\n undefined,\n );\n\n fetchRef.current = fetchFn;\n\n const execute = useCallback(async () => {\n try {\n const result = await fetchRef.current();\n setData(result);\n setError(undefined);\n } catch (err) {\n setError(err instanceof Error ? err : new Error(String(err)));\n } finally {\n setIsLoading(false);\n }\n }, []);\n\n // Initial fetch\n useEffect(() => {\n if (!enabled) return;\n setIsLoading(true);\n execute();\n }, [enabled, execute]);\n\n // Polling — only when visible and enabled\n useEffect(() => {\n if (!enabled || !visible) {\n clearInterval(timerRef.current);\n return;\n }\n\n timerRef.current = setInterval(execute, interval);\n return () => clearInterval(timerRef.current);\n }, [visible, enabled, interval, execute]);\n\n return { data, isLoading, isError: !!error, error, refetch: execute };\n}\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,EAAA,kBAAAC,EAAA,sBAAAC,EAAA,oBAAAC,IAAA,eAAAC,EAAAN,GCAA,IAAAO,EAAoC,iBAE7B,SAASC,GAAyB,CACvC,GAAM,CAACC,EAASC,CAAU,KAAI,YAC5B,OAAO,UAAa,aAAe,SAAS,kBAAoB,SAClE,EAEA,sBAAU,IAAM,CACd,GAAI,OAAO,UAAa,YAAa,OACrC,IAAMC,EAAU,IAAMD,EAAW,SAAS,kBAAoB,SAAS,EACvE,gBAAS,iBAAiB,mBAAoBC,CAAO,EAC9C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAO,CACvE,EAAG,CAAC,CAAC,EAEEF,CACT,CCfA,IAAAG,EAAoC,iBAG7B,SAASC,EAAkBC,EAAU,IAAO,CACjD,IAAMC,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,KAAI,YAAS,EAAK,EAEtC,sBAAU,IAAM,CACd,IAAIC,EAEEC,EAAQ,IAAM,CAClBF,EAAQ,EAAK,EACb,aAAaC,CAAK,EAClBA,EAAQ,WAAW,IAAMD,EAAQ,EAAI,EAAGJ,CAAO,CACjD,EAEA,cAAO,iBAAiB,YAAaM,CAAK,EAC1C,OAAO,iBAAiB,UAAWA,CAAK,EACxCA,EAAM,EAEC,IAAM,CACX,OAAO,oBAAoB,YAAaA,CAAK,EAC7C,OAAO,oBAAoB,UAAWA,CAAK,EAC3C,aAAaD,CAAK,CACpB,CACF,EAAG,CAACL,CAAO,CAAC,EAEL,CAAE,QAAAC,EAAS,KAAAE,CAAK,CACzB,CC5BA,IAAAI,EAA0B,iBAGnB,SAASC,EAAkBC,EAAwC,CACxE,IAAMC,EAAUC,EAAc,KAE9B,aAAU,IAAM,CACd,IAAMC,EAAQH,EAAI,QACbG,IAEAF,EACAE,EAAM,KAAK,EAAE,MAAM,IAAM,CAAC,CAAC,EADlBA,EAAM,MAAM,EAE5B,EAAG,CAACF,EAASD,CAAG,CAAC,CACnB,CCbA,IAAAI,EAAyD,iBAgBlD,SAASC,EACdC,EACAC,EACuB,CACvB,GAAM,CAAE,SAAAC,EAAW,IAAM,QAAAC,EAAU,EAAK,EAAIF,GAAA,KAAAA,EAAW,CAAC,EAClDG,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,KAAI,YAAwB,MAAS,EACnD,CAACC,EAAWC,CAAY,KAAI,YAAS,EAAI,EACzC,CAACC,EAAOC,CAAQ,KAAI,YAA4B,MAAS,EACzDC,KAAW,UAAOZ,CAAO,EACzBa,KAAW,UACf,MACF,EAEAD,EAAS,QAAUZ,EAEnB,IAAMc,KAAU,eAAY,SAAY,CACtC,GAAI,CACF,IAAMC,EAAS,MAAMH,EAAS,QAAQ,EACtCL,EAAQQ,CAAM,EACdJ,EAAS,MAAS,CACpB,OAASK,EAAK,CACZL,EAASK,aAAe,MAAQA,EAAM,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,CAC9D,QAAE,CACAP,EAAa,EAAK,CACpB,CACF,EAAG,CAAC,CAAC,EAGL,sBAAU,IAAM,CACTN,IACLM,EAAa,EAAI,EACjBK,EAAQ,EACV,EAAG,CAACX,EAASW,CAAO,CAAC,KAGrB,aAAU,IAAM,CACd,GAAI,CAACX,GAAW,CAACC,EAAS,CACxB,cAAcS,EAAS,OAAO,EAC9B,MACF,CAEA,OAAAA,EAAS,QAAU,YAAYC,EAASZ,CAAQ,EACzC,IAAM,cAAcW,EAAS,OAAO,CAC7C,EAAG,CAACT,EAASD,EAASD,EAAUY,CAAO,CAAC,EAEjC,CAAE,KAAAR,EAAM,UAAAE,EAAW,QAAS,CAAC,CAACE,EAAO,MAAAA,EAAO,QAASI,CAAQ,CACtE","names":["index_exports","__export","useAutoPauseVideo","useDocVisible","useIdleVisibility","useSmartPolling","__toCommonJS","import_react","useDocVisible","visible","setVisible","handler","import_react","useIdleVisibility","timeout","visible","useDocVisible","idle","setIdle","timer","reset","import_react","useAutoPauseVideo","ref","visible","useDocVisible","video","import_react","useSmartPolling","fetchFn","options","interval","enabled","visible","useDocVisible","data","setData","isLoading","setIsLoading","error","setError","fetchRef","timerRef","execute","result","err"]}
package/dist/index.d.cts CHANGED
@@ -7,6 +7,17 @@ declare function useIdleVisibility(timeout?: number): {
7
7
 
8
8
  declare function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>): void;
9
9
 
10
- declare function useSmartPolling(fetchFn: () => Promise<any>): any;
10
+ interface SmartPollingOptions {
11
+ interval?: number;
12
+ enabled?: boolean;
13
+ }
14
+ interface SmartPollingResult<T> {
15
+ data: T | undefined;
16
+ isLoading: boolean;
17
+ isError: boolean;
18
+ error: Error | undefined;
19
+ refetch: () => void;
20
+ }
21
+ declare function useSmartPolling<T = any>(fetchFn: () => Promise<T>, options?: SmartPollingOptions): SmartPollingResult<T>;
11
22
 
12
23
  export { useAutoPauseVideo, useDocVisible, useIdleVisibility, useSmartPolling };
package/dist/index.d.ts CHANGED
@@ -7,6 +7,17 @@ declare function useIdleVisibility(timeout?: number): {
7
7
 
8
8
  declare function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>): void;
9
9
 
10
- declare function useSmartPolling(fetchFn: () => Promise<any>): any;
10
+ interface SmartPollingOptions {
11
+ interval?: number;
12
+ enabled?: boolean;
13
+ }
14
+ interface SmartPollingResult<T> {
15
+ data: T | undefined;
16
+ isLoading: boolean;
17
+ isError: boolean;
18
+ error: Error | undefined;
19
+ refetch: () => void;
20
+ }
21
+ declare function useSmartPolling<T = any>(fetchFn: () => Promise<T>, options?: SmartPollingOptions): SmartPollingResult<T>;
11
22
 
12
23
  export { useAutoPauseVideo, useDocVisible, useIdleVisibility, useSmartPolling };
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- var l=(e=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(e,{get:(t,i)=>(typeof require!="undefined"?require:t)[i]}):e)(function(e){if(typeof require!="undefined")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});import{useEffect as c,useState as m}from"react";function o(){let[e,t]=m(typeof document=="undefined"||document.visibilityState==="visible");return c(()=>{if(typeof document=="undefined")return;let i=()=>t(document.visibilityState==="visible");return document.addEventListener("visibilitychange",i),()=>document.removeEventListener("visibilitychange",i)},[]),e}import{useEffect as a,useState as f}from"react";function E(e=6e4){let t=o(),[i,u]=f(!1);return a(()=>{let s,n=()=>{u(!1),clearTimeout(s),s=setTimeout(()=>u(!0),e)};return window.addEventListener("mousemove",n),window.addEventListener("keydown",n),n(),()=>{window.removeEventListener("mousemove",n),window.removeEventListener("keydown",n),clearTimeout(s)}},[e]),{visible:t,idle:i}}import{useEffect as d}from"react";function L(e){let t=o();d(()=>{let i=e.current;i&&(t?i.play().catch(()=>{}):i.pause())},[t,e])}var r;try{r=l("@tanstack/react-query").useQuery}catch{r=null}function P(e){let t=o();return r?r({queryKey:["smartPolling"],queryFn:e,refetchInterval:t?5e3:!1}):(console.warn("Install @tanstack/react-query to use useSmartPolling hook"),null)}export{L as useAutoPauseVideo,o as useDocVisible,E as useIdleVisibility,P as useSmartPolling};
1
+ import{useEffect as w,useState as g}from"react";function s(){let[t,r]=g(typeof document=="undefined"||document.visibilityState==="visible");return w(()=>{if(typeof document=="undefined")return;let e=()=>r(document.visibilityState==="visible");return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[]),t}import{useEffect as S,useState as T}from"react";function P(t=6e4){let r=s(),[e,n]=T(!1);return S(()=>{let o,i=()=>{n(!1),clearTimeout(o),o=setTimeout(()=>n(!0),t)};return window.addEventListener("mousemove",i),window.addEventListener("keydown",i),i(),()=>{window.removeEventListener("mousemove",i),window.removeEventListener("keydown",i),clearTimeout(o)}},[t]),{visible:r,idle:e}}import{useEffect as L}from"react";function j(t){let r=s();L(()=>{let e=t.current;e&&(r?e.play().catch(()=>{}):e.pause())},[r,t])}import{useState as l,useEffect as b,useRef as p,useCallback as x}from"react";function M(t,r){let{interval:e=5e3,enabled:n=!0}=r!=null?r:{},o=s(),[i,E]=l(void 0),[y,d]=l(!0),[f,m]=l(void 0),v=p(t),c=p(void 0);v.current=t;let u=x(async()=>{try{let a=await v.current();E(a),m(void 0)}catch(a){m(a instanceof Error?a:new Error(String(a)))}finally{d(!1)}},[]);return b(()=>{n&&(d(!0),u())},[n,u]),b(()=>{if(!n||!o){clearInterval(c.current);return}return c.current=setInterval(u,e),()=>clearInterval(c.current)},[o,n,e,u]),{data:i,isLoading:y,isError:!!f,error:f,refetch:u}}export{j as useAutoPauseVideo,s as useDocVisible,P as useIdleVisibility,M as useSmartPolling};
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/useDocVisible.ts","../src/useIdleVisibility.ts","../src/useAutoPauseVideo.ts","../src/useSmartPolling.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport function useDocVisible(): boolean {\n const [visible, setVisible] = useState(\n typeof document === \"undefined\" || document.visibilityState === \"visible\"\n );\n\n useEffect(() => {\n if (typeof document === \"undefined\") return;\n const handler = () => setVisible(document.visibilityState === \"visible\");\n document.addEventListener(\"visibilitychange\", handler);\n return () => document.removeEventListener(\"visibilitychange\", handler);\n }, []);\n\n return visible;\n}\n","import { useEffect, useState } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useIdleVisibility(timeout = 60000) {\n const visible = useDocVisible();\n const [idle, setIdle] = useState(false);\n\n useEffect(() => {\n let timer: any;\n\n const reset = () => {\n setIdle(false);\n clearTimeout(timer);\n timer = setTimeout(() => setIdle(true), timeout);\n };\n\n window.addEventListener(\"mousemove\", reset);\n window.addEventListener(\"keydown\", reset);\n reset();\n\n return () => {\n window.removeEventListener(\"mousemove\", reset);\n window.removeEventListener(\"keydown\", reset);\n clearTimeout(timer);\n };\n }, [timeout]);\n\n return { visible, idle };\n}\n","import { useEffect } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>) {\n const visible = useDocVisible();\n\n useEffect(() => {\n const video = ref.current;\n if (!video) return;\n\n if (!visible) video.pause();\n else video.play().catch(() => {});\n }, [visible, ref]);\n}\n","import { useDocVisible } from \"./useDocVisible\";\n\nlet useQuery: any;\n\ntry {\n useQuery = require(\"@tanstack/react-query\").useQuery;\n} catch {\n useQuery = null;\n}\n\nexport function useSmartPolling(fetchFn: () => Promise<any>) {\n const visible = useDocVisible();\n\n if (!useQuery) {\n console.warn(\n \"Install @tanstack/react-query to use useSmartPolling hook\"\n );\n return null;\n }\n\n return useQuery({\n queryKey: [\"smartPolling\"],\n queryFn: fetchFn,\n refetchInterval: visible ? 5000 : false,\n });\n}\n"],"mappings":"6RAAA,OAAS,aAAAA,EAAW,YAAAC,MAAgB,QAE7B,SAASC,GAAyB,CACvC,GAAM,CAACC,EAASC,CAAU,EAAIH,EAC5B,OAAO,UAAa,aAAe,SAAS,kBAAoB,SAClE,EAEA,OAAAD,EAAU,IAAM,CACd,GAAI,OAAO,UAAa,YAAa,OACrC,IAAMK,EAAU,IAAMD,EAAW,SAAS,kBAAoB,SAAS,EACvE,gBAAS,iBAAiB,mBAAoBC,CAAO,EAC9C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAO,CACvE,EAAG,CAAC,CAAC,EAEEF,CACT,CCfA,OAAS,aAAAG,EAAW,YAAAC,MAAgB,QAG7B,SAASC,EAAkBC,EAAU,IAAO,CACjD,IAAMC,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,EAAIC,EAAS,EAAK,EAEtC,OAAAC,EAAU,IAAM,CACd,IAAIC,EAEEC,EAAQ,IAAM,CAClBJ,EAAQ,EAAK,EACb,aAAaG,CAAK,EAClBA,EAAQ,WAAW,IAAMH,EAAQ,EAAI,EAAGJ,CAAO,CACjD,EAEA,cAAO,iBAAiB,YAAaQ,CAAK,EAC1C,OAAO,iBAAiB,UAAWA,CAAK,EACxCA,EAAM,EAEC,IAAM,CACX,OAAO,oBAAoB,YAAaA,CAAK,EAC7C,OAAO,oBAAoB,UAAWA,CAAK,EAC3C,aAAaD,CAAK,CACpB,CACF,EAAG,CAACP,CAAO,CAAC,EAEL,CAAE,QAAAC,EAAS,KAAAE,CAAK,CACzB,CC5BA,OAAS,aAAAM,MAAiB,QAGnB,SAASC,EAAkBC,EAAwC,CACxE,IAAMC,EAAUC,EAAc,EAE9BC,EAAU,IAAM,CACd,IAAMC,EAAQJ,EAAI,QACbI,IAEAH,EACAG,EAAM,KAAK,EAAE,MAAM,IAAM,CAAC,CAAC,EADlBA,EAAM,MAAM,EAE5B,EAAG,CAACH,EAASD,CAAG,CAAC,CACnB,CCXA,IAAIK,EAEJ,GAAI,CACFA,EAAW,EAAQ,uBAAuB,EAAE,QAC9C,MAAQ,CACNA,EAAW,IACb,CAEO,SAASC,EAAgBC,EAA6B,CAC3D,IAAMC,EAAUC,EAAc,EAE9B,OAAKJ,EAOEA,EAAS,CACd,SAAU,CAAC,cAAc,EACzB,QAASE,EACT,gBAAiBC,EAAU,IAAO,EACpC,CAAC,GAVC,QAAQ,KACN,2DACF,EACO,KAQX","names":["useEffect","useState","useDocVisible","visible","setVisible","handler","useEffect","useState","useIdleVisibility","timeout","visible","useDocVisible","idle","setIdle","useState","useEffect","timer","reset","useEffect","useAutoPauseVideo","ref","visible","useDocVisible","useEffect","video","useQuery","useSmartPolling","fetchFn","visible","useDocVisible"]}
1
+ {"version":3,"sources":["../src/useDocVisible.ts","../src/useIdleVisibility.ts","../src/useAutoPauseVideo.ts","../src/useSmartPolling.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport function useDocVisible(): boolean {\n const [visible, setVisible] = useState(\n typeof document === \"undefined\" || document.visibilityState === \"visible\"\n );\n\n useEffect(() => {\n if (typeof document === \"undefined\") return;\n const handler = () => setVisible(document.visibilityState === \"visible\");\n document.addEventListener(\"visibilitychange\", handler);\n return () => document.removeEventListener(\"visibilitychange\", handler);\n }, []);\n\n return visible;\n}\n","import { useEffect, useState } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useIdleVisibility(timeout = 60000) {\n const visible = useDocVisible();\n const [idle, setIdle] = useState(false);\n\n useEffect(() => {\n let timer: any;\n\n const reset = () => {\n setIdle(false);\n clearTimeout(timer);\n timer = setTimeout(() => setIdle(true), timeout);\n };\n\n window.addEventListener(\"mousemove\", reset);\n window.addEventListener(\"keydown\", reset);\n reset();\n\n return () => {\n window.removeEventListener(\"mousemove\", reset);\n window.removeEventListener(\"keydown\", reset);\n clearTimeout(timer);\n };\n }, [timeout]);\n\n return { visible, idle };\n}\n","import { useEffect } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\nexport function useAutoPauseVideo(ref: React.RefObject<HTMLVideoElement>) {\n const visible = useDocVisible();\n\n useEffect(() => {\n const video = ref.current;\n if (!video) return;\n\n if (!visible) video.pause();\n else video.play().catch(() => {});\n }, [visible, ref]);\n}\n","import { useState, useEffect, useRef, useCallback } from \"react\";\nimport { useDocVisible } from \"./useDocVisible\";\n\ninterface SmartPollingOptions {\n interval?: number;\n enabled?: boolean;\n}\n\ninterface SmartPollingResult<T> {\n data: T | undefined;\n isLoading: boolean;\n isError: boolean;\n error: Error | undefined;\n refetch: () => void;\n}\n\nexport function useSmartPolling<T = any>(\n fetchFn: () => Promise<T>,\n options?: SmartPollingOptions,\n): SmartPollingResult<T> {\n const { interval = 5000, enabled = true } = options ?? {};\n const visible = useDocVisible();\n const [data, setData] = useState<T | undefined>(undefined);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState<Error | undefined>(undefined);\n const fetchRef = useRef(fetchFn);\n const timerRef = useRef<ReturnType<typeof setInterval> | undefined>(\n undefined,\n );\n\n fetchRef.current = fetchFn;\n\n const execute = useCallback(async () => {\n try {\n const result = await fetchRef.current();\n setData(result);\n setError(undefined);\n } catch (err) {\n setError(err instanceof Error ? err : new Error(String(err)));\n } finally {\n setIsLoading(false);\n }\n }, []);\n\n // Initial fetch\n useEffect(() => {\n if (!enabled) return;\n setIsLoading(true);\n execute();\n }, [enabled, execute]);\n\n // Polling — only when visible and enabled\n useEffect(() => {\n if (!enabled || !visible) {\n clearInterval(timerRef.current);\n return;\n }\n\n timerRef.current = setInterval(execute, interval);\n return () => clearInterval(timerRef.current);\n }, [visible, enabled, interval, execute]);\n\n return { data, isLoading, isError: !!error, error, refetch: execute };\n}\n"],"mappings":"AAAA,OAAS,aAAAA,EAAW,YAAAC,MAAgB,QAE7B,SAASC,GAAyB,CACvC,GAAM,CAACC,EAASC,CAAU,EAAIH,EAC5B,OAAO,UAAa,aAAe,SAAS,kBAAoB,SAClE,EAEA,OAAAD,EAAU,IAAM,CACd,GAAI,OAAO,UAAa,YAAa,OACrC,IAAMK,EAAU,IAAMD,EAAW,SAAS,kBAAoB,SAAS,EACvE,gBAAS,iBAAiB,mBAAoBC,CAAO,EAC9C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAO,CACvE,EAAG,CAAC,CAAC,EAEEF,CACT,CCfA,OAAS,aAAAG,EAAW,YAAAC,MAAgB,QAG7B,SAASC,EAAkBC,EAAU,IAAO,CACjD,IAAMC,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,EAAIC,EAAS,EAAK,EAEtC,OAAAC,EAAU,IAAM,CACd,IAAIC,EAEEC,EAAQ,IAAM,CAClBJ,EAAQ,EAAK,EACb,aAAaG,CAAK,EAClBA,EAAQ,WAAW,IAAMH,EAAQ,EAAI,EAAGJ,CAAO,CACjD,EAEA,cAAO,iBAAiB,YAAaQ,CAAK,EAC1C,OAAO,iBAAiB,UAAWA,CAAK,EACxCA,EAAM,EAEC,IAAM,CACX,OAAO,oBAAoB,YAAaA,CAAK,EAC7C,OAAO,oBAAoB,UAAWA,CAAK,EAC3C,aAAaD,CAAK,CACpB,CACF,EAAG,CAACP,CAAO,CAAC,EAEL,CAAE,QAAAC,EAAS,KAAAE,CAAK,CACzB,CC5BA,OAAS,aAAAM,MAAiB,QAGnB,SAASC,EAAkBC,EAAwC,CACxE,IAAMC,EAAUC,EAAc,EAE9BC,EAAU,IAAM,CACd,IAAMC,EAAQJ,EAAI,QACbI,IAEAH,EACAG,EAAM,KAAK,EAAE,MAAM,IAAM,CAAC,CAAC,EADlBA,EAAM,MAAM,EAE5B,EAAG,CAACH,EAASD,CAAG,CAAC,CACnB,CCbA,OAAS,YAAAK,EAAU,aAAAC,EAAW,UAAAC,EAAQ,eAAAC,MAAmB,QAgBlD,SAASC,EACdC,EACAC,EACuB,CACvB,GAAM,CAAE,SAAAC,EAAW,IAAM,QAAAC,EAAU,EAAK,EAAIF,GAAA,KAAAA,EAAW,CAAC,EAClDG,EAAUC,EAAc,EACxB,CAACC,EAAMC,CAAO,EAAIC,EAAwB,MAAS,EACnD,CAACC,EAAWC,CAAY,EAAIF,EAAS,EAAI,EACzC,CAACG,EAAOC,CAAQ,EAAIJ,EAA4B,MAAS,EACzDK,EAAWC,EAAOd,CAAO,EACzBe,EAAWD,EACf,MACF,EAEAD,EAAS,QAAUb,EAEnB,IAAMgB,EAAUC,EAAY,SAAY,CACtC,GAAI,CACF,IAAMC,EAAS,MAAML,EAAS,QAAQ,EACtCN,EAAQW,CAAM,EACdN,EAAS,MAAS,CACpB,OAASO,EAAK,CACZP,EAASO,aAAe,MAAQA,EAAM,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,CAC9D,QAAE,CACAT,EAAa,EAAK,CACpB,CACF,EAAG,CAAC,CAAC,EAGL,OAAAU,EAAU,IAAM,CACTjB,IACLO,EAAa,EAAI,EACjBM,EAAQ,EACV,EAAG,CAACb,EAASa,CAAO,CAAC,EAGrBI,EAAU,IAAM,CACd,GAAI,CAACjB,GAAW,CAACC,EAAS,CACxB,cAAcW,EAAS,OAAO,EAC9B,MACF,CAEA,OAAAA,EAAS,QAAU,YAAYC,EAASd,CAAQ,EACzC,IAAM,cAAca,EAAS,OAAO,CAC7C,EAAG,CAACX,EAASD,EAASD,EAAUc,CAAO,CAAC,EAEjC,CAAE,KAAAV,EAAM,UAAAG,EAAW,QAAS,CAAC,CAACE,EAAO,MAAAA,EAAO,QAASK,CAAQ,CACtE","names":["useEffect","useState","useDocVisible","visible","setVisible","handler","useEffect","useState","useIdleVisibility","timeout","visible","useDocVisible","idle","setIdle","useState","useEffect","timer","reset","useEffect","useAutoPauseVideo","ref","visible","useDocVisible","useEffect","video","useState","useEffect","useRef","useCallback","useSmartPolling","fetchFn","options","interval","enabled","visible","useDocVisible","data","setData","useState","isLoading","setIsLoading","error","setError","fetchRef","useRef","timerRef","execute","useCallback","result","err","useEffect"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-visibility-hooks",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "Tiny, SSR-safe React hooks for page visibility, idle detection and smart polling",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -45,14 +45,8 @@
45
45
  "url": "https://github.com/exewhyz/react-visibility-hooks/issues"
46
46
  },
47
47
  "peerDependencies": {
48
- "@tanstack/react-query": ">=4",
49
48
  "react": ">=18"
50
49
  },
51
- "peerDependenciesMeta": {
52
- "@tanstack/react-query": {
53
- "optional": true
54
- }
55
- },
56
50
  "devDependencies": {
57
51
  "@testing-library/react": "^16.3.2",
58
52
  "@types/jest": "^30.0.0",