Video doesn't stop inside a ViroARSceneNavigator

[Piquart]

Environment:

1. Development OS: Mac
2. Device OS & Version: iOS version 13.3
3. Version: react-viro 2.17.0 and React Native version 0.59.9
4. Device(s): iPhone 8

Description

I developed a scene (ImageARScene) in order to recognise some images and start a remote video. This scene is triggered by another screen including a ViroARSceneNavigator; all is working fine but when I try to tap on close button the screen is dismissed but the audio of the video continues to play. How can I solve?

Main screen with ViroARSceneNavigator

    async dismiss() {
        console.log("dismissing...");
        this.props.navigation.dismiss();
    }

    return (
          <View style={styles.outer}>
            <TouchableOpacity
              style={styles.closeButton}
              onPress={() => this.dismiss()}>
              <Text style={styles.closeText}>Close</Text>
            </TouchableOpacity>
            <ViroARSceneNavigator
              ref={ref => (this.sceneNavigator = ref)}
              style={styles.arView}
              onExitViro={() => this._onExitViro()}
              viroAppProps={this.state.viroAppProps}
              initialScene={{
                scene: ImageARScene
              }}
            />
          </View>
        );

ImageARScene

render() {
    return (
      <ViroARScene>
        <ViroARImageMarker target={"targetImage"}>
          <ViroVideo
            source={{ uri: this.state.trailer}}
            ref={VIDEO_REF}
            paused={this.state.isPaused}
            height={0.3}
            width={0.2}
            rotation={[270, 0, 0]}
          />
        </ViroARImageMarker>
      </ViroARScene>
    );
  }

[HedwigAR]

It's not the prettiest solution, but maybe set the "muted" prop of ViroVideo to true when it's paused?

https://docs.viromedia.com/docs/virovideo-2-compare

[Piquart]

@HedwigAR thank you for your suggestion; unfortunately, there isn't a pause button so the video needs to pause when the user close the screen, I tried to use componentWillUnmount and it's correctly called (the log is printed) but the video/audio doesn't stop. Maybe I'm wrong something else? Below my componentWillUnmount method, thanks in advance.

componentWillUnmount() {
    console.log("component will dismiss...");
    this.refs[VIDEO_REF].muted = true;
    this.refs[VIDEO_REF].paused = true;
    this.setState({
      isPaused: true
    });
  }

[inversadigital]

workaround:

_onUpdateTime(currentTime, totalTime){
    this.setState({ currentTime, totalTime })
}

componentWillUnmount(){
    this.refs[VIDEO_REF].seekToTime(this.state.totalTime);
}

render() {
    return (
      <ViroARScene>
        <ViroARImageMarker target={"targetImage"}>
          <ViroVideo
            source={{ uri: this.state.trailer}}
            ref={VIDEO_REF}
            paused={this.state.isPaused}
            height={0.3}
            width={0.2}
            rotation={[270, 0, 0]}
            onUpdateTime={this._onUpdateTime}
          />
        </ViroARImageMarker>
      </ViroARScene>
    );
}

[Piquart]

@inversadigital using this workaround, now it works!

Thank you very much!

[JungHsuan]

if you're using ViroMaterialVideo, you can call deleteMaterials to release the material:

 useEffect(() => {
      ViroMaterials.createMaterials({
        video_material: {
          lightingModel: 'Lambert',
          diffuseTexture: { uri: YOUR_VIDEO_URL },
        },
      });
    }
    return () => {
      ViroMaterials.deleteMaterials(['video_material']);
    };
  }, []);

[SamiChab]

You can manipulate the props through setNativeProps In your render function :

<ViroARSceneNavigator
    style={styles.videoItem}
    autofocus={true}
    initialScene={{
        scene: () => (
	    <ViroARScene>
		<ViroVideo
		    ref={videoRef}
		    {...other props}
		/>
	    </ViroARScene>
	),
    }}
/>

To toggle play/pause: videoRef?.current?.setNativeProps({ paused: true }) For those who don't use React-Native useRef to create the videoRef it should be videoRef?.setNativeProps({ paused: true }) See https://viro-community.readme.io/docs/virovideo#setnativepropsnativeprops