[$250] Hide video playback controls on auto-playing videos

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.74-4
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dubielzyk-expensify
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1715816175965469

Action Performed:

1. On a new account, tap green (+) button
2. Tap "Track Expense"
3. Observe bottom sheet w/video about how to Track expense playing with controls obscuring the video

Expected Result:

The controls on the video shouldn't have the controls showing by default

Actual Result:

For videos auto-playing on mobile devices the controls should only show once the user taps the video.
In the attachment modal it's worth showing the playback controls, but they should still fade out after 2s

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

recording.mp4

AUYH7500.1.MP4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01db5e669ade628193
• Upwork Job ID: 1792927198372831232
• Last Price Increase: 2024-05-28
• Automatic offers:
• rojiphil | Contributor | 102529999
• tienifr | Contributor | 102638224

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (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.

[tienifr]

Proposal

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

For videos auto-playing on mobile devices the controls should only show once the user taps the video.
In the attachment modal it's worth showing the playback controls, but they should still fade out after 2s

What is the root cause of that problem?

• In here, we always use CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW.

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

1. We need to create a new state in here

const [controlStatusState, setControlStatusState] = useState(controlsStatus);

2. Then create a function that allows us to toggle the above state, named toggleControlStatusState

3. In here, call:

toggleControlStatusState()

4. Then in here, use the above state to display the controls. We need to add a flag to just apply this change if needed to keep the backward compatibility, for example, a flag named shouldToggleControlOnPress

5. If we want to display the controls then fade it out after 2s, in step 2, the toggleControlStatusState can be:

const controlsOpacity = useSharedValue(0);
    const controlsAnimatedStyle = useAnimatedStyle(() => ({
        opacity: controlsOpacity.value,
    }));
const toggleControlStatusState = () => {
        if (controlStatusState === CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW) {
            setControlStatusState(CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE);
        } else {
            setControlStatusState(CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW);
            controlsOpacity.value = 1
            controlsOpacity.value = withTiming(0, {duration: 2000}, ()=> setControlStatusState(CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE))
        }
    };

then apply the controlsAnimatedStyle to the VideoPlayerControls components

What alternative solutions did you explore? (Optional)

NA

Result

Screen.Recording.2024-05-17.at.09.14.24.mov

[tienifr]

Updated proposal to add the result.

[dubielzyk-expensify]

In the proposal here the controls fade out too quickly. When tapping the player, the controls should stay visible fully for 2 seconds (or 2.5 seconds) and fade out for 500 ms.

[tienifr]

@dubielzyk-expensify Yes, these durations can be changed when implementing the PR

[dubielzyk-expensify]

Cool. What does that mean? Is this not the PR to implement it?

[tienifr]

Yes, the video attached to my proposal demonstrates how my solution works. All the delay times you mentioned, such as staying fully visible for 2-2.5 seconds and fading out for 500 ms, can be optimized. If I am assigned to this task, I will create a PR to implement these adjustments.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[rojiphil]

@tienifr Why do we need another state controlStatusState when we can use shouldPlay to determine if we need to show the controls initially or not?

[tienifr]

@rojiphil

when we can use shouldPlay to determine if we need to show the controls initially or not?

I don't think so. The controls are displayed based on controlStatus, not a shouldPlay, see here. Please correct me me I was wrong.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @alexpensify (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.

[alexpensify]

Weekly update: The PR is going through the review process.

[alexpensify]

Weekly update: The PR is moving along through the process with no delays.

[alexpensify]

Weekly Update: More feedback in the PR, but moving forward

[melvin-bot]

This issue has not been updated in over 15 days. @rojiphil, @alexpensify, @MariaHCD, @bfitzexpensify, @tienifr 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!

[alexpensify]

Weekly Update: Moving back to weekly. @rojiphil the PR is ready for another review. Design confirmed the recent updates are good.

[alexpensify]

Weekly Update: The PR is moving along through the review process.

[alexpensify]

Weekly Update: The PR is still being reviewed.

[alexpensify]

Weekly Update: The PR is moving through reviews

[melvin-bot]

This issue has not been updated in over 15 days. @rojiphil, @alexpensify, @MariaHCD, @bfitzexpensify, @tienifr 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!

[alexpensify]

Moving back to Weekly since the PR is in the review process

[alexpensify]

Weekly Update: QA steps are under review

[alexpensify]

@bfitzexpensify - I realized you are back online, so I'm exiting the stage here. Thanks!

[rojiphil]

@bfitzexpensify @MariaHCD Since it is pay time here, I wanted to put forward a request to increase the compensation considering the amount of effort we spent in fine-tuning the video player.
Would $1000 sound fair?

Reasoning:

1. Over a while, we identified improvements in 10 different use cases as captured in the test case description here
2. This required us to repeat review and tests for 6 times as mentioned here (1, 2, 3, 4, 5, 6)

[bfitzexpensify]

@MariaHCD I'll defer this to you - do you think the work described in the comment above is 4x what we'd usually expect?

[MariaHCD]

I think the work done was definitely thorough and entailed quite a few improvements for the video player but I think it warrants a 2x increase (not 4x), in my opinion.

[bfitzexpensify]

Thanks, Maria.

OK, let's go with a $500 payout.

Payment summary:

$500 to be paid to @rojiphil for C+ reviewer - offer sent via Upwork
$500 to be paid to @tienifr for contributor work via manual request

[rojiphil]

$500 to be paid to @rojiphil for contributor work - offer sent via Upwork

@bfitzexpensify Accepted offer as C+ reviewer. Awaiting payment. Thanks.

[bfitzexpensify]

Paid out. Closing this one out.

[garrettmknight]

$250 approved for @tienifr