react-native-audio-player-button 1.0.1

package/package.json

@@ -0,0 +1,161 @@
+{
+  "name": "react-native-audio-player-button",
+  "version": "1.0.1",
+  "description": "test",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn install"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "https://github.com/limkimsan/react-native-audio-player-button",
+  "author": "Kimsanlim <kimsanlim27@gmail.com> (https://github.com/limkimsan)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/limkimsan/react-native-audio-player-button/issues"
+  },
+  "homepage": "https://github.com/limkimsan/react-native-audio-player-button#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.2.2",
+    "@react-native-community/eslint-config": "^3.0.2",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "0.70.0",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-builder-bob": "^0.20.3",
+    "release-it": "^15.0.0",
+    "typescript": "^4.5.2"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-sound": "^0.11.2",
+    "react-native-vector-icons": ">=9.2.0"
+  },
+  "engines": {
+    "node": ">= 16.0.0"
+  },
+  "packageManager": "^yarn@1.22.15",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/components/AudioIconComponent.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import color from '../constants/color_constant';
+import {defaultIconSize, primaryIconColor, secondaryIconColor} from '../constants/component_constant';
+import audioIconHelper from '../helpers/audio_icon_helper';
+
+const AudioIconComponent = (props) => {
+  const getIconColor = () => {
+    const primaryColor = props.iconPrimaryColor || primaryIconColor
+    const secondaryColor = props.iconSecondaryColor || secondaryIconColor
+    return props.isPlaying ? secondaryColor : primaryColor;
+  }
+
+  const iconSize = props.iconSize || defaultIconSize
+
+  {/* CloneElement is used so we can pass different type of icon and still using the same configuration */}
+  return (
+    React.cloneElement(audioIconHelper.getIcon(props.customIcon, props.isSpeakerIcon), {
+      name: audioIconHelper.getIconName(props.customIconSet, props.isSpeakerIcon, props.audio, props.isPlaying),
+      size: iconSize, color: !!props.audio ? getIconColor() : color.muted,
+      style: [props.iconStyle, { width: iconSize, marginLeft: (props.isPlaying  && !props.isSpeakerIcon) ? -2 : 0 }]
+    })
+  )
+}
+
+export default AudioIconComponent;
+
+{/*
+<AudioIconComponent
+  isPlaying={boolean}
+  audio={audio's object}
+  isSpeakerIcon={boolean}
+  iconStyle={{}}
+  iconSize={number}
+  primaryColor={}
+  secondaryColor={}
+  customIcon={Icon component}
+  customIconSet={{play: '', pause: '', mute: ''}}
+/>
+*/}

package/src/components/AudioPlayerButtonComponent.js

