[$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

[melvin-bot]

@mallenexpensify Huh... This is 4 days overdue. Who can take care of this?

[mallenexpensify]

@strepanier03 , you're Android, right? If so, can I swap you this issue for any of yours? Thx

[strepanier03]

Tested and was able to repro this @mallenexpensify.

Using Android on Pixel 6 pro. Followed steps exactly and the behavior was 100% accurate.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01eb6986a8fe073e62

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eh2077 (External)

[melvin-bot]

@strepanier03 @eh2077 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[eh2077]

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.

When the volume is 0 and the sound is muted, then click to unmute it, I like the new behaviour to automatically set volume to 0.25 as suggested by @dominictb.

---

With this pre-condition

The volume is 0 and the sound is muted, then click to unmute it

We have two options about the behaviour

1. Automatically set the volume to 0.25 as mentioned above
2. Just make the sound icon unmuted. The volume will be zero and the user needs to drag the bar to change volume.

Which one do you like?

cc @strepanier03 @mallenexpensify

[eh2077]

I think we should go with @dominictb 's proposal. I agree with their RCA and their suggestion to automatically set the volume to 0.25 as mentioned above.

🎀👀🎀 C+ reviewed

[shawnborton]

Hmm I'm not too sure, do we have a rough idea of what is common practice with other apps?

I think I lean towards option 1 though, given that when you unmute something, that means there should be at least some sound playing?

[dominictb]

@shawnborton You can try Youtube, its behavior is the same as our option 1

[shawnborton]

Cool, I can get down with Option 1 then. Let's see if @dubielzyk-expensify agrees though too.

[dubielzyk-expensify]

Yeah, option 1 sounds good to me as well then.

[melvin-bot]

📣 @eh2077 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

This issue has not been updated in over 15 days. @strepanier03, @cristipaval, @eh2077, @dominictb eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[cristipaval]

This has been deployed to production two weeks ago. @strepanier03, did you handle the payments? (somehow the automation did not work)

[mallenexpensify]

Contributor: @dominictb paid $250 via Upwork
Contributor+: @eh2077 paid $250 via Upwork

Sorry for the delay, the deploy we had a while back that didn't update issue nor remove Reviewing really funked things up.

@eh2077 plz complete the BZ checklist.

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@] The PR that introduced the bug has been identified. Link to the PR:
• [@] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@] Determine if we should create a regression test for this bug.
• [@] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@bz] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[eh2077]

Checklist

• [@eh2077] The PR that introduced the bug has been identified. Link to the PR: I don't think there's a PR directly causes this bug. Instead, I think it's an edge use case we want to polish.
• [@eh2077] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: N/A
• [@eh2077] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• [@eh2077] Determine if we should create a regression test for this bug. Yes

Regression test

1. Go to NewDot in Android Chrome
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

Do we agree 👍 or 👎

[mallenexpensify]

Test case created, thx all!

• https://github.com/Expensify/Expensify/issues/425300