Emails
1 month ago
EngagementChart
2 months ago
MediaHub
1 month ago
Onboarding
2 months ago
Popup
2 months ago
Skeletons
1 month ago
WhatsNew
2 months ago
charts
2 months ago
test
2 months ago
AdminMenuSync.js
2 months ago
ChartEmptyState.js
2 months ago
ChooseDate.js
2 months ago
ColorPicker.js
2 months ago
ExtendPlugins.js
2 months ago
Filters.js
2 months ago
Link.js
2 months ago
Navbar.js
1 month ago
NoFound.js
2 months ago
PageHeader.js
2 months ago
PluginRecommendations.js
2 months ago
PostScheduleField.js
2 months ago
PrestoPlayerIcon.js
2 months ago
ProGateOverlay.js
2 months ago
QuickAccess.js
2 months ago
RankedTable.js
2 months ago
StatCard.js
2 months ago
TopMedia.js
2 months ago
TopPerformingMedia.js
2 months ago
TopUsers.js
2 months ago
TruncatedTitle.js
2 months ago
UpgradeNotice.js
2 months ago
UpgradeToPro.js
2 months ago
VideoModal.js
2 months ago
WelcomeBanner.js
2 months ago
VideoModal.js
73 lines
| 1 | import React, { useEffect, useRef } from "react"; |
| 2 | import { __ } from "@wordpress/i18n"; |
| 3 | import { Dialog, Text, Button } from "@bsf/force-ui"; |
| 4 | import { X } from "lucide-react"; |
| 5 | |
| 6 | const YOUTUBE_EMBED_URL = |
| 7 | "https://www.youtube-nocookie.com/embed/7ibtk_KTgCw?si=f0atBqLnA_6gxXC6&autoplay=1&enablejsapi=1"; |
| 8 | |
| 9 | const VideoModal = ({ isOpen, onClose, triggerRef }) => { |
| 10 | const closeRef = useRef(null); |
| 11 | const wasOpenRef = useRef(false); |
| 12 | |
| 13 | // Restore focus to the trigger element only when modal transitions from open to closed |
| 14 | useEffect(() => { |
| 15 | if (wasOpenRef.current && !isOpen) { |
| 16 | triggerRef?.current?.focus(); |
| 17 | } |
| 18 | wasOpenRef.current = isOpen; |
| 19 | }, [isOpen, triggerRef]); |
| 20 | |
| 21 | // Move focus to the close button when the modal opens |
| 22 | useEffect(() => { |
| 23 | if (isOpen) { |
| 24 | // Small delay to let Dialog render before focusing |
| 25 | const id = requestAnimationFrame(() => closeRef.current?.focus()); |
| 26 | return () => cancelAnimationFrame(id); |
| 27 | } |
| 28 | }, [isOpen]); |
| 29 | |
| 30 | return ( |
| 31 | <Dialog |
| 32 | design="simple" |
| 33 | exitOnClickOutside |
| 34 | exitOnEsc |
| 35 | scrollLock |
| 36 | open={isOpen} |
| 37 | setOpen={(open) => { |
| 38 | if (!open) onClose(); |
| 39 | }} |
| 40 | > |
| 41 | <Dialog.Backdrop className="bg-black bg-opacity-70" /> |
| 42 | <Dialog.Panel |
| 43 | className="bg-transparent shadow-none border-none max-w-[80vw] w-full p-0 overflow-visible gap-2" |
| 44 | aria-label={__("Introduction video", "presto-player")} |
| 45 | > |
| 46 | <div className="flex justify-end items-center gap-2 text-text-inverse"> |
| 47 | <Text as="span" size="sm" weight="medium" className="text-text-inverse"> |
| 48 | {__("Esc", "presto-player")} |
| 49 | </Text> |
| 50 | <Button |
| 51 | ref={closeRef} |
| 52 | variant="ghost" |
| 53 | size="sm" |
| 54 | className="cursor-pointer bg-transparent border-none text-text-inverse hover:bg-transparent focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-transparent min-w-6 min-h-6" |
| 55 | onClick={onClose} |
| 56 | aria-label={__("Close video (Esc)", "presto-player")} |
| 57 | icon={<X size={20} />} |
| 58 | /> |
| 59 | </div> |
| 60 | <iframe |
| 61 | className="w-full lg:h-188 sm:h-120 h-60 rounded-lg border-0" |
| 62 | src={isOpen ? YOUTUBE_EMBED_URL : undefined} |
| 63 | title={__("Presto Player introduction video", "presto-player")} |
| 64 | allow="autoplay; encrypted-media" |
| 65 | allowFullScreen |
| 66 | /> |
| 67 | </Dialog.Panel> |
| 68 | </Dialog> |
| 69 | ); |
| 70 | }; |
| 71 | |
| 72 | export default VideoModal; |
| 73 |