Lapse contributions

Previously, some users would overwrite their own local unfinished recording by accident or have some other bug, and they would lose their entire recording

This alerts them and prevents loss of recordings. It’s not the cleanest (because I used alert instead of a proper modal) but it gets the job done

I experimented with several ways of making sure only 1 tab could be opened while recording at the same time.

The first way was using BroadcastChannels, but that proved to be unreliable. It thought another tab was open when it wasn’t or that another tab wasn’t open when it was.

Then, after a little bit of digging, I found that navigator had locks. So I searched up the documentation on MDN and wrote some code to lock a resource when a tab was open on the timelapse creation page. If the tab could get a lock, that was the only tab open. If it couldn’t get the lock, then another tab must also be open.

But I ran into another issue. The code would run twice because of React’s strictMode. It would get the lock on the first run, and then it would run again and fail to fetch the lock and complain.

So I added a didRun ref to check if it did run, and if it did, to prevent the code from being ran again. That seemed to fix it

the PR is #207

The first image is the “before” picture, and the second image is the “after” picture.

Previously, some users would get confused and think a project was already selected for them, and they’d get confused when clicking “sync” didn’t work. This fixes that by explicitly telling the user to select a project

Introduced 3 QoL (quality-of-life) features:

1. Where you move the playhead is where the cut starts. Previously, the cut would always start in the middle of the timeline, even if the playhead was on the far right. Now, it starts where the playhead. This provides a better user experience and matches behavior from video editors like Davinci Resolve.

2. Users can now delete cuts by clicking on them to select them and use the backspace/delete key on the keyboard instead of using the “delete cut” button (althought that is still an option)

3. Recently added cuts are automatically selected so the user can easily delete it if they added it by accident

The refactor moved video processing from the client to the server, making my code incompadible.

This new code readds custom videos so people can upload recordings from OBS if they wanted to.
This also lets mobile users record their screen if they have an external video recording app or some such.

Also improved dx by updating the readme with more information

I closed issue #72 with PR #136 to allow uploads of precorded videos but the PR was never accepted (and will never be accpeted) because Asc is doing an overhaul to move all muxing over to the server because of the rampant OOM and other random issues with processing video on the client (plus, its kinda slow)

The reason it was slow is because I did the conversion on the client-side. So there would be code that ran inside the browser that rendered the frame to a hidden, canvas element, took a screenshot, and then stitched the screenshots together to make a video. Not a very good solution.

Closed issue #96 by making usernames clickable
This was an 8 minute task but I spent so long setting up the dev environment with the slack bot, and tinkering with LocalStack. LocalStack was so annoying. I’ll write another commit so that future devs have clearer instructions for setting up Local

Commit: https://github.com/hackclub/lapse/pull/112