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

@abdulrahuman5196

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:

Log in with any account
Open any chat or room
Upload a video attachment
Play the video
Click on the "..." button
Click on the "Playback speed" button
Change the speed
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?

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

@JmillsExpensify

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.

@JmillsExpensify

@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

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

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?

Pass isSelected property in subMenuItems option.

isSelected: currentPlaybackSpeed === speed,

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

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

Opening up to the community.

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

@abdulrahuman5196

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

@allroundexperts

@allroundexperts PR ready for review ^

@JmillsExpensify

@JmillsExpensify, PR was deployed to production 4 days ago, can you please update the title? Thanks

@JmillsExpensify

@JmillsExpensify, payments due date was 17th July, could you please process the payments? Thanks

@allroundexperts

@allroundexperts, can you please bump @JmillsExpensify for payments in slack 🙏🏻

@JmillsExpensify

@JmillsExpensify @allroundexperts friendly bump

@Krishna2323

Hi @Krishna2323!

I have messaged @JmillsExpensify. Thanks for your patience. Someone from the team should be handling this soon.

Checklist

Video player #30829
https://github.com/Expensify/App/pull/30829/files#r1713070836
N/A
A checklist would be helpful here.

Regression test

Open any chat or room
Upload a video attachment
Play the video
Click on the "..." button
Click on the "Playback speed" button
Verify that the first option is highlighted
Change the speed
Click on the "..." button
Click on the "Playback speed" button again
Verify the selected speed is highlighted

Do we 👍 or 👎 ?

@Krishna2323

@Krishna2323 All paid out. Always feel free to reach out to me via Slack if you don't see a response here.

@Krishna2323

Payment summary:

Contributor: @Krishna2323 $250
Reviewer: @allroundexperts $250

@JmillsExpensify

This issue has not been updated in over 15 days. @JmillsExpensify, @cristipaval, @allroundexperts, @Krishna2323 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!

^^ Payment summary here confirmed is good.

@allroundexperts

$250 approved for @allroundexperts

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Alternative solution 2

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

51 remaining items

Checklist

Regression test

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

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

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on May 21, 2024

lanitochka17 commented on May 21, 2024

lanitochka17 commented on May 21, 2024

Krishna2323 commented on May 21, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Alternative solution 2

tienifr commented on May 22, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

JmillsExpensify commented on May 22, 2024

melvin-bot commented on May 22, 2024

melvin-bot commented on May 22, 2024

51 remaining items

Krishna2323 commented on Jul 6, 2024

Krishna2323 commented on Jul 14, 2024

Krishna2323 commented on Jul 23, 2024

Krishna2323 commented on Aug 5, 2024

Krishna2323 commented on Aug 9, 2024

allroundexperts commented on Aug 11, 2024

allroundexperts commented on Aug 11, 2024

Checklist

Regression test

JmillsExpensify commented on Aug 12, 2024

JmillsExpensify commented on Aug 12, 2024

melvin-bot commented on Sep 4, 2024

trjExpensify commented on Oct 4, 2024

JmillsExpensify commented on Oct 4, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions