@applicaster/zapp-react-native-utils 12.0.0-rc.117 → 12.0.0-rc.118

package/appUtils/playerManager/playerHooks/usePlayerCurrentTime.tsx

@@ -0,0 +1,57 @@
+import { useState, useEffect, useCallback } from "react";
+import { Player } from "../player";
+import { usePlayer } from "../usePlayer";
+import { useThrottle } from "../../../functionUtils";
+
+/**
+ *
+ * @param listenerId - A unique identifier for the listener.
+ * @param playerId - (Optional) The ID of the player to observe.
+ * @returns The current playback time in seconds.
+ */
+export const usePlayerCurrentTime = (
+  listenerId: string,
+  playerId?: string
+): number | null => {
+  const [currentTime, setCurrentTime] = useState<number | null>(null);
+  const player: Player = usePlayer(playerId);
+
+  const updateCurrentTime = useCallback(() => {
+    if (player) {
+      const newCurrentTime = player.getContentPosition();
+
+      setCurrentTime((prevTime) =>
+        prevTime !== newCurrentTime ? newCurrentTime : prevTime
+      );
+    }
+  }, [player]);
+
+  const { throttledFunction: throttledUpdate, cancel } = useThrottle(
+    updateCurrentTime,
+    1000
+  );
+
+  useEffect(() => {
+    if (player) {
+      throttledUpdate();
+
+      const listeners = {
+        onVideoProgress: throttledUpdate,
+      };
+
+      const id = `${listenerId}_player_current_time`;
+
+      player.addListener({
+        id: id,
+        listener: listeners,
+      });
+
+      return () => {
+        player.removeListener(id);
+        cancel();
+      };
+    }
+  }, [player, listenerId, throttledUpdate, cancel]);
+
+  return currentTime;
+};

package/functionUtils/index.ts

@@ -1,4 +1,42 @@
 import * as R from "ramda";
+import { useRef } from "react";
+
+/**
+ *
+ * @param callback - The function to throttle.
+ * @param delay - The delay in milliseconds.
+ * @returns A throttled version of the callback.
+ */
+export const useThrottle = (callback: () => void, delay: number) => {
+  const lastCallRef = useRef<number>(0);
+  const timeoutRef = useRef<any | null>(null);
+
+  const throttledFunction = () => {
+    const now = Date.now();
+
+    if (now - lastCallRef.current >= delay) {
+      callback();
+      lastCallRef.current = now;
+    } else if (!timeoutRef.current) {
+      const remainingTime = delay - (now - lastCallRef.current);
+
+      timeoutRef.current = setTimeout(() => {
+        callback();
+        lastCallRef.current = Date.now();
+        timeoutRef.current = null;
+      }, remainingTime);
+    }
+  };
+
+  const cancel = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+
+  return { throttledFunction, cancel };
+};
 
 /**
  * standard debounce function.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-rc.117",
+  "version": "12.0.0-rc.118",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.117",
+    "@applicaster/applicaster-types": "12.0.0-rc.118",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",