react-native-tpstreams 0.1.8 → 0.1.10

package/README.md

@@ -8,17 +8,31 @@ Video Component for TPStreams
 npm install react-native-tpstreams
 ```
 
-## Usage
+### Initializing TPStreams SDK
 
-```js
-import React, { useState } from 'react';
-import { View, Button, StyleSheet, NativeModules } from 'react-native';
-import TpStreamsPlayerView from 'react-native-tpstreams';
+First, import the package:
 
+```javascript
+import { NativeModules } from 'react-native';
 const { Tpstreams } = NativeModules;
+```
+
+Next, initialize the SDK with your organization ID:
+
+```javascript
+Tpstreams.initializeTPSPlayer("YOUR_ORGANIZATION_ID");
+```
+
+Make sure to replace `YOUR_ORGANIZATION_ID` with your actual organization ID. This should be called at the entry point of your application to ensure proper initialization.
+
+## Play a Video
 
-// Initialize the player with your organization UUID
-Tpstreams.initializeTPSPlayer("ORGANIZATION_ID");
+To play a video using the TPStreams Player SDK, use the `TpStreamsPlayerView` component:
+
+```javascript
+import React, { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import TpStreamsPlayerView from 'react-native-tpstreams';
 
 const App = () => {
   const [playerProps] = useState({
@@ -32,16 +46,6 @@ const App = () => {
   return (
     <View style={styles.container}>
       <TpStreamsPlayerView {...playerProps} />
-      <View style={styles.buttonContainer}>
-        <Button title="Play" onPress={() => Tpstreams.play()} />
-        <Button title="Pause" onPress={() => Tpstreams.pause()} />
-        <Button title="Seek to 10s" onPress={() => Tpstreams.seekTo(10000)} />
-        <Button title="Get Current Time" onPress={() => Tpstreams.getCurrentTime().then(console.log)} />
-        <Button title="Get Duration" onPress={() => Tpstreams.getDuration().then(console.log)} />
-        <Button title="Get Playback Speed" onPress={() => Tpstreams.getPlaybackSpeed().then(console.log)} />
-        <Button title="Set Speed 1.5x" onPress={() => Tpstreams.setPlaybackSpeed(1.5)} />
-        <Button title="Set Speed 1x" onPress={() => Tpstreams.setPlaybackSpeed(1.0)} />
-      </View>
     </View>
   );
 };
@@ -52,99 +56,372 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  buttonContainer: {
-    marginTop: 20,
-    width: '90%',
-  },
 });
 
 export default App;
 ```
 
+Replace `ASSET_ID` and `ACCESS_TOKEN` with the actual assetId and accessToken of the video you wish to play.
 
 ## Player Props
-
 The player component accepts the following props:
 
