@applicaster/zapp-react-native-utils 15.0.0-alpha.8680244503 → 15.0.0-alpha.9300744523

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,189 @@ 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 firstFocusableViewRegistrationFactory = () =>
+  focusableViewRegistrationSubject$.pipe(
+    take(1), // we care about only first FocusableView registration
+    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,
+      })
+    )
+  );
+
+// 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/focusManager/aux/index.ts

@@ -49,7 +49,7 @@ export const findSelectedMenuId = (
 ) => {
   const sectionName = QUICK_BRICK_NAVBAR_SECTIONS[sectionKey];
 
-  return pathOr(
+  return pathOr<string | undefined>(
     undefined,
     ["children", index, "id"],
     focusableTree.find(sectionName)

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -678,6 +678,22 @@ function getPlayerConfiguration({ platform, version }) {
   }
 
   if (isMobile(platform)) {
+    localizations.fields.push(
+      {
+        type: "text_input",
+        label: "Restrict playback on mobile networks alert title",
+        key: "mobile_connection_restricted_alert_title",
+        initial_value: "Restricted Connection Type",
+      },
+      {
+        type: "text_input",
+        label: "Restrict playback on mobile networks alert message",
+        key: "mobile_connection_restricted_alert_message",
+        initial_value:
+          "This content can only be viewed over a Wi-Fi or LAN network.",
+      }
+    );
+
     general.fields.push(
       {
         section: "Default Timestamp Type",
@@ -1200,40 +1216,35 @@ function getPlayerConfiguration({ platform, version }) {
             label: "Playback Speed 0.8x",
             type: "uploader",
             label_tooltip: "Playback Speed 0.8x",
-            initial_value:
-              "data:image/png;base64,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",
+            initial_value: null,
           },
           {
             key: "speed_1",
             label: "Playback Speed 1x",
             type: "uploader",
             label_tooltip: "Playback Speed 1x",
-            initial_value:
-              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAI4SURBVHgB7dzhcRJBGIDhT8cCkg6SDmIHsQNLiBUYKwAqUCtIC5ZACVqBdIAdxN3JMSLecXcE8Tt5npkdJlxyf97ZcLcLRAAAAAAAAAAAAAAAAAAAAAAAAADAMb2IiViv17fl4aGMq45fub68vFwFv3kVyZWwF+VhVsZ9MFrqwANmLT1SBm5mbQ37NniWl5FMifu+PHwPcY8izQwuYa/iadbeBkeTaQbfxf64P8r4GoyS7l90h89lXJfxLRgl+23Sqox35f52WX8o/8aDcTLP4EUZrzdxOUzGGbws40MJ6/X2CDIFrhdRNeyn4GjSBBb275jKVTQHEvg/d/aB69Lo+sljGR/jADvnmEUiZx242a2qr/0XzVP35bmHkeeY7Zxj3pw3hXOfwTctz90NjdzEnbccuo0kzj1w1712b+Q9cfed9+TOOnCzSrboONwZuSfuopz3SyRx9hdZJcY8RkQeELfr2D/hNimGR55a3Cr9m+5OpcZpdqvabnNq5HpBdtPx5ynjVmbwlp6ZPLm4lcA7eiLvSh23ErjFwMjp41YCd3t85vEUBG7Rc7W8Mc+27txG4B0D426kjyzwlp64y47nU0cWuDFgEeNNdF94pY0scAxfoeq5uk4Z2Yb/yOXHqUW24X/A2vKAyGk+OGfDv13vIsaBy5onZ8P/T4NXqPZEtuGfwdaG/yp+vfF+HiNsRV5tnSPNhv9kvoSlaj75f9F2zBewAAAAAAAAAAAAAAAAAAAAAAAAwHT8BNhH51wNSx95AAAAAElFTkSuQmCC",
+            initial_value: null,
           },
           {
             key: "speed_1_2",
             label: "Playback Speed 1.2x",
             type: "uploader",
             label_tooltip: "Playback Speed 1.2x",
-            initial_value:
-              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUjSURBVHgB7d3bUeNIFAbgA7Xv2EUCmgiWjWBNBAwRYCKYdQQrIliIYEUEw0awymDIYDQBUFC8g+eccWsulPomteTu1v9VdZlSGyP0W1KrWxciAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgPgc0Mw8Pj4u+KUt4mm5XDaUqVED5oX5gV/ea6o3vGDvaQI8Hyt+ueAir4XmbTIvNZebnAIfJWBeoCf88g/tFqjOKS/ImkbE8/FezUdBfu5o9wVsKHGHFJBs/rjIAv1E5nBHpebjX/7xI/mHK+SL8Zk/429K3G8UiNoMykItaI/UPvZ/Lic0XMmfR7wmX1GiBq/BP621slAL2j9Z60KE25KQ/6JEDdoHD9jHieD7YJ6fNe22IjpPXG5p16Bq1DT5MpyReZciv/eO5/eJEtN7E63C/Wh5myyQBU1Hu888ODi42263lx0h1Vyu1ZdDvqxd8yvTZC0uKTFDNtGm4GQhbrjc0ERUy73QVNeLxeLctAZyXcUv56R3QQkK2or+9oGHhxXtNmfXNK2Voe6SHKhdxq2muuAvUUGJCRlww+X06Ojock/7qj810+89j2fvDHUFJSZUwLIp/mPsjgsL3S7jC/mZpHdtKkOPg2VhbPYcbEuOVbs2rw35mbJROLohAdeqYRKFgF+ywlCX3GFS7010xiMwZ5rpzVSDIyEFb0WnTLWS1111fHRQU4IQ8K+0vWCvr69J9kcjYEWNHK001c5jxNIvz2XLpfdolIyEtZ/x/Pw8qIMFAdP3ExNKTXVDjl2UqruzHZgoaDdQ4RWyGuZct5/x8vJSqRGyXmYfMC88WUNMvW6nHh03q45pziG/Cdf2uU5mHbAKtzK8xfesjloz3RqyIVzRu/U+24Adwr3y7U+XfgFujOn6srUhW8K9GnJIOsuAHcMtqYfj4+O1T8gO4ZY0wOwCdgj3duhCdQ157HDFrAJ2DHdNATiELCcmrjX1QcIVswl4ynBblpB1540FC1fMImB1nFsZ3hI83JYl5LeChiuyD1jt70yt4dHCbTmGHDxckXXAKtzS8JbRw23xYMXW8hZbfb+/S5mKKVxLa7nl3a3pItiVDaGpoTs5NVf6YeW8qjuP300t3FbwKymiDLgrIJ4m3XXWfuGEwpX/p6slHTTk6AJWIzJlR5UsDDnR/tTwu7ZwGy6Vuo6qF9dTg1w6MR4eHireN3cNBwYLOcY1+MxQt5Khs661WF0/VJJZQbtrqPpquLyzvcm1h0pa1xwyjRlyjI0s29jnief0Sfl2P/r2XfuKMWDbeczRnvimdi9rTbX2ONch5N5f3hgDrgx1N8u4r/BbaaZbOzEsIRfUU3QBq0aMXEvUvKmS1m/s1+nWHdOce6gMIffeao3dyJJj10ZTp5v+beCcN0s17farsk9uHFqvFenPqAjFuPVQ813wjx/UJO+TBiRk/gz5Oxfq7w0a8AcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANif7B8Q/dOlJHI7iEJNvlcl+8tCsg5Y3R/Ldm1QuUz46aI2ud9lx+XCr1HubhOLLNdgh6eQdjn3uZNPKnIN+DP5XzQtl6ha77+Rmuw20eoOOgX5K4bcfSdWOe6Dh9yMJYobuYSUY8BDnj2Y1XMLRY4BD7lJS3LPJrTJMeAht1lK7tmENmhF/4BWdEI25C/L3qwsA1YdFj6BXcX0LOSQcu+LLvnF1g258b2XVUrmMppUcvmdfhznNlz+43Kd+2jSV0z9PFgMpokeAAAAAElFTkSuQmCC",
+            initial_value: null,
           },
           {
             key: "speed_1_5",
             label: "Playback Speed 1.5x",
             type: "uploader",
             label_tooltip: "Playback Speed 1.5x",
-            initial_value:
-              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVySURBVHgB7Z2NVeQ2EMcHXgrYrSCmghwVxFdBuApuqSBQAaaCgwrgKoBUgFPBkQrOqQDSAGTmeZbbt2d9WmZl7f/3nvAi2bLX/5U8Gn2YCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID8OKDCeHp6WvBmQYlZLpcdzZBfaCL0Rv/JoR5K5xv2kaZhxeELJYa/z9EcRZ5EYL4ZJ7y5oQlKkge7OGe2JBWYha2oF7am3VEReOOQEsHiSnX8jXYrrvArgTdGl+BMSu0mqKI3GCUwi3vBmzPK66ZWQ5GHh4e3Ly8v/1I8zzRDoptJLO4V9VZyFGyRTtJE4+t6NSTN0goey5hnsK3UdhykGdTSO6KPi0H2UVwhmZGlSDV2yTdTSktL709liO9oT0nZTGo5nO64pJhqlY72lBQCr0vtFe2eyhD/H+0pYwVuafeldhOU4C3GCNxkaLhUhvhu8x/1k9e6v3yWWuhR9ivNGIsWONMbYfJidfKHha15I2332pQB79Py5it/v1sqgNRW9K4xNt1YuDvePJDb4ybpN7z/d1uzay6UJnBliJfuwxMKz+ub9ozNln0pwRXF53fHIn/wPUA6XZ56XjlE9Utv5XFBIyhG4IDqdG1QtRp8fMx3apj5XIM0F9f7nnHcDQWggm7m0XDciiIpqQRXjvSWevepeNmOZUSJhiXHnZK9KVVRb5y5qAfiVr4iq7jNdjx3lPxOkRQjsLpGjzl84nDJ4Z76kiqcq5gth+eBY2/Fvcq9TV8tp1h5lOLOcqxVZJO4Al/X3xTJpIPu+KKNVutUvUljsV0z9T+UK8fxDZlLu/yQTgeOMYpLvZfQlOakNCMrBZeWtD/IgYphyuOnkjyluAIE3kKr+taQ7GVN+4rsEPd6rLgCBB7mH0P8wseaFjxElvFrjSFdPGlnlAAIPMyjJc17eJJDZFNtIOKuKBEQeGIcIm+TVFxhspkN743F0fE81DRyUJkSYjpZRGS+Pvloa0snF1coRmDmuyH+mvqRnyGYHAu2qtvF68j0KEqqojtD/GcKQGuCeiiNPUpRAjus5TXeHq8QshVY+m7FaaCh9jjE5O0Ry9erBKuF/GBKd3i6THn6iLsmuchZCqxfUm70hYYHj16VW0vaF5fIKq70GVeGXbrQkaIOcU21QVKRsxNYb8pqIKmxieRwUAgi8s12bSBVsp5TnuG15XhfS3idr01cMaiOKcDjFUt2vmgZSUH2UnRE5vNJ21LO6dNWXVvWPvtehzgePMRdbewr+wX5rkPIsYquItPkRyPV3jn54bsSgOTZkCch4gqhvutQchS4s6Q5rVgdLCddhqFt3yHEqPro245WC7wx5WVq53qIvKJIchT4OjLtDb5h0hd8fHBwcE9xiKDSNbgKdJLUhninEyPSrekkO4G1v3Xoi56HDGUVj9NisZCSLKM4pCT6CNXquY+WcTM1uoE4bw+VReRoB8vURlZNhuemSyyt7uSXK8/J+wh341CeH/R6NkuE5NtxaBOd44T6UZxy3VFdfmp4fdY8cpkWBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiW60WmRKfAyBvaZEpJpdGPGi5Le0fDNkULrG9Edc3rkZeLBM3enxPFLoS2sbC2i2bsquo5U2QJ1gnToTPjP+m84qIoVWDbOh8mrOt/zJXiqmjbnGQHled6XLOixGdw9HIHI4/NkhIF9l7uN/GxWVKiwGOWYUixMk9WlCjwmBVhxxybJbCifwArekb4rna3SZHerCIFVodFiGCXy0JeJ7tN6b7ohtyvpDsveR2qfelNajj8Rj/auR2Hvzhcld6b9D8EYh6U+B0kAAAAAABJRU5ErkJggg==",
+            initial_value: null,
           },
           {
             key: "speed_2",
             label: "Playback Speed 2x",
             type: "uploader",
             label_tooltip: "Playback Speed 2x",
-            initial_value:
-              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQnSURBVHgB7d2PUdRAFMfxh2MBUIGxArECjwqECjwqUCowV4FYgdABVCAdSAekg7ME35pFgnOb3ZDAvmy+n5lMGJLL3dzvkuyfZCMCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA2LMnM7Hdbvd11p2ag4ODRtDLdMAa6kpnH3U61qkKrHbrp0sN/EbwiMmAfbBfdVrJMI1OZxr0leAvcwFruC7YWsY515DPBLYC1nC/6eyLTONCQz6VhXslRvg9d6pwnbX/wSyaiT1Yg6h0dhdZzZ1Xr6U9zzqHOn2QtgDW52jJhS8rAf/Q2Tqw2JWQT0JVIv/j+CnhUvaNvvZIFip7wL5+uw0sbqTdA5vINiqd/ZK2fryLbuLgtyyQhXPwYc+yTUpjhl/ne88qK1koCwGvQgs0uAtJ17duJQtlIeDQYfVWBojs6fuyUK8lP1c63hXmlOfMRZ5/newBT1WF0YJW37m8kYUy09Axgb6ABx3uSzKb7sI+vqrlqknVjsXJ9WC/HRlTpZpiG1MqZQ92zZxVYNmlJPBNpdv2z6c1cfrXjdrG1Ga/B+sX+Vln54HFV7onnUh8GytpW8O6BnVWBFrjTnJ3Xc56D/YFq1C47hCZ2mW46/y99qGlfI5QU+uhZDbbgDtt0CFJrWBeqBAWDTnSjn4jmc0y4E64oQYMF+65JPJVtU1gcTDkSLgbC71YszsHJ/QeuWuz1vK0bdfSFth2eXROTgi3FgNmFXBCuLf6xb6Xce9RSyTkuYTrzOmyWVdg6Tssu/Po0RT1z0jIjYR/YKbCdWYR8EuG23nPWsIh72IuXMd8wDnC7bx3LWkhmwzXsX7he7ZwO5+hlv6QzYbrmK0mWQjXezNyeVZW72wwEW6ktNxl9hpsc3uwfqmfZF7hOsnNmi/NVMA+3AsJh9tI24CfM9ybwP9Nhmzpzob7cEMaSbiEdoLPEWvEcH3Lg5s1c7Fy4Xss3PueoUaeKKVdeEgL1ZBmzZwsXPi+kv5eoUnoF74X+Rx9N77trArNIWQLh+hKMtOgjmVguI7/f9/h+lgyK+miuzGqwP+jjRiRkOnwN2JXh39yC1VPyFeSGQHLvwKYu3bLBd1IOwxELQP49U//28atZGahkFXJC9wcNvA+JwAAAAAAAAAAAAAAAAAAAAAAAIxWxIjvffytMW5M6e4ziO+fOTxkRNpZKjrgyGDh92oNeSOFKvbuQj9Ef8qQwrVft0hF7sEa2FpnQwdDyT78/nMoNeA7GT40RKMBv5XCFHeI9oO6VDJc5V9blBLPwWPGxcg+psbUSgx4X55uzGtNKjHgMcMcPvfItS+uxIDHDHySfdCUqVGKfkApekZSn3jWVWRrVpEB+waLIYFtSh1mqfS26FriD9U4G/KUtLlZSm9SrdM7eajnNjpd63Reem/SH2FDq35f8ateAAAAAElFTkSuQmCC",
+            initial_value: null,
           },
           {
             key: "sleep_timer",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "15.0.0-alpha.8680244503",
+  "version": "15.0.0-alpha.9300744523",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,13 +27,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.8680244503",
+    "@applicaster/applicaster-types": "15.0.0-alpha.9300744523",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",
+    "handlebars": "4.7.8",
     "memoizee": "0.4.15",
-    "prop-types": "^15.0.0",
-    "react-native-handlebars": "^5.0.0-alpha.1"
+    "prop-types": "^15.0.0"
   },
   "peerDependencies": {
     "@applicaster/zapp-pipes-v2-client": "*",

package/reactHooks/feed/__tests__/{useInflatedUrl.test.ts → useInflatedUrl.test.tsx}

@@ -1,3 +1,34 @@
+import React from "react";
+
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+  useGetUrlInflater,
+} from "../useInflatedUrl";
+
+import { reactHooksLogger } from "../../logger";
+
+jest.mock("../../navigation", () => ({
+  useRoute: () => ({ pathname: "/mock/path" }),
+}));
+
+// mock contexts hooks
+jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ZappPipesEntryContext: {
+    useZappPipesContext: () => [
+      { id: "entry-1", extensions: { showId: "A123" } },
+    ],
+  },
+  ZappPipesSearchContext: {
+    useZappPipesContext: () => ["user%20query"],
+  },
+  ZappPipesScreenContext: {
+    useZappPipesContext: () => [{ id: "screen-1" }],
+  },
+}));
+
 jest.mock("../../logger", () => ({
   reactHooksLogger: {
     warning: jest.fn(),
@@ -5,13 +36,6 @@ jest.mock("../../logger", () => ({
   },
 }));
 
-const {
-  getInflatedDataSourceUrl,
-  getSearchContext,
-} = require("../useInflatedUrl");
-
-const { reactHooksLogger } = require("../../logger");
-
 let mockStore;
 
 describe("getInflatedDataSourceUrl", () => {
@@ -188,3 +212,34 @@ describe("getSearchContext", () => {
     expect(result).toHaveProperty(mapping.queryParam.property, searchContext);
   });
 });
+
+describe("useGetUrlInflater", () => {
+  const { renderHook } = require("@testing-library/react-hooks");
+
+  it("returns original url when mapping is not provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: WrappedWithProviders,
+    });
+
+    const src = "https://foo.com/feed";
+    expect(result.current(src)).toBe(src);
+  });
+
+  it("inflates url using entry/search/screen contexts when mapping provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: ({ children }) => (
+        <WrappedWithProviders>{children}</WrappedWithProviders>
+      ),
+    });
+
+    const source = "https://foo.com/shows/{{showId}}?q={{q}}";
+
+    const mapping = {
+      showId: { source: "entry", property: "extensions.showId" },
+      q: { source: "search", property: "q" },
+    };
+
+    const url = result.current(source, mapping);
+    expect(url).toBe("https://foo.com/shows/A123?q=user%20query");
+  });
+});

