react-native-audio-player-button 1.0.3 → 1.0.5

package/README.md

@@ -1,7 +1,6 @@
-# react-native-audio-player-button
-<span><img src="https://user-images.githubusercontent.com/18114944/215944532-c1ce1e50-9744-4f75-899e-a801d4a2b080.png" width="250" height="500" /></span>
+React Native Audio Player Button is a custom button with an icon for playing audio. The user is able to use this button as many as they want on the same screen without having the issue of overlapping playing audio.
 
-React Native Audio Player Button is a custom button with an icon for playing the audio and it is able to prevent playing the audio overlap each other.
+<span><img src="https://user-images.githubusercontent.com/18114944/215944532-c1ce1e50-9744-4f75-899e-a801d4a2b080.png" width="250" height="500" /></span>
 
 ## Support
 iOS & Android
@@ -30,7 +29,7 @@ import FAIcon from 'react-native-vector-icons/FontAwesome';
 const [playingUuid, setPlayingUuid] = React.useState(null);
 
 <AudioPlayerButton
-  audio={require('./assets/audios/sample.mp3')}
+  audio={require('sample.mp3')}
   itemUuid='abcdefg'
   isSpeakerIcon={true}
   rippled={true}
@@ -62,7 +61,7 @@ const [playingUuid, setPlayingUuid] = React.useState(null);
 | iconSize           |    24 or 26   |  `number`  |   `true`   | The size of the icons (play and pause icon)                                                  |
 | iconPrimaryColor   |   '#000000'   |  `string`  |   `true`   | The color of the icon before playing the audio                                               |
 | iconSecondaryColor |   '#808080'   |  `string`  |   `true`   | The color of the icon while playing the audio                                                |
-| playingUuid        |      ''       |  `string`  |   `false`  | The uuid of the playing auido component (to prevent playing audio overlap each other)        |
+| playingUuid        |      ''       |  `string`  |   `false`  | The uuid of the playing audio component (to prevent playing audio overlap each other)        |
 | hasShadow          |     false     |  `boolean` |   `true`   | The shadow of the button (Android only)                                                      |
 | allowPause         |     false     |  `boolean` |   `true`   | Allow to pause the audio when toggle the button                                              |
 | isFromAppBundle    |     false     |  `boolean` |   `false`  | Set to `true` to play the audio that is stored in the app bundle (ex: the downloaded audio)  |

package/lib/commonjs/components/AudioIconComponent.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
 var _color_constant = _interopRequireDefault(require("../constants/color_constant"));
 var _component_constant = require("../constants/component_constant");
 var _audio_icon_helper = _interopRequireDefault(require("../helpers/audio_icon_helper"));
@@ -16,16 +17,37 @@ const AudioIconComponent = props => {
     return props.isPlaying ? secondaryColor : primaryColor;
   };
   const iconSize = props.iconSize || _component_constant.defaultIconSize;
+  const renderStrikeLine = () => {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: {
+        height: 3,
+        width: iconSize,
+        transform: [{
+          rotate: '45deg'
+        }],
+        backgroundColor: 'white',
+        justifyContent: 'center',
+        position: 'absolute',
+        top: iconSize / 2.4,
+        left: -2,
+        zIndex: 10
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: {
+        height: 1.5,
+        backgroundColor: _color_constant.default.muted
+      }
+    }));
+  };
   {/* CloneElement is used so we can pass different type of icon and still using the same configuration */}
-  return /*#__PURE__*/_react.default.cloneElement(_audio_icon_helper.default.getIcon(props.customIcon, props.isSpeakerIcon), {
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, !props.audio && !props.isSpeakerIcon && !props.customIcon && renderStrikeLine(), /*#__PURE__*/_react.default.cloneElement(_audio_icon_helper.default.getIcon(props.customIcon, props.isSpeakerIcon), {
     name: _audio_icon_helper.default.getIconName(props.customIconSet, props.isSpeakerIcon, props.audio, props.isPlaying),
     size: iconSize,
     color: !!props.audio ? getIconColor() : _color_constant.default.muted,
-    style: [props.iconStyle, {
-      width: iconSize,
-      marginLeft: props.isPlaying && !props.isSpeakerIcon ? -2 : 0
-    }]
-  });
+    style: [{
+      width: iconSize
+    }, _audio_icon_helper.default.getIconMargin(props.isPlaying, props.isSpeakerIcon, !!props.customIcon), props.iconStyle]
+  }));
 };
 var _default = AudioIconComponent;
 exports.default = _default;

