react-audio-wizard - npm Package Compare versions

Comparing version 0.0.3-alpha.1 to 0.0.3-alpha.2

dist/cjs/components/AudioPlayer/useAudioWizard.d.ts

@@ -5,6 +5,10 @@ type AudioStatus = 'idle' | 'loaded' | 'playing' | 'paused';
 };
-export default function useAudio({ url }: useAudioType): {
+export default function useAudioWizard({ url }: useAudioType): {
     status: AudioStatus;
     play: () => void;
     pause: () => void;
+    handleSeek: ({ seekTime }: {
+        seekTime: number;
+    }) => void;
+    handleAudioSeek: (e: React.ChangeEvent<HTMLInputElement>) => void;
     duration: number;
@@ -11,0 +15,0 @@ currentTime: number;

dist/cjs/components/AudioPlayer/useAudioWizard.js

@@ -6,7 +6,7 @@ "use strict";
 var get_blob_duration_1 = tslib_1.__importDefault(require("get-blob-duration"));
-function useAudio(_a) {
+function useAudioWizard(_a) {
     var _this = this;
     var url = _a.url;
     var audio = (0, react_1.useState)(new Audio(url))[0];
-    var intervalId;
+    var intervalIdRef = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)(false), audioReady = _b[0], setAudioReady = _b[1];
@@ -65,11 +65,24 @@ var _c = (0, react_1.useState)('idle'), status = _c[0], setStatus = _c[1];
             // eslint-disable-next-line react-hooks/exhaustive-deps
-            intervalId = setInterval(intervalHandler, 300);
+            intervalIdRef.current = setInterval(intervalHandler, 300);
         }
         else {
-            clearInterval(intervalId);
+            if (intervalIdRef.current) {
+                clearInterval(intervalIdRef.current);
+            }
         }
         return function () {
-            clearInterval(intervalId);
+            if (intervalIdRef.current) {
+                clearInterval(intervalIdRef.current);
+            }
         };
-    }, [status, audio]);
+    }, [status, audio, currentTime, duration]);
+    (0, react_1.useEffect)(function () {
+        if (currentTime >= duration) {
+            setStatus('loaded');
+            setCurrentTime(duration);
+        }
+        if (intervalIdRef.current && ((audio === null || audio === void 0 ? void 0 : audio.ended) || (audio === null || audio === void 0 ? void 0 : audio.paused))) {
+            clearInterval(intervalIdRef.current);
+        }
+    }, [audio === null || audio === void 0 ? void 0 : audio.ended, audio === null || audio === void 0 ? void 0 : audio.paused, currentTime, duration]);
     var play = (0, react_1.useCallback)(function () {
@@ -87,2 +100,21 @@ if (audio) {
     }, [audio]);
+    var handleAudioSeek = (0, react_1.useCallback)(function (e) {
+        var seekTime = +e.target.value;
+        if (typeof (audio === null || audio === void 0 ? void 0 : audio.currentTime) === 'number') {
+            audio.currentTime = seekTime;
+            setCurrentTime(seekTime);
+            audio.pause();
+        }
+    }, [audio]);
+    var handleSeek = (0, react_1.useCallback)(function (_a) {
+        var seekTime = _a.seekTime;
+        if (typeof (audio === null || audio === void 0 ? void 0 : audio.currentTime) === 'number' && seekTime < duration) {
+            audio.currentTime = seekTime;
+            setCurrentTime(seekTime);
+            audio.pause();
+        }
+        else {
+            console.log('seekTime is greater than duration');
+        }
+    }, [audio, duration]);
     return {
@@ -92,2 +124,4 @@ status: status,
         pause: pause,
+        handleSeek: handleSeek,
+        handleAudioSeek: handleAudioSeek,
         duration: duration,
@@ -97,3 +131,3 @@ currentTime: currentTime
 }
-exports["default"] = useAudio;
+exports["default"] = useAudioWizard;
 //# sourceMappingURL=useAudioWizard.js.map

dist/esm/components/AudioPlayer/useAudioWizard.d.ts

@@ -5,6 +5,10 @@ type AudioStatus = 'idle' | 'loaded' | 'playing' | 'paused';
 };
