add onAutoScrollChange

.github/workflows/pages.yml

@@ -24,7 +24,7 @@ jobs:
           cd storybook-static
           git init
           git config --local user.name mebtte
-          git config --local user.email hi@mebtte.com
+          git config --local user.email i@mebtte.com
           git remote add origin https://${{secrets.ACCESS_TOKEN}}@github.com/mebtte/react-lrc.git
           git switch -c gh-pages
           git add -A

README.md

@@ -63,7 +63,11 @@ Call this when current line changed. `Line` is `LrcLine` when using `Lrc` compon
 
 #### `recoverAutoScrollInterval`
 
-The interval of recovering auto scroll after user scroll. It is `millisecond`, default `5000`.
+The interval of recovering auto scroll after user scrolling. It is `millisecond`, default `5000`.
+
+#### `onAutoScrollChange`?: ({ autoScroll: boolean }) => void
+
+There is a state which indicates whether or not it is auto-scroll, and which default value is `true`. When scrolling by user, it will be set to `false`. After `recoverAutoScrollInterval` milliseconds, it will be set to `true` automatically. `onAutoScrollChange` will be called when the state changed.
 
 ### Component `Lrc`
 

examples/lrc/auto_scroll.tsx

@@ -49,6 +49,7 @@ const Line = styled.div<{ active: boolean }>`
     color: ${active ? 'green' : 'black'};
   `}
 `;
+const log = console.log.bind(console);
 
 function LrcDemo({
   lrc,
@@ -85,6 +86,8 @@ function LrcDemo({
           style={lrcStyle}
           recoverAutoScrollSingal={signal}
           recoverAutoScrollInterval={recoverAutoScrollInterval}
+          onLineUpdate={log}
+          onAutoScrollChange={log}
         />
       </div>
     </Root>

package.json

@@ -1,13 +1,13 @@
 {
   "name": "react-lrc",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "description": "The react component to display lyric from LRC.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "author": {
     "name": "mebtte",
-    "email": "hi@mebtte.com",
+    "email": "i@mebtte.com",
     "url": "https://mebtte.com"
   },
   "license": "MIT",

src/components/base_lrc/base_lrc.tsx

@@ -30,6 +30,7 @@ function BaseLrc<Line extends BaseLine>(
     recoverAutoScrollInterval = DEFAULT_PROPS.recoverAutoScrollInterval,
     recoverAutoScrollSingal = DEFAULT_PROPS.recoverAutoScrollSingal,
     onLineUpdate,
+    onAutoScrollChange,
 
     onWheel,
     onKeyDown,
@@ -53,6 +54,7 @@ function BaseLrc<Line extends BaseLine>(
   } = useAutoScroll({
     recoverAutoScrollInterval,
     recoverAutoScrollSingal,
+    onAutoScrollChange,
   });
 
   useScrollAction({

src/components/base_lrc/constants.ts

@@ -1,4 +1,4 @@
-import { BaseLine, BaseProps } from '../../constants';
+import { type BaseLine, type BaseProps } from '../../constants';
 
 export const LINE_CLASSNAME = 'react-lrc-line';
 

src/components/base_lrc/index.ts

@@ -1,5 +1,5 @@
 import BaseLrc from './base_lrc';
-import { Props } from './constants';
+import { type Props } from './constants';
 
-export { Props };
+export type { Props };
 export default BaseLrc;

src/components/base_lrc/use_auto_scroll.ts

@@ -7,6 +7,8 @@ import {
   type KeyboardEvent,
 } from 'react';
 import throttle from '../../utils/throttle';
+import { type Props } from './constants';
+import { type BaseLine } from '../../constants';
 
 const SCROLLABLE_KEYS = [' ', 'ArrowUp', 'ArrowDown'];
 
@@ -15,14 +17,16 @@ const SCROLLABLE_KEYS = [' ', 'ArrowUp', 'ArrowDown'];
  * 1. wheel
  * 2. keyboard
  * 3. drag scrollbar
- * @author mebtte<hi@mebtte.com>
+ * @author mebtte<i@mebtte.com>
  */
 export default ({
   recoverAutoScrollInterval,
   recoverAutoScrollSingal,
+  onAutoScrollChange,
 }: {
   recoverAutoScrollInterval: number;
   recoverAutoScrollSingal: boolean;
+  onAutoScrollChange: Props<BaseLine>['onAutoScrollChange'];
 }) => {
   const [autoScroll, setAutoScroll] = useState(true);
 
@@ -68,9 +72,15 @@ export default ({
     setAutoScroll(true);
   }, [recoverAutoScrollSingal]);
 
+  useEffect(() => {
+    if (onAutoScrollChange) {
+      onAutoScrollChange({ autoScroll });
+    }
+  }, [autoScroll, onAutoScrollChange]);
+
   /**
    * clear timer after unmount
-   * @author mebtte<hi@mebtte.com>
+   * @author mebtte<i@mebtte.com>
    */
   useEffect(() => () => globalThis.clearTimeout(timerRef.current), []);
 

src/constants.ts

@@ -1,25 +1,22 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 
 export interface BaseLine {
   id: string;
   startMillisecond: number;
 }
 
 export interface BaseProps<Line extends BaseLine> {
-  lineRenderer: ({
-    index,
-    active,
-    line,
-  }: {
+  lineRenderer: (payload: {
     index: number;
     active: boolean;
     line: Line;
   }) => ReactNode;
   currentMillisecond?: number;
   verticalSpace?: boolean;
-  onLineUpdate?: (line: { index: number; line: Line | null }) => void;
   recoverAutoScrollInterval?: number;
   recoverAutoScrollSingal?: boolean;
+  onLineUpdate?: (line: { index: number; line: Line | null }) => void;
+  onAutoScrollChange?: (payload: { autoScroll: boolean }) => void;
 }
 
 export const DEFAULT_PROPS = {

src/utils/get_random_string.ts

@@ -1,6 +1,6 @@
 /**
  * get random string
- * @author mebtte<hi@mebtte.com>
+ * @author mebtte<i@mebtte.com>
  */
 function getRandomString() {
   return Math.random().toString(36).substring(2, 8);

src/utils/use_event.ts

@@ -2,7 +2,7 @@ import { useRef, useCallback } from 'react';
 
 /**
  * stable useCallback
- * @author mebtte<hi@mebtte.com>
+ * @author mebtte<i@mebtte.com>
  */
 function useEvent<Callback extends (...args: unknown[]) => unknown>(
   callback: Callback,