TV App Amazon functionality validation fail due to video play in background in sleep mode in FireTV stick #520

Question

I have submitted my react-native-tvos app to the Amazon store but they give below a functionality validation error.

• FireTV-24- Media: Returning to the app from Sleep (System Standby) mode causes inconsistent behavior resulting in a negative user experience - Remote and Gamepad

  Steps to reproduce:

  1. Install and launch the app
  2. Play any video
  3. Long press Home button to invoke HUD (Heads UP Display) overlay
  4. Select Sleep to put the device to Sleep mode
  5. Select any button to come out of sleep mode and relaunch the app Actual Result: observe that app audio continues to play in background Expected Result: Returning back from sleep mode should not result in inconsistent behavior of the app

I have used below version of tvos and React native video.

"react-native": "npm:[email protected]",
"react-native-video": "^5.2.1"

here is my code for video component.

      <Video
        ref={setPlayer}
        subtitle={true}
        source={{
          uri: configuration.url,
        }}
        title={title}
        subTitleText={subtitle}
        style={[styles.playerLoaded]}
        paused={pausedRef.current}
        onLoad={handleLoad}
        resizeMode={'contain'}
        rate={playerRate}
        onProgress={handleProgress}
        onError={onError}
        onLoadStart={onLoadStart}
        onSeek={handleSeek}
        onReadyForDisplay={onReadyForDisplay}
        onEnd={onEndVideo}
        playInBackground={false}
        playWhenInactive={false}
      />

here i attached screenshot of error given by amazon.

please help me to fix this issue. Thank you in advance.

Answer 1

It could be a bug in that specific version of the component. Anyway you can use the AppState to perform an action every time the app goes in background

Example:

    import React, { useRef, useState, useEffect } from "react";
    import { AppState, Text, View } from "react-native";
        
    const AppInactiveHandleExample = () => {
        const appState = useRef(AppState.currentState);
        const [appStateVisible, setAppStateVisible] = useState(appState.current);
    
        useEffect(() => {
            AppState.addEventListener("change", handleAppStateChange);
            // Return for clear the cache of action
            return () => {
                AppState.removeEventListener("change", handleAppStateChange);
            };
        }, []);
    
        const handleAppStateChange = nextAppState => {
        if (
            appState.current.match(/inactive|background/) &&
            nextAppState === "active"
        ) {
            // Resume the Video/Audio
            onAppInactive()
        }
            appState.current = nextAppState;
            setAppStateVisible(appState.current);
        };
    
        // Action executed when app was inactive or background
        const onAppInactive = () => {
            // Pause the Video/Audio
        }
    
        return (
        <View>
            <Text>Current state is: {appStateVisible}</Text>
        </View>
        );
    };
    
    export default AppInactiveHandleExample;