React Native proof-of-concept implementation

[defagos]

As a Pillarbox developer I want to:

• Check that Pillarbox can be used with React Native (Android, Apple, web).
• Which team should create / maintain a bridge.

As a Play Suisse developer I want to:

• A Reactive library with its sample app being able to play Play Suisse content, provided by the packager.
• Use Fabric.
• Address all native platforms (TV, mobile).
• Have a minimal UI with a playback button and a slider.
• Have a multi-instance player example in the demo.
• Be able to start playback at some position.
• Be able to play content with forced subtitles.
• Be able to pick subtitle and audio languages before and during playback.
• Investigate subtitle placement and possible alternative solutions.
• Discuss with the web team how we can achieve a React.js component around Pillarbox web with an API similar to the React Native one.
• Support casting (AirPlay, Google Cast).
• Be able to have SRG SSR and custom analytics.

Acceptance criteria

• Pillarbox integration with React Native has been investigated.
• Learnings / findings / decisions have been recorded.

[SebastienChauvin]

Workshop 10/10/2023

We have tried to implement a RN 0.72.5 - Turbo Module for the Pillarbox library

https://github.com/SRGSSR/react-native-pillarbox

Learnings

Android

✅ It seems to work

Apple

❌ It does not work

• RN Framework does not support SPM
• Pillarbox depends on SPM libraries (Swift-Collections, ComScore, Commanders Act)
• Having Pillarbox support CocoaPods distribution would break the architecture of the library and have a high maintenance cost

Potential solutions

• Native only application for Apple (TV, Mobile)
• Native only player screen
• Re-write Pillarbox to support RN
• Switch to another hybrid development platform (KMM, …)
• No longer use SRG SSR players in Play Suisse

Next Steps Play Suisse

• Keep status-quo for React-Native Letterbox
• Implement a new component based on Letterbox or Pillarbox Android + Letterbox Apple

[SebastienChauvin]

https://www.notion.so/playsuisse/Pillarbox-on-React-Native-0f1446545859425d91d0ed3cd04baef8?pvs=4

[defagos]

It is possible to use Pillarbox for iOS in an React Native iOS project.

Using Pillarbox in the native iOS project generated by Expo

Here are the relevant steps to create a new project from scratch, add Pillarbox to it via SPM and display a native SwiftUI player view powered by Pillarbox:

1. Use npx create-expo-app@latest to create a new project with Expo.

2. Run npx expo prebuild to generate the native Apple and Android projects.

3. Open the generated Xcode workspace.

4. Update the minimum deployment target of the application to 16.0, the minimum version currently required by Pillarbox.

5. Add https://github.com/SRGSSR/pillarbox-apple.git as an SPM dependency and link the desired products (e.g. PillarboxPlayer or PillarboxCoreBusiness with the application target.

6. Add a Swift implementation file to implement a custom player layout using SwiftUI. Provide @objc annotated APIs so that your Swift code can be called from Objective-C(++) code that React usually requires.

7. To be able to call your Swift code from Objective-C(++) code import the following headers in order:

   #import <ExpoModulesCore-Swift.h>
   #import "YourAppName-Swift.h"

   Note that the YourAppName-Swift.h header is automatically generated for your project to provide definitions for Swift code exposed to Objective-C(++). This file is managed entirely by Xcode.

8. Somehow use your APIs to display the player view in your app.

9. Have fun!

Associated sample code is available.

Using Pillarbox in a React plugin

A PR has recently been merged into React Native main branch to support SPM depdencies in React plugins.

Despite our efforts we could not build / use pre-release versions of React Native to test this new feature but, according to the usual React Native delivery cycle, there is hope that SPM support should appear in version 0.75.0 or soon after.

Once SPM support has been delivered by React Native we will test whether Pillarbox is compatible as dependency. SPM support in CocoaPods / React Native namely seems to have some limitations, some of which possibly incompatible with Pillarbox (e.g. I suspect that binary dependencies Pillarbox has, most notably for 3rd party closed-source analytics SDKs, might be a problem). Stay tuned.

[leonchabbey]

I saw the merge yesterday and wanted to give it try 😄 -> https://github.com/SRGSSR/react-native-pillarbox/pull/1 This PR has SPM working on React Native 0.74 by applying the changes from the official PR to react-native after installation.

You can use the example/ as before to test "our react-native-pillarbox library". Pillarbox is already setup as SPM dependeny on iOS: https://github.com/SRGSSR/react-native-pillarbox/pull/1/files#diff-0af6797c52bd5c14d8b756faec4fff93fb1956b052a28f292ce3a8a4e116c1a2R43-R53

[defagos]

Great, thanks for the info. We tried your PR but we are sadly facing a few compilation issues, but I guess your setup is probably better than ours.

@leonchabbey So do you confirm that you can create a native plugin that depends on Pillarbox using SPM support recently added to React Native on main?

[leonchabbey]

@defagos I haven't gone far enough in the example to confirm at 100% that it works but I can say that it compiles properly with the Pillarbox Swift dependency.

I don't have the time right now to explore the whole Swift / objective-c++ bridge thing needed but I will try to find some time when I can. We have the Pillarbox Hackathon 2 coming up next Wednesday so maybe we continue this together that day? (We could also jump quickly in call and I help you with the compilation issues you are facing if needed)