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

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

import { useCallback, useEffect, useState, } from 'react';
const positionKey = 'devbook_video_position';
function savePosition(position) {
    const pos = JSON.stringify(position);
    localStorage.setItem(positionKey, pos);
}
function loadPosition() {
    const pos = localStorage.getItem(positionKey);
    if (!pos)
        return;
    return JSON.parse(pos);
}
let cachedPosition;
function usePosition() {
    const [position, setPosition] = useState(cachedPosition);
    useEffect(function loadDefaultPosition() {
        const defaultPosition = loadPosition() || { x: 0, y: 0 };
        setPosition(defaultPosition);
        cachedPosition = defaultPosition;
    }, []);
    const changePosition = useCallback((p) => {
        cachedPosition = p;
        setPosition(p);
        savePosition(p);
    }, []);
    return {
        changePosition,
        position,
    };
}
export default usePosition;