tubo

# -*- mode: org; org-html-head-include-default-style: nil; org-html-postamble: nil; -*-
#+OPTIONS: toc:nil num:nil
#+TITLE: tubo
Tubo is a streaming front-end focused on bringing the [[https://newpipe.net/][NewPipe]] experience to the web. It aims at providing a clean and simple user interface to consume media from your favorite streaming platforms. It currently supports the same services as NewPipe, including YouTube, SoundCloud, Bandcamp, and more.

* Features
- No ads
- Background player
- Playback queue
- User playlists
- System/Light/Dark themes

* Installation
** Packaging
*** Uberjar
To bundle the whole project into a self-contained uber-jar you need to follow these build steps:

#+begin_src sh
npm i
clojure -T:frontend:build uberjar
#+end_src

After the last command is completed, you'll get a path to the uber-jar, which you can run like this:

#+begin_src sh
java -jar target/tubo-.jar
#+end_src

*** Docker
For Docker, there's an image available in Docker Hub you can use:

#+begin_src sh
docker pull migalmoreno/tubo
docker run --publish 3000:3000 -d --name tubo migalmoreno/tubo:latest
#+end_src

There's also a Docker Compose file available which you can run like this:

#+begin_src sh
docker compose up -d
#+end_src

** Reverse Proxy
If you want to self-host Tubo and make it publicly accessible you'll need to set up a reverse proxy. The following shows some example configurations for various web servers:

*** Nginx

#+begin_src nginx
server {
listen 443 ssl http2;
server_name ;
ssl_certificate /etc/letsencrypt/live//fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live//privkey.pem;

location / {
proxy_pass http://localhost:3000;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header HOST $http_host;
}
}
#+end_src

* Development setup
To get a development environment set up, first install the front-end dependencies.

#+begin_src sh
npm i
#+end_src

Then, compile ahead-of-time (AOT) the necessary classes.

#+begin_src sh
clojure -M -e "(compile 'tubo.downloader-impl)"
#+end_src

** CLI
To start a front-end development server with hot-reload support, run:

#+begin_src sh
clojure -M:frontend watch tubo
#+end_src

You can now access it in your browser at [[http://localhost:8020]]

To start the API, run:

#+begin_src sh
clojure -M:run
#+end_src

Note that front-end API requests will be proxied to the API.

** REPL
You can also work on Tubo using an interactive environment like [[https://docs.cider.mx/cider/index.html][CIDER]]. Once you have it installed, do =M-x cider-jack-in-clj&cljs= in a source file and you'll enter a live REPL.

If you'd like to automate the process, you can place something along the following lines in your =.dir-locals.el= file to automatically start the REPLs with the needed configuration.

#+begin_src elisp
((nil . ((cider-preferred-build-tool . clojure-cli)
(cider-clojure-cli-aliases . "-M:frontend")
(cider-default-cljs-repl . custom)
(cider-custom-cljs-repl-init-form . "(do (require '[shadow.cljs.devtools.api :as shadow])\n(require '[shadow.cljs.devtools.server :as server])\n(server/start!)\n(shadow/watch :tubo)\n(shadow/nrepl-select :tubo))")
(cider-merge-sessions . :project)
(eval . (progn
(unless (boundp 'cider-jack-in-nrepl-middlewares)
(require 'cider))
(make-variable-buffer-local 'cider-jack-in-nrepl-middlewares)
(add-to-list 'cider-jack-in-nrepl-middlewares "cider.nrepl/cider-middleware")
(add-to-list 'cider-jack-in-nrepl-middlewares "shadow.cljs.devtools.server.nrepl/middleware"))))))
#+end_src

You can then invoke this to start the API:

#+begin_src clojure
user=> (require '[tubo.http])
user=> (tubo.http/start-server!)
#+end_src

* Public Instances
| URL | Country |
|-------------------------------+---------|
| https://tubo.media (Official) | 🇪🇸 |
| https://tubo.reallyaweso.me | 🇩🇪 |
| https://tubo.ducks.party | 🇩🇪 |

* Browser Extension Support
** [[https://einaregilsson.com/redirector/][Redirector]]
You can manually add any redirect rule based on regex patterns with this extension. Below are some sample configurations to redirect links from supported services to Tubo so you get a basic idea of how to write manual Redirector rules. Note the =serviceId= of each service is: YouTube (0), SoundCloud(1), media.ccc.de(2), PeerTube(3), and Bandcamp(4).

#+begin_src conf-colon
Description: YouTube video to Tubo stream
Example URL: https://www.youtube.com/watch?v=YE7VzlLtp-4
Include pattern: ^((?:https?://)(?:www.)?youtube.com/(watch\?v.*|shorts/.*))
Redirect to: https:///stream?url=$1
Example result: https:///stream?url=https://www.youtube.com/watch?v=YE7VzlLtp-4
Pattern type: Regular Expression
Apply to: Main window (address bar)
#+end_src

#+begin_src conf-colon
Description: SoundCloud stream to Tubo stream
Example URL: https://soundcloud.com/unfa/stop-the-panic
Include pattern: ^((?:https?://)(?:www.)?soundcloud.com/.*/.*)
Redirect to: https:///stream?url=$1
Example result: https:///stream?url=https://soundcloud.com/unfa/stop-the-panic
Pattern type: Regular Expression
Apply to: Main window (address bar)
#+end_src

#+begin_src conf-colon
Description: Bandcamp album to Tubo playlist
Example URL: https://unfa.bandcamp.com/album/suppressed
Include pattern: ^((?:https?://)(.*\.)?bandcamp.com/album/.*)
Redirect to: https:///playlist?url=$1
Example result: https:///playlist?url=https://unfa.bandcamp.com/album/suppressed
Pattern type: Regular Expression
Apply to: Main window (address bar)
#+end_src

#+begin_src conf-colon
Description: PeerTube (Framatube) channel to Tubo channel
Example URL: https://framatube.org/accounts/framasoft@framatube.org
Include pattern: ^((?:https?://)(?:www.)?framatube.org/accounts/.*)
Redirect to: https:///channel?url=$1
Example result: https:///channel?url=https://framatube.org/accounts/framasoft@framatube.org
Pattern type: Regular Expression
Apply to: Main window (address bar)
#+end_src

#+begin_src conf-colon
Description: media.ccc.de search query to Tubo search query
Example URL: https://media.ccc.de/search/?q=37c3
Include pattern: ^(?:https?://)media.ccc.de/search/\?q=(.*)
Redirect to: https:///search?query=$1&serviceId=2
Example result: https:///search?query=37c3&serviceId=2
Pattern type: Regular Expression
Apply to: Main window (address bar)
#+end_src

** [[https://libredirect.github.io/][LibRedirect]]
Redirects many popular services to their alternative front-ends. Has a ton of features and an active community. Tubo is supported by default for YouTube and SoundCloud.

** [[https://github.com/libreom/predirect][Predirect]]
Serves the same purpose as LibRedirect but is Manifest V3 compatible. Tubo is supported by default for SoundCloud.

** [[https://github.com/dybdeskarphet/privacy-redirector][Privacy Redirector]]
A user-script that redirects popular social media platforms to their privacy respecting front-ends. Tubo is supported by default for YouTube and SoundCloud.