Created
April 8, 2021 18:10
-
-
Save typeofweb/80ec5f8c94401c8b48b3466c536be2d7 to your computer and use it in GitHub Desktop.
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
| import React, { MouseEventHandler } from "react"; | |
| import { Modal, ModalHeader, ModalFooter, ModalBody, Button } from "reactstrap"; | |
| import YouTube, { | |
| YouTubeProps, | |
| Options as YouTubeOptions, | |
| } from "react-youtube"; | |
| import Vimeo from "@u-wave/react-vimeo"; | |
| import ReactDOM from "react-dom"; | |
| import "./style.css"; | |
| import { modalData as ModalData } from "../../interfaces/modalData"; | |
| interface Props { | |
| onClose: MouseEventHandler<HTMLButtonElement>; | |
| modalData: ModalData; | |
| } | |
| const youTubeOptions: YouTubeOptions = { | |
| height: "450px", | |
| width: "100%", | |
| playerVars: { | |
| autoplay: 1, | |
| }, | |
| }; | |
| const ModalInnerVideo = ({ modalData, onClose }: Props) => { | |
| const onReady: YouTubeProps["onReady"] = (event) => { | |
| event.target.pauseVideo(); | |
| }; | |
| return ( | |
| <Modal | |
| className="modal-dialog modal-lg" | |
| isOpen={modalData.isOpen} | |
| modalTransition={{ timeout: 200 }} | |
| backdropTransition={{ timeout: 200 }} | |
| > | |
| <ModalHeader>{modalData.title}</ModalHeader> | |
| <ModalBody> | |
| {modalData.platform === "youtube" ? ( | |
| <YouTube | |
| videoId={modalData.url} | |
| opts={youTubeOptions} | |
| onReady={onReady} | |
| /> | |
| ) : ( | |
| <Vimeo video={modalData.url} autoplay width="300px" responsive /> | |
| )} | |
| </ModalBody> | |
| <ModalFooter> | |
| <Button | |
| color="secondary" | |
| type="submit" | |
| aria-label="modal" | |
| onClick={onClose} | |
| > | |
| close | |
| </Button> | |
| </ModalFooter> | |
| </Modal> | |
| ); | |
| }; | |
| export const ModalVideo = (props: Props) => { | |
| return ReactDOM.createPortal( | |
| <ModalInnerVideo {...props} />, | |
| document.getElementById("root") | |
| ); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment