Self-hosted clip sharing web app

[Hubro]

I guess I’ll join the Devember hype, since Wendell and the gang keep badgering us about it on the news…

Real quick about me, I’ve been working as a software engineer for around 10 years now. For most of my career, I’ve been a one-man-team full stack software engineer, creating utilities for various Norwegian internet service providers. I currently work as a test automation engineer and network orchestration engineer at nordic/european telecom provider (I play with Cisco NSO, Jenkins and Robot Framework, if that means anything to you ). In my free time I tinker with personal coding projects, polish my home automation setup, build computers and play video games.

I few months ago I made a quick and simple self-hosted clip sharing application to share gaming clips with a few friends. My motivations were:

• Uploading to YouTube or Streamable takes a long time and destroys the quality of my clips
• Uploading to Dropbox and sending links is inconvenient for my friends, as they have to download the entire clip before watching it, which can take a looooong time from Dropbox
• I want to be able to save a clip and immediately send a link to somebody. That link should let my friend immediately stream it in full quality directly from my clip folder.

I made a quick application using Next.js that does this, and it works fantastically! However, the only form of security is currently a NGINX reverse proxy with an ACL, and there are some features that are missing for this to be generally useful to other people.

Here’s a quick overview of the current functionality:

• Runs in a Docker container with my clips folder mounted
• When a user opens the application in a browser all the clips are listed, sorted by file name, with file size and creation date of the file
• When a clip is clicked, a player view opens and plays the clip using a HTML5 video element. The clip is played as-is without any conversion or compression. I use this to share 30-40 Mbps clips (5120x1440 at 120 fps) and they play perfectly, buttery smooth. This is not possible using services like YouTube or Streamable.

The entire user interface can be summarized from these two screenshots:

(Yes I called the project “Clippy Mc. Clipface”, or “Clipface” for short, and yes I game at 32:9 aspect ratio)

I’m guessing there must be other nerds out there that want a quick and convenient (and self-hosted) way to share clips with their friends, and to that end, Clipface is going to need some more features, which is what I aim to do during Devember:

Here are the features that I’ve identified that would need to be implemented for a proper “version 1.0” of the project:

• Authentication for viewing clips - I’m thinking a simple password should suffice here. This would remove the need to maintain an ACL or HTTP basic authentication on a reverse proxy.
• The ability to upload (drag-and-drop), rename and delete clips. Currently I add clips by saving them directly to the clips folder using a network share.
• Authentication for administration features (as listed above)
• Add filter box to search for specific clips
• Add a convenient “Copy link” button to the clip list page and the view clip page

This is what I’m aiming to do during Devember.

Here is the current code: https://github.com/Hubro/clipface

Is this project something anybody else would be interested in using? If so, which features would you like to see?

[tyablix]

This project looks great! Just what I, and I’m sure many others are after. Streamable’s uploads that disappear after 90 days are really frustrating.

Authentication as you’ve identified is the big feature that would be great to have. Another idea could be to allow for re-titling of the clips in the web interface (without changing the real file names).

[Hubro]

Yeah I’ve been considering adding the ability to write a short description of the clip that would be displayed below it. I suppose adding a title would make sense as well. Both could be saved as a metadata file next to the clip.

[Hubro]

Just finished my first Devember coding session. I fleshed out the roadmap a bit more and added it to README. Additionally I implemented the “Copy link” buttons for the clip list and the watch clip page. Here’s a demo.

(The demo clip includes the music I was listening to while recording it, please let me know if that’s an issue.)

[SgtAwesomesauce]

@Hubro

Yes I called the project “Clippy Mc. Clipface”, or “Clipface” for short

Love it. This is wonderful!

@Hubro

(The demo clip includes the music I was listening to while recording it, please let me know if that’s an issue.)

Nah, that should be fine.

[Hubro]

Second Devember session on Clipface done. The clip list now has a case insensitive filter box that filters out all clips that don’t match the input. The text input change event is debounced by 250ms to keep the application responsive while typing.

