0.2.4 • Published 4 years ago
boxcast-sdk-react-native v0.2.4
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) |