├── .gitattributes ├── .gitignore ├── README.md ├── android ├── build.gradle ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── ce │ └── go │ └── dai │ ├── RNAudioFloatingWidgetModule.java │ └── RNAudioFloatingWidgetPackage.java ├── index.js └── package.json /.gitattributes: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cinder92/react-native-audio-floating-widget/cdd9ab21a65262d9f9f73adb836011a3e2945c26/.gitattributes -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # OSX 3 | # 4 | .DS_Store 5 | 6 | # node.js 7 | # 8 | node_modules/ 9 | npm-debug.log 10 | yarn-error.log 11 | 12 | 13 | # Android/IntelliJ 14 | # 15 | build/ 16 | .idea 17 | .gradle 18 | local.properties 19 | *.iml 20 | 21 | # BUCK 22 | buck-out/ 23 | \.buckd/ 24 | *.keystore 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # react-native-audio-floating-widget 3 | 4 | This repo is like a "Chat Head" but for audio :), i hope it helps somebody. 5 | 6 | Thanks to `Cleveroad` for `https://android-arsenal.com/details/1/3494#` 7 | 8 | ![](https://github.com/Cleveroad/MusicBobber/raw/master/images/demo.gif?utm_source=android-arsenal.com&utm_medium=referral&utm_campaign=3494) 9 | 10 | ## Getting started 11 | 12 | `$ npm install react-native-audio-floating-widget --save` 13 | 14 | ### Mostly automatic installation 15 | 16 | `$ react-native link react-native-audio-floating-widget` 17 | 18 | ### Manual installation 19 | 20 | 21 | #### Android 22 | 23 | 1. Open up `android/app/src/main/java/[...]/MainActivity.java` 24 | - Add `import ce.go.dai.RNAudioFloatingWidgetPackage;` to the imports at the top of the file 25 | - Add `new RNAudioFloatingWidgetPackage()` to the list returned by the `getPackages()` method 26 | 2. Append the following lines to `android/settings.gradle`: 27 | ``` 28 | include ':react-native-audio-floating-widget' 29 | project(':react-native-audio-floating-widget').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-audio-floating-widget/android') 30 | ``` 31 | 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: 32 | ``` 33 | compile project(':react-native-audio-floating-widget') 34 | ``` 35 | 4. Add the following lines in your MainActivity.java, are mandatory in order to request permission for overlay apps in Android 6+: 36 | 37 | ``` 38 | private static final int CODE_DRAW_OVER_OTHER_APP_PERMISSION = 2084; 39 | 40 | @Override 41 | protected void onCreate(Bundle savedInstanceState) { 42 | super.onCreate(savedInstanceState); 43 | 44 | //Check if the application has draw over other apps permission or not? 45 | //This permission is by default available for API<23. But for API > 23 46 | //you have to ask for the permission in runtime. 47 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && !Settings.canDrawOverlays(this)) { 48 | 49 | //If the draw over permission is not available open the settings screen 50 | //to grant the permission. 51 | Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, 52 | Uri.parse("package:" + getPackageName())); 53 | startActivityForResult(intent, CODE_DRAW_OVER_OTHER_APP_PERMISSION); 54 | } 55 | } 56 | 57 | @Override 58 | protected void onActivityResult(int requestCode, int resultCode, Intent data) { 59 | super.onActivityResult(requestCode, resultCode, data); 60 | if (requestCode == CODE_DRAW_OVER_OTHER_APP_PERMISSION) { 61 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && Settings.canDrawOverlays(this)) { 62 | // now you can show audio widget 63 | } 64 | } 65 | } 66 | ``` 67 | 68 | ## Usage 69 | ```javascript 70 | import AudioFloatingWidget from 'react-native-audio-floating-widget'; 71 | 72 | componentDidMount(){ 73 | //use just .show(), for default colors 74 | AudioFloatingWidget.show({ 75 | withOptions : true, 76 | bubblesMinSize : 50, 77 | bubblesMaxSize: 80, 78 | buttonPadding : 20, 79 | darkColor : "#000000", 80 | lightColor : "#ffffff", 81 | crossColor : "#eeeeee", 82 | crossStrokeWidth : 4, 83 | crossOverlappedColor : "#000000", 84 | progressColor : "#ffffff", 85 | shadowColor : "#cccccc", 86 | shadowRadius : 5, 87 | shadowDx : 5, 88 | shadowDy : 8, 89 | expandWidgetColor : "#f1f1f1" 90 | }); 91 | } 92 | 93 | componentWillMount() { 94 | // this package has eventListeners that you can manage via DeviceEventEmitter; 95 | 96 | DeviceEventEmitter.addListener( 97 | 'onPlayPauseClicked', 98 | (params) => { 99 | alert(params.isPlaying) 100 | } 101 | ); 102 | 103 | //please view available methods in docs 104 | } 105 | ``` 106 | ## Available Methods 107 | | Name | Description | 108 | | ----- | ---------- | 109 | | isShown | Return true if is shown, false if not | 110 | | hide | Destroy the widget | 111 | | show(options or {}) | Show the widget | 112 | 113 | ## Available Listeners 114 | | Name | Description | 115 | | ---- | ----------- | 116 | | onPlaylistClicked | Respond to playlist button click | 117 | | onPreviousClicked | Respond to previous button click | 118 | | onPlayPauseClicked | Return true or false | 119 | | onNextClicked | Respond to next button click | 120 | | onAlbumClicked | Respond to album button click | 121 | | onPlaylistLongClicked | Respond to a long click playlist button | 122 | | onPreviousLongClicked | Respond to a long click previous button | 123 | | onPlayPauseLongClicked | Respond to a long click play/pause button | 124 | | onNextLongClicked | Respond to a long click next button | 125 | | onAlbumLongClicked | Respond to a long click album button | 126 | 127 | ## Available Options 128 | | Option | Description | 129 | | ------ | ----------- | 130 | | withOptions | Set true for enable options | 131 | | bubblesMinSize | Minimum size of bubbles animation | 132 | | bubblesMaxSize | Maximim size of bubbles animation | 133 | | buttonPadding | Padding between widget buttons | 134 | | darkColor | Dark color of widget (String) | 135 | | lightColor | Light color of widget (String) | 136 | | crossColor | - String | 137 | | crossStrokeWidth | - String | 138 | | progressColor | - String | 139 | | shadowColor | - String | 140 | | shadowRadius | int | 141 | | shadowDx | Int | 142 | | shadowDy | Int | 143 | | expandWidgetColor | String | 144 | 145 | ## Methods not implemented (PR) 146 | 147 | ``` 148 | .playDrawable(...) 149 | .pauseDrawable(...) 150 | .playlistDrawable(...) 151 | .prevTrackDrawale(...) 152 | .nextTrackDrawable(...) 153 | .defaultAlbumDrawable(...) 154 | .edgeOffsetXCollapsed(...) 155 | .edgeOffsetYCollapsed(...) 156 | .edgeOffsetXExpanded(...) 157 | .edgeOffsetYExpanded(...) 158 | ``` 159 | 160 | ## Of course, PR are welcome :) -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | 2 | buildscript { 3 | repositories { 4 | jcenter() 5 | } 6 | 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | } 10 | } 11 | 12 | apply plugin: 'com.android.library' 13 | 14 | android { 15 | compileSdkVersion 23 16 | buildToolsVersion "23.0.1" 17 | 18 | defaultConfig { 19 | minSdkVersion 16 20 | targetSdkVersion 22 21 | versionCode 1 22 | versionName "1.0" 23 | } 24 | lintOptions { 25 | abortOnError false 26 | } 27 | } 28 | 29 | repositories { 30 | mavenCentral() 31 | } 32 | 33 | dependencies { 34 | compile 'com.facebook.react:react-native:+' 35 | compile 'com.cleveroad:audiowidget:1.0.0' 36 | } 37 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cinder92/react-native-audio-floating-widget/cdd9ab21a65262d9f9f73adb836011a3e2945c26/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Thu Nov 30 10:16:17 CST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.2-all.zip 7 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # Attempt to set APP_HOME 46 | # Resolve links: $0 may be a link 47 | PRG="$0" 48 | # Need this for relative symlinks. 49 | while [ -h "$PRG" ] ; do 50 | ls=`ls -ld "$PRG"` 51 | link=`expr "$ls" : '.*-> \(.*\)$'` 52 | if expr "$link" : '/.*' > /dev/null; then 53 | PRG="$link" 54 | else 55 | PRG=`dirname "$PRG"`"/$link" 56 | fi 57 | done 58 | SAVED="`pwd`" 59 | cd "`dirname \"$PRG\"`/" >/dev/null 60 | APP_HOME="`pwd -P`" 61 | cd "$SAVED" >/dev/null 62 | 63 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 64 | 65 | # Determine the Java command to use to start the JVM. 66 | if [ -n "$JAVA_HOME" ] ; then 67 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 68 | # IBM's JDK on AIX uses strange locations for the executables 69 | JAVACMD="$JAVA_HOME/jre/sh/java" 70 | else 71 | JAVACMD="$JAVA_HOME/bin/java" 72 | fi 73 | if [ ! -x "$JAVACMD" ] ; then 74 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 75 | 76 | Please set the JAVA_HOME variable in your environment to match the 77 | location of your Java installation." 78 | fi 79 | else 80 | JAVACMD="java" 81 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 82 | 83 | Please set the JAVA_HOME variable in your environment to match the 84 | location of your Java installation." 85 | fi 86 | 87 | # Increase the maximum file descriptors if we can. 88 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 89 | MAX_FD_LIMIT=`ulimit -H -n` 90 | if [ $? -eq 0 ] ; then 91 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 92 | MAX_FD="$MAX_FD_LIMIT" 93 | fi 94 | ulimit -n $MAX_FD 95 | if [ $? -ne 0 ] ; then 96 | warn "Could not set maximum file descriptor limit: $MAX_FD" 97 | fi 98 | else 99 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 100 | fi 101 | fi 102 | 103 | # For Darwin, add options to specify how the application appears in the dock 104 | if $darwin; then 105 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 106 | fi 107 | 108 | # For Cygwin, switch paths to Windows format before running java 109 | if $cygwin ; then 110 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 111 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 112 | JAVACMD=`cygpath --unix "$JAVACMD"` 113 | 114 | # We build the pattern for arguments to be converted via cygpath 115 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 116 | SEP="" 117 | for dir in $ROOTDIRSRAW ; do 118 | ROOTDIRS="$ROOTDIRS$SEP$dir" 119 | SEP="|" 120 | done 121 | OURCYGPATTERN="(^($ROOTDIRS))" 122 | # Add a user-defined pattern to the cygpath arguments 123 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 124 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 125 | fi 126 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 127 | i=0 128 | for arg in "$@" ; do 129 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 130 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 131 | 132 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 133 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 134 | else 135 | eval `echo args$i`="\"$arg\"" 136 | fi 137 | i=$((i+1)) 138 | done 139 | case $i in 140 | (0) set -- ;; 141 | (1) set -- "$args0" ;; 142 | (2) set -- "$args0" "$args1" ;; 143 | (3) set -- "$args0" "$args1" "$args2" ;; 144 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 145 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 146 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 147 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 148 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 149 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 150 | esac 151 | fi 152 | 153 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 154 | function splitJvmOpts() { 155 | JVM_OPTS=("$@") 156 | } 157 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 158 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 159 | 160 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 161 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /android/src/main/java/ce/go/dai/RNAudioFloatingWidgetModule.java: -------------------------------------------------------------------------------- 1 | 2 | package ce.go.dai; 3 | 4 | import android.content.Intent; 5 | import android.graphics.Color; 6 | import android.net.Uri; 7 | import android.os.Build; 8 | import android.provider.Settings; 9 | import android.support.annotation.Nullable; 10 | import android.util.Log; 11 | 12 | import com.cleveroad.audiowidget.AudioWidget; 13 | import com.facebook.react.bridge.Arguments; 14 | import com.facebook.react.bridge.ReactApplicationContext; 15 | import com.facebook.react.bridge.ReactContext; 16 | import com.facebook.react.bridge.ReactContextBaseJavaModule; 17 | import com.facebook.react.bridge.ReactMethod; 18 | import com.facebook.react.bridge.Callback; 19 | import com.facebook.react.bridge.ReadableMap; 20 | import com.facebook.react.bridge.WritableMap; 21 | import com.facebook.react.modules.core.DeviceEventManagerModule; 22 | 23 | public class RNAudioFloatingWidgetModule extends ReactContextBaseJavaModule { 24 | 25 | private final ReactApplicationContext reactContext; 26 | public AudioWidget widget; 27 | public boolean isPlaying = false; 28 | 29 | public RNAudioFloatingWidgetModule(ReactApplicationContext reactContext) { 30 | super(reactContext); 31 | this.reactContext = reactContext; 32 | } 33 | 34 | @Override 35 | public String getName() { 36 | return "RNAudioFloatingWidget"; 37 | } 38 | 39 | @ReactMethod 40 | public void initiate(){ 41 | widget = new AudioWidget.Builder(reactContext).build(); 42 | } 43 | 44 | 45 | @ReactMethod 46 | public void show(ReadableMap options){ 47 | 48 | //if(!widget.isShown()){ 49 | 50 | //validate options 51 | if(options.hasKey("withOptions")){ 52 | 53 | //all fields are mandatory, while we investigate how can we validate methods 54 | 55 | widget = new AudioWidget.Builder(reactContext) 56 | .bubblesMinSize(options.getInt("bubblesMinSize")) 57 | .bubblesMaxSize(options.getInt("bubblesMaxSize")) 58 | .buttonPadding(options.getInt("buttonPadding")) 59 | .darkColor(Color.parseColor(options.getString("darkColor"))) 60 | .lightColor(Color.parseColor(options.getString("lightColor"))) 61 | .crossColor(Color.parseColor(options.getString("crossColor"))) 62 | .crossStrokeWidth(options.getInt("crossStrokeWidth")) 63 | .crossOverlappedColor(Color.parseColor(options.getString("crossOverlappedColor"))) 64 | .progressColor(Color.parseColor(options.getString("progressColor"))) 65 | .shadowColor(Color.parseColor(options.getString("shadowColor"))) 66 | .shadowRadius(options.getInt("shadowRadius")) 67 | .shadowDx(options.getInt("shadowDx")) 68 | .shadowDy(options.getInt("shadowDy")) 69 | .expandWidgetColor(Color.parseColor(options.getString("expandWidgetColor"))) 70 | .build(); 71 | }else{ 72 | 73 | widget = new AudioWidget.Builder(reactContext).build(); 74 | 75 | } 76 | 77 | widget.show(100,100); // Top Left Corner 78 | 79 | // media buttons' click listener 80 | widget.controller().onControlsClickListener(new AudioWidget.OnControlsClickListener() { 81 | 82 | @Override 83 | public boolean onPlaylistClicked() { 84 | // playlist icon clicked 85 | // return false to collapse widget, true to stay in expanded state 86 | WritableMap params = Arguments.createMap(); 87 | sendEvent(reactContext, "onPlaylistClicked", params); 88 | return true; 89 | } 90 | 91 | @Override 92 | public void onPreviousClicked() { 93 | // previous track button clicked 94 | WritableMap params = Arguments.createMap(); 95 | sendEvent(reactContext, "onPreviousClicked", params); 96 | } 97 | 98 | @Override 99 | public boolean onPlayPauseClicked() { 100 | // return true to change playback state of widget and play button click animation (in collapsed state) 101 | WritableMap params = Arguments.createMap(); 102 | //Log.i("isPlaying", Boolean.toString(isPlaying)); 103 | if(!isPlaying){ 104 | isPlaying = true; 105 | params.putBoolean("isPlaying",isPlaying); 106 | sendEvent(reactContext, "onPlayPauseClicked", params); 107 | }else{ 108 | isPlaying = false; 109 | params.putBoolean("isPlaying",isPlaying); 110 | sendEvent(reactContext, "onPlayPauseClicked", params); 111 | } 112 | 113 | return false; 114 | } 115 | 116 | @Override 117 | public void onNextClicked() { 118 | // next track button clicked 119 | WritableMap params = Arguments.createMap(); 120 | sendEvent(reactContext, "onNextClicked", params); 121 | } 122 | 123 | @Override 124 | public void onAlbumClicked() { 125 | // album cover clicked 126 | WritableMap params = Arguments.createMap(); 127 | sendEvent(reactContext, "onAlbumClicked", params); 128 | } 129 | 130 | @Override 131 | public void onPlaylistLongClicked() { 132 | // playlist button long clicked 133 | WritableMap params = Arguments.createMap(); 134 | sendEvent(reactContext, "onPlayListLongClicked", params); 135 | } 136 | 137 | @Override 138 | public void onPreviousLongClicked() { 139 | // previous track button long clicked 140 | WritableMap params = Arguments.createMap(); 141 | sendEvent(reactContext, "onPreviousLongClicked", params); 142 | } 143 | 144 | @Override 145 | public void onPlayPauseLongClicked() { 146 | // play/pause button long clicked 147 | WritableMap params = Arguments.createMap(); 148 | sendEvent(reactContext, "onPlayPauseClicked", params); 149 | } 150 | 151 | @Override 152 | public void onNextLongClicked() { 153 | // next track button long clicked 154 | WritableMap params = Arguments.createMap(); 155 | sendEvent(reactContext, "onNextLongClicked", params); 156 | } 157 | 158 | @Override 159 | public void onAlbumLongClicked() { 160 | // album cover long clicked 161 | WritableMap params = Arguments.createMap(); 162 | sendEvent(reactContext, "onAlbumLongClicked", params); 163 | } 164 | 165 | }); 166 | 167 | } 168 | 169 | @ReactMethod 170 | public void isShown(Callback callback){ 171 | if(widget.isShown()){ 172 | callback.invoke(true); 173 | }else{ 174 | callback.invoke(false); 175 | } 176 | } 177 | 178 | @ReactMethod 179 | public void hide(){ 180 | widget.hide(); 181 | } 182 | 183 | @ReactMethod 184 | public void toggleplay(){ 185 | widget.controller().start(); 186 | } 187 | 188 | 189 | @ReactMethod 190 | public void togglepause(){ 191 | widget.controller().pause(); 192 | } 193 | 194 | 195 | 196 | private void sendEvent(ReactContext reactContext, 197 | String eventName, 198 | @Nullable WritableMap params) { 199 | reactContext 200 | .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) 201 | .emit(eventName, params); 202 | } 203 | 204 | } 205 | -------------------------------------------------------------------------------- /android/src/main/java/ce/go/dai/RNAudioFloatingWidgetPackage.java: -------------------------------------------------------------------------------- 1 | 2 | package ce.go.dai; 3 | 4 | import java.util.Arrays; 5 | import java.util.Collections; 6 | import java.util.List; 7 | 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.bridge.NativeModule; 10 | import com.facebook.react.bridge.ReactApplicationContext; 11 | import com.facebook.react.uimanager.ViewManager; 12 | import com.facebook.react.bridge.JavaScriptModule; 13 | public class RNAudioFloatingWidgetPackage implements ReactPackage { 14 | @Override 15 | public List createNativeModules(ReactApplicationContext reactContext) { 16 | return Arrays.asList(new RNAudioFloatingWidgetModule(reactContext)); 17 | } 18 | 19 | // Deprecated from RN 0.47 20 | public List> createJSModules() { 21 | return Collections.emptyList(); 22 | } 23 | 24 | @Override 25 | public List createViewManagers(ReactApplicationContext reactContext) { 26 | return Collections.emptyList(); 27 | } 28 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | import { NativeModules } from 'react-native'; 3 | 4 | const { RNAudioFloatingWidget } = NativeModules; 5 | 6 | const AudioFloatingWidget = { 7 | initiate(){ 8 | RNAudioFloatingWidget.initiate() 9 | }, 10 | isShown(){ 11 | return new Promise((resolve) => { 12 | RNAudioFloatingWidget.isShown((response) => { 13 | resolve(response); 14 | }); 15 | }); 16 | }, 17 | 18 | show(options){ 19 | RNAudioFloatingWidget.show(options || {}); 20 | }, 21 | 22 | hide(){ 23 | RNAudioFloatingWidget.hide(); 24 | }, 25 | 26 | pause(){ 27 | RNAudioFloatingWidget.togglepause(); 28 | }, 29 | 30 | play(){ 31 | RNAudioFloatingWidget.toggleplay(); 32 | } 33 | } 34 | 35 | export default AudioFloatingWidget; 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "name": "react-native-audio-floating-widget", 4 | "version": "1.0.0", 5 | "description": "", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [ 11 | "react-native", 12 | "audio", 13 | "floating", 14 | "widget", 15 | "music" 16 | ], 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/cinder92/react-native-audio-floating-widget" 20 | }, 21 | "author": "Dante Cervantes", 22 | "license": "", 23 | "peerDependencies": { 24 | "react-native": "^0.41.2" 25 | } 26 | } 27 | --------------------------------------------------------------------------------