PreviewViewer.tsx

import React, {useMemo} from "react";
import {useImage} from "../../util/media/useImage";
import {useTextTrackCues} from "../../util/media/useTextTrackCues";
import {parseImageSprite} from "../../util/sprite/parseImageSprite";
import {useImageSprite} from "../../util/sprite/useImageSprite";

interface Props {
    previewTrack: HTMLTrackElement,
    position: number,
}

export function PreviewViewer({previewTrack, position}: Props) {
    const cues = useTextTrackCues(previewTrack);
    const activeCue = cues.find(it => it.startTime <= position && it.endTime >= position)
    const activeUrl = activeCue ? new URL(activeCue.text, previewTrack.src).toString() : null;
    const imageSprite = useMemo(() => parseImageSprite(activeUrl), [activeUrl]);
    const image = useImage(imageSprite?.src || null);
    const sprite = useImageSprite(imageSprite, image);
    return useMemo(() => (
        <img alt="" src={sprite || undefined}/>
    ), [sprite]);
}