NEW FEATURE ALERT

-
Due to popular requests (one person on Github who opened an issue), I have added a spanking new feature to move subtitles up and down. LIFE CHANGING, I know.
-
Rahaha, more stuff incoming. Also the more I work on tis the more I realize my code sucks.

AHHHHHHHHHHHHH CRUNCHYROLL WHYY

-
I really need a better workflow… it’s annoying to switch between Webstorm, then extension refresh tab, then Crunchyroll every time I make a change :
-
Anyways, since crunchy wants to update their player for no reason, the extension… BROKE. So, I decided to stop hardcoding the obfuscated variables and instead search for them like I do with the modules.
-
Now, this relies on the unobfuscated names being stable/consistent. If that breaks, I will cry.
-
Also I literally could not find a interesting thing to take a screenshot of. The workflow is actually so boring…

Yoo
-
Kind of forgot to post this one. Basically, I just made it so the subtitles loaded from the original audio are marked as [original], you can pick either or.
-
That’s about it. Yay

Been a minute.
-
Let’s see what I worked on… Mostly fixing minor issues. LIke subtitles being unmovable. And after that fixed it teleporting to Narnia when being moved. While I was doing that, I actually finished the subtitle editor in last devlog that I actually didn’t finish.
-
Aside from the UI, there’s also numerous minor bugs that sometimes causes the side bar to malfunction. And some that causes the extension to not load. All that good stuff.
-
The biggest update, however, is that the extension, using a very, very sneaky method, now loads additional subtitles for dubbed episodes. Typically, the majority of subtitles are made for the original audio language (Japanese mostly), and they are usually drag-and-drop ready for other audio languages. The idea is nothing new, but I had to brainstorm a new way of achieving that.
-
Essentially, the extension “mimics” the Crunchyroll player by making a stream request to the original audio language, and capturing the subtitles. All before the actual player starts its own stream request. This way, we don’t trigger the concurrent stream limit. Pretty neat!
-
Also added a on/off switch because you never know when this might break. Peak CSS right here haha.

RAHHHHHH RECODE (v1.0.0)
-
Turns out when you keep adding features on the fly into an existing system, things start going haywire because the system was not designed to have those features.
-
Anyways, after spending like 3 hours trying to fix those haywires, I decided to just do what I should’ve done: rewrite the damn thing. Well, turns out, it wasn’t even that much of a rewrite since all I had to change was like three files…

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.

YOOO new feature! autoSize option keeps elements anchored at their center when their sizes change. Took a minute but we got here, ha!

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!

Guide line snapping can now follow resizing! Code lowk getting a little messy, but it’s still borderline acceptable haha. Now on version 0.3.0 :)

Added a auto resize feature! Not much to say but it took surprisingly little effort to implement. I thought I would’ve had to re-code half the codebase

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.)

Did some cleanup on the code to make it look like I know what I am doing 😆. Not much to show so I’ll just do a screenshot of the tampermonkey script header?

Added a way to disable rotate/drag/resize individually!

Alrighty! The audio offset application is actually instant now! Unfortunately, I had to enlist some help from Claude to get the CMAF media data parsing/editing to get it to work :. But, it works like a charm now. Yay. Essentially, now the extension stores the buffered audio, and when offset changes, directly edits the time offset value in the cloned raw audio data (which is in the CMAF format), clears the old buffer, and then adds our cloned version. This also means I have to rewrite the README and re-record the DEMO 🫠. (also, the Jetbrains README editor is lowk goated)

Made the icon and added some build scripts to automatically export as PNG from the source photoshop file (which I made with Photopea). Took a minute to refine it. It looks a bit weird zoomed out and being so pixelated, but you can tell it’s my extension at least

Well, I got the extension loaded as a userscript in Tampermonkey. But I can’t seem to figure out why it wouldn’t auto install my script from the Github raw user content page