[feature] Disable GIF animation unless user hovers

[hydrosquall]

PR Checklist

Please check all that apply to this PR using "x":

• I have checked that this PR is not a duplicate of an existing PR (open, closed or merged)
• I have checked that this PR does not introduce a breaking change
• This PR introduces breaking changes and I have provided a detailed explanation below

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting)
• Refactoring (no functional changes)
• Documentation changes
• Other - Please describe:

Fixes

Issue Number: #2029

What is the current behavior?

• GIFs play all the time, making the CPU/GPU work hard on GIF intensive pages

What is the new behavior?

• GIFs only play if the user's mouse hovers over them. Tested using the lbry://@3DPrinting address.

Other information

• I filed two feature requests to freezeframe, one to make the official react wrapper usable for our usecase ([react-freezeframe] index.js is missing ctrl-freaks/freezeframe.js#54), and the other to make sure that event listeners get cleaned up when the image is unmounted. [freezeframe][feature-request] Add destroy method ctrl-freaks/freezeframe.js#55
• Two reads I found useful about how to solve this problem were
  • https://dking.org/blog/2019/04/options-for-pausing-the-animation-of-gifs/ and
  • https://stackoverflow.com/questions/5818003/stop-a-gif-animation-onload-on-mouseover-start-the-activation

Since we don't control the source of these GIFs as they are submitted by users, I felt that the solutions for requesting a separate static image, using CSS keyframes, or manually creating a canvas were not applicable, even though those other solutions would probably get even better performance.

[neb-b]

Thank you for the PR!

I'm not sue if I want to add this dependency for this one feature. bundlephobia says it alone will add 400ms on 3g networks.
https://bundlephobia.com/result?p=freezeframe@4.0.0-alpha.6

Is there any way this could be achieved without adding freezeframe.js?

[hydrosquall]

Hi @seanyesmunt ,

Thanks for the suggestion, I had forgotten that this wasn't just a desktop app that gets installed once, and that this code is also being use for the web application.

I took a look at the bundle results inside https://chrisbateman.github.io/webpack-visualizer/, and found that ~36% of the bundle size came from core-js (which is already a project dependency) and 36% came from common-tags, which could be eliminated in favor of using a regular template literal instead of a tagged template literal.

With that motivation in mind, I extracted the areas of code + branches that we were using from freezeframe.js, and inlined them into the component folder. Each file has a URLs attributing the files back to the source. I checked on the desktop electron app, and it works the same as we had it before. See this commit: 7cf7b96

This lets us whittle dependencies down to just the imagesloaded package, which adds 34 ms on emerging 3G.

https://bundlephobia.com/result?p=imagesloaded@4.1.4

Let me know if there are additional changes you'd like to see.

[neb-b]

Nice work. That seems a lot more reasonable. I'll give this a closer look later today!

[neb-b]

Hey sorry it took so long to review this. Just tested and it works great!

Can you add a change to this file? https://github.com/lbryio/lbry-desktop/blob/master/CHANGELOG.md

then it's ready to merge.

[tzarebczan]

@hydrosquall, thanks for the PR! Can we show you some appreciation for the contribution?

Also, we're giving away some Hacktoberfest bonuses and goodies for this month. We'll get it all figured out after you shoot us an email after this is reviewed/merged.

The only other comment I'd make for this one is to show some kind of indicator on the thumbnail that there's a preview for it. Thoughts @seanyesmunt? Otherwise you may not even know you can mouse over it.

[hydrosquall]

Thanks @seanyesmunt , I've updated the changelog in 80d507e

Hi @tzarebczan, thanks for the suggestion - I'll send an email after this is merged.

Regarding an indicator: the original freezeframe.js had an "arrow icon overlay", see the third demo at the page below:

http://ctrl-freaks.github.io/freezeframe.js/

I think it can be incorporated, perhaps in a follow-up PR? Since we no longer depend on freezeframe directly, we can use any icon that we'd like (maybe something from the lbry brand?)

Separately, I've bundled up this smaller version of the library as a new NPM package:

• https://github.com/hydrosquall/freezeframe-lite.js

[kauffj]

Great contribution @hydrosquall!

[tzarebczan]

And don't forget to follow up about Hacktoberfest / appreciation :)