Crunchyroll Multi Sub

Worked on a bunch of stuff, mostly random issues: extension broken on Opera, extension randomly not updating subtitles, features of extension randomly bricking if you do a specific set of stuff (like adding and deleting masks really fast).
-
Other than that, I added a new subtitle style editor. I thought it was gonna be a 30min quick change. And then it ended up being like 4 hours long. The font selector is so damn annoying to add because there’s really only one way to do it, and that’s through Google. And of course it’s going to be a pain in the rear when it’s Google.
-
Whatever, at least it looks good.

Fixed a bunnnnnch of issues as an aftermath of the last devlog… Took a minute but I finally released 0.12.0 (and immediately realized there’s more bugs.

Also cleaned up the README and made it look real fancy.

Ok, it’s been a minute, so let me go over the changes. (also i finally figured out you need to shift + enter to do new line bruh)

Firstly, in preparation for the subtitle masking feature, I changed the extension popup to be a side bar/panel instead. This way, you can keep it open while you interact with the page.

Secondly, I swapped the old “Reset subtitle position” button (which didn’t even work LMAO) with the new “Edit subtitle configuration” button. When you click it, a new section expands.

This is where my other project (move-it) plays in! (see video). When you add a mask, it will block out subtitles using the CSS clip-path property, which is pretty neat!

I also fixed a bunch of random issues along the way, so yay!

Forgot to post devlogs ngl… Anyways, I fixed a bunch of weird bugs and compatibility issues with other extensions and userscripts. And then, I spent a few hours restyling the scoped options menu. Look at it moveee- Anyways, the moving part is made with a see through ::after element that is moved using the CSS transform: translateX element. I am able to move it programmatically by changing a CSS property/variable that translateX reads from. And then, I slapped a fancy transition on there. Works like a charm! (I had considered doing slide effect on the actual options, but that seemed like too much work haha.)

Working on the prerequisite parts of implementing a subtitle masking feature (hide subtitle base on defined areas).

Also released 0.11.0 of the extension. Out on chrome already but firefox will probably be another month :sigh:

Nice… negative notes. The users’ll absolutely adore this.

IT MOVESSS!!

What’s happening here is that the extension loads JSON data from an unlisted Gist and reads the developer notes that I put down every 5 hours. Once it does, it populates the popup with those notes.

The “1 new notes” thing isn’t actively updated yet, so I’ll implement that next. Just need to keep track of opened notes using their slug.

Only took 4 hrs 🫠

Currently trying to add a dev note/changelog system by loading a gist that I have loaded on my system as a git repo and then symlinked as a file in my actual project. I actually did not know you could do that, learned it from Claude ha!

Anyways, adding a new section to the popup menu, so I had to make some space. My solution: SMOOOOTH drop down. Note how the border-radius on the bottom of the overlay settings change from 0 to rounded at different speed depending on if the drop down is retracting vs. extending. CSS is a pain in the rear even when AI is helping…