XState - Video Player & Nested States - Finite State Machines in React

Поділитися
Вставка
  • Опубліковано 28 жов 2024

КОМЕНТАРІ • 46

  • @ionutstoica-gion
    @ionutstoica-gion Рік тому

    Amazing video! I am actually building a video player and this was a life savior! I do have to take care of extras - seeking state, the play is actually a promise and is not always successful so one can't really transition to playing state without actually ensuring the video is playing after play was invoked. Another one is that canPlay gets triggered multiple times actually. The buffering / stalled states too. The only way to make sure is to listen to paused event from video itself to safely transition into paused state whenever the video api decides it, not only when the UI asks for it. Same goes for all events. It is then easy to switch from video element api, to hls.js or other video apis with reliable state events of their own.

  • @chrissalgaj4111
    @chrissalgaj4111 4 роки тому +1

    Very well done video, great example and nicely explained. It's the clearest video on xstate that i've seen thus far and man i've been watching a lot of them

    • @leighhalliday
      @leighhalliday  4 роки тому

      Thank you so much Chris! Glad you found it clear!

  • @justinphilpott
    @justinphilpott 4 роки тому

    Awesome video... Such clear explanations.

  • @hunterjennings4708
    @hunterjennings4708 5 років тому +1

    Really enjoyed this series! Thanks for providing some really great practical applications of this awesome library. It really helps the material stick!

    • @leighhalliday
      @leighhalliday  4 роки тому

      Thank you, Hunter! I'm glad you enjoyed it!

  • @nikosc
    @nikosc 3 роки тому

    Excellent tutorial series. Thank you.

  • @danielkukua1708
    @danielkukua1708 4 роки тому +1

    very good explanation - subscribed

  • @markjensen6220
    @markjensen6220 5 років тому

    Awesome video series, thanks a lot for putting in the time to make these!

  • @hrafnkellpalsson
    @hrafnkellpalsson 5 років тому

    Thanks Leigh, super helpful! Very clear explanations.

  • @anuraghazra4772
    @anuraghazra4772 4 роки тому

    Wow that fox project is amazing! and the tutorial as well

    • @leighhalliday
      @leighhalliday  4 роки тому +2

      Hey Anurag! Yea, that was one my wife did... very cool! Maybe at some point I'll look into doing a demo on that... it used a leap motion to detect hand movement, which isn't very popular so I was worried its audience would be too small, but maybe I could do one on three.js and react on its own.

    • @anuraghazra4772
      @anuraghazra4772 4 роки тому

      @@leighhalliday Yeah that's really cool, maybe you could also try doing some videos on ReactThreeFiber.

  • @kirankothandan5529
    @kirankothandan5529 3 роки тому

    You are awesome brother

    • @leighhalliday
      @leighhalliday  3 роки тому

      Thanks again Kiran :) I appreciate it!

  • @petrpacas
    @petrpacas 4 роки тому

    Great demo!

  • @ericzorn3735
    @ericzorn3735 3 роки тому +1

    Hey Leigh, I am going back to watching this video. Great content as always! When do you recommend using state machines versus standard setter and getter state?

    • @leighhalliday
      @leighhalliday  3 роки тому +1

      Hey Eric! I think it's a good idea whenever you have more than just a boolean... this means say different statuses, and/or when you have 2+ booleans that can combine together to make some really funky combos.

    • @ericzorn3735
      @ericzorn3735 3 роки тому

      @@leighhalliday Thank you for clarifying, I can definitely see the difference here now .

  • @gregfletcher2360
    @gregfletcher2360 4 роки тому

    Damn, that was good!
    Subscribed

    • @leighhalliday
      @leighhalliday  4 роки тому +1

      Niiiice! Happy to have you on board Greg :)

  • @user-artem-busyhin
    @user-artem-busyhin 4 роки тому

    Thanks! Your lesson helped me!

  • @srinivasrg5125
    @srinivasrg5125 4 роки тому

    Great, thanks.

    • @leighhalliday
      @leighhalliday  4 роки тому

      No problem Srinivas!

    • @srinivasrg5125
      @srinivasrg5125 4 роки тому

      @@leighhalliday ua-cam.com/video/-KK1ZsK6FxI/v-deo.html (Gift from India)

  • @lyleclassen4698
    @lyleclassen4698 4 роки тому

    Thanks enjoyed this series, really keen on using finite state machines in my next project. Is it possible to go over the testing part of using xstate.

    • @leighhalliday
      @leighhalliday  4 роки тому +2

      Hey Lyle! Great idea for a video... that's something I haven't done before, so let me add it to my list and I'll work on coming up with something :)

  • @chris3079
    @chris3079 3 роки тому

    watched a few of davidkpiano videos and talks, but only after watching yours, do I know how to implement it. I'm worried I might use this EVERYWHERE now...

    • @leighhalliday
      @leighhalliday  3 роки тому

      Haha... it's great any time you have more than just a true/false

  • @huirenchuah3597
    @huirenchuah3597 4 роки тому

    Thanks man i had this issue of getting the time of the video when the video player stop

  • @stannone7272
    @stannone7272 5 років тому

    I think that state machines are a good way to deal with complicated conditional views. But handling machines context feels weird to me.... But i will definitely give it a shot

    • @leighhalliday
      @leighhalliday  4 роки тому

      I think it's better to keep the context alongside the "finite states" of the state machine, but yea, it's something extra to keep track of!

  • @TheRavageFang
    @TheRavageFang 5 років тому

    Would it also make sense to define actions with "assign" as const functions as well?

    • @leighhalliday
      @leighhalliday  4 роки тому

      Sure! I think that might be a good idea. If it makes your code cleaner, go for it!

  • @geographyofthebody
    @geographyofthebody 5 років тому

    Good video, but I think, you could be say something about guards because your "playing" event retriggered very often and it beat up for optimization.

    • @leighhalliday
      @leighhalliday  4 роки тому

      Yea, it did retrigger pretty often, but I didn't really notice any negative consequences... 3 times per second seems like a lot in human land (333ms) but that's not too crazy when you consider that a 30fps video is rendering a new frame every 33ms.

  • @backendfyi
    @backendfyi 5 років тому +1

    Can you please make a tutorial on mobx v6 with react hooks?

    • @leighhalliday
      @leighhalliday  4 роки тому +1

      Launching tomorrow (December 2nd) Felix... 11am EST. Stay tuned :)

    • @backendfyi
      @backendfyi 4 роки тому

      Leigh Halliday thank you 🙏🏽