@@ -0,0 +1,170 @@
+import React, { useEffect, useState, useRef } from 'react'
+import {TouchableOpacity, View} from 'react-native'
+
+import AudioIconComponent from './AudioIconComponent';
+import RippleAnimationComponent from './RippleAnimationComponent';
+import {defaultBtnSize} from '../constants/component_constant'
+import color from '../constants/color_constant';
+import audioPlayerService from '../services/audio_player_service';
+
+const AudioPlayerButtonComponent = (props) => {
+  const localAudioPlayer = useRef(null);
+  const [state, setState] = useState({
+    playSeconds: 0,
+    duration: 0,
+    countInterval: null,
+  });
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  useEffect(() => {
+    // Clear the local audio if the user is switching to play another audio
+    if (!!props.playingUuid && props.playingUuid != props.itemUuid)
+      clearLocalAudioPlayer();
+
+    // Clear all the audio if the playingUuid is null (ex: exit the screen)
+    if (!props.playingUuid && !!global.audioPlayer && !!localAudioPlayer.current) {
+      clearLocalAudioPlayer();
+      audioPlayerService.clearAllAudio();
+    }
+  }, [props.playingUuid])
+
+  useEffect(() => {
+    return () => { audioPlayerService.clearAllAudio(); }  // Clear all the audio when component is unmount
+  }, []);
+
+  const clearLocalAudioPlayer = () => {
+    localAudioPlayer.current = null;
+    setState({
+      playSeconds: 0,
+      duration: 0,
+      countInterval: null
+    })
+    setIsPlaying(false)
+  }
+
+  const updateState = (playSeconds, duration, countInterval) => {
+    setState({ playSeconds, duration, countInterval })
+  }
+
+  const handleLocalAudioPlayer = () => {
+    if (!props.allowPause) {
+      audioPlayerService.clearAllAudio();
+      clearLocalAudioPlayer();
+      props.updatePlayingUuid(null);
+      return;
+    }
+    audioPlayerService.playPause(localAudioPlayer.current, state.countInterval, (audioPlayer, playSeconds, duration, countInterval) => {
+      handleAudioCallback(audioPlayer, playSeconds, duration, countInterval)
+    });
+  }
+
+  const toggleAudio = () => {
+    if (!!localAudioPlayer.current)
+      return handleLocalAudioPlayer();
+
+    audioPlayerService.clearAllAudio(); // Clear all the playing audio when starting to play a new audio if there is an existing audio is playing
+    audioPlayerService.play(props.audio, props.itemUuid, props.isFromAppBundle || false, props.playingUuid, (audioPlayer, playSeconds, duration, countInterval) => {
+      handleAudioCallback(audioPlayer, playSeconds, duration, countInterval)
+    });
+  }
+
+  const handleAudioCallback = (audioPlayer, playSeconds, duration, countInterval) => {
+    global.audioPlayer = audioPlayer;
+    global.countInterval = countInterval;
+    localAudioPlayer.current = audioPlayer;
+    updateState(playSeconds, duration, countInterval);
+    handleStopPlaying(countInterval, playSeconds, duration);
+  }
+
+  const handleStopPlaying = (countInterval, playSeconds, duration) => {
+    if (!countInterval) {
+      setIsPlaying(false);
+
+      if (playSeconds == 0 && duration == 0)
+        props.updatePlayingUuid(null);
+    }
+  }
+
+  const onPress = () => {
+    props.updatePlayingUuid(props.itemUuid);
+    setIsPlaying(!isPlaying);
+    toggleAudio();
+  }
+
+  const renderRippleAnimation = () => {
+    return <RippleAnimationComponent
+              rippleColor={props.rippleColor}
+              height={props.rippleHeight}
+              width={props.rippleWidth}
+              radius={props.rippleRadius}
+              isPlaying={isPlaying}
+              rippleStyle={props.rippleStyle}
+           />
+  }
+
+  const renderBtn = () => {
+    const btnStyles = {
+      alignItems: 'center',
+      backgroundColor: props.buttonColor || color.white,
+      borderRadius: 48,
+      elevation: props.hasShadow ? 4 : 0,
+      justifyContent: 'center',
+      height: props.buttonHeight || defaultBtnSize,
+      width: props.buttonWidth || defaultBtnSize,
+      zIndex: 10
+    }
+
+    return <TouchableOpacity onPress={() => onPress()} disabled={!props.audio} style={[btnStyles, props.buttonStyle]}>
+            <AudioIconComponent
+              isPlaying={isPlaying}
+              audio={props.audio}
+              isSpeakerIcon={props.isSpeakerIcon}
+              iconStyle={props.iconStyle}
+              iconSize={props.iconSize}
+              iconPrimaryColor={props.iconPrimaryColor}
+              iconSecondaryColor={props.iconSecondaryColor}
+              customIcon={props.customIcon}
+              customIconSet={props.customIconSet}
+            />
+          </TouchableOpacity>
+  }
+
+  return (
+    <View style={[{justifyContent: 'center', alignItems: 'center'}, props.containerStyle]}>
+      { props.rippled && renderRippleAnimation() }
+      { renderBtn() }
+    </View>
+  )
+}
+
+export default AudioPlayerButtonComponent
+
+// How to use
+{/*
+<AudioPlayerServcie
+  audio={}
+  itemUuid={string}
+  isFromAppBundle={boolean}
+  playingUuid={string}
+  isSpeakerIcon={boolean}
+  buttonColor={}
+  buttonHeight={number}
+  buttonWidth={number}
+  allowPause={boolean}
+  rippled={boolean}
+  rippleColor={}
+  rippleHeight={number}
+  rippleWidth={number}
+  rippleRadius={number}
+  rippleStyle={{}}
+  iconStyle={{}}
+  iconSize={number}
+  iconPrimaryColor={}
+  iconSecondaryColor={}
+  buttonStyle={{}}
+  updatePlayingUuid={(playingUuid) => {}}
+  containerStyle={{}}
+  customIcon={icon component}
+  customIconSet={{play: '', pause: '', mute: ''}}
+/>
+*/}

package/src/components/RippleAnimationComponent.js

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import color from '../constants/color_constant';
+import {defaultRippleSize} from '../constants/component_constant';
+import rippleAnimationHelper from '../helpers/ripple_animation_helper';
+
+const RippleAnimationComponent = (props) => {
+  const [componentDidMount, setComponentDidMount] = useState(false);
+  const [state] = useState({
+    opacity1: new Animated.Value(1),
+    opacity2: new Animated.Value(1),
+    opacity3: new Animated.Value(1),
+    scale1: new Animated.Value(0),
+    scale2: new Animated.Value(0),
+    scale3: new Animated.Value(0),
+  });
+
+  const animations = [
+    { scale: state.scale1, opacity: state.opacity1 },
+    { scale: state.scale2, opacity: state.opacity2 },
+    { scale: state.scale3, opacity: state.opacity3 },
+  ];
+
+  useEffect(() => {
+    if (!componentDidMount) {
+      setComponentDidMount(true);
+      return;
+    }
+
+    props.isPlaying ? rippleAnimationHelper.start(animations) : rippleAnimationHelper.reset(animations);
+  }, [props.isPlaying])
+
+  const rippleView = (index) => {
+    const rippleStyle = {
+      backgroundColor: props.rippleColor || color.black,
+      radius: props.radius || defaultRippleSize,
+      height: props.height || defaultRippleSize,
+      width: props.width || defaultRippleSize
+    }
+
+    return <Animated.View key={index} style={[ StyleSheet.absoluteFillObject, { backgroundColor: rippleStyle.backgroundColor }, props.rippleStyle,
+              {opacity: animations[index].opacity, transform: [{ scale: animations[index].scale }], height: rippleStyle.height, width: rippleStyle.width, borderRadius: rippleStyle.radius }
+            ]} />
+  }
+
+  return [...Array(3).keys()].map((index) => rippleView(index))
+}
+
+export default RippleAnimationComponent;
+
+// How to use
+{/*
+<Ripple
+  color={}
+  height={number}
+  width={number}
+  radius={number}
+  isPlaying={boolean}
+  rippleStyle={{}}
+/>
+*/}

package/src/constants/color_constant.js

@@ -0,0 +1,8 @@
+const color = {
+  black: '#000000',
+  gray: '#808080',
+  muted: '#6c757d',
+  white: '#ffffff',
+}
+
+export default color

package/src/constants/component_constant.js

@@ -0,0 +1,8 @@
+import {isLowPixelDensityDevice} from '../utils/responsive_util'
+import color from './color_constant';
+
+export const defaultBtnSize = isLowPixelDensityDevice() ? 48 : 56
+export const defaultRippleSize = isLowPixelDensityDevice() ? 48 : 56
+export const defaultIconSize = isLowPixelDensityDevice() ? 24 : 26
+export const primaryIconColor = color.black
+export const secondaryIconColor = color.gray

package/src/constants/icon_constant.js

@@ -0,0 +1,12 @@
+export const defaultAudioIconSet = {
+  'ion_icon': {
+    play: 'volume-high-outline',
+    pause: 'pause',
+    mute: 'volume-mute-outline'
+  },
+  'feather': {
+    play: 'play',
+    pause: 'pause',
+    mute: 'play'
+  }
+}

package/src/helpers/audio_icon_helper.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import IonIcon from 'react-native-vector-icons/Ionicons';
+import {defaultAudioIconSet} from '../constants/icon_constant';
+
+const audioIconHelper = (() => {
+  return {
+    getIcon,
+    getIconName,
+  }
+
+  function getIcon(customIcon, isSpeakerIcon) {
+    return customIcon ? customIcon : isSpeakerIcon ? <IonIcon/> : <FeatherIcon/>
+  }
+
+  function getIconName(customIconSet, isSpeakerIcon, audio, isPlaying) {
+    const icon = customIconSet ? customIconSet : isSpeakerIcon ? defaultAudioIconSet['ion_icon'] : defaultAudioIconSet['feather'];
+    if (!audio)
+      return icon.mute;
+
+    return isPlaying ? icon.pause : icon.play;
+  }
+})()
+
+export default audioIconHelper

package/src/helpers/ripple_animation_helper.js

