## making an improved version of mebm
oh boy, this month has been pretty much CRAZY, hasn't it?

christmas, a jaw-dropping TADC episode, and a LOT more


<br>

one of the things i did during this time, was making videos, and for that, i used my favorite, the one and only: [mebm](https://github.com/bwasti/mebm)

this editor is AWESOME (from my personal experiences), and thats why i use it, like A LOT

however, it isn't perfect, and most of the time it comes with large issues, so now it's up to me to fix em

<br>
<br>

### fixing issues
alright, lets see the issues mebm has

1) you can't rotate images, text is only able to rotate
2) the export format is always webm, and is not customizable
3) the mobile UI is broken asf
4) importing videos takes a lot of memory and resources

so, let's tackle each problem one by one

obviously, let's start with image rotation, which was the one that ANNOYED me the most, 
luckily, adding it was (surprisingly) easy, i just had to add was a `ctx.rotate()` function while rendering the imageLayer on the canvas, and it works!

next, i decided to procastinate a little by adding font customization to text
<br>
again, it was easy, i just had to add an extra setting and a new variable named `this.font`, and as always, it definitely worked \:)


ok, now onto the next problem

most of the time, when exporting videos made with mebm, they are always WebM, and not MP4 or even MKV
<br>
to fix this, i just had to add a new variable named `format` and add an extra setting to the main ones, and well, i tried customizing the format, and it works

alright, what's next? oh yeah! **mobile functionality**

see, when running mebm on mobile, it looks terrible:
<br>
<br>
<img src="https://i.ibb.co/rR08hVhH/Captura-de-pantalla-2025-12-26-a-la-s-1-59-13-p-m.png" width="300" height="500" />

not to even mention how messed up this looks when importing a new element, wow

so i had 2 options:

1) make the built-in `style.css` file adapt to mobile
2) create a new css file that is suitable for mobile browsers and use JavaScript to replace the stylesheet with this one when it detects the browser is running on a mobile device

i chose number 2 since i'm too lazy to make the other stylesheet adaptable to mobile, and most of the time it would suck

after some hours of testing and experimenting with CSS properties i finally finished the mobile stylesheet, now the only thing to do is to make the stylesheet swap

for this one, i just had to make an if condition whenever it detects that a browser is on mobile and swap the stylesheet with it, and it looks beautiful

next up: **video importing**
<br>
<br>
apparently i realized that importing videos is pretty much done by decoding everything and shoving it into an imageData array, which ofc, took a lot of energy and time
<br>
<br>
so guess what? i had to change the logic from `VideoLayer` entirely, since it sucked a lot<br><br>
the new logic consisted of letting the browser render the video by itself, well it worked ¯\\\_(ツ)_/¯<br><br>
this turned out to be amazing, videos weren't messed up on frames, and the only thing that i had to fix was the `player.split()` function, everything else worked well with it, so yeah!<br><br>
overall, i think this is pretty much done, and now i can finally make videos better than ever, i will probably keep updating this (if i add a new feature)

live demo here: https://paritojr.github.io/mebmjr/
<br>
source code here: https://github.com/paritojr/mebmjr/
<br>
thanks for reading and see ya