styling and story for in context use

Author: corwintines

src/components/ListenToPlayer/ListenToPlayer.stories.tsx

@@ -1,17 +1,46 @@
-import { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react"
 
-import ListenToPlayerComponent from "."
+import { langViewportModes } from "../../../.storybook/modes"
+import { BaseLayout as BaseLayoutComponent } from "../../layouts/BaseLayout"
+
+import ListenToPlayer from "."
 
 const meta = {
   title: "Atoms / Media & Icons / ListenToPlayer / ListenToPlayer",
-  component: ListenToPlayerComponent,
-  args: {
-    slug: "/eth",
+  component: BaseLayoutComponent,
+  parameters: {
+    layout: "fullscreen",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
+  },
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+    lastDeployLocaleTimestamp: {
+      table: {
+        disable: true,
+      },
+    },
   },
-} satisfies Meta<typeof ListenToPlayerComponent>
+} satisfies Meta<typeof BaseLayoutComponent>
 
 export default meta
 
-type Story = StoryObj<typeof meta>
-
-export const ListenToPlayer: Story = {}
+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",
+  },
+}

src/components/ListenToPlayer/PlayerWidget/index.tsx

@@ -24,7 +24,7 @@ interface PlayerWidgetProps {
   handleNext: () => void
   playbackSpeed: number
   handlePlaybackSpeed: (playbackSpeed: number) => void
-  setShowWidget: (showWidget: boolean) => void
+  handleCloseWidget: () => void
 }
 
 const PlayerWidget = ({
@@ -41,7 +41,7 @@ const PlayerWidget = ({
   handleNext,
   playbackSpeed,
   handlePlaybackSpeed,
-  setShowWidget,
+  handleCloseWidget,
 }: PlayerWidgetProps) => {
   const [isExpanded, setIsExpanded] = useState(true)
   const [isDragging, setIsDragging] = useState(false)
@@ -106,7 +106,11 @@ const PlayerWidget = ({
 
   return (
     <div
-      className={` ${showWidget ? "block" : "hidden"} border shadow-player-widget-shadow ${isExpanded ? "w-80 rounded-2xl px-4 py-4" : "w-56 rounded-t-2xl px-2 py-2"} `}
+      className={` ${showWidget ? "block" : "hidden"} border bg-background shadow-player-widget-shadow ${
+        isExpanded
+          ? "w-80 rounded-2xl px-4 py-4"
+          : "w-80 rounded-t-2xl px-2 py-2"
+      } fixed ${isExpanded ? "bottom-4" : "bottom-0"} right-5 z-[9999]`}
     >
       <div className={`flex flex-col gap-2 ${isExpanded ? "block" : "hidden"}`}>
         <div className="flex justify-between">
@@ -219,7 +223,7 @@ const PlayerWidget = ({
             <IoClose
               onClick={() => {
                 setIsExpanded(!isExpanded)
-                setShowWidget(false)
+                handleCloseWidget()
               }}
             />
           </div>

src/components/ListenToPlayer/index.tsx

@@ -103,6 +103,11 @@ const ListenToPlayer = ({ slug }) => {
     }
   }
 
+  const handleCloseWidget = () => {
+    setShowWidget(false)
+    sound?.pause()
+  }
+
   const handleSeek = (time: number) => {
     if (!sound) return
     sound.seek(time)
@@ -162,7 +167,7 @@ const ListenToPlayer = ({ slug }) => {
         handleNext={handleNext}
         playbackSpeed={playbackSpeed}
         handlePlaybackSpeed={handlePlaybackSpeed}
-        setShowWidget={setShowWidget}
+        handleCloseWidget={handleCloseWidget}
       />
     </>
   )