Description

The media controls notification is rendered completely different on different devices. On some devices I get these good looking controls with the artwork as background. But sometimes I get a notification with only three controls that looks not very good:

Shot

Is it somehow possible to avoid this notification style and get a consistent look for all Android devices?

Sample code (provide repo url or sample code)


import { compose } from 'ramda';
import React, { useEffect } from 'react';
import MusicControl, { Command } from 'react-native-music-control';
import { connect } from 'react-redux';

import { configure } from '../../config/configure'; import { getCurrentCourse, getCurrentLesson, getNextLesson, getPreviousLesson, setCurrentLesson, } from '../../features/player/player-reducer';

const get = configure();

const mapStateToProps = state => ({ nextLesson: getNextLesson(state), previousLesson: getPreviousLesson(state), currentLesson: getCurrentLesson(state), currentCourse: getCurrentCourse(state), });

export default compose(connect(mapStateToProps, { setCurrentLesson }))( ({ onPlay, onPause, onSeekForward, onSeekBackward, nextLesson, previousLesson, currentLesson, setCurrentLesson, currentCourse, }) => { useEffect(() => { MusicControl.setNowPlaying({ title: currentLesson.title, artwork: get('REMOTE_IMAGE')(currentCourse.artwork), }); }, [currentLesson, currentCourse]);

MusicControl.enableBackgroundMode(true);
MusicControl.enableControl('closeNotification', true, { when: 'always' });
MusicControl.enableControl('play', true);
MusicControl.enableControl('pause', true);
MusicControl.enableControl('stop', false);
MusicControl.enableControl('previousTrack', true);
MusicControl.enableControl('skipForward', false);
MusicControl.enableControl('skipBackward', false);
MusicControl.enableControl('nextTrack', true);

MusicControl.on(Command.nextTrack, () => {
  setCurrentLesson(nextLesson);
});

MusicControl.on(Command.previousTrack, () => {
  setCurrentLesson(previousLesson);
});

MusicControl.on(Command.pause, () => {
  MusicControl.updatePlayback({
    state: MusicControl.STATE_PAUSED,
  });
  onPause();
});

MusicControl.on(Command.play, () => {
  MusicControl.updatePlayback({
    state: MusicControl.STATE_PLAYING,
  });
  onPlay();
});

return <></>;

} );



<!-- replace the balnk space within backets by a x so that it checks the box ;-) -->
2. Platform ?

   - [ ] iOS
   - [x] Android

<!-- same here -->   
3. Device
  - [ ] Simulator
  - [x] Real device

tanguyantoine / react-native-music-control

Control Notification does not look good on all Android devices #373

Description