feat(sdk): ✨ added "hls player resolution" state in zustand store

packages/react-native-hms/android/src/main/java/com/reactnativehmssdk/HMSHLSPlayer.kt

@@ -153,9 +153,9 @@ class HMSHLSPlayer(context: ReactContext) : FrameLayout(context) {
             }
 
             val data = Arguments.createMap()
-            data.putString("state", "onVideoSizeChanged")
-            data.putDouble("aspectRatio", (width / height))
-            sendHLSPlaybackEventToJS(HMSHLSPlayerConstants.ON_PLAYBACK_STATE_CHANGE_EVENT, data)
+            data.putDouble("width", width)
+            data.putDouble("height", height)
+            sendHLSPlaybackEventToJS(HMSHLSPlayerConstants.ON_PLAYBACK_RESOLUTION_CHANGE_EVENT, data)
           }
         }
       },
@@ -285,6 +285,7 @@ object HMSHLSPlayerConstants {
   const val ON_PLAYBACK_CUE_EVENT = "ON_PLAYBACK_CUE_EVENT"
   const val ON_PLAYBACK_FAILURE_EVENT = "ON_PLAYBACK_FAILURE_EVENT"
   const val ON_PLAYBACK_STATE_CHANGE_EVENT = "ON_PLAYBACK_STATE_CHANGE_EVENT"
+  const val ON_PLAYBACK_RESOLUTION_CHANGE_EVENT = "ON_PLAYBACK_RESOLUTION_CHANGE_EVENT"
 
   // HLS Playback Stats Events
   const val HMS_HLS_STATS_EVENT = "hmsHlsStatsEvent"

packages/react-native-hms/ios/HMSHLSPlayerManager.swift

@@ -308,18 +308,31 @@ class HMSHLSPlayer: UIView {
         sendHLSPlaybackEventToJS(HMSHLSPlayerConstants.ON_PLAYBACK_FAILURE_EVENT, data)
     }
 
-    fileprivate func onPlaybackStateChanged(state: HMSHLSPlaybackState? = nil, videoSizeChanged: Bool = false, aspectRatio: Double? = nil) {
+    fileprivate func onPlaybackStateChanged(state: HMSHLSPlaybackState) {
         guard onHmsHlsPlaybackEvent != nil else { return }
 
         var data = [String: Any]()
 
-        data["state"] = videoSizeChanged ? "onVideoSizeChanged" : state?.description
+        data["state"] = state.description
 
-        if let aspectRatio = aspectRatio {
-            data["aspectRatio"] = aspectRatio
+        sendHLSPlaybackEventToJS(HMSHLSPlayerConstants.ON_PLAYBACK_STATE_CHANGE_EVENT, data)
+    }
+
+    fileprivate func onResolutionChanged(videoSize: CGSize) {
+        if videoSize.width >= videoSize.height {
+            hmsHLSPlayerViewController?.videoGravity = .resizeAspect
+        } else {
+            hmsHLSPlayerViewController?.videoGravity = .resizeAspectFill
         }
 
-        sendHLSPlaybackEventToJS(HMSHLSPlayerConstants.ON_PLAYBACK_STATE_CHANGE_EVENT, data)
+        guard onHmsHlsPlaybackEvent != nil else { return }
+
+        var data = [String: Any]()
+
+        data["width"] = videoSize.width
+        data["height"] = videoSize.height
+
+        sendHLSPlaybackEventToJS(HMSHLSPlayerConstants.ON_PLAYBACK_RESOLUTION_CHANGE_EVENT, data)
     }
 }
 
@@ -343,12 +356,7 @@ class HLSPlaybackEventController: HMSHLSPlayerDelegate {
     }
 
     func onResolutionChanged(videoSize: CGSize) {
-        if videoSize.width >= videoSize.height {
-            hmsHlsPlayerDelegate?.hmsHLSPlayerViewController?.videoGravity = .resizeAspect
-        } else {
-            hmsHlsPlayerDelegate?.hmsHLSPlayerViewController?.videoGravity = .resizeAspectFill
-        }
-        hmsHlsPlayerDelegate?.onPlaybackStateChanged(videoSizeChanged: true, aspectRatio: videoSize.width/videoSize.height)
+        hmsHlsPlayerDelegate?.onResolutionChanged(videoSize: videoSize)
     }
 }
 
@@ -357,6 +365,7 @@ enum HMSHLSPlayerConstants {
     static let ON_PLAYBACK_CUE_EVENT = "ON_PLAYBACK_CUE_EVENT"
     static let ON_PLAYBACK_FAILURE_EVENT = "ON_PLAYBACK_FAILURE_EVENT"
     static let ON_PLAYBACK_STATE_CHANGE_EVENT = "ON_PLAYBACK_STATE_CHANGE_EVENT"
+    static let ON_PLAYBACK_RESOLUTION_CHANGE_EVENT = "ON_PLAYBACK_RESOLUTION_CHANGE_EVENT"
 
     // HLS Playback Stats Events
     static let ON_STATS_EVENT_UPDATE = "ON_STATS_EVENT_UPDATE"

packages/react-native-hms/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);
-        }
-      }
     }
   };
 

packages/react-native-hms/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 =

packages/react-native-hms/src/components/HMSHLSPlayer/index.ts

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

packages/react-native-hms/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 }),
 });

packages/react-native-hms/src/stores/types.ts

@@ -4,6 +4,7 @@ import type {
   HMSHLSPlayerPlaybackState,
   HMSHLSPlayerPlaybackCueEventData,
   HMSHLSPlayerPlaybackFailureEventData,
+  HMSHLSPlayerPlaybackResolutionChangeEventData,
   HMSHLSPlayerStatsErrorEventData,
   HMSHLSPlayerStatsUpdateEventData,
 } from '../types';
@@ -25,12 +26,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;
 }
 

packages/react-native-hms/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