[HOLD for payment 2024-11-28] [$250] mWeb - Attachments - 1.75, 2 playback speed options are not displayed

[IuliiaHerets]

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: 9.0.58-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5184936&group_by=cases:section_id&group_order=asc&group_id=292107
Issue reported by: Applause Internal Team

Action Performed:

1. On a conversation, click on the + button in the compose box
2. Click on add attachment
3. Upload a Video
4. Click on the three dots menu -> Playback speed.

Expected Result:

All playback speed options (0.25, 0.5, 0.75, Normal, 1.25, 1.5, 1.75, 2) can be observed.

Actual Result:

1.75, 2 playback speed options are not displayed

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6656062_1730858708590.RPReplay_Final1730857807.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021854881579584772026
• Upwork Job ID: 1854881579584772026
• Last Price Increase: 2024-11-08
• Automatic offers:
• akinwale | Reviewer | 104847298

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

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

[NJ-2020]

Uploading Bug6656062_1730858708590!RPReplay_Final1730857807.mp4…

@IuliiaHerets I think you need to reupload the video because it was sent before the video uploaded

[IuliiaHerets]

@NJ-2020 Added, sorry for this

[bernhardoj]

Proposal

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

Some of the playback speed options are not displayed.

What is the root cause of that problem?

By default, the popover menu that is being used has a max height of window height - 250.

App/src/components/PopoverMenu.tsx

Line 343 in afa7b33

<View style={[isSmallScreenWidth ? {maxHeight: windowHeight - 250} : styles.createMenuContainer, containerStyles]}>

I believe this is to have some overlay space that can be clicked to dismiss the modal. Previously, the menu children is wrapped with a scroll view. But it was changed in #49051. In that PR, we replace the ScrollView with a View and then apply the ScrollView in renderWithConditionalWrapper only, controlled shouldUseScrollView props which is false by default.

App/src/components/PopoverMenu.tsx

Lines 343 to 347 in afa7b33

	<View style={[isSmallScreenWidth ? {maxHeight: windowHeight - 250} : styles.createMenuContainer, containerStyles]}>
	{renderHeaderText()}
	{enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
	{renderWithConditionalWrapper(shouldUseScrollView, scrollContainerStyle, renderedMenuItems)}
	</View>

App/src/components/PopoverMenu.tsx

Lines 132 to 138 in afa7b33

	const renderWithConditionalWrapper = (shouldUseScrollView: boolean, contentContainerStyle: StyleProp<ViewStyle>, children: ReactNode): React.JSX.Element => {
	if (shouldUseScrollView) {
	return <ScrollView contentContainerStyle={contentContainerStyle}>{children}</ScrollView>;
	}
	// eslint-disable-next-line react/jsx-no-useless-fragment
	return <>{children}</>;
	};

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

Pass shouldUseScrollView in VideoPopoverMenu.

App/src/components/VideoPopoverMenu/index.tsx

Lines 30 to 39 in afa7b33

	return (
	<PopoverMenu
	onClose={hidePopover}
	onItemSelected={hidePopover}
	isVisible={isPopoverVisible}
	anchorPosition={anchorPosition}
	menuItems={menuItems}
	anchorRef={videoPlayerMenuRef}
	/>
	);

This will make the playback options scrollable.

(note: I think shouldUseScrollView should be true by default)

OR

If we want to show the whole list without scrolling, we can set

containerStyles={{maxHeight: '100%'}}

[melvin-bot]

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

[zanyrenney]

i think this is low priority but we can fix it.

[melvin-bot]

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