react-video-zoom/index.js

React component for magnifying glass circle on a video when hovering.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "./index.css";
import { useRef, useState } from "react";
export const playReactVideoZoom = ({ mainVideoRef, zoomVideoRef, }) => {
    var _a, _b;
    (_a = mainVideoRef.current) === null || _a === void 0 ? void 0 : _a.play();
    (_b = zoomVideoRef.current) === null || _b === void 0 ? void 0 : _b.play();
    if (zoomVideoRef.current && mainVideoRef.current)
        zoomVideoRef.current.currentTime = mainVideoRef.current.currentTime;
};
export const pauseReactVideoZoom = ({ mainVideoRef, zoomVideoRef, }) => {
    var _a, _b;
    (_a = mainVideoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
    (_b = zoomVideoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
    if (zoomVideoRef.current && mainVideoRef.current) {
        zoomVideoRef.current.currentTime = mainVideoRef.current.currentTime;
        // eslint-disable-next-line no-self-assign
        mainVideoRef.current.currentTime = mainVideoRef.current.currentTime;
    }
};
export const ReactVideoZoom = ({ src, zoom, refs, width, loop = false, muted = false, }) => {
    const containerRef = useRef(null);
    const [mousePosition, setMousePosition] = useState({ left: 0, top: 0 });
    const [containerRect, setContainerRect] = useState({
        width: 0,
        height: 0,
        left: 0,
        top: 0,
    });
    const [isZoomOn, setZoomOn] = useState(false);
    const { mainVideoRef, zoomVideoRef } = refs;
    const startZoom = () => {
        if (containerRef.current) {
            const containerRect = containerRef.current.getBoundingClientRect();
            setContainerRect({
                width: containerRect.width,
                height: containerRect.height,
                left: containerRect.left,
                top: containerRect.top,
            });
            setZoomOn(true);
        }
    };
    const setPosition = ({ clientX, clientY, }) => {
        setMousePosition({
            left: clientX - containerRect.left,
            top: clientY - containerRect.top,
        });
    };
    return (_jsxs("div", Object.assign({ ref: containerRef, className: "video-container", onMouseMove: (e) => setPosition({
            clientX: e.clientX,
            clientY: e.clientY,
        }), onMouseEnter: (e) => {
            startZoom();
            setPosition({
                clientX: e.clientX,
                clientY: e.clientY,
            });
        }, onMouseLeave: () => setZoomOn(false), onTouchMove: (e) => {
            e.preventDefault();
            setPosition({
                clientX: e.touches[0].clientX,
                clientY: e.touches[0].clientY - 80,
            });
        }, onTouchStart: (e) => {
            e.preventDefault();
            startZoom();
            setPosition({
                clientX: e.touches[0].clientX,
                clientY: e.touches[0].clientY - 80,
            });
        }, onTouchEnd: () => setZoomOn(false) }, { children: [_jsx("video", { src: src, ref: mainVideoRef, width: width ? width : "100%", loop: loop, muted: muted, playsInline: true }), _jsx("div", Object.assign({ className: "zoom-container", style: {
                    left: mousePosition.left,
                    top: mousePosition.top,
                    display: isZoomOn ? "block" : "none",
                } }, { children: _jsx("video", { style: {
                        transform: `translate(calc(-${mousePosition.left * zoom}px + 75px), calc(-${mousePosition.top * zoom}px + 75px))`,
                    }, src: src, width: containerRect.width * zoom, height: containerRect.height * zoom, ref: zoomVideoRef, muted: true, loop: loop, playsInline: true }) }))] })));
};