Player.tsx

import React, {useMemo, useState} from "react";
import {createUseStyles} from "react-jss";
import {Link} from "react-router-dom";
import {TitleMeta} from "../../api/models/dto/TitleMeta";
import {Media} from "../../api/models/Media";
import {getLocalizedDescription, getLocalizedName, getLocalizedRating} from "../../api/models/Title";
import {formatDuration} from "../../util/formatDuration";
import {useLocale} from "../../util/locale/LocalizedContext";
import {useDuration} from "../../util/media/useDuration";
import {usePosition} from "../../util/media/usePosition";
import {SeekBar} from "./SeekBar";

interface Props {
    title: TitleMeta,
    media: Media,
}

export function Player(props: Props) {
    const {media} = props;
    const {title, show, episodes} = props.title;

    const classes = useStyles();
    const locale = useLocale();

    const name = getLocalizedName(title, locale);
    const description = getLocalizedDescription(title, locale);
    const rating = getLocalizedRating(title, locale);

    const [previewTrackElement, setPreviewTrackElement] = useState<HTMLTrackElement | null>(null);
    const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(null);

    const duration = useDuration(videoElement);
    const position = usePosition(videoElement);

    const video = useMemo(() => (
        <video ref={setVideoElement} src={media.src} className={classes.player} crossOrigin="anonymous" controls>
            {title.preview && (
                <track ref={setPreviewTrackElement} kind="metadata" label="previews" src={title.preview}/>
            )}
        </video>
    ), [classes.player, media.src, title.preview]);

    return (
        <div>
            <Link to="/">Back</Link>
            <p>{name?.name}</p>
            {video}
            <p style={{fontVariant: "tabular-nums"}}>{formatDuration(position)} / {formatDuration(duration)}</p>
            <SeekBar
                video={videoElement}
                previewTrack={previewTrackElement}
                duration={duration}
                position={position}
            />
        </div>
    );
}

const useStyles = createUseStyles({
    player: {
        maxWidth: "40rem",
        margin: {
            left: "auto",
            right: "auto",
        }
    }
});