@masa-dev/react-signage/dist/features/media/items/Img.js

This is a react library for signage.

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { animated, useSpring } from '@react-spring/web';
import { forwardRef, useImperativeHandle, useRef } from "react";
import { FADE_DURATION } from '../../../consts';
import { ItemBaseStyle } from './consts';
import { useCacher } from '../../cacher';
export const Img = forwardRef(function Img(props, ref) {
    const { useDbCache } = props;
    const elementRef = useRef(null);
    const [fadeInSpring, fadeInSpringApi] = useSpring(() => ({}));
    const { getOrFetchAndCache } = useCacher();
    useImperativeHandle(ref, () => ({
        changeShow: (show) => {
            if (!elementRef.current)
                return;
            elementRef.current.style.display = show ? 'block' : 'none';
        },
        fadeIn: () => {
            fadeInSpringApi.start({
                from: { opacity: 0 },
                to: { opacity: 1 },
                config: { duration: FADE_DURATION }
            });
        },
        setSrc: async (src, ops) => {
            const { noDbCache } = ops || {};
            if (!elementRef.current)
                return;
            const newSrc = (!noDbCache && useDbCache) ? await getOrFetchAndCache(src) : src;
            elementRef.current.src = newSrc;
        },
        elementRef: elementRef
    }));
    return _jsx(_Fragment, { children: _jsx(animated.img, { ref: elementRef, style: {
                ...ItemBaseStyle,
                ...fadeInSpring
            } }) });
});