made the verse actions popup close automatically after the user starts playing a verse

src/components/AudioPlayer/Buttons/RepeatButton.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { SetStateAction, useContext, useState, Dispatch } from 'react';
 
 import { useSelector } from '@xstate/react';
 import useTranslation from 'next-translate/useTranslation';
@@ -16,7 +16,11 @@ import { logButtonClick } from '@/utils/eventLogger';
 import { selectIsLoading } from '@/xstate/actors/audioPlayer/selectors';
 import { AudioPlayerMachineContext } from 'src/xstate/AudioPlayerMachineContext';
 
-const RepeatAudioButton = () => {
+interface RepeatAudioButton {
+  setOpenOverflowAudioPlayerActionsMenu: Dispatch<SetStateAction<boolean>>;
+}
+
+const RepeatAudioButton = ({ setOpenOverflowAudioPlayerActionsMenu }: RepeatAudioButton) => {
   const { t } = useTranslation('common');
   const audioService = useContext(AudioPlayerMachineContext);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -68,6 +72,7 @@ const RepeatAudioButton = () => {
           chapterId={currentSurah.toString()}
           isOpen={isModalOpen}
           onClose={() => setIsModalOpen(false)}
+          setOpenOverflowActionsMenu={setOpenOverflowAudioPlayerActionsMenu}
         />
       )}
     </>

src/components/AudioPlayer/OverflowAudioPlayActionsMenuBody.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useContext, useEffect } from 'react';
+import { useState, useMemo, useContext, useEffect, SetStateAction, Dispatch } from 'react';
 
 import { useSelector } from '@xstate/react';
 import useTranslation from 'next-translate/useTranslation';
@@ -38,7 +38,11 @@ enum AudioPlayerOverflowMenu {
   Experience = 'experience',
 }
 
