862811 - Do not load popcorn embed projects until user clicks

Status: RESOLVED FIXED

(Webmaker Graveyard :: Popcorn Maker, defect)

Description

[Scott [:thecount] Downe]

Idea behind this is reduce load on displaying 20+ popcorn projects in a gallery.

We need to consider other UI things, like displaying a poster image if needed so it looks like something people want to click on, but I am OK with doing that later.

Comment 1

[David Humphrey (:humph)]

The MakeAPI should store a thumbnail for us, and we should aim to use it for this.  Pomax is thinking about similar things in Thimble.

Comment 2

[Scott [:thecount] Downe]

Yeah.

I think we can worry about displaying a thumbnail in another ticket.

Going to limit this ticket to delaying the load until we have user interaction.

This is good for mobile too.

Comment 3

[Scott [:thecount] Downe]

Attachment: https://github.com/mozilla/butter/pull/1668

Scripts are still loaded, but project data is not.

Much better.

I don't do anything fancy with UI yet. We can do that next I think.

Kate has some ideas.

Comment 4

[David Humphrey (:humph)]

I think we should follow the way that video does preloading here, since there are times where a user will want to have the resources load early.  I think we'll want to test whether loading early or late is the preferred default, since it will seem to cause lag on 'play'.

The embed should look for some kind of preload=none or auto on the query string I think.  We could land this with the default being `auto` for now, which would match what we're already doing, then flip the default to `none` later after we test.

Comment 5

[Scott [:thecount] Downe]

Updated.

preload is the key key.

setting it to none waits for user interaction, otherwise it loads instantly.

Right now it defaults to load instantly.

We can decide where we want to use this as we move forward.

Comment 6

[Matthew Schranz [:mjschranz]]

Comment on attachment 738577 [details]
https://github.com/mozilla/butter/pull/1668

I'm actually not sure what's wrong with this code but I spent a good 25 minutes looking over it and it seemed very sane to me. I'm not sure what it isn't hitting but clicking the big play button is never triggering the load of popcorn and nothing happens.

There don't appear to be any errors thrown. All scripts still appear to be loaded correctly.

Comment 7

[Scott [:thecount] Downe]

Hm, seems it never hits loadedmetadata on a preload only. The clicking part works fine, as it makes the loadedmetadata manual, but only if it is set to preload none.

Comment 8

[Scott [:thecount] Downe]

Comment on attachment 738577 [details]
https://github.com/mozilla/butter/pull/1668

Fixed.

The loadedmetadata event was being setup before the ready funtion was properly declared. Caused by some later changes I made.

Comment 9

[Matthew Schranz [:mjschranz]]

Comment on attachment 738577 [details]
https://github.com/mozilla/butter/pull/1668

Makes sense.

R+

Comment 10

[Scott [:thecount] Downe]

Staged: https://github.com/mozilla/butter/commit/c6ab474394721255c425e87a122aea26618f2ea7

Comment 11

[Scott [:thecount] Downe]

So, what we've done is given the person injecting the project the ability to set this on using a query string in the iframe's source.

For now, we default to preload, add preload=none to turn it off and wait for a user to click.

This does not deal with mobile, gifs/thumbnails, and also does not forward the click to the button they clicked on. Not yet, anyway.