Enable GIF support in MediaBlocks #4813
Conversation
…rtner, Claudia Reyes, to work on implementing a contribution to your project, MusicBlocks. We are taking a class called Software Engineering at the University of Michigan that requires us to make a meaningful contribution to an open-source project for our final assignment. We chose your project because we thought it was fantastic to see the intersection between art and technology, which is something we both find interesting. We decided to tackle the issue of allowing animated GIF content to appear on your website. We saw that this issue was something of relative difficulty, given that it’s been an ongoing challenge to implement this feature. Even if we did quite a bit of assurance quality testing, we weren’t sure if our implementation would fully work. We love to see the positive impact your project has made for learners of all ages, and we hope that we can at least offer some assistance in tackling the issue with the changes we made. We labeled our modifications in the code so they would be easy to find, and all you’d need to do is CTRL + F for ‘Change #x’ where x is the number of each change we made. Best of luck on your project!
|
❌ Some Jest tests failed. Please check the logs and fix the issues before merging. Failed Tests: |
|
Thanks for working on this.
|
|
Hi @walterbender , I’ve been looking into issue #4560 and reviewing this PR. I also investigated the failing Jest tests and the GIF feature implemented here. The test failures are caused by the following line: import { parseGIF, decompressFrames } from 'gifuct-js'; This happens because the file isn’t being treated as an ES module in the Jest environment, so Jest cannot process this import. Even after adjusting the module configuration and resolving the test failure locally, the GIFs still do not load correctly in MediaBlocks at runtime. This suggests the issue goes deeper—possibly involving how MediaBlocks handles image decoding or animated media rendering. I’m interested in continuing to explore this problem and contributing a fix. Before I move further, could you provide some guidance on the intended direction? Should GIFs be supported natively within MediaBlocks, or should an external renderer/utility be used? Any direction you can provide would be very helpful as I continue investigating this. Thanks! |
|
I think that the extent to which we can use external mechanisms for rendering media the better. One less thing for us to maintain. |
|
Thanks for the clarification @walterbender, That makes sense. I’ll explore using an external mechanism for handling GIF rendering instead of implementing the logic directly in MediaBlocks and once I have a workable approach, I’ll update this thread with findings or open a new PR if appropriate. Thanks again for the guidance! |
|
I assume this is deprecated by you other PR? Please close it. |
4 participants
Hello, my name is Yaire Lopez-Quiroz, and I’m working with my team partner, Claudia Reyes. We are taking a Software Engineering class at the University of Michigan that requires us to make a meaningful contribution to an open-source project.
We chose MusicBlocks because we appreciate the intersection of art and technology. For this PR, we worked on enabling animated GIF content to appear on the website. This was a challenging feature that has been difficult to implement in the past. Although we performed quality assurance testing, we cannot guarantee the animation works as expected.
All modifications are clearly labeled in the code with ‘Change #x’ for easy reference. We hope this contribution helps improve MusicBlocks and are happy to provide further assistance if needed.