@applicaster/zapp-react-native-utils 13.0.0-rc.110 → 13.0.0-rc.112

package/appUtils/playerManager/playerHooks/usePlayerCurrentTime.tsx

@@ -12,7 +12,7 @@ import { useThrottle } from "../../../functionUtils";
 export const usePlayerCurrentTime = (
   listenerId: string,
   playerId?: string
-): number | null => {
+): { currentTime: number | null; cancel: () => void } => {
   const [currentTime, setCurrentTime] = useState<number | null>(null);
   const player: Player = usePlayer(playerId);
 
@@ -20,15 +20,17 @@ export const usePlayerCurrentTime = (
     if (player) {
       const newCurrentTime = player.getContentPosition();
 
-      setCurrentTime((prevTime) =>
-        prevTime !== newCurrentTime ? newCurrentTime : prevTime
-      );
+      setCurrentTime(newCurrentTime);
     }
   }, [player]);
 
+  // We update the current time every ~250ms since player can have rate set to 2x.
+  // We update more often than 2x a second to avoid noticiable 'pulsation' in update,
+  //  since native level also updates the current time every ~250ms,
+  //  and combined with assorted delays it creates interference pattern.
   const { throttledFunction: throttledUpdate, cancel } = useThrottle(
     updateCurrentTime,
-    1000
+    1000 / 4
   );
 
   useEffect(() => {
@@ -36,7 +38,9 @@ export const usePlayerCurrentTime = (
       throttledUpdate();
 
       const listeners = {
-        onVideoProgress: throttledUpdate,
+        onVideoProgress: () => {
+          setCurrentTime(player.getContentPosition());
+        },
       };
 
       const id = `${listenerId}_player_current_time`;
@@ -53,5 +57,5 @@ export const usePlayerCurrentTime = (
     }
   }, [player, listenerId, throttledUpdate, cancel]);
 
-  return currentTime;
+  return { currentTime, cancel };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-rc.110",
+  "version": "13.0.0-rc.112",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-rc.110",
+    "@applicaster/applicaster-types": "13.0.0-rc.112",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/configurationGenerator.ts

@@ -39,21 +39,13 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "Disable if you don't want the content to have a right orientation",
       },
-      {
-        key: "magic_background",
-        label: "Enable Magic Background",
-        initial_value: false,
-        type: "switch",
-        label_tooltip:
-          "Enable if you want to have adaptive background gradient based on audio background image.",
-      },
       {
         key: "audio_player_background_image_query",
         label: "Audio Player Image Query",
         initial_value: "",
         type: "text_input",
         label_tooltip:
-          "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
+          "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time.",
       },
       {
         key: "audio_player_background_image_default_color",