make default showVolumeUI configurable

[belens]

Would be handy to define if the volume ui feedback is shown by default, now if you just want to track volume and nothing else, the volume feedback is suppressed.

It would be nice to be able to set if the ui is shown initially, since it is always turned off once you load react-native-system-setting.

[c19354837]

since it is always turned off once you load react-native-system-setting

setVolumn(0.5, { showUI: true }) doesn't work ?

[amsul]

@c19354837 that doesn't seem to work for me. It'd be really nice to have this as a configurable open on initialize :)

[c19354837]

How about the example?

[amsul]

That would only be when you're changing the volume. But if you're only using the library to listen to the volume changes, then setVolume is never going to be called.

[c19354837]

Do you mean that hide the system volume UI when you press volume up/down buttons?

[amsul]

@c19354837 I mean, we should be able to see the system volume UI when the up/down volume buttons are pressed if we're only using SystemSetting.addVolumeListener

[alexfigliolia]

Agreed, with a volume listener this library will hide the default UI

[c19354837]

I reproduce in iOS, while Android is OK. Have you tested it in Android @amsul @alexfigliolia ?

[amsul]

@c19354837 nope..I only checked iOS. Is there an easy way to resolve this?

[c19354837]

V 1.5.1 is available. It'll show volume UI by default for iOS when you press the physical volume button

setVolumn(value, { showUI: false }) will hide the UI again for iOS.

Android shows the UI always

[amsul]

@c19354837 awesome!! Thanks for the quick release 🙏

[pppppppppppp12]

For Android, when I press the physical volume button, how can i hide the system Volum UI with a volume listener ?

[c19354837]

For Android, you can add these codes in yourPorject/src/main/java/.../MainActivity.java

public class MainActivity extends ReactActivity {
    @Override
    protected String getMainComponentName() {
        return "SystemSettingExample";
    }

    // hide the system volume UI
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_VOLUME_DOWN)) {
            AudioManager manager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE);
            manager.adjustVolume(AudioManager.ADJUST_LOWER, 0);
        }
        if ((keyCode == KeyEvent.KEYCODE_VOLUME_UP)) {
            AudioManager manager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE);
            manager.adjustVolume(AudioManager.ADJUST_RAISE, 0);
        }
        return true;
    }
}

[pppppppppppp12]

@c19354837 thanks~

[alexfigliolia]

@c19354837 Thank you for quick fix

[heyman333]

@c19354837 Sorry to bother you..

this code makes android hardware backButton not working properly

    // hide the system volume UI
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_VOLUME_DOWN)) {
            AudioManager manager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE);
            manager.adjustVolume(AudioManager.ADJUST_LOWER, 0);
        }
        if ((keyCode == KeyEvent.KEYCODE_VOLUME_UP)) {
            AudioManager manager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE);
            manager.adjustVolume(AudioManager.ADJUST_RAISE, 0);
        }
        return true;
    }

[heyman333]

I found a solution

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
import android.view.KeyEvent;
import android.media.AudioManager;
import android.content.Context;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactInstanceManager;


public class MainActivity extends ReactActivity {
    private ReactInstanceManager mReactInstanceManager;

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */

    .....

    // hide the system volume UI
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (mReactInstanceManager != null) {
                mReactInstanceManager.onBackPressed();
            } else {
                super.onBackPressed();
            }  
        }
        if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN) {
            AudioManager manager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE);
            manager.adjustVolume(AudioManager.ADJUST_LOWER, 0);
        }
        if (keyCode == KeyEvent.KEYCODE_VOLUME_UP) {
            AudioManager manager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE);
            manager.adjustVolume(AudioManager.ADJUST_RAISE, 0);
        }
        return true;
    }
}

[c19354837]

Thank you. It's my fault, and my codes will block any key event. The right codes can be

public class MainActivity extends ReactActivity {
    @Override
    protected String getMainComponentName() {
        return "SystemSettingExample";
    }

    // hide the system volume UI
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_VOLUME_DOWN)) {
            AudioManager manager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE);
            manager.adjustVolume(AudioManager.ADJUST_LOWER, 0);
            return true;
        }
        if ((keyCode == KeyEvent.KEYCODE_VOLUME_UP)) {
            AudioManager manager = (AudioManager) this.getSystemService(Context.AUDIO_SERVICE);
            manager.adjustVolume(AudioManager.ADJUST_RAISE, 0);
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

@heyman333 @pppppppppppp12

[heyman333]

@c19354837 really appriciate it 👍