[$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 contributors@expensify.com 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