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

lanitochka17 commented 1 month ago

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:

Go to https://staging.new.expensify.com/
Log in new account
Tap join
In Get started video, note video is muted
Enable video to full screen
Try to unmute in full screen
Note unmute option is not responsive
Close the full screen mode
Unmute the video
Now again turn to full screen mode
Try to mute and unmute video
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
[x] Android: mWeb Chrome
[ ] iOS: Native
[ ] iOS: mWeb Safari
[ ] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/4dc3fde5-0c8d-46ab-82ac-cdd7c7f480cd

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[bot] commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

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

nyomanjyotisa commented 1 month ago

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?

https://github.com/Expensify/App/blob/902588034a6fd0cb40e983553d09820946252e9d/src/components/VideoPlayerContexts/VolumeContext.tsx#L18 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

https://github.com/Expensify/App/assets/73281575/b3bbe037-01e9-465c-9484-86053a52f717

What alternative solutions did you explore? (Optional)

dominictb commented 1 month ago

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: https://github.com/Expensify/App/blob/58e257532290aa0228f1c668ed461a15f1b2b136/src/components/VideoPlayerContexts/VolumeContext.tsx#L31 with volume.value is 0: https://github.com/Expensify/App/blob/58e257532290aa0228f1c668ed461a15f1b2b136/src/components/VideoPlayerContexts/VolumeContext.tsx#L11
Now the volume context data is set to 0: https://github.com/Expensify/App/blob/58e257532290aa0228f1c668ed461a15f1b2b136/src/components/VideoPlayerContexts/VolumeContext.tsx#L20 and the currentVideoPlayerRef set {volume:0, isMuted: true}: https://github.com/Expensify/App/blob/58e257532290aa0228f1c668ed461a15f1b2b136/src/components/VideoPlayerContexts/VolumeContext.tsx#L18
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 https://github.com/Expensify/App/blob/58e257532290aa0228f1c668ed461a15f1b2b136/src/components/VideoPlayer/BaseVideoPlayer.tsx#L133 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 commented 1 month ago

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

melvin-bot[bot] commented 1 month ago

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

mallenexpensify commented 1 month ago

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[bot] commented 1 month ago

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

mallenexpensify commented 1 month ago

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

strepanier03 commented 1 month ago

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[bot] commented 1 month ago

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

melvin-bot[bot] commented 1 month ago

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

melvin-bot[bot] commented 1 month ago

@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 commented 1 month ago

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

Automatically set the volume to 0.25 as mentioned above
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 commented 1 month ago

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

melvin-bot[bot] commented 1 month ago

Triggered auto assignment to @cristipaval, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

melvin-bot[bot] commented 1 month ago

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

cristipaval commented 1 month ago

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

Automatically set the volume to 0.25 as mentioned above

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

I'll tag @Expensify/design for picking what option we should take.

shawnborton commented 1 month ago

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 commented 1 month ago

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

shawnborton commented 1 month ago

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

dubielzyk-expensify commented 1 month ago

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

melvin-bot[bot] commented 1 month ago

📣 @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[bot] commented 1 month ago

📣 @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[bot] commented 1 week ago

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 commented 1 week ago

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

mallenexpensify commented 1 week ago

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 commented 5 days ago

Checklist

[x] [@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.
[x] [@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
[x] [@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
[x] [@eh2077] Determine if we should create a regression test for this bug. Yes

Regression test

Go to NewDot in Android Chrome
Log in new account
Tap join
In Get started video, note video is muted
Enable video to full screen
Try to unmute in full screen

Do we agree 👍 or 👎

mallenexpensify commented 4 days ago

Test case created, thx all!

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

Expensify / App