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

Add AudioPlayer component #12549

Merged
merged 7 commits into from
Oct 24, 2024
Merged

Add AudioPlayer component #12549

merged 7 commits into from
Oct 24, 2024

Conversation

sndrs
Copy link
Member

@sndrs sndrs commented Oct 14, 2024

What does this change?

Adds an AudioPlayer component that recreates the functionality of frontend's audio player.

It doesn't copy over the fake waveform SVG from frontend, because I'm not sure what it adds 🙃

It does fix scrubbing and buffering display though, as a quid pro quo.

Why?

Recreates the frontend player so we can render audio pages in DCR (closes #12485).

Screenshots

Until leftCol

image

leftCol and above

image

@sndrs sndrs added the run_chromatic Runs chromatic when label is applied label Oct 14, 2024
@sndrs sndrs added this to the DCAR Migration milestone Oct 14, 2024
@sndrs sndrs self-assigned this Oct 14, 2024
@sndrs sndrs requested a review from a team as a code owner October 14, 2024 15:56
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 14, 2024
Copy link

github-actions bot commented Oct 14, 2024

Size Change: 0 B

Total Size: 914 kB

ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1000.client.web.********************.js 999 B
dotcom-rendering/dist/1026.client.web.********************.js 784 B
dotcom-rendering/dist/1090.client.web.********************.js 752 B
dotcom-rendering/dist/1156.client.web.********************.js 3.56 kB
dotcom-rendering/dist/1391.client.web.********************.js 725 B
dotcom-rendering/dist/1417.client.web.********************.js 2.53 kB
dotcom-rendering/dist/146.client.web.********************.js 5.29 kB
dotcom-rendering/dist/1476.client.web.********************.js 784 B
dotcom-rendering/dist/1515.client.web.********************.js 6.86 kB
dotcom-rendering/dist/1628.client.web.********************.js 2.87 kB
dotcom-rendering/dist/1667.client.web.********************.js 918 B
dotcom-rendering/dist/1884.client.web.********************.js 3.4 kB
dotcom-rendering/dist/1888.client.web.********************.js 2.92 kB
dotcom-rendering/dist/1904.client.web.********************.js 12.6 kB
dotcom-rendering/dist/1940.client.web.********************.js 507 B
dotcom-rendering/dist/2123.client.web.********************.js 619 B
dotcom-rendering/dist/2182.client.web.********************.js 529 B
dotcom-rendering/dist/2249.client.web.********************.js 4.91 kB
dotcom-rendering/dist/2310.client.web.********************.js 880 B
dotcom-rendering/dist/2455.client.web.********************.js 4.55 kB
dotcom-rendering/dist/267.client.web.********************.js 917 B
dotcom-rendering/dist/281.client.web.********************.js 642 B
dotcom-rendering/dist/3006.client.web.********************.js 4.49 kB
dotcom-rendering/dist/3109.client.web.********************.js 803 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B
dotcom-rendering/dist/3364.client.web.********************.js 3.97 kB
dotcom-rendering/dist/346.client.web.********************.js 3.21 kB
dotcom-rendering/dist/3769.client.web.********************.js 999 B
dotcom-rendering/dist/3921.client.web.********************.js 2 kB
dotcom-rendering/dist/408.client.web.********************.js 11 kB
dotcom-rendering/dist/4122.client.web.********************.js 1.86 kB
dotcom-rendering/dist/4149.client.web.********************.js 3.77 kB
dotcom-rendering/dist/4282.client.web.********************.js 685 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB
dotcom-rendering/dist/4628.client.web.********************.js 654 B
dotcom-rendering/dist/4769.client.web.********************.js 4.28 kB
dotcom-rendering/dist/4789.client.web.********************.js 12.7 kB
dotcom-rendering/dist/4820.client.web.********************.js 2.42 kB
dotcom-rendering/dist/4866.client.web.********************.js 6.32 kB
dotcom-rendering/dist/4903.client.web.********************.js 6.04 kB
dotcom-rendering/dist/4941.client.web.********************.js 890 B
dotcom-rendering/dist/4951.client.web.********************.js 11.4 kB
dotcom-rendering/dist/5087.client.web.********************.js 439 B
dotcom-rendering/dist/5165.client.web.********************.js 5.32 kB
dotcom-rendering/dist/5340.client.web.********************.js 3.32 kB
dotcom-rendering/dist/5371.client.web.********************.js 3.34 kB
dotcom-rendering/dist/5412.client.web.********************.js 2.89 kB
dotcom-rendering/dist/5538.client.web.********************.js 6.18 kB
dotcom-rendering/dist/5658.client.web.********************.js 750 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B
dotcom-rendering/dist/5761.client.web.********************.js 4.65 kB
dotcom-rendering/dist/5880.client.web.********************.js 828 B
dotcom-rendering/dist/5937.client.web.********************.js 2.17 kB
dotcom-rendering/dist/5944.client.web.********************.js 5.16 kB
dotcom-rendering/dist/5982.client.web.********************.js 3.78 kB
dotcom-rendering/dist/6044.client.web.********************.js 726 B
dotcom-rendering/dist/6071.client.web.********************.js 577 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B
dotcom-rendering/dist/6261.client.web.********************.js 3.03 kB
dotcom-rendering/dist/6291.client.web.********************.js 4.27 kB
dotcom-rendering/dist/6505.client.web.********************.js 1 kB
dotcom-rendering/dist/6598.client.web.********************.js 780 B
dotcom-rendering/dist/661.client.web.********************.js 3.21 kB
dotcom-rendering/dist/6638.client.web.********************.js 907 B
dotcom-rendering/dist/6665.client.web.********************.js 5.03 kB
dotcom-rendering/dist/678.client.web.********************.js 804 B
dotcom-rendering/dist/6915.client.web.********************.js 22.7 kB
dotcom-rendering/dist/7072.client.web.********************.js 3.85 kB
dotcom-rendering/dist/7081.client.web.********************.js 20.2 kB
dotcom-rendering/dist/7116.client.web.********************.js 23 kB
dotcom-rendering/dist/7242.client.web.********************.js 4.52 kB
dotcom-rendering/dist/7341.client.web.********************.js 3.99 kB
dotcom-rendering/dist/7407.client.web.********************.js 3.7 kB
dotcom-rendering/dist/7691.client.web.********************.js 853 B
dotcom-rendering/dist/7713.client.web.********************.js 2.02 kB
dotcom-rendering/dist/7780.client.web.********************.js 2.28 kB
dotcom-rendering/dist/7962.client.web.********************.js 3.58 kB
dotcom-rendering/dist/8103.client.web.********************.js 4.02 kB
dotcom-rendering/dist/83.client.web.********************.js 750 B
dotcom-rendering/dist/8318.client.web.********************.js 2.17 kB
dotcom-rendering/dist/840.client.web.********************.js 3.21 kB
dotcom-rendering/dist/8426.client.web.********************.js 1.91 kB
dotcom-rendering/dist/8437.client.web.********************.js 3.13 kB
dotcom-rendering/dist/8504.client.web.********************.js 827 B
dotcom-rendering/dist/8536.client.web.********************.js 595 B
dotcom-rendering/dist/8626.client.web.********************.js 890 B
dotcom-rendering/dist/8671.client.web.********************.js 157 B
dotcom-rendering/dist/8697.client.web.********************.js 956 B
dotcom-rendering/dist/8730.client.web.********************.js 4.4 kB
dotcom-rendering/dist/8746.client.web.********************.js 3.01 kB
dotcom-rendering/dist/8815.client.web.********************.js 3.86 kB
dotcom-rendering/dist/8822.client.web.********************.js 526 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B
dotcom-rendering/dist/8903.client.web.********************.js 3.83 kB
dotcom-rendering/dist/8990.client.web.********************.js 3.41 kB
dotcom-rendering/dist/9080.client.web.********************.js 3.69 kB
dotcom-rendering/dist/9122.client.web.********************.js 8.08 kB
dotcom-rendering/dist/9132.client.web.********************.js 4.18 kB
dotcom-rendering/dist/9184.client.web.********************.js 493 B
dotcom-rendering/dist/9216.client.web.********************.js 3.45 kB
dotcom-rendering/dist/9373.client.web.********************.js 4.4 kB
dotcom-rendering/dist/940.client.web.********************.js 10.3 kB
dotcom-rendering/dist/9493.client.web.********************.js 785 B
dotcom-rendering/dist/9557.client.web.********************.js 921 B
dotcom-rendering/dist/9608.client.web.********************.js 3.64 kB
dotcom-rendering/dist/9696.client.web.********************.js 5.88 kB
dotcom-rendering/dist/9721.client.web.********************.js 717 B
dotcom-rendering/dist/9736.client.web.********************.js 44.2 kB
dotcom-rendering/dist/9835.client.web.********************.js 647 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 5.96 kB
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.94 kB
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 425 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.57 kB
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.16 kB
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.48 kB
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.52 kB
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.08 kB
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.88 kB
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.54 kB
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.96 kB
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.72 kB
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 8.26 kB
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.96 kB
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.04 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.52 kB
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.8 kB
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.91 kB
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 1.22 kB
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.14 kB
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 5.96 kB
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.75 kB
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js 4.2 kB
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.93 kB
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 970 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 619 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.43 kB
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 347 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.72 kB
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.63 kB
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.82 kB
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.5 kB
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.4 kB
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.22 kB
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10 kB
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B
dotcom-rendering/dist/index.client.web.********************.js 45.9 kB
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 851 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.28 kB
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.24 kB
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.77 kB
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.61 kB
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 2.1 kB
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.51 kB
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.78 kB
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.28 kB
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.83 kB
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.63 kB
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 4.98 kB
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 kB
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4 kB
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.22 kB
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.18 kB
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.32 kB
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.77 kB
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 803 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.97 kB
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.29 kB
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.01 kB
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.61 kB
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB
dotcom-rendering/dist/sentry.client.web.********************.js 792 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.85 kB
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 482 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.72 kB
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 733 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.75 kB
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.51 kB
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.6 kB
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.16 kB
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.48 kB
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 4.8 kB
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.22 kB
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.68 kB
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.9 kB
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 2.7 kB
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 14.7 kB
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.25 kB
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.74 kB
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.8 kB
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js 5.05 kB
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 4.99 kB
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.66 kB
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 5.94 kB

compressed-size-action

@sndrs sndrs marked this pull request as draft October 14, 2024 17:48
@sndrs sndrs added the run_chromatic Runs chromatic when label is applied label Oct 15, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 15, 2024
@sndrs sndrs marked this pull request as ready for review October 21, 2024 13:28
Copy link

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.

@sndrs sndrs added the run_chromatic Runs chromatic when label is applied label Oct 21, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 21, 2024
@sndrs sndrs added the run_chromatic Runs chromatic when label is applied label Oct 21, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 21, 2024
@sndrs sndrs changed the title Add AudioPlayer Add AudioPlayer component Oct 21, 2024
@JamieB-gu JamieB-gu removed this from the DCAR Migration milestone Oct 21, 2024
@sndrs sndrs added this to the Decommission Frontend Rendering milestone Oct 21, 2024
@sndrs sndrs added the run_chromatic Runs chromatic when label is applied label Oct 23, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 23, 2024
@sndrs sndrs added the run_chromatic Runs chromatic when label is applied label Oct 24, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 24, 2024
@sndrs sndrs added the run_chromatic Runs chromatic when label is applied label Oct 24, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 24, 2024
@sndrs sndrs merged commit 40168c4 into main Oct 24, 2024
32 checks passed
@sndrs sndrs deleted the e2e/add-audio-player branch October 24, 2024 14:28
Copy link
Member

@arelra arelra left a comment

Choose a reason for hiding this comment

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

Great work @sndrs ! 🔊

@prout-bot
Copy link

Seen on PROD (merged by @sndrs 13 minutes and 4 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Add audio player to DCR
6 participants