When browsing the site various errors pop up in the console like this:

The errors referenced are:

• https://reactjs.org/docs/error-decoder.html/?invariant=425
• https://reactjs.org/docs/error-decoder.html/?invariant=418
• https://reactjs.org/docs/error-decoder.html/?invariant=423

Functionality seems unimpaired and everything seems to work. Are these errors important or can they be safely ignored? If they can be ignored can they also be suppressed?

Issue

Uploads fail if the /DATA_DIR/uploads directory does not exist. The app does not create the uploads folder and fails if it is not created first.

Solution

The app should check if the uploads directory exists and create it if it does not.

The app is set up to handle database connections from a file or an external database. We should probably check if external databases actually work and add documentation in the README.md

This overhauls the environment variables mostly.

The reason for this, is Next.js is designed in a way that environment variables are set at build time, this can be worked around somewhat when using docker, but the issue is client variables. By default, Next.js replaces the code with the strings themselves. This makes it almost impossible to have dynamic environment variables for the client when running in docker.

The workaround I'm using dynamically loads new environment variables into a JS script, and then on the frontend, loading that script in on every page.

It's annoying, but it works.

Also in this PR:

• various small fixes and tweaks to code

Issue

When scrolling through videos, the upload button does not remain anchored to the bottom right. It's position is fixed and scrolls up with the videos.

Screenshot

Now uploads no longer use the multipart form data, but instead just send video chunks directly.

Added an environment variable to set chunk upload size (defaults to 30720 from the upload library I'm using).

In this PR I also removed the description field on the DB (it wasn't being used), and default titles to an empty string.

Should fix #23. This adds a catch on the ffmpeg process to then delete the video and any progress if it errors out.

With this, however, the client won't know what happened, only that the uploaded video now disappears.

Should fix #22. Now verifying video file types on the input itself, on the client side before the upload (because users can click "all files" in the dialog if they really want to), and on the server as well, just in case someone decides to hit the API directly.

If the ffmpeg fails to convert the video the video card is stuck processing and never completes.

There should be a graceful method for handling if ffmpeg fails for any reason, including cleanup for any generated files and database entries.

The app does not check what file type you are uploading.

I was able to upload a .jpg and a .png file to the app. The upload process should probably check the file being uploaded is actually a video.

This uses react query's dehydrate/rehydrate strategy outlined here. For some reason there was a discrepancy between the query client cache on the server vs client, and it was causing the server to render with 1 video instead of 2 after a video had been uploaded. Or 2 videos instead of 1 when a video had been deleted.

This should really fix #10. For real this time.

Suggestion

The login and other pages of NextAuth.js are currently in their default style. We should update the pages to be in line with the Material design of the rest of the site.

Suggestion

NextAuth.js supports several providers for Oauth. Of the providers listed I think having the ability to login with Discord would be the most useful.

Questions to consider

If this is implemented, should Discord be a mandatory login method or could Discord and e-mail be used interchangeably? If users can use Discord does e-mail authentication become optional?

This could also have an ENV variable that toggles or sets verbosity level

Things that could be logged for debugging:

• IP of new connections to the site
• Email errors if any
• HTTP errors
• Queue actions (e.g. if you upload multiple files, how far along the queue are you)

There should probably be some way of moderating the app in the case of bad actors.

This could include things like:

• Ability to purge a user account and all of their data
• Banning a user's email
• Ban and purge combo
• Suspending a user, preventing uploads but not deleting videos
• Deleting a single video
• Renaming a video

It would be helpful to queue uploaded files be processed one at a time instead of all at once. This way you don't slam the server with a ton of encoding jobs when uploading multiple files at once.