{"size": 2064, "ext": "js", "max_stars_repo_path": "src/components/ModalYt.js", "max_stars_repo_name": "Bayurzx/metis", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/ModalYt.js", "max_issues_repo_name": "Bayurzx/metis", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/ModalYt.js", "max_forks_repo_name": "Bayurzx/metis", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 31.2727272727, "max_line_length": 121, "alphanum_fraction": 0.4539728682}
import React, {useState} from "react";
import { Modal, Button } from 'react-bootstrap';



const ModalYt = ({ youTube, title }) => {
    const [show, setShow] = useState(false);
    
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const embedYt = (ytLink) => {
        if ("youwatch?".indexOf("watch") === -1) return "pdFl__NlOpA"
        return ytLink.split("watch?v=")[1].slice(0, 11);
    }
    

    return (
        <>
            {/* <Button variant="primary" onClick={handleShow}>
                YouTube
            </Button> */}
            <a type="button" onClick={handleShow} className="social-icon social-icon-large social-icon-gplus d-inline">
                <i className="fa fa-youtube-play" />
                <i className="fa fa-youtube-play" />
            </a>



            <Modal
                show={show}
                onHide={handleClose}
                backdrop="static"
                keyboard={true}
            >
                <Modal.Header closeButton>
                    <Modal.Title>{title}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Youtube video stays here
                    <iframe 
                        width="560" 
                        height="315" 
                        // src="https://www.youtube.com/embed/dFUYsbbf6U0" 
                        src={`https://www.youtube.com/embed/${embedYt(youTube)}`}
                        title="YouTube video player" 
                        frameBorder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                        allowFullScreen
                    >

                    </iframe>

                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
};

export default ModalYt;
