@applicaster/zapp-react-native-utils 15.1.0-rc.1 → 16.0.0-alpha.9803580571

package/appUtils/focusManagerAux/utils/utils.ios.ts

@@ -1,7 +1,9 @@
-import { ReplaySubject } from "rxjs";
-import { filter } from "rxjs/operators";
+import { ReplaySubject, Subject } from "rxjs";
+import { filter, switchMap, take, withLatestFrom, map } from "rxjs/operators";
+
 import { BUTTON_PREFIX } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/tv/TvActionButtons/const";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
+import { isPartOfMenu, isPartOfContent } from "./index.ios";
 
 type FocusableID = string;
 type RegistrationEvent = {
@@ -9,6 +11,25 @@ type RegistrationEvent = {
   registered: boolean;
 };
 
+let focusableViewRegistrationSubject$ = new Subject<{
+  id: FocusableID;
+  groupId: FocusableID;
+}>();
+
+let focusableGroupRegistrationSubject$ = new ReplaySubject<{
+  id: FocusableID;
+}>();
+
+let focusableNativeViewRegistrationSubject$ = new Subject<{
+  id: FocusableID;
+  groupId: FocusableID;
+}>();
+
+let focusableNativeGroupRegistrationSubject$ = new ReplaySubject<{
+  id: FocusableID;
+  groupId: FocusableID;
+}>();
+
 const isFocusableButton = (id: Option<FocusableID>): boolean =>
   id && id.includes?.(BUTTON_PREFIX);
 
@@ -22,14 +43,192 @@ export const focusableButtonsRegistration$ = (focusableGroupId: string) =>
     )
   );
 
