@applicaster/zapp-react-native-ui-components 13.0.0-rc.55 → 13.0.0-rc.56

package/Components/Layout/TV/ScreenContainer.tsx

@@ -55,8 +55,11 @@ export const ScreenContainer = React.memo(function ScreenContainer({
   ComponentsExtraProps,
   NavBar,
 }: Props) {
-  const { screenMarginBottom } = React.useContext(ScreenLayoutContext);
+  const { screenMarginBottom, resetScreenLayout } =
+    React.useContext(ScreenLayoutContext);
+
   const { currentRoute, screenData } = useNavigation();
+
   const screen = useCurrentScreenData();
 
   const { marginBottom, backgroundColor, paddingTop, paddingBottom } =
@@ -65,6 +68,10 @@ export const ScreenContainer = React.memo(function ScreenContainer({
   const theme = useTheme();
   const getThemeValue = React.useCallback(R.propOr(0, R.__, theme), [theme]);
 
+  React.useEffect(() => {
+    resetScreenLayout();
+  }, [currentRoute]);
+
   const fullscreen = React.useCallback(
     displayFullScreen({ currentRoute, screenData }),
     [currentRoute, screenData]

package/Components/Layout/TV/ScreenLayoutContextProvider.tsx

@@ -60,10 +60,15 @@ export function ScreenLayoutContextProvider(props: {
     initialState
   );
 
+  const resetScreenLayout = React.useCallback(() => {
+    setScreenLayout(initialState);
+  }, [initialState]);
+
   const screenLayoutValue = React.useMemo(
     () => ({
       ...screenLayout,
       setScreenLayout,
+      resetScreenLayout,
     }),
     [screenLayout]
   );

package/Components/Layout/TV/__tests__/ScreenContainer.test.tsx

@@ -56,11 +56,12 @@ describe("ScreenContainer", () => {
   };
 
   const setScreenLayout = () => {};
+  const resetScreenLayout = () => {};
 
   const wrapper = ({ children }) => (
     <WrappedWithProviders>
       <ScreenLayoutContext.Provider
-        value={{ ...screenLayout, setScreenLayout }}
+        value={{ ...screenLayout, setScreenLayout, resetScreenLayout }}
       >
         <ScreenContainer NavBar={View}>{children}</ScreenContainer>
       </ScreenLayoutContext.Provider>

package/Components/TrackedView/index.tsx

@@ -12,6 +12,7 @@ type TrackedViewProps = {
   onPositionUpdated: (props: { rect?: Record<string, number> }) => void;
   testId?: string | undefined;
   groupId?: string;
+  clipThreshold?: number;
 };
 
 export const TrackedView = memo(function TrackedView(props: TrackedViewProps) {

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -32,6 +32,9 @@ const { log_error, log_debug } = loggerLiveImageComponent;
 const isMeasurement = (item: ZappEntry) =>
   isString(item.id) && item.id.startsWith("pre-measurement-");
 
+// Pixels by which the view can slightly extend outside the viewport and still be considered fully visible.
+const CLIP_THRESHOLD = 10;
+
 type Props = {
   item: ZappEntry;
   style: Record<string, any>;
@@ -328,6 +331,7 @@ const PlayerLiveImageComponent = (props: Props) => {
     <TrackedView
       testId={`tracked-view-${playerId}-${item.title}`}
       onPositionUpdated={onPositionUpdated}
+      clipThreshold={CLIP_THRESHOLD}
     >
       <View ref={trackViewRef}>
         {isVideoMode ? (

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`PlayerLiveImageComponent should render correctly with default props 1`] = `
 <TrackedView
+  clipThreshold={10}
   onPositionUpdated={[Function]}
   testId="tracked-view-player1-Test"
 >

package/Contexts/ScreenLayoutContext/index.tsx

@@ -8,10 +8,11 @@ type LayoutContext = {
   componentAnchorPointY: number | null;
   componentAvailableWidth: number | null;
   setScreenLayout?: (properties: {}) => void;
+  resetScreenLayout?: () => void;
   extraAnchorPointYOffset: number;
 };
 
-const screenLayoutContext: LayoutContext = {
+const initialScreenLayoutContext: LayoutContext = {
   screenMarginTop: null,
   screenMarginBottom: null,
   screenHeight: null,
@@ -21,8 +22,9 @@ const screenLayoutContext: LayoutContext = {
   extraAnchorPointYOffset: 0,
 };
 
-export const ScreenLayoutContext =
-  React.createContext<LayoutContext>(screenLayoutContext);
+export const ScreenLayoutContext = React.createContext<LayoutContext>(
+  initialScreenLayoutContext
+);
 
 export function ScreenLayoutContextConsumer(Component) {
   return function WithConsumer(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.0-rc.55",
+  "version": "13.0.0-rc.56",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-rc.55",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.55",
-    "@applicaster/zapp-react-native-redux": "13.0.0-rc.55",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.55",
+    "@applicaster/applicaster-types": "13.0.0-rc.56",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.56",
+    "@applicaster/zapp-react-native-redux": "13.0.0-rc.56",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.56",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",