Auto-Play and Auto-Sync to Live Edge on Interruption

[Jeck-Liu-Create]

Description:

The PlayerActions.tsx component is intended to automatically play the video upon page load and, in the event of a live stream interruption, automatically update to the latest position when the stream resumes. However, these functionalities are not working as expected.

Steps to Reproduce:

Load the page containing the PlayerActions component.
Observe that the video does not automatically start playing.
Interrupt the live stream and then resume it.
Observe that the video does not automatically sync to the latest position.

Expected Behavior

The video should automatically start playing when the page loads.
If the live stream is interrupted, the video should automatically sync to the latest position when the stream resumes.

Actual Behavior

The video does not automatically start playing upon page load.
The video does not automatically sync to the latest position after a live stream interruption.

Code Snippet:

import React, { useRef, useEffect } from 'react';
import '@vidstack/react/player/styles/default/theme.css';
import '@vidstack/react/player/styles/default/layouts/audio.css';
import '@vidstack/react/player/styles/default/layouts/video.css';

import {
    useMediaStore,
    MediaPlayer,
    MediaProvider,
    Poster,
    Track,
    TextTrack,
    type MediaPlayerInstance,
    type MediaPlayingEvent
} from "@vidstack/react";
import { DefaultVideoLayout, defaultLayoutIcons } from '@vidstack/react/player/layouts/default';

interface MediaPlayerProps {
    src: string;
    poster: string;
    title: string;
    thumbnails: string;
    textTracks?: TextTrack[];
}

const PlayerActions: React.FC<MediaPlayerProps> = ({ src, poster, title, thumbnails, textTracks = [] }) => {
    const player = useRef<MediaPlayerInstance>(null);

    const { live, liveEdge, liveEdgeWindow } = useMediaStore(player);

    useEffect(() => {
        if (player.current) {
            player.current.play();
        }
    }, []);

    function onPlaying(nativeEvent: MediaPlayingEvent) {
        const origin = nativeEvent.originEvent;
        const userPlayed = nativeEvent.isOriginTrusted;
        const isTrusted = nativeEvent.originEvent?.isTrusted;

        console.log('Origin:', origin);
        console.log('User Played:', userPlayed);
        console.log('Is Trusted:', isTrusted);
    }

    function handleSyncToLive() {
        if (player.current) {
            console.log('Syncing to live edge...');
            player.current.seekToLiveEdge();
        } else {
            console.log('Player reference is null');
        }
    }

    return (
        <>
            <MediaPlayer
                liveEdgeTolerance={10}
                src={src}
                viewType='video'
                streamType="ll-live"
                load="eager"
                title={title}
                poster={poster}
                ref={player}
                onPlaying={onPlaying}
            >
                <MediaProvider>
                    <Poster className="vds-poster" />
                    {textTracks.map((track) => (
                        <Track
                            key={track.src}
                            {...track}
                        />
                    ))}
                </MediaProvider>
                <DefaultVideoLayout
                    thumbnails={thumbnails}
                    icons={defaultLayoutIcons}
                />
            </MediaPlayer>
            {live && <div>Live: {String(live)}</div>}
            {liveEdge && <div>At Live Edge</div>}
            {liveEdgeWindow && <div>Live Edge Window: {liveEdgeWindow}</div>}
            <button onClick={handleSyncToLive}>Live</button>
        </>
    );
};

export default PlayerActions;

Environment

React Version: [Specify React version]
@vidstack/react Version: [Specify @vidstack/react version]
Browser: [Specify browser and version]
Operating System: Windows

Additional Context

Ensure that the MediaPlayer component is correctly referenced and that the play and seekToLiveEdge methods are properly invoked.
Verify that the useEffect hook is correctly triggering the auto-play functionality.
Check for any console errors or warnings that might provide additional insights.