Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video: add objectFill as a prop #1227

Merged
merged 2 commits into from
Sep 22, 2020

Conversation

valbooth28
Copy link
Contributor

Background

When Story Pins started using the Gestalt Video component for MP4s (experiment gated), employees noticed that the "poster", or placeholder while the video loads, was being displayed distorted.

Repro

Gif reproduction:

distortion

Screenshot for emphasis.

Screen Shot 2020-09-15 at 4 47 54 PM copy

Changes

Setting the style as 'object-fill: containseems to fix the issue, so this PR adds the specificobject-fill` part of the style as an optional prop.
Screen Shot 2020-09-16 at 6 18 20 PM

Test Plan

Internal e2e testing confirms this will be a fix, and you can locally observe the style is passed correctly:
Screen Shot 2020-09-21 at 5 22 14 PM

@valbooth28 valbooth28 requested a review from a team as a code owner September 22, 2020 00:26
@@ -11,6 +11,8 @@ type Source =
| string
| Array<{| type: 'video/m3u8' | 'video/mp4' | 'video/ogg', src: string |}>;

type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@@ -549,6 +551,8 @@ export default class Video extends PureComponent<Props, State> {
onSeeked={this.handleSeek}
onTimeUpdate={this.handleTimeUpdate}
onProgress={this.handleProgress}
// $FlowIssue facebook/flow#8448
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@valbooth28 thanks for the PR! Made a few updates:

Also know that with every flow issue, we require the exact exception, so instead of something like // $FlowFixMe, we should write // $FlowFixMe[prop-missing]. See gajus/eslint-plugin-flowtype#453 for the request to make this an ESLint rule

@netlify
Copy link

netlify bot commented Sep 22, 2020

Deploy preview for gestalt ready!

Built with commit d52e8a9

https://deploy-preview-1227--gestalt.netlify.app

@@ -549,7 +552,10 @@ export default class Video extends PureComponent<Props, State> {
onSeeked={this.handleSeek}
onTimeUpdate={this.handleTimeUpdate}
onProgress={this.handleProgress}
{...(crossOrigin ? { crossOrigin } : null)}
{...(objectFit ? { style: { 'object-fit': objectFit } } : null)}
{...((crossOrigin ? { crossOrigin } : { ...null }): {|
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AlbertCarreras / @jennyscript fyi - a pattern we might see more often when we spread on a component. It's pretty verbose but better than adding a $FlowIssue / $FlowFixMe: facebook/flow#8186 (comment)

The { ...null } seems odd but it's what we have to do to make it work with exact types

@christianvuerings christianvuerings added the minor release Minor release label Sep 22, 2020
@christianvuerings christianvuerings changed the title Video: add objectFill as a propType Video: add objectFill as a prop Sep 22, 2020
@christianvuerings christianvuerings merged commit 27e0c88 into pinterest:master Sep 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
minor release Minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants