[VideoThumbmail] Improve VideoThumbnail play button #7319

sophschneider · 2022-09-30T20:51:00Z

WHY are these changes introduced?

Fixes #6864 #6859 https://github.com/Shopify/shopify/issues/355172

Visual update to the VideoThumbnail play button redesigned by the Admin Quality Crew team

https://5d559397bae39100201eedc1-butsvtcrne.chromatic.com/?path=/story/all-components-videothumbnail--default
https://admin.web.web-p6n3.sophie-schneider.us.spin.dev/store/shop1/marketing

WHAT is this pull request doing?

Before: existing `VideoThumbnail`

After: UX updates

How to 🎩

Resize the windows and test the hover states in the following:

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility

Voice over

github-actions · 2022-09-30T20:56:01Z

size-limit report 📦

Path	Size
polaris-react-cjs	204.7 KB (-0.11% 🔽)
polaris-react-esm	131.11 KB (-0.1% 🔽)
polaris-react-esnext	186.39 KB (-0.08% 🔽)
polaris-react-css	41.43 KB (-0.06% 🔽)

sophschneider · 2022-10-03T23:13:58Z

/snapit

github-actions · 2022-10-03T23:19:29Z

🫰✨ Thanks @sophschneider! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

sophschneider · 2022-10-04T14:39:25Z

polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx

+      <div
+        className={styles.Thumbnail}
+        style={{backgroundImage: `url(${thumbnailUrl})`}}
+      />


separated out the background image from the wrapping div so that the image overflow wouldn't hide the play buttons when the image cover had to be cropped. For example, on mobile:

sophschneider · 2022-10-04T15:36:16Z

polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss

-    width: 100%;
-    height: 100%;
-    padding-bottom: auto;
-  }


This wasn't used

I wish there was a tool to find unused scss class names. Could be impactful across multiple repos.

I was actually looking into something like that this morning :D Definitely possible and would be so useful

sophschneider · 2022-10-04T15:56:13Z

polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx

        onTouchStart={onBeforeStartPlaying}
      >
-        <img className={styles.PlayIcon} src={PlayIcon} alt="" />
+        {timeStampMarkup}


Moving this inside since it changes opacity on hover and the button is the whole thumbnail

sophschneider · 2022-10-04T16:09:16Z

/snapit

github-actions · 2022-10-04T16:14:11Z

🫰✨ Thanks @sophschneider! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

mrcthms

Approved as long as we don't need the updates to the Timestamp that occur on hover on focus as well

polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss

mrcthms · 2022-10-05T08:29:06Z

polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx

+        <span className={styles.PlayIcon}>
+          <Icon source={PlayMinor} />
+        </span>
+        <Text


We have a Text component now?! 🤯

Yesssssss. Spread the word @mrcthms 🚀
https://polaris.shopify.com/whats-new/version-10-typography

sophschneider · 2022-10-05T19:27:19Z

polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss

+  }
+
+  &:hover .Timestamp {
+    background-color: rgba(0, 0, 0, 0.8);


are these custom colours ok? design had black with this opacity and no token was suitable

They are okay for now. We can find/fix them up later.

@aaronccasanova

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [#7216](#7216) [`fbf2f8832`](fbf2f88) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Add migration to replace static mixins with declarations ### Patch Changes - [#7328](#7328) [`b31f51f25`](b31f51f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Add namespace support to the `replace-static-breakpoint-mixins` migration ## @shopify/[email protected] ### Minor Changes - [#7360](#7360) [`f7140123d`](f714012) Thanks [@mrcthms](https://github.com/mrcthms)! - Update `IndexTable` in sortable mode to fix visual bugs and include label Tooltips ### Patch Changes - [#7361](#7361) [`b1b576403`](b1b5764) Thanks [@kyledurand](https://github.com/kyledurand)! - Use state callback in page actions - [#7319](#7319) [`4b95fdc64`](4b95fdc) Thanks [@qt314](https://github.com/qt314)! - Update the `VideoThumbnail` play button user experience ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`fbf2f8832`](fbf2f88), [`b31f51f25`](b31f51f)]: - @shopify/[email protected] ## [email protected] ### Minor Changes - [#7254](#7254) [`61cf086ed`](61cf086) Thanks [@nickpresta](https://github.com/nickpresta)! - Added ability to collapse props that have been expanded. ### Patch Changes - [#7305](#7305) [`b0445cf9b`](b0445cf) Thanks [@selenehinkley](https://github.com/selenehinkley)! - Added "Getting started" section - Updated dependencies \[[`f7140123d`](f714012), [`b1b576403`](b1b5764), [`4b95fdc64`](4b95fdc)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`f7140123d`](f714012), [`b1b576403`](b1b5764), [`4b95fdc64`](4b95fdc)]: - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

sophschneider marked this pull request as draft September 30, 2022 20:51

sophschneider force-pushed the sophie/video-thumbnail branch 4 times, most recently from c91e5d0 to a1df087 Compare October 3, 2022 23:06

Shopify deleted a comment from github-actions bot Oct 4, 2022

sophschneider commented Oct 4, 2022

View reviewed changes

sophschneider force-pushed the sophie/video-thumbnail branch 2 times, most recently from 6fec50b to ba10689 Compare October 4, 2022 15:25

sophschneider commented Oct 4, 2022

View reviewed changes

sophschneider force-pushed the sophie/video-thumbnail branch from ba10689 to ab2ff76 Compare October 4, 2022 15:44

sophschneider commented Oct 4, 2022

View reviewed changes

sophschneider changed the title ~~[WIP][VideoThumbmail] Improve VideoThumbnail play button~~ [VideoThumbmail] Improve VideoThumbnail play button Oct 4, 2022

sophschneider changed the title ~~[VideoThumbmail] Improve VideoThumbnail play button~~ [WIP][VideoThumbmail] Improve VideoThumbnail play button Oct 4, 2022

sophschneider force-pushed the sophie/video-thumbnail branch from ab2ff76 to d44323e Compare October 4, 2022 15:59

sophschneider changed the title ~~[WIP][VideoThumbmail] Improve VideoThumbnail play button~~ [VideoThumbmail] Improve VideoThumbnail play button Oct 4, 2022

sophschneider marked this pull request as ready for review October 4, 2022 16:20

sophschneider requested a review from mrcthms October 4, 2022 20:54

mrcthms approved these changes Oct 5, 2022

View reviewed changes

sophschneider force-pushed the sophie/video-thumbnail branch 2 times, most recently from 5bef0ea to 71dbd69 Compare October 5, 2022 14:33

sophschneider requested a review from alex-page October 5, 2022 14:34

sophschneider force-pushed the sophie/video-thumbnail branch from 71dbd69 to 3a96c92 Compare October 5, 2022 17:01

Update VideoThumbnail button

66aa459

sophschneider force-pushed the sophie/video-thumbnail branch from 3a96c92 to 66aa459 Compare October 5, 2022 19:06

sophschneider commented Oct 5, 2022

View reviewed changes

alex-page approved these changes Oct 5, 2022

View reviewed changes

sophschneider merged commit 4b95fdc into main Oct 6, 2022

sophschneider deleted the sophie/video-thumbnail branch October 6, 2022 16:16

github-actions bot mentioned this pull request Oct 6, 2022

Version Packages #7355

Merged

dGoligorsky mentioned this pull request Oct 10, 2022

Update Video Thumbnail component in Figma UI kit #7376

Closed

[VideoThumbmail] Improve VideoThumbnail play button #7319

[VideoThumbmail] Improve VideoThumbnail play button #7319

Uh oh!

Conversation

sophschneider commented Sep 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

WHAT is this pull request doing?

Before: existing VideoThumbnail

After: UX updates

How to 🎩

🎩 checklist

Voice over

Uh oh!

github-actions bot commented Sep 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

sophschneider commented Oct 3, 2022

Uh oh!

github-actions bot commented Oct 3, 2022 • edited by sophschneider Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alex-page Oct 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sophschneider commented Oct 4, 2022

Uh oh!

github-actions bot commented Oct 4, 2022 • edited by sophschneider Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrcthms left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sophschneider commented Sep 30, 2022 •

edited

Loading

Before: existing `VideoThumbnail`

github-actions bot commented Sep 30, 2022 •

edited

Loading

github-actions bot commented Oct 3, 2022 •

edited by sophschneider

Loading

alex-page Oct 5, 2022 •

edited

Loading

github-actions bot commented Oct 4, 2022 •

edited by sophschneider

Loading