[$250] Attachment - Wrong video playback speed is highlighted

[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: 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: N/A
Issue reported by: Applause - Internal Team

Issue found when executing https://github.com/Expensify/Expensify/issues/383873

Action Performed:

1. Log in with any account
2. Open any chat or room
3. Upload a video attachment
4. Play the video
5. Click on the "..." button
6. Click on the "Playback speed" button
7. Change the speed
8. Click on the "Playback speed" button again

Expected Result:

The current playback speed should be highlighted

Actual Result:

Wrong video playback speed is highlighted. There is no highlight on Android and iOS app

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

Bug6486124_1716205749562.bandicam_2024-05-20_13-36-09-159.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bf77b70eb73d8074
• Upwork Job ID: 1793174201872076800
• Last Price Increase: 2024-06-26
• Automatic offers:
• Krishna2323 | Contributor | 102998073

Issue Owner

Current Issue Owner: @abdulrahuman5196

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (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]

@JmillsExpensify 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

[Krishna2323]

Proposal

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

Attachment - Wrong video playback speed is highlighted

What is the root cause of that problem?

The focused index in not updated correctly when currentMenuItems gets changed and isSelected isn't passed in subMenuItems option.

App/src/components/PopoverMenu.tsx

Lines 102 to 111 in e8ae3c5

	const selectItem = (index: number) => {
	const selectedItem = currentMenuItems[index];
	if (selectedItem?.subMenuItems) {
	setCurrentMenuItems([...selectedItem.subMenuItems]);
	setEnteredSubMenuIndexes([...enteredSubMenuIndexes, index]);
	} else {
	selectedItemIndex.current = index;
	onItemSelected(selectedItem, index);
	}
	};

App/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx

Lines 60 to 67 in e8ae3c5

	subMenuItems: CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS.map((speed) => ({
	icon: currentPlaybackSpeed === speed ? Expensicons.Checkmark : undefined,
	text: speed.toString(),
	onSelected: () => {
	updatePlaybackSpeed(speed);
	},
	shouldPutLeftPaddingWhenNoIcon: true,
	})),

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

1. Pass isSelected property in subMenuItems option.

isSelected: currentPlaybackSpeed === speed,

2. Update selectItem function to update the focused index whenever currentMenuItems gets changed.

    const selectItem = (index: number) => {
        const selectedItem = currentMenuItems[index];
        if (selectedItem?.subMenuItems) {
            const selectedItemIndexH = selectedItem?.subMenuItems.findIndex((option) => option.isSelected);
            setCurrentMenuItems([...selectedItem.subMenuItems]);
            setEnteredSubMenuIndexes([...enteredSubMenuIndexes, index]);
            setFocusedIndex(selectedItemIndexH);
        } else {
            selectedItemIndex.current = index;
            onItemSelected(selectedItem, index);
        }
    };

What alternative solutions did you explore? (Optional)

We can use useEffect to update the focused index.

    useEffect(() => {
        setFocusedIndex(-1);
        const selectedItemIndexH = currentMenuItems.findIndex((option) => option.isSelected);
        setFocusedIndex(selectedItemIndexH ?? -1);
    }, [currentMenuItems, setFocusedIndex]);

Alternative solution 2

If we don't want to highlight the selected option then we can just call setFocusedIndex(-1); inside selectItem callback.

App/src/components/PopoverMenu.tsx

Lines 102 to 111 in e8ae3c5

	const selectItem = (index: number) => {
	const selectedItem = currentMenuItems[index];
	if (selectedItem?.subMenuItems) {
	setCurrentMenuItems([...selectedItem.subMenuItems]);
	setEnteredSubMenuIndexes([...enteredSubMenuIndexes, index]);
	} else {
	selectedItemIndex.current = index;
	onItemSelected(selectedItem, index);
	}
	};

We already clear the index when selecting the option by pressing enter.

App/src/components/PopoverMenu.tsx

Lines 148 to 152 in e8ae3c5

	if (focusedIndex === -1) {
	return;
	}
	selectItem(focusedIndex);
	setFocusedIndex(-1); // Reset the focusedIndex on selecting any menu

[tienifr]

Proposal

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

Wrong video playback speed is highlighted. There is no highlight on Android and iOS app

What is the root cause of that problem?

• When we are in Download | Playback speed menu, click on Playback speed option will set the focused index to 1 in here.

• Then, the Playback speed menu opens. In here, the focused index is still 1 as we set before, leads to the current bug.

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

• We need to set onMouseDown={(e)=>e.preventDefault()} in here. We already have this logic in a lot of logics, such as here to prevent app from focusing on the mouse down option.

• We can also create a prop named shouldPreventDefaultFocusOnSelectRow to just apply the change e.preventDefault() if shouldPreventDefaultFocusOnSelectRow: true

What alternative solutions did you explore? (Optional)

NA

[JmillsExpensify]

Opening up to the community.

[melvin-bot]

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

[melvin-bot]

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