@applicaster/zapp-react-native-ui-components 15.0.0-rc.60 → 15.0.0-rc.62

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -1,4 +1,4 @@
-import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
+import { all, equals, isEmpty, path, pluck, prop, values } from "ramda";
 
 import { useEffect, useMemo } from "react";
 
@@ -24,6 +24,7 @@ import {
 
 import { produce } from "immer";
 import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
+
 // types reference
 
 declare interface CurationEntry {
@@ -54,7 +55,10 @@ export const getTransformedPreset = (
   const presetComponent = layoutPresets?.[preset?.preset_name];
 
   if (!presetComponent) {
-    logger.log_error("Preset missing or wrong data format", { entry: preset });
+    logger.log_error(
+      `Preset "${preset?.preset_name}" missing or wrong data format`,
+      { entry: preset }
+    );
 
     return;
   }

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -61,6 +61,7 @@ import {
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
 import { useAppData } from "@applicaster/zapp-react-native-redux";
+import { useRestrictMobilePlayback } from "./useRestrictMobilePlayback";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -264,7 +265,21 @@ const PlayerContainerComponent = (props: Props) => {
 
     showNavBar(true);
     navigator.goBack();
-  }, [isModal, navigator.goBack, state.playerId, showNavBar]);
+  }, [isModal, state.playerId, showNavBar, navigator]);
+
+  const pluginConfiguration = React.useMemo(() => {
+    return (
+      playerManager.getPluginConfiguration() ||
+      R.prop("__plugin_configuration", Player)
+    );
+  }, [playerManager.isRegistered()]);
+
+  const { isRestricted } = useRestrictMobilePlayback({
+    player,
+    entry: item,
+    pluginConfiguration,
+    close,
+  });
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
@@ -456,13 +471,6 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, []);
 
-  const pluginConfiguration = React.useMemo(() => {
-    return (
-      playerManager.getPluginConfiguration() ||
-      R.prop("__plugin_configuration", Player)
-    );
-  }, [playerManager.isRegistered()]);
-
   const disableMiniPlayer = React.useMemo(() => {
     return pluginConfiguration?.disable_mini_player_when_inline;
   }, [pluginConfiguration]);
@@ -662,36 +670,38 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      <Player
-                        source={{
-                          uri,
-                          entry: item,
-                        }}
-                        focused={isInlineTV ? true : undefined}
-                        autoplay={true}
-                        controls={false}
-                        disableCastAction={disableCastAction}
-                        docked={navigator.isVideoModalDocked()}
-                        entry={item}
-                        fullscreen={mode === VideoModalMode.FULLSCREEN}
-                        inline={inline}
-                        isModal={isModal}
-                        isTabletPortrait={isTabletPortrait}
-                        muted={false}
-                        playableItem={item}
-                        playerEvent={playerEvent}
-                        playerId={state.playerId}
-                        pluginConfiguration={pluginConfiguration}
-                        ref={playerRef}
-                        toggleFullscreen={toggleFullscreen}
-                        style={videoStyle}
-                        playNextData={playNextData}
-                        setNextVideoPreloadThresholdPercentage={
-                          setNextVideoPreloadThresholdPercentage
-                        }
-                      >
-                        {renderApplePlayer(applePlayerProps)}
-                      </Player>
+                      {isRestricted ? null : (
+                        <Player
+                          source={{
+                            uri,
+                            entry: item,
+                          }}
+                          focused={isInlineTV ? true : undefined}
+                          autoplay={true}
+                          controls={false}
+                          disableCastAction={disableCastAction}
+                          docked={navigator.isVideoModalDocked()}
+                          entry={item}
+                          fullscreen={mode === VideoModalMode.FULLSCREEN}
+                          inline={inline}
+                          isModal={isModal}
+                          isTabletPortrait={isTabletPortrait}
+                          muted={false}
+                          playableItem={item}
+                          playerEvent={playerEvent}
+                          playerId={state.playerId}
+                          pluginConfiguration={pluginConfiguration}
+                          ref={playerRef}
+                          toggleFullscreen={toggleFullscreen}
+                          style={videoStyle}
+                          playNextData={playNextData}
+                          setNextVideoPreloadThresholdPercentage={
+                            setNextVideoPreloadThresholdPercentage
+                          }
+                        >
+                          {renderApplePlayer(applePlayerProps)}
+                        </Player>
+                      )}
                     </PlayerFocusableWrapperView>
 
                     {state.error ? <ErrorDisplay error={state.error} /> : null}

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -0,0 +1,101 @@
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import NetInfo from "@react-native-community/netinfo";
+
+import { 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 { log_info } from "./logger";
+
+type RestrictMobilePlaybackProps = {
+  player?: Player;
+  entry?: ZappEntry;
+  pluginConfiguration?: Record<string, string>;
+  close: () => void;
+};
+
+export const useRestrictMobilePlayback = ({
+  player,
+  entry,
+  pluginConfiguration,
+  close,
+}: RestrictMobilePlaybackProps): { isRestricted: boolean } => {
+  const dialogVisibleRef = useRef<boolean>(false);
+  const theme = useTheme();
+
+  useEffect(() => {
+    return () => {
+      if (isTV()) {
+        return;
+      }
+
+      dialogVisibleRef.current = false;
+    };
+  }, []);
+
+  const isConnectionRestricted = useMemo(() => {
+    if (isTV()) {
+      return false;
+    }
+
+    return player && entry?.extensions?.connection_restricted;
+  }, [player, entry]);
+
+  const [isRestricted, setIsRestricted] = useState<boolean>(
+    isConnectionRestricted
+  );
+
+  useEffect(() => {
+    if (!isConnectionRestricted) {
+      return;
+    }
+
+    const stopPlayer = () => {
+      log_info(
+        "Stopping player due to mobile restriction, connection_restricted: true"
+      );
+
+      player?.close();
+
+      dialogVisibleRef.current = true;
+
+      showAlertDialog({
+        title:
+          pluginConfiguration?.mobile_connection_restricted_alert_title ||
+          "Restricted Connection Type",
+        message:
+          pluginConfiguration?.mobile_connection_restricted_alert_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,
+    pluginConfiguration,
+    player,
+    theme.ok_button,
+    isConnectionRestricted,
+  ]);
+
+  return { isRestricted };
+};

package/package.json

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