Demo:

[Hubro]

Got another few hours of work done on Clipface over the weekend. I have now added basic authentication, which can be enabled using a config file. Here is a quick demo:

Just a couple of more simple quality of life features and I’m ready to declare version 1.0

I will be adding some usage instructions at that point. Perhaps even publish a Docker image to Docker Hub to simplify deployment.

NB: If any security competent people happen to read this, I would super appreciate a quick review of auth.js, internet security is not my specialty.

[anon85095355]

that’s a really nice project, but is the node_modules folder really necessary?

that’s the only two cents I’d have to give

coz since you get package-lock you can npm install before running it and will tidy up the project

also I didn’t dig deep enough but might add .env to gitignore alongside node_modules, if you’re using environment variables

[Hubro]

Oops! You’ll notice that /node_modules/ is actually already in client/.gitignore, but I forgot that I’m using a node_modules symlink to another directory on my PC, to avoid it getting synced to my Dropbox. In other words, the node_modules in the Git repo is just a symlink, not a directory. In any case I have now updated .gitignore and removed the symlink Thanks for the input.

[Hubro]

Clipface now has a theater mode button!

This button makes the video cover the entire available width and height of the window. The setting is remembered in local storage, and is also sent to the server in a cookie so the page can be properly server side rendered.

Demo:

[Hubro]

Got a few post-Christmas hours in, I have now finished up all the version 1.0 roadmap items:

• The clip list page title is now configurable, and it defaults to nothing (no title displayed) which looks like this:

  

• Updated Dockerfile and pushed Docker image to Docker Hub

• Added usage instructions to README.md

[Hubro]

Progress update on Clipface, probably the last one since Devember is officially over.

I have moved the roadmap for Clipface v2.0 out of the README file and into a Github project: https://github.com/Hubro/clipface/projects/1

I have added the ability to load and display metadata from a file on disk. As long as there is a JSON file with the same name as the clip, the contents will be loaded and added to the clip metadata.

The JSON file can currently contain a title and a description. If it contains a title, it will override the clip name in the clip list. Both the clip title and description will now be displayed in a new clip information box below the clip video player.

Example:

[MetalizeYourBrain]

Finally I’ll be able to host my own wetransfer!

When I get my hands on a Pi 4 I’m gonna give it a try for sure!

If I can suggest a feature is an expire timer for clips. It might be useful. Or even set a clip so that once the recepient has downloaded it the program asks for confirmation or automatically deletes the clip.

[Snacks]

This looks awesome and is EXACTLY what I am looking for. I currently have a slow internet connection and cannot use this just yet, but will test this in a couple of days. I do have one question. If I connect to the web server on my LAN and then press the copy link button, will it copy a link with the local IP address or will I be able to choose the domain/public IP it puts before the file name?

[Hubro]

Currently the “Copy link” button is implemented client side, so it uses the URL in the address bar. If you want to copy a link that other people can browse, you have to be browsing the public address of your Clipface instance. If there’s a performance penalty for doing that, you could always alias your public address to your local address in /etc/hosts.

If you find that to be a bad solution, you could always file an issue in the Github repo and I’ll take a look

Somewhat related, I have recently implemented a “Copy public link” button, which copies an URL with a token that gives access to a single clip, without giving access to all clips:

(It still uses the address currently in the address bar though)

[Snacks]

That’s what I kind of expected. I will probably just access it from the public domain when sharing links. Thank you for the quick response and for releasing this to the public. No joke this is exactly what I was trying to find. Perfect replacement for Streamable.

[Snacks]

I’m back with a solution to the domain issue. If you have a Pi-hole or some sort of local DNS you could have it resolve your domain to your local address so the links that are copied/generated still say your public domain, but you connect locally.

[Hubro]

@Snacks After a bit more thought I think a public URL setting is a useful feature, so I’ve added it to the backlog: Add a "Public URL" setting · Issue #8 · Hubro/clipface · GitHub