react-native-audio-player-button 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +20 -0
- package/README.md +106 -0
- package/lib/commonjs/components/AudioIconComponent.js +45 -0
- package/lib/commonjs/components/AudioIconComponent.js.map +1 -0
- package/lib/commonjs/components/AudioPlayerButtonComponent.js +166 -0
- package/lib/commonjs/components/AudioPlayerButtonComponent.js.map +1 -0
- package/lib/commonjs/components/RippleAnimationComponent.js +78 -0
- package/lib/commonjs/components/RippleAnimationComponent.js.map +1 -0
- package/lib/commonjs/constants/color_constant.js +15 -0
- package/lib/commonjs/constants/color_constant.js.map +1 -0
- package/lib/commonjs/constants/component_constant.js +20 -0
- package/lib/commonjs/constants/component_constant.js.map +1 -0
- package/lib/commonjs/constants/icon_constant.js +20 -0
- package/lib/commonjs/constants/icon_constant.js.map +1 -0
- package/lib/commonjs/helpers/audio_icon_helper.js +28 -0
- package/lib/commonjs/helpers/audio_icon_helper.js.map +1 -0
- package/lib/commonjs/helpers/ripple_animation_helper.js +44 -0
- package/lib/commonjs/helpers/ripple_animation_helper.js.map +1 -0
- package/lib/commonjs/index.js +11 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/services/audio_player_service.js +81 -0
- package/lib/commonjs/services/audio_player_service.js.map +1 -0
- package/lib/commonjs/utils/responsive_util.js +14 -0
- package/lib/commonjs/utils/responsive_util.js.map +1 -0
- package/lib/module/components/AudioIconComponent.js +37 -0
- package/lib/module/components/AudioIconComponent.js.map +1 -0
- package/lib/module/components/AudioPlayerButtonComponent.js +158 -0
- package/lib/module/components/AudioPlayerButtonComponent.js.map +1 -0
- package/lib/module/components/RippleAnimationComponent.js +70 -0
- package/lib/module/components/RippleAnimationComponent.js.map +1 -0
- package/lib/module/constants/color_constant.js +8 -0
- package/lib/module/constants/color_constant.js.map +1 -0
- package/lib/module/constants/component_constant.js +8 -0
- package/lib/module/constants/component_constant.js.map +1 -0
- package/lib/module/constants/icon_constant.js +13 -0
- package/lib/module/constants/icon_constant.js.map +1 -0
- package/lib/module/helpers/audio_icon_helper.js +20 -0
- package/lib/module/helpers/audio_icon_helper.js.map +1 -0
- package/lib/module/helpers/ripple_animation_helper.js +37 -0
- package/lib/module/helpers/ripple_animation_helper.js.map +1 -0
- package/lib/module/index.js +3 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/services/audio_player_service.js +74 -0
- package/lib/module/services/audio_player_service.js.map +1 -0
- package/lib/module/utils/responsive_util.js +7 -0
- package/lib/module/utils/responsive_util.js.map +1 -0
- package/lib/typescript/index.test.d.ts +1 -0
- package/lib/typescript/index.test.d.ts.map +1 -0
- package/package.json +161 -0
- package/src/components/AudioIconComponent.js +40 -0
- package/src/components/AudioPlayerButtonComponent.js +170 -0
- package/src/components/RippleAnimationComponent.js +61 -0
- package/src/constants/color_constant.js +8 -0
- package/src/constants/component_constant.js +8 -0
- package/src/constants/icon_constant.js +12 -0
- package/src/helpers/audio_icon_helper.js +25 -0
- package/src/helpers/ripple_animation_helper.js +46 -0
- package/src/index.js +2 -0
- package/src/services/audio_player_service.js +90 -0
- package/src/utils/responsive_util.js +8 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 Kimsanlim
|
|
4
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
6
|
+
in the Software without restriction, including without limitation the rights
|
|
7
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
8
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
9
|
+
furnished to do so, subject to the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be included in all
|
|
12
|
+
copies or substantial portions of the Software.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
15
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
16
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
17
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
18
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
19
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
20
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
# react-native-audio-player-button
|
|
2
|
+
<span><img src="https://user-images.githubusercontent.com/18114944/215944532-c1ce1e50-9744-4f75-899e-a801d4a2b080.png" width="250" height="500" /></span>
|
|
3
|
+
|
|
4
|
+
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.
|
|
5
|
+
|
|
6
|
+
## Support
|
|
7
|
+
iOS & Android
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
npm install react-native-audio-player-button
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Installing dependencies
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
npm install react-native-vector-icons react-native-sound
|
|
19
|
+
```
|
|
20
|
+
- [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)
|
|
21
|
+
- [react-native-sound](https://github.com/zmxv/react-native-sound)
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
import AudioPlayerButton from 'react-native-audio-player-button';
|
|
27
|
+
import FAIcon from 'react-native-vector-icons/FontAwesome';
|
|
28
|
+
|
|
29
|
+
//...
|
|
30
|
+
const [playingUuid, setPlayingUuid] = React.useState(null);
|
|
31
|
+
|
|
32
|
+
<AudioPlayerServcie
|
|
33
|
+
audio={require('./assets/audios/sample.mp3')}
|
|
34
|
+
itemUuid='abcdefg'
|
|
35
|
+
isSpeakerIcon={true}
|
|
36
|
+
rippled={true}
|
|
37
|
+
iconPrimaryColor='#0088ff'
|
|
38
|
+
iconSecondaryColor='#5da297'
|
|
39
|
+
playingUuid={playingUuid}
|
|
40
|
+
updatePlayingUuid={(uuid) => setPlayingUuid(uuid)}
|
|
41
|
+
containerStyle={{marginTop: 16}}
|
|
42
|
+
customIcon={<FAIcon/>}
|
|
43
|
+
customIconSet={{play: 'play-circle', pause: 'pause-circle', mute: 'repeat'}}
|
|
44
|
+
/>
|
|
45
|
+
```
|
|
46
|
+
## Properties
|
|
47
|
+
#### Basic
|
|
48
|
+
| Prop | Default | Type | Optional | Description |
|
|
49
|
+
| :----------------- | :-----------: | :--------: | :--------: | :------------------------------------------------------------------------------------------- |
|
|
50
|
+
| audio | null | `.mp3` | `false` | The audio file that will be playing |
|
|
51
|
+
| itemUuid | null | `string` | `false` | A unique uuid of the audio or the uuid of the button (to prevent playing audio overlap) |
|
|
52
|
+
| playingUuid | null | `string` | `false` | The uuid of the audio that is currently playing |
|
|
53
|
+
| isSpeakerIcon | false | `boolean` | `true` | If true, it will show a speaker icon. If false, it will show a normal play icon |
|
|
54
|
+
| buttonColor | '#ffffff' | `string` | `true` | The color of the button |
|
|
55
|
+
| buttonHeight | 48 or 56 | `number` | `true` | Height of the button |
|
|
56
|
+
| buttonWidth | 48 or 56 | `number` | `true` | Width of the button |
|
|
57
|
+
| rippled | false | `boolean` | `true` | If true, it will show a ripple animation while playing the audio |
|
|
58
|
+
| rippleColor | '#000000' | `string` | `true` | Color of the ripple animation |
|
|
59
|
+
| rippleHeight | 48 or 56 | `number` | `true` | The height of the ripple animation |
|
|
60
|
+
| rippleWidth | 48 or 56 | `number` | `true` | The width of the ripple animation |
|
|
61
|
+
| rippleRadius | 48 or 56 | `number` | `true` | The radius of the ripple animation |
|
|
62
|
+
| iconSize | 24 or 26 | `number` | `true` | The size of the icons (play and pause icon) |
|
|
63
|
+
| iconPrimaryColor | '#000000' | `string` | `true` | The color of the icon before playing the audio |
|
|
64
|
+
| iconSecondaryColor | '#808080' | `string` | `true` | The color of the icon while playing the audio |
|
|
65
|
+
| playingUuid | '' | `string` | `false` | The uuid of the playing auido component (to prevent playing audio overlap each other) |
|
|
66
|
+
| hasShadow | false | `boolean` | `true` | The shadow of the button (Android only) |
|
|
67
|
+
| allowPause | false | `boolean` | `true` | Allow to pause the audio when toggle the button |
|
|
68
|
+
| isFromAppBundle | false | `boolean` | `false` | Set to `true` to play the audio that is stored in the app bundle (ex: the downloaded audio) |
|
|
69
|
+
|
|
70
|
+
- The default width, height of the button and ripple animation will be `56dp` and `48dp` for the low pixel devices
|
|
71
|
+
|
|
72
|
+
#### Custom styles
|
|
73
|
+
|
|
74
|
+
| Prop | Default | Type | Optional | Description |
|
|
75
|
+
| :-------------------- | :-----------: | :-------: | :--------: | :------------------------------------------------------------------------- |
|
|
76
|
+
| containerStyle | {...} | `style` | `true` | Style of the button and ripple animation container |
|
|
77
|
+
| butonStyle | {...} | `style` | `true` | Style of the button |
|
|
78
|
+
| iconStyle | {...} | `style` | `true` | Style of the audio icons (play and pause icon) |
|
|
79
|
+
| rippleStyle | {...} | `style` | `true` | Style of the ripple animation |
|
|
80
|
+
|
|
81
|
+
#### Custom components
|
|
82
|
+
| Prop | Default | Type | Optional | Description |
|
|
83
|
+
| :---------------- | :-------------------------------: | :----: | :--------: | :--------------------------------------------------- |
|
|
84
|
+
| customIcon | {...} | `comp` | `true` | Custom audio icon component |
|
|
85
|
+
| customIconSet | {{play: '', pause: '', mute: ''}} | `hash` | `true` | A hash of the custom icon names |
|
|
86
|
+
|
|
87
|
+
- `play`: The icon that will be shown when the audio is not playing
|
|
88
|
+
- `pause`: The icon that will be shown while the audio is playing
|
|
89
|
+
- `mute`: The icon that will be shown when there is no audio file
|
|
90
|
+
- Default icon types of the button:
|
|
91
|
+
- Speaker icon use Ionicons
|
|
92
|
+
- Normal play icon use Feather icons
|
|
93
|
+
|
|
94
|
+
#### Events
|
|
95
|
+
|
|
96
|
+
| Prop | Default | Type | Optional | Description |
|
|
97
|
+
| :---------------- | :-------: | :-------: | :--------: | :------------------------------------------------------------------------- |
|
|
98
|
+
| updatePlayingUuid | {...} | `event` | `false` | On press the button, to update the uuid of the playing item |
|
|
99
|
+
|
|
100
|
+
## Contributing
|
|
101
|
+
|
|
102
|
+
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _color_constant = _interopRequireDefault(require("../constants/color_constant"));
|
|
9
|
+
var _component_constant = require("../constants/component_constant");
|
|
10
|
+
var _audio_icon_helper = _interopRequireDefault(require("../helpers/audio_icon_helper"));
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
const AudioIconComponent = props => {
|
|
13
|
+
const getIconColor = () => {
|
|
14
|
+
const primaryColor = props.iconPrimaryColor || _component_constant.primaryIconColor;
|
|
15
|
+
const secondaryColor = props.iconSecondaryColor || _component_constant.secondaryIconColor;
|
|
16
|
+
return props.isPlaying ? secondaryColor : primaryColor;
|
|
17
|
+
};
|
|
18
|
+
const iconSize = props.iconSize || _component_constant.defaultIconSize;
|
|
19
|
+
{/* CloneElement is used so we can pass different type of icon and still using the same configuration */}
|
|
20
|
+
return /*#__PURE__*/_react.default.cloneElement(_audio_icon_helper.default.getIcon(props.customIcon, props.isSpeakerIcon), {
|
|
21
|
+
name: _audio_icon_helper.default.getIconName(props.customIconSet, props.isSpeakerIcon, props.audio, props.isPlaying),
|
|
22
|
+
size: iconSize,
|
|
23
|
+
color: !!props.audio ? getIconColor() : _color_constant.default.muted,
|
|
24
|
+
style: [props.iconStyle, {
|
|
25
|
+
width: iconSize,
|
|
26
|
+
marginLeft: props.isPlaying && !props.isSpeakerIcon ? -2 : 0
|
|
27
|
+
}]
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
var _default = AudioIconComponent;
|
|
31
|
+
exports.default = _default;
|
|
32
|
+
{/*
|
|
33
|
+
<AudioIconComponent
|
|
34
|
+
isPlaying={boolean}
|
|
35
|
+
audio={audio's object}
|
|
36
|
+
isSpeakerIcon={boolean}
|
|
37
|
+
iconStyle={{}}
|
|
38
|
+
iconSize={number}
|
|
39
|
+
primaryColor={}
|
|
40
|
+
secondaryColor={}
|
|
41
|
+
customIcon={Icon component}
|
|
42
|
+
customIconSet={{play: '', pause: '', mute: ''}}
|
|
43
|
+
/>
|
|
44
|
+
*/}
|
|
45
|
+
//# sourceMappingURL=AudioIconComponent.js.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _AudioIconComponent = _interopRequireDefault(require("./AudioIconComponent"));
|
|
10
|
+
var _RippleAnimationComponent = _interopRequireDefault(require("./RippleAnimationComponent"));
|
|
11
|
+
var _component_constant = require("../constants/component_constant");
|
|
12
|
+
var _color_constant = _interopRequireDefault(require("../constants/color_constant"));
|
|
13
|
+
var _audio_player_service = _interopRequireDefault(require("../services/audio_player_service"));
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
const AudioPlayerButtonComponent = props => {
|
|
18
|
+
const localAudioPlayer = (0, _react.useRef)(null);
|
|
19
|
+
const [state, setState] = (0, _react.useState)({
|
|
20
|
+
playSeconds: 0,
|
|
21
|
+
duration: 0,
|
|
22
|
+
countInterval: null
|
|
23
|
+
});
|
|
24
|
+
const [isPlaying, setIsPlaying] = (0, _react.useState)(false);
|
|
25
|
+
(0, _react.useEffect)(() => {
|
|
26
|
+
// Clear the local audio if the user is switching to play another audio
|
|
27
|
+
if (!!props.playingUuid && props.playingUuid != props.itemUuid) clearLocalAudioPlayer();
|
|
28
|
+
|
|
29
|
+
// Clear all the audio if the playingUuid is null (ex: exit the screen)
|
|
30
|
+
if (!props.playingUuid && !!global.audioPlayer && !!localAudioPlayer.current) {
|
|
31
|
+
clearLocalAudioPlayer();
|
|
32
|
+
_audio_player_service.default.clearAllAudio();
|
|
33
|
+
}
|
|
34
|
+
}, [props.playingUuid]);
|
|
35
|
+
(0, _react.useEffect)(() => {
|
|
36
|
+
return () => {
|
|
37
|
+
_audio_player_service.default.clearAllAudio();
|
|
38
|
+
}; // Clear all the audio when component is unmount
|
|
39
|
+
}, []);
|
|
40
|
+
const clearLocalAudioPlayer = () => {
|
|
41
|
+
localAudioPlayer.current = null;
|
|
42
|
+
setState({
|
|
43
|
+
playSeconds: 0,
|
|
44
|
+
duration: 0,
|
|
45
|
+
countInterval: null
|
|
46
|
+
});
|
|
47
|
+
setIsPlaying(false);
|
|
48
|
+
};
|
|
49
|
+
const updateState = (playSeconds, duration, countInterval) => {
|
|
50
|
+
setState({
|
|
51
|
+
playSeconds,
|
|
52
|
+
duration,
|
|
53
|
+
countInterval
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
const handleLocalAudioPlayer = () => {
|
|
57
|
+
if (!props.allowPause) {
|
|
58
|
+
_audio_player_service.default.clearAllAudio();
|
|
59
|
+
clearLocalAudioPlayer();
|
|
60
|
+
props.updatePlayingUuid(null);
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
_audio_player_service.default.playPause(localAudioPlayer.current, state.countInterval, (audioPlayer, playSeconds, duration, countInterval) => {
|
|
64
|
+
handleAudioCallback(audioPlayer, playSeconds, duration, countInterval);
|
|
65
|
+
});
|
|
66
|
+
};
|
|
67
|
+
const toggleAudio = () => {
|
|
68
|
+
if (!!localAudioPlayer.current) return handleLocalAudioPlayer();
|
|
69
|
+
_audio_player_service.default.clearAllAudio(); // Clear all the playing audio when starting to play a new audio if there is an existing audio is playing
|
|
70
|
+
_audio_player_service.default.play(props.audio, props.itemUuid, props.isFromAppBundle || false, props.playingUuid, (audioPlayer, playSeconds, duration, countInterval) => {
|
|
71
|
+
handleAudioCallback(audioPlayer, playSeconds, duration, countInterval);
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
const handleAudioCallback = (audioPlayer, playSeconds, duration, countInterval) => {
|
|
75
|
+
global.audioPlayer = audioPlayer;
|
|
76
|
+
global.countInterval = countInterval;
|
|
77
|
+
localAudioPlayer.current = audioPlayer;
|
|
78
|
+
updateState(playSeconds, duration, countInterval);
|
|
79
|
+
handleStopPlaying(countInterval, playSeconds, duration);
|
|
80
|
+
};
|
|
81
|
+
const handleStopPlaying = (countInterval, playSeconds, duration) => {
|
|
82
|
+
if (!countInterval) {
|
|
83
|
+
setIsPlaying(false);
|
|
84
|
+
if (playSeconds == 0 && duration == 0) props.updatePlayingUuid(null);
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
const onPress = () => {
|
|
88
|
+
props.updatePlayingUuid(props.itemUuid);
|
|
89
|
+
setIsPlaying(!isPlaying);
|
|
90
|
+
toggleAudio();
|
|
91
|
+
};
|
|
92
|
+
const renderRippleAnimation = () => {
|
|
93
|
+
return /*#__PURE__*/_react.default.createElement(_RippleAnimationComponent.default, {
|
|
94
|
+
rippleColor: props.rippleColor,
|
|
95
|
+
height: props.rippleHeight,
|
|
96
|
+
width: props.rippleWidth,
|
|
97
|
+
radius: props.rippleRadius,
|
|
98
|
+
isPlaying: isPlaying,
|
|
99
|
+
rippleStyle: props.rippleStyle
|
|
100
|
+
});
|
|
101
|
+
};
|
|
102
|
+
const renderBtn = () => {
|
|
103
|
+
const btnStyles = {
|
|
104
|
+
alignItems: 'center',
|
|
105
|
+
backgroundColor: props.buttonColor || _color_constant.default.white,
|
|
106
|
+
borderRadius: 48,
|
|
107
|
+
elevation: props.hasShadow ? 4 : 0,
|
|
108
|
+
justifyContent: 'center',
|
|
109
|
+
height: props.buttonHeight || _component_constant.defaultBtnSize,
|
|
110
|
+
width: props.buttonWidth || _component_constant.defaultBtnSize,
|
|
111
|
+
zIndex: 10
|
|
112
|
+
};
|
|
113
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
114
|
+
onPress: () => onPress(),
|
|
115
|
+
disabled: !props.audio,
|
|
116
|
+
style: [btnStyles, props.buttonStyle]
|
|
117
|
+
}, /*#__PURE__*/_react.default.createElement(_AudioIconComponent.default, {
|
|
118
|
+
isPlaying: isPlaying,
|
|
119
|
+
audio: props.audio,
|
|
120
|
+
isSpeakerIcon: props.isSpeakerIcon,
|
|
121
|
+
iconStyle: props.iconStyle,
|
|
122
|
+
iconSize: props.iconSize,
|
|
123
|
+
iconPrimaryColor: props.iconPrimaryColor,
|
|
124
|
+
iconSecondaryColor: props.iconSecondaryColor,
|
|
125
|
+
customIcon: props.customIcon,
|
|
126
|
+
customIconSet: props.customIconSet
|
|
127
|
+
}));
|
|
128
|
+
};
|
|
129
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
130
|
+
style: [{
|
|
131
|
+
justifyContent: 'center',
|
|
132
|
+
alignItems: 'center'
|
|
133
|
+
}, props.containerStyle]
|
|
134
|
+
}, props.rippled && renderRippleAnimation(), renderBtn());
|
|
135
|
+
};
|
|
136
|
+
var _default = AudioPlayerButtonComponent; // How to use
|
|
137
|
+
exports.default = _default;
|
|
138
|
+
{/*
|
|
139
|
+
<AudioPlayerServcie
|
|
140
|
+
audio={}
|
|
141
|
+
itemUuid={string}
|
|
142
|
+
isFromAppBundle={boolean}
|
|
143
|
+
playingUuid={string}
|
|
144
|
+
isSpeakerIcon={boolean}
|
|
145
|
+
buttonColor={}
|
|
146
|
+
buttonHeight={number}
|
|
147
|
+
buttonWidth={number}
|
|
148
|
+
allowPause={boolean}
|
|
149
|
+
rippled={boolean}
|
|
150
|
+
rippleColor={}
|
|
151
|
+
rippleHeight={number}
|
|
152
|
+
rippleWidth={number}
|
|
153
|
+
rippleRadius={number}
|
|
154
|
+
rippleStyle={{}}
|
|
155
|
+
iconStyle={{}}
|
|
156
|
+
iconSize={number}
|
|
157
|
+
iconPrimaryColor={}
|
|
158
|
+
iconSecondaryColor={}
|
|
159
|
+
buttonStyle={{}}
|
|
160
|
+
updatePlayingUuid={(playingUuid) => {}}
|
|
161
|
+
containerStyle={{}}
|
|
162
|
+
customIcon={icon component}
|
|
163
|
+
customIconSet={{play: '', pause: '', mute: ''}}
|
|
164
|
+
/>
|
|
165
|
+
*/}
|
|
166
|
+
//# sourceMappingURL=AudioPlayerButtonComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["AudioPlayerButtonComponent","props","localAudioPlayer","useRef","state","setState","useState","playSeconds","duration","countInterval","isPlaying","setIsPlaying","useEffect","playingUuid","itemUuid","clearLocalAudioPlayer","global","audioPlayer","current","audioPlayerService","clearAllAudio","updateState","handleLocalAudioPlayer","allowPause","updatePlayingUuid","playPause","handleAudioCallback","toggleAudio","play","audio","isFromAppBundle","handleStopPlaying","onPress","renderRippleAnimation","rippleColor","rippleHeight","rippleWidth","rippleRadius","rippleStyle","renderBtn","btnStyles","alignItems","backgroundColor","buttonColor","color","white","borderRadius","elevation","hasShadow","justifyContent","height","buttonHeight","defaultBtnSize","width","buttonWidth","zIndex","buttonStyle","isSpeakerIcon","iconStyle","iconSize","iconPrimaryColor","iconSecondaryColor","customIcon","customIconSet","containerStyle","rippled"],"sourceRoot":"../../src","sources":["AudioPlayerButtonComponent.js"],"mappings":"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"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _color_constant = _interopRequireDefault(require("../constants/color_constant"));
|
|
10
|
+
var _component_constant = require("../constants/component_constant");
|
|
11
|
+
var _ripple_animation_helper = _interopRequireDefault(require("../helpers/ripple_animation_helper"));
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
14
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
+
const RippleAnimationComponent = props => {
|
|
16
|
+
const [componentDidMount, setComponentDidMount] = (0, _react.useState)(false);
|
|
17
|
+
const [state] = (0, _react.useState)({
|
|
18
|
+
opacity1: new _reactNative.Animated.Value(1),
|
|
19
|
+
opacity2: new _reactNative.Animated.Value(1),
|
|
20
|
+
opacity3: new _reactNative.Animated.Value(1),
|
|
21
|
+
scale1: new _reactNative.Animated.Value(0),
|
|
22
|
+
scale2: new _reactNative.Animated.Value(0),
|
|
23
|
+
scale3: new _reactNative.Animated.Value(0)
|
|
24
|
+
});
|
|
25
|
+
const animations = [{
|
|
26
|
+
scale: state.scale1,
|
|
27
|
+
opacity: state.opacity1
|
|
28
|
+
}, {
|
|
29
|
+
scale: state.scale2,
|
|
30
|
+
opacity: state.opacity2
|
|
31
|
+
}, {
|
|
32
|
+
scale: state.scale3,
|
|
33
|
+
opacity: state.opacity3
|
|
34
|
+
}];
|
|
35
|
+
(0, _react.useEffect)(() => {
|
|
36
|
+
if (!componentDidMount) {
|
|
37
|
+
setComponentDidMount(true);
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
props.isPlaying ? _ripple_animation_helper.default.start(animations) : _ripple_animation_helper.default.reset(animations);
|
|
41
|
+
}, [props.isPlaying]);
|
|
42
|
+
const rippleView = index => {
|
|
43
|
+
const rippleStyle = {
|
|
44
|
+
backgroundColor: props.rippleColor || _color_constant.default.black,
|
|
45
|
+
radius: props.radius || _component_constant.defaultRippleSize,
|
|
46
|
+
height: props.height || _component_constant.defaultRippleSize,
|
|
47
|
+
width: props.width || _component_constant.defaultRippleSize
|
|
48
|
+
};
|
|
49
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
50
|
+
key: index,
|
|
51
|
+
style: [_reactNative.StyleSheet.absoluteFillObject, {
|
|
52
|
+
backgroundColor: rippleStyle.backgroundColor
|
|
53
|
+
}, props.rippleStyle, {
|
|
54
|
+
opacity: animations[index].opacity,
|
|
55
|
+
transform: [{
|
|
56
|
+
scale: animations[index].scale
|
|
57
|
+
}],
|
|
58
|
+
height: rippleStyle.height,
|
|
59
|
+
width: rippleStyle.width,
|
|
60
|
+
borderRadius: rippleStyle.radius
|
|
61
|
+
}]
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
return [...Array(3).keys()].map(index => rippleView(index));
|
|
65
|
+
};
|
|
66
|
+
var _default = RippleAnimationComponent; // How to use
|
|
67
|
+
exports.default = _default;
|
|
68
|
+
{/*
|
|
69
|
+
<Ripple
|
|
70
|
+
color={}
|
|
71
|
+
height={number}
|
|
72
|
+
width={number}
|
|
73
|
+
radius={number}
|
|
74
|
+
isPlaying={boolean}
|
|
75
|
+
rippleStyle={{}}
|
|
76
|
+
/>
|
|
77
|
+
*/}
|
|
78
|
+
//# sourceMappingURL=RippleAnimationComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["RippleAnimationComponent","props","componentDidMount","setComponentDidMount","useState","state","opacity1","Animated","Value","opacity2","opacity3","scale1","scale2","scale3","animations","scale","opacity","useEffect","isPlaying","rippleAnimationHelper","start","reset","rippleView","index","rippleStyle","backgroundColor","rippleColor","color","black","radius","defaultRippleSize","height","width","StyleSheet","absoluteFillObject","transform","borderRadius","Array","keys","map"],"sourceRoot":"../../src","sources":["RippleAnimationComponent.js"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAAuE;AAAA;AAAA;AAEvE,MAAMA,wBAAwB,GAAIC,KAAK,IAAK;EAC1C,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACjE,MAAM,CAACC,KAAK,CAAC,GAAG,IAAAD,eAAQ,EAAC;IACvBE,QAAQ,EAAE,IAAIC,qBAAQ,CAACC,KAAK,CAAC,CAAC,CAAC;IAC/BC,QAAQ,EAAE,IAAIF,qBAAQ,CAACC,KAAK,CAAC,CAAC,CAAC;IAC/BE,QAAQ,EAAE,IAAIH,qBAAQ,CAACC,KAAK,CAAC,CAAC,CAAC;IAC/BG,MAAM,EAAE,IAAIJ,qBAAQ,CAACC,KAAK,CAAC,CAAC,CAAC;IAC7BI,MAAM,EAAE,IAAIL,qBAAQ,CAACC,KAAK,CAAC,CAAC,CAAC;IAC7BK,MAAM,EAAE,IAAIN,qBAAQ,CAACC,KAAK,CAAC,CAAC;EAC9B,CAAC,CAAC;EAEF,MAAMM,UAAU,GAAG,CACjB;IAAEC,KAAK,EAAEV,KAAK,CAACM,MAAM;IAAEK,OAAO,EAAEX,KAAK,CAACC;EAAS,CAAC,EAChD;IAAES,KAAK,EAAEV,KAAK,CAACO,MAAM;IAAEI,OAAO,EAAEX,KAAK,CAACI;EAAS,CAAC,EAChD;IAAEM,KAAK,EAAEV,KAAK,CAACQ,MAAM;IAAEG,OAAO,EAAEX,KAAK,CAACK;EAAS,CAAC,CACjD;EAED,IAAAO,gBAAS,EAAC,MAAM;IACd,IAAI,CAACf,iBAAiB,EAAE;MACtBC,oBAAoB,CAAC,IAAI,CAAC;MAC1B;IACF;IAEAF,KAAK,CAACiB,SAAS,GAAGC,gCAAqB,CAACC,KAAK,CAACN,UAAU,CAAC,GAAGK,gCAAqB,CAACE,KAAK,CAACP,UAAU,CAAC;EACrG,CAAC,EAAE,CAACb,KAAK,CAACiB,SAAS,CAAC,CAAC;EAErB,MAAMI,UAAU,GAAIC,KAAK,IAAK;IAC5B,MAAMC,WAAW,GAAG;MAClBC,eAAe,EAAExB,KAAK,CAACyB,WAAW,IAAIC,uBAAK,CAACC,KAAK;MACjDC,MAAM,EAAE5B,KAAK,CAAC4B,MAAM,IAAIC,qCAAiB;MACzCC,MAAM,EAAE9B,KAAK,CAAC8B,MAAM,IAAID,qCAAiB;MACzCE,KAAK,EAAE/B,KAAK,CAAC+B,KAAK,IAAIF;IACxB,CAAC;IAED,oBAAO,6BAAC,qBAAQ,CAAC,IAAI;MAAC,GAAG,EAAEP,KAAM;MAAC,KAAK,EAAE,CAAEU,uBAAU,CAACC,kBAAkB,EAAE;QAAET,eAAe,EAAED,WAAW,CAACC;MAAgB,CAAC,EAAExB,KAAK,CAACuB,WAAW,EACnI;QAACR,OAAO,EAAEF,UAAU,CAACS,KAAK,CAAC,CAACP,OAAO;QAAEmB,SAAS,EAAE,CAAC;UAAEpB,KAAK,EAAED,UAAU,CAACS,KAAK,CAAC,CAACR;QAAM,CAAC,CAAC;QAAEgB,MAAM,EAAEP,WAAW,CAACO,MAAM;QAAEC,KAAK,EAAER,WAAW,CAACQ,KAAK;QAAEI,YAAY,EAAEZ,WAAW,CAACK;MAAO,CAAC;IAC9K,EAAG;EACf,CAAC;EAED,OAAO,CAAC,GAAGQ,KAAK,CAAC,CAAC,CAAC,CAACC,IAAI,EAAE,CAAC,CAACC,GAAG,CAAEhB,KAAK,IAAKD,UAAU,CAACC,KAAK,CAAC,CAAC;AAC/D,CAAC;AAAA,eAEcvB,wBAAwB,EAEvC;AAAA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GATC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
const color = {
|
|
8
|
+
black: '#000000',
|
|
9
|
+
gray: '#808080',
|
|
10
|
+
muted: '#6c757d',
|
|
11
|
+
white: '#ffffff'
|
|
12
|
+
};
|
|
13
|
+
var _default = color;
|
|
14
|
+
exports.default = _default;
|
|
15
|
+
//# sourceMappingURL=color_constant.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["color","black","gray","muted","white"],"sourceRoot":"../../src","sources":["color_constant.js"],"mappings":";;;;;;AAAA,MAAMA,KAAK,GAAG;EACZC,KAAK,EAAE,SAAS;EAChBC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE,SAAS;EAChBC,KAAK,EAAE;AACT,CAAC;AAAA,eAEcJ,KAAK;AAAA"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.secondaryIconColor = exports.primaryIconColor = exports.defaultRippleSize = exports.defaultIconSize = exports.defaultBtnSize = void 0;
|
|
7
|
+
var _responsive_util = require("../utils/responsive_util");
|
|
8
|
+
var _color_constant = _interopRequireDefault(require("./color_constant"));
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
const defaultBtnSize = (0, _responsive_util.isLowPixelDensityDevice)() ? 48 : 56;
|
|
11
|
+
exports.defaultBtnSize = defaultBtnSize;
|
|
12
|
+
const defaultRippleSize = (0, _responsive_util.isLowPixelDensityDevice)() ? 48 : 56;
|
|
13
|
+
exports.defaultRippleSize = defaultRippleSize;
|
|
14
|
+
const defaultIconSize = (0, _responsive_util.isLowPixelDensityDevice)() ? 24 : 26;
|
|
15
|
+
exports.defaultIconSize = defaultIconSize;
|
|
16
|
+
const primaryIconColor = _color_constant.default.black;
|
|
17
|
+
exports.primaryIconColor = primaryIconColor;
|
|
18
|
+
const secondaryIconColor = _color_constant.default.gray;
|
|
19
|
+
exports.secondaryIconColor = secondaryIconColor;
|
|
20
|
+
//# sourceMappingURL=component_constant.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["defaultBtnSize","isLowPixelDensityDevice","defaultRippleSize","defaultIconSize","primaryIconColor","color","black","secondaryIconColor","gray"],"sourceRoot":"../../src","sources":["component_constant.js"],"mappings":";;;;;;AAAA;AACA;AAAqC;AAE9B,MAAMA,cAAc,GAAG,IAAAC,wCAAuB,GAAE,GAAG,EAAE,GAAG,EAAE;AAAA;AAC1D,MAAMC,iBAAiB,GAAG,IAAAD,wCAAuB,GAAE,GAAG,EAAE,GAAG,EAAE;AAAA;AAC7D,MAAME,eAAe,GAAG,IAAAF,wCAAuB,GAAE,GAAG,EAAE,GAAG,EAAE;AAAA;AAC3D,MAAMG,gBAAgB,GAAGC,uBAAK,CAACC,KAAK;AAAA;AACpC,MAAMC,kBAAkB,GAAGF,uBAAK,CAACG,IAAI;AAAA"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.defaultAudioIconSet = void 0;
|
|
7
|
+
const defaultAudioIconSet = {
|
|
8
|
+
'ion_icon': {
|
|
9
|
+
play: 'volume-high-outline',
|
|
10
|
+
pause: 'pause',
|
|
11
|
+
mute: 'volume-mute-outline'
|
|
12
|
+
},
|
|
13
|
+
'feather': {
|
|
14
|
+
play: 'play',
|
|
15
|
+
pause: 'pause',
|
|
16
|
+
mute: 'play'
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
exports.defaultAudioIconSet = defaultAudioIconSet;
|
|
20
|
+
//# sourceMappingURL=icon_constant.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["defaultAudioIconSet","play","pause","mute"],"sourceRoot":"../../src","sources":["icon_constant.js"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAG;EACjC,UAAU,EAAE;IACVC,IAAI,EAAE,qBAAqB;IAC3BC,KAAK,EAAE,OAAO;IACdC,IAAI,EAAE;EACR,CAAC;EACD,SAAS,EAAE;IACTF,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,OAAO;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAAA"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _Feather = _interopRequireDefault(require("react-native-vector-icons/Feather"));
|
|
9
|
+
var _Ionicons = _interopRequireDefault(require("react-native-vector-icons/Ionicons"));
|
|
10
|
+
var _icon_constant = require("../constants/icon_constant");
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
const audioIconHelper = (() => {
|
|
13
|
+
return {
|
|
14
|
+
getIcon,
|
|
15
|
+
getIconName
|
|
16
|
+
};
|
|
17
|
+
function getIcon(customIcon, isSpeakerIcon) {
|
|
18
|
+
return customIcon ? customIcon : isSpeakerIcon ? /*#__PURE__*/_react.default.createElement(_Ionicons.default, null) : /*#__PURE__*/_react.default.createElement(_Feather.default, null);
|
|
19
|
+
}
|
|
20
|
+
function getIconName(customIconSet, isSpeakerIcon, audio, isPlaying) {
|
|
21
|
+
const icon = customIconSet ? customIconSet : isSpeakerIcon ? _icon_constant.defaultAudioIconSet['ion_icon'] : _icon_constant.defaultAudioIconSet['feather'];
|
|
22
|
+
if (!audio) return icon.mute;
|
|
23
|
+
return isPlaying ? icon.pause : icon.play;
|
|
24
|
+
}
|
|
25
|
+
})();
|
|
26
|
+
var _default = audioIconHelper;
|
|
27
|
+
exports.default = _default;
|
|
28
|
+
//# sourceMappingURL=audio_icon_helper.js.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _reactNative = require("react-native");
|
|
8
|
+
const rippleAnimationHelper = (() => {
|
|
9
|
+
return {
|
|
10
|
+
start,
|
|
11
|
+
reset
|
|
12
|
+
};
|
|
13
|
+
function start(animations) {
|
|
14
|
+
animations.map((animation, index) => {
|
|
15
|
+
_reactNative.Animated.loop(_reactNative.Animated.parallel([_animatedTiming(animation.scale, 1.8, index * 400), _animatedTiming(animation.opacity, 0, index * 400)], {
|
|
16
|
+
useNativeDriver: true
|
|
17
|
+
})).start();
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
function reset(animations) {
|
|
21
|
+
_reactNative.Animated.loop(_reactNative.Animated.parallel(_allAnimatedTimings(animations))).reset();
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// private methods
|
|
25
|
+
function _animatedTiming(type, toValue, delay) {
|
|
26
|
+
return _reactNative.Animated.timing(type, {
|
|
27
|
+
toValue: toValue,
|
|
28
|
+
duration: 2000,
|
|
29
|
+
delay: delay,
|
|
30
|
+
useNativeDriver: true
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
function _allAnimatedTimings(animations) {
|
|
34
|
+
const animated = [];
|
|
35
|
+
animations.map(animation => {
|
|
36
|
+
animated.push(_reactNative.Animated.timing(animation.scale));
|
|
37
|
+
animated.push(_reactNative.Animated.timing(animation.opacity));
|
|
38
|
+
});
|
|
39
|
+
return animated;
|
|
40
|
+
}
|
|
41
|
+
})();
|
|
42
|
+
var _default = rippleAnimationHelper;
|
|
43
|
+
exports.default = _default;
|
|
44
|
+
//# sourceMappingURL=ripple_animation_helper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["rippleAnimationHelper","start","reset","animations","map","animation","index","Animated","loop","parallel","_animatedTiming","scale","opacity","useNativeDriver","_allAnimatedTimings","type","toValue","delay","timing","duration","animated","push"],"sourceRoot":"../../src","sources":["ripple_animation_helper.js"],"mappings":";;;;;;AAAA;AAEA,MAAMA,qBAAqB,GAAG,CAAC,MAAM;EACnC,OAAO;IACLC,KAAK;IACLC;EACF,CAAC;EAED,SAASD,KAAK,CAACE,UAAU,EAAE;IACzBA,UAAU,CAACC,GAAG,CAAC,CAACC,SAAS,EAAEC,KAAK,KAAK;MACnCC,qBAAQ,CAACC,IAAI,CACXD,qBAAQ,CAACE,QAAQ,CAAC,CAChBC,eAAe,CAACL,SAAS,CAACM,KAAK,EAAE,GAAG,EAAEL,KAAK,GAAG,GAAG,CAAC,EAClDI,eAAe,CAACL,SAAS,CAACO,OAAO,EAAE,CAAC,EAAEN,KAAK,GAAG,GAAG,CAAC,CACnD,EAAE;QAAEO,eAAe,EAAE;MAAK,CAAC,CAAC,CAC9B,CAACZ,KAAK,EAAE;IACX,CAAC,CAAC;EACJ;EAEA,SAASC,KAAK,CAACC,UAAU,EAAE;IACzBI,qBAAQ,CAACC,IAAI,CACXD,qBAAQ,CAACE,QAAQ,CAACK,mBAAmB,CAACX,UAAU,CAAC,CAAC,CACnD,CAACD,KAAK,EAAE;EACX;;EAEA;EACA,SAASQ,eAAe,CAACK,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAAE;IAC7C,OAAOV,qBAAQ,CAACW,MAAM,CAACH,IAAI,EAAE;MACrBC,OAAO,EAAEA,OAAO;MAChBG,QAAQ,EAAE,IAAI;MACdF,KAAK,EAAEA,KAAK;MACZJ,eAAe,EAAE;IACnB,CAAC,CAAC;EACV;EAEA,SAASC,mBAAmB,CAACX,UAAU,EAAE;IACvC,MAAMiB,QAAQ,GAAG,EAAE;IACnBjB,UAAU,CAACC,GAAG,CAACC,SAAS,IAAI;MAC1Be,QAAQ,CAACC,IAAI,CAACd,qBAAQ,CAACW,MAAM,CAACb,SAAS,CAACM,KAAK,CAAC,CAAC;MAC/CS,QAAQ,CAACC,IAAI,CAACd,qBAAQ,CAACW,MAAM,CAACb,SAAS,CAACO,OAAO,CAAC,CAAC;IACnD,CAAC,CAAC;IACF,OAAOQ,QAAQ;EACjB;AACF,CAAC,GAAG;AAAC,eAEUpB,qBAAqB;AAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _AudioPlayerButtonComponent = _interopRequireDefault(require("./components/AudioPlayerButtonComponent"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
var _default = _AudioPlayerButtonComponent.default;
|
|
10
|
+
exports.default = _default;
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["AudioPlayerButton"],"sourceRoot":"../../src","sources":["index.js"],"mappings":";;;;;;AAAA;AAAwE;AAAA,eACzDA,mCAAiB;AAAA"}
|