From b520ee2005a26366fd4dd87e6a4261c23ad37303 Mon Sep 17 00:00:00 2001
From: MuhammadUmer44 <muhammadumerakhtar51@gmail.com>
Date: Wed, 17 Apr 2024 09:10:32 +0500
Subject: [PATCH 1/3] fix(play-and-pause): fix play and pause functionality
 with tapping and space button

---
 .../SidebarSubView/MediaPlayer/index.tsx      | 46 ++++++++++++-------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx b/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx
index 0c652635b..772df2413 100644
--- a/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx
+++ b/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx
@@ -140,6 +140,9 @@ const MediaPlayerComponent: FC<Props> = ({ hidden }) => {
       if (isFullScreen && event.key === 'Escape') {
         event.preventDefault()
         event.stopPropagation()
+      } else if (event.key === ' ') {
+        event.preventDefault()
+        togglePlay()
       }
     }
 
@@ -152,27 +155,33 @@ const MediaPlayerComponent: FC<Props> = ({ hidden }) => {
     }
   })
 
+  const handlePlayerClick = () => {
+    togglePlay()
+  }
+
   return playingNode?.link ? (
     <Wrapper ref={wrapperRef} hidden={hidden}>
       <Cover>
         <Avatar size={120} src={playingNode?.image_url || ''} type="clip" />
       </Cover>
-      <ReactPlayer
-        ref={playerRef}
-        controls={false}
-        height={!isFullScreen ? '200px' : window.screen.height}
-        onBuffer={() => setStatus('buffering')}
-        onBufferEnd={() => setStatus('ready')}
-        onError={handleError}
-        onPause={handlePause}
-        onPlay={handlePlay}
-        onProgress={handleProgress}
-        onReady={handleReady}
-        playing={isPlaying}
-        url={playingNode?.link || ''}
-        volume={volume}
-        width="100%"
-      />
+      <PlayerWrapper onClick={handlePlayerClick}>
+        <ReactPlayer
+          ref={playerRef}
+          controls={false}
+          height={!isFullScreen ? '200px' : window.screen.height}
+          onBuffer={() => setStatus('buffering')}
+          onBufferEnd={() => setStatus('ready')}
+          onError={handleError}
+          onPause={handlePause}
+          onPlay={handlePlay}
+          onProgress={handleProgress}
+          onReady={handleReady}
+          playing={isPlaying}
+          url={playingNode?.link || ''}
+          volume={volume}
+          width="100%"
+        />
+      </PlayerWrapper>
       {status === 'error' ? (
         <ErrorWrapper className="error-wrapper">Error happened, please try later</ErrorWrapper>
       ) : null}
@@ -230,4 +239,9 @@ const ErrorWrapper = styled(Flex)`
   color: ${colors.primaryRed};
 `
 
+const PlayerWrapper = styled.div`
+  width: 100%;
+  cursor: pointer;
+`
+
 export const MediaPlayer = memo(MediaPlayerComponent)

From 5dcd655240c0999ac826c16cc634a73bc116392a Mon Sep 17 00:00:00 2001
From: MuhammadUmer44 <muhammadumerakhtar51@gmail.com>
Date: Wed, 17 Apr 2024 09:50:18 +0500
Subject: [PATCH 2/3] fix(play-and-pause): fix cypress test

---
 cypress/e2e/admin/signin.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/admin/signin.cy.ts b/cypress/e2e/admin/signin.cy.ts
index bfe9c0f59..f5a9bdb83 100644
--- a/cypress/e2e/admin/signin.cy.ts
+++ b/cypress/e2e/admin/signin.cy.ts
@@ -7,7 +7,7 @@ describe('Admin Login', () => {
       url: 'http://localhost:8444/api/about*',
     }).as('updateAbout')
 
-    const title = `Testing NavFiber`
+    const title = `TestingNavFiber`
 
     // Open settings modal
     cy.get('div[data-testid="settings-modal"]').should('be.visible').click()

From 252a21a77fd116d0d8f962b0e8112c0efacbade9 Mon Sep 17 00:00:00 2001
From: MuhammadUmer44 <muhammadumerakhtar51@gmail.com>
Date: Wed, 17 Apr 2024 10:31:38 +0500
Subject: [PATCH 3/3] fix(play-and-pause): fix cypress test

---
 cypress/e2e/admin/signin.cy.ts                     |  2 +-
 .../SideBar/SidebarSubView/MediaPlayer/index.tsx   | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/cypress/e2e/admin/signin.cy.ts b/cypress/e2e/admin/signin.cy.ts
index f5a9bdb83..bfe9c0f59 100644
--- a/cypress/e2e/admin/signin.cy.ts
+++ b/cypress/e2e/admin/signin.cy.ts
@@ -7,7 +7,7 @@ describe('Admin Login', () => {
       url: 'http://localhost:8444/api/about*',
     }).as('updateAbout')
 
-    const title = `TestingNavFiber`
+    const title = `Testing NavFiber`
 
     // Open settings modal
     cy.get('div[data-testid="settings-modal"]').should('be.visible').click()
diff --git a/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx b/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx
index 772df2413..588f606e3 100644
--- a/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx
+++ b/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx
@@ -15,6 +15,7 @@ type Props = {
 const MediaPlayerComponent: FC<Props> = ({ hidden }) => {
   const playerRef = useRef<ReactPlayer | null>(null)
   const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const [isFocused, setIsFocused] = useState(false)
   const [isFullScreen, setIsFullScreen] = useState(false)
   const [isMouseNearBottom, setIsMouseNearBottom] = useState(false)
   const [status, setStatus] = useState<'buffering' | 'error' | 'ready'>('ready')
@@ -140,7 +141,7 @@ const MediaPlayerComponent: FC<Props> = ({ hidden }) => {
       if (isFullScreen && event.key === 'Escape') {
         event.preventDefault()
         event.stopPropagation()
-      } else if (event.key === ' ') {
+      } else if (isFocused && event.key === ' ') {
         event.preventDefault()
         togglePlay()
       }
@@ -160,7 +161,13 @@ const MediaPlayerComponent: FC<Props> = ({ hidden }) => {
   }
 
   return playingNode?.link ? (
-    <Wrapper ref={wrapperRef} hidden={hidden}>
+    <Wrapper
+      ref={wrapperRef}
+      hidden={hidden}
+      onBlur={() => setIsFocused(false)}
+      onFocus={() => setIsFocused(true)}
+      tabIndex={0}
+    >
       <Cover>
         <Avatar size={120} src={playingNode?.image_url || ''} type="clip" />
       </Cover>
@@ -215,6 +222,9 @@ const Wrapper = styled(Flex)<Props>`
   border-top-left-radius: 16px;
   overflow: hidden;
   height: ${(props) => (props.hidden ? '0px' : 'auto')};
+  &:focus {
+    outline: none;
+  }
 `
 
 const Cover = styled(Flex)`