react-use-audio-player - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

dist/index.d.ts

@@ -18,3 +18,3 @@ /// <reference types="howler" />
 }
-declare type UseAudioPlayer = Omit<AudioPlayer, "player" | "load"> & {
+declare type UseAudioPlayer = Omit<AudioPlayer, "player"> & {
     play: Howl["play"] | typeof noop;
@@ -27,4 +27,4 @@ pause: Howl["pause"] | typeof noop;
 interface AudioPlayerProviderProps {
+    children: React.ReactNode;
     value?: AudioPlayer;
-    children: React.ReactNode;
 }
@@ -36,4 +36,4 @@ interface AudioPosition {
 export declare function AudioPlayerProvider({ children, value }: AudioPlayerProviderProps): JSX.Element;
-export declare const useAudioPlayer: (props?: AudioSrcProps) => UseAudioPlayer;
+export declare const useAudioPlayer: (props?: AudioSrcProps | undefined) => UseAudioPlayer;
 export declare const useAudioPosition: () => AudioPosition;
 export {};

dist/index.js

@@ -1,137 +0,8 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const howler_1 = require("howler");
-const noop = () => { };
-const AudioPlayerContext = react_1.default.createContext(null);
-function AudioPlayerProvider({ children, value }) {
-    const [player, setPlayer] = react_1.useState(null);
-    const playerRef = react_1.useRef();
-    const [error, setError] = react_1.useState(null);
-    const [loading, setLoading] = react_1.useState(true);
-    const [playing, setPlaying] = react_1.useState(false);
-    const [stopped, setStopped] = react_1.useState(true);
-    const load = react_1.useCallback(({ src, format, autoplay = false }) => {
-        let wasPlaying = false;
-        if (playerRef.current) {
-            // don't do anything if we're asked to reload the same source
-            // @ts-ignore the _src argument actually exists
-            if (playerRef.current._src === src)
-                return;
-            wasPlaying = playerRef.current.playing();
-            // destroys the previous player
-            playerRef.current.unload();
-        }
-        // create a new player
-        const howl = new howler_1.Howl({
-            src,
-            format,
-            autoplay: wasPlaying || autoplay,
-            onload: () => {
-                setError(null);
-                setStopped(true);
-                setLoading(false);
-            },
-            onplay: () => {
-                // prevents howl from playing the same song twice
-                if (!howl.playing())
-                    return;
-                setPlaying(true);
-                setStopped(false);
-            },
-            onend: () => {
-                setStopped(true);
-                setPlaying(false);
-            },
-            onpause: () => void setPlaying(false),
-            onstop: () => {
-                setStopped(true);
-                setPlaying(false);
-            },
-            onplayerror: (_id, error) => {
-                setError(new Error("[Play error] " + error));
-                setPlaying(false);
-                setStopped(true);
-            },
-            onloaderror: (_id, error) => {
-                setError(new Error("[Load error] " + error));
-                setLoading(false);
-            }
-        });
-        setPlayer(howl);
-        playerRef.current = howl;
-    }, []);
-    react_1.useEffect(() => {
-        // unload the player on unmount
-        return () => {
-            if (playerRef.current)
-                playerRef.current.unload();
-        };
-    }, []);
-    const contextValue = value
-        ? value
-        : {
-            player,
-            load,
-            error,
-            loading,
-            playing,
-            stopped,
-            ready: !loading && !error
-        };
-    return (react_1.default.createElement(AudioPlayerContext.Provider, { value: contextValue }, children));
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./react-use-audio-player.cjs.production.min.js')
+} else {
+  module.exports = require('./react-use-audio-player.cjs.development.js')
 }
-exports.AudioPlayerProvider = AudioPlayerProvider;
-exports.useAudioPlayer = (props) => {
-    const _a = react_1.useContext(AudioPlayerContext), { player, load } = _a, context = __rest(_a, ["player", "load"]);
-    const { src, format, autoplay } = props || {};
-    react_1.useEffect(() => {
-        // if useAudioPlayer is called without arguments
-        // don't do anything: the user will have access
-        // to the current context
-        if (!src)
-            return;
-        load({ src, format, autoplay });
-    }, [src, format, autoplay, load]);
-    return Object.assign(Object.assign({}, context), { play: player ? player.play.bind(player) : noop, pause: player ? player.pause.bind(player) : noop, stop: player ? player.stop.bind(player) : noop, mute: player ? player.mute.bind(player) : noop, seek: player ? player.seek.bind(player) : noop });
-};
-// gives current audio position state - updates in an animation frame loop for animating audio visualizations
-exports.useAudioPosition = () => {
-    const { player, playing, stopped } = react_1.useContext(AudioPlayerContext);
-    const [position, setPosition] = react_1.useState(0);
-    const [duration, setDuration] = react_1.useState(0);
-    // sets position and duration on player initialization and when the audio is stopped
-    react_1.useEffect(() => {
-        if (player) {
-            setPosition(player.seek());
-            setDuration(player.duration());
-        }
-    }, [player, stopped]);
-    // updates position on a one second loop
-    react_1.useEffect(() => {
-        let timeout;
-        if (player && playing)
-            timeout = window.setInterval(() => setPosition(player.seek()), 1000);
-        return () => clearTimeout(timeout);
-    }, [player, playing]);
-    return { position, duration };
-};
-//# sourceMappingURL=index.js.map

package.json

 {
     "name": "react-use-audio-player",
-    "version": "0.0.10",
+    "version": "0.0.11",
     "description": "React hook for building custom audio playback controls",
     "main": "dist/index.js",
-    "types": "dist/index.d.ts",
+    "typings": "dist/index.d.ts",
+    "module": "dist/react-use-audio-player.esm.js",
+    "files": [
+        "dist"
+    ],
     "repository": "https://github.com/E-Kuerschner/useAudioPlayer",
@@ -22,35 +26,24 @@ "author": "Erich Kuerschner",
     "scripts": {
-        "start": "cd examples && yarn start",
-        "test": "jest",
-        "build": "rimraf dist && tsc",
-        "build:watch": "tsc -w",
+        "start": "tsdx watch",
+        "build": "tsdx build",
+        "test": "tsdx test --passWithNoTests",
+        "lint": "tsdx lint",
+        "prepare": "tsdx build",
         "preversion": "yarn test && yarn build",
         "release": "yarn version && yarn publish --non-interactive && echo 'Remember to push new commit/tags to Github'"
     },
-    "files": [
-        "dist"
-    ],
     "devDependencies": {
-        "@babel/core": "^7.6.4",
-        "@babel/preset-env": "^7.6.3",
-        "@babel/preset-typescript": "^7.6.0",
-        "@testing-library/react": "^9.2.0",
-        "@types/howler": "^2.1.1",
-        "@types/jest": "^24.0.21",
-        "@types/react": "^16.9.4",
-        "@typescript-eslint/eslint-plugin": "^2.3.2",
-        "@typescript-eslint/parser": "^2.3.2",
-        "babel-jest": "^24.9.0",
-        "eslint": "^6.5.1",
-        "eslint-plugin-react": "^7.16.0",
-        "eslint-plugin-react-hooks": "^2.1.2",
-        "husky": "^3.0.8",
-        "jest": "^24.9.0",
-        "lint-staged": "^9.4.1",
-        "prettier": "^1.18.2",
-        "rimraf": "^3.0.0",
-        "typescript": "^3.7.2"
+        "@types/howler": "^2.1.2",
+        "@types/jest": "^24.0.25",
+        "@types/react": "^16.9.17",
+        "@types/react-dom": "^16.9.4",
+        "husky": "^3.1.0",
+        "react": "^16.12.0",
+        "react-dom": "^16.12.0",
+        "tsdx": "^0.12.1",
+        "tslib": "^1.10.0",
+        "typescript": "^3.7.4"
     },
     "peerDependencies": {
-        "react": "^16.8.0"
+        "react": ">=16.8"
     },
@@ -62,11 +55,11 @@ "dependencies": {
         "hooks": {
-            "pre-commit": "lint-staged"
+            "pre-commit": "tsdx lint"
         }
     },
-    "lint-staged": {
-        "*.{ts,tsx,md,json}": [
-            "prettier --write",
-            "git add"
-        ]
+    "prettier": {
+        "tabWidth": 4,
+        "printWidth": 80,
+        "semi": false,
+        "trailingComma": "none"
     }
 }

README.md

 # react-use-audio-player
 
-A custom React hook for controlling browser audio playback
+A custom React hook for controlling browser audio powered by the amazing [howler.js](https://howlerjs.com/) library. The intention of this package is to abstract away the details of howler's API using built-in React primitives to create an interface that is more React-friendly, allowing you to write React code that is free from audio-related side-effects.
 
@@ -85,3 +85,3 @@ ![Version](https://img.shields.io/npm/v/react-use-audio-player)
 
--   `audioPlayerConfig: { src: string, format?: string, autoplay?: boolean }`
+-   `(optional) audioPlayerConfig: { src: string, format?: string, autoplay?: boolean }`
     <br/>`autoplay` and `format` are optional. `autoplay` will default to false.
@@ -93,2 +93,5 @@
 
+-   `laod: ({ src: string, format?: string, autoplay?: boolean }) => void`
+    <br/>method to lazily load audio
+
 -   `loading: boolean`
@@ -170,12 +173,1 @@ <br/>true if audio is being fetched
 5. follow the local README for further assistance
-
-## Development Tools
-
-#### Eslint
-
-A basic eslint configuration has been set up but should be expanded with more rules.
-
-#### Prettier
-
-Code style and formatting is handled by [Prettier](https://prettier.io/).
-The formatter will run pre-commit to ensure consistent style between contributers.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

49654

increased by183.75%

Dev dependency count

10

decreased by-47.37%

Number of package files

11

increased by120%

Lines of code

375

increased by116.76%

Worsened metrics

Number of low quality alerts

3

increased by50%

Number of lines in readme file

171

decreased by-4.47%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes