React Native On-Demand SDK

The On-Demand SDK is a UI component library crafted in React Native, designed for the rapid presentation of diverse UI pages, categories, and channels. This SDK is dependent on the React Native Core SDK.

Features

The dotstudioPRO React Native On-Demand SDK is equipped with robust capabilities to seamlessly render various UI components, presenting UI Pages, Categories, and Channels with first-class precision. Leveraging the Core SDK, the On-Demand SDK efficiently retrieves data from the API, ensuring a streamlined data-fetching process.

Key Features:

  • Home, Movies & Series Pages Support: The SDK excels in rendering essential UI components of home page, movie pages, and series pages, offering a versatile viewing experience.

  • Category Page UI Support: The On-Demand SDK ensures an organized and visually appealing presentation of content categories.

  • Channel Page UI (PDP) Support: The SDK facilitates the display of detailed Channel Page UI, enhancing the user experience by providing comprehensive information on specific channels.

  • Callback Handling: The On-Demand SDK adeptly manages necessary callbacks, ensuring seamless interaction and responsiveness within the application.

  • Lazy Loading for Enhanced Experience: The SDK incorporates lazy loading of data, efficiently loading content as needed for a more user-friendly interface.

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

Utilize the following command to seamlessly install the On-Demand SDK into your React Native project:

npm install @dotstudiopro/on-demand

OR

yarn add @dotstudiopro/on-demand


How to Use

Page Component

To incorporate the PageComponent into your React Native project, import the PageComponent and provide the following necessary inputs:

<PageComponent
    type="Home"
    showFirstRailAsCarousel={true}
    customChannelCard={channelCard16x9}
    styles={{
      ...
    }}
    onSelectVideo={(video, channel, category) => {
      console.log('onSelectVideo=======', channel, "Video", video);
    }}
    onSelectChannel={(channel, category) => {
      console.log('onSelectChannel=======', channel);
    }}
    onClickViewAll={(category) => {
      console.log('onClickViewAll=======', category);
    }}
    onCategoriesLoaded={(categories) => {
      console.log('onCategoriesLoaded=======', categories);
    }}
    onClickWatchNow={(channel) => {
      console.log('channel carousel clicked', channel);
    }}
    continueWatchingPosition={2}
    watchAgainPosition={3}
    bannerAdsAtInterval={3}
    extraData={refresh}
    bannerAdsComponent={<DSProAds />}
  />


Properties

Id Key Data Type Description
1. type Enum (Home / Movies / Series) dotstudioPRO Channel retrieved using Core SDK. or newly created Channel Object with slug
2. showFirstRailAsCarousel Boolean Indicates if First Category data needs to be shown as Carousel.
3. customVideoCard React Component Custom Video Card.
4. customChannelCard React Component Custom Channel Card.
5. carouselAspectRatio number Aspect ratio of Carousel Image.
6. videoAspectRatio number Aspect ratio of the Video Thumbnail.
7. channelAspectRatio number Aspect ratio of the Channel Poster.
8. continueWatchingPosition number Continue Watching Rail position in PageComponent.
9. watchAgainPosition number Watch again Rail position in PageComponent.
10. onSelectVideo Callback Callback when User selects Video.
11. onSelectChannel Callback Callback when User selects Channel.
12. onClickViewAll Callback Callback when User selects View All.
13. onClickWatchNow Callback Callback when User selects Watch Now.
14. onCategoriesLoaded Callback Callback when all categories are loaded.
15. styles JSON style object style of the PageComponent to theme.


Category Component

To integrate the CategoryComponent into your React Native project, import the CategoryComponent and provide the required inputs as outlined below:

<CategoryComponent
    category={category}
    numOfColumns={2}
    aspectRatio={16/9}
    onSelectChannel={(channel, category) => {
      console.log('channel', channel);
      console.log('category', category);
    }}
    customChannelCard={channelCard16x9}
    dimensions={{
      height: screenHeight,
      width: screenWidth
    }}
  />


Properties

Id Key Type Description
1. category Category dotstudioPRO Category retrieved using Core SDK. or newly created Category Object with slug
2. numOfColumns number Number of columns in Category Component to render channels.
3. aspectRatio number Aspect ratio of Channel Poster.
4. customChannelCard number Custom Channel Card.
5. onSelectChannel Callback Callback when User selects Channel.
6. dimensions JSON style object Dimensions of the CategoryComponent.


Channel Component

To integrate the ChannelComponent into your React Native project, import the ChannelComponent and provide the essential inputs as detailed below:

<ChannelComponent
    channel={channel}
    customChannelMetadataComponent={customChannelMetadataComponent}
    customChannelCard={channelCard16x9}
    customVideoCard={customVideoCard}
    onClickWatchNow={(channel) => {
      console.log('onClickWatchNow', channel);
    }}
    onSelectRecommendationChannel={(channel, category) => {
      console.log('onSelectRecommendationChannel', channel, category);
    }}
    onAddedToMyList={(channel) => {
      console.log('Add to mylist channel', channel);
    }}
    onRemovedFromMyList={(channel) => {
      console.log('Remove from mylist channel', channel);
    }}
    styles={{
        ...
    }}
    onSelectVideo={(channel) => {
      console.log('onSelectVideo in channel', channel);
    }}
    onClickResume={(channel) => {
      console.log('onClickResume in channel', channel);
    }}
    onClickRestart={(channel) => {
      console.log("Restart channel", channel)
    }}
    />


Properties

Id Key Type Description
1. channel Channel dotstudioPRO Channel retrieved using Core SDK. or newly created Channel Object with slug
4. customChannelMetadataComponent React Component Custom Channel Metadata Component.
4. customChannelCard React Component Custom Channel Card.
4. customVideoCard React Component Custom Video Card.
5. onClickWatchNow Callback Callback when User selects Watch Now Button in Channel component.
5. onSelectRecommendationChannel Callback Callback when User selects any recommendation Channel.
5. onAddedToMyList Callback Callback when User adds channel to mylist.
5. onRemovedFromMyList Callback Callback when User removes channel from mylist.
5. onSelectVideo Callback Callback when User selects Video.
15. styles JSON style object style of the ChannelComponent to theme.

Updated