@masa-dev/react-signage
Version:
This is a react library for signage.
57 lines (56 loc) • 2.29 kB
JavaScript
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 { useCacher } from "../../cacher";
import { useDebug } from "../../debug/useDebug";
import { ItemBaseStyle } from "./consts";
import { useVideoError } from "./hooks/useVideoError";
export const Video = forwardRef(function Video(props, ref) {
const { useDbCache } = props;
const elementRef = useRef(null);
const { debugMessage } = useDebug();
const { handleVideoError, resetSpan } = useVideoError({ ref: elementRef });
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;
},
play: async () => {
if (!elementRef.current)
return Promise.reject();
return elementRef.current.play();
},
pause: () => {
if (!elementRef.current)
return;
elementRef.current.pause();
},
elementRef: elementRef
}));
function onEnded(ev) {
resetSpan();
return props.onEnded?.(ev);
}
return _jsx(_Fragment, { children: _jsx(animated.video, { ref: elementRef, onError: handleVideoError, onEnded: onEnded, onWaiting: () => debugMessage({ message: 'video waiting', severity: 'warning' }), playsInline: true, style: {
...ItemBaseStyle,
...fadeInSpring,
}, muted: props.muted }) });
});