Merge branch 'dev' into irish

Author: wackerow

next.config.js

@@ -116,6 +116,7 @@ module.exports = (phase, { defaultConfig }) => {
             "node_modules/@swc/core-linux-x64-musl",
             "node_modules/@esbuild/linux-x64",
             "src/data",
+            "src/intl",
             "public/**/*.jpg",
             "public/**/*.png",
             "public/**/*.webp",
@@ -127,6 +128,7 @@ module.exports = (phase, { defaultConfig }) => {
             "public/**/*.pdf",
             "public/fonts",
             "public/images",
+            "public/content",
           ],
         },
       },

src/components/ListenToPlayer/ListenToPlayer.stories.tsx

@@ -1,46 +1,42 @@
 import type { Meta, StoryObj } from "@storybook/react"
+import { expect } from "@storybook/test"
+import { waitFor } from "@storybook/test"
+import { fireEvent } from "@storybook/test"
+import { within } from "@storybook/test"
 
-import { langViewportModes } from "../../../.storybook/modes"
-import { BaseLayout as BaseLayoutComponent } from "../../layouts/BaseLayout"
-
-import ListenToPlayer from "."
+import Component from "."
 
 const meta = {
-  title: "Atoms / Media & Icons / ListenToPlayer / ListenToPlayer",
-  component: BaseLayoutComponent,
-  parameters: {
-    layout: "fullscreen",
-    chromatic: {
-      modes: {
-        ...langViewportModes,
-      },
-    },
-  },
-  argTypes: {
-    children: {
-      table: {
-        disable: true,
-      },
-    },
-    lastDeployLocaleTimestamp: {
-      table: {
-        disable: true,
-      },
-    },
+  title: "Atoms / Media & Icons / ListenToPlayer",
+  component: Component,
+  args: {
+    slug: "/eth/",
   },
-} satisfies Meta<typeof BaseLayoutComponent>
+} satisfies Meta<typeof Component>
 
 export default meta
 
-export const BaseLayout: StoryObj<typeof meta> = {
-  args: {
-    children: (
-      <div className="flex w-full flex-col items-center gap-4 px-8 py-9 md:flex-row">
-        <ListenToPlayer slug="/eth" />
-      </div>
-    ),
-    // contentIsOutdated: false,
-    // contentNotTranslated: false,
-    lastDeployLocaleTimestamp: "May 14, 2021",
+type Story = StoryObj<typeof meta>
+
+export const PlayerButton: Story = {}
+
+export const PlayerWidget: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const canvasParent = within(canvasElement.parentElement!)
+
+    const playerButton = canvas.getByRole("button")
+    await waitFor(() => {
+      // TODO: hacky way to wait for the sound to be loaded
+      expect(playerButton.textContent).not.toContain("0 min")
+    })
+
+    fireEvent.click(playerButton)
+
+    await waitFor(async () => {
+      await expect(
+        canvasParent.getByTestId("player-widget-modal")
+      ).toBeVisible()
+    })
   },
 }

src/components/ListenToPlayer/TopOfPagePlayer/index.tsx

@@ -1,4 +1,5 @@
 import { PauseCircleIcon, PlayCircleIcon } from "@/components/icons/listen-to"
+import { Button } from "@/components/ui/buttons/Button"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
@@ -18,20 +19,21 @@ const TopOfPagePlayer = ({
   handlePlayPause,
 }: TopOfPagePlayerProps) => {
   return (
-    <div className="inline-block w-full rounded-lg bg-background-low p-2 hover:bg-background-medium lg:w-auto">
-      <div
-        className="flex cursor-pointer flex-row items-center gap-2 text-primary hover:text-primary-hover"
-        onClick={() => {
-          if (startedPlaying) {
-            trackCustomEvent({
-              eventCategory: "Audio",
-              eventAction: "click",
-              eventName: "start",
-            })
-          }
-          handlePlayPause()
-        }}
-      >
+    <Button
+      variant="ghost"
+      className="inline-block w-full rounded-lg bg-background-low p-2 hover:bg-background-medium lg:w-auto"
+      onClick={() => {
+        if (startedPlaying) {
+          trackCustomEvent({
+            eventCategory: "Audio",
+            eventAction: "click",
+            eventName: "start",
+          })
+        }
+        handlePlayPause()
+      }}
+    >
+      <div className="flex flex-row items-center gap-2 text-primary hover:text-primary-hover">
         {startedPlaying ? (
           isPlaying ? (
             <PauseCircleIcon className="h-6 w-6 transition-transform" />
@@ -52,7 +54,7 @@ const TopOfPagePlayer = ({
           )}
         </div>
       </div>
-    </div>
+    </Button>
   )
 }
 

src/components/ListenToPlayer/index.tsx

@@ -225,6 +225,7 @@ const ListenToPlayer = ({ slug }: { slug: string }) => {
             isExpanded ? "bottom-4" : "bottom-0",
             "fixed left-1/2 right-auto z-10 -translate-x-1/2 sm:left-auto sm:right-5 sm:translate-x-0"
           )}
+          data-testid="player-widget-modal"
         >
           <div className="relative">
             <PlayerWidget

src/data/execution-bounty-hunters.json

@@ -2,12 +2,22 @@
   {
     "username": "holiman",
     "name": "Martin Holst Swende",
-    "score": 42500
+    "score": 43500
+  },  
+  {
+    "username": "guidovranken",
+    "name": "Guido Vranken",
+    "score": 35250
   },
   {
     "username": "samczsun",
     "name": "Sam Sun",
     "score": 35000
+  },  
+  {
+    "username": "",
+    "name": "nrv (@nervoir)",
+    "score": 31000
   },
   {
     "username": "chainsecurity",
@@ -24,21 +34,11 @@
     "name": "Yoonho Kim (team Hithereum)",
     "score": 20000
   },
-  {
-    "username": "",
-    "name": "nrv (@nervoir)",
-    "score": 31000
-  },
   {
     "username": "johnyangk",
     "name": "John Youngseok Yang (Software Platform Lab)",
     "score": 20000
   },
-  {
-    "username": "guidovranken",
-    "name": "Guido Vranken",
-    "score": 34250
-  },
   {
     "username": "peckshield",
     "name": "PeckShield",