https://github.com/boxcast/boxcast-sdk-react-native
BoxCast SDK for React Native
https://github.com/boxcast/boxcast-sdk-react-native
boxcast hls live-streaming react react-native sdk streaming video
Last synced: about 1 year ago
JSON representation
BoxCast SDK for React Native
- Host: GitHub
- URL: https://github.com/boxcast/boxcast-sdk-react-native
- Owner: boxcast
- License: mit
- Created: 2019-06-19T20:49:48.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-08T11:56:34.000Z (almost 3 years ago)
- Last Synced: 2025-05-21T03:16:53.425Z (about 1 year ago)
- Topics: boxcast, hls, live-streaming, react, react-native, sdk, streaming, video
- Language: JavaScript
- Homepage: https://www.boxcast.com
- Size: 12.4 MB
- Stars: 4
- Watchers: 14
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 `` component from [react-native-video](https://github.com/react-native-community/react-native-video).
## Preview
## Features
* Infinite scrolling display of all broadcasts in a channel via ``
* Channel scroller can go horizontal or vertical
* Full screen video playback via ``
* Drag and dock the video player to continue browsing app while video plays
* Simple inline video playback with ``
## 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
```JavaScript
import { ChannelList, BroadcastModalView } from 'boxcast-sdk-react-native';
```
* Render horizontal channel scroller with dockable video player on tap
```JavaScript
...
render() {
return (
this.setState({broadcast})}
horizontal={true} />
{this.state.broadcast &&
this.setState({broadcast: null})} />
}
);
}
```
* Render vertical channel scroller with fixed (non-dockable) video player on tap
```JavaScript
...
render() {
return (
this.setState({broadcast})}
horizontal={false} />
{this.state.broadcast &&
this.setState({broadcast: null})} />
}
);
}
```
## 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)