-const OverflowAudioPlayActionsMenuBody = () => {
+interface OverflowAudioPlayActionsMenuBodyProps {
+  setOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+const OverflowAudioPlayActionsMenuBody = ({ setOpen }: OverflowAudioPlayActionsMenuBodyProps) => {
   const [selectedMenu, setSelectedMenu] = useState<AudioPlayerOverflowMenu>(
     AudioPlayerOverflowMenu.Main,
   );
@@ -76,7 +80,7 @@ const OverflowAudioPlayActionsMenuBody = () => {
     () => ({
       [AudioPlayerOverflowMenu.Main]: [
         <DownloadAudioButton key={0} />,
-        <RepeatButton key={1} />,
+        <RepeatButton key={1} setOpenOverflowAudioPlayerActionsMenu={setOpen} />,
         <PopoverMenu.Divider key={2} />,
         <PopoverMenu.Item
           key={3}
@@ -134,7 +138,7 @@ const OverflowAudioPlayActionsMenuBody = () => {
         <AudioExperienceMenu onBack={() => setSelectedMenu(AudioPlayerOverflowMenu.Main)} />
       ),
     }),
-    [t, playbackRate],
+    [t, playbackRate, setOpen],
   );
 
   return <>{menus[selectedMenu]}</>;

src/components/AudioPlayer/OverflowAudioPlayerActionsMenu.tsx

@@ -91,7 +91,7 @@ const OverflowAudioPlayerActionsMenu = () => {
         onOpenChange={onOpenChange}
         contentClassName={styles.overriddenPopoverMenuContentPositioning}
       >
-        <OverflowAudioPlayActionsMenuBody />
+        <OverflowAudioPlayActionsMenuBody setOpen={setOpen} />
       </PopoverMenu>
     </div>
   );

src/components/AudioPlayer/RepeatAudioModal/RepeatAudioModal.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-import { useMemo, useState, useEffect, useContext } from 'react';
+import { useMemo, useState, useEffect, useContext, SetStateAction, Dispatch } from 'react';
 
 import { useSelector } from '@xstate/react';
 import useTranslation from 'next-translate/useTranslation';
@@ -31,6 +31,7 @@ type RepeatAudioModalProps = {
   onClose: () => void;
   defaultRepetitionMode: RepetitionMode;
   selectedVerseKey?: string;
+  setOpenOverflowActionsMenu: Dispatch<SetStateAction<boolean>>;
 };
 
 const RepeatAudioModal = ({
@@ -39,6 +40,7 @@ const RepeatAudioModal = ({
   onClose,
   defaultRepetitionMode,
   selectedVerseKey,
+  setOpenOverflowActionsMenu,
 }: RepeatAudioModalProps) => {
   const { t, lang } = useTranslation('common');
 
@@ -114,7 +116,15 @@ const RepeatAudioModal = ({
 
   const onPlayClick = () => {
     logButtonClick('start_repeat_play');
-    onSettingsChangeWithoutDispatch('repeatSettings', verseRepetition, PreferenceGroup.AUDIO, play);
+    onSettingsChangeWithoutDispatch(
+      'repeatSettings',
+      verseRepetition,
+      PreferenceGroup.AUDIO,
+      () => {
+        play();
+        setOpenOverflowActionsMenu(false);
+      },
+    );
   };
 
   const onCancelClick = () => {

src/components/Verse/OverflowVerseActionsMenu.tsx

@@ -61,21 +61,23 @@ const OverflowVerseActionsMenu: React.FC<Props> = ({
         }
         isModal
         isPortalled
+        renderMenuBody={(setOpen) => (
+          <OverflowVerseActionsMenuBody
+            verse={verse}
+            isTranslationView={isTranslationView}
+            onActionTriggered={onActionTriggered}
+            bookmarksRangeUrl={bookmarksRangeUrl}
+            setOpenOverflowVerseActionsMenu={setOpen}
+          />
+        )}
         onOpenChange={(open: boolean) => {
           logEvent(
             `${isTranslationView ? 'translation_view' : 'reading_view'}_verse_actions_menu_${
               open ? 'open' : 'close'
             }`,
           );
         }}
-      >
-        <OverflowVerseActionsMenuBody
-          verse={verse}
-          isTranslationView={isTranslationView}
-          onActionTriggered={onActionTriggered}
-          bookmarksRangeUrl={bookmarksRangeUrl}
-        />
-      </PopoverMenu>
+      />
     </div>
   );
 };

src/components/Verse/OverflowVerseActionsMenuBody.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Dispatch, SetStateAction } from 'react';
 
 import clipboardCopy from 'clipboard-copy';
 import useTranslation from 'next-translate/useTranslation';
@@ -28,6 +28,7 @@ interface Props {
   isTranslationView: boolean;
   onActionTriggered?: () => void;
   bookmarksRangeUrl: string;
+  setOpenOverflowVerseActionsMenu: Dispatch<SetStateAction<boolean>>;
 }
 
 const RESET_ACTION_TEXT_TIMEOUT_MS = 3 * 1000;
@@ -54,6 +55,7 @@ const OverflowVerseActionsMenuBody: React.FC<Props> = ({
   isTranslationView,
   onActionTriggered,
   bookmarksRangeUrl,
+  setOpenOverflowVerseActionsMenu,
 }) => {
   const { t, lang } = useTranslation('common');
   const [isCopied, setIsCopied] = useState(false);
@@ -147,7 +149,11 @@ const OverflowVerseActionsMenuBody: React.FC<Props> = ({
         />
       )}
 
-      <VerseActionRepeatAudio isTranslationView={isTranslationView} verseKey={verse.verseKey} />
+      <VerseActionRepeatAudio
+        setOpenOverflowVerseActionsMenu={setOpenOverflowVerseActionsMenu}
+        isTranslationView={isTranslationView}
+        verseKey={verse.verseKey}
+      />
     </div>
   );
 };

src/components/Verse/VerseActionRepeatAudio.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { SetStateAction, useState, Dispatch } from 'react';
 
 import useTranslation from 'next-translate/useTranslation';
 
@@ -13,8 +13,13 @@ import { getChapterNumberFromKey } from '@/utils/verse';
 type VerseActionRepeatAudioProps = {
   verseKey: string;
   isTranslationView: boolean;
+  setOpenOverflowVerseActionsMenu: Dispatch<SetStateAction<boolean>>;
 };
-const VerseActionRepeatAudio = ({ verseKey, isTranslationView }: VerseActionRepeatAudioProps) => {
+const VerseActionRepeatAudio = ({
+  verseKey,
+  setOpenOverflowVerseActionsMenu,
+  isTranslationView,
+}: VerseActionRepeatAudioProps) => {
   const { t } = useTranslation('common');
   const [isModalOpen, setIsModalOpen] = useState(false);
   const chapterId = getChapterNumberFromKey(verseKey);
@@ -36,6 +41,7 @@ const VerseActionRepeatAudio = ({ verseKey, isTranslationView }: VerseActionRepe
         chapterId={chapterId.toString()}
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
+        setOpenOverflowActionsMenu={setOpenOverflowVerseActionsMenu}
       />
       <PopoverMenu.Item icon={<RepeatIcon />} onClick={onItemClicked}>
         {t('audio.player.repeat-1-verse')}

src/components/dls/PopoverMenu/PopoverMenu.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 
-import { useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState, SetStateAction, Dispatch } from 'react';
 
 import * as PrimitiveDropdownMenu from '@radix-ui/react-dropdown-menu';
 import classNames from 'classnames';
@@ -19,11 +19,12 @@ export enum PopoverMenuExpandDirection {
 
 type PopoverMenuProps = {
   isOpen?: boolean;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   trigger?: React.ReactNode;
   isPortalled?: boolean;
   isModal?: boolean;
   onOpenChange?: (open: boolean) => void;
+  renderMenuBody?: (setOpen: Dispatch<SetStateAction<boolean>>) => ReactNode;
   expandDirection?: PopoverMenuExpandDirection;
   contentClassName?: string;
   shouldClose?: boolean;
@@ -37,6 +38,7 @@ const PopoverMenu = ({
   isModal = true,
   shouldClose = true,
   onOpenChange,
+  renderMenuBody,
   expandDirection: side = PopoverMenuExpandDirection.BOTTOM,
   contentClassName,
 }: PopoverMenuProps) => {
@@ -47,7 +49,7 @@ const PopoverMenu = ({
       className={classNames(styles.content, contentClassName)}
       side={side}
     >
-      {children}
+      {renderMenuBody ? renderMenuBody(setOpen) : children}
     </PrimitiveDropdownMenu.Content>
   );