-export const emitRegistered = (id: Option<FocusableID>): void => {
+export const resetFocusableRegistration = () => {
+  // complete the old subject so subscribers are notified and resources are freed
+  if (!focusableViewRegistrationSubject$.closed) {
+    focusableViewRegistrationSubject$.complete();
+  }
+
+  if (!focusableGroupRegistrationSubject$.closed) {
+    focusableGroupRegistrationSubject$.complete();
+  }
+
+  if (!focusableNativeViewRegistrationSubject$.closed) {
+    focusableNativeViewRegistrationSubject$.complete();
+  }
+
+  if (!focusableNativeGroupRegistrationSubject$.closed) {
+    focusableNativeGroupRegistrationSubject$.complete();
+  }
+
+  focusableViewRegistrationSubject$ = new Subject<{
+    id: FocusableID;
+    groupId: FocusableID;
+  }>();
+
+  focusableGroupRegistrationSubject$ = new ReplaySubject<{
+    id: FocusableID;
+  }>();
+
+  focusableNativeViewRegistrationSubject$ = new Subject<{
+    id: FocusableID;
+    groupId: FocusableID;
+  }>();
+
+  focusableNativeGroupRegistrationSubject$ = new ReplaySubject<{
+    id: FocusableID;
+    groupId: FocusableID;
+  }>();
+};
+
+const focusableNativeViewRegistration = ({ focusableView, focusableGroup }) => {
+  return focusableNativeViewRegistrationSubject$.pipe(
+    filter(
+      (focusableNativeView) => focusableNativeView.id === focusableView.id
+    ),
+    take(1),
+    switchMap((focusableNativeView) =>
+      // start waiting registration of its parent FocusableNativeGroup
+      focusableNativeGroupRegistrationSubject$.pipe(
+        filter(
+          (focusableNativeGroup) =>
+            focusableNativeGroup.id === focusableNativeView.groupId
+        ),
+        take(1),
+        map((focusableNativeGroup) => ({
+          focusableNativeGroup,
+          focusableNativeView,
+          focusableView,
+          focusableGroup,
+        }))
+      )
+    )
+  );
+};
+
+export const firstFocusableViewInContentRegistrationFactory = () =>
+  focusableViewRegistrationSubject$.pipe(
+    switchMap((focusableView) =>
+      // start waiting registration of its parent FocusableGroup
+      focusableGroupRegistrationSubject$.pipe(
+        filter((focusableGroup) => focusableGroup.id === focusableView.groupId),
+        take(1),
+        map((focusableGroup) => ({
+          focusableView,
+          focusableGroup,
+        }))
+      )
+    ),
+    // start waiting registration for FocusableNativeView and its parent FocusableNativeGroup
+    switchMap(({ focusableView, focusableGroup }) =>
+      focusableNativeViewRegistration({
+        focusableView,
+        focusableGroup,
+      })
+    ),
+    filter(({ focusableView }) =>
+      isPartOfContent(focusManager.focusableTree, focusableView.id)
+    ),
+    take(1) // we care about only first FocusableView registration
+  );
+
+// registration on RN level(into RN focusManager)
+export const emitRegistered = ({
+  id,
+  groupId,
+  isGroup,
+}: {
+  id: Option<FocusableID>;
+  groupId: Option<FocusableID>;
+  isGroup: boolean;
+}): void => {
   if (isFocusableButton(id)) {
     registeredSubject$.next({ id, registered: true });
   }
+
+  if (isGroup && id) {
+    focusableGroupRegistrationSubject$.next({ id });
+  }
+
+  if (!isGroup && id && groupId) {
+    focusableViewRegistrationSubject$.next({ id, groupId });
+  }
 };
 
+// unregistration on RN level(into RN focusManager)
 export const emitUnregistered = (id: Option<FocusableID>): void => {
   if (isFocusableButton(id)) {
     registeredSubject$.next({ id, registered: false });
   }
 };
+
+// registration focusableNativeView and focusableNativeGroup
+export const emitNativeRegistered = ({
+  id,
+  groupId,
+  isGroup,
+}: {
+  id: Option<FocusableID>;
+  groupId: Option<FocusableID>;
+  isGroup: boolean;
+}): void => {
+  if (!isGroup && id && groupId) {
+    focusableNativeViewRegistrationSubject$.next({ id, groupId });
+  }
+
+  if (isGroup && id && groupId) {
+    focusableNativeGroupRegistrationSubject$.next({ id, groupId });
+  }
+};
+
+// /////
+
+const focusedSubject$ = new Subject<FocusableID>();
+
+const focused$ = focusedSubject$.asObservable();
+
+export const emitFocused = (id: FocusableID): void => {
+  focusedSubject$.next(id);
+};
+
+export const topMenuItemFocused$ = focused$.pipe(
+  filter((id) => id && isPartOfMenu(focusManager.focusableTree, id))
+);
+
+export const contentFocused$ = focused$.pipe(
+  filter((id) => {
+    const isContent = isPartOfContent(focusManager.focusableTree, id);
+
+    return id && isContent;
+  })
+);
+
+const createFocusableRegistry = () => {
+  const subject$ = new ReplaySubject<FocusableID | undefined>(1);
+
+  return {
+    observable$: subject$.asObservable(),
+    register: (id: FocusableID) => {
+      // save focusable_id on registration
+      subject$.next(id);
+    },
+    unregister: () => {
+      // reset focusable_id on unregistration
+      subject$.next(undefined);
+    },
+  };
+};
+
+/// HOME_TOP_MENU_ITEM
+export const HomeTopMenuItemRegistry = createFocusableRegistry();
+
+export const homeTopMenuItemFocused$ = topMenuItemFocused$.pipe(
+  withLatestFrom(HomeTopMenuItemRegistry.observable$),
+  filter(([id, homeId]) => id === homeId)
+);
+
+/// SCREEN_PICKER
+export const ScreenPickerContentContainerRegistry = createFocusableRegistry();
+
+/// SEARCH_INPUT
+export const SearchInputRegistry = createFocusableRegistry();

package/appUtils/keyCodes/keys/keys.web.ts

@@ -10,10 +10,7 @@ import { Platform } from "react-native";
  * platformKeys[Platform.OS] should only include keys
  * that are unique to that platform, i.e. Exit: { keyCode: 10182 }
  */
-export const KEYS = Object.assign(
-  platformKeys["web"],
-  platformKeys[Platform.OS]
-);
+export const KEYS = Object.assign(platformKeys.web, platformKeys[Platform.OS]);
 
 export const ARROW_KEYS = [
   KEYS.ArrowUp,

package/appUtils/orientationHelper.ts

@@ -1,5 +1,5 @@
 import * as ReactNative from "react-native";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { isTV, platformSelect } from "../reactUtils";
 import { useIsTablet } from "../reactHooks";
@@ -184,9 +184,7 @@ export const getScreenOrientation = ({
 
 export const useGetScreenOrientation = (screenData) => {
   const isTablet = useIsTablet();
-
-  const { appData } = usePickFromState(["appData"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
+  const { isTabletPortrait } = useAppData();
 
   return getScreenOrientation({
     screenData,

package/appUtils/platform/platformUtils.ts

@@ -79,7 +79,7 @@ export class ClosedCaptioningManager {
   private constructor() {
     this.initialize();
 
-    window["vizioDebug"] = {
+    window.vizioDebug = {
       setCCEnabled: (isCCEnabled: boolean) => {
         this.ccState$.next(isCCEnabled);
       },

package/appUtils/playerManager/player.ts

@@ -250,6 +250,10 @@ export class Player {
       return false;
     }
 
+    if (!Number.isFinite(duration)) {
+      return this.getSeekableDuration() > 0;
+    }
+
     return duration > 0;
   };
 

package/appUtils/playerManager/playerNative.ts

@@ -15,6 +15,22 @@ const logger = createLogger({
 
 const { log_warning } = logger;
 
+interface PlayerMethods {
+  seeking?: (position: number) => void;
+  forward?: (deltaTime: number) => void;
+  rewind?: (deltaTime: number) => void;
+  startSleepTimer?: (sleepTimestamp: number) => void;
+  selectTrack?: (
+    selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
+  ) => void;
+  setPlaybackRate?: (rate: number) => void;
+  appStateChange?: (appState: string, previousAppState: string) => void;
+  closeNativePlayer?: () => void;
+  togglePlayPause?: () => void;
+}
+
+type PlayerComponent = ReactComponent<PlayerRefProps> & PlayerMethods;
+
 type PlayerPlugnId = "QuickBrickPlayerPlugin" | "KalturaPlayerPlugin";
 
 type Props = {
@@ -62,7 +78,7 @@ export class PlayerNative extends Player {
     return this.playerState.contentPosition;
   };
 
-  currentPlayerComponent = (): ReactComponent<PlayerRefProps> =>
+  currentPlayerComponent = (): PlayerComponent | null =>
     this.playerComponent?.current;
 
   getState = () => this.playerState;
@@ -121,7 +137,7 @@ export class PlayerNative extends Player {
 
       this.playerState.seekPosition = newPosition;
 
-      this.currentPlayerComponent()?.["seeking"](this.playerState.seekPosition);
+      this.currentPlayerComponent()?.seeking?.(this.playerState.seekPosition);
     }
 
     this.logState(PlayerModuleFuncNames.seekTo, { position });
@@ -135,7 +151,7 @@ export class PlayerNative extends Player {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.forward, deltaTime)) {
       // Kaltura does not have yet this implementation, use legacy code
 
-      this.currentPlayerComponent()?.["forward"](deltaTime);
+      this.currentPlayerComponent()?.forward?.(deltaTime);
     }
 
     this.notifyPlayHeadPositionUpdate();
@@ -151,7 +167,7 @@ export class PlayerNative extends Player {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.rewind, deltaTime)) {
       // Kaltura does not have yet this implementation, use legacy code
 
-      this.currentPlayerComponent()?.["rewind"](deltaTime);
+      this.currentPlayerComponent()?.rewind?.(deltaTime);
     }
 
     this.notifyPlayHeadPositionUpdate();
@@ -178,7 +194,7 @@ export class PlayerNative extends Player {
         sleepTimestamp
       )
     ) {
-      this.currentPlayerComponent()?.["startSleepTimer"](sleepTimestamp);
+      this.currentPlayerComponent()?.startSleepTimer?.(sleepTimestamp);
     }
   };
 
@@ -195,11 +211,11 @@ export class PlayerNative extends Player {
   selectTrack = (
     selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
   ) => {
-    this.currentPlayerComponent()?.["selectTrack"]?.(selected);
+    this.currentPlayerComponent()?.selectTrack?.(selected);
   };
 
   setPlaybackRate = (rate: number) => {
-    this.currentPlayerComponent()?.["setPlaybackRate"]?.(rate);
+    this.currentPlayerComponent()?.setPlaybackRate?.(rate);
   };
 
   getPluginConfiguration = () => {
@@ -209,24 +225,17 @@ export class PlayerNative extends Player {
   getProps = () => (this.currentPlayerComponent() as any)?.props;
 
   appStateChange = (appState, previousAppState) => {
-    this.currentPlayerComponent()?.["appStateChange"]?.(
-      appState,
-      previousAppState
-    );
+    this.currentPlayerComponent()?.appStateChange?.(appState, previousAppState);
   };
 
   closeNativePlayer = () => {
-    // The player component ref may be null (for example, when the native player view is not mounted),
-    // so calling closeNativePlayer on the component is best‑effort only. We cannot use invokeNativeFunction
-    // here because it prepends the view id, while the native closeNativePlayer implementation does not
-    // expect a view id argument. As a reliable fallback we always call stopBackgroundPlayback on the
-    // native module to ensure background playback is stopped.
-    this.currentPlayerComponent()?.["closeNativePlayer"]?.();
+    // TODO: Delete, does not work (component is null)
+    this.currentPlayerComponent()?.closeNativePlayer?.();
     this.getPlayerModule()?.stopBackgroundPlayback?.();
   };
 
   togglePlayPause = () => {
-    this.currentPlayerComponent()?.["togglePlayPause"]?.();
+    this.currentPlayerComponent()?.togglePlayPause?.();
   };
 
   onVideoLoad = (event) => {
@@ -294,19 +303,19 @@ export class PlayerNative extends Player {
   isFullScreenSupported = (): boolean => {
     const config = this.getConfig();
 
-    const disableFullScreen = config?.["disable_fullscreen"];
+    const disableFullScreen = config?.disable_fullscreen;
 
     if (disableFullScreen) {
       return false;
     }
 
-    const isFullScreenAudioPlayer = config?.["full_screen_audio_player"];
+    const isFullScreenAudioPlayer = config?.full_screen_audio_player;
 
     return !(isFullScreenAudioPlayer && this.isAudioItem());
   };
 
   supportsNativeControls = (): boolean =>
-    toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
+    toBooleanWithDefaultFalse(this.getConfig()?.supports_native_controls);
 
   supportNativeCast = (): boolean =>
     toBooleanWithDefaultFalse(

package/appUtils/playerManager/usePlayerState.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Player } from "./player";
 import { usePlayer } from "./usePlayer";
 
-type PlayerState = {
+export type PlayerState = {
   currentTime: number;
   duration: number;
   seekableDuration: number;
@@ -10,6 +10,8 @@ type PlayerState = {
   isPaused: boolean;
   isBuffering: boolean;
   isReadyToPlay: boolean;
+  trackState?: QuickBrickPlayer.TracksState;
+  isAd: boolean;
 };
 
 export const usePlayerState = (
@@ -24,6 +26,8 @@ export const usePlayerState = (
     isPaused: null,
     isBuffering: false,
     isReadyToPlay: false,
+    trackState: null,
+    isAd: false,
   });
 
   const player: Player = usePlayer(playerId);
@@ -37,6 +41,8 @@ export const usePlayerState = (
       isPaused: player.isPaused(),
       isBuffering: player.isBuffering(),
       isReadyToPlay: player.isReadyToPlay(),
+      trackState: player.getTracksState(),
+      isAd: player.isAd(),
     });
   }, [player]);
 
@@ -54,10 +60,16 @@ export const usePlayerState = (
           onPlayerPause: onPlayerChangeState,
           onPlayerResume: onPlayerChangeState,
           onPlayerSeekComplete: onPlayerChangeState,
+          onTracksChanged: onPlayerChangeState,
+          onAdBreakBegin: onPlayerChangeState,
+          onAdBreakEnd: onPlayerChangeState,
+          onAdBegin: onPlayerChangeState,
+          onAdEnd: onPlayerChangeState,
+          onAdError: onPlayerChangeState,
         },
       });
     }
-  }, [player]);
+  }, [listenerId, onPlayerChangeState, player]);
 
   return state;
 };