import "./styles.css"; import React from "react"; import { createMachine } from "xstate"; import { useMachine } from "@xstate/react"; //Let's hold a reference to the video element in the screen const machine = createMachine({ id: "playerMachine", initial: "waiting", states: { waiting: { on: { SUCCESS: "ready", FAILED: "failed" } }, failed: {}, ready: { id: "readyMachine", initial: "ready", states: { ready: { on: { PLAY: { target: "playing", actions: ["playVideo"] //fire actions when the transition happen } } }, playing: { on: { PAUSE: { target: "paused", actions: ["pauseVideo"] }, RESET: { target: "playing", actions: ["resetVideo"] }, END: { target: "ended", actions: ["stopVideo"] } } }, paused: { on: { PLAY: { target: "playing", actions: ["playVideo"] }, RESET: { target: "playing", actions: ["resetVideo"] }, END: { target: "ended", actions: ["stopVideo"] } } }, ended: { on: { RESET: { target: "playing", actions: ["resetVideo"] }, PLAY: { target: "playing", actions: ["resetVideo"] } } } } } } }); const VideoPlayer = () => { const videoElement = React.useRef(null); const [state, send] = useMachine(machine, { //define the actions that will be triggered when buttons are click actions: { playVideo: () => videoElement?.current.play(), pauseVideo: () => videoElement?.current.pause(), resetVideo: () => { videoElement.current.pause(); videoElement.current.currentTime = 0; videoElement.current.play(); }, stopVideo: () => { videoElement.current.pause(); videoElement.current.currentTime = videoElement.current.duration; } } }); const isPlaying = () => state.matches({ ready: "playing" }); const isPaused = () => state.matches({ ready: "paused" }); const isReady = () => state.matches("ready"); const isStoped = () => state.matches({ ready: "ended" }); console.log(state.value); return ( <>

); }; export default function App() { return (

Hello CodeSandbox

Start editing to see some magic happen!

); }

react-xstate-video-player