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…
@AndyNoob
on
Crunchyroll Multi Sub
7h 5m 10s logged
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!
@AndyNoob
on
Crunchyroll Multi Sub
3h 11m 34s logged
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.
@AndyNoob
on
Crunchyroll Multi Sub
7h 16m 18s logged
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 
@AndyNoob
on
Crunchyroll Multi Sub
6h 28m 48s logged
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.)
Ship
Pending review
@AndyNoob
on
Crunchyroll Audio Helper Extension
Well, it has been a fun 10 hours of reverse engineering Crunchyroll, but the extension/userscript is (probably) ready!
I supposed the most annoying part is figuring out how to reliably inject code onto the page. Afterwards, it was the matter of changing the offset on the raw audio data.
If you want to try this out, it's available on Chrome and as a userscript for Tampermonkey 🥳. Otherwise, GIF and screenshots are available.
@AndyNoob
on
Crunchyroll Audio Helper Extension
1h 40m 36s logged
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!
@AndyNoob
on
Crunchyroll Audio Helper Extension
1h 49m 5s logged
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)
@AndyNoob
on
Crunchyroll Audio Helper Extension
26m logged
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
@AndyNoob
on
Crunchyroll Audio Helper Extension
2h 42m 6s logged
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
@AndyNoob
on
Crunchyroll Audio Helper Extension
1h 14m logged
Ok. Dug into Crunchyroll’s code a bit more and maybe found a way to apply the offset faster instead of waiting for the previous buffers to run out. The video doesn’t really make it clear (recording freezes because DRM protection), but the audio updated when the timeline jumped. The delay was about a few seconds. Gonna go test tis on Chrome now 🙏.
@AndyNoob
on
Crunchyroll Audio Helper Extension
1h 2m 4s logged
Managed to style this thing. Actually works pretty well! I wanted to get rid of those ugly up/down arrows, but it’s really annoying to get rid of for some reason… Whatever. Probably will upload this both as an extension and as a Tampermonkey user script.
@AndyNoob
on
Crunchyroll Audio Helper Extension
1h 27m 14s logged
First devlog! In the past 4 hours or so (poking the website doesn’t count towards Hackatime unfortunately), I managed to monkey patch Crunchyroll’s web packed audio buffering code. After that, I figured out how to force the video player to error out so that it reloads itself. So, the main functionality of the helper extension is done (I think)! Other than that, I managed to inject a little button into the video player :). Credits to Google Material Icons. Gonna go make this button work now… yay.
Ship
# MOVE IT!
A library that adds simple PowerPoint like DOM object manipulation: resize, drag, and rotate. Pretty lightweight and comes with (very beautifully) styled controls. This library also provides the means for you to calculate collision via an implementation of oriented bounding boxes.
# Links
The more detailed details can be found on the README: https://github.com/AndyNoob/move-it
You can find a simple demo here: https://andynoob.github.io/move-it/
# Annoying issues I ran into on the way
It's pretty much just CSS. It's always CSS. When it is not CSS. I have so much beef with the `transform` property.
For starters, it took me 5 hours to put the transform controls around the target element. And THEN some to get it pixel perfect. Not to mention how RESIZING IS SUCH A PAIN because changing the width and height adjusts the pivot point of the target element.
At the very least, I didn't have to worry about writing unit tests all that much for this project (AI is very good at it).
# Other stuff
I think the most fun part of this project is writing the function that handles overlapping rectangles' collision resolution. The whole process reminded me of Arcade haha.
Check it out if you're interested/in need of letting users transform objects in DOM.
MORE WORK On THE README!!!!
Just… wrote the README. An hour of my life that I will never get back…………. 🙃
Loading more…