@100mslive/react-native-hms 1.9.0 → 1.9.1-beta.0

package/lib/typescript/types.d.ts

@@ -5,7 +5,8 @@ type HMSHLSPlayerEvent<T extends string, 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"
+    ON_PLAYBACK_STATE_CHANGE_EVENT = "ON_PLAYBACK_STATE_CHANGE_EVENT",
+    ON_PLAYBACK_RESOLUTION_CHANGE_EVENT = "ON_PLAYBACK_RESOLUTION_CHANGE_EVENT"
 }
 export type HMSHLSPlayerPlaybackCueEventData = {
     id?: string;
@@ -26,17 +27,20 @@ export declare enum HMSHLSPlayerPlaybackState {
     PAUSED = "paused",
     PLAYING = "playing",
     STOPPED = "stopped",
-    UNKNOWN = "unknown",
-    onVideoSizeChanged = "onVideoSizeChanged"
+    UNKNOWN = "unknown"
 }
 export type HMSHLSPlayerPlaybackStateChangeEventData = {
     state: HMSHLSPlayerPlaybackState;
-    aspectRatio: number | undefined;
+};
+export type HMSHLSPlayerPlaybackResolutionChangeEventData = {
+    width: number;
+    height: number;
 };
 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;
+type HMSHLSPLayerPlaybackResolutionChangeEvent = HMSHLSPlayerEvent<HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_RESOLUTION_CHANGE_EVENT, HMSHLSPlayerPlaybackResolutionChangeEventData>;
+export type HMSHLSPlayerPlaybackEvent = HMSHLSPlayerPlaybackCueEvent | HMSHLSPlayerPlaybackFailureEvent | HMSHLSPlayerPlaybackStateChangeEvent | HMSHLSPLayerPlaybackResolutionChangeEvent;
 export declare enum HMSHLSPlayerStatsEventTypes {
     ON_STATS_EVENT_ERROR = "ON_STATS_EVENT_ERROR",
     ON_STATS_EVENT_UPDATE = "ON_STATS_EVENT_UPDATE"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-hms",
-  "version": "1.9.0",
+  "version": "1.9.1-beta.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",
@@ -17,6 +17,8 @@
     "sdk-versions.json",
     "!lib/typescript/example",
     "!android/build",
+    "!android/.gradle",
+    "!android/.idea",
     "!ios/build",
     "!**/__tests__",
     "!**/__fixtures__",

package/sdk-versions.json

@@ -2,5 +2,5 @@
   "ios": "1.1.0",
   "iOSBroadcastExtension": "0.0.9",
   "iOSHMSHLSPlayer": "0.0.2",
-  "android": "2.7.7"
+  "android": "2.7.9"
 }

package/src/classes/HMSPIPConfig.ts

@@ -0,0 +1,7 @@
+export interface HMSPIPConfig {
+  autoEnterPipMode?: boolean;
+  aspectRatio?: [number, number];
+  endButton?: boolean;
+  audioButton?: boolean;
+  videoButton?: boolean;
+};

package/src/classes/HMSSDK.tsx

@@ -45,18 +45,10 @@ import { HMSPeerUpdate, HMSPeerUpdateOrdinals } from './HMSPeerUpdate';
 import { HMSSessionStore } from './HMSSessionStore';
 import type { HMSPeerListIteratorOptions } from './HMSPeerListIteratorOptions';
 import { HMSPeerListIterator } from './HMSPeerListIterator';
+import type { HMSPIPConfig } from './HMSPIPConfig';
 
 type HmsViewProps = Omit<HmsComponentProps, 'id'>;
 
-// TODO: Rename to HMSPIPConfig & to be moved to a separate file
-interface PIPConfig {
-  autoEnterPipMode?: boolean;
-  aspectRatio?: [number, number];
-  endButton?: boolean;
-  audioButton?: boolean;
-  videoButton?: boolean;
-}
-
 const ReactNativeVersion = require('react-native/Libraries/Core/ReactNativeVersion');
 
 let HmsSdk: HMSSDK | undefined;
@@ -2511,14 +2503,14 @@ export class HMSSDK {
     return HMSManager.handlePipActions('isPipModeSupported', { id: this.id });
   }
 
-  async enterPipMode(data?: PIPConfig): Promise<undefined | boolean> {
+  async enterPipMode(data?: HMSPIPConfig): Promise<undefined | boolean> {
     return HMSManager.handlePipActions('enterPipMode', {
       ...data,
       id: this.id,
     });
   }
 
-  async setPipParams(data?: PIPConfig): Promise<undefined | boolean> {
+  async setPipParams(data?: HMSPIPConfig): Promise<undefined | boolean> {
     return HMSManager.handlePipActions('setPictureInPictureParams', {
       ...data,
       id: this.id,

package/src/classes/HmsView.tsx

@@ -6,9 +6,10 @@ import {
   UIManager,
   Platform,
 } from 'react-native';
-import type { ViewStyle } from 'react-native';
+import type { NativeSyntheticEvent, ViewStyle } from 'react-native';
 import { HMSConstants } from './HMSConstants';
 import { HMSVideoViewMode } from './HMSVideoViewMode';
+import { setHmsViewsResolutionsState } from '../hooks/hmsviews';
 
 interface HmsViewProps {
   data: {
@@ -64,7 +65,20 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
      * This method is passed to `onChange` prop of `HmsView` Native Component.
      * It is invoked when `HmsView` emits 'topChange' event.
      */
-    const onChange = () => setApplyStyles_ANDROID(true);
+    const onChange = ({
+      nativeEvent,
+    }: NativeSyntheticEvent<{
+      data: { height: number; width: number };
+      event: 'ON_RESOLUTION_CHANGE_EVENT';
+    }>) => {
+      const { event, data } = nativeEvent;
+
+      setApplyStyles_ANDROID(true);
+
+      if (event === 'ON_RESOLUTION_CHANGE_EVENT') {
+        setHmsViewsResolutionsState(trackId, data);
+      }
+    };
 
     /**
      * This method is passed to `onDataReturned` prop of `HmsView` Native Component.

package/src/components/HMSHLSPlayer/HMSHLSPlayer.tsx

@@ -6,6 +6,7 @@ import {
   setHMSHLSPlayerCue,
   setHMSHLSPlayerPlaybackError,
   setHMSHLSPlayerPlaybackState,
+  setHMSHLSPlayerResolution,
   setHMSHLSPlayerStats,
   setHMSHLSPlayerStatsError,
 } from './hooks';
@@ -198,13 +199,18 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
       event === HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_FAILURE_EVENT
     ) {
       setHMSHLSPlayerPlaybackError(data.error);
+    } else if (
+      event === HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_RESOLUTION_CHANGE_EVENT
+    ) {
+      setHMSHLSPlayerResolution({...data});
+
+      const aspectRatio = data.width / data.height;
+
+      if (typeof aspectRatio === 'number' && !isNaN(aspectRatio)) {
+        setAspectRatio(aspectRatio);
+      }
     } else {
       setHMSHLSPlayerPlaybackState(data.state);
-      if (data.state === 'onVideoSizeChanged') {
-        if (typeof data.aspectRatio === 'number') {
-          setAspectRatio(data.aspectRatio);
-        }
-      }
     }
   };
 

package/src/components/HMSHLSPlayer/hooks.ts

@@ -17,6 +17,10 @@ export const useHMSHLSPlayerPlaybackState = () => {
   return useHMSStore((state) => state.playbackState);
 };
 
+export const useHMSHLSPlayerResolution = () => {
+  return useHMSStore((state) => state.resolution);
+};
+
 export const useHMSHLSPlayerStats = () => {
   return useHMSHLSPlayerStatsStore(
     (state) => ({
@@ -89,6 +93,9 @@ export const useHMSHLSPlayerCue = (
 export const setHMSHLSPlayerPlaybackState =
   useHMSStore.getState().setPlaybackState;
 
+export const setHMSHLSPlayerResolution =
+  useHMSStore.getState().setResolution;
+
 export const setHMSHLSPlayerCue = useHMSStore.getState().setCue;
 
 export const setHMSHLSPlayerPlaybackError =

package/src/components/HMSHLSPlayer/index.ts

@@ -6,4 +6,5 @@ export {
   useHMSHLSPlayerStats,
   useHMSHLSPlayerStat,
   useHMSHLSPlayerStatsError,
+  useHMSHLSPlayerResolution,
 } from './hooks';

package/src/hooks/hmsviews.ts

@@ -0,0 +1,13 @@
+import type { TrackId } from '../stores/types';
+import { useHMSStore } from '../stores/hms-store';
+
+// use latest state (with component rerender)
+
+export const useHmsViewsResolutionsState = (trackId?: TrackId) => {
+  return useHMSStore((state) => trackId ? state.hmsviewsResolutions[trackId] : undefined);
+};
+
+// state setters
+
+export const setHmsViewsResolutionsState =
+  useHMSStore.getState().setHmsviewsResolutions;

package/src/index.ts

@@ -88,6 +88,7 @@ export type {
   HmsViewComponent as HMSView,
   HmsComponentProps as HMSViewProps,
 } from './classes/HmsView';
+export type { HMSPIPConfig } from './classes/HMSPIPConfig';
 
 import { HMSSDK as HmsManager } from './classes/HMSSDK';
 
@@ -99,6 +100,7 @@ export * from './components/HMSHLSPlayer';
 
 // 100ms Hooks
 export * from './hooks/useHMSPeerUpdates';
+export { useHmsViewsResolutionsState } from './hooks/hmsviews';
 
 // 100ms types
 export * from './types';

package/src/stores/hls-player-playback-slice.ts

@@ -22,4 +22,7 @@ export const createHMSHLSPlayerPlaybackSlice: StateCreator<
 
   error: undefined,
   setPlaybackError: (error: HMSHLSPlayerPlaybackError) => set({ error }),
+
+  resolution: undefined,
+  setResolution: (resolution) => set({ resolution }),
 });

package/src/stores/hms-store.ts

@@ -2,10 +2,12 @@ import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 
 import { createHMSHLSPlayerPlaybackSlice } from './hls-player-playback-slice';
+import { createHMSViewsSlice } from './hmsviews-slice';
 import type { HMSStore } from './types';
 
 export const useHMSStore = create<HMSStore>()(
   subscribeWithSelector((...a) => ({
     ...createHMSHLSPlayerPlaybackSlice(...a),
+    ...createHMSViewsSlice(...a)
   }))
 );

package/src/stores/hmsviews-slice.ts

@@ -0,0 +1,20 @@
+import type { StateCreator } from 'zustand';
+
+import type { HMSViewsSlice, HMSStore } from './types';
+
+export const createHMSViewsSlice: StateCreator<
+  HMSStore,
+  [],
+  [],
+  HMSViewsSlice
+> = (set) => ({
+  hmsviewsResolutions: {},
+  setHmsviewsResolutions: (trackId, resolution) => {
+    set((state) => ({
+      hmsviewsResolutions: {
+        ...state.hmsviewsResolutions,
+        [trackId]: resolution,
+      },
+    }));
+  },
+});

package/src/stores/types.ts

@@ -4,13 +4,28 @@ import type {
   HMSHLSPlayerPlaybackState,
   HMSHLSPlayerPlaybackCueEventData,
   HMSHLSPlayerPlaybackFailureEventData,
+  HMSHLSPlayerPlaybackResolutionChangeEventData,
   HMSHLSPlayerStatsErrorEventData,
   HMSHLSPlayerStatsUpdateEventData,
 } from '../types';
 
-export type HMSStore = HMSHLSPlayerPlaybackSlice;
+export type HMSStore = HMSHLSPlayerPlaybackSlice & HMSViewsSlice;
 export type HMSHLSPlayerStatsStore = HMSHLSPlayerStatsSlice;
 
+// HMSViews Slice
+
+export type TrackId = string;
+
+export type Resolution = {
+  width: number;
+  height: number;
+};
+
+export interface HMSViewsSlice {
+  hmsviewsResolutions: Record<TrackId, Resolution | undefined>;
+  setHmsviewsResolutions(trackId: TrackId, resolution: Resolution): void;
+};
+
 // HLS Player Playback Slice
 
 export interface HMSHLSPlayerPlaybackCue
@@ -25,12 +40,16 @@ export type HMSHLSPlayerPlaybackError =
   | HMSHLSPlayerPlaybackFailureEventData['error']
   | undefined;
 
+export type HMSHLSPlayerResolution = HMSHLSPlayerPlaybackResolutionChangeEventData | undefined;
+
 export interface HMSHLSPlayerPlaybackSlice {
   cue: HMSHLSPlayerCue;
   playbackState: HMSHLSPlayerPlaybackState;
+  resolution: HMSHLSPlayerResolution;
   error: HMSHLSPlayerPlaybackError;
   setCue(cue: HMSHLSPlayerPlaybackCue): void;
   setPlaybackState(playbackState: HMSHLSPlayerPlaybackState): void;
+  setResolution(resolution: HMSHLSPlayerResolution): void;
   setPlaybackError(error: HMSHLSPlayerPlaybackError): void;
 }
 

package/src/types.ts

@@ -10,6 +10,7 @@ export 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',
+  ON_PLAYBACK_RESOLUTION_CHANGE_EVENT = 'ON_PLAYBACK_RESOLUTION_CHANGE_EVENT',
 }
 
 export type HMSHLSPlayerPlaybackCueEventData = {
@@ -34,12 +35,15 @@ export enum HMSHLSPlayerPlaybackState {
   PLAYING = 'playing',
   STOPPED = 'stopped',
   UNKNOWN = 'unknown',
-  onVideoSizeChanged = 'onVideoSizeChanged',
 }
 
 export type HMSHLSPlayerPlaybackStateChangeEventData = {
   state: HMSHLSPlayerPlaybackState;
-  aspectRatio: number | undefined;
+};
+
+export type HMSHLSPlayerPlaybackResolutionChangeEventData = {
+  width: number;
+  height: number;
 };
 
 type HMSHLSPlayerPlaybackCueEvent = HMSHLSPlayerEvent<
@@ -57,10 +61,16 @@ type HMSHLSPlayerPlaybackStateChangeEvent = HMSHLSPlayerEvent<
   HMSHLSPlayerPlaybackStateChangeEventData
 >;
 
+type HMSHLSPLayerPlaybackResolutionChangeEvent = HMSHLSPlayerEvent<
+  HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_RESOLUTION_CHANGE_EVENT,
+  HMSHLSPlayerPlaybackResolutionChangeEventData
+>;
+
 export type HMSHLSPlayerPlaybackEvent =
   | HMSHLSPlayerPlaybackCueEvent
   | HMSHLSPlayerPlaybackFailureEvent
-  | HMSHLSPlayerPlaybackStateChangeEvent;
+  | HMSHLSPlayerPlaybackStateChangeEvent
+  | HMSHLSPLayerPlaybackResolutionChangeEvent;
 
 // #endregion HMS HLSPlayer Playback Events