dyc3 / opentogethertube

Watch videos with your friends. The spiritual successor to TogetherTube, preserving the spirit of it's simple to use interface, while improving it's look, feel, and reliability.
https://opentogethertube.com
GNU Affero General Public License v3.0
417 stars 56 forks source link

Sometimes, the player doesn't respond to API methods, but playback events can still trigger. #355

Closed dyc3 closed 3 years ago

dyc3 commented 3 years ago

Current Behavior

Sometimes, the volume slider does not work, or the video doesn't pause when the room tells it to.

Refreshing the page can fix the issue, but more often than not it doesn't help.

How To Reproduce

Exact method is pretty unknown.

One method

  1. Play a youtube video in a room.
  2. Trigger a hot reload for the page by modifying the YoutubePlayer component.
  3. You should now be able to play/pause playback on the youtube video by clicking on the video itself. This desyncs the video timestamp from the one displayed on the slider.
  4. See that onPlaybackChange is being triggered in the console, but it is not able to call any methods on the player because this.$refs.youtubeplayer is undefined.

Expected behavior

The volume slider should control the player's volume, and the video should stay in sync with what the room tells it to do.

Screenshots

Environment

Desktop (please complete the following information when applicable):

Additional context

dyc3 commented 3 years ago

I've managed to somewhat reimplement a new youtube player from scratch, instead of using the one from the vue-youtube package, and the same issue generally persists, except it feels random.

I'm strongly considering just using videojs to stream the video instead. It seems like it would be easier to do that at this point. I guess my original assumption that a given video service's official player would be the most reliable, is wrong.

dyc3 commented 3 years ago

I'm starting to think that this is either a firefox bug or a youtube bug.

dyc3 commented 3 years ago

God damn it

dyc3 commented 3 years ago

This has now been observed to occur with the videojs player. Updating issue to reflect this

dyc3 commented 3 years ago

Maybe the iframe is being created/loaded before the iframe api gets loaded? It only seems to occur when the page is first loaded. If a youtube video has played before, the page hasn't been reloaded since, and a new player is created, the bug doesn't occur.

dyc3 commented 3 years ago

I'm inclined to believe that this is not a youtube bug now: https://codepen.io/dyc3/pen/eYBmeba?editors=1011

dyc3 commented 3 years ago

FOUND IT!

Sometimes, the player computed property on OmniPlayer gets evaluated before the inner player gets mouted and the result gets cached as undefined. As a result, it won't pass along the api calls to the inner player component.