When dynamically changing isMuted property in Video component, the app seems to go into an eternal loop

[Nnoerregaard]

🐛 Bug Report

Environment

Expo CLI 3.11.1 environment info:
System:
OS: macOS 10.15.3
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.6.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5314842
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
npmPackages:
@types/react: 16.8.23 => 16.8.23
@types/react-native: 0.57.60 => 0.57.60
@types/react-navigation: 3.0.7 => 3.0.7
expo: 35.0.0 => 35.0.0
react: 16.8.3 => 16.8.3
react-native: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz => 0.59.8
react-navigation: 3.11.1 => 3.11.1
npmGlobalPackages:
expo-cli: 3.11.1

The app targets both Android and iOS but the issue only happens on Android. The iOS version works just fine.

Steps to Reproduce

Create a video component from 'expo-av', let isMuted={someStateVariable}, create UI to change someStateVariable (e.g a button), change someStateVariable and observe how the app becomes unresponsive.

Expected Behavior

I expect the video to be muted and onPlaybackStatusUpdate to keep being called at its usual rate and for the app to keep being responsive

Actual Behavior

The app becomes unresponsive and onPlaybackStatusUpdate is called excessively compared to what was the case before changing someStateVariable

Reproducible Demo

This snack should reproduce the issue: https://snack.expo.io/@brandheroes-shared/sponaneous-raspberries, however, somehow it doesn't. Therefore, I'll provide a little more context to explain why I still think this is a bug in expo-av. First off, as you can see from this gif, the handleNewStatus method inside Video.ts in Expo is called excessively in something resembling an eternal loop after changing the isMuted state (that happens when "RECEIVED A DISPATCH IN THE REDUCER" is printed, which I highlight about 15 seconds into the video. Also note that the dispatcher is only ever called once). Here is a screenshot of the relevant part of my application code

When debugging, I notice that my onPress handler is called once, my reducer function is called once and the component itself subsequently re-renders once. Thus, no eternal loop there. As a side note, I've tried swapping the global state value out for a state value local to the component which exhibits the exact same behavior. Here is a screenshot of the placement of the log, that you see in the gif above

As you can see, the log is placed inside the function _handleNewStatus which is set in the constructor of Video.js inside expo-av/build. As you can clearly see from the console log statements in my previous gif, this function is the one responsible for the never-ending loop.

[cruzach]

Does the app become unresponsive when you run the same code from the snack locally with expo-cli? One thing to note is that the snack you shared is on SDK 36, whereas your project is on SDK 35, so it's possible this has been resolved in the new SDK

[Nnoerregaard]

I thought I'd changed the snack to SDK 35, however, we have a local branch with expo SDK 36 in the project which is currently undergoing testing. I merged that into the branch where I experience the issue and the issue still persists.
I subsequently tried copy and pasting the component from the snack into our project (still, with SDK 36) where the code from the snack does indeed reproduce my issue.
I then tried to create a new project using expo init. If I choose to create a new project and replace the content of App.tsx with the code in the snack, the issue is not reproduced, so I assume it has something to do with our project in conjunction with expo-av.
Do you have any pointers as to where I should start looking? I'm a bit void of ideas regarding where to start, as the error I'm getting is coming from expo-av rather than my own code, and since the most minimal example still causes the issue to arise in our project

[cruzach]

I would take a look at the package.json of the blank project, and yours, and make sure that there are no disparities in the version of expo-av, expo, & react-native-unimodules

[jhalborg]

I just verified the issue with a log in the callback for onPlaybackStatusUpdate in the video player in the snack, also present in SDK 36+ SDK 37:

const onPlaybackStatusUpdate = (status) => {
   setPrintout(`IN PLAYBACK STATUS UPDATE! status ${status.isLoaded} ${Date.now()}`);
};

You can see the timestamp updating continuously, in spite of the status not changing. The original code example with the console log @Nnoerregaard put in the _handleNewStatus method also seems conclusive to me that it's a loop in the library (expo-av) rather than in his code. Maybe I'm missing something?

There are no disparities between versions, just double checked 😄

[IjzerenHein]

Hi! This particular problem has been resolved in expo-av@8.2.0 and was fixed in PR #7193.
What happened was that additional periodic events were scheduled when certain state changes happened, such as changing the muted property. Each time it would start firing additional events, up until a point when things could get really slow (especially when you are logging the events to the console).

I'll close this issue as this problem should have been resolved in SDK 38 and the latest Expo client. Feel free to reopen with additional reproduction info if the problem still exists.