ar(feat) DPCP-31: Audio Player

dreampipcom · Aug 4, 2024 · 0286c1a · 0286c1a
1 parent 15b007f
commit 0286c1a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 28 deletions.
diff --git a/src/atoms/10_Grid/Grid.tsx b/src/atoms/10_Grid/Grid.tsx
@@ -112,14 +112,14 @@ export const HGrid = function ({
     {
       [`
           grid-cols-6
-          md:grid-cols-8
+          md:grid-cols-12
           `]: coercedVariant === EGridVariant.DEFAULT,
       [`
           grid-cols-1
           md:grid-cols-1
           `]: coercedVariant === EGridVariant.ONE_COLUMN,
       [`
-          grid-cols-6
+          grid-cols-12
           md:grid-cols-12
           `]: coercedVariant === EGridVariant.TWELVE_COLUMNS,
       [`

diff --git a/src/molecules/02_AudioPlayer/AudioPlayer.tsx b/src/molecules/02_AudioPlayer/AudioPlayer.tsx
@@ -2,10 +2,6 @@
 // @atoms/AudioPlayer.tsx
 import clsx from 'clsx';
 import { Fragment, useRef, useState, useEffect } from 'react';
-import Grid, {
-  EBleedVariant,
-  EGridVariant,
-} from '../../atoms/10_Grid/Grid.tsx';
 
 import { Button, ButtonVariant, EButtonTheme } from '../../atoms/01_Button';
 import { Typography } from '../../atoms/02_Typography';
@@ -73,10 +69,8 @@ export const HAudioPlayer = function ({
   const gridSx = [
     {
       [`class02
-        grid
-        sm:grid-cols-12
-        sm:!gap-a0
-        md:!gap-a1
+        flex
+        col-span-full col-start-0
         content-center
         items-center
         align-center
@@ -108,28 +102,23 @@ export const HAudioPlayer = function ({
   };
 
   useEffect(() => {
+    const element = audioElement.current;
     const handlePlay = handleStatus('playing', {
-      title: audioElement.current?.getAttribute('data-title') || prompt,
+      title: element.getAttribute('data-title') || prompt,
     });
     const handleStop = handleStatus('stopped', {});
-    audioElement.current?.addEventListener('play', handlePlay);
-    audioElement.current?.addEventListener('ended', handleStop);
+    element.addEventListener('play', handlePlay);
+    element.addEventListener('ended', handleStop);
 
     return () => {
-      audioElement.current?.removeEventListener('play', handlePlay);
-      audioElement.current?.removeEventListener('ended', handleStop);
+      element.removeEventListener('play', handlePlay);
+      element.removeEventListener('ended', handleStop);
     };
   }, [status]);
 
   return (
-    <Grid
-      theme={theme}
-      id={id}
-      className={gridStyles}
-      variant={EGridVariant.TWELVE_COLUMNS}
-      bleed={EBleedVariant.RESPONSIVE}
-    >
-      <div className="flex items-center justify-center col-span-full sm:col-span-1 lg:col-span-1 col-start-0">
+    <div id={id} className={gridStyles}>
+      <div className="flex items-center justify-center">
         <Button
           className="w-full"
           theme={theme}
@@ -164,13 +153,10 @@ export const HAudioPlayer = function ({
           ))}
         </audio>
       </div>
-      <Typography
-        className="col-span-full sm:col-span-6 lg:col-span-4 col-start-0"
-        truncate
-      >
+      <Typography className="col-span-4 col-start-1" truncate>
         {title}
       </Typography>
-    </Grid>
+    </div>
   );
 };