Roadmap?

[hawkins]

Hey there, really love what you've done with this site and would be interested in contributing!

Do you have the project's long-term goals shared anywhere?

[hawkins]

I've been wanting to build a better crunchyroll interface for some time, particularly for mobile, and I've heard PWA's with Vue have a great development story. Despite this, I have minimal prior Vue experience, so contributing would be a fun learning process for me regardless. On that note, have you considered PWA support, or do you have grander plans in mind?

[remixz]

Hi @hawkins! I don't officially have a roadmap, since Umi player is just something I work on for fun 😂 However, if you're interested in contributing, I'm always open to pull requests.

For PWA support: technically I think it's just a manifest.json away from being a PWA! (https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/#support_native_integration) There's already a ServiceWorker that caches all of the code locally, so you can technically use it offline. However, it doesn't actually work offline since it needs to talk to the Crunchyroll servers. If Crunchyroll adds offline viewing support to its apps (which they claim they're going to, but who knows if they will), then I'll probably see if that'd be possible to add to Umi as well. This one would definitely be tricky though, since I'd probably have to cache data from another domain, which is not the easiest/safest thing to do. We'll see... that's more a stretch goal for myself. 😂

If you're looking for some ideas to contribute, here are some things I've thought about adding:

• Proper mobile styling - The site works fine on mobile, but since I only use Umi on my computer, I haven't bothered to make it responsive. 😂 This shouldn't be an exceptionally hard task though, since I'm using Tachyons to style the app. Just adding the proper meta tag and turning the container's width from a fixed width to a max-width should get you partially there. The harder part will be styling the video player, as I made it a fixed width for the reactions container. In src/App.css at the bottom of the file you'll see a few fixed widths, but there are probably some littered out through the app. If you haven't used Tachyons before, it would be a good task to learn about its paradigms of so-called "functional CSS", where every class is just one style, and you compose them all to style your website. Of course, you may still need to write some CSS yourself, but ideally the majority of the styles should be Tachyons classes.
• Spoilers mode - This one would be an easier one to learn some basics of Vue and Vuex. The idea of spoilers mode would be that when it's toggled on, stuff like the MediaItem component wouldn't show anything that could have spoilers, so it would blur out the episode thumbnail, and not show the name of the episode, just the number. You would store this in the global Vuex state, and then access the property in whatever components needed it via a computed property. Vue's documentation explains all this extremely well, so I highly recommend reading it. As well, there's lots of examples of this throughout Umi.
• Improved reactions - Right now, the rooms just have a set group of reaction emotes, mostly voted in by my friends for what they want to use. While my friends have great taste, it may not be everyone's taste! 😂 So I've thought about rewriting the system so that someone could use any of the faces from FrankerFaceZ, which is where the majority of the emotes are loaded in from right now. This would require creating a UI somehow that lets people search for emotes (FrankerFaceZ has an API for this, you can see it on their website), and then maybe save their favourites? One little concern is that the image has to load, so when someone sends an emote for the first time, it might not appear immediately on everyone's screen. The images are so small though that I don't think this is an issue. As well, it also might be nice to have a toggle to turn on and off reactions on your screen.

Those are just some ideas to get you started! There are bigger ones I have as well, like trying to add in support for other streaming sites (unlikely since it seems that only Crunchyroll has such an insecure API to allow Umi to work 😅 ) and adding more to rooms like moderators and stuff, but I'm also open to other people's ideas. I will likely review stuff slowly, especially with the holidays coming up, but even if it just helps you to learn some Vue concepts, that would be amazing, and I'll try my best to offer advice! As I mentioned already, definitely read the Vue and Vuex documentation if you haven't already, as it's amazingly comprehensive and makes it really easy to understand, especially if you already have some knowledge of React and state managers like mobx. Have fun, let me know if you have any questions! 🎉

[hawkins]

Thanks so much for the detailed overview of features and changes to make! 🙌 Since I’ve heard of tachyons before and I mainly use Umi on mobile, I’ll probably start with a brief tutorial on Vue and Vuex before diving into styling for mobile to learn about how that works before then tinkering with PWA.

Thanks again for being so receptive. 🙂 Hopefully you’ll be seeing a PR or two from me around the weekend!