-export default function useAudio({ url }: useAudioType): {
+export default function useAudioWizard({ url }: useAudioType): {
     status: AudioStatus;
     play: () => void;
     pause: () => void;
+    handleSeek: ({ seekTime }: {
+        seekTime: number;
+    }) => void;
+    handleAudioSeek: (e: React.ChangeEvent<HTMLInputElement>) => void;
     duration: number;
@@ -11,0 +15,0 @@ currentTime: number;

dist/esm/components/AudioPlayer/useAudioWizard.js

 import { __awaiter, __generator } from "tslib";
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import getBlobDuration from 'get-blob-duration';
-export default function useAudio(_a) {
+export default function useAudioWizard(_a) {
     var _this = this;
     var url = _a.url;
     var audio = useState(new Audio(url))[0];
-    var intervalId;
+    var intervalIdRef = useRef(null);
     var _b = useState(false), audioReady = _b[0], setAudioReady = _b[1];
@@ -62,11 +62,24 @@ var _c = useState('idle'), status = _c[0], setStatus = _c[1];
             // eslint-disable-next-line react-hooks/exhaustive-deps
-            intervalId = setInterval(intervalHandler, 300);
+            intervalIdRef.current = setInterval(intervalHandler, 300);
         }
         else {
-            clearInterval(intervalId);
+            if (intervalIdRef.current) {
+                clearInterval(intervalIdRef.current);
+            }
         }
         return function () {
-            clearInterval(intervalId);
+            if (intervalIdRef.current) {
+                clearInterval(intervalIdRef.current);
+            }
         };
-    }, [status, audio]);
+    }, [status, audio, currentTime, duration]);
+    useEffect(function () {
+        if (currentTime >= duration) {
+            setStatus('loaded');
+            setCurrentTime(duration);
+        }
+        if (intervalIdRef.current && ((audio === null || audio === void 0 ? void 0 : audio.ended) || (audio === null || audio === void 0 ? void 0 : audio.paused))) {
+            clearInterval(intervalIdRef.current);
+        }
+    }, [audio === null || audio === void 0 ? void 0 : audio.ended, audio === null || audio === void 0 ? void 0 : audio.paused, currentTime, duration]);
     var play = useCallback(function () {
@@ -84,2 +97,21 @@ if (audio) {
     }, [audio]);
+    var handleAudioSeek = useCallback(function (e) {
+        var seekTime = +e.target.value;
+        if (typeof (audio === null || audio === void 0 ? void 0 : audio.currentTime) === 'number') {
+            audio.currentTime = seekTime;
+            setCurrentTime(seekTime);
+            audio.pause();
+        }
+    }, [audio]);
+    var handleSeek = useCallback(function (_a) {
+        var seekTime = _a.seekTime;
+        if (typeof (audio === null || audio === void 0 ? void 0 : audio.currentTime) === 'number' && seekTime < duration) {
+            audio.currentTime = seekTime;
+            setCurrentTime(seekTime);
+            audio.pause();
+        }
+        else {
+            console.log('seekTime is greater than duration');
+        }
+    }, [audio, duration]);
     return {
@@ -89,2 +121,4 @@ status: status,
         pause: pause,
+        handleSeek: handleSeek,
+        handleAudioSeek: handleAudioSeek,
         duration: duration,
@@ -91,0 +125,0 @@ currentTime: currentTime

package.json

 {
   "name": "react-audio-wizard",
-  "version": "0.0.3-alpha.1",
-  "description": "",
+  "version": "0.0.3-alpha.2",
+  "description": "Headless audio player for React",
   "main": "./dist/cjs/index.js",
@@ -18,3 +18,7 @@ "module": "./dist/esm/index.js",
     "typescript",
-    "awesome-project"
+    "audio",
+    "audio-player",
+    "react-audio-wizard",
+    "wizard",
+    "player"
   ],
@@ -21,0 +25,0 @@ "scripts": {

README.md

@@ -1,1 +0,60 @@
-writing...
+# Headless audio player for React
+
+A simple, customizable and headless audio player for React applications. This library is a hook that you can use to play audio files, pause, seek, and track current time and duration of the audio.
+
+## Installation
+
+```bash
+npm install react-audio-wizard // or yarn
+```
+
+## Usage
+
+```tsx
+import { useAudioWizard } from 'react-audio-wizard'
+
+function MyComponent() {
+  const { status, play, pause, handleSeek, duration, currentTime } = useAudioWizard({ url: 'audiofile.mp3' })
+
+  return (
+    <div>
+      <button onClick={play} disabled={status !== 'loaded' && status !== 'paused'}>
+        Play
+      </button>
+      <button onClick={pause} disabled={status !== 'playing'}>
+        Pause
+      </button>
+      <button onClick={() => handleSeek({ seekTime: 1 })}>+1</button>
+      <p>Status: {status}</p>
+      <p>Duration: {duration}</p>
+      <p>Current Time: {currentTime}</p>
+    </div>
+  )
+}
+```
+
+## API
+
+`useAudioWizard({ url })`
+
+The `useAudioWizard` function takes a single argument: an object that contains the url of the audio file.
+
+Returns an object with the following properties:
+
+- status: The current status of the audio. Can be 'idle', 'loaded', 'playing', or 'paused'.
+- play: A function that starts playing the audio.
+- pause: A function that pauses the audio.
+- handleSeek: A function that seeks the audio to a specific time. It takes an object with a seekTime property.
+- duration: The total duration of the audio in seconds.
+- currentTime: The current playback position in seconds.
+- handleAudioSeek(e: React.ChangeEvent<HTMLInputElement>)
+
+The status returned from the useAudioWizard hook indicates the current state of the audio player. Here are the possible values:
+
+- 'idle': The audio player is initialized but has not started loading any audio data yet. This is the default state when the hook is first used.
+- 'loaded': The audio data has been fully loaded and the player is ready to start playback. You will typically switch to this state after the audio data has been fetched and is ready for use.
+- 'playing': The audio is currently playing. You will typically switch to this state after the play function is invoked.
+- 'paused': The audio is currently paused. You will typically switch to this state after the pause function is invoked.
+
+License
+MIT

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39690

increased by27.26%

Lines of code

548

increased by16.1%

Number of lines in readme file

61

increased by2950%

No dependency changes