-### `videoId` (string, required)
-The unique identifier of the video asset to be played.
+| Prop            | Type    | Required | Default                         | Description                                    |
+|----------------|---------|----------|---------------------------------|------------------------------------------------|
+| `videoId`      | string  | Yes      | -                               | The unique identifier of the video asset.      |
+| `accessToken`  | string  | Yes      | -                               | The authentication token required to access the video. |
+| `enableDownload` | boolean | No     | `true`                          | Enables or disables video download.           |
+| `autoPlay`     | boolean | No      | `true`                          | Controls whether the video should start playing automatically. |
+| `style`        | object  | No      | `{ width: '100%', height: 300 }` | Defines the player’s width and height.        |
+
+# Player Methods
+
+To use the `Tpstreams` module, first import `NativeModules` from `react-native` and get the `Tpstreams` instance:
+
+```js
+import { NativeModules } from 'react-native';
+const { Tpstreams } = NativeModules;
+```
+
+The `Tpstreams` module provides several methods to control video playback and manage player states. Below is a detailed explanation of each method:
+
+## Play
+
+```js
+Tpstreams.play();
+```
+
+Starts video playback. Call this method when you want the video to start playing or resume after being paused.
+
+## Pause
+
+```js
+Tpstreams.pause();
+```
+
+Pauses video playback, allowing it to be resumed later from the same position.
+
+## Seek To
+
+```js
+Tpstreams.seekTo(position: number);
+```
+
+Seeks to a specific position in the video (in milliseconds).
+
+**Example Usage:**
+
+```js
+Tpstreams.seekTo(10000); // Jump to the 10-second mark
+```
+
+## Get Current Time
+
+```js
+Tpstreams.getCurrentTime().then(console.log);
+```
+
+Gets the current playback position of the video (in milliseconds). Returns a promise that resolves with the current time.
+
+## Get Duration
+
+```js
+Tpstreams.getDuration().then(console.log);
+```
+
+Retrieves the total duration of the currently loaded video (in milliseconds). Returns a promise that resolves with the total duration.
+
+## Get Buffered Time
+
+```js
+Tpstreams.getBufferedTime().then(console.log);
+```
+
+Gets the amount of video data that has been buffered (in milliseconds). Returns a promise that resolves with the buffered time.
+
+## Get Playback State
+
+```js
+Tpstreams.getPlaybackState().then(console.log);
+```
+
+Gets the current playback state of the player (e.g., `playing`, `paused`, `buffering`). Returns a promise that resolves with the state.
+
+## Get Play When Ready
+
+```js
+Tpstreams.getPlayWhenReady().then(console.log);
+```
+
+Checks if the player is set to start playback automatically. Returns a promise that resolves with a boolean value.
+
+## Set Play When Ready
+
+```js
+Tpstreams.setPlayWhenReady(true); // Enable autoplay
+```
+
+Controls whether the player should start playback automatically when loaded.
+
+## Get Playback Speed
+
+```js
+Tpstreams.getPlaybackSpeed().then(console.log);
+```
+
+Gets the current playback speed of the video. Returns a promise that resolves with the speed value.
+
+## Set Playback Speed
+
+```js
+Tpstreams.setPlaybackSpeed(1.5); // Play at 1.5x speed
+```
+
+Changes the playback speed of the video.
+
+## Release
+
+```js
+Tpstreams.release();
+```
+
+Releases the player resources, stopping playback and hiding the player UI. Once called, the player cannot be used again unless reinitialized.
+
+
+# Player Events
+
+`Tpstreams` provides event listeners to handle various player events. Below are the available events and how to use them:
+
+## Listening to Events
 
-### `accessToken` (string, required)
-The authentication token required to access the video.
+To subscribe to player events, use the `NativeEventEmitter` from `react-native` with `TpstreamsModule`:
 
-### `enableDownload` (boolean, optional, default: `true`)
-Determines whether the video can be downloaded.  
-- `true` → Enables download functionality (default).  
-- `false` → Disables downloads.
+```js
+import { NativeEventEmitter, NativeModules } from 'react-native';
+
+const { Tpstreams } = NativeModules;
+const eventEmitter = new NativeEventEmitter(Tpstreams);
+
+const subscription = eventEmitter.addListener('onPlaybackStateChanged', (state) => {
+  console.log('Playback State Changed:', state);
+});
+
+// Remember to remove the listener when unmounting
+subscription.remove();
+```
+
+## Available Events
 
-### `autoPlay` (boolean, optional, default: `true`)
-Controls whether the video should start playing automatically when loaded.  
-- `true` → Video starts playing automatically (default).  
-- `false` → User must manually start playback.
+### onPlaybackStateChanged
+Triggered when the playback state changes.
 
-### `style` (object, optional)
-Defines the player’s width and height.  
-Example:  
 ```js
-style: { width: 600, height: 300 }
+eventEmitter.addListener('onPlaybackStateChanged', (state) => {
+  console.log('Playback State:', state);
+});
 ```
-## Player Methods
 
-### `play()`
-Starts video playback from the current position.
+### onAccessTokenExpired
+Triggered when the access token expires (requires refresh).
 
-### `pause()`
-Pauses video playback, allowing it to be resumed later.
+```js
+eventEmitter.addListener('onAccessTokenExpired', () => {
+  console.log('Access token expired, please refresh.');
+});
+```
 
-### `seekTo(position: Double)`
-Seeks to a specific position in the video (in milliseconds).  
-For example, `seekTo(10000)` moves the playback to 10 seconds.
+### onMarkerCallback
+Triggered when a marker (timestamp) is reached during playback.
 
-### `getCurrentTime(promise: Promise)`
-Gets the current playback time (in milliseconds).  
-Returns a promise that resolves with the current position of the video.
+```js
+eventEmitter.addListener('onMarkerCallback', (marker) => {
+  console.log('Marker reached:', marker);
+});
+```
 
-### `getDuration(promise: Promise)`
-Retrieves the total duration of the video (in milliseconds).  
-Returns a promise that resolves with the length of the video.
+### onDeviceInfoChanged
+Triggered when the device information changes.
 
-### `getBufferedTime(promise: Promise)`
-Gets the amount of video data that has been buffered (in milliseconds).  
-Returns a promise with the buffered time to help manage network-based playback issues.
+```js
+eventEmitter.addListener('onDeviceInfoChanged', (info) => {
+  console.log('Device info changed:', info);
+});
+```
 
-### `getPlaybackState(promise: Promise)`
-Gets the current playback state of the player (e.g., playing, paused, buffering).  
-Returns a promise that resolves with a state value.
+### onFullScreenChanged
+Triggered when the fullscreen mode changes.
 
-### `getPlayWhenReady(promise: Promise)`
-Checks whether the player is set to start playback automatically.  
-Returns a boolean promise (`true` if autoplay is enabled).
+```js
+eventEmitter.addListener('onFullScreenChanged', (isFullscreen) => {
+  console.log('Fullscreen mode:', isFullscreen);
+});
+```
 
-### `setPlayWhenReady(playWhenReady: Boolean)`
-Controls whether the player should automatically start playback when loaded.  
-Pass `true` to enable autoplay or `false` to disable it.
+### onIsLoadingChanged
+Triggered when the player’s loading state changes.
 
-### `getPlaybackSpeed(promise: Promise)`
-Gets the current playback speed of the video.  
-Returns a promise resolving with the playback speed (e.g., `1.0` for normal speed, `1.5` for 1.5x speed).
+```js
+eventEmitter.addListener('onIsLoadingChanged', (isLoading) => {
+  console.log('Loading state changed:', isLoading);
+});
+```
+
+### onIsPlayingChanged
+Triggered when the player’s playing state changes.
+
+```js
+eventEmitter.addListener('onIsPlayingChanged', (isPlaying) => {
+  console.log('Playing state:', isPlaying);
+});
+```
+
+### onPlayerError
+Triggered when the player encounters an error.
+
+```js
+eventEmitter.addListener('onPlayerError', (error) => {
+  console.log('Player Error:', error);
+});
+```
 
-### `setPlaybackSpeed(speed: Float)`
-Changes the playback speed of the video.  
-For example, `setPlaybackSpeed(2.0)` doubles the speed, while `setPlaybackSpeed(0.5)` slows it down.
+### onSeekBackIncrementChanged
+Triggered when the seek-back increment value changes.
 
-### `release()`
-Releases the player resources, stopping playback and hiding the player UI.  
-Once called, the player cannot be used again unless reinitialized.
+```js
+eventEmitter.addListener('onSeekBackIncrementChanged', (value) => {
+  console.log('Seek back increment changed:', value);
+});
+```
 
+### onSeekForwardIncrementChanged
+Triggered when the seek-forward increment value changes.
 
-## Contributing
+```js
+eventEmitter.addListener('onSeekForwardIncrementChanged', (value) => {
+  console.log('Seek forward increment changed:', value);
+});
+```
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+### onTimelineChanged
+Triggered when the timeline of the player changes.
 
-## License
+```js
+eventEmitter.addListener('onTimelineChanged', (timeline) => {
+  console.log('Timeline changed:', timeline);
+});
+```
 
-MIT
+### onTracksChanged
+Triggered when the available tracks change (e.g., audio/video/subtitles).
 
