media-stream-player/dist/esm/StillImage.js

Player built on top of media-stream-library

import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';
import debug from 'debug';
import { useEventState } from './hooks/useEventState';
const debugLog = debug('msp:still-image');
const ImageNative = styled.img `
  max-height: 100%;
  object-fit: contain;
  width: 100%;
`;
/**
 * Properties:
 *
 * play: indicated the _intended_ playback state
 * ws/rtsp: src URIs for WebSocket/RTP server
 *
 * Internal state:
 * canplay: there is enough data on the video element to play
 * playing: the video element playback is progressing
 */
let cachebust = 0;
export const StillImage = ({ forwardedRef, play = false, onPlaying, src, }) => {
    let imgRef = useRef(null);
    // Forwarded refs can either be a callback or the result of useRef
    if (typeof forwardedRef === 'function') {
        forwardedRef(imgRef.current);
    }
    else if (forwardedRef) {
        imgRef = forwardedRef;
    }
    // State tied to events
    const [loaded, unsetLoaded] = useEventState(imgRef, 'load');
    useEffect(() => {
        const imgEl = imgRef.current;
        if (imgEl === null) {
            return;
        }
        if (play && src !== undefined) {
            imgEl.src = `${src}&cachebust=${cachebust++}`;
            return () => {
                imgEl.src = '';
                unsetLoaded();
            };
        }
    }, [play, src, unsetLoaded]);
    // keep a stable reference to the external onPlaying callback
    const __onPlayingRef = useRef(onPlaying);
    __onPlayingRef.current = onPlaying;
    useEffect(() => {
        const el = imgRef.current;
        if (loaded && el !== null && __onPlayingRef.current !== undefined) {
            __onPlayingRef.current({
                el,
                width: el.naturalWidth,
                height: el.naturalHeight,
            });
        }
    }, [loaded]);
    debugLog('render image', loaded);
    return React.createElement(ImageNative, { ref: imgRef });
};
//# sourceMappingURL=StillImage.js.map