Video timestamp pills on cards

[abeddow91]

What does this change?

Puts rules in place to determine to position of the timestamp pill for video on fronts for beta containers only.

The new rules state that if video media has a duration:

• If the article is a video article (i.e. has "Video" design type in formats) display the timestamp pill on the bottom left of the card content
• If the article has video main media but isn't a video article, display the timestamp in the top right of the image.

In addition, for consistency, this PR also updates the youtube block component so that it uses the pill component rather than its own implementation

Why?

There is a desire from design to visually distinguish video articles from articles that contain video.

Screenshots

Video Article

Before	After

Article with Video

Before	After

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[github-actions]

Size Change: +856 B (+0.1%)

Total Size: 888 kB

Filename	Size	Change
dotcom-rendering/dist/1370.client.web.********************.js	0 B	-6.56 kB (removed)	🏆
dotcom-rendering/dist/2930.client.web.********************.js	14.3 kB	+108 B (+0.76%)
dotcom-rendering/dist/6882.client.web.********************.js	13.1 kB	+557 B (+4.42%)
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js	6.78 kB	+775 B (+12.91%)	⚠️
dotcom-rendering/dist/4285.client.web.********************.js	5.84 kB	+5.84 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size	Change
dotcom-rendering/dist/1076.client.web.********************.js	3.41 kB	0 B
dotcom-rendering/dist/1101.client.web.********************.js	4.83 kB	0 B
dotcom-rendering/dist/1262.client.web.********************.js	4.48 kB	0 B
dotcom-rendering/dist/1401.client.web.********************.js	441 B	0 B
dotcom-rendering/dist/1427.client.web.********************.js	4.94 kB	0 B
dotcom-rendering/dist/1477.client.web.********************.js	3.52 kB	0 B
dotcom-rendering/dist/1669.client.web.********************.js	12.3 kB	0 B
dotcom-rendering/dist/1714.client.web.********************.js	2.87 kB	0 B
dotcom-rendering/dist/2188.client.web.********************.js	6.52 kB	0 B
dotcom-rendering/dist/2444.client.web.********************.js	2.67 kB	0 B
dotcom-rendering/dist/2482.client.web.********************.js	44.8 kB	0 B
dotcom-rendering/dist/280.client.web.********************.js	531 B	0 B
dotcom-rendering/dist/3213.client.web.********************.js	5.42 kB	0 B
dotcom-rendering/dist/342.client.web.********************.js	4.18 kB	0 B
dotcom-rendering/dist/3524.client.web.********************.js	3.51 kB	0 B
dotcom-rendering/dist/3769.client.web.********************.js	22.7 kB	0 B
dotcom-rendering/dist/3789.client.web.********************.js	3.58 kB	0 B
dotcom-rendering/dist/39.client.web.********************.js	3.08 kB	0 B
dotcom-rendering/dist/3937.client.web.********************.js	3.86 kB	0 B
dotcom-rendering/dist/4170.client.web.********************.js	16.3 kB	0 B
dotcom-rendering/dist/4501.client.web.********************.js	4.29 kB	0 B
dotcom-rendering/dist/4684.client.web.********************.js	3.17 kB	0 B
dotcom-rendering/dist/4878.client.web.********************.js	8.08 kB	0 B
dotcom-rendering/dist/4943.client.web.********************.js	3.69 kB	0 B
dotcom-rendering/dist/5095.client.web.********************.js	4.17 kB	0 B
dotcom-rendering/dist/5223.client.web.********************.js	3.27 kB	0 B
dotcom-rendering/dist/5598.client.web.********************.js	4.49 kB	0 B
dotcom-rendering/dist/5748.client.web.********************.js	2.49 kB	0 B
dotcom-rendering/dist/6021.client.web.********************.js	11.1 kB	0 B
dotcom-rendering/dist/6061.client.web.********************.js	3.63 kB	0 B
dotcom-rendering/dist/6073.client.web.********************.js	3.53 kB	0 B
dotcom-rendering/dist/6110.client.web.********************.js	3.55 kB	0 B
dotcom-rendering/dist/6163.client.web.********************.js	3.83 kB	0 B
dotcom-rendering/dist/6577.client.web.********************.js	5.41 kB	0 B
dotcom-rendering/dist/6627.client.web.********************.js	10.4 kB	0 B
dotcom-rendering/dist/6876.client.web.********************.js	2.67 kB	0 B
dotcom-rendering/dist/6903.client.web.********************.js	3.21 kB	0 B
dotcom-rendering/dist/6931.client.web.********************.js	2.63 kB	0 B
dotcom-rendering/dist/6940.client.web.********************.js	526 B	0 B
dotcom-rendering/dist/7116.client.web.********************.js	23 kB	0 B
dotcom-rendering/dist/7350.client.web.********************.js	3.32 kB	0 B
dotcom-rendering/dist/7364.client.web.********************.js	3.22 kB	0 B
dotcom-rendering/dist/7540.client.web.********************.js	2.72 kB	0 B
dotcom-rendering/dist/7544.client.web.********************.js	4.88 kB	0 B
dotcom-rendering/dist/7546.client.web.********************.js	7.37 kB	0 B
dotcom-rendering/dist/7861.client.web.********************.js	619 B	0 B
dotcom-rendering/dist/8030.client.web.********************.js	4.19 kB	0 B
dotcom-rendering/dist/8067.client.web.********************.js	3.39 kB	0 B
dotcom-rendering/dist/8209.client.web.********************.js	3.64 kB	0 B
dotcom-rendering/dist/8592.client.web.********************.js	157 B	0 B
dotcom-rendering/dist/9072.client.web.********************.js	2.61 kB	0 B
dotcom-rendering/dist/9242.client.web.********************.js	3.76 kB	0 B
dotcom-rendering/dist/9288.client.web.********************.js	2.51 kB	0 B
dotcom-rendering/dist/9362.client.web.********************.js	20.3 kB	0 B
dotcom-rendering/dist/9558.client.web.********************.js	3.53 kB	0 B
dotcom-rendering/dist/9665.client.web.********************.js	4.05 kB	0 B
dotcom-rendering/dist/9735.client.web.********************.js	4.46 kB	0 B
dotcom-rendering/dist/9766.client.web.********************.js	3.41 kB	0 B
dotcom-rendering/dist/9790.client.web.********************.js	3.58 kB	0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js	6.97 kB	0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js	2.85 kB	0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js	4.85 kB	0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js	424 B	0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js	3.63 kB	0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js	2.7 kB	0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js	2.66 kB	0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js	2.55 kB	0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js	2.76 kB	+44 B (+1.62%)
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js	6.5 kB	+43 B (+0.67%)
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js	2 kB	0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js	2.88 kB	0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js	37.2 kB	0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js	1.97 kB	0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js	6.74 kB	0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js	5.77 kB	0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js	2.66 kB	0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js	7.82 kB	-2 B (-0.03%)
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js	5.16 kB	0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js	538 B	0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js	2.29 kB	0 B
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js	284 B	0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js	1.93 kB	0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js	2.44 kB	0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js	1.74 kB	0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js	2.82 kB	0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js	1.72 kB	0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js	3.5 kB	0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js	3.94 kB	0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js	2.02 kB	0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js	1.94 kB	0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js	3.8 kB	0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js	617 B	0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js	2.52 kB	0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js	343 B	0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js	3.5 kB	0 B
dotcom-rendering/dist/frameworks.client.web.********************.js	20.9 kB	0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js	7.38 kB	0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js	6.26 kB	0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js	11.5 kB	0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js	7.98 kB	0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js	2.58 kB	0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js	15.8 kB	0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js	10.2 kB	0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js	783 B	0 B
dotcom-rendering/dist/index.client.web.********************.js	44.9 kB	+5 B (+0.01%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js	2.9 kB	0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js	853 B	0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js	8.55 kB	0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js	3.75 kB	0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js	5.68 kB	0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js	3.55 kB	0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js	6.38 kB	0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js	436 B	0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js	6.53 kB	0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js	3.55 kB	0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js	4.81 kB	0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js	4.72 kB	0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js	7.61 kB	0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js	5.96 kB	0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js	2.69 kB	0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js	3.85 kB	0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js	5.95 kB	0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js	5.12 kB	0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js	5.34 kB	0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js	3.72 kB	0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js	543 B	0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js	802 B	0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js	749 B	0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js	543 B	0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js	468 B	0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js	1.75 kB	0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js	2.53 kB	0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js	6.11 kB	0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js	6.3 kB	+46 B (+0.74%)
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js	4.15 kB	0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js	4.13 kB	-1 B (-0.02%)
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js	4.1 kB	0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js	2.22 kB	0 B
dotcom-rendering/dist/sentry.client.web.********************.js	794 B	0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js	3.93 kB	0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js	485 B	0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js	919 B	0 B
dotcom-rendering/dist/shimport.client.web.********************.js	2.8 kB	0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js	920 B	0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js	2.1 kB	0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js	4.46 kB	0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js	5.56 kB	0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js	5.83 kB	0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js	4.38 kB	0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js	4.84 kB	0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js	5.78 kB	0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js	6.02 kB	0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js	8.14 kB	0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js	2.41 kB	0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js	3.5 kB	0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js	1.23 kB	0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js	13.5 kB	0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js	9.29 kB	0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js	2.5 kB	0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js	1.13 kB	0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js	2.91 kB	0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js	5.97 kB	0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js	2.78 kB	0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js	4.27 kB	0 B

_{compressed-size-action}

[Georges-GNM]

The chromatic diffs look as expected to me, and the new rules look correctly implemented from testing locally, so 👍

[github-actions]

Deploy build 40251 of Mobile::mobile-apps-rendering to CODE

All deployment options

• Deploy build 40251 of Mobile::mobile-apps-rendering to CODE
• Deploy parts of build 40251 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 16061 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 16061 of dotcom:rendering-all to CODE
• Deploy parts of build 16061 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[prout-bot]

Seen on PROD (merged by @abeddow91 10 minutes and 1 second ago) Please check your changes!