package/lib/commonjs/components/AudioIconComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["AudioIconComponent","props","getIconColor","primaryColor","iconPrimaryColor","primaryIconColor","secondaryColor","iconSecondaryColor","secondaryIconColor","isPlaying","iconSize","defaultIconSize","React","cloneElement","audioIconHelper","getIcon","customIcon","isSpeakerIcon","name","getIconName","customIconSet","audio","size","color","muted","style","iconStyle","width","marginLeft"],"sourceRoot":"../../src","sources":["AudioIconComponent.js"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AAA2D;AAE3D,MAAMA,kBAAkB,GAAIC,KAAK,IAAK;EACpC,MAAMC,YAAY,GAAG,MAAM;IACzB,MAAMC,YAAY,GAAGF,KAAK,CAACG,gBAAgB,IAAIC,oCAAgB;IAC/D,MAAMC,cAAc,GAAGL,KAAK,CAACM,kBAAkB,IAAIC,sCAAkB;IACrE,OAAOP,KAAK,CAACQ,SAAS,GAAGH,cAAc,GAAGH,YAAY;EACxD,CAAC;EAED,MAAMO,QAAQ,GAAGT,KAAK,CAACS,QAAQ,IAAIC,mCAAe;EAElD,CAAC;EACD,oBACEC,cAAK,CAACC,YAAY,CAACC,0BAAe,CAACC,OAAO,CAACd,KAAK,CAACe,UAAU,EAAEf,KAAK,CAACgB,aAAa,CAAC,EAAE;IACjFC,IAAI,EAAEJ,0BAAe,CAACK,WAAW,CAAClB,KAAK,CAACmB,aAAa,EAAEnB,KAAK,CAACgB,aAAa,EAAEhB,KAAK,CAACoB,KAAK,EAAEpB,KAAK,CAACQ,SAAS,CAAC;IACzGa,IAAI,EAAEZ,QAAQ;IAAEa,KAAK,EAAE,CAAC,CAACtB,KAAK,CAACoB,KAAK,GAAGnB,YAAY,EAAE,GAAGqB,uBAAK,CAACC,KAAK;IACnEC,KAAK,EAAE,CAACxB,KAAK,CAACyB,SAAS,EAAE;MAAEC,KAAK,EAAEjB,QAAQ;MAAEkB,UAAU,EAAG3B,KAAK,CAACQ,SAAS,IAAK,CAACR,KAAK,CAACgB,aAAa,GAAI,CAAC,CAAC,GAAG;IAAE,CAAC;EAC/G,CAAC,CAAC;AAEN,CAAC;AAAA,eAEcjB,kBAAkB;AAAA;AAEjC,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAZC"}
+{"version":3,"names":["AudioIconComponent","props","getIconColor","primaryColor","iconPrimaryColor","primaryIconColor","secondaryColor","iconSecondaryColor","secondaryIconColor","isPlaying","iconSize","defaultIconSize","renderStrikeLine","height","width","transform","rotate","backgroundColor","justifyContent","position","top","left","zIndex","color","muted","audio","isSpeakerIcon","customIcon","React","cloneElement","audioIconHelper","getIcon","name","getIconName","customIconSet","size","style","getIconMargin","iconStyle"],"sourceRoot":"../../src","sources":["AudioIconComponent.js"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA2D;AAE3D,MAAMA,kBAAkB,GAAIC,KAAK,IAAK;EACpC,MAAMC,YAAY,GAAG,MAAM;IACzB,MAAMC,YAAY,GAAGF,KAAK,CAACG,gBAAgB,IAAIC,oCAAgB;IAC/D,MAAMC,cAAc,GAAGL,KAAK,CAACM,kBAAkB,IAAIC,sCAAkB;IACrE,OAAOP,KAAK,CAACQ,SAAS,GAAGH,cAAc,GAAGH,YAAY;EACxD,CAAC;EAED,MAAMO,QAAQ,GAAGT,KAAK,CAACS,QAAQ,IAAIC,mCAAe;EAElD,MAAMC,gBAAgB,GAAG,MAAM;IAC7B,oBAAO,6BAAC,iBAAI;MAAC,KAAK,EAAE;QAACC,MAAM,EAAE,CAAC;QAAEC,KAAK,EAAEJ,QAAQ;QAAEK,SAAS,EAAE,CAAC;UAACC,MAAM,EAAE;QAAO,CAAC,CAAC;QAAEC,eAAe,EAAE,OAAO;QAAEC,cAAc,EAAE,QAAQ;QAAEC,QAAQ,EAAE,UAAU;QAAEC,GAAG,EAAEV,QAAQ,GAAG,GAAG;QAAEW,IAAI,EAAE,CAAC,CAAC;QAAEC,MAAM,EAAE;MAAE;IAAE,gBAC5L,6BAAC,iBAAI;MAAC,KAAK,EAAE;QAACT,MAAM,EAAE,GAAG;QAAEI,eAAe,EAAEM,uBAAK,CAACC;MAAK;IAAE,EAAG,CACxD;EAChB,CAAC;EAED,CAAC;EACD,oBACE,6BAAC,iBAAI,QACD,CAACvB,KAAK,CAACwB,KAAK,IAAI,CAACxB,KAAK,CAACyB,aAAa,IAAI,CAACzB,KAAK,CAAC0B,UAAU,IAAKf,gBAAgB,EAAE,eAEhFgB,cAAK,CAACC,YAAY,CAACC,0BAAe,CAACC,OAAO,CAAC9B,KAAK,CAAC0B,UAAU,EAAE1B,KAAK,CAACyB,aAAa,CAAC,EAAE;IACjFM,IAAI,EAAEF,0BAAe,CAACG,WAAW,CAAChC,KAAK,CAACiC,aAAa,EAAEjC,KAAK,CAACyB,aAAa,EAAEzB,KAAK,CAACwB,KAAK,EAAExB,KAAK,CAACQ,SAAS,CAAC;IACzG0B,IAAI,EAAEzB,QAAQ;IAAEa,KAAK,EAAE,CAAC,CAACtB,KAAK,CAACwB,KAAK,GAAGvB,YAAY,EAAE,GAAGqB,uBAAK,CAACC,KAAK;IACnEY,KAAK,EAAE,CAAC;MAAEtB,KAAK,EAAEJ;IAAS,CAAC,EAAEoB,0BAAe,CAACO,aAAa,CAACpC,KAAK,CAACQ,SAAS,EAAER,KAAK,CAACyB,aAAa,EAAE,CAAC,CAACzB,KAAK,CAAC0B,UAAU,CAAC,EAAE1B,KAAK,CAACqC,SAAS;EACvI,CAAC,CAAC,CAEC;AAEX,CAAC;AAAA,eAEctC,kBAAkB;AAAA;AAEjC,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAZC"}

package/lib/commonjs/helpers/audio_icon_helper.js

@@ -12,7 +12,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const audioIconHelper = (() => {
   return {
     getIcon,
-    getIconName
+    getIconName,
+    getIconMargin
   };
   function getIcon(customIcon, isSpeakerIcon) {
     return customIcon ? customIcon : isSpeakerIcon ? /*#__PURE__*/_react.default.createElement(_Ionicons.default, null) : /*#__PURE__*/_react.default.createElement(_Feather.default, null);
@@ -22,6 +23,14 @@ const audioIconHelper = (() => {
     if (!audio) return icon.mute;
     return isPlaying ? icon.pause : icon.play;
   }
+  function getIconMargin(isPlaying, isSpeakerIcon) {
+    if (isPlaying && !isSpeakerIcon) return {
+      marginLeft: -1
+    };
+    return {
+      marginLeft: 0
+    };
+  }
 })();
 var _default = audioIconHelper;
 exports.default = _default;

package/lib/commonjs/helpers/audio_icon_helper.js.map

@@ -1 +1 @@
-{"version":3,"names":["audioIconHelper","getIcon","getIconName","customIcon","isSpeakerIcon","customIconSet","audio","isPlaying","icon","defaultAudioIconSet","mute","pause","play"],"sourceRoot":"../../src","sources":["audio_icon_helper.js"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA+D;AAE/D,MAAMA,eAAe,GAAG,CAAC,MAAM;EAC7B,OAAO;IACLC,OAAO;IACPC;EACF,CAAC;EAED,SAASD,OAAO,CAACE,UAAU,EAAEC,aAAa,EAAE;IAC1C,OAAOD,UAAU,GAAGA,UAAU,GAAGC,aAAa,gBAAG,6BAAC,iBAAO,OAAE,gBAAG,6BAAC,gBAAW,OAAE;EAC9E;EAEA,SAASF,WAAW,CAACG,aAAa,EAAED,aAAa,EAAEE,KAAK,EAAEC,SAAS,EAAE;IACnE,MAAMC,IAAI,GAAGH,aAAa,GAAGA,aAAa,GAAGD,aAAa,GAAGK,kCAAmB,CAAC,UAAU,CAAC,GAAGA,kCAAmB,CAAC,SAAS,CAAC;IAC7H,IAAI,CAACH,KAAK,EACR,OAAOE,IAAI,CAACE,IAAI;IAElB,OAAOH,SAAS,GAAGC,IAAI,CAACG,KAAK,GAAGH,IAAI,CAACI,IAAI;EAC3C;AACF,CAAC,GAAG;AAAA,eAEWZ,eAAe;AAAA"}
+{"version":3,"names":["audioIconHelper","getIcon","getIconName","getIconMargin","customIcon","isSpeakerIcon","customIconSet","audio","isPlaying","icon","defaultAudioIconSet","mute","pause","play","marginLeft"],"sourceRoot":"../../src","sources":["audio_icon_helper.js"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA+D;AAE/D,MAAMA,eAAe,GAAG,CAAC,MAAM;EAC7B,OAAO;IACLC,OAAO;IACPC,WAAW;IACXC;EACF,CAAC;EAED,SAASF,OAAO,CAACG,UAAU,EAAEC,aAAa,EAAE;IAC1C,OAAOD,UAAU,GAAGA,UAAU,GAAGC,aAAa,gBAAG,6BAAC,iBAAO,OAAE,gBAAG,6BAAC,gBAAW,OAAE;EAC9E;EAEA,SAASH,WAAW,CAACI,aAAa,EAAED,aAAa,EAAEE,KAAK,EAAEC,SAAS,EAAE;IACnE,MAAMC,IAAI,GAAGH,aAAa,GAAGA,aAAa,GAAGD,aAAa,GAAGK,kCAAmB,CAAC,UAAU,CAAC,GAAGA,kCAAmB,CAAC,SAAS,CAAC;IAC7H,IAAI,CAACH,KAAK,EACR,OAAOE,IAAI,CAACE,IAAI;IAElB,OAAOH,SAAS,GAAGC,IAAI,CAACG,KAAK,GAAGH,IAAI,CAACI,IAAI;EAC3C;EAEA,SAASV,aAAa,CAACK,SAAS,EAAEH,aAAa,EAAE;IAC/C,IAAIG,SAAS,IAAI,CAACH,aAAa,EAAE,OAAO;MAAES,UAAU,EAAE,CAAC;IAAE,CAAC;IAC1D,OAAO;MAAEA,UAAU,EAAE;IAAE,CAAC;EAC1B;AACF,CAAC,GAAG;AAAA,eAEWd,eAAe;AAAA"}

package/lib/module/components/AudioIconComponent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View } from 'react-native';
 import color from '../constants/color_constant';
 import { defaultIconSize, primaryIconColor, secondaryIconColor } from '../constants/component_constant';
 import audioIconHelper from '../helpers/audio_icon_helper';
@@ -9,16 +10,37 @@ const AudioIconComponent = props => {
     return props.isPlaying ? secondaryColor : primaryColor;
   };
   const iconSize = props.iconSize || defaultIconSize;
+  const renderStrikeLine = () => {
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        height: 3,
+        width: iconSize,
+        transform: [{
+          rotate: '45deg'
+        }],
+        backgroundColor: 'white',
+        justifyContent: 'center',
+        position: 'absolute',
+        top: iconSize / 2.4,
+        left: -2,
+        zIndex: 10
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        height: 1.5,
+        backgroundColor: color.muted
+      }
+    }));
+  };
   {/* CloneElement is used so we can pass different type of icon and still using the same configuration */}
-  return /*#__PURE__*/React.cloneElement(audioIconHelper.getIcon(props.customIcon, props.isSpeakerIcon), {
+  return /*#__PURE__*/React.createElement(View, null, !props.audio && !props.isSpeakerIcon && !props.customIcon && renderStrikeLine(), /*#__PURE__*/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
-    }]
-  });
+    style: [{
+      width: iconSize
+    }, audioIconHelper.getIconMargin(props.isPlaying, props.isSpeakerIcon, !!props.customIcon), props.iconStyle]
+  }));
 };
 export default AudioIconComponent;
 {/*

package/lib/module/components/AudioIconComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","color","defaultIconSize","primaryIconColor","secondaryIconColor","audioIconHelper","AudioIconComponent","props","getIconColor","primaryColor","iconPrimaryColor","secondaryColor","iconSecondaryColor","isPlaying","iconSize","cloneElement","getIcon","customIcon","isSpeakerIcon","name","getIconName","customIconSet","audio","size","muted","style","iconStyle","width","marginLeft"],"sourceRoot":"../../src","sources":["AudioIconComponent.js"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,KAAK,MAAM,6BAA6B;AAC/C,SAAQC,eAAe,EAAEC,gBAAgB,EAAEC,kBAAkB,QAAO,iCAAiC;AACrG,OAAOC,eAAe,MAAM,8BAA8B;AAE1D,MAAMC,kBAAkB,GAAIC,KAAK,IAAK;EACpC,MAAMC,YAAY,GAAG,MAAM;IACzB,MAAMC,YAAY,GAAGF,KAAK,CAACG,gBAAgB,IAAIP,gBAAgB;IAC/D,MAAMQ,cAAc,GAAGJ,KAAK,CAACK,kBAAkB,IAAIR,kBAAkB;IACrE,OAAOG,KAAK,CAACM,SAAS,GAAGF,cAAc,GAAGF,YAAY;EACxD,CAAC;EAED,MAAMK,QAAQ,GAAGP,KAAK,CAACO,QAAQ,IAAIZ,eAAe;EAElD,CAAC;EACD,oBACEF,KAAK,CAACe,YAAY,CAACV,eAAe,CAACW,OAAO,CAACT,KAAK,CAACU,UAAU,EAAEV,KAAK,CAACW,aAAa,CAAC,EAAE;IACjFC,IAAI,EAAEd,eAAe,CAACe,WAAW,CAACb,KAAK,CAACc,aAAa,EAAEd,KAAK,CAACW,aAAa,EAAEX,KAAK,CAACe,KAAK,EAAEf,KAAK,CAACM,SAAS,CAAC;IACzGU,IAAI,EAAET,QAAQ;IAAEb,KAAK,EAAE,CAAC,CAACM,KAAK,CAACe,KAAK,GAAGd,YAAY,EAAE,GAAGP,KAAK,CAACuB,KAAK;IACnEC,KAAK,EAAE,CAAClB,KAAK,CAACmB,SAAS,EAAE;MAAEC,KAAK,EAAEb,QAAQ;MAAEc,UAAU,EAAGrB,KAAK,CAACM,SAAS,IAAK,CAACN,KAAK,CAACW,aAAa,GAAI,CAAC,CAAC,GAAG;IAAE,CAAC;EAC/G,CAAC,CAAC;AAEN,CAAC;AAED,eAAeZ,kBAAkB;AAEjC,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAZC"}
+{"version":3,"names":["React","View","color","defaultIconSize","primaryIconColor","secondaryIconColor","audioIconHelper","AudioIconComponent","props","getIconColor","primaryColor","iconPrimaryColor","secondaryColor","iconSecondaryColor","isPlaying","iconSize","renderStrikeLine","height","width","transform","rotate","backgroundColor","justifyContent","position","top","left","zIndex","muted","audio","isSpeakerIcon","customIcon","cloneElement","getIcon","name","getIconName","customIconSet","size","style","getIconMargin","iconStyle"],"sourceRoot":"../../src","sources":["AudioIconComponent.js"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,cAAc;AAEjC,OAAOC,KAAK,MAAM,6BAA6B;AAC/C,SAAQC,eAAe,EAAEC,gBAAgB,EAAEC,kBAAkB,QAAO,iCAAiC;AACrG,OAAOC,eAAe,MAAM,8BAA8B;AAE1D,MAAMC,kBAAkB,GAAIC,KAAK,IAAK;EACpC,MAAMC,YAAY,GAAG,MAAM;IACzB,MAAMC,YAAY,GAAGF,KAAK,CAACG,gBAAgB,IAAIP,gBAAgB;IAC/D,MAAMQ,cAAc,GAAGJ,KAAK,CAACK,kBAAkB,IAAIR,kBAAkB;IACrE,OAAOG,KAAK,CAACM,SAAS,GAAGF,cAAc,GAAGF,YAAY;EACxD,CAAC;EAED,MAAMK,QAAQ,GAAGP,KAAK,CAACO,QAAQ,IAAIZ,eAAe;EAElD,MAAMa,gBAAgB,GAAG,MAAM;IAC7B,oBAAO,oBAAC,IAAI;MAAC,KAAK,EAAE;QAACC,MAAM,EAAE,CAAC;QAAEC,KAAK,EAAEH,QAAQ;QAAEI,SAAS,EAAE,CAAC;UAACC,MAAM,EAAE;QAAO,CAAC,CAAC;QAAEC,eAAe,EAAE,OAAO;QAAEC,cAAc,EAAE,QAAQ;QAAEC,QAAQ,EAAE,UAAU;QAAEC,GAAG,EAAET,QAAQ,GAAG,GAAG;QAAEU,IAAI,EAAE,CAAC,CAAC;QAAEC,MAAM,EAAE;MAAE;IAAE,gBAC5L,oBAAC,IAAI;MAAC,KAAK,EAAE;QAACT,MAAM,EAAE,GAAG;QAAEI,eAAe,EAAEnB,KAAK,CAACyB;MAAK;IAAE,EAAG,CACxD;EAChB,CAAC;EAED,CAAC;EACD,oBACE,oBAAC,IAAI,QACD,CAACnB,KAAK,CAACoB,KAAK,IAAI,CAACpB,KAAK,CAACqB,aAAa,IAAI,CAACrB,KAAK,CAACsB,UAAU,IAAKd,gBAAgB,EAAE,eAEhFhB,KAAK,CAAC+B,YAAY,CAACzB,eAAe,CAAC0B,OAAO,CAACxB,KAAK,CAACsB,UAAU,EAAEtB,KAAK,CAACqB,aAAa,CAAC,EAAE;IACjFI,IAAI,EAAE3B,eAAe,CAAC4B,WAAW,CAAC1B,KAAK,CAAC2B,aAAa,EAAE3B,KAAK,CAACqB,aAAa,EAAErB,KAAK,CAACoB,KAAK,EAAEpB,KAAK,CAACM,SAAS,CAAC;IACzGsB,IAAI,EAAErB,QAAQ;IAAEb,KAAK,EAAE,CAAC,CAACM,KAAK,CAACoB,KAAK,GAAGnB,YAAY,EAAE,GAAGP,KAAK,CAACyB,KAAK;IACnEU,KAAK,EAAE,CAAC;MAAEnB,KAAK,EAAEH;IAAS,CAAC,EAAET,eAAe,CAACgC,aAAa,CAAC9B,KAAK,CAACM,SAAS,EAAEN,KAAK,CAACqB,aAAa,EAAE,CAAC,CAACrB,KAAK,CAACsB,UAAU,CAAC,EAAEtB,KAAK,CAAC+B,SAAS;EACvI,CAAC,CAAC,CAEC;AAEX,CAAC;AAED,eAAehC,kBAAkB;AAEjC,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAZC"}

package/lib/module/helpers/audio_icon_helper.js

@@ -5,7 +5,8 @@ import { defaultAudioIconSet } from '../constants/icon_constant';
 const audioIconHelper = (() => {
   return {
     getIcon,
-    getIconName
+    getIconName,
+    getIconMargin
   };
   function getIcon(customIcon, isSpeakerIcon) {
     return customIcon ? customIcon : isSpeakerIcon ? /*#__PURE__*/React.createElement(IonIcon, null) : /*#__PURE__*/React.createElement(FeatherIcon, null);
@@ -15,6 +16,14 @@ const audioIconHelper = (() => {
     if (!audio) return icon.mute;
     return isPlaying ? icon.pause : icon.play;
   }
+  function getIconMargin(isPlaying, isSpeakerIcon) {
+    if (isPlaying && !isSpeakerIcon) return {
+      marginLeft: -1
+    };
+    return {
+      marginLeft: 0
+    };
+  }
 })();
 export default audioIconHelper;
 //# sourceMappingURL=audio_icon_helper.js.map

package/lib/module/helpers/audio_icon_helper.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FeatherIcon","IonIcon","defaultAudioIconSet","audioIconHelper","getIcon","getIconName","customIcon","isSpeakerIcon","customIconSet","audio","isPlaying","icon","mute","pause","play"],"sourceRoot":"../../src","sources":["audio_icon_helper.js"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAM,mCAAmC;AAC3D,OAAOC,OAAO,MAAM,oCAAoC;AACxD,SAAQC,mBAAmB,QAAO,4BAA4B;AAE9D,MAAMC,eAAe,GAAG,CAAC,MAAM;EAC7B,OAAO;IACLC,OAAO;IACPC;EACF,CAAC;EAED,SAASD,OAAO,CAACE,UAAU,EAAEC,aAAa,EAAE;IAC1C,OAAOD,UAAU,GAAGA,UAAU,GAAGC,aAAa,gBAAG,oBAAC,OAAO,OAAE,gBAAG,oBAAC,WAAW,OAAE;EAC9E;EAEA,SAASF,WAAW,CAACG,aAAa,EAAED,aAAa,EAAEE,KAAK,EAAEC,SAAS,EAAE;IACnE,MAAMC,IAAI,GAAGH,aAAa,GAAGA,aAAa,GAAGD,aAAa,GAAGL,mBAAmB,CAAC,UAAU,CAAC,GAAGA,mBAAmB,CAAC,SAAS,CAAC;IAC7H,IAAI,CAACO,KAAK,EACR,OAAOE,IAAI,CAACC,IAAI;IAElB,OAAOF,SAAS,GAAGC,IAAI,CAACE,KAAK,GAAGF,IAAI,CAACG,IAAI;EAC3C;AACF,CAAC,GAAG;AAEJ,eAAeX,eAAe"}
+{"version":3,"names":["React","FeatherIcon","IonIcon","defaultAudioIconSet","audioIconHelper","getIcon","getIconName","getIconMargin","customIcon","isSpeakerIcon","customIconSet","audio","isPlaying","icon","mute","pause","play","marginLeft"],"sourceRoot":"../../src","sources":["audio_icon_helper.js"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAM,mCAAmC;AAC3D,OAAOC,OAAO,MAAM,oCAAoC;AACxD,SAAQC,mBAAmB,QAAO,4BAA4B;AAE9D,MAAMC,eAAe,GAAG,CAAC,MAAM;EAC7B,OAAO;IACLC,OAAO;IACPC,WAAW;IACXC;EACF,CAAC;EAED,SAASF,OAAO,CAACG,UAAU,EAAEC,aAAa,EAAE;IAC1C,OAAOD,UAAU,GAAGA,UAAU,GAAGC,aAAa,gBAAG,oBAAC,OAAO,OAAE,gBAAG,oBAAC,WAAW,OAAE;EAC9E;EAEA,SAASH,WAAW,CAACI,aAAa,EAAED,aAAa,EAAEE,KAAK,EAAEC,SAAS,EAAE;IACnE,MAAMC,IAAI,GAAGH,aAAa,GAAGA,aAAa,GAAGD,aAAa,GAAGN,mBAAmB,CAAC,UAAU,CAAC,GAAGA,mBAAmB,CAAC,SAAS,CAAC;IAC7H,IAAI,CAACQ,KAAK,EACR,OAAOE,IAAI,CAACC,IAAI;IAElB,OAAOF,SAAS,GAAGC,IAAI,CAACE,KAAK,GAAGF,IAAI,CAACG,IAAI;EAC3C;EAEA,SAAST,aAAa,CAACK,SAAS,EAAEH,aAAa,EAAE;IAC/C,IAAIG,SAAS,IAAI,CAACH,aAAa,EAAE,OAAO;MAAEQ,UAAU,EAAE,CAAC;IAAE,CAAC;IAC1D,OAAO;MAAEA,UAAU,EAAE;IAAE,CAAC;EAC1B;AACF,CAAC,GAAG;AAEJ,eAAeb,eAAe"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-audio-player-button",
-  "version": "1.0.3",
-  "description": "test",
+  "version": "1.0.5",
+  "description": "A custom button with an icon for playing audio. It is able to play the audio without overlapping each other.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

package/src/components/AudioIconComponent.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import {View} from 'react-native'
 
 import color from '../constants/color_constant';
 import {defaultIconSize, primaryIconColor, secondaryIconColor} from '../constants/component_constant';
@@ -13,13 +14,24 @@ const AudioIconComponent = (props) => {
 
   const iconSize = props.iconSize || defaultIconSize
 
+  const renderStrikeLine = () => {
+    return <View style={{height: 3, width: iconSize, transform: [{rotate: '45deg'}], backgroundColor: 'white', justifyContent: 'center', position: 'absolute', top: iconSize / 2.4, left: -2, zIndex: 10}}>
+              <View style={{height: 1.5, backgroundColor: color.muted}} />
+           </View>
+  }
+
   {/* 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 }]
-    })
+    <View>
+      {(!props.audio && !props.isSpeakerIcon && !props.customIcon) && renderStrikeLine()}
+      {
+        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: [{ width: iconSize }, audioIconHelper.getIconMargin(props.isPlaying, props.isSpeakerIcon, !!props.customIcon), props.iconStyle]
+        })
+      }
+    </View>
   )
 }
 

package/src/helpers/audio_icon_helper.js

@@ -7,6 +7,7 @@ const audioIconHelper = (() => {
   return {
     getIcon,
     getIconName,
+    getIconMargin,
   }
 
   function getIcon(customIcon, isSpeakerIcon) {
@@ -20,6 +21,11 @@ const audioIconHelper = (() => {
 
     return isPlaying ? icon.pause : icon.play;
   }
+
+  function getIconMargin(isPlaying, isSpeakerIcon) {
+    if (isPlaying && !isSpeakerIcon) return { marginLeft: -1 }
+    return { marginLeft: 0 }
+  }
 })()
 
 export default audioIconHelper