diff --git a/src/components/AudioPlayer/Buttons/RepeatButton.tsx b/src/components/AudioPlayer/Buttons/RepeatButton.tsx index 87e8d11c80..e5261a3192 100644 --- a/src/components/AudioPlayer/Buttons/RepeatButton.tsx +++ b/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>; +} + +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} /> )} diff --git a/src/components/AudioPlayer/OverflowAudioPlayActionsMenuBody.tsx b/src/components/AudioPlayer/OverflowAudioPlayActionsMenuBody.tsx index 6d86a2bb7f..e44c66ad2e 100644 --- a/src/components/AudioPlayer/OverflowAudioPlayActionsMenuBody.tsx +++ b/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>; +} + +const OverflowAudioPlayActionsMenuBody = ({ setOpen }: OverflowAudioPlayActionsMenuBodyProps) => { const [selectedMenu, setSelectedMenu] = useState( AudioPlayerOverflowMenu.Main, ); @@ -76,7 +80,7 @@ const OverflowAudioPlayActionsMenuBody = () => { () => ({ [AudioPlayerOverflowMenu.Main]: [ , - , + , , { setSelectedMenu(AudioPlayerOverflowMenu.Main)} /> ), }), - [t, playbackRate], + [t, playbackRate, setOpen], ); return <>{menus[selectedMenu]}; diff --git a/src/components/AudioPlayer/OverflowAudioPlayerActionsMenu.tsx b/src/components/AudioPlayer/OverflowAudioPlayerActionsMenu.tsx index 22a91b9132..bd20b7af47 100644 --- a/src/components/AudioPlayer/OverflowAudioPlayerActionsMenu.tsx +++ b/src/components/AudioPlayer/OverflowAudioPlayerActionsMenu.tsx @@ -91,7 +91,7 @@ const OverflowAudioPlayerActionsMenu = () => { onOpenChange={onOpenChange} contentClassName={styles.overriddenPopoverMenuContentPositioning} > - + ); diff --git a/src/components/AudioPlayer/RepeatAudioModal/RepeatAudioModal.tsx b/src/components/AudioPlayer/RepeatAudioModal/RepeatAudioModal.tsx index d18c75f9fd..214f610a2e 100644 --- a/src/components/AudioPlayer/RepeatAudioModal/RepeatAudioModal.tsx +++ b/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>; }; 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 = () => { diff --git a/src/components/Verse/OverflowVerseActionsMenu.tsx b/src/components/Verse/OverflowVerseActionsMenu.tsx index d8e19aff78..7bad130116 100644 --- a/src/components/Verse/OverflowVerseActionsMenu.tsx +++ b/src/components/Verse/OverflowVerseActionsMenu.tsx @@ -61,6 +61,15 @@ const OverflowVerseActionsMenu: React.FC = ({ } isModal isPortalled + renderMenuBody={(setOpen) => ( + + )} onOpenChange={(open: boolean) => { logEvent( `${isTranslationView ? 'translation_view' : 'reading_view'}_verse_actions_menu_${ @@ -68,14 +77,7 @@ const OverflowVerseActionsMenu: React.FC = ({ }`, ); }} - > - - + /> ); }; diff --git a/src/components/Verse/OverflowVerseActionsMenuBody.tsx b/src/components/Verse/OverflowVerseActionsMenuBody.tsx index 739db5d2fc..d057c684ff 100644 --- a/src/components/Verse/OverflowVerseActionsMenuBody.tsx +++ b/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>; } const RESET_ACTION_TEXT_TIMEOUT_MS = 3 * 1000; @@ -54,6 +55,7 @@ const OverflowVerseActionsMenuBody: React.FC = ({ isTranslationView, onActionTriggered, bookmarksRangeUrl, + setOpenOverflowVerseActionsMenu, }) => { const { t, lang } = useTranslation('common'); const [isCopied, setIsCopied] = useState(false); @@ -147,7 +149,11 @@ const OverflowVerseActionsMenuBody: React.FC = ({ /> )} - + ); }; diff --git a/src/components/Verse/VerseActionRepeatAudio.tsx b/src/components/Verse/VerseActionRepeatAudio.tsx index 421d5fd119..7f0dff37dc 100644 --- a/src/components/Verse/VerseActionRepeatAudio.tsx +++ b/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>; }; -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} /> } onClick={onItemClicked}> {t('audio.player.repeat-1-verse')} diff --git a/src/components/dls/PopoverMenu/PopoverMenu.tsx b/src/components/dls/PopoverMenu/PopoverMenu.tsx index 7a9ec0c38f..dc8ac2f4b7 100644 --- a/src/components/dls/PopoverMenu/PopoverMenu.tsx +++ b/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>) => 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} );