React Native Player SDK

The Player SDK serves as a player component library tailored for React Native, empowering developers to swiftly implement a comprehensive player experience. Encompassing features such as ad playback, casting, analytics, and more, the Player SDK is designed to enhance the overall richness of the user's interaction with the content. Notably, it relies on the React Native Core SDK for seamless integration and optimal performance.

Features

The Player SDK by dotstudioPRO is a robust component designed for React Native, offering an array of features to enhance the playback experience. From seamless integration with dotstudioPRO's ad scheduling system to supporting Chromecast functionality and viewer analytics, this SDK is a comprehensive solution for developers seeking a rich and versatile player experience.


Key Features:

  • Automatic Video Retrieval: Retrieves VOD and Live videos from the API effortlessly.

    Handles all requirements for initializing playback, ensuring a smooth start to the viewing experience.

  • Continuous Playback Handling: Automatically manages continuous playback for episodic or playlist content, providing uninterrupted streaming.

  • Ad Scheduling Integration: Fully integrated with dotstudioPRO's ad scheduling system. Includes robust VMAP support for an enhanced advertising experience.

  • Auth SDK Integration: Seamlessly integrated with the Auth SDK.

    Enables the saving of the user's progress, facilitating the implementation of "Continue Watching" functionality.

  • Chromecast Support: Supports Chromecast functionality for both iOS and Android Mobile platforms, extending the viewing experience to larger screens.

  • Caption Display: Allows for the display of closed captions, subtitles, and SDH caption formats, enhancing accessibility for users.

  • Callback Handling: Manages various callbacks for viewership analytics, providing valuable insights into user engagement.

  • Auto Play Support: Supports auto-play functionality, enhancing user convenience by automatically starting playback.

  • Multi-Instance Synchronization: Automatically synchronizes cases where multiple player instances are rendered on the same screen, ensuring consistent and coherent playback across instances.

Requirements

Platform Minimum Version Installation Status
iOS 13.0+ CocoaPods Fully Tested
tvOS 13.0+ CocoaPods Fully Tested
Android Android 5.0: Lollipop (API 21) npm Fully Tested
Android TV Android 5.0: Lollipop (API 21) npm Fully Tested
Fire TV Android 5.0: Lollipop (API 21) npm Fully Tested


Installation

Install the Player SDK in your React Native project effortlessly by executing the following command:

yarn add @dotstudiopro/core --ignore-scripts install-peers
yarn add @dotstudiopro/player --ignore-scripts install-peers


Additionally, it is crucial to include React Native Device Info as a PeerDependency. Please follow the instructions below to ensure proper integration:

yarn add react-native-device-info


When utilizing npm as your package manager, it is essential to employ the--force or --legacy-peer-deps  flag during installation to ensure the correct integration of peerDependencies. Our SDKs are tailored to support various native dependencies and are optimized for React Native on TV devices. Therefore, it is imperative to include the aforementioned flags when using npm as your package manager. This guarantees a seamless installation, accommodating the specific requirements of our SDKs.

 

How to Use

Begin by importing the <PlayerComponent> class exposed by @dotstudiopro/player

import { PlayerComponent } from '@dotstudiopro/player';

 

To proceed, effortlessly integrate this component anywhere on your screen:

<PlayerComponent
  ref={playerRef}
  channel={channel}
  status={status}
  autoPlay={true}
  hideBackButton={false}
  hideFullscreenButton={false}
  hidePlayPauseButton={false}
  hideCastButton={false}
  onFullScreen={(isFullScreen) => {
  }}
  onBack={() => {
  console.log("Navigation PRO", navigation);
  navigation.goBack();
  }}
  onDataLoaded={(spltChannel) => {
  //setLoading(false)
  }}
  style={{ width: '100%', aspectRatio: 16 / 9 }}
  />

 

Input: Retrieving Channel Object for PlayerComponent

To obtain the Channel object to be passed into the PlayerComponent, consider the following options:

  • Utilize the Channel object received from the Core SDK.
  • Employ the Channel object provided by the On-Demand SDK.
  • Set the currentVideoIndex and currentChildChannelIndex properties within the Channel Class. This is particularly useful for playing a specific video from a Seasonal-Episodic Channel.

Properties

The Player Component necessitates the provision of the following instantiation options during initialization:

Key Type Description
channel Channel a dotstudioPRO channel ID or channel slug representing the channel that the player is being viewed from
status active / inactive Status of the Player. If player is in the view, it needs to be active, so it can play.
autoplay boolean Decides whether Player starts playing video automatically.
hideBackButton boolean If set to true, hides the Back Button.
hideFullscreenButton boolean If set to true, hides the Fullscreen button.
hidePlayPauseButton boolean If set to true, hides the Play/Pause button.
hideCastButton boolean If set to true, hides the Cast button.
onFullScreen Callback Callback fired when the Player goes fullscreen.
onBack Callback Callback fired when back button is clicked from the top of player.
onDataLoaded Callback Callback fired when the player state has updated with data from the Core SDK.
playerControlStyle
 JSX Object Literal

Optional JSX style object allowing you to control player styles. Object for it will look like

playerControlStyle={{
     tintColor:"#FF0000",
     fontFamily:"",
     fontSize:20
}}

 

Updated