Get feature on pages

Author: corwintines

next.config.js

@@ -57,6 +57,14 @@ module.exports = (phase, { defaultConfig }) => {
       // Modify the file loader rule to ignore *.svg, since we have it handled now.
       fileLoaderRule.exclude = /\.svg$/i
 
+      config.module.rules.push({
+        test: /\.(mp3)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "static/media/[name][ext]",
+        },
+      })
+
       return config
     },
     i18n,

src/components/ListenToPlayer/index.tsx

@@ -23,6 +23,9 @@ const ListenToPlayer = ({ slug }) => {
   const duration = sound?.duration() ?? 0
 
   useEffect(() => {
+    // Guard clause to prevent accessing playlist when empty
+    if (!playlist.length || currentTrackIndex === -1) return
+
     const audioPlayer = new Howl({
       src: [playlist[currentTrackIndex].audioFile],
       html5: true,
@@ -139,12 +142,7 @@ const ListenToPlayer = ({ slug }) => {
     setPlaybackSpeed(speed)
   }
 
-  const title =
-    countdown > 0
-      ? `Next article in ${countdown}s`
-      : t(playlist[currentTrackIndex].title)
-
-  return (
+  return playlist.length > 0 && index !== -1 ? (
     <>
       <TopOfPagePlayer
         duration={duration}
@@ -157,7 +155,11 @@ const ListenToPlayer = ({ slug }) => {
         autoplay={autoplay}
         setAutoplay={setAutoplay}
         showWidget={showWidget}
-        title={title}
+        title={
+          countdown > 0
+            ? `Next article in ${countdown}s`
+            : t(playlist[currentTrackIndex].title)
+        }
         duration={duration}
         timeRemaining={timeRemaining}
         onSeek={handleSeek}
@@ -170,6 +172,8 @@ const ListenToPlayer = ({ slug }) => {
         handleCloseWidget={handleCloseWidget}
       />
     </>
+  ) : (
+    <></>
   )
 }
 

src/data/listen-to-feature/playlist.ts

@@ -7,29 +7,29 @@ import whatIsEthereumAudio from "@/audio/what-is-ethereum/what-is-ethereum.mp3"
 export const listenToPlaylists = {
   learn: [
     {
-      title: "what-is-ether",
-      audioFile: ethAudio,
-      slug: "/eth",
+      title: "what-is-ethereum",
+      audioFile: whatIsEthereumAudio,
+      slug: "/what-is-ethereum/",
     },
     {
-      title: "smart-contracts",
-      audioFile: smartContractsAudio,
-      slug: "/smart-contracts",
+      title: "what-is-ether",
+      audioFile: ethAudio,
+      slug: "/eth/",
     },
     {
       title: "wallets",
       audioFile: walletsAudio,
-      slug: "/wallets",
+      slug: "/wallets/",
     },
     {
       title: "web3",
       audioFile: web3Audio,
-      slug: "/web3",
+      slug: "/web3/",
     },
     {
-      title: "what-is-ethereum",
-      audioFile: whatIsEthereumAudio,
-      slug: "/what-is-ethereum",
+      title: "smart-contracts",
+      audioFile: smartContractsAudio,
+      slug: "/smart-contracts/",
     },
   ],
 }
@@ -46,5 +46,5 @@ export const getPlaylistBySlug = (
       return { playlist, index }
     }
   }
-  throw new Error(`Playlist with slug "${slug}" not found`)
+  return { playlist: [], index: -1 }
 }

src/layouts/Static.tsx

@@ -13,6 +13,7 @@ import GlossaryDefinition from "@/components/Glossary/GlossaryDefinition"
 import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip"
 import { HubHero } from "@/components/Hero"
 import NetworkUpgradeSummary from "@/components/History/NetworkUpgradeSummary"
+import ListenToPlayer from "@/components/ListenToPlayer"
 import Logo from "@/components/Logo"
 import MainArticle from "@/components/MainArticle"
 import MatomoOptOut from "@/components/MatomoOptOut"
@@ -118,6 +119,7 @@ export const StaticLayout = ({
                   {lastEditLocaleTimestamp}
                 </p>
               )}
+              <ListenToPlayer slug={asPath} />
             </Stack>
           )}
 

src/pages/eth.tsx

@@ -1,4 +1,5 @@
 import { GetStaticProps } from "next"
+import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import type { ComponentProps } from "react"
@@ -26,6 +27,7 @@ import HorizontalCard from "@/components/HorizontalCard"
 import { Image } from "@/components/Image"
 import InfoBanner from "@/components/InfoBanner"
 import InlineLink from "@/components/Link"
+import ListenToPlayer from "@/components/ListenToPlayer"
 import MainArticle from "@/components/MainArticle"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
@@ -266,6 +268,7 @@ export const getStaticProps = (async ({ locale }) => {
 
 const EthPage = () => {
   const { t } = useTranslation("page-eth")
+  const { asPath } = useRouter()
 
   const tokens = [
     {
@@ -391,6 +394,9 @@ const EthPage = () => {
       </Content>
       <GrayContainer>
         <Content>
+          <div className="mb-8">
+            <ListenToPlayer slug={asPath} />
+          </div>
           <Intro>
             <Text>{t("page-eth-description")} </Text>
           </Intro>

src/pages/wallets/index.tsx

@@ -22,6 +22,7 @@ import HorizontalCard, {
   HorizontalCardProps,
 } from "@/components/HorizontalCard"
 import { Image } from "@/components/Image"
+import ListenToPlayer from "@/components/ListenToPlayer"
 import MainArticle from "@/components/MainArticle"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
@@ -148,7 +149,7 @@ export const getStaticProps = (async ({ locale }) => {
 }) satisfies GetStaticProps<BasePageProps>
 
 const WalletsPage = () => {
-  const { locale } = useRouter()
+  const { locale, asPath } = useRouter()
   const { t } = useTranslation("page-wallets")
 
   const heroContent = {
@@ -296,6 +297,9 @@ const WalletsPage = () => {
       />
       <PageHero content={heroContent} isReverse />
       <GrayContainer>
+        <Content mb={-8}>
+          <ListenToPlayer slug={asPath} />
+        </Content>
         <Intro>
           <H2>{t("page-wallets-whats-a-wallet")}</H2>
         </Intro>

src/pages/what-is-ethereum.tsx

@@ -26,6 +26,7 @@ import Card from "@/components/Card"
 import EnergyConsumptionChart from "@/components/EnergyConsumptionChart"
 import FeedbackCard from "@/components/FeedbackCard"
 import { TwImage } from "@/components/Image"
+import ListenToPlayer from "@/components/ListenToPlayer"
 import MainArticle from "@/components/MainArticle"
 import PageMetadata from "@/components/PageMetadata"
 import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
@@ -206,7 +207,7 @@ const WhatIsEthereumPage = ({
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const { t } = useTranslation(["page-what-is-ethereum", "learn-quizzes"])
 
-  const { locale } = useRouter()
+  const { locale, asPath } = useRouter()
   const localeForNumberFormat = getLocaleForNumberFormat(locale! as Lang)
 
   const formatNumber = (
@@ -343,6 +344,9 @@ const WhatIsEthereumPage = ({
         </Content>
         <div className="w-full bg-background-highlight">
           <Section>
+            <div className="mb-8">
+              <ListenToPlayer slug={asPath} />
+            </div>
             <Stack className="gap-14">
               <TwoColumnContent id="summary">
                 <Width60>