[Feature] Added slideshow to gallery in wall display mode (#1224)

ui/v2.5/src/hooks/Interval.ts

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from "react";
+import noop from "lodash/noop";
+
+const MIN_VALID_INTERVAL = 1000;
+
+const useInterval = (
+  callback: () => void,
+  delay: number | null = 5000
+): (() => void)[] => {
+  const savedCallback = useRef<() => void>();
+  const savedIntervalId = useRef<NodeJS.Timeout>();
+  const [savedDelay, setSavedDelay] = useState<number | null>(delay);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    let validDelay;
+    if (delay !== null) {
+      validDelay = delay >= MIN_VALID_INTERVAL ? delay : MIN_VALID_INTERVAL;
+    } else {
+      validDelay = delay;
+    }
+
+    setSavedDelay(validDelay);
+  }, [delay]);
+
+  const cancel = () => {
+    const intervalId = savedIntervalId.current;
+    if (intervalId) {
+      savedIntervalId.current = undefined;
+      clearInterval(intervalId);
+    }
+  };
+
+  const reset = () => {
+    cancel();
+
+    const tick = () => {
+      if (savedCallback.current) savedCallback.current();
+    };
+
+    if (savedDelay !== null) {
+      savedIntervalId.current = setInterval(tick, savedDelay);
+    }
+  };
+
+  useEffect(() => {
+    cancel();
+
+    const tick = () => {
+      if (savedCallback.current) savedCallback.current();
+    };
+
+    if (savedDelay !== null) {
+      savedIntervalId.current = setInterval(tick, savedDelay);
+      return cancel;
+    }
+  }, [callback, savedDelay]);
+
+  return delay ? [cancel, reset] : [noop, noop];
+};
+
+export default useInterval;