@siberiacancode/reactuse 0.2.20 → 0.2.21
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/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs +1 -1
- package/dist/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs.map +1 -1
- package/dist/cjs/hooks/useShallowEffect/useShallowEffect.cjs.map +1 -1
- package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs +33 -19
- package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs.map +1 -1
- package/dist/esm/hooks/useShallowEffect/useShallowEffect.mjs.map +1 -1
- package/dist/types/hooks/useShallowEffect/useShallowEffect.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),v=require("../useRefState/useRefState.cjs"),g=require("../../utils/helpers/isTarget.cjs"),m=require("../../utils/helpers/getElement.cjs"),I=(...n)=>{const t=g.isTarget(n[0])?n[0]:void 0,r=(t?n[1]:n[0])??{},[a,u]=i.useState(!1),f=v.useRefState(),c=i.useRef(null),o=i.useRef(r);o.current=r;const s=typeof document<"u"&&"pictureInPictureEnabled"in document,l=async()=>{s&&c.current&&(await c.current.requestPictureInPicture(),u(!0),r.onEnter?.())},d=async()=>{s&&(await document.exitPictureInPicture(),u(!1),r.onExit?.())};i.useEffect(()=>{const e=t?m.getElement(t):f.current;if(!e)return;c.current=e;const P=()=>{u(!0),o.current.onEnter?.()},E=()=>{u(!1),o.current.onExit?.()};return e.addEventListener("enterpictureinpicture",P),e.addEventListener("leavepictureinpicture",E),()=>{e.removeEventListener("enterpictureinpicture",P),e.removeEventListener("leavepictureinpicture",E)}},[t]);const p={open:a,supported:s,enter:l,exit:d,toggle:async()=>{a?await d():await l()}};return t?p:{...p,ref:f}};exports.usePictureInPicture=I;
|
|
2
2
|
//# sourceMappingURL=usePictureInPicture.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePictureInPicture.cjs","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPicture.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use picture in picture options type */\nexport interface UsePictureInPictureOptions {\n /** The callback when Picture-in-Picture mode is entered */\n onEnter?: () => void;\n /** The callback when Picture-in-Picture mode is exited */\n onExit?: () => void;\n}\n\n/** The use picture in picture return type */\nexport interface UsePictureInPictureReturn {\n /** Whether Picture-in-Picture mode is currently active */\n open: boolean;\n /** Whether Picture-in-Picture mode is supported by the browser */\n supported: boolean;\n /** Request to enter Picture-in-Picture mode */\n enter: () => Promise<void>;\n /** Request to exit Picture-in-Picture mode */\n exit: () => Promise<void>;\n /** Toggle Picture-in-Picture mode */\n toggle: () => Promise<void>;\n}\n\nexport interface UsePictureInPicture {\n (target: HookTarget, options?: UsePictureInPictureOptions): UsePictureInPictureReturn;\n\n (options?: UsePictureInPictureOptions): UsePictureInPictureReturn & {\n ref: StateRef<HTMLVideoElement>;\n };\n}\n\n/**\n * @name usePictureInPicture\n * @description - Hook that provides Picture-in-Picture functionality for video elements\n * @category Browser\n *\n * @browserapi window.PictureInPicture https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API\n *\n * @overload\n * @param {HookTarget} target The target video element\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn} An object containing Picture-in-Picture state and controls\n *\n * @example\n * const { open, supported, enter, exit, toggle } = usePictureInPicture(videoRef);\n *\n * @overload\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn & { ref: StateRef<HTMLVideoElement> }} An object containing Picture-in-Picture state, controls and ref\n *\n * @example\n * const { ref, open, supported, enter, exit, toggle } = usePictureInPicture();\n */\nexport const usePictureInPicture = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = ((target ? params[1] : params[0]) as UsePictureInPictureOptions) ?? {};\n\n const [open, setOpen] = useState(false);\n\n const internalRef = useRefState<HTMLVideoElement>();\n\n const supported = typeof document !== 'undefined' && 'pictureInPictureEnabled' in document;\n\n const enter = async () => {\n if (!supported) return;\n\n const element = target ? (getElement(target) as HTMLVideoElement) : internalRef.current;\n
|
|
1
|
+
{"version":3,"file":"usePictureInPicture.cjs","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPicture.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use picture in picture options type */\nexport interface UsePictureInPictureOptions {\n /** The callback when Picture-in-Picture mode is entered */\n onEnter?: () => void;\n /** The callback when Picture-in-Picture mode is exited */\n onExit?: () => void;\n}\n\n/** The use picture in picture return type */\nexport interface UsePictureInPictureReturn {\n /** Whether Picture-in-Picture mode is currently active */\n open: boolean;\n /** Whether Picture-in-Picture mode is supported by the browser */\n supported: boolean;\n /** Request to enter Picture-in-Picture mode */\n enter: () => Promise<void>;\n /** Request to exit Picture-in-Picture mode */\n exit: () => Promise<void>;\n /** Toggle Picture-in-Picture mode */\n toggle: () => Promise<void>;\n}\n\nexport interface UsePictureInPicture {\n (target: HookTarget, options?: UsePictureInPictureOptions): UsePictureInPictureReturn;\n\n (options?: UsePictureInPictureOptions): UsePictureInPictureReturn & {\n ref: StateRef<HTMLVideoElement>;\n };\n}\n\n/**\n * @name usePictureInPicture\n * @description - Hook that provides Picture-in-Picture functionality for video elements\n * @category Browser\n *\n * @browserapi window.PictureInPicture https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API\n *\n * @overload\n * @param {HookTarget} target The target video element\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn} An object containing Picture-in-Picture state and controls\n *\n * @example\n * const { open, supported, enter, exit, toggle } = usePictureInPicture(videoRef);\n *\n * @overload\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn & { ref: StateRef<HTMLVideoElement> }} An object containing Picture-in-Picture state, controls and ref\n *\n * @example\n * const { ref, open, supported, enter, exit, toggle } = usePictureInPicture();\n */\nexport const usePictureInPicture = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = ((target ? params[1] : params[0]) as UsePictureInPictureOptions) ?? {};\n\n const [open, setOpen] = useState(false);\n\n const internalRef = useRefState<HTMLVideoElement>();\n const elementRef = useRef<HTMLVideoElement>(null);\n const onOptionsRef = useRef<UsePictureInPictureOptions>(options);\n onOptionsRef.current = options;\n\n const supported = typeof document !== 'undefined' && 'pictureInPictureEnabled' in document;\n\n const enter = async () => {\n if (!supported) return;\n\n if (!elementRef.current) return;\n\n await elementRef.current.requestPictureInPicture();\n setOpen(true);\n\n options.onEnter?.();\n };\n\n const exit = async () => {\n if (!supported) return;\n\n await document.exitPictureInPicture();\n setOpen(false);\n options.onExit?.();\n };\n\n useEffect(() => {\n const element = target ? (getElement(target) as HTMLVideoElement) : internalRef.current;\n if (!element) return;\n\n elementRef.current = element;\n\n const onEnterPictureInPicture = () => {\n setOpen(true);\n onOptionsRef.current.onEnter?.();\n };\n\n const onLeavePictureInPicture = () => {\n setOpen(false);\n onOptionsRef.current.onExit?.();\n };\n\n element.addEventListener('enterpictureinpicture', onEnterPictureInPicture);\n element.addEventListener('leavepictureinpicture', onLeavePictureInPicture);\n\n return () => {\n element.removeEventListener('enterpictureinpicture', onEnterPictureInPicture);\n element.removeEventListener('leavepictureinpicture', onLeavePictureInPicture);\n };\n }, [target]);\n\n const toggle = async () => {\n if (open) await exit();\n else await enter();\n };\n\n const value = {\n open,\n supported,\n enter,\n exit,\n toggle\n };\n\n if (target) return value;\n return { ...value, ref: internalRef };\n}) as UsePictureInPicture;\n"],"names":["usePictureInPicture","params","target","isTarget","options","open","setOpen","useState","internalRef","useRefState","elementRef","useRef","onOptionsRef","supported","enter","exit","useEffect","element","getElement","onEnterPictureInPicture","onLeavePictureInPicture","value"],"mappings":"mPAgEaA,EAAuB,IAAIC,IAAkB,CACxD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,GAAYF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,IAAqC,CAAA,EAE9E,CAACI,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAEhCC,EAAcC,EAAAA,YAAA,EACdC,EAAaC,EAAAA,OAAyB,IAAI,EAC1CC,EAAeD,EAAAA,OAAmCP,CAAO,EAC/DQ,EAAa,QAAUR,EAEvB,MAAMS,EAAY,OAAO,SAAa,KAAe,4BAA6B,SAE5EC,EAAQ,SAAY,CACnBD,GAEAH,EAAW,UAEhB,MAAMA,EAAW,QAAQ,wBAAA,EACzBJ,EAAQ,EAAI,EAEZF,EAAQ,UAAA,EAAU,EAGdW,EAAO,SAAY,CAClBF,IAEL,MAAM,SAAS,qBAAA,EACfP,EAAQ,EAAK,EACbF,EAAQ,SAAA,EAAS,EAGnBY,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAUf,EAAUgB,EAAAA,WAAWhB,CAAM,EAAyBM,EAAY,QAChF,GAAI,CAACS,EAAS,OAEdP,EAAW,QAAUO,EAErB,MAAME,EAA0B,IAAM,CACpCb,EAAQ,EAAI,EACZM,EAAa,QAAQ,UAAA,CAAU,EAG3BQ,EAA0B,IAAM,CACpCd,EAAQ,EAAK,EACbM,EAAa,QAAQ,SAAA,CAAS,EAGhC,OAAAK,EAAQ,iBAAiB,wBAAyBE,CAAuB,EACzEF,EAAQ,iBAAiB,wBAAyBG,CAAuB,EAElE,IAAM,CACXH,EAAQ,oBAAoB,wBAAyBE,CAAuB,EAC5EF,EAAQ,oBAAoB,wBAAyBG,CAAuB,CAAA,CAC9E,EACC,CAAClB,CAAM,CAAC,EAOX,MAAMmB,EAAQ,CACZ,KAAAhB,EACA,UAAAQ,EACA,MAAAC,EACA,KAAAC,EACA,OAVa,SAAY,CACrBV,QAAYU,EAAA,QACLD,EAAA,CAAM,CAQjB,EAGF,OAAIZ,EAAemB,EACZ,CAAE,GAAGA,EAAO,IAAKb,CAAA,CAC1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShallowEffect.cjs","sources":["../../../../src/hooks/useShallowEffect/useShallowEffect.ts"],"sourcesContent":["import type { DependencyList, EffectCallback } from 'react';\n\nimport { useEffect, useRef } from 'react';\n\nexport const deepEqual = (a: any, b: any): boolean => {\n if (a === b) return true;\n if (a == null || b == null) return a === b;\n if (typeof a !== typeof b) return false;\n if (typeof a !== 'object') return a === b;\n if (Array.isArray(a) !== Array.isArray(b)) return false;\n\n if (Array.isArray(a))\n return a.length === b.length && a.every((value, index) => deepEqual(value, b[index]));\n\n const keysA = Object.keys(a);\n const keysB = Object.keys(b);\n\n if (keysA.length !== keysB.length) return false;\n\n for (const key of keysA) {\n if (!keysB.includes(key)) return false;\n if (!deepEqual(a[key], b[key])) return false;\n }\n\n return true;\n};\n\n/**\n * @name useShallowEffect\n * @description - Hook that executes an effect only when dependencies change shallowly or deeply
|
|
1
|
+
{"version":3,"file":"useShallowEffect.cjs","sources":["../../../../src/hooks/useShallowEffect/useShallowEffect.ts"],"sourcesContent":["import type { DependencyList, EffectCallback } from 'react';\n\nimport { useEffect, useRef } from 'react';\n\nexport const deepEqual = (a: any, b: any): boolean => {\n if (a === b) return true;\n if (a == null || b == null) return a === b;\n if (typeof a !== typeof b) return false;\n if (typeof a !== 'object') return a === b;\n if (Array.isArray(a) !== Array.isArray(b)) return false;\n\n if (Array.isArray(a))\n return a.length === b.length && a.every((value, index) => deepEqual(value, b[index]));\n\n const keysA = Object.keys(a);\n const keysB = Object.keys(b);\n\n if (keysA.length !== keysB.length) return false;\n\n for (const key of keysA) {\n if (!keysB.includes(key)) return false;\n if (!deepEqual(a[key], b[key])) return false;\n }\n\n return true;\n};\n\n/**\n * @name useShallowEffect\n * @description - Hook that executes an effect only when dependencies change shallowly or deeply\n * @category Lifecycle\n *\n * @param {EffectCallback} effect The effect callback\n * @param {DependencyList} [deps] The dependencies list for the effect\n *\n * @example\n * useShallowEffect(() => console.log(\"effect\"), [user]);\n */\nexport const useShallowEffect = (effect: EffectCallback, deps?: DependencyList) => {\n const depsRef = useRef<DependencyList>(deps);\n\n if (!depsRef.current || !deepEqual(deps, depsRef.current)) {\n depsRef.current = deps;\n }\n\n useEffect(effect, depsRef.current);\n};\n"],"names":["deepEqual","a","b","value","index","keysA","keysB","key","useShallowEffect","effect","deps","depsRef","useRef","useEffect"],"mappings":"yGAIaA,EAAY,CAACC,EAAQC,IAAoB,CACpD,GAAID,IAAMC,EAAG,MAAO,GACpB,GAAID,GAAK,MAAQC,GAAK,YAAaD,IAAMC,EACzC,GAAI,OAAOD,GAAM,OAAOC,EAAG,MAAO,GAClC,GAAI,OAAOD,GAAM,SAAU,OAAOA,IAAMC,EACxC,GAAI,MAAM,QAAQD,CAAC,IAAM,MAAM,QAAQC,CAAC,EAAG,MAAO,GAElD,GAAI,MAAM,QAAQD,CAAC,EACjB,OAAOA,EAAE,SAAWC,EAAE,QAAUD,EAAE,MAAM,CAACE,EAAOC,IAAUJ,EAAUG,EAAOD,EAAEE,CAAK,CAAC,CAAC,EAEtF,MAAMC,EAAQ,OAAO,KAAKJ,CAAC,EACrBK,EAAQ,OAAO,KAAKJ,CAAC,EAE3B,GAAIG,EAAM,SAAWC,EAAM,OAAQ,MAAO,GAE1C,UAAWC,KAAOF,EAEhB,GADI,CAACC,EAAM,SAASC,CAAG,GACnB,CAACP,EAAUC,EAAEM,CAAG,EAAGL,EAAEK,CAAG,CAAC,EAAG,MAAO,GAGzC,MAAO,EACT,EAaaC,EAAmB,CAACC,EAAwBC,IAA0B,CACjF,MAAMC,EAAUC,EAAAA,OAAuBF,CAAI,GAEvC,CAACC,EAAQ,SAAW,CAACX,EAAUU,EAAMC,EAAQ,OAAO,KACtDA,EAAQ,QAAUD,GAGpBG,YAAUJ,EAAQE,EAAQ,OAAO,CACnC"}
|
|
@@ -1,26 +1,40 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { useRefState as
|
|
3
|
-
import { isTarget as
|
|
4
|
-
import { getElement as
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
},
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
import { useState as v, useRef as E, useEffect as P } from "react";
|
|
2
|
+
import { useRefState as g } from "../useRefState/useRefState.mjs";
|
|
3
|
+
import { isTarget as I } from "../../utils/helpers/isTarget.mjs";
|
|
4
|
+
import { getElement as x } from "../../utils/helpers/getElement.mjs";
|
|
5
|
+
const S = (...n) => {
|
|
6
|
+
const t = I(n[0]) ? n[0] : void 0, r = (t ? n[1] : n[0]) ?? {}, [s, i] = v(!1), f = g(), c = E(null), u = E(r);
|
|
7
|
+
u.current = r;
|
|
8
|
+
const o = typeof document < "u" && "pictureInPictureEnabled" in document, a = async () => {
|
|
9
|
+
o && c.current && (await c.current.requestPictureInPicture(), i(!0), r.onEnter?.());
|
|
10
|
+
}, p = async () => {
|
|
11
|
+
o && (await document.exitPictureInPicture(), i(!1), r.onExit?.());
|
|
12
|
+
};
|
|
13
|
+
P(() => {
|
|
14
|
+
const e = t ? x(t) : f.current;
|
|
15
|
+
if (!e) return;
|
|
16
|
+
c.current = e;
|
|
17
|
+
const m = () => {
|
|
18
|
+
i(!0), u.current.onEnter?.();
|
|
19
|
+
}, d = () => {
|
|
20
|
+
i(!1), u.current.onExit?.();
|
|
21
|
+
};
|
|
22
|
+
return e.addEventListener("enterpictureinpicture", m), e.addEventListener("leavepictureinpicture", d), () => {
|
|
23
|
+
e.removeEventListener("enterpictureinpicture", m), e.removeEventListener("leavepictureinpicture", d);
|
|
24
|
+
};
|
|
25
|
+
}, [t]);
|
|
26
|
+
const l = {
|
|
27
|
+
open: s,
|
|
28
|
+
supported: o,
|
|
29
|
+
enter: a,
|
|
30
|
+
exit: p,
|
|
17
31
|
toggle: async () => {
|
|
18
|
-
|
|
32
|
+
s ? await p() : await a();
|
|
19
33
|
}
|
|
20
34
|
};
|
|
21
|
-
return
|
|
35
|
+
return t ? l : { ...l, ref: f };
|
|
22
36
|
};
|
|
23
37
|
export {
|
|
24
|
-
|
|
38
|
+
S as usePictureInPicture
|
|
25
39
|
};
|
|
26
40
|
//# sourceMappingURL=usePictureInPicture.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePictureInPicture.mjs","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPicture.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use picture in picture options type */\nexport interface UsePictureInPictureOptions {\n /** The callback when Picture-in-Picture mode is entered */\n onEnter?: () => void;\n /** The callback when Picture-in-Picture mode is exited */\n onExit?: () => void;\n}\n\n/** The use picture in picture return type */\nexport interface UsePictureInPictureReturn {\n /** Whether Picture-in-Picture mode is currently active */\n open: boolean;\n /** Whether Picture-in-Picture mode is supported by the browser */\n supported: boolean;\n /** Request to enter Picture-in-Picture mode */\n enter: () => Promise<void>;\n /** Request to exit Picture-in-Picture mode */\n exit: () => Promise<void>;\n /** Toggle Picture-in-Picture mode */\n toggle: () => Promise<void>;\n}\n\nexport interface UsePictureInPicture {\n (target: HookTarget, options?: UsePictureInPictureOptions): UsePictureInPictureReturn;\n\n (options?: UsePictureInPictureOptions): UsePictureInPictureReturn & {\n ref: StateRef<HTMLVideoElement>;\n };\n}\n\n/**\n * @name usePictureInPicture\n * @description - Hook that provides Picture-in-Picture functionality for video elements\n * @category Browser\n *\n * @browserapi window.PictureInPicture https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API\n *\n * @overload\n * @param {HookTarget} target The target video element\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn} An object containing Picture-in-Picture state and controls\n *\n * @example\n * const { open, supported, enter, exit, toggle } = usePictureInPicture(videoRef);\n *\n * @overload\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn & { ref: StateRef<HTMLVideoElement> }} An object containing Picture-in-Picture state, controls and ref\n *\n * @example\n * const { ref, open, supported, enter, exit, toggle } = usePictureInPicture();\n */\nexport const usePictureInPicture = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = ((target ? params[1] : params[0]) as UsePictureInPictureOptions) ?? {};\n\n const [open, setOpen] = useState(false);\n\n const internalRef = useRefState<HTMLVideoElement>();\n\n const supported = typeof document !== 'undefined' && 'pictureInPictureEnabled' in document;\n\n const enter = async () => {\n if (!supported) return;\n\n const element = target ? (getElement(target) as HTMLVideoElement) : internalRef.current;\n
|
|
1
|
+
{"version":3,"file":"usePictureInPicture.mjs","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPicture.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use picture in picture options type */\nexport interface UsePictureInPictureOptions {\n /** The callback when Picture-in-Picture mode is entered */\n onEnter?: () => void;\n /** The callback when Picture-in-Picture mode is exited */\n onExit?: () => void;\n}\n\n/** The use picture in picture return type */\nexport interface UsePictureInPictureReturn {\n /** Whether Picture-in-Picture mode is currently active */\n open: boolean;\n /** Whether Picture-in-Picture mode is supported by the browser */\n supported: boolean;\n /** Request to enter Picture-in-Picture mode */\n enter: () => Promise<void>;\n /** Request to exit Picture-in-Picture mode */\n exit: () => Promise<void>;\n /** Toggle Picture-in-Picture mode */\n toggle: () => Promise<void>;\n}\n\nexport interface UsePictureInPicture {\n (target: HookTarget, options?: UsePictureInPictureOptions): UsePictureInPictureReturn;\n\n (options?: UsePictureInPictureOptions): UsePictureInPictureReturn & {\n ref: StateRef<HTMLVideoElement>;\n };\n}\n\n/**\n * @name usePictureInPicture\n * @description - Hook that provides Picture-in-Picture functionality for video elements\n * @category Browser\n *\n * @browserapi window.PictureInPicture https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API\n *\n * @overload\n * @param {HookTarget} target The target video element\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn} An object containing Picture-in-Picture state and controls\n *\n * @example\n * const { open, supported, enter, exit, toggle } = usePictureInPicture(videoRef);\n *\n * @overload\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn & { ref: StateRef<HTMLVideoElement> }} An object containing Picture-in-Picture state, controls and ref\n *\n * @example\n * const { ref, open, supported, enter, exit, toggle } = usePictureInPicture();\n */\nexport const usePictureInPicture = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = ((target ? params[1] : params[0]) as UsePictureInPictureOptions) ?? {};\n\n const [open, setOpen] = useState(false);\n\n const internalRef = useRefState<HTMLVideoElement>();\n const elementRef = useRef<HTMLVideoElement>(null);\n const onOptionsRef = useRef<UsePictureInPictureOptions>(options);\n onOptionsRef.current = options;\n\n const supported = typeof document !== 'undefined' && 'pictureInPictureEnabled' in document;\n\n const enter = async () => {\n if (!supported) return;\n\n if (!elementRef.current) return;\n\n await elementRef.current.requestPictureInPicture();\n setOpen(true);\n\n options.onEnter?.();\n };\n\n const exit = async () => {\n if (!supported) return;\n\n await document.exitPictureInPicture();\n setOpen(false);\n options.onExit?.();\n };\n\n useEffect(() => {\n const element = target ? (getElement(target) as HTMLVideoElement) : internalRef.current;\n if (!element) return;\n\n elementRef.current = element;\n\n const onEnterPictureInPicture = () => {\n setOpen(true);\n onOptionsRef.current.onEnter?.();\n };\n\n const onLeavePictureInPicture = () => {\n setOpen(false);\n onOptionsRef.current.onExit?.();\n };\n\n element.addEventListener('enterpictureinpicture', onEnterPictureInPicture);\n element.addEventListener('leavepictureinpicture', onLeavePictureInPicture);\n\n return () => {\n element.removeEventListener('enterpictureinpicture', onEnterPictureInPicture);\n element.removeEventListener('leavepictureinpicture', onLeavePictureInPicture);\n };\n }, [target]);\n\n const toggle = async () => {\n if (open) await exit();\n else await enter();\n };\n\n const value = {\n open,\n supported,\n enter,\n exit,\n toggle\n };\n\n if (target) return value;\n return { ...value, ref: internalRef };\n}) as UsePictureInPicture;\n"],"names":["usePictureInPicture","params","target","isTarget","options","open","setOpen","useState","internalRef","useRefState","elementRef","useRef","onOptionsRef","supported","enter","exit","useEffect","element","getElement","onEnterPictureInPicture","onLeavePictureInPicture","value"],"mappings":";;;;AAgEO,MAAMA,IAAuB,IAAIC,MAAkB;AACxD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,KAAYF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,MAAqC,CAAA,GAE9E,CAACI,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAEhCC,IAAcC,EAAA,GACdC,IAAaC,EAAyB,IAAI,GAC1CC,IAAeD,EAAmCP,CAAO;AAC/D,EAAAQ,EAAa,UAAUR;AAEvB,QAAMS,IAAY,OAAO,WAAa,OAAe,6BAA6B,UAE5EC,IAAQ,YAAY;AACxB,IAAKD,KAEAH,EAAW,YAEhB,MAAMA,EAAW,QAAQ,wBAAA,GACzBJ,EAAQ,EAAI,GAEZF,EAAQ,UAAA;AAAA,EAAU,GAGdW,IAAO,YAAY;AACvB,IAAKF,MAEL,MAAM,SAAS,qBAAA,GACfP,EAAQ,EAAK,GACbF,EAAQ,SAAA;AAAA,EAAS;AAGnB,EAAAY,EAAU,MAAM;AACd,UAAMC,IAAUf,IAAUgB,EAAWhB,CAAM,IAAyBM,EAAY;AAChF,QAAI,CAACS,EAAS;AAEd,IAAAP,EAAW,UAAUO;AAErB,UAAME,IAA0B,MAAM;AACpC,MAAAb,EAAQ,EAAI,GACZM,EAAa,QAAQ,UAAA;AAAA,IAAU,GAG3BQ,IAA0B,MAAM;AACpC,MAAAd,EAAQ,EAAK,GACbM,EAAa,QAAQ,SAAA;AAAA,IAAS;AAGhC,WAAAK,EAAQ,iBAAiB,yBAAyBE,CAAuB,GACzEF,EAAQ,iBAAiB,yBAAyBG,CAAuB,GAElE,MAAM;AACX,MAAAH,EAAQ,oBAAoB,yBAAyBE,CAAuB,GAC5EF,EAAQ,oBAAoB,yBAAyBG,CAAuB;AAAA,IAAA;AAAA,EAC9E,GACC,CAAClB,CAAM,CAAC;AAOX,QAAMmB,IAAQ;AAAA,IACZ,MAAAhB;AAAA,IACA,WAAAQ;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAVa,YAAY;AACzB,MAAIV,UAAYU,EAAA,UACLD,EAAA;AAAA,IAAM;AAAA,EAQjB;AAGF,SAAIZ,IAAemB,IACZ,EAAE,GAAGA,GAAO,KAAKb,EAAA;AAC1B;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShallowEffect.mjs","sources":["../../../../src/hooks/useShallowEffect/useShallowEffect.ts"],"sourcesContent":["import type { DependencyList, EffectCallback } from 'react';\n\nimport { useEffect, useRef } from 'react';\n\nexport const deepEqual = (a: any, b: any): boolean => {\n if (a === b) return true;\n if (a == null || b == null) return a === b;\n if (typeof a !== typeof b) return false;\n if (typeof a !== 'object') return a === b;\n if (Array.isArray(a) !== Array.isArray(b)) return false;\n\n if (Array.isArray(a))\n return a.length === b.length && a.every((value, index) => deepEqual(value, b[index]));\n\n const keysA = Object.keys(a);\n const keysB = Object.keys(b);\n\n if (keysA.length !== keysB.length) return false;\n\n for (const key of keysA) {\n if (!keysB.includes(key)) return false;\n if (!deepEqual(a[key], b[key])) return false;\n }\n\n return true;\n};\n\n/**\n * @name useShallowEffect\n * @description - Hook that executes an effect only when dependencies change shallowly or deeply
|
|
1
|
+
{"version":3,"file":"useShallowEffect.mjs","sources":["../../../../src/hooks/useShallowEffect/useShallowEffect.ts"],"sourcesContent":["import type { DependencyList, EffectCallback } from 'react';\n\nimport { useEffect, useRef } from 'react';\n\nexport const deepEqual = (a: any, b: any): boolean => {\n if (a === b) return true;\n if (a == null || b == null) return a === b;\n if (typeof a !== typeof b) return false;\n if (typeof a !== 'object') return a === b;\n if (Array.isArray(a) !== Array.isArray(b)) return false;\n\n if (Array.isArray(a))\n return a.length === b.length && a.every((value, index) => deepEqual(value, b[index]));\n\n const keysA = Object.keys(a);\n const keysB = Object.keys(b);\n\n if (keysA.length !== keysB.length) return false;\n\n for (const key of keysA) {\n if (!keysB.includes(key)) return false;\n if (!deepEqual(a[key], b[key])) return false;\n }\n\n return true;\n};\n\n/**\n * @name useShallowEffect\n * @description - Hook that executes an effect only when dependencies change shallowly or deeply\n * @category Lifecycle\n *\n * @param {EffectCallback} effect The effect callback\n * @param {DependencyList} [deps] The dependencies list for the effect\n *\n * @example\n * useShallowEffect(() => console.log(\"effect\"), [user]);\n */\nexport const useShallowEffect = (effect: EffectCallback, deps?: DependencyList) => {\n const depsRef = useRef<DependencyList>(deps);\n\n if (!depsRef.current || !deepEqual(deps, depsRef.current)) {\n depsRef.current = deps;\n }\n\n useEffect(effect, depsRef.current);\n};\n"],"names":["deepEqual","a","b","value","index","keysA","keysB","key","useShallowEffect","effect","deps","depsRef","useRef","useEffect"],"mappings":";AAIO,MAAMA,IAAY,CAACC,GAAQC,MAAoB;AACpD,MAAID,MAAMC,EAAG,QAAO;AACpB,MAAID,KAAK,QAAQC,KAAK,aAAaD,MAAMC;AACzC,MAAI,OAAOD,KAAM,OAAOC,EAAG,QAAO;AAClC,MAAI,OAAOD,KAAM,SAAU,QAAOA,MAAMC;AACxC,MAAI,MAAM,QAAQD,CAAC,MAAM,MAAM,QAAQC,CAAC,EAAG,QAAO;AAElD,MAAI,MAAM,QAAQD,CAAC;AACjB,WAAOA,EAAE,WAAWC,EAAE,UAAUD,EAAE,MAAM,CAACE,GAAOC,MAAUJ,EAAUG,GAAOD,EAAEE,CAAK,CAAC,CAAC;AAEtF,QAAMC,IAAQ,OAAO,KAAKJ,CAAC,GACrBK,IAAQ,OAAO,KAAKJ,CAAC;AAE3B,MAAIG,EAAM,WAAWC,EAAM,OAAQ,QAAO;AAE1C,aAAWC,KAAOF;AAEhB,QADI,CAACC,EAAM,SAASC,CAAG,KACnB,CAACP,EAAUC,EAAEM,CAAG,GAAGL,EAAEK,CAAG,CAAC,EAAG,QAAO;AAGzC,SAAO;AACT,GAaaC,IAAmB,CAACC,GAAwBC,MAA0B;AACjF,QAAMC,IAAUC,EAAuBF,CAAI;AAE3C,GAAI,CAACC,EAAQ,WAAW,CAACX,EAAUU,GAAMC,EAAQ,OAAO,OACtDA,EAAQ,UAAUD,IAGpBG,EAAUJ,GAAQE,EAAQ,OAAO;AACnC;"}
|
|
@@ -2,7 +2,7 @@ import { DependencyList, EffectCallback } from 'react';
|
|
|
2
2
|
export declare const deepEqual: (a: any, b: any) => boolean;
|
|
3
3
|
/**
|
|
4
4
|
* @name useShallowEffect
|
|
5
|
-
* @description - Hook that executes an effect only when dependencies change shallowly or deeply
|
|
5
|
+
* @description - Hook that executes an effect only when dependencies change shallowly or deeply
|
|
6
6
|
* @category Lifecycle
|
|
7
7
|
*
|
|
8
8
|
* @param {EffectCallback} effect The effect callback
|