BasicPlayer.tsx

const BasicPlayer = () => {
  const player = useSafePlayer();
  const remoteURL =
    '';

  useEffect(() => {
      MusicControl.enableBackgroundMode(true);
      // MusicControl.handleAudioInterruptions(true);
      // Basic Controls
      MusicControl.enableControl('play', true)
      MusicControl.enableControl('pause', true)
      MusicControl.enableControl('stop', false)
      MusicControl.enableControl('nextTrack', false)
      MusicControl.enableControl('previousTrack', false)

      MusicControl.enableControl('seekForward', false) // iOS only
      MusicControl.enableControl('seekBackward', false) // iOS only
      MusicControl.enableControl('seek', false) // Android only
      MusicControl.enableControl('skipForward', false)
      MusicControl.enableControl('skipBackward', false)

      MusicControl.enableControl('setRating', false)
      MusicControl.enableControl('volume', true) // Only affected when remoteVolume is enabled
      MusicControl.enableControl('remoteVolume', true)

      MusicControl.enableControl('enableLanguageOption', false)
      MusicControl.enableControl('disableLanguageOption', false)

      MusicControl.enableControl('closeNotification', true, { when: 'never' })

      MusicControl.on(Command.play, ()=> {
          player.actions.play()
      })

      MusicControl.on(Command.pause, ()=> {
          player.actions.pause()
      })

      MusicControl.on(Command.stop, ()=> {
          player.actions.pause()
      })

      MusicControl.on(Command.volume, (volume)=> {
          player.actions.volume.updateVolume(volume)
      })

      MusicControl.on(Command.togglePlayPause, ()=> {
          player.actions.play()
      }); // iOS only
  }, [])


    useEffect(() => {
        if (player.state.paused) {
            MusicControl.updatePlayback({
                state: MusicControl.STATE_PAUSED,
            })
        } else {
            MusicControl.updatePlayback({
                state: MusicControl.STATE_PLAYING,
            })
        }
    }, [player.state.paused])

    useEffect(() => {
        MusicControl.updatePlayback({
            volume: player.state.volume,
            maxVolume: player.state.maxVolume
        })
    }, [player.state.volume])

  return (
    ...
        <Video
          allowsExternalPlayback={true}
          audioOnly={true}
          source={{uri: remoteURL}} // Can be a URL or a local file.
          playInBackground={true}
          playWhenInactive={true}
          ignoreSilentSwitch={'ignore'}
          paused={player.state.paused}
          // paused={true}
          muted={player.state.muted}
          volume={player.state.volume / 10}
          ref={() => {
            // this.player = ref;
          }} // Store reference
          onLoad={() => {
              MusicControl.setNowPlaying({
                  title: remoteConfig().getString('player_title'),
                  artwork: remoteConfig().getString('player_image'), // URL or RN's image require()
                  artist: remoteConfig().getString('player_artist'),
                  album: remoteConfig().getString('player_album'),
                  genre: remoteConfig().getString('player_genre'),
                  duration: 1000000000000000000000000, // (Seconds)
                  description: remoteConfig().getString('player_description'), // Android Only
                  color: remoteConfig().getNumber('player_color'), // Android Only - Notification Color
                  colorized: true, // Android 8+ Only - Notification Color extracted from the artwork. Set to false to use the color property instead
                  date: new Date().toISOString(), // Release Date (RFC 3339) - Android Only
                  rating: 83, // Android Only (Boolean or Number depending on the type)
                  notificationIcon: 'my_custom_icon', // Android Only (String), Android Drawable resource name for a custom notification icon
                  isLiveStream: remoteConfig().getBoolean('is_live'), // iOS Only (Boolean), Show or hide Live Indicator instead of seekbar on lock screen for live streams. Default value is false.
              })
          }}
          onBuffer={() => {
          }} // Callback when remote video is buffering
          onError={(error: Error) => {
            console.log('error => ', error);
          }} // Callback when video cannot be loaded
        />
          ...
  );
};

export default BasicPlayer;

Thank you very much for the sample code. I just understand how to implement them.

Hi @reberthkss

Thanks for this code!

I have tried this one but Media controls are not working when app is lock or in the background mode.

Can you guide me here Please.

Thanks

Hi @reberthkss

Thanks for this code!

I have tried this one but Media controls are not working when app is lock or in the background mode.

Can you guide me here Please.

Thanks

Hey, you must implement your useSafePlayer() hook. Look how i did:

useSafePlayer -> https://gist.github.com/reberthkss/f61f9f385b45324c0f6c7c849f535e93
useSafeNetworkContext -> https://gist.github.com/reberthkss/ab67042534c500e8d7fe7b97bb5f7c3c