[$250] mWeb - Get started - In mute mode, if enabled the video to full screen, unable to unmute video

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.6
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in new account
3. Tap join
4. In Get started video, note video is muted
5. Enable video to full screen
6. Try to unmute in full screen
7. Note unmute option is not responsive
8. Close the full screen mode
9. Unmute the video
10. Now again turn to full screen mode
11. Try to mute and unmute video
12. Note mute and unmute option works

Expected Result:

In mute mode, if enabled the video to full screen, must be able to unmute video

Actual Result:

In mute mode, if enabled the video to full screen, unable to unmute video

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6538246_1720637118840.Screenrecorder-2024-07-11-00-06-06-749_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01eb6986a8fe073e62
• Upwork Job ID: 1816219077811437428
• Last Price Increase: 2024-07-31
• Automatic offers:
• eh2077 | Reviewer | 103370135
• dominictb | Contributor | 103370136

Issue Owner

Current Issue Owner: @eh2077

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@mallenexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[nyomanjyotisa]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In mute mode, if enabled the video to full screen, unable to unmute video

What is the root cause of that problem?

App/src/components/VideoPlayerContexts/VolumeContext.tsx

Line 18 in 9025880

currentVideoPlayerRef.current.setStatusAsync({volume: newVolume, isMuted: newVolume === 0});

on mute, we set volume to 0, and isMuted is true here

When we entered fullscreen mute/unmute action only change the isMuted value, and not the volume (on expo-av)

since the volume is 0, when we unmute on fullscreen, the volume still 0 so the icon still marked as muted

What changes do you think we should make in order to solve the problem?

Only set the isMuted if the newVolume === 0 here

if(newVolume === 0){
    currentVideoPlayerRef.current.setStatusAsync({isMuted: true});
}else{
    currentVideoPlayerRef.current.setStatusAsync({volume: newVolume, isMuted: false});
}

RESULT

-1-New-Expensify.5.mp4

What alternative solutions did you explore? (Optional)

[dominictb]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• In mute mode, if enabled the video to full screen, unable to unmute video

What is the root cause of that problem?

• Related to the sound, each video has two prop, volume and isMuted.

• If volume > 0:
  if isMuted: true: Sound is enabled (in other words, sound icon is displayed as an unmuted icon).
  if isMuted: false: Sound is disabled (in other words, sound icon is displayed as an muted icon).

• If volume === 0:
  if isMuted: true: Sound is disabled.
  if isMuted: false: Sound is disabled.

• In this bug, when video starts playing, it calls:
  

  App/src/components/VideoPlayerContexts/VolumeContext.tsx

  Line 31 in 58e2575

  updateVolume(volume.value);

  
  with volume.value is 0:
  

  App/src/components/VideoPlayerContexts/VolumeContext.tsx

  Line 11 in 58e2575

  const volume = useSharedValue(0);

• Now the volume context data is set to 0:
  

  App/src/components/VideoPlayerContexts/VolumeContext.tsx

  Line 20 in 58e2575

  volume.value = newVolume;

  
  and the currentVideoPlayerRef set {volume:0, isMuted: true}:
  

  App/src/components/VideoPlayerContexts/VolumeContext.tsx

  Line 18 in 58e2575

  currentVideoPlayerRef.current.setStatusAsync({volume: newVolume, isMuted: newVolume === 0});

• Now, the volume button is displayed as muted icon.

• Now we open full screen mode. In here, the volume button is displayed as muted icon as well. If we try to click on that button, maybe the isMuted is set to false, but the volume is still 0, and as I said above, if volume is 0, the sound is always disabled regardless the isMuted is true or false.

• As we can see, we don't have a mechanism to auto-increase the volume if we click on the volume button if it video has isMuted: true and volume: 0 before.

What changes do you think we should make in order to solve the problem?

• Based on the above, we should fix the problem:

we don't have a mechanism to auto-increase the volume if we click on the volume button if it video has isMuted: true and volume: 0 before.

• To do it, we add a logic:

            if (prevIsMuted.current && prevVolume.current === 0 && !status.isMuted) {
                updateVolume(0.25);
            }
            prevIsMuted.current = status.isMuted;
            prevVolume.current = status.volume;

to

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Line 133 in 58e2575

const handlePlaybackStatusUpdate = useCallback(

with:

    const prevIsMuted = useRef(false);
    const prevVolume = useRef(0);

• In the above, if the isMuted is value is toggled to false and before, isMuted is false and volume is 0, it will auto set the volume to 0.25. This behavior is the same as Youtube video played.

What alternative solutions did you explore? (Optional)

[mallenexpensify]

Can't get browserstack to play audio, so everything is muted, trying to find a volunteer to snag

[melvin-bot]

@mallenexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[mallenexpensify]

No takers the first time, trying again. Added to VIP VSB project
https://expensify.slack.com/archives/C01SKUP7QR0/p1721175957328789?thread_ts=1720747059.196629&cid=C01SKUP7QR0