Implement setPlaylistItemCallback

[hunyoboy]

What needs to be implemented
Implement setPlaylistItemCallback to be accessible in React Native.

How should it be implemented

RN side:

1. onBeforeNextPlaylistItem - a js function prop that fires when setPlaylistItemCallback fires.
2. resolveNextPlaylistItem - a js function that passes an updated playlist item to the native side and calls the completion parameter of JWPlayerPlaylistItemCallback

Native side:

var onBeforeNextPlaylistItemCompletion: ((JWPlayerItem?) -> ())? // stores the completion parameter for later execution

// should be exposed to the RN side as player api
func resolveNextPlaylistItem(playlistItem: JWPlayerItem) {
    if let completion = self.onBeforeNextPlaylistItemCompletion {
        completion(playlistItem)
    }
    self.onBeforeNextPlaylistItemCompletion = nil
}

player.setPlaylistItemCallback{[weak self] (item: JWPlayerItem, index: Int, completion: @escaping (JWPlayerItem?) -> ()?) in
   if (self?.onBeforeNextPlaylistItem != nil) {
        self?.onBeforeNextPlaylistItemCompletion = completion
        
        let data = try? JSONSerialization.data(withJSONObject: item.toJSONObject(), options: [.prettyPrinted])
        
        // pass the playlist item to the RN side
        self?.onBeforeNextPlaylistItem!(["playlistItem": String(data:data!, encoding:String.Encoding.utf8) as Any, "index": index])
     
        return
    }
   
    // resume normally if not using onBeforeNextPlaylistItem prop
    completion(item)
}

RN side usage:

<JWPlayer
    onBeforeNextPlaylistItem={async ({ nativeEvent }) => {
          // perform some async data processing
          const updatedPlaylistItem = await enrichPlaylistItem(JSON.parse(nativeEvent.playlistItem || {}));
         
          // pass the processsed playlist item to the RN bridge to be loaded to the player
          playerRef.current.resolveNextPlaylistItem(updatedPlaylistItem);
    }}
    // ... more props

Acceptance Criteria

1. onBeforeNextPlaylistItem should be a js function prop that fires when setPlaylistItemCallback fires.
2. resolveNextPlaylistItem should be a js function exposed as a player api. When invoked, it should pass an updated playlist item to the native side and calls the completion parameter of JWPlayerPlaylistItemCallback
3. It should be documented that using the onBeforeNextPlaylistItem fn prop will require to invoke resolveNextPlaylistItem fn at some point in time.
4. This should be implemented in both ios and android.
5. That would be nice if we can pass resolveNextPlaylistItem as a native event param of onBeforeNextPlaylistItem. This may be possible on the new RN architecture.

Additional context
One use case that is important to us is before the video loads a new playlist item or recommended video, we enrich the ad tag url on the React Native side before passing back to the native side. This enrichment process involves making/waiting for an async call to a server before the video loads the new ad.

We rely on setPlaylistItemCallback function heavily and this is a blocker on our current upgrade effort.

On the older version of this bridge ( react-native-jw-media-player v0.1.57 ), we were able to use the same setPlaylistItemCallback functionality by extending native classes on android/ios. Then use JWPlaylistItemDelegate in ios or the PlaylistItemCallbackListener in android

@interface JWPlayerView : RNJWPlayerNativeView
// more code

public class JWPlayerView extends RNJWPlayerView implements
// more code

On the new version of this library, it seems it's not possible to do this anymore. Although, I haven't tried on android yet.

JWP Ticketing
related ticket - https://support.zendesk.com/hc/en-gb/requests/191471

[Jmilham21]

For those who come across this: We have determined that native work on the iOS SDK must be done to support this valid feature/use case. This will come in a TBD release.

Thank you @hunyoboy. We hope to make this possible in the new year.