Merge pull request #1656 from Shoaibdev7/Unable-to-take-a-screenshot-…

…on-mac Fixed: Unable to Take a Screenshot on Mac (TLDR)
stakwork · Jun 19, 2024 · 4885b2e · 4885b2e
2 parents 7b0352a + 2b5f1c8
commit 4885b2e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 11 deletions.
diff --git a/src/components/App/SideBar/Trending/BriefDescriptionModal/__tests__/index.tsx b/src/components/App/SideBar/Trending/BriefDescriptionModal/__tests__/index.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable padding-line-between-statements */
+import '@testing-library/jest-dom'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import React from 'react'
 import { BriefDescription } from '..'
@@ -117,4 +119,20 @@ describe('BriefDescription Component Tests', () => {
       expect(onCloseMock).toHaveBeenCalled()
     }, 0)
   })
+
+  it('does not close the modal on Command+Control+3 or Command+Control+4', () => {
+    const { getByTestId } = render(<BriefDescription {...props} />)
+
+    waitFor(() => {
+      const modal = getByTestId('brief-description-modal')
+
+      // With Command+Control+3
+      fireEvent.keyDown(window, { key: '3', ctrlKey: true, metaKey: true })
+      expect(modal).toBeInTheDocument()
+
+      // With Command+Control+4
+      fireEvent.keyDown(window, { key: '4', ctrlKey: true, metaKey: true })
+      expect(modal).toBeInTheDocument()
+    })
+  })
 })
diff --git a/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx b/src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx
@@ -60,29 +60,36 @@ export const BriefDescription: FC<Props> = ({ trend, onClose, selectTrending })
   }
 
   useEffect(() => {
-    const audioElement = audioRef.current
-    const onAudioPlaybackComplete = () => setIsPlaying(false)
+    const audioElement = audioRef.current;
+
+    const onAudioPlaybackComplete = () => {
+      setIsPlaying(false);
+      setCurrentPlayingAudio(null);
+    };
 
     if (audioElement) {
-      audioElement.addEventListener('ended', onAudioPlaybackComplete)
+      audioElement.addEventListener('ended', onAudioPlaybackComplete);
     }
 
-    window.addEventListener('keydown', handleClose)
-
     return () => {
       if (audioElement) {
-        audioElement.removeEventListener('ended', onAudioPlaybackComplete)
+        audioElement.removeEventListener('ended', onAudioPlaybackComplete);
       }
-
-      window.removeEventListener('keydown', handleClose)
-    }
-  }, [handleClose])
+    };
+  }, [setCurrentPlayingAudio]);
 
   const showPlayBtn =
     (currentPlayingAudio?.current?.src === trend.audio_EN && !currentPlayingAudio?.current?.paused) || isPlaying
 
   return (
-    <BaseModal id="briefDescription" kind="regular" noWrap onClose={handleClose} preventOutsideClose>
+    <BaseModal
+      data-testid="brief-description-modal"
+      id="briefDescription"
+      kind="regular"
+      noWrap
+      onClose={handleClose}
+      preventOutsideClose
+    >
       {trend.audio_EN ? (
         <>
           <StyledHeader>