main 🧊 add new hooks for video and audio

Author: debabin

packages/core/src/bundle/hooks/usePictureInPicture/usePictureInPicture.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { getElement, isTarget } from '@/utils/helpers';
 import { useRefState } from '../useRefState/useRefState';
 /**
@@ -30,12 +30,14 @@ export const usePictureInPicture = (...params) => {
   const options = (target ? params[1] : params[0]) ?? {};
   const [open, setOpen] = useState(false);
   const internalRef = useRefState();
+  const elementRef = useRef(null);
+  const onOptionsRef = useRef(options);
+  onOptionsRef.current = options;
   const supported = typeof document !== 'undefined' && 'pictureInPictureEnabled' in document;
   const enter = async () => {
     if (!supported) return;
-    const element = target ? getElement(target) : internalRef.current;
-    if (!element) return;
-    await element.requestPictureInPicture();
+    if (!elementRef.current) return;
+    await elementRef.current.requestPictureInPicture();
     setOpen(true);
     options.onEnter?.();
   };
@@ -45,6 +47,25 @@ export const usePictureInPicture = (...params) => {
     setOpen(false);
     options.onExit?.();
   };
+  useEffect(() => {
+    const element = target ? getElement(target) : internalRef.current;
+    if (!element) return;
+    elementRef.current = element;
+    const onEnterPictureInPicture = () => {
+      setOpen(true);
+      onOptionsRef.current.onEnter?.();
+    };
+    const onLeavePictureInPicture = () => {
+      setOpen(false);
+      onOptionsRef.current.onExit?.();
+    };
+    element.addEventListener('enterpictureinpicture', onEnterPictureInPicture);
+    element.addEventListener('leavepictureinpicture', onLeavePictureInPicture);
+    return () => {
+      element.removeEventListener('enterpictureinpicture', onEnterPictureInPicture);
+      element.removeEventListener('leavepictureinpicture', onLeavePictureInPicture);
+    };
+  }, [target]);
   const toggle = async () => {
     if (open) await exit();
     else await enter();

packages/core/src/bundle/hooks/useShallowEffect/useShallowEffect.js

@@ -18,7 +18,7 @@ export const deepEqual = (a, b) => {
 };
 /**
  * @name useShallowEffect
- * @description - Hook that executes an effect only when dependencies change shallowly or deeply.
+ * @description - Hook that executes an effect only when dependencies change shallowly or deeply
  * @category Lifecycle
  *
  * @param {EffectCallback} effect The effect callback

packages/core/src/hooks/usePictureInPicture/usePictureInPicture.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import type { HookTarget } from '@/utils/helpers';
 
@@ -69,17 +69,18 @@ export const usePictureInPicture = ((...params: any[]) => {
   const [open, setOpen] = useState(false);
 
   const internalRef = useRefState<HTMLVideoElement>();
+  const elementRef = useRef<HTMLVideoElement>(null);
+  const onOptionsRef = useRef<UsePictureInPictureOptions>(options);
+  onOptionsRef.current = options;
 
   const supported = typeof document !== 'undefined' && 'pictureInPictureEnabled' in document;
 
   const enter = async () => {
     if (!supported) return;
 
-    const element = target ? (getElement(target) as HTMLVideoElement) : internalRef.current;
-
-    if (!element) return;
+    if (!elementRef.current) return;
 
-    await element.requestPictureInPicture();
+    await elementRef.current.requestPictureInPicture();
     setOpen(true);
 
     options.onEnter?.();
@@ -93,6 +94,31 @@ export const usePictureInPicture = ((...params: any[]) => {
     options.onExit?.();
   };
 
+  useEffect(() => {
+    const element = target ? (getElement(target) as HTMLVideoElement) : internalRef.current;
+    if (!element) return;
+
+    elementRef.current = element;
+
+    const onEnterPictureInPicture = () => {
+      setOpen(true);
+      onOptionsRef.current.onEnter?.();
+    };
+
+    const onLeavePictureInPicture = () => {
+      setOpen(false);
+      onOptionsRef.current.onExit?.();
+    };
+
+    element.addEventListener('enterpictureinpicture', onEnterPictureInPicture);
+    element.addEventListener('leavepictureinpicture', onLeavePictureInPicture);
+
+    return () => {
+      element.removeEventListener('enterpictureinpicture', onEnterPictureInPicture);
+      element.removeEventListener('leavepictureinpicture', onLeavePictureInPicture);
+    };
+  }, [target]);
+
   const toggle = async () => {
     if (open) await exit();
     else await enter();

packages/core/src/hooks/useShallowEffect/useShallowEffect.ts

@@ -27,7 +27,7 @@ export const deepEqual = (a: any, b: any): boolean => {
 
 /**
  * @name useShallowEffect
- * @description - Hook that executes an effect only when dependencies change shallowly or deeply.
+ * @description - Hook that executes an effect only when dependencies change shallowly or deeply
  * @category Lifecycle
  *
  * @param {EffectCallback} effect The effect callback