# react-native-audio-floating-widget

> This repo is like a "Chat Head" but for audio :), i hope it helps somebody.

Latest version **1.0.0** (published 2017-12-01) · 0 weekly downloads

## Install

```sh
npm install react-native-audio-floating-widget
pnpm add react-native-audio-floating-widget
yarn add react-native-audio-floating-widget
bun add react-native-audio-floating-widget
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-12-01 |
| First published | 2017-12-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 65 |
| Author | Dante Cervantes |
| Maintainers | cegodai |
| Keywords | react-native, audio, floating, widget, music |

## Links

- npm: https://www.npmjs.com/package/react-native-audio-floating-widget
- Repository: https://github.com/cinder92/react-native-audio-floating-widget
- Homepage: https://github.com/cinder92/react-native-audio-floating-widget#readme
- Issues: https://github.com/cinder92/react-native-audio-floating-widget/issues
- npm.io page: https://npm.io/package/react-native-audio-floating-widget

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-12-01

## README

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

![](https://github.com/Cleveroad/MusicBobber/raw/master/images/demo.gif?utm_source=android-arsenal.com&utm_medium=referral&utm_campaign=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
```javascript
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 :)

---
_Source: https://npm.io/package/react-native-audio-floating-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._