package/reactHooks/feed/useInflatedUrl.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import * as R from "ramda";
 
 import {
@@ -169,7 +169,7 @@ const encodeIfNeeded: (string) => string = R.tryCatch(
 
 export function getSearchContext(
   searchContext: string,
-  mapping: ZappTypeMapping
+  mapping: Nullable<ZappTypeMapping>
 ) {
   if (!mapping) {
     return {};
@@ -183,31 +183,57 @@ export function getSearchContext(
   return { [property]: encodeIfNeeded(searchContext) };
 }
 
-export function useInflatedUrl({
-  feedUrl,
-  mapping,
-}: {
-  feedUrl?: string;
-  mapping?: ZappTypeMapping;
-}) {
+/**
+ * Hook returns a function that replace placeholders with context values
+ * @returns function that inflates urls based on contexts
+ */
+export const useGetUrlInflater = () => {
   const { pathname } = useRoute();
 
   const [entryContext] = ZappPipesEntryContext.useZappPipesContext(pathname);
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
-  const url = useMemo(
-    () =>
-      getInflatedDataSourceUrl({
+  const entryContextRef = useRef(entryContext);
+  entryContextRef.current = entryContext;
+
+  const screenContextRef = useRef(screenContext);
+  screenContextRef.current = screenContext;
+
+  const searchContextRef = useRef(searchContext);
+  searchContextRef.current = searchContext;
+
+  return useCallback(
+    (
+      feedUrl: Nullable<string>,
+      mapping?: Nullable<ZappTypeMapping>
+    ): Nullable<string> => {
+      return getInflatedDataSourceUrl({
         source: feedUrl,
         contexts: {
-          entry: entryContext,
-          screen: screenContext,
-          search: getSearchContext(searchContext, mapping),
+          entry: entryContextRef.current,
+          screen: screenContextRef.current,
+          search: getSearchContext(searchContextRef.current, mapping),
         },
         mapping,
-      }),
-    [entryContext, feedUrl, mapping, screenContext, searchContext]
+      });
+    },
+    []
+  );
+};
+
+export function useInflatedUrl({
+  feedUrl,
+  mapping,
+}: {
+  feedUrl?: string;
+  mapping?: ZappTypeMapping;
+}) {
+  const urlInflater = useGetUrlInflater();
+
+  const url = useMemo(
+    () => urlInflater(feedUrl, mapping),
+    [urlInflater, feedUrl, mapping]
   );
 
   return url;

package/reactHooks/navigation/index.ts

@@ -88,6 +88,10 @@ export function isNavBarVisible(
   if (route.startsWith("/hooks/")) {
     const module = screenData?.module;
 
+    if (module === undefined) {
+      return showNavBar;
+    }
+
     if (module?.presentFullScreen) {
       return false;
     }

package/reactHooks/screen/__tests__/useCurrentScreenData.test.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Provider } from "react-redux";
 import { renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 
 const mockStore = configureStore([thunk]);
 

package/reactHooks/screen/__tests__/useTargetScreenData.test.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Provider } from "react-redux";
 import { renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 
 const mockStore = configureStore([thunk]);
 

package/searchUtils/const.ts

@@ -0,0 +1,7 @@
+export const FOCUSABLE_GROUP_ID = "search-screen";
+
+export const FOCUSABLE_RESULTS_ID = "search-screen-results";
+
+export const SEARCH_BOX_GROUP_ID = "search_box_group_id";
+
+export const SEARCH_INPUT_FOCUSABLE_ID = "search_input_group_id";

package/searchUtils/index.ts

@@ -0,0 +1,3 @@
+import { SEARCH_INPUT_FOCUSABLE_ID } from "./const";
+
+export const isSearchInputId = (id) => id === SEARCH_INPUT_FOCUSABLE_ID;

package/stringUtils/index.ts

@@ -4,7 +4,7 @@ declare const global;
 import * as R from "ramda";
 import camelize from "camelize";
 // @ts-ignore
-import Handlebars from "react-native-handlebars";
+import Handlebars from "handlebars";
 
 global.Buffer = global.Buffer || require("buffer").Buffer;
 

package/testUtils/index.tsx

@@ -4,7 +4,7 @@ import React, { PropsWithChildren } from "react";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { View } from "react-native";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 import * as R from "ramda";
 
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";

package/utils/__tests__/mergeRight.test.ts

@@ -0,0 +1,48 @@
+import { mergeRight } from "../mergeRight";
+
+describe("mergeRight", () => {
+  test("merges two objects with no overlapping keys", () => {
+    const a = { x: 1, y: 2 };
+    const b = { z: 3 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).toEqual({ x: 1, y: 2, z: 3 });
+  });
+
+  test("overwrites keys from the second object", () => {
+    const a = { x: 1, y: 2 };
+    const b = { y: 10, z: 3 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).toEqual({ x: 1, y: 10, z: 3 });
+  });
+
+  test("does not mutate the original objects", () => {
+    const a = { x: 1 };
+    const b = { y: 2 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).not.toBe(a);
+    expect(result).not.toBe(b);
+    expect(a).toEqual({ x: 1 });
+    expect(b).toEqual({ y: 2 });
+  });
+
+  test("works with empty objects", () => {
+    expect(mergeRight({}, { a: 1 })).toEqual({ a: 1 });
+    expect(mergeRight({ a: 1 }, {})).toEqual({ a: 1 });
+    expect(mergeRight({}, {})).toEqual({});
+  });
+
+  test("works with nested objects (shallow merge only)", () => {
+    const a = { x: { nested: 1 }, y: 2 };
+    const b = { x: { nested: 10 }, z: 3 };
+
+    const result = mergeRight(a, b);
+
+    expect(result).toEqual({ x: { nested: 10 }, y: 2, z: 3 });
+  });
+});

package/utils/index.ts

@@ -18,6 +18,8 @@ export { take } from "./take";
 
 export { mapAccum } from "./mapAccum";
 
+export { mergeRight } from "./mergeRight";
+
 export {
   cloneDeep as clone,
   flatten,
@@ -42,6 +44,14 @@ export {
   partial,
   clamp,
   reverse,
+  takeRight,
+  fromPairs,
+  sortBy,
+  merge,
+  values,
+  head,
+  findIndex,
   set,
   compact,
+  identity,
 } from "lodash";

package/utils/mergeRight.ts

@@ -0,0 +1,5 @@
+import { assign } from "lodash";
+
+export const mergeRight = (a, b) => {
+  return assign({}, a, b);
+};

package/utils/path.ts

@@ -1,5 +1,8 @@
-import { get } from "lodash";
+import { pathOr } from "./pathOr";
 
-export const path = (route, record) => {
-  return get(record, route, undefined);
+export const path = <T = any>(
+  route: (string | number) | (string | number)[],
+  record: any
+) => {
+  return pathOr<T>(undefined, route, record);
 };