----
+```js
+eventEmitter.addListener('onTracksChanged', (tracks) => {
+  console.log('Tracks changed:', tracks);
+});
+```
+
+# Download Module
+
+The `Download Module` in `Tpstreams` allows users to manage offline video downloads efficiently. This includes observing download progress, pausing, resuming, canceling, and deleting downloads.
+
+## Observing Download Data
+
+To start observing the download data, call the `observeDownloadData` method from `FragmentModule`.
+
+```js
+import { NativeModules, DeviceEventEmitter } from 'react-native';
+
+const { FragmentModule } = NativeModules;
+FragmentModule.observeDownloadData();
+```
+
+Once initialized, the module will emit events whenever the download data changes.
+
+## Listening to Download Events
+
+To listen for download state changes, use `DeviceEventEmitter`:
+
+```js
+const subscription = DeviceEventEmitter.addListener(
+  'onDownloadDataChanged',
+  (event) => {
+    console.log('Download data updated:', event.assets);
+  }
+);
+
+// Remember to remove the listener when unmounting
+subscription.remove();
+```
+
+## Managing Downloads
+
+### Pause Download
+Pauses an active download.
+
+```js
+FragmentModule.pauseDownload(videoId);
+```
+
+### Resume Download
+Resumes a paused download.
+
+```js
+FragmentModule.resumeDownload(videoId);
+```
+
+### Cancel Download
+Cancels an ongoing download.
+
+```js
+FragmentModule.cancelDownload(videoId);
+```
+
+### Delete Download
+Deletes a completed download from storage.
+
+```js
+FragmentModule.deleteDownload(videoId);
+```
+
+## Rendering a Download List
+
+Below is a sample implementation of a download list UI using `FlatList` in React Native:
+
+```js
+import React, { useState, useEffect } from 'react';
+import { SafeAreaView, Text, FlatList, View, Button, DeviceEventEmitter } from 'react-native';
+import { NativeModules } from 'react-native';
+
+const { FragmentModule } = NativeModules;
+
+const DownloadListScreen = () => {
+  const [downloads, setDownloads] = useState([]);
+
+  useEffect(() => {
+    FragmentModule.observeDownloadData();
+    const subscription = DeviceEventEmitter.addListener('onDownloadDataChanged', (event) => {
+      setDownloads(event.assets);
+    });
+    return () => subscription.remove();
+  }, []);
+
+  const renderItem = ({ item }) => (
+    <View>
+      <Text>{item.title} - {item.percentage}%</Text>
+      {item.status === 'DOWNLOADING' && <Button title="Pause" onPress={() => FragmentModule.pauseDownload(item.videoId)} />}
+      {item.status === 'COMPLETE' && <Button title="Delete" onPress={() => FragmentModule.deleteDownload(item.videoId)} />}
+      {item.status === 'PAUSED' && <Button title="Resume" onPress={() => FragmentModule.resumeDownload(item.videoId)} />}
+    </View>
+  );
+
+  return (
+    <SafeAreaView>
+      <FlatList data={downloads} keyExtractor={(item) => item.videoId} renderItem={renderItem} />
+    </SafeAreaView>
+  );
+};
+
+export default DownloadListScreen;
+```
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+This component observes download events and dynamically updates the list with buttons for user interactions.

package/android/src/main/java/com/tpstreams/FragmentModule.kt

@@ -35,7 +35,7 @@ class FragmentModule(reactContext: ReactApplicationContext) : ReactContextBaseJa
   }
 
   @ReactMethod
-  fun showCustomFragment(videoId: String, accessToken: String, enableDownload: Boolean, autoPlay: Boolean) {
+  fun showCustomFragment(videoId: String, accessToken: String, enableDownload: Boolean, autoPlay: Boolean, startAt: Int, offlineLicenseExpireTime: Int) {
     Log.e("FragmentModule", "showCustomFragment() called")
     // Ensure the currentActivity is a FragmentActivity
     val activity = currentActivity as? FragmentActivity
@@ -49,6 +49,8 @@ class FragmentModule(reactContext: ReactApplicationContext) : ReactContextBaseJa
       bundle.putString("ACCESS_TOKEN", accessToken)
       bundle.putBoolean("ENABLE_DOWNLOAD_SUPPORT", enableDownload)
       bundle.putBoolean("AUTO_PLAY", autoPlay)
+      bundle.putInt("START_AT", startAt)
+      bundle.putInt("OFFLINE_LICENSE_EXPIRE_TIME", offlineLicenseExpireTime)
       val fragment = PlayerFragment()
       fragment.setArguments(bundle)
 

package/android/src/main/java/com/tpstreams/PlayerFragment.kt

@@ -19,6 +19,8 @@ import com.tpstream.player.Timeline
 import com.tpstream.player.DeviceInfo
 import com.tpstreams.TpstreamsModule
 
+internal typealias onAccessTokenCallbase = (String) -> Unit
+
 class PlayerFragment : Fragment() {
 
   lateinit var player: TpStreamPlayer
@@ -28,6 +30,10 @@ class PlayerFragment : Fragment() {
   private var accessToken :String = ""
   private var enableDownloadSupport :Boolean = true
   private var setAutoPlay :Boolean = true
+  private var startAt :Int = 0
+  private var offlineLicenseExpireTime :Int = 15
+
+  private var accessTokenCallback : onAccessTokenCallbase? = null
 
   companion object {
     var instance: PlayerFragment? = null
@@ -41,6 +47,8 @@ class PlayerFragment : Fragment() {
       accessToken = bundle.getString("ACCESS_TOKEN") ?: ""
       enableDownloadSupport = bundle.getBoolean("ENABLE_DOWNLOAD_SUPPORT", true)
       setAutoPlay = bundle.getBoolean("AUTO_PLAY", true)
+      startAt = bundle.getInt("START_AT", 0)
+      offlineLicenseExpireTime = bundle.getInt("OFFLINE_LICENSE_EXPIRE_TIME", 15)
 
     }
   }
@@ -73,6 +81,8 @@ class PlayerFragment : Fragment() {
       .setAccessToken(accessToken)
       .enableDownloadSupport(enableDownloadSupport)
       .setAutoPlay(setAutoPlay)
+      .startAt(startAt.toLong())
+      .setOfflineLicenseExpireTime(offlineLicenseExpireTime)
       .build()
     requireActivity().runOnUiThread {
       player.load(parameters)
@@ -90,8 +100,9 @@ class PlayerFragment : Fragment() {
       }
 
       override fun onAccessTokenExpired(videoId: String, callback: (String) -> Unit) {
+        Log.d("ReactNativeJS", "onTokenExpired: $videoId")
+        accessTokenCallback = callback
         sendEvent("onAccessTokenExpired", videoId)
-        callback(accessToken)
       }
 
       override fun onMarkerCallback(timesInSeconds: Long) {
@@ -196,6 +207,11 @@ class PlayerFragment : Fragment() {
     }
   }
 
+  fun setNewAccessToken(token: String) {
+    accessTokenCallback?.invoke(token)
+    accessTokenCallback = null
+  }
+
   override fun onResume() {
     super.onResume()
     Log.d("ReactNativeJS", "onResume: ")

package/android/src/main/java/com/tpstreams/TpStreamsPlayerView.kt

@@ -17,6 +17,8 @@ class TpStreamsPlayerView @JvmOverloads constructor(
     private var accessToken: String? = null
     private var enableDownload: Boolean = true
     private var autoPlay :Boolean = true
+    private var startAt :Int = 0
+    private var offlineLicenseExpireTime :Int = 15
     private var fragmentModule: FragmentModule? = null
 
     private val job = SupervisorJob()
@@ -54,6 +56,16 @@ class TpStreamsPlayerView @JvmOverloads constructor(
         updateFragment()
     }
 
+    fun setStartTime(startAt: Int?) {
+        this.startAt = startAt ?: 0
+        updateFragment()
+    }
+
+    fun setOfflineLicenseExpireTime(offlineLicenseExpireTime: Int?) {
+        this.offlineLicenseExpireTime = offlineLicenseExpireTime ?: 15
+        updateFragment()
+    }
+
     private fun updateFragment() {
         if (!videoId.isNullOrEmpty() && !accessToken.isNullOrEmpty()) {
             updateJob?.cancel()
@@ -64,7 +76,9 @@ class TpStreamsPlayerView @JvmOverloads constructor(
                     videoId!!,
                     accessToken!!,
                     enableDownload,
-                    autoPlay ?: true
+                    autoPlay ?: true,
+                    startAt,
+                    offlineLicenseExpireTime,
                 )
             }
         }

package/android/src/main/java/com/tpstreams/TpStreamsPlayerViewManager.kt

@@ -32,6 +32,15 @@ class TpStreamsPlayerViewManager : SimpleViewManager<TpStreamsPlayerView>() {
         view.setAutoPlay(autoPlay)
     }
 
+    @ReactProp(name = "startAt")
+    fun setStartTime(view: TpStreamsPlayerView, startAt: Int?) {
+        view.setStartTime(startAt ?: 0)
+    }
+
+    @ReactProp(name = "offlineLicenseExpireTime")
+    fun setOfflineLicenseExpireTime(view: TpStreamsPlayerView, offlineLicenseExpireTime: Int?) {
+        view.setOfflineLicenseExpireTime(offlineLicenseExpireTime ?: 15)
+    }
 }
 
 

package/android/src/main/java/com/tpstreams/TpstreamsModule.kt

@@ -142,6 +142,13 @@ class TpstreamsModule(reactContext: ReactApplicationContext) :
       }
   }
 
+  @ReactMethod
+  fun setNewAccessToken(token: String) {
+    runOnMainThread {
+        getPlayerFragment()?.setNewAccessToken(token)
+    }
+  }
+
   private fun getPlayerFragment(): PlayerFragment? {
       return PlayerFragment.instance?.takeIf { it.player != null }
   }

package/android/src/main/java/com/tpstreams/TpstreamsPackage.kt

@@ -7,7 +7,7 @@ import com.facebook.react.uimanager.ViewManager
 
 class TpstreamsPackage : ReactPackage {
   override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-      return listOf(TpstreamsModule(reactContext))
+      return listOf(TpstreamsModule(reactContext), FragmentModule(reactContext))
   }
 
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tpstreams",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Video Component for TPStreams",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",