-
Notifications
You must be signed in to change notification settings - Fork 414
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[feature] Disable GIF animation unless user hovers #2986
[feature] Disable GIF animation unless user hovers #2986
Conversation
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. Is there any way this could be achieved without adding freezeframe.js? |
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 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 https://bundlephobia.com/[email protected] Let me know if there are additional changes you'd like to see. |
Nice work. That seems a lot more reasonable. I'll give this a closer look later today! |
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. |
@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. |
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: |
ef6e37f
to
4b0afa4
Compare
4b0afa4
to
97a1920
Compare
97a1920
to
80d507e
Compare
Great contribution @hydrosquall! |
And don't forget to follow up about Hacktoberfest / appreciation :) |
PR Checklist
Please check all that apply to this PR using "x":
PR Type
What kind of change does this PR introduce?
Fixes
Issue Number: #2029
What is the current behavior?
What is the new behavior?
lbry://@3DPrinting
address.Other information
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#55Since 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.