@100mslive/react-native-hms 1.6.1 → 1.7.0

package/lib/typescript/components/HMSHLSPlayer/HMSHLSPlayer.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface HMSHLSPlayerProps {
+    url?: string;
+    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    aspectRatio?: number;
+    enableStats?: boolean;
+    enableControls?: boolean;
+}
+export interface HMSHLSPlayerRefProperties {
+    play: (url?: string) => void;
+    stop: () => void;
+    pause: () => void;
+    resume: () => void;
+    seekForward: (seconds: number) => void;
+    seekBackward: (seconds: number) => void;
+    seekToLivePosition: () => void;
+    setVolume: (level: number) => void;
+}
+export declare const HMSHLSPlayer: React.ForwardRefExoticComponent<HMSHLSPlayerProps & React.RefAttributes<HMSHLSPlayerRefProperties>>;

package/lib/typescript/components/HMSHLSPlayer/RCTHMSHLSPlayer.d.ts

@@ -0,0 +1,19 @@
+import { StyleProp, NativeSyntheticEvent, ViewStyle, NativeMethods } from 'react-native';
+import type { HMSHLSPlayerPlaybackEvent, HMSHLSPlayerStatsEvent } from '../../types';
+export type HmsHlsPlaybackEventHandler = (event: NativeSyntheticEvent<HMSHLSPlayerPlaybackEvent>) => void;
+export type HmsHlsStatsEventHandler = (event: NativeSyntheticEvent<HMSHLSPlayerStatsEvent>) => void;
+export type RCTHMSHLSPlayerProps = {
+    url?: string;
+    style?: StyleProp<ViewStyle>;
+    enableStats?: boolean;
+    enableControls?: boolean;
+    onHmsHlsPlaybackEvent?: HmsHlsPlaybackEventHandler;
+    onHmsHlsStatsEvent?: HmsHlsStatsEventHandler;
+};
+export declare const RCTHMSHLSPlayer: import("react-native").HostComponent<RCTHMSHLSPlayerProps>;
+export type RCTHMSHLSPlayerRef = React.Component<RCTHMSHLSPlayerProps> & Readonly<NativeMethods>;
+export declare const RCTHMSHLSPlayerViewManagerConfig: {
+    Commands: {
+        [key: string]: number;
+    };
+};

package/lib/typescript/components/HMSHLSPlayer/hooks.d.ts

@@ -0,0 +1,17 @@
+import { DependencyList } from 'react';
+import type { HMSHLSPlayerStatsUpdateEventData } from '../../types';
+import type { HMSHLSPlayerCue, HMSHLSPlayerPlaybackError, HMSHLSPlayerStatsError } from '../../stores/types';
+export declare const useHMSHLSPlayerPlaybackState: () => import("../../types").HMSHLSPlayerPlaybackState;
+export declare const useHMSHLSPlayerStats: () => {
+    stats: HMSHLSPlayerStatsUpdateEventData;
+    error: HMSHLSPlayerStatsError;
+};
+export declare const useHMSHLSPlayerStat: <T extends keyof HMSHLSPlayerStatsUpdateEventData>(stat: T) => HMSHLSPlayerStatsUpdateEventData[T];
+export declare const useHMSHLSPlayerStatsError: (callback: (error: NonNullable<HMSHLSPlayerStatsError>) => void, deps: DependencyList) => void;
+export declare const useHMSHLSPlayerPlaybackError: (callback: (error: NonNullable<HMSHLSPlayerPlaybackError>) => void, deps: DependencyList) => void;
+export declare const useHMSHLSPlayerCue: (callback: (error: NonNullable<HMSHLSPlayerCue>) => void, deps: DependencyList) => void;
+export declare const setHMSHLSPlayerPlaybackState: (playbackState: import("../../types").HMSHLSPlayerPlaybackState) => void;
+export declare const setHMSHLSPlayerCue: (cue: import("../../stores/types").HMSHLSPlayerPlaybackCue) => void;
+export declare const setHMSHLSPlayerPlaybackError: (error: HMSHLSPlayerPlaybackError) => void;
+export declare const setHMSHLSPlayerStats: (stats: HMSHLSPlayerStatsUpdateEventData) => void;
+export declare const setHMSHLSPlayerStatsError: (error: HMSHLSPlayerStatsError) => void;

package/lib/typescript/components/HMSHLSPlayer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './HMSHLSPlayer';
+export { useHMSHLSPlayerPlaybackState, useHMSHLSPlayerCue, useHMSHLSPlayerPlaybackError, useHMSHLSPlayerStats, useHMSHLSPlayerStat, useHMSHLSPlayerStatsError, } from './hooks';

package/lib/typescript/index.d.ts

@@ -84,4 +84,7 @@ export * from './classes/HMSIOSAudioMode';
 export type { HMSSessionStore, HMSSessionStoreValue, } from './classes/HMSSessionStore';
 export type { HmsViewComponent as HMSView } from './classes/HmsView';
 import { HMSSDK as HmsManager } from './classes/HMSSDK';
+export * from './components/HMSHLSPlayer';
+export * from './types';
+export * from './stores/types';
 export default HmsManager;

package/lib/typescript/stores/hls-player-playback-slice.d.ts

@@ -0,0 +1,5 @@
+import type { StateCreator } from 'zustand';
+import type { HMSHLSPlayerPlaybackSlice, HMSStore } from './types';
+export declare const createHMSHLSPlayerPlaybackSlice: StateCreator<HMSStore, [
+], [
+], HMSHLSPlayerPlaybackSlice>;

package/lib/typescript/stores/hls-player-stats-store.d.ts

@@ -0,0 +1,9 @@
+export declare const useHMSHLSPlayerStatsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<import("./types").HMSHLSPlayerStatsSlice>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: import("./types").HMSHLSPlayerStatsSlice, previousSelectedState: import("./types").HMSHLSPlayerStatsSlice) => void): () => void;
+        <U>(selector: (state: import("./types").HMSHLSPlayerStatsSlice) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            fireImmediately?: boolean | undefined;
+        } | undefined): () => void;
+    };
+}>;

package/lib/typescript/stores/hms-store.d.ts

@@ -0,0 +1,9 @@
+export declare const useHMSStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<import("./types").HMSHLSPlayerPlaybackSlice>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: import("./types").HMSHLSPlayerPlaybackSlice, previousSelectedState: import("./types").HMSHLSPlayerPlaybackSlice) => void): () => void;
+        <U>(selector: (state: import("./types").HMSHLSPlayerPlaybackSlice) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            fireImmediately?: boolean | undefined;
+        } | undefined): () => void;
+    };
+}>;

package/lib/typescript/stores/types.d.ts

@@ -0,0 +1,25 @@
+import type { HMSHLSPlayerPlaybackState, HMSHLSPlayerPlaybackCueEventData, HMSHLSPlayerPlaybackFailureEventData, HMSHLSPlayerStatsErrorEventData, HMSHLSPlayerStatsUpdateEventData } from '../types';
+export type HMSStore = HMSHLSPlayerPlaybackSlice;
+export type HMSHLSPlayerStatsStore = HMSHLSPlayerStatsSlice;
+export interface HMSHLSPlayerPlaybackCue extends Omit<HMSHLSPlayerPlaybackCueEventData, 'endDate' | 'startDate'> {
+    endDate?: Date;
+    startDate: Date;
+}
+export type HMSHLSPlayerCue = HMSHLSPlayerPlaybackCue | undefined;
+export type HMSHLSPlayerPlaybackError = HMSHLSPlayerPlaybackFailureEventData['error'] | undefined;
+export interface HMSHLSPlayerPlaybackSlice {
+    cue: HMSHLSPlayerCue;
+    playbackState: HMSHLSPlayerPlaybackState;
+    error: HMSHLSPlayerPlaybackError;
+    setCue(cue: HMSHLSPlayerPlaybackCue): void;
+    setPlaybackState(playbackState: HMSHLSPlayerPlaybackState): void;
+    setPlaybackError(error: HMSHLSPlayerPlaybackError): void;
+}
+export type HMSHLSPlayerStats = HMSHLSPlayerStatsUpdateEventData;
+export type HMSHLSPlayerStatsError = HMSHLSPlayerStatsErrorEventData | undefined;
+export interface HMSHLSPlayerStatsSlice {
+    stats: HMSHLSPlayerStats;
+    error: HMSHLSPlayerStatsError | undefined;
+    changeStats(stats: HMSHLSPlayerStats): void;
+    setError(error: HMSHLSPlayerStatsError): void;
+}

package/lib/typescript/types.d.ts

@@ -0,0 +1,63 @@
+type HMSHLSPlayerEvent<T extends string, U> = {
+    event: T;
+    data: U;
+};
+export declare enum HMSHLSPlayerPlaybackEventTypes {
+    ON_PLAYBACK_CUE_EVENT = "ON_PLAYBACK_CUE_EVENT",
+    ON_PLAYBACK_FAILURE_EVENT = "ON_PLAYBACK_FAILURE_EVENT",
+    ON_PLAYBACK_STATE_CHANGE_EVENT = "ON_PLAYBACK_STATE_CHANGE_EVENT"
+}
+export type HMSHLSPlayerPlaybackCueEventData = {
+    id?: string;
+    endDate?: string;
+    payloadval?: string;
+    startDate: string;
+};
+export type HMSHLSPlayerPlaybackFailureEventData = {
+    error: {
+        errorCode: number;
+        errorCodeName: string;
+        message?: string;
+    };
+};
+export declare enum HMSHLSPlayerPlaybackState {
+    BUFFERING = "buffering",
+    FAILED = "failed",
+    PAUSED = "paused",
+    PLAYING = "playing",
+    STOPPED = "stopped",
+    UNKNOWN = "unknown"
+}
+export type HMSHLSPlayerPlaybackStateChangeEventData = {
+    state: HMSHLSPlayerPlaybackState;
+};
+type HMSHLSPlayerPlaybackCueEvent = HMSHLSPlayerEvent<HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_CUE_EVENT, HMSHLSPlayerPlaybackCueEventData>;
+type HMSHLSPlayerPlaybackFailureEvent = HMSHLSPlayerEvent<HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_FAILURE_EVENT, HMSHLSPlayerPlaybackFailureEventData>;
+type HMSHLSPlayerPlaybackStateChangeEvent = HMSHLSPlayerEvent<HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_STATE_CHANGE_EVENT, HMSHLSPlayerPlaybackStateChangeEventData>;
+export type HMSHLSPlayerPlaybackEvent = HMSHLSPlayerPlaybackCueEvent | HMSHLSPlayerPlaybackFailureEvent | HMSHLSPlayerPlaybackStateChangeEvent;
+export declare enum HMSHLSPlayerStatsEventTypes {
+    ON_STATS_EVENT_ERROR = "ON_STATS_EVENT_ERROR",
+    ON_STATS_EVENT_UPDATE = "ON_STATS_EVENT_UPDATE"
+}
+export type HMSHLSPlayerStatsErrorEventData = {
+    action: string;
+    code: number;
+    description: string;
+    isTerminal: boolean;
+    message: string;
+    name: string;
+};
+export type HMSHLSPlayerStatsUpdateEventData = {
+    bandWidthEstimate: number;
+    totalBytesLoaded: number;
+    bufferedDuration: number;
+    distanceFromLive: number;
+    droppedFrameCount: number;
+    averageBitrate: number;
+    videoHeight: number;
+    videoWidth: number;
+};
+type HMSHLSPlayerStatsErrorEvent = HMSHLSPlayerEvent<HMSHLSPlayerStatsEventTypes.ON_STATS_EVENT_ERROR, HMSHLSPlayerStatsErrorEventData>;
+type HMSHLSPlayerStatsUpdateEvent = HMSHLSPlayerEvent<HMSHLSPlayerStatsEventTypes.ON_STATS_EVENT_UPDATE, HMSHLSPlayerStatsUpdateEventData>;
+export type HMSHLSPlayerStatsEvent = HMSHLSPlayerStatsErrorEvent | HMSHLSPlayerStatsUpdateEvent;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-hms",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Integrate Real Time Audio and Video conferencing, Interactive Live Streaming, and Chat in your apps with 100ms React Native SDK. With support for HLS and RTMP Live Streaming and Recording, Picture-in-Picture (PiP), one-to-one Video Call Modes, Audio Rooms, Video Player and much more, add immersive real-time communications to your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -30,7 +30,8 @@
     "release": "release-it",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
-    "bootstrap": "yarn example && yarn && yarn pods"
+    "bootstrap": "yarn example && yarn && yarn pods",
+    "typedoc": "npx typedoc src/index.ts --excludePrivate --excludeProtected --excludeInternal"
   },
   "keywords": [
     "react-native",
@@ -112,10 +113,11 @@
     "husky": "^4.2.5",
     "jest": "^26.0.1",
     "prettier": "^2.0.5",
-    "react-native-builder-bob": "^0.18.0",
-    "typescript": "^4.6.3",
     "react": "17.0.1",
-    "react-native": "0.64.4"
+    "react-native": "0.64.4",
+    "react-native-builder-bob": "^0.18.0",
+    "typedoc": "^0.24.7",
+    "typescript": "^4.6.3"
   },
   "peerDependencies": {
     "react": "*",
@@ -182,5 +184,8 @@
         }
       ]
     ]
+  },
+  "dependencies": {
+    "zustand": "^4.3.8"
   }
 }

package/react-native-hms.podspec

@@ -19,4 +19,5 @@ Pod::Spec.new do |s|
   s.dependency "React-Core"
   s.dependency "HMSSDK", sdkVersions["ios"]
   s.dependency 'HMSBroadcastExtensionSDK', sdkVersions["iOSBroadcastExtension"]
+  s.dependency 'HMSHLSPlayerSDK', sdkVersions["iOSHMSHLSPlayer"]
 end

package/sdk-versions.json

@@ -1,5 +1,6 @@
 {
-  "ios": "0.9.4",
+  "ios": "0.9.5",
   "iOSBroadcastExtension": "0.0.9",
-  "android": "2.6.3"
+  "iOSHMSHLSPlayer": "0.0.2",
+  "android": "2.6.7"
 }

package/src/classes/HMSEncoder.ts

@@ -95,7 +95,6 @@ export class HMSEncoder {
   static encodeHmsPeer(peer: any) {
     const encodedObj = {
       peerID: peer?.peerID,
-      customerDescription: peer?.customerDescription || undefined,
     };
 
     return new HMSPeer(encodedObj);
@@ -156,7 +155,6 @@ export class HMSEncoder {
   static encodeHmsLocalPeer(peer: any, id: string) {
     const encodedObj = {
       peerID: peer?.peerID,
-      customerDescription: peer?.customerDescription || undefined,
       localAudioTrackData: peer?.localAudioTrackData?.trackId
         ? {
             id: id,
@@ -270,7 +268,6 @@ export class HMSEncoder {
   static encodeHmsRemotePeer(peer: any, id: string) {
     const encodedObj = {
       peerID: peer?.peerID,
-      customerDescription: peer.customerDescription,
       remoteAudioTrackData: peer?.remoteAudioTrackData?.trackId
         ? {
             id: id,
@@ -528,6 +525,7 @@ export class HMSEncoder {
     if (data) {
       return new HMSMessage({
         message: data?.message,
+        messageId: data?.messageId,
         type: data?.type,
         time: new Date(parseInt(data?.time)),
         sender: this.encodeHmsPeer(data?.sender),
@@ -659,4 +657,18 @@ export class HMSEncoder {
         data.qualityLimitationResolutionChanges,
     });
   }
+
+  static transformHMSHLSCueEventData<C extends object, T>(data: C): T {
+    if ('startDate' in data) {
+      data.startDate = this.encodeDate(data.startDate);
+    }
+
+    if ('endDate' in data && data.endDate) {
+      data.endDate = this.encodeDate(data.endDate);
+    }
+
+    const transformed = data as unknown as T;
+
+    return transformed;
+  }
 }

package/src/classes/HMSLocalPeer.ts

@@ -18,7 +18,6 @@ export class HMSLocalPeer extends HMSPeer {
 
   constructor(params: {
     peerID: string;
-    customerDescription?: string;
     localAudioTrackData?: {
       id: string;
       trackId: string;

package/src/classes/HMSMessage.ts

@@ -3,8 +3,8 @@ import type { HMSMessageType } from './HMSMessageType';
 import type { HMSPeer } from './HMSPeer';
 
 export class HMSMessage {
-  // endpoint: string;
   public message: string;
+  public messageId: string;
   public type: HMSMessageType;
   public time: Date;
   public sender?: HMSPeer;
@@ -12,12 +12,14 @@ export class HMSMessage {
 
   constructor(params: {
     message: string;
+    messageId: string;
     type: HMSMessageType;
     time: Date;
     sender?: HMSPeer;
     recipient: HMSMessageRecipient;
   }) {
     this.message = params.message;
+    this.messageId = params.messageId;
     this.type = params.type;
     this.time = params.time;
     this.sender = params.sender;

package/src/classes/HMSPeer.ts

@@ -8,44 +8,83 @@ import { HMSConstants } from './HMSConstants';
 
 export class HMSPeer {
   peerID: string;
-  /**
-   * @deprecated customerDescription property has been deprecated in favor of metadata property
-   */
-  customerDescription?: string;
+  private _name: string = '';
+  private _isLocal: boolean | undefined;
+  private _customerUserID: string | undefined;
+  private _metadata: string | undefined;
+  private _role: HMSRole | undefined;
+
+  private _updateName(value: string) {
+    // If `_name` is outdated, update it
+    if (this._name !== value) {
+      this._name = value;
+    }
+  }
+
+  private _updateIsLocal(value: boolean) {
+    // If `_isLocal` is outdated, update it
+    if (this._isLocal !== value) {
+      this._isLocal = value;
+    }
+  }
+
+  private _updateCustomerUserID(value: string) {
+    // If `_customerUserID` is outdated, update it
+    if (this._customerUserID !== value) {
+      this._customerUserID = value;
+    }
+  }
+
+  private _updateMetadata(value: string) {
+    // If `_metadata` is outdated, update it
+    if (this._metadata !== value) {
+      this._metadata = value;
+    }
+  }
 
-  constructor(params: { peerID: string; customerDescription?: string }) {
+  private _updateRole(value: HMSRole) {
+    // If `_role` is outdated, update it
+    if (this._role !== value) {
+      this._role = value;
+    }
+  }
+
+  constructor(params: { peerID: string }) {
     this.peerID = params.peerID;
-    this.customerDescription = params.customerDescription;
   }
 
   get name(): string {
     const hmsPeersCache = getHmsPeersCache();
 
-    if (hmsPeersCache) {
-      return hmsPeersCache.getProperty(this.peerID, 'name') || '';
-    }
+    const nameValue = hmsPeersCache
+      ? hmsPeersCache.getProperty(this.peerID, 'name')
+      : getPeerPropertyFromNative(
+          HMSConstants.DEFAULT_SDK_ID,
+          this.peerID,
+          'name'
+        );
 
-    return (
-      getPeerPropertyFromNative(
-        HMSConstants.DEFAULT_SDK_ID,
-        this.peerID,
-        'name'
-      ) || ''
-    );
+    if (nameValue) {
+      this._updateName(nameValue);
+    }
+    return nameValue ?? this._name;
   }
 
   get isLocal(): boolean | undefined {
     const hmsPeersCache = getHmsPeersCache();
 
-    if (hmsPeersCache) {
-      return hmsPeersCache.getProperty(this.peerID, 'isLocal');
-    }
+    const value = hmsPeersCache
+      ? hmsPeersCache.getProperty(this.peerID, 'isLocal')
+      : getPeerPropertyFromNative(
+          HMSConstants.DEFAULT_SDK_ID,
+          this.peerID,
+          'isLocal'
+        );
 
-    return getPeerPropertyFromNative(
-      HMSConstants.DEFAULT_SDK_ID,
-      this.peerID,
-      'isLocal'
-    );
+    if (typeof value === 'boolean') {
+      this._updateIsLocal(value);
+    }
+    return value ?? this._isLocal;
   }
 
   get networkQuality(): HMSNetworkQuality | undefined {
@@ -65,43 +104,52 @@ export class HMSPeer {
   get customerUserID(): string | undefined {
     const hmsPeersCache = getHmsPeersCache();
 
-    if (hmsPeersCache) {
-      return hmsPeersCache.getProperty(this.peerID, 'customerUserID');
-    }
+    const value = hmsPeersCache
+      ? hmsPeersCache.getProperty(this.peerID, 'customerUserID')
+      : getPeerPropertyFromNative(
+          HMSConstants.DEFAULT_SDK_ID,
+          this.peerID,
+          'customerUserID'
+        );
 
-    return getPeerPropertyFromNative(
-      HMSConstants.DEFAULT_SDK_ID,
-      this.peerID,
-      'customerUserID'
-    );
+    if (value) {
+      this._updateCustomerUserID(value);
+    }
+    return value ?? this._customerUserID;
   }
 
   get metadata(): string | undefined {
     const hmsPeersCache = getHmsPeersCache();
 
-    if (hmsPeersCache) {
-      return hmsPeersCache.getProperty(this.peerID, 'metadata');
-    }
+    const value = hmsPeersCache
+      ? hmsPeersCache.getProperty(this.peerID, 'metadata')
+      : getPeerPropertyFromNative(
+          HMSConstants.DEFAULT_SDK_ID,
+          this.peerID,
+          'metadata'
+        );
 
-    return getPeerPropertyFromNative(
-      HMSConstants.DEFAULT_SDK_ID,
-      this.peerID,
-      'metadata'
-    );
+    if (value) {
+      this._updateMetadata(value);
+    }
+    return value ?? this._metadata;
   }
 
   get role(): HMSRole | undefined {
     const hmsPeersCache = getHmsPeersCache();
 
-    if (hmsPeersCache) {
-      return hmsPeersCache.getProperty(this.peerID, 'role');
-    }
+    const value = hmsPeersCache
+      ? hmsPeersCache.getProperty(this.peerID, 'role')
+      : getPeerPropertyFromNative(
+          HMSConstants.DEFAULT_SDK_ID,
+          this.peerID,
+          'role'
+        );
 
-    return getPeerPropertyFromNative(
-      HMSConstants.DEFAULT_SDK_ID,
-      this.peerID,
-      'role'
-    );
+    if (value) {
+      this._updateRole(value);
+    }
+    return value ?? this._role;
   }
 
   get audioTrack(): HMSAudioTrack | undefined {

package/src/classes/HMSPeerUpdate.ts

@@ -10,8 +10,8 @@ export enum HMSPeerUpdate {
 export const HMSPeerUpdateOrdinals = new Map([
   ['0', HMSPeerUpdate.PEER_JOINED],
   ['1', HMSPeerUpdate.PEER_LEFT],
-  ['9', HMSPeerUpdate.ROLE_CHANGED],
-  ['10', HMSPeerUpdate.NAME_CHANGED],
-  ['11', HMSPeerUpdate.METADATA_CHANGED],
-  ['12', HMSPeerUpdate.NETWORK_QUALITY_UPDATED],
+  ['4', HMSPeerUpdate.ROLE_CHANGED],
+  ['5', HMSPeerUpdate.NAME_CHANGED],
+  ['6', HMSPeerUpdate.METADATA_CHANGED],
+  ['7', HMSPeerUpdate.NETWORK_QUALITY_UPDATED],
 ]);