Open lanitochka17 opened 3 months ago
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 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
Attachment - Wrong video playback speed is highlighted
The focused index in not updated correctly when currentMenuItems
gets changed and isSelected isn't passed in subMenuItems
option.
https://github.com/Expensify/App/blob/e8ae3c5acedf0e6788dc574c7b6f3043ca37092a/src/components/PopoverMenu.tsx#L102-L111
https://github.com/Expensify/App/blob/e8ae3c5acedf0e6788dc574c7b6f3043ca37092a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx#L60-L67
isSelected
property in subMenuItems
option.isSelected: currentPlaybackSpeed === speed,
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);
}
};
We can use useEffect
to update the focused index.
useEffect(() => {
setFocusedIndex(-1);
const selectedItemIndexH = currentMenuItems.findIndex((option) => option.isSelected);
setFocusedIndex(selectedItemIndexH ?? -1);
}, [currentMenuItems, setFocusedIndex]);
If we don't want to highlight the selected option then we can just call setFocusedIndex(-1);
inside selectItem
callback.
https://github.com/Expensify/App/blob/e8ae3c5acedf0e6788dc574c7b6f3043ca37092a/src/components/PopoverMenu.tsx#L102-L111
We already clear the index when selecting the option by pressing enter. https://github.com/Expensify/App/blob/e8ae3c5acedf0e6788dc574c7b6f3043ca37092a/src/components/PopoverMenu.tsx#L148-L152
Wrong video playback speed is highlighted. There is no highlight on Android and iOS app
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.
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
NA
Opening up to the community.
Job added to Upwork: https://www.upwork.com/jobs/~01bf77b70eb73d8074
Triggered auto assignment to Contributor-plus team member for initial proposal review - @abdulrahuman5196 (External
)
Proposal
Please re-state the problem that we are trying to solve in this issue. While playing attachment video, wrong video playback speed is highlighted on the web. There is no highlight on Android and iOS app.
What is the root cause of that problem?
The actual cause for this problem is focus
state is not changing according to selected menu. its value is persisting the initial value that is equal to index of 0.5
speed. So, the highlight of menu item is not working after selecting the menu item
What changes do you think we should make in order to solve the problem?
const selectItem = (index: number) => {
const selectedItem = currentMenuItems[index];
if (selectedItem?.subMenuItems) {
setCurrentMenuItems([...selectedItem.subMenuItems]);
setEnteredSubMenuIndexes([...enteredSubMenuIndexes, index]);
setFocusedIndex(index) //this state needs to be updated after selecting item and it should only work for subMenutItems since focused index is not needed for normal menu item
} else {
selectedItemIndex.current = index;
onItemSelected(selectedItem, index);
}
};
What alternative solutions did you explore? (Optional)
Another solution for this problem would be passing setFocusedIndex
to
https://github.com/Expensify/App/blob/e8ae3c5acedf0e6788dc574c7b6f3043ca37092a/src/components/PopoverMenu.tsx#L160
this above function call and update focused index according to selected speed menu item index to get it highlighted
From this App/src/components/VideoPlayerContexts /VideoPopoverMenuContext.tsx file i would change this code as following
items.push({
icon: Expensicons.Meter,
text: translate('videoPlayer.playbackSpeed'),
subMenuItems: CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS.map((speed, index) => ({
icon: currentPlaybackSpeed === speed ? Expensicons.Checkmark : undefined,
text: speed.toString(),
onSelected: (setFocusedIndex //receiving setstate from argument) => {
updatePlaybackSpeed(speed);
setFocusedIndex(index); //while updating the speed, it also updates menu focus as well and get highlighted
},
shouldPutLeftPaddingWhenNoIcon: true,
})),
});
Let me know, if this proposal seems to work
π£ @hurram-dev! π£ Hey, it seems we donβt have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>
Contributor details Expensify account email: xurrambeks@gmail.com Upwork Profile: https://www.upwork.com/freelancers/~0130a0ff1a64915163
@JmillsExpensify, @abdulrahuman5196 Huh... This is 4 days overdue. Who can take care of this?
Waiting for proposal reviews. cc @abdulrahuman5196
π£ It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? πΈ
@JmillsExpensify, @abdulrahuman5196 6 days overdue. This is scarier than being forced to listen to Vogon poetry!
Hi, Will check on this tomorrow
Checking now
@lanitochka17 / @JmillsExpensify I don't see this happening from the OP - Wrong video playback speed is highlighted. But I can see this in chrome web - There is no highlight on Android and iOS app
Should we make a fix to show the pre-selected playback speed highlighted?
https://github.com/Expensify/App/assets/46707890/3bfd57f9-2c2b-45a4-a2e9-dd25651b540a
@JmillsExpensify @abdulrahuman5196 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!
π£ It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? πΈ
@JmillsExpensify, @abdulrahuman5196 Eep! 4 days overdue now. Issues have feelings too...
I'm good with that appraoch @abdulrahuman5196
π£ It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? πΈ
@JmillsExpensify, @abdulrahuman5196 6 days overdue. This is scarier than being forced to listen to Vogon poetry!
@JmillsExpensify, @abdulrahuman5196 Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!
@JmillsExpensify @abdulrahuman5196 this issue is now 4 weeks old, please consider:
Thanks!
@JmillsExpensify, @abdulrahuman5196 12 days overdue. Walking. Toward. The. Light...
Same as above.
π£ It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? πΈ
Hi, Sorry I was OOO couple of days, Will check the proposals as per the mentioned approach in my morning
@JmillsExpensify, @abdulrahuman5196 Huh... This is 4 days overdue. Who can take care of this?
Still waiting on proposal review/next steps.
Hi, @JmillsExpensify Sorry for the delay, I have limited availability at the moment. So unassigning myself. Kindly reassign another C+ for review.
I can take this on!
π£ It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? πΈ
@JmillsExpensify Eep! 4 days overdue now. Issues have feelings too...
All yours @allroundexperts!
Triggered auto assignment to @cristipaval, see https://stackoverflow.com/c/expensify/questions/7972 for more details.
π£ @Krishna2323 π 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 π
@allroundexperts PR ready for review ^
@JmillsExpensify, PR was deployed to production 4 days ago, can you please update the title? Thanks
@JmillsExpensify, payments due date was 17th July, could you please process the payments? Thanks
@allroundexperts, can you please bump @JmillsExpensify for payments in slack ππ»
@JmillsExpensify @allroundexperts friendly bump
Hi @Krishna2323!
I have messaged @JmillsExpensify. Thanks for your patience. Someone from the team should be handling this soon.
Do we π or π ?
@Krishna2323 All paid out. Always feel free to reach out to me via Slack if you don't see a response here.
Payment summary:
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:
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
https://github.com/Expensify/App/assets/78819774/a9df940b-70eb-4874-b4d8-2c1fd7ed2442
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @abdulrahuman5196