@applicaster/zapp-react-native-ui-components 16.0.0-rc.3 → 16.0.0-rc.31

package/Contexts/CachedDimensionsContext/index.ts

@@ -1,6 +1,7 @@
 import { create, useStore } from "zustand";
 import { produce } from "immer";
 import { useCallback, useMemo } from "react";
+import { last } from "@applicaster/zapp-react-native-utils/utils";
 
 type Dimensions = {
   width: Option<number>;
@@ -10,14 +11,17 @@ type Dimensions = {
 type DimensionsState = {
   dimensions: Record<string, Dimensions>;
   setCachedDimensions: (id: string, dimensions: Dimensions) => void;
+  ids: string[];
 };
 
 const dimensionsStore = create<DimensionsState>((set) => ({
   dimensions: {},
+  ids: [],
   setCachedDimensions: (id, dimensions) =>
     set(
       produce((draft) => {
         draft.dimensions[id] = dimensions;
+        draft.ids.push(id);
       })
     ),
 }));
@@ -28,7 +32,7 @@ const initialDimensions = () => ({
 });
 
 export const useCachedDimensions = (id: string) => {
-  const { dimensions, setCachedDimensions } = useStore(
+  const { dimensions, setCachedDimensions, ids } = useStore(
     dimensionsStore
   ) as DimensionsState;
 
@@ -40,11 +44,22 @@ export const useCachedDimensions = (id: string) => {
     setCachedDimensions(id, newDimensions);
   }, []);
 
+  const getLastCachedDimensions = useCallback(() => {
+    const previousId = last(ids);
+
+    if (!previousId) {
+      return undefined;
+    }
+
+    return dimensions[previousId];
+  }, [dimensions, ids]);
+
   return useMemo(
     () => ({
       getCachedDimensions,
       setCachedDimensions: handleSetCachedDimensions,
+      getLastCachedDimensions,
     }),
-    [getCachedDimensions, handleSetCachedDimensions]
+    [getCachedDimensions, handleSetCachedDimensions, getLastCachedDimensions]
   );
 };

package/Helpers/ComponentCellSelectionHelper/index.js

@@ -1,4 +1,3 @@
-import { sendTapCellEvent, sendTapMenuItem } from "../Analytics";
 import { getItemType } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 
@@ -12,7 +11,6 @@ export function onCellPress(
   itemIndex,
   layoutVersion = "v1"
 ) {
-  sendTapCellEvent(entry, component, headerTitle, itemIndex);
   const componentScreenType = screenTypeFromComponent(component);
   const entryScreenType = screenTypeFromEntry(entry);
   const itemType = getItemType(entry, layoutVersion);
@@ -37,7 +35,3 @@ function screenTypeFromComponent(component) {
 function screenTypeFromEntry(entry) {
   return entry && entry.screen_type;
 }
-
-export function onMenuItemFocus({ item, index, isHome }) {
-  sendTapMenuItem({ item, index, isHome });
-}

package/Helpers/index.js

@@ -1,42 +1,9 @@
-export const ASSETS = {
-  APP_BACKGROUND_IMAGE: "app_background_image",
-};
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-export const ANALYTICS_CORE_EVENTS = {
-  TAP_CELL: "Tap Cell",
-  PLAY_VOD_ITEM: "Play VOD Item",
-  VOD_ITEM_PLAY_WAS_TRIGGERED: "VOD Item: Play Was Triggered",
-  CHANNEL_ITEM_PLAY_WAS_TRIGGERED: "Channel Item: Play Was Triggered",
-  PROGRAM_ITEM_PLAY_WAS_TRIGGERED: "Program Item: Play Was Triggered",
-  TAP_MENU_ICON: "Tap Menu Item",
-  HOME_SCREEN_VIEWED: "Home Screen: Viewed",
-  ITEM_NOT_AVAILABLE: "N/A",
-};
-
-export const ANALYTICS_ENTRY_EVENTS = {
-  ITEM_TYPE: "Item Type",
-  ITEM_TITLE: "Item Name",
-  ITEM_ID: "Item ID",
-  ITEM_LINK: "Item Link",
-  ITEM_INDEX: "Item Number",
-  ITEM_TIME_PLAYED: "Item Total Time Played",
-  ITEM_TOTAL_TIME_PLAYED: "Item Total Time Played",
-  ITEM_PLAY_COMPLETED: "Completed",
-  ITEM_CUSTOM_PROPERTY: "Custom Property",
-};
-
-export const ANALYTICS_COMPONENT_EVENTS = {
-  COMPONENT_ID: "Component ID",
-  COMPONENT_TYPE: "Component Type",
-  CELL_STYLE: "Cell Style",
-  HEADER_TITLE: "Header Name",
-  COMPONENT_SOURCE: "Component Source",
-};
-
-export const ANALYTICS_MENU_ITEM_EVENTS = {
-  ITEM_TYPE: "Item Type",
-  ITEM_TITLE: "Item Name",
-  ITEM_ID: "Item ID",
-  ITEM_HOME_SCREEN: "Home Screen",
-  ITEM_INDEX: "Item Number",
+export const ASSETS = {
+  APP_BACKGROUND_IMAGE: platformSelect({
+    tvos: "app_background_image",
+    android_tv: "tv_app_background",
+    amazon: "tv_app_background",
+  }),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.3",
+  "version": "16.0.0-rc.31",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.3",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.3",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.3",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.3",
+    "@applicaster/applicaster-types": "16.0.0-rc.31",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.31",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.31",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.31",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/Layout/TV/LayoutBackground.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import { getBackgroundImageUrl } from "../utils";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import {
-  selectRemoteConfigurations,
-  useAppSelector,
-} from "@applicaster/zapp-react-native-redux";
-
-export const LayoutBackground = ({
-  Background,
-  children,
-}: {
-  Background: React.ComponentType<any>;
-  children: React.ReactNode;
-}) => {
-  const theme = useTheme();
-
-  const remoteConfigurations = useAppSelector(selectRemoteConfigurations);
-
-  const backgroundColor = theme.app_background_color;
-  const backgroundImageUrl = getBackgroundImageUrl(remoteConfigurations);
-
-  return (
-    <Background
-      backgroundColor={backgroundColor}
-      backgroundImageUrl={backgroundImageUrl}
-    >
-      {children}
-    </Background>
-  );
-};

package/Components/Screen/utils.ts

@@ -1,16 +0,0 @@
-import { map, split, replace, compose, trim } from "ramda";
-
-function colorIsNotTransparent(color) {
-  const layers = compose(
-    map(trim),
-    split(","),
-    replace(")", ""),
-    replace("rgba(", "")
-  )(color);
-
-  return Number(layers?.[3]) > 0;
-}
-
-export function isValidColor(string) {
-  return string && string !== "transparent" && colorIsNotTransparent(string);
-}

package/Helpers/Analytics/index.js

@@ -1,95 +0,0 @@
-import * as R from "ramda";
-import { postAnalyticEvent } from "@applicaster/zapp-react-native-tvos-app/AnalyticsManager";
-import { extensionsEvents } from "@applicaster/zapp-react-native-utils/analyticsUtils/AnalyticsEvents/helper";
-import {
-  ANALYTICS_CORE_EVENTS,
-  ANALYTICS_ENTRY_EVENTS,
-  ANALYTICS_COMPONENT_EVENTS,
-  ANALYTICS_MENU_ITEM_EVENTS,
-} from "../";
-
-export function sendTapCellEvent(item, component, headerTitle, itemIndex) {
-  const itemReadableIndex = itemIndex + 1;
-
-  const analyticsProperties = R.compose(
-    R.reject(R.isNil),
-    R.merge(eventForEntry(item, itemReadableIndex))
-  )(eventForComponent(component, headerTitle));
-
-  postEvent(ANALYTICS_CORE_EVENTS.TAP_CELL, analyticsProperties);
-}
-
-export function sendTapMenuItem({ item, index, isHome }) {
-  const analyticsProperties = R.compose(R.reject(R.isNil))(
-    eventForMenuItemEntry({ item, index, isHome })
-  );
-
-  postEvent(ANALYTICS_CORE_EVENTS.TAP_MENU_ICON, analyticsProperties);
-
-  if (isHome) {
-    postEvent(ANALYTICS_CORE_EVENTS.HOME_SCREEN_VIEWED, null);
-  }
-}
-
-function postEvent(event, properties) {
-  postAnalyticEvent(event, properties);
-}
-
-function eventForEntry(item, itemIndex) {
-  const {
-    title,
-    type: { value: valueType },
-    id,
-  } = item;
-
-  const analyticsCustomProperties = extensionsEvents(item.extensions);
-
-  const analyticsEvents = {
-    [ANALYTICS_ENTRY_EVENTS.ITEM_TYPE]: valueType,
-    [ANALYTICS_ENTRY_EVENTS.ITEM_TITLE]: title,
-    [ANALYTICS_ENTRY_EVENTS.ITEM_ID]: id,
-    [ANALYTICS_ENTRY_EVENTS.ITEM_INDEX]:
-      (itemIndex && itemIndex.toString()) || null,
-  };
-
-  if (analyticsCustomProperties) {
-    analyticsEvents.analyticsCustomProperties = analyticsCustomProperties;
-  }
-
-  return analyticsEvents;
-}
-
-function eventForComponent(
-  component,
-  headerTitle, // Zapp Pipes data passed for group components
-  zappPipesData = null
-) {
-  const { id, component_type, styles, data } = component;
-  const { cell_style } = styles;
-  const source = data?.source || zappPipesData?.data?.url || null;
-
-  return {
-    [ANALYTICS_COMPONENT_EVENTS.COMPONENT_ID]: id,
-    [ANALYTICS_COMPONENT_EVENTS.COMPONENT_TYPE]: component_type,
-    [ANALYTICS_COMPONENT_EVENTS.CELL_STYLE]:
-      cell_style || ANALYTICS_CORE_EVENTS.ITEM_NOT_AVAILABLE,
-    [ANALYTICS_COMPONENT_EVENTS.COMPONENT_SOURCE]:
-      (source && encodeURIComponent(source)) || null,
-    [ANALYTICS_COMPONENT_EVENTS.HEADER_TITLE]: headerTitle,
-  };
-}
-
-function eventForMenuItemEntry({ item, index, isHome }) {
-  const { title, type, id } = item;
-
-  const itemReadableIndex = index + 1;
-
-  return {
-    [ANALYTICS_MENU_ITEM_EVENTS.ITEM_INDEX]:
-      (itemReadableIndex && itemReadableIndex.toString()) || null,
-    [ANALYTICS_MENU_ITEM_EVENTS.ITEM_TYPE]: type,
-    [ANALYTICS_MENU_ITEM_EVENTS.ITEM_TITLE]: title,
-    [ANALYTICS_MENU_ITEM_EVENTS.ITEM_ID]: id,
-    [ANALYTICS_MENU_ITEM_EVENTS.ITEM_HOME_SCREEN]: isHome ? "YES" : "NO",
-  };
-}