Update the video play button user experience

[alex-page]

Discussed in #6859

^{Originally posted by gladys-ng August 5, 2022}

Proposed solution

Would it be possible to update the video play button to bring it up to date with the current design system while also providing more detailed information to merchants? The current play button is large and in some cases it impacts the visual composition of the thumbnail (see before/after below where the individual in the thumbnail is covered by the play button).

This work comes from https://github.com/Shopify/shopify/issues/355172 (https://github.com/Shopify/shopify/issues/355172) on the Admin Quality crew project board.

Feature details:

• Instead of a large circular play button, the play button will be located on the bottom left of the thumbnail and display the video duration
• There is a mobile and desktop version (which differ only in text styles, mobile/button vs desktop/button)
• Hit zone for the video would still be the entire thumbnail and not just the play button

Rationale

The existing video play button hasn't been updated in awhile and looks out of place compared to the rest of the design system. It takes up a large portion of the thumbnail and in some cases can cover important visuals. The new design keeps the play button contained on the bottom left of the thumbnail and provides useful metadata about the video (i.e. duration) to merchants.

Link to Figma