@applicaster/zapp-react-native-ui-components 14.0.14 → 14.0.15-alpha.3578310293

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -60,6 +60,7 @@ import {
   PlayerNativeCommandTypes,
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
+import { useRestrictMobilePlayback } from "./useRestrictMobilePlayback";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -462,6 +463,12 @@ const PlayerContainerComponent = (props: Props) => {
     );
   }, [playerManager.isRegistered()]);
 
+  const { isRestricted } = useRestrictMobilePlayback({
+    player,
+    entry: item,
+    close,
+  });
+
   const disableMiniPlayer = React.useMemo(() => {
     return pluginConfiguration?.disable_mini_player_when_inline;
   }, [pluginConfiguration]);
@@ -661,7 +668,7 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      {Player ? (
+                      {Player && !isRestricted ? (
                         <Player
                           source={{
                             uri,

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -0,0 +1,131 @@
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import NetInfo from "@react-native-community/netinfo";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { showAlertDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { log_info } from "./logger";
+import { isTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
+type RestrictMobilePlaybackProps = {
+  player?: Player;
+  entry?: ZappEntry;
+  close: () => void;
+};
+
+export const useRestrictMobilePlayback = ({
+  player,
+  entry,
+  close,
+}: RestrictMobilePlaybackProps): { isRestricted: boolean } => {
+  const dialogVisibleRef = useRef<boolean>(false);
+  const theme = useTheme();
+  const plugins = usePlugins();
+
+  const restrictMobilePlugin = useMemo(
+    () =>
+      plugins.find((p) => p.identifier === "quick-brick-hook-restrict-mobile"),
+    [plugins]
+  );
+
+  const localizations = useMemo(
+    () => restrictMobilePlugin?.configuration?.localizations,
+    [restrictMobilePlugin]
+  );
+
+  const localize = useCallback(
+    (key: string) => {
+      const l = localizations && getLocalizations({ localizations });
+
+      return (l && l[key]) || "";
+    },
+    [localizations]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (isTV()) {
+        return;
+      }
+
+      dialogVisibleRef.current = false;
+    };
+  }, []);
+
+  const isConnectionRestricted = useMemo(() => {
+    if (isTV()) {
+      return false;
+    }
+
+    // Only restrict if the plugin exists
+    if (!restrictMobilePlugin) {
+      return false;
+    }
+
+    return player && isTrue(entry?.extensions?.connection_restricted);
+  }, [player, entry, restrictMobilePlugin]);
+
+  const [isRestricted, setIsRestricted] = useState<boolean>(
+    isConnectionRestricted
+  );
+
+  useEffect(() => {
+    if (!isConnectionRestricted) {
+      return;
+    }
+
+    const stopPlayer = () => {
+      log_info(
+        "Stopping player due to mobile restriction, connection_restricted: true"
+      );
+
+      player?.closeNativePlayer();
+      playerManager?.invokeHandler("close");
+
+      dialogVisibleRef.current = true;
+
+      showAlertDialog({
+        title:
+          localize("restrict_mobile_playback_error_title") ||
+          "Restricted Connection Type",
+        message:
+          localize("restrict_mobile_playback_error_message") ||
+          "This content can only be viewed over a Wi-Fi or LAN network.",
+        okButtonText: theme.ok_button || "OK",
+        completion: () => {
+          dialogVisibleRef.current = false;
+
+          close();
+        },
+      });
+    };
+
+    return NetInfo.addEventListener((state) => {
+      if (state.type === "cellular") {
+        setIsRestricted(true);
+
+        if (dialogVisibleRef.current) {
+          return;
+        }
+
+        stopPlayer();
+      } else {
+        setIsRestricted(false);
+      }
+    });
+  }, [
+    close,
+    entry?.extensions?.connection_restricted,
+    localizations,
+    localize,
+    player,
+    theme.ok_button,
+    isConnectionRestricted,
+  ]);
+
+  return { isRestricted };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.14",
+  "version": "14.0.15-alpha.3578310293",
   "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": "14.0.14",
-    "@applicaster/zapp-react-native-bridge": "14.0.14",
-    "@applicaster/zapp-react-native-redux": "14.0.14",
-    "@applicaster/zapp-react-native-utils": "14.0.14",
+    "@applicaster/applicaster-types": "14.0.15-alpha.3578310293",
+    "@applicaster/zapp-react-native-bridge": "14.0.15-alpha.3578310293",
+    "@applicaster/zapp-react-native-redux": "14.0.15-alpha.3578310293",
+    "@applicaster/zapp-react-native-utils": "14.0.15-alpha.3578310293",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",