@applicaster/zapp-react-native-ui-components 16.0.0-alpha.6593152532 → 16.0.0-alpha.6918106967

package/Hooks/useEntryActionsExpander.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+import {
+  buildEntryActions,
+  EntryActionDeps,
+} from "@applicaster/zapp-react-native-utils/entryActions";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import {
+  useCurrentScreenData,
+  useScreenContext,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { RegisteredAction } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+/**
+ * Expands `entry.extensions.entry_action` into invokable actions, against the
+ * screen this hook is called from.
+ *
+ * Entry actions are data on the entry, not an installed capability, so there is
+ * nothing to look up by identifier: the surface showing the entry expands them.
+ * That also decides which screen they execute against — the one whose tree this
+ * hook runs in, rather than whichever screen happened to be current when a
+ * global provider was registered.
+ *
+ * Pass the result to `resolveActionIdentifiers` / `resolvePlayerActions` as
+ * `expandEntryActions`.
+ */
+export function useEntryActionsExpander(): (
+  entry: ZappEntry | ZappFeed
+) => RegisteredAction[] {
+  const { pathname } = useRoute();
+
+  const screenContext = useScreenContext();
+  const screenData = useCurrentScreenData();
+  const screenState = screenContext?.options;
+  const screenStateStore = useScreenStateStore();
+  const actionExecutor = React.useContext(ActionExecutorContext);
+
+  // Read through a ref so the returned expander keeps a stable identity: it
+  // feeds `useMemo` dependency lists on surfaces that re-resolve their actions
+  // on every registry change.
+  const depsRef = React.useRef<EntryActionDeps>();
+
+  depsRef.current = {
+    actionExecutor,
+    actionContext: {
+      screenData,
+      screenState,
+      screenRoute: pathname,
+      screenStateStore,
+      // From the screen context, the way `useCellClick` builds the same bag.
+      // The ZappPipes entry context is a route-keyed map, so reading `.data`
+      // off it was always undefined.
+      screenEntry: screenContext?.entry,
+    },
+  };
+
+  return React.useCallback(
+    (entry: ZappEntry | ZappFeed) => buildEntryActions(entry, depsRef.current),
+    []
+  );
+}

package/package.json

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

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/OfflineHandler/NotificationView/NotificationView.lg.tsx

@@ -1,112 +0,0 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useNetworkStatusLocalizations } from "./utils";
-
-type Props = {
-  children?: React.ReactNode;
-  hidden?: boolean;
-  online?: boolean;
-  previousOnline?: boolean;
-  dismiss: () => void;
-};
-
-const NOTIF_DURATION = 4500;
-
-const styles: Record<any, React.CSSProperties> = {
-  body: {
-    position: "absolute",
-    bottom: 0,
-    width: 1920,
-    height: 200,
-    background:
-      "linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,1) 49%, rgba(0,0,0,0.85) 100%)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    color: "#fff",
-    paddingBottom: 15,
-  },
-  title: {
-    fontSize: 28,
-    margin: 0,
-    padding: 0,
-  },
-  subtitle: {
-    fontSize: 20,
-    margin: 0,
-    padding: 0,
-  },
-};
-
-export const NotificationView = (props: Props) => {
-  const { children, hidden, dismiss, previousOnline, online } = props;
-
-  const theme = useTheme<BaseThemePropertiesTV>();
-  const storedLocalizations = useNetworkStatusLocalizations();
-
-  const [open, setOpen] = React.useState<boolean | null>(null);
-
-  const timeout = React.useRef<NodeJS.Timeout>();
-  const wentOnline = !previousOnline && props.online;
-
-  const onClose = () => {
-    setOpen(false);
-    dismiss();
-  };
-
-  const closeNotification = () => {
-    clearTimeout(timeout.current as NodeJS.Timeout);
-
-    timeout.current = setTimeout(() => {
-      setOpen(false);
-    }, NOTIF_DURATION);
-  };
-
-  const openNotification = () => {
-    if (!open && !hidden) {
-      setOpen(true);
-    }
-  };
-
-  const handleNotificationChange = () => {
-    if (open !== null) {
-      openNotification();
-    }
-
-    closeNotification();
-  };
-
-  React.useEffect(() => {
-    handleNotificationChange();
-  }, [hidden, online]);
-
-  const showOnlineMsg = wentOnline || online;
-
-  const MSG = showOnlineMsg
-    ? (theme?.online_notification_title ??
-      storedLocalizations?.online_notification_title)
-    : (theme?.offline_notification_title ??
-      storedLocalizations?.offline_notification_title);
-
-  const EXTRA_MSG = showOnlineMsg
-    ? (theme?.online_notification_subtitle ??
-      storedLocalizations?.online_notification_subtitle)
-    : (theme?.offline_notification_subtitle ??
-      storedLocalizations?.offline_notification_subtitle);
-
-  return (
-    <div onClick={onClose}>
-      {children}
-      {open ? (
-        <div style={styles.body}>
-          <div style={styles.title}>
-            <h2>{MSG}</h2>
-          </div>
-
-          <h4 style={styles.subtitle}>{EXTRA_MSG}</h4>
-        </div>
-      ) : null}
-    </div>
-  );
-};

package/Components/OfflineHandler/NotificationView/NotificationView.samsung.tsx

@@ -1,107 +0,0 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useNetworkStatusLocalizations } from "./utils";
-
-type Props = {
-  children?: React.ReactNode;
-  online?: boolean;
-  previousOnline?: boolean;
-  dismiss: () => void;
-};
-
-const DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE = 4500; // ms
-
-const styles: Record<any, React.CSSProperties> = {
-  body: {
-    position: "absolute",
-    top: 0,
-    width: 1920,
-    height: 200,
-    background:
-      "linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,1) 49%, rgba(0,0,0,0.85) 100%)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    color: "#fff",
-    paddingTop: 15,
-  },
-  title: {
-    fontSize: 28,
-    margin: 0,
-    padding: 0,
-  },
-  subtitle: {
-    fontSize: 20,
-    margin: 0,
-    padding: 0,
-  },
-};
-
-let timer: NodeJS.Timeout;
-
-export const NotificationView = (props: Props) => {
-  const { children, dismiss, previousOnline = true, online } = props;
-
-  const theme = useTheme<BaseThemePropertiesTV>();
-  const storedLocalizations = useNetworkStatusLocalizations();
-
-  const [shown, setShown] = React.useState<boolean>(false);
-
-  const onClose = () => {
-    setShown(false);
-    dismiss();
-  };
-
-  React.useEffect(() => {
-    if (previousOnline && online) {
-      return;
-    }
-
-    if (!previousOnline && !online) {
-      return;
-    }
-
-    if (previousOnline && !online) {
-      // went to offline
-      clearTimeout(timer);
-      setShown(true);
-    }
-
-    if (!previousOnline && online) {
-      // back to online
-      setShown(true);
-
-      timer = setTimeout(() => {
-        setShown(false);
-      }, DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE);
-    }
-  }, [online, previousOnline]);
-
-  const title = online
-    ? (theme?.online_notification_title ??
-      storedLocalizations?.online_notification_title)
-    : (theme?.offline_notification_title ??
-      storedLocalizations?.offline_notification_title);
-
-  const subtitle = online
-    ? (theme?.online_notification_subtitle ??
-      storedLocalizations?.online_notification_subtitle)
-    : (theme?.offline_notification_subtitle ??
-      storedLocalizations?.offline_notification_subtitle);
-
-  return (
-    <div onClick={onClose}>
-      {children}
-      {shown ? (
-        <div style={styles.body}>
-          <div style={styles.title}>
-            <h2>{title}</h2>
-          </div>
-
-          <h4 style={styles.subtitle}>{subtitle}</h4>
-        </div>
-      ) : null}
-    </div>
-  );
-};

package/Components/OfflineHandler/NotificationView/NotificationView.tsx

