@bouko/react 3.1.7 → 3.1.9

package/dist/hooks/audio/playback.d.ts

@@ -0,0 +1,23 @@
+import type { AudioRef } from "../element/with-audio";
+/**
+ * Audio Playback Hook.
+ *
+ * Internal hook used by the Audio Player context provider to derive
+ * reactive playback state from. This hook is not UI-facing. It exists
+ * to translate the audio element events into declarative state that
+ * can be exposed through context and consumed by multiple components.
+ *
+ * @param {AudioRef} ref - Audio element owned by the player.
+ *
+ * @returns
+ *  - `elapsed`  (number): Current playback position (ms).
+ *  - `duration` (number): Total track duration (ms).
+ *  - `progress` (number): Normalized playback position (0-1).
+ *  - `ended`    (boolean): Whether the track has finished.
+**/
+export declare function usePlayback(ref: AudioRef): {
+    elapsed: number;
+    duration: number;
+    ended: boolean;
+    progress: number;
+};

package/dist/hooks/audio/playback.js

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { withAudio } from "../element/with-audio";
+/**
+ * Audio Playback Hook.
+ *
+ * Internal hook used by the Audio Player context provider to derive
+ * reactive playback state from. This hook is not UI-facing. It exists
+ * to translate the audio element events into declarative state that
+ * can be exposed through context and consumed by multiple components.
+ *
+ * @param {AudioRef} ref - Audio element owned by the player.
+ *
+ * @returns
+ *  - `elapsed`  (number): Current playback position (ms).
+ *  - `duration` (number): Total track duration (ms).
+ *  - `progress` (number): Normalized playback position (0-1).
+ *  - `ended`    (boolean): Whether the track has finished.
+**/
+export function usePlayback(ref) {
+    const [elapsed, setElapsed] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [ended, setEnded] = useState(false);
+    useEffect(() => withAudio(ref, (audio) => {
+        const onLoadedMetadata = () => {
+            const d = Number.isFinite(audio.duration) ? audio.duration : 0;
+            setDuration(d * 1000);
+            setEnded(false);
+        };
+        const onTimeUpdate = () => {
+            const e = audio.currentTime;
+            setElapsed(e * 1000);
+        };
+        const onPlay = () => setEnded(false);
+        const onEnded = () => setEnded(true);
+        audio.addEventListener("loadedmetadata", onLoadedMetadata);
+        audio.addEventListener("timeupdate", onTimeUpdate);
+        audio.addEventListener("play", onPlay);
+        audio.addEventListener("ended", onEnded);
+        return () => {
+            audio.removeEventListener("loadedmetadata", onLoadedMetadata);
+            audio.removeEventListener("timeupdate", onTimeUpdate);
+            audio.removeEventListener("play", onPlay);
+            audio.removeEventListener("ended", onEnded);
+        };
+    }), [ref]);
+    return {
+        elapsed, duration, ended,
+        progress: elapsed / duration
+    };
+}

package/dist/hooks/router/params.d.ts

@@ -11,6 +11,17 @@ export type PageQuery = {
     pageSize: number;
     refresh?: boolean;
 };
+export type PageState<T> = {
+    page: number;
+    isLoading: boolean;
+    items: T[];
+    totalPages: number;
+    fetchedAt: Date | null;
+    prev: () => void;
+    next: () => void;
+    jump: (page: number) => void;
+    refresh: () => void;
+};
 export declare const useSearchParam: (key: string) => string | null;
 export declare function usePagination<T>({ fetcher, pageSize }: Options<T>): {
     items: T[];

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",