@@ -0,0 +1,46 @@
+import { Animated } from 'react-native';
+
+const rippleAnimationHelper = (() => {
+  return {
+    start,
+    reset,
+  }
+
+  function start(animations) {
+    animations.map((animation, index) => {
+      Animated.loop(
+        Animated.parallel([
+          _animatedTiming(animation.scale, 1.8, index * 400),
+          _animatedTiming(animation.opacity, 0, index * 400),
+        ], { useNativeDriver: true })
+      ).start();
+    });
+  }
+
+  function reset(animations) {
+    Animated.loop(
+      Animated.parallel(_allAnimatedTimings(animations))
+    ).reset();
+  }
+
+  // private methods
+  function _animatedTiming(type, toValue, delay) {
+    return Animated.timing(type, {
+            toValue: toValue,
+            duration: 2000,
+            delay: delay,
+            useNativeDriver: true
+          })
+  }
+
+  function _allAnimatedTimings(animations) {
+    const animated = [];
+    animations.map(animation => {
+      animated.push(Animated.timing(animation.scale));
+      animated.push(Animated.timing(animation.opacity));
+    });
+    return animated;
+  }
+})();
+
+export default rippleAnimationHelper;

package/src/index.js

@@ -0,0 +1,2 @@
+import AudioPlayerButton from './components/AudioPlayerButtonComponent';
+export default AudioPlayerButton;

package/src/services/audio_player_service.js

@@ -0,0 +1,90 @@
+import Sound from 'react-native-sound';
+
+// Notice: The audio file must have the Bit Rate Mode as Constant in order to prevent the library from
+// returning invalid audio duration
+
+const audioPlayerService = (() => {
+  return {
+    play,
+    playPause,
+    stop,
+    clearAllAudio,
+  }
+
+  function play(filename, itemUuId, isFromAppBundle, playingUuId, callback) {
+    if (itemUuId == playingUuId) return;    // prevent the player from playing the same audio muliple time overlap each other
+
+    const audioPlayer = isFromAppBundle ? new Sound(filename, Sound.MAIN_BUNDLE, (error) => _handlePlayCallback(error, audioPlayer, callback))
+                                        : new Sound(filename, (error) => _handlePlayCallback(error, audioPlayer, callback))
+  }
+
+  function playPause(audioPlayer, countInterval, callback) {
+    if (!!countInterval) {
+      clearInterval(countInterval);
+      audioPlayer.pause();
+      audioPlayer.getCurrentTime((seconds) => {
+        callback(audioPlayer, seconds, audioPlayer.getDuration(), null);
+      });
+      return;
+    }
+
+    _playAudio(audioPlayer, callback, countInterval);
+  }
+
+  function stop(audioPlayer, countInterval) {
+    clearInterval(countInterval);
+    if (!audioPlayer)
+      return;
+
+    audioPlayer.stop();
+  }
+
+  function clearAllAudio() {
+    if (!!global.audioPlayer || !!global.countInterval) {
+      global.audioPlayer.release();
+      clearInterval(global.countInterval)
+      global.audioPlayer = null;
+      global.countInterval = null;
+    }
+  }
+
+  // private method
+  function _countPlaySeconds(audioPlayer, callback) {
+    if (!audioPlayer)
+      return null;
+
+    const countInterval = setInterval(() => {
+      audioPlayer.getCurrentTime((seconds) => {
+        if (seconds == audioPlayer.getDuration())
+          return clearInterval(countInterval);
+
+        callback(audioPlayer, seconds, audioPlayer.getDuration(), countInterval);
+      });
+    }, 150);  // Use 150 ms to make the slider move smoother
+
+    return countInterval;
+  }
+
+  function _playAudio(audioPlayer, callback, countInterval = null) {
+    // Clear the previous counting and start a new count when start playing the audio
+    clearInterval(countInterval);
+    const countPlaySeconds = _countPlaySeconds(audioPlayer, callback);
+    audioPlayer.play((success) => {
+      if (success) {
+        clearInterval(countPlaySeconds);
+        audioPlayer.release();
+        callback(null, 0, 0, null);     // reset the audioPlayer, playSeconds, duration and countInterval
+      }
+      else
+        console.log('playback failed due to audio decoding errors');
+    });
+  }
+
+  function _handlePlayCallback(error, audioPlayer, callback) {
+    if (!!error) return console.log('failed to play audio = ', error);
+
+    _playAudio(audioPlayer, callback);
+  }
+})();
+
+export default audioPlayerService;

package/src/utils/responsive_util.js

@@ -0,0 +1,8 @@
+import {PixelRatio } from 'react-native';
+
+const XHDPIRatio = 2;
+
+export const isLowPixelDensityDevice = () => {
+  const devicePixelRatio = Math.round(PixelRatio.roundToNearestPixel(PixelRatio.get()));
+  return devicePixelRatio <= XHDPIRatio
+}