@devbookhq/docusaurus-code-video-plugin/lib/theme/CodeBlock/VideoPlayer/index.js

Add a video to a Docusaurus code block and highlight code lines as the video plays.

import React, { useEffect, useState, } from 'react';
import styles from './styles.module.css';
import PlayButton from './PlayButton';
import VideoModal from './VideoModal';
let closePreviousModal;
function VideoPlayer({ youtubeID, children, onTimeChange, onOpen, onClose, }) {
    const [isOpen, setIsOpen] = useState(false);
    function openModal() {
        closePreviousModal?.();
        closePreviousModal = () => {
            closeModal();
            closePreviousModal = undefined;
        };
        setIsOpen(true);
        onOpen?.();
    }
    function closeModal() {
        setIsOpen(false);
        onClose?.();
    }
    useEffect(function cleanup() {
        return () => {
            closePreviousModal?.();
        };
    }, []);
    return (<div className={styles['video-wrapper']}>
      <div className={styles['video-container']}>
        <PlayButton youtubeID={youtubeID} onOpen={openModal} onClose={closeModal} isPlaying={isOpen}/>
      </div>
      {children}
      {isOpen &&
            <VideoModal onTimeChange={onTimeChange} youtubeID={youtubeID} onClose={closeModal}/>}
    </div>);
}
export default VideoPlayer;