react#useId TypeScript Examples

Checkbox: React.FC<ChcekboxProps> = ({ label, checked, indeterminate, onChange, disabled }) => {
    const [activationClassName, onActivate] = useRippleActivationClassName('checkbox--activation', 'checkbox--deactivation');

    const id = useId();

    return (
        <label htmlFor={id} className={classNames('checkbox', disabled && 'checkbox--disabled')}>
            <span
                className={classNames('checkbox-root', activationClassName, checked && 'checkbox--checked')}
                onMouseDown={() => {
                    if (disabled) { return; }

                    onActivate();
                }}
            >
                <input id={id} className='checkbox-input' onChange={e => onChange?.(e.target.checked)} type='checkbox' checked={checked} disabled={disabled} />
                <svg className='iconfont' viewBox='0 0 24 24'>
                    <path
                        d={checked
                            ? 'M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'
                            : indeterminate
                                ? 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z'
                                : 'M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'
                        }
                    />
                </svg>
                <div className='ripple'></div>
            </span>
            {label && <span className='checkbox__label'>{label}</span>}
        </label>
    );
}

Radio: React.FC<RadioProps> = ({ value, name, label, checked, onChange }) => {
    const [activationClassName, onActivate] = useRippleActivationClassName('radio--activation', 'radio--deactivation');

    const radioRootRef = useRef<HTMLSpanElement>(null);

    const id = useId();

    return (
        <label htmlFor={id} className='radio'>
            <span
                ref={radioRootRef}
                className={classNames('radio-root', activationClassName, checked && 'radio--checked')}
                onMouseDown={() => {
                    onActivate();
                }}
            >
                <input id={id} name={name} value={value} className='radio-input' onChange={e => onChange?.(e.target.value)} type='radio' checked={checked} />
                <div className='radio-thumb'></div>
                <div className='ripple'></div>
            </span>
            {label && <span>{label}</span>}
        </label>
    );
}

Switch: React.FC<SwitchProps> = ({ label, onChange, checked }) => {
    const [activationClassName, onActivate] = useRippleActivationClassName('switch--activation', 'switch--deactivation');

    const switchBaseRef = useRef<HTMLSpanElement>(null);

    const id = useId();

    return (
        <label htmlFor={id} className='switch'>
            <span
                className={classNames('switch-root', activationClassName, checked && 'switch--checked')}
                onMouseDown={() => {
                    onActivate();
                }}
            >
                <span className='switch-base' ref={switchBaseRef}>
                    <input id={id} className='switch-input' onChange={e => onChange?.(e.target.checked)} type='checkbox' checked={checked} />
                    <div className='switch-thumb'></div>
                    <div className='ripple'></div>
                </span>
                <div className='switch-track'></div>
            </span>
            {label && <span>{label}</span>}
        </label>
    );
}

PlyrPlayer: React.FC<PlyrPlayerProps> = ({ tracks, title, isLive }) => {
    // Check if there is any HLS track. If so, we only care about that and
    // ignore all other tracks.
    // TODO: it's unclear what we want to do in case of multiple HLS tracks. In
    // theory, you shouldn't need multiple as the m3u8 playlist can list
    // multiple qualities.
    const hlsTrack = tracks.find(isHlsTrack);

    const source = {
        type: "video" as const,
        title,
        sources: hlsTrack ? [] : tracks.map(track => ({
            src: track.uri,
            type: track.mimetype ?? undefined,
            size: track.resolution?.[1] ?? undefined,
        })),
    };

    // Determine all available qualities. As default quality, we use the largest
    // one equal to or below 1080. 1080p is a good default, at least for
    // desktops. And once the user changes the quality, it is stored in local
    // storage anyway.
    //
    // When we use a HLS track, this setting is completely ignored, so we can
    // still just pass it.
    const qualities = Array.from(new Set(
        tracks
            .map(t => t.resolution?.[1])
            .filter((h): h is number => h != null),
    ));
    qualities.sort((a, b) => a - b);
    const defaultQuality = Math.max(...qualities.filter(h => h <= 1080));

    const aspectRatio = tracks[0].resolution ?? [16, 9];

    const options = {
        // Compared to the default, "pip" and "airplay" were removed.
        controls: [
            "play",
            "progress",
            "current-time",
            "mute",
            "volume",
            "captions",
            "settings",
            "fullscreen",
        ],
        settings: ["captions", "quality", "speed"],
        quality: {
            default: defaultQuality,
            options: qualities,
        },
        speed: {
            selected: 1,
            options: SPEEDS,
        },
        invertTime: false,
        blankVideo: CONFIG.plyr.blankVideo,
        iconUrl: CONFIG.plyr.svg,

        // Set ratio to avoid visual jumps. I'm slightly uncomfortable doing
        // that as the reported resolution could be garbage and the user will
        // be stuck with an incorrect aspect ratio. I would like to give the
        // video preference once it's loaded. But for not we just assume the
        // resolution is correct.
        ratio: `${aspectRatio[0]}:${aspectRatio[1]}`,
    };

    // Unfortunately, `plyr-react` does not seem to offer a way to access the
    // `<video>` element via `ref`. So we just use a unique random ID.
    const elementId = useId();

    // Setup HLS if we have an HLS track.
    const hlsRef = useRef<Hls | null>(null);
    const loadHls = async () => {
        if (hlsTrack !== undefined) {
            if (!Hls.isSupported()) {
                // TODO: improve this. It's fine for now as browsers that don't
                // support hls.js are very rare by now.
                throw new Error("HLS is not supported, but required to play this video");
            }

            const videoElement = document.getElementById(elementId) as HTMLVideoElement;
            hlsRef.current = new Hls();
            const hls = hlsRef.current;
            hls.loadSource(hlsTrack.uri);
            hls.attachMedia(videoElement);

            // If this is a live event (and not a VOD HLS stream), we want to
            // auto-play. Of course, most browsers block that if the user has
            // not interacted with the website before. But that's fine.
            hls.on(Hls.Events.MANIFEST_PARSED, () => {
                if (isLive) {
                    videoElement.play();
                }
            });
        }
    };
    useEffect(() => {
        loadHls();
        return () => {
            if (hlsRef.current) {
                hlsRef.current.destroy();
            }
        };
    });

    return <>
        <Global styles={plyrCss} />
        <div css={{
            "--plyr-color-main": "var(--accent-color)",
            "& > div:focus-visible": {
                outline: "3px dotted var(--accent-color)",
            },
        }}>
            <Plyr id={elementId} source={source} options={options} />
        </div>
    </>;
}