react-native-audio-floating-widget

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#

Getting started

$ npm install react-native-audio-floating-widget --save

Mostly automatic installation

$ react-native link react-native-audio-floating-widget

Manual installation

Android

1. 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 the getPackages() method

2. 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')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-audio-floating-widget')

4. 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
            }
        }
    }

Usage

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
}

Available Methods

| Name | Description | | ----- | ---------- | | isShown | Return true if is shown, false if not | | hide | Destroy the widget | | show(options || {}) | Show the widget |

Available Listeners

| 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 |

Available Options

| 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 |

Methods not implemented (PR)

.playDrawable(...)
.pauseDrawable(...)
.playlistDrawable(...)
.prevTrackDrawale(...)
.nextTrackDrawable(...)
.defaultAlbumDrawable(...)
.edgeOffsetXCollapsed(...)
.edgeOffsetYCollapsed(...)
.edgeOffsetXExpanded(...)
.edgeOffsetYExpanded(...)

Of course, PR are welcome :)