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.

Sign up for GitHub

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

Jump to bottom

Remove volume controls from AudioPlayer #12688

Merged
merged 1 commit into from
Oct 25, 2024
Merged

Remove volume controls from AudioPlayer #12688

merged 1 commit into from
Oct 25, 2024
+4 −125

Conversation

sndrs
Copy link
Member

@sndrs sndrs commented Oct 25, 2024

What does this change?

Removes the mute/unmute controls from the AudioPlayer.

Why?

They're currently (in frontend) hidden on mobile safari and android browsers and enabled everywhere else.

But for those who get them it only offers on/off functionality, which is the same as play/pause.

The only thing removing them completely stops you being able to do is playing while muted.

So rather than improve mobile device detection, we're just going to remove them for everyone.

closes #12683

@sndrs @oliverabrahams
Refactor audio player component to remove volume controls
1b1aa45 
They're only mute/unmute, which is the same as pause/play. Unless you really want to mute it while leaving it playing...sorry if that was you.

Co-authored-by: oliverabrahams <ollie.abrahams@guardian.co.uk>
@sndrs sndrs added the run_chromatic Runs chromatic when label is applied label Oct 25, 2024
@sndrs sndrs added this to the Decommission Frontend Rendering milestone Oct 25, 2024
@sndrs sndrs requested a review from a team as a code owner October 25, 2024 15:10
@github-actions github-actions bot added dotcom-rendering and removed run_chromatic Runs chromatic when label is applied labels Oct 25, 2024
@github-actions GitHub Actions
Copy link

Size Change: -740 B (-0.08%)

Total Size: 927 kB

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

compressed-size-action

oliverabrahams
oliverabrahams approved these changes Oct 25, 2024
View reviewed changes
Copy link
Contributor

@oliverabrahams oliverabrahams left a comment

Choose a reason for hiding this comment

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

💯

@sndrs sndrs merged commit 5438cc2 into main Oct 25, 2024
33 checks passed
@sndrs sndrs deleted the e2e/remove-volume-audio-player branch October 25, 2024 15:17
@prout-bot
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliverabrahams oliverabrahams oliverabrahams approved these changes

Assignees

@sndrs sndrs

@oliverabrahams oliverabrahams

Labels
dotcom-rendering Seen-on-PROD
Projects
WebX Team
Status: Done
Milestone
Decommission Frontend Rendering
Development

Successfully merging this pull request may close these issues.

Should we hide volume buttons on mobile devices?
3 participants
@sndrs @prout-bot @oliverabrahams