boxcast/boxcast-sdk-react-native

BoxCast SDK for React Native

BoxCast SDK for React Native

All you need to build your own awesome video app to showcase your BoxCast channels and broadcasts.

Internally, playback depends on the React Native <Video> component from react-native-video.

Preview

Features

• Infinite scrolling display of all broadcasts in a channel via <ChannelList />
• Channel scroller can go horizontal or vertical
• Full screen video playback via <BroadcastModalView />
• Drag and dock the video player to continue browsing app while video plays
• Simple inline video playback with <BroadcastVideo />

Install

NOTE: This library depends on the separate react-native-video project, which has platform-specific installation requirements. Please review the installation guide at react-native-community/react-native-video.

npm install --save boxcast-sdk-react-native
npm install --save react-native-video@5.0.2

## Then, for React Native v0.59 and below
# react-native link react-native-video

## ... or for React Native v0.60 and above
# cd ios && pod install

Usage

• Import

import { ChannelList, BroadcastModalView } from 'boxcast-sdk-react-native';

• Render horizontal channel scroller with dockable video player on tap

...

render() {
  return (
    <View style={{flex:1}}>
      <View style={{height:150, width:'100%'}}>
        <ChannelList channelId={MY_BOXCAST_CHANNEL_ID}
                    query={'timeframe:relevant timeframe:next'}
                    sort={'-starts_at'}
                    pageSize={10}
                    onSelectBroadcast={(broadcast) => this.setState({broadcast})}
                    horizontal={true} />
      </View>
      {this.state.broadcast &&
        <BroadcastModalView
            broadcast={this.state.broadcast}
            dockable={true}
            onDismiss={() => this.setState({broadcast: null})} />
      }
    </View>
  );
}

• Render vertical channel scroller with fixed (non-dockable) video player on tap

...

render() {
  return (
    <View style={{flex:1}}>
      <ChannelList channelId={MY_BOXCAST_CHANNEL_ID}
                   query={'timeframe:relevant timeframe:next'}
                   sort={'-starts_at'}
                   pageSize={10}
                   onSelectBroadcast={(broadcast) => this.setState({broadcast})}
                   horizontal={false} />
      {this.state.broadcast &&
        <BroadcastModalView
            broadcast={this.state.broadcast}
            dockable={false}
            onDismiss={() => this.setState({broadcast: null})} />
      }
    </View>
  );
}

Components

ChannelList

Horizontal or vertical display of all broadcasts in a given channel

Properties

Name	Description	Default	Type
channelId	BoxCast channel ID. Required.	-	string (required)
horizontal	Scroll horizontally?	false	boolean
titleStyle	Additional styles to apply	null	StyleObject
onSelectBroadcast	Callback when a broadcast is selected	-	function
pageSize	Number of broadcasts to query at a time from API	20	int
query	API query for filtering the result set	timeframe:relevant	string
sort	API sort parameter	-starts_at	string

BroadcastModalView

Full-screen modal view of video and details for a given broadcast.

Properties

Name	Description	Default	Type
broadcast	BoxCast broadcast object. Required.	-	object (required)
dockable	Enable dragging/docking behavior?	false	boolean
dismissText	Text to use on the dismiss button	Close	string
dismissStyle	Additional styles to apply to the dismiss button	null	StyleObject
onDismiss	Callback when the modal is closed	-	function
dragAcceleration	Value used to control vertical drag acceleration when dragging/docking	1.0	float

BroadcastVideo

Simple inline video playback for a given broadcast.

Properties

Name	Description	Default	Type
broadcast	BoxCast broadcast object. Required.	-	object (required)