Merge branch 'develop'

francoborrelli · Apr 15, 2024 · 91fd6c1 · 91fd6c1
2 parents df60698 + c3b2f54
commit 91fd6c1
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 14 deletions.
diff --git a/src/pages/Home/PlayCircle.tsx b/src/pages/Home/PlayCircle.tsx
@@ -3,22 +3,36 @@ import { FC } from 'react';
 interface PlayCircleProps {
   size?: number;
   big?: boolean;
+  playing?: boolean;
+  onClick?: () => void;
 }
 
-export const PlayCircle: FC<PlayCircleProps> = ({ size = 20, big }) => {
+export const PlayCircle: FC<PlayCircleProps> = ({ size = 20, big, playing, onClick }) => {
   return (
-    <span className={big ? 'circle-play big' : 'circle-play'}>
+    <button onClick={onClick} className={big ? 'circle-play big' : 'circle-play'}>
       <span>
-        <svg
-          style={{ height: size }}
-          data-encore-id='icon'
-          role='img'
-          aria-hidden='true'
-          viewBox='0 0 16 16'
-        >
-          <path d='M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z'></path>
-        </svg>
+        {!playing ? (
+          <svg
+            style={{ height: size }}
+            data-encore-id='icon'
+            role='img'
+            aria-hidden='true'
+            viewBox='0 0 16 16'
+          >
+            <path d='M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z'></path>
+          </svg>
+        ) : (
+          <svg
+            style={{ height: size }}
+            data-encore-id='icon'
+            role='img'
+            aria-hidden='true'
+            viewBox='0 0 24 24'
+          >
+            <path d='M5.7 3a.7.7 0 0 0-.7.7v16.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V3.7a.7.7 0 0 0-.7-.7H5.7zm10 0a.7.7 0 0 0-.7.7v16.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V3.7a.7.7 0 0 0-.7-.7h-2.6z'></path>
+          </svg>
+        )}
       </span>
-    </span>
+    </button>
   );
 };
diff --git a/src/pages/Playlist/controls.tsx b/src/pages/Playlist/controls.tsx
@@ -14,6 +14,7 @@ import { useAppDispatch, useAppSelector } from '../../store/store';
 // Interfaces
 import type { FC } from 'react';
 import type { Playlist } from '../../interfaces/types';
+import { playingBarActions } from '../../store/slices/playingBar';
 
 export const PlaylistControls: FC<{ playlist: Playlist }> = ({ playlist }) => {
   const dispatch = useAppDispatch();
@@ -23,11 +24,11 @@ export const PlaylistControls: FC<{ playlist: Playlist }> = ({ playlist }) => {
   const [t] = useTranslation(['playlist']);
 
   const filters = ['ALL', ...(playlist.filters || [])];
+  const playing = useAppSelector((state) => state.playingBar.playing);
 
   const items = filters.map((filter) => ({
     key: filter,
     label: tor(filter),
-
     onClick: () => dispatch(playlistActions.setOrder({ order: filter })),
   }));
 
@@ -36,7 +37,18 @@ export const PlaylistControls: FC<{ playlist: Playlist }> = ({ playlist }) => {
       <Row justify='space-between' align='middle'>
         <Col>
           <Space>
-            <PlayCircle size={30} big />
+            <PlayCircle
+              size={30}
+              big
+              playing={playing}
+              onClick={() => {
+                if (playing) {
+                  dispatch(playingBarActions.setPause());
+                } else {
+                  dispatch(playingBarActions.setPlaying());
+                }
+              }}
+            />
             <MenuDots />
           </Space>
         </Col>