@@ -1,153 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import * as R from "ramda";
-import {
-  View,
-  Text,
-  Animated,
-  StyleSheet,
-  TouchableWithoutFeedback,
-} from "react-native";
-
-import { usePlugins } from "@applicaster/zapp-react-native-redux";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { useNotificationHeight } from "../utils";
-
-export const onlinePhrase = "You are back online";
-
-export const offlinePhrase = "No internet connection";
-
-const styles = StyleSheet.create({
-  notificationView: {
-    flex: 1,
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center",
-    top: 0,
-    left: 0,
-    right: 0,
-  },
-});
-
-type Props = {
-  children?: React.ReactNode;
-  hidden?: boolean;
-  online?: boolean;
-  dismiss: () => void;
-};
-
-type NumberBoolean = 0 | 1;
-
-const OFFLINE_EXPERIENCE = "offline-experience";
-
-export const NotificationView = ({
-  children,
-  hidden = true,
-  online = true,
-  dismiss,
-}: Props) => {
-  const plugins = usePlugins();
-  const { statusHeight, notificationHeight } = useNotificationHeight();
-
-  const offlinePlugin = R.find(
-    R.propEq("identifier", OFFLINE_EXPERIENCE),
-    plugins
-  );
-
-  const { useOfflineExperienceConfiguration } = offlinePlugin.module;
-
-  const {
-    configurationFields,
-    localizations,
-  }: {
-    configurationFields: OfflineExperiencePluginConfiguration;
-    localizations: OfflineExperienceLocalizations;
-  } = useOfflineExperienceConfiguration?.();
-
-  const [notificationOpacity, setNotificationOpacity] =
-    useState<NumberBoolean>(0);
-
-  const yPosition = useRef(new Animated.Value(0)).current;
-
-  const showNotification = () => {
-    setNotificationOpacity(1);
-
-    Animated.timing(yPosition, {
-      toValue: 1,
-      useNativeDriver: true,
-      duration: 300,
-    }).start();
-  };
-
-  const hideNotification = () => {
-    Animated.timing(yPosition, {
-      toValue: 0,
-      useNativeDriver: true,
-      duration: 300,
-    }).start(() => {
-      setNotificationOpacity(0);
-    });
-  };
-
-  useEffect(() => {
-    hidden ? hideNotification() : showNotification();
-  }, [hidden]);
-
-  const backgroundColor = online
-    ? configurationFields.offline_toast_online_background_color
-    : configurationFields.offline_toast_offline_background_color;
-
-  const animatedViewStyles = {
-    ...styles.notificationView,
-    transform: [
-      {
-        translateY: yPosition.interpolate({
-          inputRange: [0, 1],
-          outputRange: [-notificationHeight, 0],
-        }),
-      },
-    ],
-    opacity: notificationOpacity,
-    height: notificationHeight,
-    width: "100%",
-    backgroundColor,
-  };
-
-  const textStyles = {
-    color: online
-      ? configurationFields.offline_toast_message_online_font_color
-      : configurationFields.offline_toast_message_font_color,
-    fontFamily: platformSelect({
-      ios: configurationFields.offline_toast_message_ios_font_family,
-      android: configurationFields.offline_toast_message_android_font_family,
-    }),
-    fontSize: configurationFields.offline_toast_message_font_size,
-    lineHeight: configurationFields.offline_toast_message_line_height,
-    letterSpacing: platformSelect({
-      ios: configurationFields.offline_toast_message_letter_spacing_ios,
-      android: configurationFields.offline_toast_message_letter_spacing_android,
-    }),
-  };
-
-  const message = textTransform(
-    configurationFields.offline_toast_message_text_transform,
-    online
-      ? localizations.online_toast_message
-      : localizations.offline_toast_message
-  );
-
-  return (
-    <View style={StyleSheet.absoluteFill}>
-      {children}
-      <TouchableWithoutFeedback
-        style={styles.notificationView}
-        onPress={dismiss}
-      >
-        <Animated.View style={animatedViewStyles}>
-          <View style={{ height: statusHeight, backgroundColor }} />
-          <Text style={textStyles}>{message}</Text>
-        </Animated.View>
-      </TouchableWithoutFeedback>
-    </View>
-  );
-};

package/Components/OfflineHandler/NotificationView/__tests__/index.test.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import { Text, Animated } from "react-native";
-import { render } from "@testing-library/react-native";
-
-import {
-  NotificationView,
-  onlinePhrase,
-  offlinePhrase,
-} from "../NotificationView";
-
-jest.mock("@applicaster/zapp-react-native-redux", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
-  usePlugins: () => [
-    {
-      name: "offline experience",
-      identifier: "offline-experience",
-      type: "general",
-      module: {
-        useOfflineExperienceConfiguration: () => ({
-          configurationFields: {},
-          localizations: {
-            offline_toast_message: "No internet connection",
-            online_toast_message: "You are back online",
-          },
-        }),
-      },
-    },
-  ],
-}));
-
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 44 }),
-}));
-
-const dismiss = jest.fn();
-
-describe("NotificationView", () => {
-  it("Show online message when Online", () => {
-    const component = render(<NotificationView online dismiss={dismiss} />);
-
-    expect(component.UNSAFE_getByType(Text).props.children).toBe(onlinePhrase);
-  });
-
-  it("Show offline message when Online", () => {
-    const component = render(
-      <NotificationView online={false} dismiss={dismiss} />
-    );
-
-    expect(component.UNSAFE_getByType(Text).props.children).toBe(offlinePhrase);
-  });
-
-  it("When hidden is false to true notification is visible", () => {
-    const component = render(
-      <NotificationView online={false} hidden={false} dismiss={dismiss} />
-    );
-
-    component.rerender(
-      <NotificationView online={false} hidden={true} dismiss={dismiss} />
-    );
-
-    const animatedView = component.UNSAFE_getByType(Animated.View);
-    const animatedViewStyles = animatedView.props.style;
-
-    expect(animatedViewStyles.opacity).toBe(1);
-  });
-});

package/Components/OfflineHandler/NotificationView/utils.ts

@@ -1,34 +0,0 @@
-import * as React from "react";
-import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
-
-export const NETWORK_STATUS_LOCALIZATIONS_KEY = "network_status_localizations";
-
-export const THEME_STORAGE_NAMESPACE = "quick-brick-theme";
-
-export function useNetworkStatusLocalizations() {
-  const [storedLocalizations, setStoredLocalizations] = React.useState<Record<
-    string,
-    string
-  > | null>(null);
-
-  React.useEffect(() => {
-    async function loadStoredLocalizations() {
-      try {
-        const stored = await sessionStorage.getItem(
-          NETWORK_STATUS_LOCALIZATIONS_KEY,
-          THEME_STORAGE_NAMESPACE
-        );
-
-        if (stored) {
-          setStoredLocalizations(stored);
-        }
-      } catch (error) {
-        console.error("Error loading network status localizations", error);
-      }
-    }
-
-    loadStoredLocalizations();
-  }, []);
-
-  return storedLocalizations;
-}

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);
-}