Merge pull request #65 from efahsl/cx-enhancements

Cx enhancements on detail/playback screens

Author: giolaq

packages/shared-ui/src/screens/DetailsScreen.tsx

@@ -1,7 +1,7 @@
 import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { StyleSheet, View, Image, Text } from 'react-native';
-import { SpatialNavigationRoot } from 'react-tv-space-navigation';
+import { SpatialNavigationRoot, DefaultFocus } from 'react-tv-space-navigation';
 import { scaledPixels } from '../hooks/useScale';
 import { useCallback, useMemo } from 'react';
 import { useIsFocused } from '@react-navigation/native';
@@ -113,11 +113,13 @@ export default function DetailsScreen() {
                 <Text style={detailsStyles.crewName}>Eric Fahsl</Text>
               </View>
             </View>
-            <FocusablePressable
-              text={'Watch now'}
-              onSelect={navigate}
-              style={buttonStyle}
-            />
+            <DefaultFocus>
+              <FocusablePressable
+                text={'Watch now'}
+                onSelect={navigate}
+                style={buttonStyle}
+              />
+            </DefaultFocus>
           </View>
         </View>
       </View>

packages/shared-ui/src/screens/PlayerScreen.tsx

@@ -108,7 +108,10 @@ export default function PlayerScreen() {
           onBuffer={setIsVideoBuffering}
           onProgress={setCurrentTime}
           onLoad={(duration) => (durationRef.current = duration)}
-          onEnd={() => setPaused(true)}
+          onEnd={() => {
+            setPaused(true);
+            navigation.goBack();
+          }}
         />
 
         {!SHOW_NATIVE_CONTROLS && !!durationRef.current && (

packages/shared-ui/src/screens/PlayerScreen.vega.tsx

@@ -190,14 +190,15 @@ export default function PlayerScreen() {
   }, [movie, headerImage, isFocused]);
 
   /**
-   * Handle video end - pause and show controls
+   * Handle video end - pause, show controls, and navigate back
    */
   useEffect(() => {
     if (isVideoEnded) {
       setPaused(true);
       setControlsVisible(true);
+      navigateBack();
     }
-  }, [isVideoEnded]);
+  }, [isVideoEnded, navigateBack]);
 
   /**
    * Show controls when video starts