@applicaster/zapp-react-native-ui-components/Components/MasterCell/SharedUI/ProgressBar/hooks/useFillInPercent.ts

Applicaster Zapp React Native ui components for the Quick Brick App

/* eslint max-len: off */

import * as React from "react";
import * as R from "ramda";

import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
import { normalizeProgressValue } from "./utils";
import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";

const ACTION_NAME = "continue-watching";
const DEFAULT_FILL = 0;

const getProgressValue = (
  action,
  entry,
  callback: (value: number) => void
): void => {
  const continueWatchingEntry = action?.getDecoratedItem?.(entry);

  if (continueWatchingEntry) {
    const fill = R.pathOr(0, ["extensions", "progress"], continueWatchingEntry); // expected to be in range between 0 and 1

    const progress = normalizeProgressValue(DEFAULT_FILL, fill) * 100;

    callback(progress);
  }
};

export const useFillInPercent = (entry: ZappEntry): number => {
  const action = useActions(ACTION_NAME);
  const isActive = useIsScreenActive();

  const [fillInPercent, setFillInPercent] =
    React.useState<number>(DEFAULT_FILL);

  React.useEffect(() => {
    // setup progress in UI on mount
    getProgressValue(action, entry, (progress) => {
      setFillInPercent(progress);
    });
  }, []);

  React.useEffect(() => {
    if (!isActive) {
      return;
    }

    // refresh progress in UI when it was changed in CW
    const unsubscribe = action?.addDataSourceListener?.(() => {
      getProgressValue(action, entry, (progress) => {
        setFillInPercent(progress);
      });
    });

    return () => {
      unsubscribe?.();
    };
  }, [isActive]);

  return fillInPercent;
};