This repo is like a "Chat Head" but for audio :), i hope it helps somebody.
Thanks to Cleveroad for https://android-arsenal.com/details/1/3494#
$ npm install react-native-audio-floating-widget --save
$ react-native link react-native-audio-floating-widget
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import ce.go.dai.RNAudioFloatingWidgetPackage;to the imports at the top of the file - Add
new RNAudioFloatingWidgetPackage()to the list returned by thegetPackages()method
- Append the following lines to
android/settings.gradle:include ':react-native-audio-floating-widget' project(':react-native-audio-floating-widget').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-audio-floating-widget/android') - Insert the following lines inside the dependencies block in
android/app/build.gradle:compile project(':react-native-audio-floating-widget') - Add the following lines in your MainActivity.java, are mandatory in order to request permission for overlay apps in Android 6+:
private static final int CODE_DRAW_OVER_OTHER_APP_PERMISSION = 2084;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//Check if the application has draw over other apps permission or not?
//This permission is by default available for API<23. But for API > 23
//you have to ask for the permission in runtime.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && !Settings.canDrawOverlays(this)) {
//If the draw over permission is not available open the settings screen
//to grant the permission.
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, CODE_DRAW_OVER_OTHER_APP_PERMISSION);
}
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == CODE_DRAW_OVER_OTHER_APP_PERMISSION) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && Settings.canDrawOverlays(this)) {
// now you can show audio widget
}
}
}
import AudioFloatingWidget from 'react-native-audio-floating-widget';
componentDidMount(){
//use just .show(), for default colors
AudioFloatingWidget.show({
withOptions : true,
bubblesMinSize : 50,
bubblesMaxSize: 80,
buttonPadding : 20,
darkColor : "#000000",
lightColor : "#ffffff",
crossColor : "#eeeeee",
crossStrokeWidth : 4,
crossOverlappedColor : "#000000",
progressColor : "#ffffff",
shadowColor : "#cccccc",
shadowRadius : 5,
shadowDx : 5,
shadowDy : 8,
expandWidgetColor : "#f1f1f1"
});
}
componentWillMount() {
// this package has eventListeners that you can manage via DeviceEventEmitter;
DeviceEventEmitter.addListener(
'onPlayPauseClicked',
(params) => {
alert(params.isPlaying)
}
);
//please view available methods in docs
}| Name | Description |
|---|---|
| isShown | Return true if is shown, false if not |
| hide | Destroy the widget |
| show(options or {}) | Show the widget |
| Name | Description |
|---|---|
| onPlaylistClicked | Respond to playlist button click |
| onPreviousClicked | Respond to previous button click |
| onPlayPauseClicked | Return true or false |
| onNextClicked | Respond to next button click |
| onAlbumClicked | Respond to album button click |
| onPlaylistLongClicked | Respond to a long click playlist button |
| onPreviousLongClicked | Respond to a long click previous button |
| onPlayPauseLongClicked | Respond to a long click play/pause button |
| onNextLongClicked | Respond to a long click next button |
| onAlbumLongClicked | Respond to a long click album button |
| Option | Description |
|---|---|
| withOptions | Set true for enable options |
| bubblesMinSize | Minimum size of bubbles animation |
| bubblesMaxSize | Maximim size of bubbles animation |
| buttonPadding | Padding between widget buttons |
| darkColor | Dark color of widget (String) |
| lightColor | Light color of widget (String) |
| crossColor | - String |
| crossStrokeWidth | - String |
| progressColor | - String |
| shadowColor | - String |
| shadowRadius | int |
| shadowDx | Int |
| shadowDy | Int |
| expandWidgetColor | String |
.playDrawable(...)
.pauseDrawable(...)
.playlistDrawable(...)
.prevTrackDrawale(...)
.nextTrackDrawable(...)
.defaultAlbumDrawable(...)
.edgeOffsetXCollapsed(...)
.edgeOffsetYCollapsed(...)
.edgeOffsetXExpanded(...)
.edgeOffsetYExpanded(...)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent