https://github.com/testpress/react-native-tpstreams
https://github.com/testpress/react-native-tpstreams
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/testpress/react-native-tpstreams
- Owner: testpress
- License: mit
- Created: 2025-05-28T12:16:18.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2026-01-21T10:25:03.000Z (2 months ago)
- Last Synced: 2026-01-21T22:01:47.230Z (2 months ago)
- Language: TypeScript
- Size: 1.71 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-tpstreams
[](https://www.npmjs.com/package/react-native-tpstreams)
[](https://www.npmjs.com/package/react-native-tpstreams)
[](LICENSE)
A React Native video player component for TPStreams with offline download support.
## Installation
```bash
npm install react-native-tpstreams
```
## Quick Start
### 1. Initialize TPStreams
```js
import { TPStreams } from "react-native-tpstreams";
// Initialize once at your app's entry point
TPStreams.initialize('YOUR_ORGANIZATION_ID');
```
### 2. Add Player Component
```js
import { TPStreamsPlayerView } from "react-native-tpstreams";
```
## API Reference
### Player Props
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `videoId` | `string` | Yes | Video ID to play |
| `accessToken` | `string` | Yes | Access token for the video |
| `shouldAutoPlay` | `boolean` | No | Auto-play on load (default: true) |
| `startAt` | `number` | No | Start position in seconds (default: 0) |
| `enableDownload` | `boolean` | No | Enable download functionality (default: false) |
| `offlineLicenseExpireTime` | `number` | No | License expiration in seconds (default: 15 days) |
| `showDefaultCaptions` | `boolean` | No | Show captions if available (default: false) |
| `startInFullscreen` | `boolean` | No | Start the player in fullscreen mode (default: false) |
| `downloadMetadata` | `object` | No | Custom metadata for downloads |
### Player Methods
```js
import { useRef } from 'react';
import type { TPStreamsPlayerRef } from 'react-native-tpstreams';
const playerRef = useRef(null);
// Control playback
playerRef.current?.play();
playerRef.current?.pause();
playerRef.current?.seekTo(30000); // 30 seconds
playerRef.current?.setPlaybackSpeed(2.0);
// Get player state (inside an async function)
const getPlayerState = async () => {
const position = await playerRef.current?.getCurrentPosition();
const duration = await playerRef.current?.getDuration();
const isPlaying = await playerRef.current?.isPlaying();
const speed = await playerRef.current?.getPlaybackSpeed();
return { position, duration, isPlaying, speed };
};
```
### Player Events
```js
console.log('State:', state)}
onIsPlayingChanged={(isPlaying) => console.log('Playing:', isPlaying)}
onPlaybackSpeedChanged={(speed) => console.log('Speed:', speed)}
onIsLoadingChanged={(isLoading) => console.log('Loading:', isLoading)}
onError={(error) => console.error('Error:', error)}
onAccessTokenExpired={(videoId, callback) => {
// Fetch new token and call callback(newToken)
}}
/>
```
## Downloads
### Download Management
```js
import {
pauseDownload,
resumeDownload,
removeDownload,
getAllDownloads,
isDownloaded,
isDownloading,
getDownloadStatus,
} from 'react-native-tpstreams';
// Check download status
const checkDownloadStatus = async (videoId) => {
const downloaded = await isDownloaded(videoId);
const downloading = await isDownloading(videoId);
const status = await getDownloadStatus(videoId);
return { downloaded, downloading, status };
};
// Manage downloads
const manageDownload = async (videoId, action) => {
switch (action) {
case 'pause':
await pauseDownload(videoId);
break;
case 'resume':
await resumeDownload(videoId);
break;
case 'remove':
await removeDownload(videoId);
break;
}
};
// Get all downloads
const getAllDownloadedVideos = async () => {
const downloads = await getAllDownloads();
return downloads;
};
```
### Real-time Progress
```js
import {
addDownloadProgressListener,
removeDownloadProgressListener,
onDownloadProgressChanged,
} from 'react-native-tpstreams';
// Start listening
async function startListening() {
await addDownloadProgressListener();
}
// Listen for updates
const subscription = onDownloadProgressChanged((downloads) => {
console.log('Download progress:', downloads);
});
// Cleanup
async function cleanup() {
subscription.remove();
await removeDownloadProgressListener();
}
```
## Resources
- **Sample App**: [Complete working example](https://github.com/testpress/sample_RN_App)
- **Documentation**: [TPStreams Developer Docs](https://developer.tpstreams.com/docs/mobile-sdk/react-native-sdk)
## License
MIT