fumux banner

fumux

8 devlogs
20h 7m 35s

CyberChef inspired build-your-own-converter-website website. Powered by FFmpeg in the browser.


want to just use the thing? https://penguinencounter.github.io/fumux-prod/
want to see some cutting-edge breakages? https://penguinencounter….

CyberChef inspired build-your-own-converter-website website. Powered by FFmpeg in the browser.


want to just use the thing? https://penguinencounter.github.io/fumux-prod/
want to see some cutting-edge breakages? https://penguinencounter.github.io/fumux-prod/dev/

This project uses AI

I used JetBrains’ Full Line Code Completion plugin for simple repetitive tasks, if that counts (it runs a small LLM locally under the hood, from what I understand)

Demo Repository

Loading README...

penguinencounter

We need to redesign the i/o UX. People shouldn’t have to scroll up and down the page just to figure out which input file correlates with which output file. As a result, we’ve switched the page to grid, and are using elements that span the three columns to contain the wider stuff (like the i/o panel.)
The recipe area now needs to go below both the inputs and outputs, but it should still be visible initially (in the case of shared links, this is especially useful.)

Also, added an error handler that pops up a notification.

Attachment
0
penguinencounter

i regret to inform you that i had a massive skill issue making this notification with progress bar.

Attachment
Attachment
0
penguinencounter

okay so we need to redo the UI a bit. people expect horizontal flows when doing conversions, and having to scroll to correlate files will be a problem.

also, notifications for download progress coming soon?

also also we had to disable the service worker because it was making changes not happen in dev which was very annoying

Attachment
0
penguinencounter

oh wow i forgot to devlog

we implemented like half of the recipe system. recipes are like scripts but not as good because we’re interpreting them with JS
planned step types:

  • ffmpeg
  • ffprobe
  • set output file (done)
  • bulk set variables (done)
  • regex replace (done)
  • regex match

i also added a ServiceWorker for caching because ffmpeg is like 30 MB. plan is to also have it get that cross-origin isolation so we can use the multithreaded ffmpeg library
(you’re supposed to look at the ‘transferred’ column in the screenshot)

Attachment
0
penguinencounter

we now support files that aren’t just audio! like images! and videos! just look at the image!

(ffprobe to the rescue here, we’re just parsing the output of ffprobe -v error -show_entries stream $FILE for each file)

Attachment
0
penguinencounter

i really hate bundlers.

the ones that work work well, except when you need a worker.
and then they all fail.

so we’re resorting to manually copying files out of node_modules.

and patching our output JS

funnnnnn
(in other news, I made Forgejo CI push to GitHub in order for hosting to happen on GitHub pages. try it out @ https://penguinencounter.github.io/fumux-prod/dev/)

did I mention I did a bunch of UI design too? that also happened.

Attachment
Attachment
0
penguinencounter

made the drag and drop work! for some reason tampermonkey was not cooperating with it but then it started working so IDK what happened there

the clear button does not work and selecting files does not work

fun fact .ogg is application/ogg and not audio/vorbis. .oga might work, but we need to support .ogg

Attachment
0
penguinencounter

i got it to read files and tell me if they’re stereo or mono as well as the bitrate.

this is ffprobe -v error -select_streams a -of default=nw=1 -show_entries stream=bit_rate,channels input.ogg -o input-data.txt under the hood, and we’re using JSPM to link our packages (thanks to Lea Verou’s blog for introducing JSPM to me, it uses importmaps which are nice because it’s not a freaking bundler)

Attachment
Attachment
0