forked from Simon-Initiative/oli-torus
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix popup block flow issue (Simon-Initiative#3545)
replace bootstrap popup with react tiny popover impl allow better control over audio content within a popup
- Loading branch information
Showing
9 changed files
with
157 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import React, { useCallback, useState } from 'react'; | ||
| import { ArrowContainer, Popover } from 'react-tiny-popover'; | ||
| import { Popup as PopupModel } from 'data/content/model/elements/types'; | ||
| import { isEmptyContent } from '../../data/content/utils'; | ||
| import { useAudio } from '../hooks/useAudio'; | ||
|
|
||
| interface Props { | ||
| children: React.ReactNode; | ||
| popupContent: React.ReactNode; | ||
| popup: PopupModel; | ||
| } | ||
| export const Popup: React.FC<Props> = ({ children, popupContent, popup }) => { | ||
| const { audioPlayer, playAudio, isPlaying } = useAudio(popup.audioSrc); | ||
| const hasAudio = !!popup.audioSrc; | ||
|
|
||
| const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false); | ||
|
|
||
| const pauseAudio = useCallback(() => { | ||
| // if the audio is already playing, pause it | ||
| if (isPlaying) playAudio(); | ||
| }, [isPlaying, playAudio]); | ||
|
|
||
| const onHover = useCallback( | ||
| (e: React.MouseEvent) => popup.trigger === 'hover' && (setIsPopoverOpen(true), playAudio()), | ||
| [popup, setIsPopoverOpen, playAudio], | ||
| ); | ||
| const onBlur = useCallback( | ||
| (e: React.MouseEvent) => popup.trigger === 'hover' && (setIsPopoverOpen(false), pauseAudio()), | ||
| [popup, setIsPopoverOpen, pauseAudio], | ||
| ); | ||
| const onClick = useCallback( | ||
| (e: React.MouseEvent) => { | ||
| if (hasAudio) { | ||
| // Click behaves differently depending if the popup has audio or not to allow better control of audio playback. | ||
| // If the popup is hover triggered and has audio, then a click should control the audio. | ||
| // This allows a user to control the audio playback while still being able to see popup content | ||
| isPlaying ? pauseAudio() : playAudio(); | ||
|
|
||
| if (popup.trigger !== 'hover' && hasAudio && !isPopoverOpen) { | ||
| // If the popup is triggered via click and has audio, then a click should open the popup. | ||
| // To dismiss the popup, the user must click outside the popup | ||
| setIsPopoverOpen(true); | ||
| } | ||
| } else { | ||
| // If the popup has no audio, then a click should simply toggle the popup | ||
| setIsPopoverOpen(!isPopoverOpen); | ||
| } | ||
|
|
||
| // prevent click from submitting a response when the popup is clicked inside a choice | ||
| // https://eliterate.atlassian.net/browse/MER-1503 | ||
| e.preventDefault(); | ||
| }, | ||
| [popup.trigger, isPlaying, isPopoverOpen, hasAudio, setIsPopoverOpen, playAudio, pauseAudio], | ||
| ); | ||
|
|
||
| return ( | ||
| <Popover | ||
| isOpen={isPopoverOpen} | ||
| onClickOutside={() => (setIsPopoverOpen(false), pauseAudio())} | ||
| positions={['top', 'bottom', 'left', 'right']} | ||
| content={({ position, childRect, popoverRect }) => ( | ||
| <ArrowContainer | ||
| position={position} | ||
| childRect={childRect} | ||
| popoverRect={popoverRect} | ||
| arrowSize={10} | ||
| arrowColor="white" | ||
| > | ||
| <div className="popup-content bg-body p-4 drop-shadow rounded"> | ||
| {isEmptyContent(popup.content) ? ( | ||
| <i className="fa-solid fa-volume-high"></i> | ||
| ) : ( | ||
| popupContent | ||
| )} | ||
| </div> | ||
| </ArrowContainer> | ||
| )} | ||
| containerClassName="react-tiny-popover structured-content" | ||
| > | ||
| <span | ||
| className={`popup-anchor${popup.trigger === 'hover' ? '' : ' popup-click'}`} | ||
| onMouseEnter={onHover} | ||
| onMouseLeave={onBlur} | ||
| onClick={onClick} | ||
| > | ||
| {children} | ||
| {hasAudio && ( | ||
| <> | ||
| {isPlaying ? ( | ||
| <i className="fa-solid fa-circle-pause ml-2"></i> | ||
| ) : ( | ||
| <i className="fa-solid fa-volume-high ml-2"></i> | ||
| )} | ||
| {audioPlayer} | ||
| </> | ||
| )} | ||
| </span> | ||
| </Popover> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters