@applicaster/zapp-react-native-ui-components 15.0.0-alpha.1228610025 → 15.0.0-alpha.1232030550

package/Components/PlayerContainer/ErrorDisplay/ErrorDisplay.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import * as R from "ramda";
+import { Text, TextStyle, View, ViewStyle } from "react-native";
+
+import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { getAppStylesColor } from "@applicaster/zapp-react-native-utils/stylesUtils";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
+
+type Props = {
+  styles: {};
+  error: {};
+  remoteConfigurations: { localizations: {} };
+};
+
+const defaultAppStyles = {
+  loading_error_label: {
+    color: "#aaa",
+  },
+};
+
+const textStyles = (appStyles = defaultAppStyles): TextStyle => ({
+  color: getAppStylesColor("loading_error_label", appStyles),
+  fontSize: 36,
+  textAlign: "center",
+});
+
+const errorStyles = ({ backgroundColor }): ViewStyle => ({
+  flex: 1,
+  width: "100%",
+  height: "100%",
+  justifyContent: "center",
+  alignItems: "center",
+  position: "absolute",
+  zIndex: 100,
+  backgroundColor,
+});
+
+export function ErrorDisplayComponent({
+  styles,
+  remoteConfigurations: { localizations },
+}: Props) {
+  const theme = useTheme();
+  const backgroundColor = theme?.app_background_color;
+
+  const { stream_error_message = "Cannot play stream" } = getLocalizations({
+    localizations,
+  });
+
+  const appStyles = R.prop(styleKeys.style_namespace, styles);
+
+  return (
+    <View style={errorStyles({ backgroundColor })}>
+      <Text style={textStyles(appStyles)}>{stream_error_message}</Text>
+    </View>
+  );
+}

package/Components/PlayerContainer/ErrorDisplay/index.ts

@@ -0,0 +1,9 @@
+import * as R from "ramda";
+
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
+
+import { ErrorDisplayComponent } from "./ErrorDisplay";
+
+export const ErrorDisplay = R.compose(
+  connectToStore(R.pick(["remoteConfigurations"]))
+)(ErrorDisplayComponent);

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -46,6 +46,7 @@ import {
   PlayerContainerContextProvider,
 } from "./PlayerContainerContext";
 import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { ErrorDisplay } from "./ErrorDisplay";
 import { PlayerFocusableWrapperView } from "./WappersView/PlayerFocusableWrapperView";
 import { FocusableGroupMainContainerId } from "./index";
 import { isPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypeMatchers";
@@ -338,6 +339,12 @@ const PlayerContainerComponent = (props: Props) => {
       playerContainerLogger.error(errorObj);
 
       setState({ error: errorObj });
+
+      if (!isTvOS) {
+        setTimeout(() => {
+          close();
+        }, 800);
+      }
     },
     [close]
   );
@@ -688,6 +695,8 @@ const PlayerContainerComponent = (props: Props) => {
                         </Player>
                       )}
                     </PlayerFocusableWrapperView>
+
+                    {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
                   {isInlineTV && context.showComponentsContainer ? (

package/package.json

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