@bouko/react 3.1.8 → 3.2.0

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

@@ -0,0 +1,2 @@
+export * from "./playback";
+export * from "./sound";

package/dist/hooks/audio/_.js

@@ -0,0 +1,2 @@
+export * from "./playback";
+export * from "./sound";

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/audio/sound.d.ts

@@ -1 +1 @@
-export default function useSound(filename?: string): import("use-sound/dist/types").PlayFunction | undefined;
+export declare function useSound(filename?: string): import("use-sound/dist/types").PlayFunction | undefined;

package/dist/hooks/audio/sound.js

@@ -1,5 +1,5 @@
 import { default as base } from "use-sound";
-export default function useSound(filename) {
+export function useSound(filename) {
     if (!filename)
         return;
     return base(filename)[0];

package/dist/hooks/index.d.ts

@@ -2,10 +2,8 @@ export { default as useElement } from "./element";
 export { default as useContainer } from "./element/container";
 export { default as useResize } from "./element/resize";
 export { default as useInterval } from "./clock/interval";
-export { default as useSound } from "./audio/sound";
 export { withAudio, type DivRef, type AudioRef } from "./element/with-audio";
 export * from "./router/params";
-export * from "./auth";
 export declare function useObjectUrl(): {
     setFromBlob: (blob: Blob) => string;
     revoke: () => void;
@@ -31,3 +29,5 @@ export declare function useConfig<T>({ fetcher, updater }: ConfigProps<T>): {
     config: Record<string, T>;
     update: (id: string, x: T) => Promise<void>;
 };
+export * from "./auth";
+export * from "./audio/_";

package/dist/hooks/index.js

@@ -3,10 +3,8 @@ export { default as useElement } from "./element";
 export { default as useContainer } from "./element/container";
 export { default as useResize } from "./element/resize";
 export { default as useInterval } from "./clock/interval";
-export { default as useSound } from "./audio/sound";
 export { withAudio } from "./element/with-audio";
 export * from "./router/params";
-export * from "./auth";
 export function useObjectUrl() {
     const urlRef = useRef(null);
     const revoke = useCallback(() => {
@@ -54,3 +52,5 @@ export function useConfig({ fetcher, updater }) {
     };
     return { config, update };
 }
+export * from "./auth";
+export * from "./audio/_";

package/package.json

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