Reference Assets

To help users get started with Player, we have created a minimal set of useable assets for React, iOS and Android. These reference assets showcase the design philosophy we encourage when building your own asset sets. While these components are functional we do not recommend shipping them to production as they have not been tested to be production ready.

React

For the React Player, we ship a package (@player-ui/reference-assets-plugin-react) that provides the reference set of assets. Each asset package exposes a Component, type, and optional transform. They also export hooks for easily consuming the transformed component and supplying your own UI for a custom look and feel. These components are all then exposed via a plugin that can be added to Player like so:

import { ReactPlayer } from "@player-ui/react";
import { ReferenceAssetsPlugin } from "@player-ui/reference-assets-plugin-react";

const reactPlayer = new ReactPlayer({
  plugins: [new ReferenceAssetsPlugin()],
});

Storybook

The reference assets + React player can be viewed in Storybook

Android

Alongside distributing the Android Player framework, there is a reference assets library used as an example of how Player APIs work for building assets. These are intended to serve as a reference, but can be used early on in development as a means of understanding how to work with Player. This asset set uses the shared TypeScript transform functions that the Web and Android players use for their reference assets, ensuring consistent behavior across platforms. These assets can be loaded into Player like so:

import com.intuit.playerui.android.reference.assets.ReferenceAssetsPlugin

val player = AndroidPlayer(context, ReferenceAssetsPlugin())

iOS

Alongside distributing the PlayerUI pod, there is a PlayerUI/ReferenceAssets subspec used as examples of how Player APIs work for building assets. This pod uses the shared TypeScript transform functions that the React and Android players use for their reference assets, ensuring consistent behavior across platforms. These assets can be loaded into Player like so:

import PlayerUI

struct MyApp: View {
  @State var result: Result<CompletedState, PlayerError>? = nil
  @ObservedObject var viewModel: MyViewModel
  var body: some View {
    SwiftUIPlayer(
      flow: $viewModel.flowString,
      plugins: [ReferenceAssetsPlugin()],
      result: $result
    )
  }
}