893777 - media track event sync while network is bad

Status: VERIFIED FIXED

(Webmaker Graveyard :: Popcorn Maker, defect)

Description

[Scott [:thecount] Downe]

Been doing testing on a throttled internet, and I'm noticing we have sync issues when the network is bad. Seconds long out of sync.

The YouTube wrapper's buffered and onProgress might be busted, or just not cutting it. Going to start there, as it exists to solve this exact issue.

Comment 1

[Scott [:thecount] Downe]

Attachment: https://github.com/mozilla/popcorn.webmaker.org/pull/144

Looks like were did not surpress play events if a clip stopped because of buffering. Nor did we display any UI for when it is buffering.

This meant a user could click play, on a buffering video, and it would play the main media/any ready clips, but the buffering clips would still be paused. This would now be out of sync.

My patch shows UI for loading, and surpresses play, just like when the lick is initially loading.

Comment 2

[Scott [:thecount] Downe]

Comment on attachment 783301 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/144

Starting to see problems cropping up with this, much deeper than I anticipated.

Comment 3

[Scott [:thecount] Downe]

Attachment: https://github.com/mozilla/popcorn.webmaker.org/pull/193

This is a better attempt at this.

We no longer have the concept of a surpressPlay while loading.

surpressPlay would actually just fire a pause right after a play.

I'm using popcorn's event system to fire off a sequencesReady event.

This way we can also set the play button to paused if it is in a played state but still loading. Sometimes people continue to click on play, even though it is still loading. This way, it toggles the play button, and then waits until it is ready.

Comment 4

[Matthew Schranz [:mjschranz]]

Comment on attachment 799116 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/193

When I seek into other clips while playing it doesn't trigger a play on that clips popcorn event.

STR:
1. I added one clip to the timeline. Used http://www.youtube.com/watch?v=q0zE14XxyKg because it's really long.
2. I then shortened the event to be only about 14 minutes long so it was easier to just copy/paste the event to easily add multiple clips.
3. I then hit play and started seeking around on the timeline into other clips.

Expected: Video continues playing at some point, depending on any buffering needed. Timeline is paused until then.
Actual: Timeline keeps playing and video itself never triggers play.

Also comments.

Comment 5

[Scott [:thecount] Downe]

I can hit those in chrome on prod. This is a good fyi, though, I've never seen it, but it's pretty reproducible. Going to file, and try to fix it. It also seems to flicker the play/pause toggle state, and happens to have a chance to land on the wrong state. Might be related.

Comment 6

[Scott [:thecount] Downe]

Filed the bug you found here bug 914214 as it is happening on master.

Comment 7

[Matthew Schranz [:mjschranz]]

Comment on attachment 799116 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/193

Minor stuff left.

Comment 8

[Scott [:thecount] Downe]

Comment on attachment 799116 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/193

Updated or commented.

Comment 9

[Scott [:thecount] Downe]

Staged: https://github.com/mozilla/popcorn.webmaker.org/commit/1250195c176f3e706142d48168d950723e14efa0

Needs verification.

To be clear, what this solves is while buffering, it keeps the state of the button, and waits for the video to be ready. Instead of pausing while buffering.

Previously, if we play into a buffered area, it would pause, and toggle the play button to a paused state. If the user clicked the button again here, it would either play (becoming out of sync), or it may stop buffering right before they click, thus they frustratingly end up pausing it!

Now it works like every other major media player. The button shows the intended state, buffering'll pause the video internally, but the button is going to show what state it's going to be in once it's done buffering, which means if you change it, you're actually changing the state it'll be when done buffering.