Fix node min versions

Remove duplicate metric and transform it into a gauge because the value
can decrease

.dprint.json

@@ -88,6 +88,6 @@
     "https://plugins.dprint.dev/markdown-0.17.1.wasm",
     "https://plugins.dprint.dev/toml-0.6.2.wasm",
     "https://plugins.dprint.dev/g-plane/malva-v0.12.0.wasm",
-    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.19.1.wasm"
+    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.23.3.wasm"
   ]
 }

.github/CONTRIBUTING.md

@@ -79,7 +79,7 @@ First, you should use a server or PC with at least 4GB of RAM. Less RAM may lead
 git clone https://github.com/Chocobozzz/PeerTube
 cd PeerTube
 git remote add me git@github.com:YOUR_GITHUB_USERNAME/PeerTube.git
-yarn install --pure-lockfile
+npm run install-node-dependencies
 ```
 
 Note that development is done on the `develop` branch. If you want to hack on
@@ -223,8 +223,19 @@ Instance configurations are in `config/test-{1,2,3}.yaml`.
 
 To test emails with PeerTube:
 
- * Run [mailslurper](http://mailslurper.com/)
- * Run PeerTube using mailslurper SMTP port: `NODE_CONFIG='{ "smtp": { "hostname": "localhost", "port": 2500, "tls": false } }' NODE_ENV=dev node dist/server`
+ * Run [MailDev](https://github.com/maildev/maildev) using Docker
+ * Run PeerTube using MailDev SMTP port: `NODE_CONFIG='{ "smtp": { "hostname": "localhost", "port": 2500, "tls": false } }' NODE_ENV=dev node dist/server`
+
+To test all emails without having to run actions manually on the web interface, you can run notification unit tests with environment variables to relay emails to your MailDev instance. For example:
+
+```sh
+MAILDEV_RELAY_HOST=localhost MAILDEV_RELAY_PORT=2500 mocha --exit --bail packages/tests/src/api/notifications/comments-notifications.ts
+```
+
+You can then go to the MailDev web interface and see how emails look like.
+
+The admin web interface also have a button to send some email templates to a specific email address.
+
 
 ### Environment variables
 

.github/actions/reusable-prepare-peertube-build/action.yml

@@ -11,32 +11,20 @@ runs:
   using: "composite"
 
   steps:
+    - uses: pnpm/action-setup@v4
+      name: Install pnpm
+      with:
+        run_install: false
+
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
         node-version: ${{ inputs.node-version }}
-
-    - name: Cache Node.js modules
-      uses: actions/cache@v4
-      with:
-        path: |
-          **/node_modules
-        key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.OS }}-node-
-          ${{ runner.OS }}-
+        cache: 'pnpm'
 
     - name: Install dependencies
       shell: bash
-      run: yarn install --frozen-lockfile
-
-    - name: Install peertube runner dependencies
-      shell: bash
-      run: cd apps/peertube-runner && yarn install --frozen-lockfile
-
-    - name: Install peertube CLI dependencies
-      shell: bash
-      run: cd apps/peertube-cli && yarn install --frozen-lockfile
+      run: npm run install-node-dependencies
 
     - name: Display PeerTube dependencies
       shell: bash

.github/copilot-instructions.md

@@ -0,0 +1,222 @@
+# PeerTube Copilot Instructions
+
+## Repository Overview
+
+PeerTube is an open-source, ActivityPub-federated video streaming platform using P2P technology directly in web browsers. It's developed by Framasoft and provides a decentralized alternative to centralized video platforms like YouTube.
+
+**Repository Stats:**
+- **Size**: Large monorepo (~350MB, ~15k files)
+- **Type**: Full-stack web application
+- **Languages**: TypeScript (backend), Angular (frontend), Shell scripts
+- **Target Runtime**: Node.js >=20.x, PostgreSQL >=10.x, Redis >=6.x
+- **Package Manager**: Yarn 1.x (NOT >=2.x)
+- **Architecture**: Express.js API server + Angular SPA client + P2P video delivery
+
+## Critical: Client Directory Exclusion
+
+**🚫 ALWAYS IGNORE `client/` directory** - it contains a separate Angular frontend project with its own build system, dependencies, and development workflow. Focus only on the server-side backend code.
+
+## Build & Development Commands
+
+### Prerequisites (Required)
+1. **Dependencies**: Node.js >=20.x, Yarn 1.x, PostgreSQL >=10.x, Redis >=6.x, FFmpeg >=4.3, Python >=3.8
+2. **PostgreSQL Setup**:
+   ```bash
+   sudo -u postgres createuser -P peertube
+   sudo -u postgres createdb -O peertube peertube_dev
+   sudo -u postgres psql -c "CREATE EXTENSION pg_trgm;" peertube_dev
+   sudo -u postgres psql -c "CREATE EXTENSION unaccent;" peertube_dev
+   ```
+3. **Services**: Start PostgreSQL and Redis before development
+
+### Installation & Build (Execute in Order)
+```bash
+# 1. ALWAYS install dependencies first (takes ~2-3 minutes)
+yarn install --frozen-lockfile
+
+# 2. Build server (required for most operations, takes ~3-5 minutes)
+npm run build:server
+
+# 3. Optional: Build full application (takes ~10-15 minutes)
+npm run build
+```
+
+**⚠️ Critical Notes:**
+- Always run `yarn install --frozen-lockfile` before any build operation
+- Server build is prerequisite for testing and development
+- Never use `npm install` - always use `yarn`
+- Build failures often indicate missing PostgreSQL extensions or wrong Node.js version
+
+### Development Commands
+```bash
+# Server-only development (recommended for backend work)
+npm run dev:server  # Starts server on localhost:9000 with hot reload
+
+# Full stack development (NOT recommended if only working on server)
+npm run dev         # Starts both server (9000) and client (3000)
+
+# Development credentials:
+# Username: root
+# Password: test
+```
+
+### Testing Commands (Execute in Order)
+```bash
+# 1. Prepare test environment (required before first test run)
+sudo -u postgres createuser $(whoami) --createdb --superuser
+npm run clean:server:test
+
+# 2. Build (required before testing)
+npm run build
+
+# 3. Run specific test suites (recommended over full test)
+npm run ci -- api-1     # API tests part 1
+npm run ci -- api-2     # API tests part 2
+npm run ci -- lint      # Linting only
+npm run ci -- client    # Client tests
+
+# 4. Run single test file
+npm run mocha -- --exit --bail packages/tests/src/api/videos/single-server.ts
+
+# 5. Full test suite (takes ~45-60 minutes, avoid unless necessary)
+npm run test
+```
+
+**⚠️ Test Environment Notes:**
+- Tests require PostgreSQL user with createdb/superuser privileges
+- Some tests need Docker containers for S3/LDAP simulation
+- Test failures often indicate missing system dependencies or DB permissions
+- Set `DISABLE_HTTP_IMPORT_TESTS=true` to skip flaky import tests
+
+### Validation Commands
+```bash
+# Lint code (runs ESLint + OpenAPI validation)
+npm run lint
+
+# Validate OpenAPI spec
+npm run swagger-cli -- validate support/doc/api/openapi.yaml
+
+# Build server
+npm run build:server
+```
+
+## Project Architecture & Layout
+
+### Server-Side Structure (Primary Focus)
+```
+server/core/
+├── controllers/api/     # Express route handlers (add new endpoints here)
+│   ├── index.ts        # Main API router registration
+│   ├── videos/         # Video-related endpoints
+│   └── users/          # User-related endpoints
+├── models/             # Sequelize database models
+│   ├── video/          # Video, channel, playlist models
+│   └── user/           # User, account models
+├── lib/                # Business logic services
+│   ├── job-queue/      # Background job processing
+│   └── emailer.ts      # Email service
+├── middlewares/        # Express middleware
+│   ├── validators/     # Input validation (always required)
+│   └── auth.ts         # Authentication middleware
+├── helpers/            # Utility functions
+└── initializers/       # App startup and constants
+```
+
+### Key Configuration Files
+- `package.json` - Main dependencies and scripts
+- `server/package.json` - Server-specific config
+- `eslint.config.mjs` - Linting rules
+- `tsconfig.base.json` - TypeScript base config
+- `config/default.yaml` - Default app configuration
+- `.mocharc.cjs` - Test runner configuration
+
+### Shared Packages (`packages/`)
+```
+packages/
+├── models/             # Shared TypeScript interfaces (modify for API changes)
+├── core-utils/         # Common utilities
+├── ffmpeg/             # Video processing
+├── server-commands/    # Test helpers
+└── tests/             # Test files
+```
+
+### Scripts Directory (`scripts/`)
+- `scripts/build/` - Build automation
+- `scripts/dev/` - Development helpers
+- `scripts/ci.sh` - Continuous integration runner
+- `scripts/test.sh` - Test runner
+
+## Continuous Integration Pipeline
+
+**GitHub Actions** (`.github/workflows/test.yml`):
+1. **Matrix Strategy**: Tests run in parallel across different suites
+2. **Required Services**: PostgreSQL, Redis, LDAP, S3, Keycloak containers
+3. **Test Suites**: `types-package`, `client`, `api-1` through `api-5`, `transcription`, `cli-plugin`, `lint`, `external-plugins`
+4. **Environment**: Ubuntu 22.04, Node.js 20.x
+5. **Typical Runtime**: 15-30 minutes per suite
+
+**Pre-commit Checks**: ESLint, TypeScript compilation, OpenAPI validation
+
+## Making Code Changes
+
+### Adding New API Endpoint
+1. Create controller in `server/core/controllers/api/`
+2. Add validation middleware in `server/core/middlewares/validators/`
+3. Register route in `server/core/controllers/api/index.ts`
+4. Update shared types in `packages/models/`
+5. Add OpenAPI documentation tags
+6. Write tests in `packages/tests/src/api/`
+
+### Common Patterns to Follow
+```typescript
+// Controller pattern
+import express from 'express'
+import { apiRateLimiter, asyncMiddleware } from '../../middlewares/index.js'
+
+const router = express.Router()
+router.use(apiRateLimiter)  // ALWAYS include rate limiting
+
+router.get('/:id',
+  validationMiddleware,     // ALWAYS validate inputs
+  asyncMiddleware(handler)  // ALWAYS wrap async handlers
+)
+```
+
+### Database Changes
+1. Create/modify Sequelize model in `server/core/models/`
+2. Generate migration in `server/core/initializers/migrations/`
+3. Update shared types in `packages/models/`
+4. Run `npm run build:server` to compile
+
+## Validation Steps Before PR
+
+1. **Build**: `npm run build` (must succeed)
+2. **Lint**: `npm run lint` (must pass without errors)
+5. **OpenAPI**: Validate if API changes made
+
+## Common Error Solutions
+
+**Build Errors:**
+- "Cannot find module": Run `yarn install --frozen-lockfile`
+- "PostgreSQL connection": Check PostgreSQL is running and extensions installed
+- TypeScript errors: Check Node.js version (must be >=20.x)
+
+**Test Errors:**
+- Permission denied: Ensure PostgreSQL user has createdb/superuser rights
+- Port conflicts: Stop other PeerTube instances
+- Import test failures: Set `DISABLE_HTTP_IMPORT_TESTS=true`
+
+**Development Issues:**
+- "Client dist not found": Run `npm run build:client` (only if working on client features)
+- Redis connection: Ensure Redis server is running
+- Hot reload not working: Kill all Node processes and restart
+
+## Trust These Instructions
+
+These instructions have been validated against the current codebase. Only search for additional information if:
+- Commands fail with updated error messages
+- New dependencies are added to package.json
+- Build system changes are detected
+- You need specific implementation details not covered here
+
+Focus on server-side TypeScript development in `server/core/` and ignore the `client/` directory unless explicitly working on frontend integration.

.github/workflows/docker.yml

@@ -27,7 +27,7 @@ jobs:
           # FIXME: https://github.com/actions/checkout/issues/290
           git fetch --force --tags
 
-          one="{ \"build-peertube\": true, \"file\": \"./support/docker/production/Dockerfile.bookworm\", \"ref\": \"develop\", \"tags\": \"chocobozzz/peertube:develop-bookworm\" }"
+          one="{ \"build-peertube\": true, \"file\": \"./support/docker/production/Dockerfile\", \"ref\": \"develop\", \"tags\": \"chocobozzz/peertube:develop-trixie,chocobozzz/peertube:develop\" }"
           two="{ \"build-peertube\": true, \"file\": \"./support/docker/production/Dockerfile.bookworm\", \"ref\": \"master\", \"tags\": \"chocobozzz/peertube:production-bookworm,chocobozzz/peertube:$(git describe --abbrev=0)-bookworm\" }"
           three="{ \"build-peertube\": false, \"file\": \"./support/docker/production/Dockerfile.nginx\", \"ref\": \"master\", \"tags\": \"chocobozzz/peertube-webserver:latest\" }"
 

.github/workflows/stats.yml

@@ -34,7 +34,7 @@ jobs:
         run: |
           wget "https://github.com/boyter/scc/releases/download/v3.0.0/scc-3.0.0-x86_64-unknown-linux.zip"
           unzip "scc-3.0.0-x86_64-unknown-linux.zip"
-          ./scc --format=json --exclude-dir .git,node_modules,client/node_modules,client/dist,dist,yarn.lock,client/yarn.lock,client/src/locale,test1,test2,test3,client/src/assets/images,config,storage,packages/tests/fixtures,support/openapi,.idea,.vscode,docker-volume,ffmpeg-3,ffmpeg-4 > ./scc.json
+          ./scc --format=json --exclude-dir .git,node_modules,client/node_modules,client/dist,dist,pnpm-lock.yaml,client/src/locale,test1,test2,test3,client/src/assets/images,config,storage,packages/tests/fixtures,support/openapi,.idea,.vscode,docker-volume,ffmpeg-3,ffmpeg-4 > ./scc.json
 
       - name: PeerTube client stats
         if: github.event_name != 'pull_request'

.github/workflows/test.yml

@@ -38,6 +38,14 @@ jobs:
         ports:
           - 9444:9000
 
+      keycloak:
+        image: chocobozzz/peertube-tests-keycloak
+        ports:
+          - 8082:8080
+        env:
+          KC_BOOTSTRAP_ADMIN_USERNAME: admin
+          KC_BOOTSTRAP_ADMIN_PASSWORD: admin
+
     strategy:
       fail-fast: false
       matrix:

.gitignore

@@ -1,9 +1,7 @@
 # NPM instalation
 node_modules
 *npm-debug.log
-yarn-error.log
 *-ci.log
-.yarn
 
 # Testing
 /test1/

CHANGELOG.md

@@ -1,5 +1,132 @@
 # Changelog
 
+## v7.3.0
+
+### IMPORTANT NOTES
+
+  * Minimum supported NodeJS version is `20.19`
+
+### NGINX
+
+ * Disable request buffering on upload endpoints to fix HTTP request timeouts: https://github.com/Chocobozzz/PeerTube/commit/d1a35e8421195088e2754b787c4af1e765b9eaa9
+
+### Plugins/Themes/Embed API
+
+  * **Breaking change** Plugin and themes must use `:root` CSS selector instead of `body` to inject CSS variables
+  * Add server API (https://docs.joinpeertube.org/api/plugins):
+    * Support `externalRedirectUri` for `registerExternalAuth` so PeerTube redirects users on another URL set by the plugin
+    * If your plugin uses `filter:email.template-path.result` server hook: emails now use Handlebars template engine instead of Pug template engine
+
+### Features
+
+  * :tada: Emails can now be translated :tada: Check the [translation documentation](https://docs.joinpeertube.org/support/doc/translation) to help us translate emails in your language!
+  * :tada: Introduce a web configuration wizard to help administrators to configure their instance automatically :tada:
+    * The wizard appears once the administrators have logged in following the installation of the PeerTube instance
+    * Admins can also run the wizard via a button in the web admin config
+    * The main instance information (e.g. name, short description, logo, primary colour) can be entered using the wizard.
+    * It also helps the admin to apply a configuration depending on the instance type (community-based, institutional, private)
+  * :tada: Redesign the admin config to use a lateral menu for navigating between subsections :tada:
+    * Add a new *Customization* page to easily change the main colors and shape of the client interface
+    * Add a new *Logo* page where admins can upload logos/favicon and social media images for their instances
+    * Add an option to set the default licence, privacy and comments policy when publishing videos
+    * The email prefix and body can now be changed in the web admin config. These configurations also support the `{{instanceName}}` template variable, which is replaced by the instance name
+  * Improve admin federation control:
+    * Add the ability for admins to completely disable remote subscriptions to local channels
+    * Admins can also set up automatic rejection of video comments from remote instances
+  * Add 2FA column information in admin users overview table
+  * Display remote runner version in admin
+  * Add ability for users to set the planned date of a live. These lives are displayed when browsing videos [#7144](https://github.com/Chocobozzz/PeerTube/pull/7144)
+  * Improve data tables UX/UI
+  * Improve account/channel playlists management:
+    * Use a data table to manage account and channel playlists
+    * Allow to manually set the order of the public playlists displayed in a channel
+  * Improve sensitive content warning in embed player
+  * Improve audio transcoding quality, especially with FLAC input
+  * Support Creole French languages in video language metadata
+  * Add ability for users to list and revoke token sessions
+  * Support *Free of known copyright restrictions* and *Copyrighted - All Rights Reserved* video licence metadata
+  * Play/pause the video player using `k` key
+
+### Bug fixes
+
+  * Fix ActivityPub audience for unlisted videos
+  * Use an array of URL in `attributedTo` ActivityPub field
+  * Prefer `og:image` instead of `og:image:url`
+  * Better thumbnail blur for sensitive content [#7105](https://github.com/Chocobozzz/PeerTube/pull/7105)
+  * Prefer `allow="fullscreen"` for video embed `iframe` [#7043](https://github.com/Chocobozzz/PeerTube/pull/7043)
+  * Respect the sensitive content policy, even for videos owned by the user
+  * Fix the issue of the scroll position not being restored when pages load slowly [#7143](https://github.com/Chocobozzz/PeerTube/pull/7143)
+  * Fix remote actor follow counter after a local subscription
+  * Fix reloading videos in *Browser videos* when the link only changes query parameters
+  * Add stall job check for remote studio and transcription runner jobs
+  * Prevent metric warning for redundancy gauge
+  * Fix disabling *Wait transcoding* checkbox
+  * Correctly import new elements of a playlist in channel synchronization
+  * Fix overflow in discover page
+  * Fix restoring scroll position when going back in the web browser on the homepage set by the admin
+  * Fill video support on channel sync
+  * Respect instance default privacy setting when publishing imports and lives
+  * Remove useless help for live transcoding
+  * Fix RTL margins on some components
+
+
+## v7.2.3
+
+### SECURITY
+
+ * Upgrade `multer` dependency to prevent Denial of Service with a malformed request
+
+### Bug fixes
+
+ * Fix channel synchronization that duplicates video imports
+
+
+## v7.2.2
+
+### SECURITY
+
+ * Prevent ReDOS from `useragent` package by removing deprecated Do Not Track feature. Thanks to Patrick Bohn Matthiesen and [Leonora](https://github.com/herover) from IT University of Copenhagen for reporting this vulnerability!
+
+### Bug fixes
+
+ * Correctly display bulk actions button in "My videos"
+ * Keep playlist name original casing in "My videos"
+ * Fix PIP button z-index on Firefox
+ * More robust S3 upload and ACL error handler
+ * Fix broken video state on S3 move failure
+ * Reset filters when loading query params in "Browse videos"
+ * Fix upload tab title when the file is uploaded
+ * Fix follow card overflow in about page
+ * Convert to full UUID request param `id` in `filter:html.embed.video.allowed.result` and `filter:html.embed.video-playlist.allowed.result` plugin hooks
+ * Fix HLS playback issue on Chrome 138
+ * Fix selecting frame on Safari
+ * Fix input search with multiple prefix tokens
+ * Fix channel sync duplicate after video deletion
+ * Fix caption raw edition when editing segment
+ * Fix accessibility issues:
+   * Fix embed title/avatar accessibility
+   * Add player P2P up/down info aria label
+   * Support escape key in the player settings menu
+   * Support arrow left/right navigation in the settings menu
+   * Fix entry focus when navigating in the settings menu
+   * Add aria controls attribute to settings button
+   * Thanks to [Woebin](https://github.com/Woebin) from [Access Lab](https://axesslab.com/) and [HowlRound Theatre Commons](https://howlround.com/) for conducting the player accessibility audit!
+
+
+## v7.2.1
+
+### Bug fixes
+
+ * Fix federation of sensitive videos with previous PeerTube versions
+ * Do not uppercase video tags to prevent accessibility issues
+ * Fix support field not automatically filled from channel data when publishing a video
+ * Fix "Add new playlist" broken style
+ * Fix browse videos page title on web browser "History Back"
+ * Fix parent menu highlighting in *About Platform* pages
+ * Don't display description/terms titles if these blocks are empty
+ * Correctly load count and rows per page when listing *My videos*
+
+
 ## v7.2.0
 
 ### IMPORTANT NOTES
@@ -11,7 +138,7 @@
 ### SECURITY
 
  * If you installed PeerTube using the [official documentation](https://docs.joinpeertube.org/install/any-os#installation), we highly recommend setting the default user shell to `nologin`. For example on GNU/Linux: `chsh -s /usr/sbin/nologin peertube`
- * If you installed PeerTube runners using the [official Systemd service documentation]https://docs.joinpeertube.org/maintain/tools#as-a-systemd-service(), we highly recommend setting the default user shell to `nologin`. For example on GNU/Linux: `chsh -s /usr/sbin/nologin prunner`
+ * If you installed PeerTube runners using the [official Systemd service documentation](https://docs.joinpeertube.org/maintain/tools#as-a-systemd-service), we highly recommend setting the default user shell to `nologin`. For example on GNU/Linux: `chsh -s /usr/sbin/nologin prunner`
 
 ### Configuration
 

CREDITS.md

@@ -3,20 +3,23 @@
  * Chocobozzz
  * Rigel Kent
  * DignifiedSilence
- * Александр
  * T.S
- * josé m
+ * Александр
  * Hồ Nhất Duy
  * Jeff Huang
+ * josé m
+ * Milo Ivir
  * Ihor Hordiichuk
  * Filip Bengtsson
+ * fran secs
+ * kontrollanten
  * Payman Moghadam
  * Berto Te
- * kontrollanten
- * Milo Ivir
  * Simon Brosdetzko
  * Jiri Podhorecky
  * Phongpanot
+ * Sveinn í Felli
+ * Hannes Ylä-Jääski
  * GunChleoc
  * hecko
  * Laurent Ettouati
@@ -24,65 +27,76 @@
  * Zet
  * Ewout van Mansom
  * Aitor Salaberria
- * Sveinn í Felli
+ * Leif-Jöran Olsson
  * Clemens Schielicke
  * Luca Calcaterra
  * Racida S
- * Marcin Mikołajczak
- * Eivind Ødegård
  * Balázs Meskó
- * Tirifto
+ * Marcin Mikołajczak
  * Wicklow
+ * Blood Axe
+ * Eivind Ødegård
  * John Livingston
- * Hannes Ylä-Jääski
- * Kim
+ * Tirifto
  * Besnik Bleta
+ * Kim
  * Vodoyo Kamal
+ * Jiří Podhorecký
  * Armin
  * Fontan 030
+ * ButterflyOfFire
  * Mohamad Reza
  * Quentin PAGÈS
  * Kimsible
  * Felix Ableitner
  * Frank Sträter
  * Free coss
+ * Ettore Atalan
+ * Andrea Gavioli
  * Mürteza MERT
  * Gérald Niel
- * ButterflyOfFire
  * Duy
+ * Eric Guichaoua
+ * Renne Rocha
  * Slimane Selyan AMIRI
  * Dingzhong Chen
- * Eric Guichaoua
+ * Filip Hanes
  * Julien Maulny
  * Mark Van den Borre
  * x
+ * Booteille
  * Manuel Viens
  * Jorropo
  * Josh Morel
- * Renne Rocha
+ * dxuser514
  * BO41
- * Ettore Atalan
+ * Marc Strange
  * vachan
+ * AP
  * Elegant Codes
  * Florian CUNY
  * Francesc
+ * alex gabilondo
  * mando laress
+ * Ľubomír Šima
  * Артём Котлубай
+ * Fjuro
  * Ricardo Biloti
  * 0que
- * Blood Axe
  * Cedric F
  * Florent
- * Marc Strange
+ * Ricardo Simões
  * lutangar
  * Ch
  * J. Lavoie
+ * Luc Didry
  * YILDIRIM YAPRAK
- * alex gabilondo
  * barzofarev2
  * jan Seli
  * 李奕寯
+ * Erik Guldberg
  * Kempelen
+ * Kerim Demirkaynak
  * Martin Hoefler
  * Porrumentzio
  * Poslovitch
@@ -91,67 +105,75 @@
  * Alexander Ivanov
  * Balázs Úr
  * Echo Kilo
- * Erik Guldberg
  * Jan Keromnes
- * Jiří Podhorecký
- * Luc Didry
  * Siourdakis Thanos
+ * Thomas Citharel
  * knuxify
+ * tray
+ * Adrià Martín
  * Agron Selimaj
  * Attila F
  * Caroline Chuong
  * David Soh
  * Diazepan Medina
  * Jason Zhou
- * Kerim Demirkaynak
  * Loukas Stamellos
  * Ms Kimsible
  * NorbiPeti
  * Sergey Zigachev
- * Thomas Citharel
  * Txopi
  * Benjamin Bouvier
- * Filip Hanes
+ * Cavernosa
+ * Ghost of Sparta
  * Joe Bill
+ * Julien
+ * Jure Repinc
  * Kemal Oktay Aktoğan
  * Lucas Declercq
+ * Ryan He
  * Sirxy
+ * Viorel-Cătălin Răpițeanu
  * matograine
- * Adrià Martín
+ * 偶尔来巡山
  * Ahmed ABERWAG
  * Daniel Santos
  * David Libeau
  * Ewald Arnold
  * Florent F
+ * Florent Poinsaut
  * Ignacio Carrera González
  * Jayme Soares Almeida Cruz
+ * Lety Does Stuff
  * Nassim Bounouas
  * Rafael Fontenelle
  * Thomas Kuntz
  * Tzafrir Cohen
- * Viorel-Cătălin Răpițeanu
  * Vri
  * miro
  * nexi
  * owiox8+1viroxeaziaxw@sharklasers.com
+ * spf
+ * wazakovsky
  * yns bag
  * Anne-Gaelle Moulun
  * Arman
  * Asier Iturralde Sarasola
  * BRAINS YUM
  * Belkacem Mohammed
+ * Bob Oob
  * Côme 744
  * Dimitri Gilbert
  * Flavio F. M
- * Florent Poinsaut
  * Frank Chang
  * Green-Star
  * I_Automne
  * Ilia
+ * Marek Ľach
  * Micah Elizabeth Scott
  * Pierre-Jean
  * Ret Samys
  * SVNET Libre
+ * StarAtt
  * Tomasz
  * Tony Simoes
  * William Lahti
@@ -160,18 +182,18 @@
  * boris joeson
  * frankstrater
  * mater
- * spf
  * test2a
  * think4web
  * 路过是好事
  * Ajeje Brazorf
+ * Andreas Grupp
  * Andrey
  * Angristan
  * Benjamin Seitz
- * Bob Oob
- * Booteille
+ * Cirnos
  * Cokelat8
  * DontUseGithub
+ * Eder Etxebarria
  * Farooq Karimi Zadeh
  * Frederic Bezies
  * Iñigo
@@ -180,24 +202,30 @@
  * José M
  * Kristoffer Grundström
  * LecygneNoir
+ * Liu Zhiyu
  * Lukas
  * MahdiTurki
  * Martijn Dekker
  * Mats Blomdahl
  * Maxime Louet
  * Mildred
+ * Murat Hasdemir
+ * Murat Özalp
  * Nikolay
  * Okhin
+ * Osama
  * Pierre-Alain TORET
  * Serge Victor
  * Théo Le Calvar
  * Ugaitz
+ * Vaclovas Intas
  * Vincent Finance
  * aschaap
  * clementbrizard
  * gohoso9454
  * helabasa
  * kaiyou
+ * max
  * roberto marcolin
  * Ahsan Haris Ahmed
  * Alberto Teira
@@ -212,11 +240,12 @@
  * Asr128
  * Aurélien Bertron
  * Axel Viala
+ * Casper Ruttten
+ * Charles-Edouard Gervais
  * Danail Emandiev
  * Daniele Garau
  * Dep Pranata
  * Dirk Kelly
- * Eder Etxebarria
  * Ehsan Gholami
  * Elga Ahmad Prayoga
  * Girish Ramakrishnan
@@ -237,13 +266,14 @@
  * Lukas Winkler
  * M Z
  * Manuela Silva
+ * Marian
  * Morpheus Tao
  * Mélanie Chauvel
  * Natsuki Tsukishiro
+ * Paolo Mauri
  * Pedro
  * Petr Balíček
  * Piotr Sikora
- * Ryan He
  * Stardream
  * Stefan Keks
  * Tom Wellington
@@ -259,8 +289,10 @@
  * h3n3
  * iapellaniz
  * jonathanraes
+ * legiorange
  * numéro6
  * saleh oukiki
+ * Àngel Pérez Beroy
  * Ömer Faruk Çakmak
  * AQR_Rastiq
  * Al-Hassan Abdel-Raouf
@@ -277,13 +309,14 @@
  * Average Dude
  * BGR2
  * BitTube
+ * Boo
  * Boo Teille
  * Branislav Pavelka
- * Casper Ruttten
  * Dashie
  * David Luís Pereira Pires
  * David Marzal
  * Doug Luce
+ * Emv
  * EndoGai
  * Fatih Özsoy
  * FediverseTV
@@ -304,6 +337,8 @@
  * Jan Hartig
  * Jan Marsalek
  * Jerguš Fonfer
+ * Jeroen de Wijn
+ * José Daniel Angulo Plata
  * Joël Galeran
  * Julien Lemaire
  * Julien Rabier
@@ -314,11 +349,12 @@
  * Mondo Xíbaro
  * Moritz Warning
  * Mostafa Ahangarha
- * Murat Özalp
  * Neko Nekowazarashi
  * Nicolai Larsen
  * Nojus
  * Olivier Bouillet
+ * Pedro hates github.com
+ * Pep
  * Pierre Jaury
  * Piotr Strębski
  * Puryx
@@ -328,19 +364,24 @@
  * SerCom_KC
  * Skid
  * Stakovicz
+ * Suthep
  * Takeshi Umeda
  * Thai Localization
  * The Cashew Trader
  * Thijs Kinkhorst
  * Timur Seber
  * Toso Malero
+ * Tsuki
+ * Túlio Simões Martins Padilha
  * Valvin
+ * XblateX
  * Yaron Shahrabani
  * YiDai
  * Yogesh K S
  * ahmadsharifian
  * bopol
  * brucekomike
+ * darek
  * dingycle
  * framail
  * imgradeone Yan
@@ -348,13 +389,13 @@
  * les
  * libertas
  * merty
+ * ou jian bo
  * plr20
  * q_h
  * qwerty
  * taziden
  * vancha march
  * victor héry
- * Àngel Pérez Beroy
  * 3risian
  * A.D.R.S
  * Acid Chicken (硫酸鶏)
@@ -368,6 +409,7 @@
  * Alberto Mardegan
  * Alejandro Criado-Pérez
  * Aleksandr Sokolov
+ * Alessandro Molina
  * Alexander F. Rødseth
  * Ali Alim
  * Alperen Abak
@@ -388,7 +430,7 @@
  * Ben Lubar
  * Benjamin EWFT
  * Benoît Piédallu
- * Boo
+ * Bojidar Marinov
  * Brad Johnson
  * Cadence Ember
  * Cale
@@ -397,15 +439,16 @@
  * Charlie Lambda
  * Christoph Geschwind
  * Chronos
- * Cirnos
  * Claude
  * Clifford Garwood II
  * Clément Brizard
+ * Cédric Bahirwe
  * DLP
  * Daniel Dutra
  * David Baumgold
  * David Dobryakov
  * DeeJayBro
+ * Denis Dupont
  * Deval
  * Dimitri DI GUSTO
  * Dimitrios Glentadakis
@@ -418,6 +461,7 @@
  * Erwan Croze
  * Esmail_Hazem
  * Ethan Corgatelli
+ * FB
  * Fabio Agreles Bezerra
  * FediThing
  * Fernandez, ReK2
@@ -433,6 +477,7 @@
  * Henri BAUDESSON
  * HesioZ
  * Hozan Şahin
+ * Hydrolien
  * ICabaleiro
  * Iker Garaialde
  * Ismaël Bouya
@@ -440,6 +485,7 @@
  * Iván Cabaleiro
  * J Webb
  * Jacen
+ * Jackson
  * Jackson Chen
  * Jacob
  * Jacques Foucry
@@ -453,6 +499,7 @@
  * Jeston Tan
  * Jinn Koriech
  * Jlll1
+ * Johan van Dongen
  * Johnny Jazeix
  * Jonas Sulzer
  * Jonatan Nyberg
@@ -465,24 +512,27 @@
  * Kent Anderson
  * Kevin Cope
  * Kevin Pliester
+ * Khyvodul
  * Knackie
  * Kody
  * Konstantinos Agiannis
  * Kyâne Pichou
  * Leo Mouyna
  * Lesterpig
- * Lety Does Stuff
  * Levi Bard
  * LiPeK
  * Lint
  * LoveIsGrief
  * Luca B
+ * Lucian I. Last
  * Lucien A
  * Lupinard
+ * Léane GRASSER
  * Léo Andrès
  * ManMade-cube42
  * Marcel Fuhrmann
  * Marco Zehe
+ * Marcus Schwarz
  * Marian Steinbach
  * Mario Pepe
  * Markus Richter
@@ -491,11 +541,14 @@
  * Mateusz Piotrowski
  * Mathieu Agopian
  * Mathieu Brunot
+ * Matthias Frey
  * Matthieu De Beule
  * Max Rosenfors
  * Michael Koppmann
  * Michael Williams
+ * Midgard
  * Miguel Mayol Tur
+ * Miguel P.L
  * Mike
  * Mikel Gartzia Santamaria
  * Milo van der Linden
@@ -510,10 +563,11 @@
  * Novel Martin Harianto
  * Nuño Sempere
  * Olivier Jolly
+ * Oliwier Jaszczyszyn
  * Pablo Joubert
  * Paul FLORENCE
  * Paul V
- * Pedro hates github.com
+ * Pavel 7 Tomsk
  * PhieF
  * Philip Durbin
  * Philipp Fischbeck
@@ -522,15 +576,18 @@
  * Quantic Axe
  * Quentin Dupont
  * Quentí
+ * RF9A5V
  * ROPEDE
  * Ramazan Geven
  * Ramiellll
+ * Rangel Prodanov
  * Raphael
  * Raphaël Droz
  * Ray
  * Rebecca
  * Rech
  * Rep Dolsay
+ * RiQuY
  * Robert Riemann
  * Roberto Resoli
  * Robin
@@ -542,6 +599,7 @@
  * Scott Starkey
  * Sebastian Paweł Wolski
  * Seth Falco
+ * Shalabh Agarwal
  * Showfom
  * Shun Sakai
  * Simon Gilliot
@@ -549,8 +607,10 @@
  * Stefan Schüller
  * Steffen
  * Steffen Möller
+ * Subh B
  * Sumit Khanna
  * SupC
+ * Sébastien NOBILI
  * TA
  * Tanguy BERNARD
  * Thavarasa Prasanth
@@ -562,7 +622,6 @@
  * Tomás Sebastián Romero
  * TrashMacNugget
  * Treacle
- * Tsuki
  * Unetelle Inconnue
  * Vagelis F
  * Varik Valefor
@@ -577,10 +636,12 @@
  * Yehuda Deutsch
  * Yorwba
  * Yun
+ * Zack Birkenbuel
  * Zekovski
  * Zig-03
  * [ Bie ] Watcharapong Suriyawan
  * adam iter
+ * allmiha2
  * anmol26s
  * april
  * ar9708
@@ -600,7 +661,6 @@
  * jomo
  * kukhariev
  * lambdacastix
- * legiorange
  * libertysoft3
  * lost_geographer
  * lsde
@@ -624,16 +684,19 @@
  * philippe lhardy
  * pitchum
  * potedeo
+ * q0ntinuum
  * rdxuan
  * retiolus
  * ruvilonix
  * sanchis
+ * skyone-wzw
  * slendermon
  * smilekison
  * sn0wygecko
  * soonsouth
  * thecashewtrader
  * tilllt
+ * tmpod
  * tomamplius
  * toobad
  * treac1e
@@ -646,6 +709,7 @@
  * Артур Кирпо
  * Дмитрий Кузнецов
  * ‮noisawe
+ * 姚霁恒
  * abdhessuk
  * abidin24
  * aditoo
@@ -782,6 +846,7 @@
  * `peertube-x` by Solen DP (CC-BY)
  * `flame` by Freepik (Flaticon License)
  * `local` by Larea (CC-BY)
+ * X (Twitter) icon: [Wikimedia Commons](https://fr.m.wikipedia.org/wiki/Fichier:X_logo_2023.svg)
 
 
 # Contributors to our 2020 crowdfunding :heart:

apps/peertube-cli/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## v1.0.3
+
+ * Fix `util.isArray` deprecation warning

apps/peertube-cli/README.md

@@ -10,8 +10,7 @@ See https://docs.joinpeertube.org/maintain/tools#remote-tools
 
 ```bash
 cd peertube-root
-yarn install --pure-lockfile
-cd apps/peertube-cli && yarn install --pure-lockfile
+npm run install-node-dependencies
 ```
 
 ## Develop

apps/peertube-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peertube/peertube-cli",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "main": "dist/peertube.js",
   "bin": "dist/peertube.js",

apps/peertube-cli/yarn.lock

@@ -1,236 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@colors/colors@1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
-  integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
-
-ansi-regex@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
-  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
-
-application-config-path@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/application-config-path/-/application-config-path-1.0.0.tgz#9c25b8c00ac9a342db27275abd3f38c67bbe5a05"
-  integrity sha512-6ZDlLTlfqrTybVzZJDpX2K2ZufqyMyiTbOG06GpxmkmczFgTN+YYRGcTcMCXv/F5P5SrZijVjzzpPUE9BvheLg==
-
-application-config@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/application-config/-/application-config-3.0.0.tgz#9adec84dd2d81e97dd78ea0dffcbf97381a1f55c"
-  integrity sha512-7ViR4soQJDx2O9iLf1vGxvekkPqvwqV/AZ2OL3DNcAQrg03UjJE1VeBk7oYNoN9AKB0eNyVrcM7kPD30NKeLLw==
-  dependencies:
-    application-config-path "^1.0.0"
-    load-json-file "^7.0.1"
-    write-json-file "^5.0.0"
-
-cli-table3@^0.6.0:
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.5.tgz#013b91351762739c16a9567c21a04632e449bf2f"
-  integrity sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==
-  dependencies:
-    string-width "^4.2.0"
-  optionalDependencies:
-    "@colors/colors" "1.5.0"
-
-cross-spawn@^6.0.0:
-  version "6.0.6"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.6.tgz#30d0efa0712ddb7eb5a76e1e8721bffafa6b5d57"
-  integrity sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-debug@^3.1.0:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
-  dependencies:
-    ms "^2.1.1"
-
-detect-indent@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-7.0.1.tgz#cbb060a12842b9c4d333f1cac4aa4da1bb66bc25"
-  integrity sha512-Mc7QhQ8s+cLrnUfU/Ji94vG/r8M26m8f++vyres4ZoojaRDpZ1eSIh/EpzLNwlWuvzSZ3UbDFspjFvTDXe6e/g==
-
-emoji-regex@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
-  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
-
-execa@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
-  integrity sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
-get-stream@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
-  integrity sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==
-
-imurmurhash@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
-  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
-
-is-fullwidth-code-point@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
-  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
-
-is-plain-obj@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
-  integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
-
-is-stream@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-  integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
-
-is-typedarray@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
-  integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
-
-isexe@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
-  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
-
-load-json-file@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-7.0.1.tgz#a3c9fde6beffb6bedb5acf104fad6bb1604e1b00"
-  integrity sha512-Gnxj3ev3mB5TkVBGad0JM6dmLiQL+o0t23JPBZ9sd+yvSLk05mFoqKBw5N8gbbkU4TNXyqCgIrl/VM17OgUIgQ==
-
-ms@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
-  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
-
-netrc-parser@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/netrc-parser/-/netrc-parser-3.1.6.tgz#7243c9ec850b8e805b9bdc7eae7b1450d4a96e72"
-  integrity sha512-lY+fmkqSwntAAjfP63jB4z5p5WbuZwyMCD3pInT7dpHU/Gc6Vv90SAC6A0aNiqaRGHiuZFBtiwu+pu8W/Eyotw==
-  dependencies:
-    debug "^3.1.0"
-    execa "^0.10.0"
-
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
-  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-
-npm-run-path@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
-  integrity sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==
-  dependencies:
-    path-key "^2.0.0"
-
-p-finally@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
-  integrity sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==
-
-path-key@^2.0.0, path-key@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
-  integrity sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==
-
-semver@^5.5.0:
-  version "5.7.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
-  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
-
-shebang-command@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
-  integrity sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==
-  dependencies:
-    shebang-regex "^1.0.0"
-
-shebang-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
-  integrity sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==
-
-signal-exit@^3.0.0, signal-exit@^3.0.2:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
-  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
-
-sort-keys@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-5.1.0.tgz#50a3f3d1ad3c5a76d043e0aeeba7299241e9aa5c"
-  integrity sha512-aSbHV0DaBcr7u0PVHXzM6NbZNAtrr9sF6+Qfs9UUVG7Ll3jQ6hHi8F/xqIIcn2rvIVbr0v/2zyjSdwSV47AgLQ==
-  dependencies:
-    is-plain-obj "^4.0.0"
-
-string-width@^4.2.0:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-eof@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
-  integrity sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==
-
-typedarray-to-buffer@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
-  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
-  dependencies:
-    is-typedarray "^1.0.0"
-
-which@^1.2.9:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-  dependencies:
-    isexe "^2.0.0"
-
-write-file-atomic@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
-  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
-  dependencies:
-    imurmurhash "^0.1.4"
-    is-typedarray "^1.0.0"
-    signal-exit "^3.0.2"
-    typedarray-to-buffer "^3.1.5"
-
-write-json-file@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/write-json-file/-/write-json-file-5.0.0.tgz#11c329a8ea9e8e23fb92a87cc27412a15f87708b"
-  integrity sha512-ddSsCLa4aQ3kI21BthINo4q905/wfhvQ3JL3774AcRjBaiQmfn5v4rw77jQ7T6CmAit9VOQO+FsLyPkwxoB1fw==
-  dependencies:
-    detect-indent "^7.0.0"
-    is-plain-obj "^4.0.0"
-    sort-keys "^5.0.0"
-    write-file-atomic "^3.0.3"

apps/peertube-runner/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v0.3.0
+
+ * Add generate storyboard support (PeerTube >= 8.0)
+
+## v0.2.0
+
+ * Add runner version in request and register payloads
+ * Update dependencies to fix vulnerabilities
+
 ## v0.1.3
 
  * Disable log coloring when TTY does not support it

apps/peertube-runner/README.md

@@ -10,8 +10,7 @@ Commands below has to be run at the root of PeerTube git repository.
 
 ```bash
 cd peertube-root
-yarn install --pure-lockfile
-cd apps/peertube-runner && yarn install --pure-lockfile
+npm run install-node-dependencies
 ```
 
 ### Develop

apps/peertube-runner/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@peertube/peertube-runner",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/peertube-runner.js",
   "bin": "dist/peertube-runner.js",
   "license": "AGPL-3.0",
-  "dependencies": {},
   "devDependencies": {
     "@iarna/toml": "^2.2.5",
-    "@peertube/net-ipc": "^2.2.0",
     "@types/follow-redirects": "1.14.4",
+    "cli-table3": "^0.6.5",
     "env-paths": "^3.0.0",
     "follow-redirects": "^1.15.5",
+    "net-ipc": "^2.2.2",
     "pino": "^9.6.0",
     "pino-pretty": "^13.0.0"
   }

apps/peertube-runner/src/server/process/process.ts

@@ -7,7 +7,13 @@ import {
   RunnerJobVODWebVideoTranscodingPayload
 } from '@peertube/peertube-models'
 import { logger } from '../../shared/index.js'
-import { processAudioMergeTranscoding, processHLSTranscoding, ProcessOptions, processWebVideoTranscoding } from './shared/index.js'
+import {
+  processAudioMergeTranscoding,
+  processGenerateStoryboard,
+  processHLSTranscoding,
+  ProcessOptions,
+  processWebVideoTranscoding
+} from './shared/index.js'
 import { ProcessLiveRTMPHLSTranscoding } from './shared/process-live.js'
 import { processStudioTranscoding } from './shared/process-studio.js'
 import { processVideoTranscription } from './shared/process-transcription.js'
@@ -15,7 +21,7 @@ import { processVideoTranscription } from './shared/process-transcription.js'
 export async function processJob (options: ProcessOptions) {
   const { server, job } = options
 
-  logger.info(`[${server.url}] Processing job of type ${job.type}: ${job.uuid}`, { payload: job.payload })
+  logger.info({ payload: job.payload }, `[${server.url}] Processing job of type ${job.type}: ${job.uuid}`)
 
   switch (job.type) {
     case 'vod-audio-merge-transcoding':
@@ -42,6 +48,10 @@ export async function processJob (options: ProcessOptions) {
       await processVideoTranscription(options as ProcessOptions<RunnerJobTranscriptionPayload>)
       break
 
+    case 'generate-video-storyboard':
+      await processGenerateStoryboard(options as any)
+      break
+
     default:
       logger.error(`Unknown job ${job.type} to process`)
       return

apps/peertube-runner/src/server/process/shared/common.ts

@@ -1,5 +1,12 @@
 import { pick } from '@peertube/peertube-core-utils'
-import { FFmpegEdition, FFmpegLive, FFmpegVOD, getDefaultAvailableEncoders, getDefaultEncodersToTry } from '@peertube/peertube-ffmpeg'
+import {
+  FFmpegEdition,
+  FFmpegImage,
+  FFmpegLive,
+  FFmpegVOD,
+  getDefaultAvailableEncoders,
+  getDefaultEncodersToTry
+} from '@peertube/peertube-ffmpeg'
 import { RunnerJob, RunnerJobPayload } from '@peertube/peertube-models'
 import { buildUUID } from '@peertube/peertube-node-utils'
 import { PeerTubeServer } from '@peertube/peertube-server-commands'
@@ -8,9 +15,9 @@ import { join } from 'path'
 import { ConfigManager, downloadFile, logger } from '../../../shared/index.js'
 import { getWinstonLogger } from './winston-logger.js'
 
-export type JobWithToken <T extends RunnerJobPayload = RunnerJobPayload> = RunnerJob<T> & { jobToken: string }
+export type JobWithToken<T extends RunnerJobPayload = RunnerJobPayload> = RunnerJob<T> & { jobToken: string }
 
-export type ProcessOptions <T extends RunnerJobPayload = RunnerJobPayload> = {
+export type ProcessOptions<T extends RunnerJobPayload = RunnerJobPayload> = {
   server: PeerTubeServer
   job: JobWithToken<T>
   runnerToken: string
@@ -108,6 +115,10 @@ export function buildFFmpegEdition () {
   return new FFmpegEdition(getCommonFFmpegOptions())
 }
 
+export function buildFFmpegImage () {
+  return new FFmpegImage(getCommonFFmpegOptions())
+}
+
 function getCommonFFmpegOptions () {
   const config = ConfigManager.Instance.getConfig()
 

apps/peertube-runner/src/server/process/shared/index.ts

@@ -1,3 +1,4 @@
 export * from './common.js'
 export * from './process-vod.js'
 export * from './winston-logger.js'
+export * from './process-storyboard.js'

apps/peertube-runner/src/server/process/shared/process-storyboard.ts

@@ -0,0 +1,60 @@
+import { RunnerJobGenerateStoryboardPayload, GenerateStoryboardSuccess } from '@peertube/peertube-models'
+import { buildUUID } from '@peertube/peertube-node-utils'
+import { remove } from 'fs-extra/esm'
+import { join } from 'path'
+import { ConfigManager } from '../../../shared/config-manager.js'
+import { logger } from '../../../shared/index.js'
+import { buildFFmpegImage, downloadInputFile, ProcessOptions, scheduleTranscodingProgress } from './common.js'
+
+export async function processGenerateStoryboard (options: ProcessOptions<RunnerJobGenerateStoryboardPayload>) {
+  const { server, job, runnerToken } = options
+
+  const payload = job.payload
+
+  let ffmpegProgress: number
+  let videoInputPath: string
+
+  const outputPath = join(ConfigManager.Instance.getStoryboardDirectory(), `storyboard-${buildUUID()}.jpg`)
+
+  const updateProgressInterval = scheduleTranscodingProgress({
+    job,
+    server,
+    runnerToken,
+    progressGetter: () => ffmpegProgress
+  })
+
+  try {
+    logger.info(`Downloading input file ${payload.input.videoFileUrl} for storyboard job ${job.jobToken}`)
+
+    videoInputPath = await downloadInputFile({ url: payload.input.videoFileUrl, runnerToken, job })
+
+    logger.info(`Downloaded input file ${payload.input.videoFileUrl} for job ${job.jobToken}. Generating storyboard.`)
+
+    const ffmpegImage = buildFFmpegImage()
+
+    await ffmpegImage.generateStoryboardFromVideo({
+      path: videoInputPath,
+      destination: outputPath,
+      inputFileMutexReleaser: () => {},
+      sprites: payload.sprites
+    })
+
+    const successBody: GenerateStoryboardSuccess = {
+      storyboardFile: outputPath
+    }
+
+    await server.runnerJobs.success({
+      jobToken: job.jobToken,
+      jobUUID: job.uuid,
+      runnerToken,
+      payload: successBody,
+      reqPayload: payload
+    })
+  } finally {
+    if (videoInputPath) await remove(videoInputPath)
+    if (outputPath) await remove(outputPath)
+    if (updateProgressInterval) clearInterval(updateProgressInterval)
+  }
+}
+
+

apps/peertube-runner/src/server/server.ts

@@ -1,10 +1,10 @@
+import { pick, shuffle, wait } from '@peertube/peertube-core-utils'
+import { PeerTubeProblemDocument, RunnerJobType, ServerErrorCode } from '@peertube/peertube-models'
+import { PeerTubeServer as PeerTubeServerCommand } from '@peertube/peertube-server-commands'
 import { ensureDir, remove } from 'fs-extra/esm'
 import { readdir } from 'fs/promises'
 import { join } from 'path'
 import { io, Socket } from 'socket.io-client'
-import { pick, shuffle, wait } from '@peertube/peertube-core-utils'
-import { PeerTubeProblemDocument, RunnerJobType, ServerErrorCode } from '@peertube/peertube-models'
-import { PeerTubeServer as PeerTubeServerCommand } from '@peertube/peertube-server-commands'
 import { ConfigManager } from '../shared/index.js'
 import { IPCServer } from '../shared/ipc/index.js'
 import { logger } from '../shared/logger.js'
@@ -57,7 +57,7 @@ export class RunnerServer {
     try {
       await ipcServer.run(this)
     } catch (err) {
-      logger.error('Cannot start local socket for IPC communication', err)
+      logger.error(err, 'Cannot start local socket for IPC communication')
       process.exit(-1)
     }
 
@@ -74,9 +74,11 @@ export class RunnerServer {
 
     // Process jobs
     await ensureDir(ConfigManager.Instance.getTranscodingDirectory())
+    await ensureDir(ConfigManager.Instance.getStoryboardDirectory())
     await this.cleanupTMP()
 
     logger.info(`Using ${ConfigManager.Instance.getTranscodingDirectory()} for transcoding directory`)
+    logger.info(`Using ${ConfigManager.Instance.getStoryboardDirectory()} for storyboard directory`)
 
     this.initialized = true
     await this.checkAvailableJobs()
@@ -95,7 +97,12 @@ export class RunnerServer {
     logger.info(`Registering runner ${runnerName} on ${url}...`)
 
     const serverCommand = new PeerTubeServerCommand({ url })
-    const { runnerToken } = await serverCommand.runners.register({ name: runnerName, description: runnerDescription, registrationToken })
+    const { runnerToken } = await serverCommand.runners.register({
+      name: runnerName,
+      description: runnerDescription,
+      registrationToken,
+      version: process.env.PACKAGE_VERSION
+    })
 
     const server: PeerTubeServer = Object.assign(serverCommand, {
       runnerToken,
@@ -268,7 +275,9 @@ export class RunnerServer {
 
       jobTypes: this.enabledJobsArray.length !== getSupportedJobsList().length
         ? this.enabledJobsArray
-        : undefined
+        : undefined,
+
+      version: process.env.PACKAGE_VERSION
     })
 
     // FIXME: remove in PeerTube v8: jobTypes has been introduced in PeerTube v7, so do the filter here too
@@ -358,6 +367,8 @@ export class RunnerServer {
 
     try {
       for (const { server, job } of this.processingJobs) {
+        logger.info(`Aborting job ${job.uuid} on ${server.url} as the runner is stopping`)
+
         await server.runnerJobs.abort({
           jobToken: job.jobToken,
           jobUUID: job.uuid,

apps/peertube-runner/src/server/shared/supported-job.ts

@@ -7,7 +7,8 @@ import {
   RunnerJobVODAudioMergeTranscodingPayload,
   RunnerJobVODHLSTranscodingPayload,
   RunnerJobVODWebVideoTranscodingPayload,
-  VideoStudioTaskPayload
+  VideoStudioTaskPayload,
+  RunnerJobGenerateStoryboardPayload
 } from '@peertube/peertube-models'
 
 const supportedMatrix: { [ id in RunnerJobType ]: (payload: RunnerJobPayload) => boolean } = {
@@ -33,7 +34,8 @@ const supportedMatrix: { [ id in RunnerJobType ]: (payload: RunnerJobPayload) =>
   },
   'video-transcription': (_payload: RunnerJobTranscriptionPayload) => {
     return true
-  }
+  },
+  'generate-video-storyboard': (_payload: RunnerJobGenerateStoryboardPayload) => true
 }
 
 export function isJobSupported (job: { type: RunnerJobType, payload: RunnerJobPayload }, enabledJobs?: Set<RunnerJobType>) {

apps/peertube-runner/src/shared/config-manager.ts

@@ -108,6 +108,10 @@ export class ConfigManager {
 
   // ---------------------------------------------------------------------------
 
+  getStoryboardDirectory () {
+    return join(paths.cache, this.id, 'storyboard')
+  }
+
   getTranscodingDirectory () {
     return join(paths.cache, this.id, 'transcoding')
   }
@@ -137,7 +141,7 @@ export class ConfigManager {
   // ---------------------------------------------------------------------------
 
   // Thanks: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
-  private deepFreeze <T extends object> (object: T) {
+  private deepFreeze<T extends object> (object: T) {
     const propNames = Reflect.ownKeys(object)
 
     // Freeze properties before freezing self

apps/peertube-runner/src/shared/ipc/ipc-client.ts

@@ -1,4 +1,4 @@
-import { Client as NetIPC } from '@peertube/net-ipc'
+import { Client as NetIPC } from 'net-ipc'
 import CliTable3 from 'cli-table3'
 import { ensureDir } from 'fs-extra/esm'
 import { ConfigManager } from '../config-manager.js'

apps/peertube-runner/src/shared/ipc/ipc-server.ts

@@ -1,5 +1,5 @@
 import { ensureDir } from 'fs-extra/esm'
-import { Server as NetIPC } from '@peertube/net-ipc'
+import { Server as NetIPC } from 'net-ipc'
 import { pick } from '@peertube/peertube-core-utils'
 import { RunnerServer } from '../../server/index.js'
 import { ConfigManager } from '../config-manager.js'
@@ -58,11 +58,11 @@ export class IPCServer {
     }
   }
 
-  private sendResponse <T extends IPCResponseData> (
+  private sendResponse<T extends IPCResponseData> (
     response: (data: any) => Promise<void>,
     body: IPCResponse<T>
   ) {
     response(body)
-      .catch(err => logger.error('Cannot send response after IPC request', err))
+      .catch(err => logger.error(err, 'Cannot send response after IPC request'))
   }
 }

apps/peertube-runner/yarn.lock

@@ -1,287 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@iarna/toml@^2.2.5":
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
-  integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
-
-"@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.3.tgz#9edec61b22c3082018a79f6d1c30289ddf3d9d11"
-  integrity sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw==
-
-"@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.3.tgz#33677a275204898ad8acbf62734fc4dc0b6a4855"
-  integrity sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw==
-
-"@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.3.tgz#19edf7cdc2e7063ee328403c1d895a86dd28f4bb"
-  integrity sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg==
-
-"@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.3.tgz#94fb0543ba2e28766c3fc439cabbe0440ae70159"
-  integrity sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw==
-
-"@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.3.tgz#4a0609ab5fe44d07c9c60a11e4484d3c38bbd6e3"
-  integrity sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg==
-
-"@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.3.tgz#0aa5502d547b57abfc4ac492de68e2006e417242"
-  integrity sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==
-
-"@peertube/net-ipc@^2.2.0":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@peertube/net-ipc/-/net-ipc-2.2.1.tgz#3d1c154a08b57cfea31ed760ec76fe2f69e35a19"
-  integrity sha512-RyKIGC3EeQ+xnSccf592qqsaXWrGp4wGfGl4W+wxDoZkwsThZJuiSbX8aCC1qZBHaDo3EuRH3ZrwsKpNjnyDAQ==
-  optionalDependencies:
-    fast-zlib "^2.0.1"
-    msgpackr "^1.3.2"
-
-"@types/follow-redirects@1.14.4":
-  version "1.14.4"
-  resolved "https://registry.yarnpkg.com/@types/follow-redirects/-/follow-redirects-1.14.4.tgz#ca054d72ef574c77949fc5fff278b430fcd508ec"
-  integrity sha512-GWXfsD0Jc1RWiFmMuMFCpXMzi9L7oPDVwxUnZdg89kDNnqsRfUKXEtUYtA98A6lig1WXH/CYY/fvPW9HuN5fTA==
-  dependencies:
-    "@types/node" "*"
-
-"@types/node@*":
-  version "22.14.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.14.1.tgz#53b54585cec81c21eee3697521e31312d6ca1e6f"
-  integrity sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==
-  dependencies:
-    undici-types "~6.21.0"
-
-atomic-sleep@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
-  integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
-
-colorette@^2.0.7:
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
-  integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
-
-dateformat@^4.6.3:
-  version "4.6.3"
-  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-4.6.3.tgz#556fa6497e5217fedb78821424f8a1c22fa3f4b5"
-  integrity sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==
-
-detect-libc@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
-  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
-
-end-of-stream@^1.1.0:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
-env-paths@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-3.0.0.tgz#2f1e89c2f6dbd3408e1b1711dd82d62e317f58da"
-  integrity sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==
-
-fast-copy@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/fast-copy/-/fast-copy-3.0.2.tgz#59c68f59ccbcac82050ba992e0d5c389097c9d35"
-  integrity sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ==
-
-fast-redact@^3.1.1:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.5.0.tgz#e9ea02f7e57d0cd8438180083e93077e496285e4"
-  integrity sha512-dwsoQlS7h9hMeYUq1W++23NDcBLV4KqONnITDV9DjfS3q1SgDGVrBdvvTLUotWtPSD7asWDV9/CmsZPy8Hf70A==
-
-fast-safe-stringify@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
-  integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
-
-fast-zlib@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fast-zlib/-/fast-zlib-2.0.1.tgz#be624f592fc80ad8019ee2025d16a367a4e9b024"
-  integrity sha512-DCoYgNagM2Bt1VIpXpdGnRx4LzqJeYG0oh6Nf/7cWo6elTXkFGMw9CrRCYYUIapYNrozYMoyDRflx9mgT3Awyw==
-
-follow-redirects@^1.15.5:
-  version "1.15.9"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
-  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
-
-help-me@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/help-me/-/help-me-5.0.0.tgz#b1ebe63b967b74060027c2ac61f9be12d354a6f6"
-  integrity sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==
-
-joycon@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
-  integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
-
-minimist@^1.2.6:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
-  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
-
-msgpackr-extract@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-3.0.3.tgz#e9d87023de39ce714872f9e9504e3c1996d61012"
-  integrity sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==
-  dependencies:
-    node-gyp-build-optional-packages "5.2.2"
-  optionalDependencies:
-    "@msgpackr-extract/msgpackr-extract-darwin-arm64" "3.0.3"
-    "@msgpackr-extract/msgpackr-extract-darwin-x64" "3.0.3"
-    "@msgpackr-extract/msgpackr-extract-linux-arm" "3.0.3"
-    "@msgpackr-extract/msgpackr-extract-linux-arm64" "3.0.3"
-    "@msgpackr-extract/msgpackr-extract-linux-x64" "3.0.3"
-    "@msgpackr-extract/msgpackr-extract-win32-x64" "3.0.3"
-
-msgpackr@^1.3.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.11.2.tgz#4463b7f7d68f2e24865c395664973562ad24473d"
-  integrity sha512-F9UngXRlPyWCDEASDpTf6c9uNhGPTqnTeLVt7bN+bU1eajoR/8V9ys2BRaV5C/e5ihE6sJ9uPIKaYt6bFuO32g==
-  optionalDependencies:
-    msgpackr-extract "^3.0.2"
-
-node-gyp-build-optional-packages@5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz#522f50c2d53134d7f3a76cd7255de4ab6c96a3a4"
-  integrity sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==
-  dependencies:
-    detect-libc "^2.0.1"
-
-on-exit-leak-free@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz#fed195c9ebddb7d9e4c3842f93f281ac8dadd3b8"
-  integrity sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==
-
-once@^1.3.1, once@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
-  dependencies:
-    wrappy "1"
-
-pino-abstract-transport@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pino-abstract-transport/-/pino-abstract-transport-2.0.0.tgz#de241578406ac7b8a33ce0d77ae6e8a0b3b68a60"
-  integrity sha512-F63x5tizV6WCh4R6RHyi2Ml+M70DNRXt/+HANowMflpgGFMAym/VKm6G7ZOQRjqN7XbGxK1Lg9t6ZrtzOaivMw==
-  dependencies:
-    split2 "^4.0.0"
-
-pino-pretty@^13.0.0:
-  version "13.0.0"
-  resolved "https://registry.yarnpkg.com/pino-pretty/-/pino-pretty-13.0.0.tgz#21d57fe940e34f2e279905d7dba2d7e2c4f9bf17"
-  integrity sha512-cQBBIVG3YajgoUjo1FdKVRX6t9XPxwB9lcNJVD5GCnNM4Y6T12YYx8c6zEejxQsU0wrg9TwmDulcE9LR7qcJqA==
-  dependencies:
-    colorette "^2.0.7"
-    dateformat "^4.6.3"
-    fast-copy "^3.0.2"
-    fast-safe-stringify "^2.1.1"
-    help-me "^5.0.0"
-    joycon "^3.1.1"
-    minimist "^1.2.6"
-    on-exit-leak-free "^2.1.0"
-    pino-abstract-transport "^2.0.0"
-    pump "^3.0.0"
-    secure-json-parse "^2.4.0"
-    sonic-boom "^4.0.1"
-    strip-json-comments "^3.1.1"
-
-pino-std-serializers@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/pino-std-serializers/-/pino-std-serializers-7.0.0.tgz#7c625038b13718dbbd84ab446bd673dc52259e3b"
-  integrity sha512-e906FRY0+tV27iq4juKzSYPbUj2do2X2JX4EzSca1631EB2QJQUqGbDuERal7LCtOpxl6x3+nvo9NPZcmjkiFA==
-
-pino@^9.6.0:
-  version "9.6.0"
-  resolved "https://registry.yarnpkg.com/pino/-/pino-9.6.0.tgz#6bc628159ba0cc81806d286718903b7fc6b13169"
-  integrity sha512-i85pKRCt4qMjZ1+L7sy2Ag4t1atFcdbEt76+7iRJn1g2BvsnRMGu9p8pivl9fs63M2kF/A0OacFZhTub+m/qMg==
-  dependencies:
-    atomic-sleep "^1.0.0"
-    fast-redact "^3.1.1"
-    on-exit-leak-free "^2.1.0"
-    pino-abstract-transport "^2.0.0"
-    pino-std-serializers "^7.0.0"
-    process-warning "^4.0.0"
-    quick-format-unescaped "^4.0.3"
-    real-require "^0.2.0"
-    safe-stable-stringify "^2.3.1"
-    sonic-boom "^4.0.1"
-    thread-stream "^3.0.0"
-
-process-warning@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/process-warning/-/process-warning-4.0.1.tgz#5c1db66007c67c756e4e09eb170cdece15da32fb"
-  integrity sha512-3c2LzQ3rY9d0hc1emcsHhfT9Jwz0cChib/QN89oME2R451w5fy3f0afAhERFZAwrbDU43wk12d0ORBpDVME50Q==
-
-pump@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.2.tgz#836f3edd6bc2ee599256c924ffe0d88573ddcbf8"
-  integrity sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-quick-format-unescaped@^4.0.3:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz#93ef6dd8d3453cbc7970dd614fad4c5954d6b5a7"
-  integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
-
-real-require@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/real-require/-/real-require-0.2.0.tgz#209632dea1810be2ae063a6ac084fee7e33fba78"
-  integrity sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==
-
-safe-stable-stringify@^2.3.1:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz#4ca2f8e385f2831c432a719b108a3bf7af42a1dd"
-  integrity sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==
-
-secure-json-parse@^2.4.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/secure-json-parse/-/secure-json-parse-2.7.0.tgz#5a5f9cd6ae47df23dba3151edd06855d47e09862"
-  integrity sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==
-
-sonic-boom@^4.0.1:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-4.2.0.tgz#e59a525f831210fa4ef1896428338641ac1c124d"
-  integrity sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww==
-  dependencies:
-    atomic-sleep "^1.0.0"
-
-split2@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/split2/-/split2-4.2.0.tgz#c9c5920904d148bab0b9f67145f245a86aadbfa4"
-  integrity sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==
-
-strip-json-comments@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
-  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
-
-thread-stream@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-3.1.0.tgz#4b2ef252a7c215064507d4ef70c05a5e2d34c4f1"
-  integrity sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==
-  dependencies:
-    real-require "^0.2.0"
-
-undici-types@~6.21.0:
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.21.0.tgz#691d00af3909be93a7faa13be61b3a5b50ef12cb"
-  integrity sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==

client/.github/instructions/angular.instructions.md

@@ -0,0 +1,104 @@
+---
+description: 'Angular-specific coding standards and best practices'
+applyTo: 'src/app/**/*.ts, src/app/**/*.html, src/app/**/*.scss, src/app/**/*.css'
+---
+
+# Angular Development Instructions
+
+Instructions for generating high-quality Angular applications with TypeScript, using Angular Signals for state management, adhering to Angular best practices as outlined at https://angular.dev.
+
+## Project Context
+- Latest Angular version (use standalone components by default)
+- TypeScript for type safety
+- Angular CLI for project setup and scaffolding
+- Follow Angular Style Guide (https://angular.dev/style-guide)
+- Use Angular Material or other modern UI libraries for consistent styling (if specified)
+
+## Development Standards
+
+### Architecture
+- Use standalone components unless modules are explicitly required
+- Organize code by feature modules or domains for scalability
+- Implement lazy loading for feature modules to optimize performance
+- Use Angular's built-in dependency injection system effectively
+- Structure components with a clear separation of concerns (smart vs. presentational components)
+
+### TypeScript
+- Enable strict mode in `tsconfig.json` for type safety
+- Define clear interfaces and types for components, services, and models
+- Use type guards and union types for robust type checking
+- Implement proper error handling with RxJS operators (e.g., `catchError`)
+- Use typed forms (e.g., `FormGroup`, `FormControl`) for reactive forms
+
+### Component Design
+- Follow Angular's component lifecycle hooks best practices
+- When using Angular >= 19, Use `input()` `output()`, `viewChild()`, `viewChildren()`, `contentChild()` and `viewChildren()` functions instead of decorators; otherwise use decorators
+- Leverage Angular's change detection strategy (default or `OnPush` for performance)
+- Keep templates clean and logic in component classes or services
+- Use Angular directives and pipes for reusable functionality
+
+### Styling
+- Use Angular's component-level CSS encapsulation (default: ViewEncapsulation.Emulated)
+- Prefer SCSS for styling with consistent theming
+- Implement responsive design using CSS Grid, Flexbox, or Angular CDK Layout utilities
+- Follow Angular Material's theming guidelines if used
+- Maintain accessibility (a11y) with ARIA attributes and semantic HTML
+
+### State Management
+- Use Angular Signals for reactive state management in components and services
+- Leverage `signal()`, `computed()`, and `effect()` for reactive state updates
+- Use writable signals for mutable state and computed signals for derived state
+- Handle loading and error states with signals and proper UI feedback
+- Use Angular's `AsyncPipe` to handle observables in templates when combining signals with RxJS
+
+### Data Fetching
+- Use Angular's `HttpClient` for API calls with proper typing
+- Implement RxJS operators for data transformation and error handling
+- Use Angular's `inject()` function for dependency injection in standalone components
+- Implement caching strategies (e.g., `shareReplay` for observables)
+- Store API response data in signals for reactive updates
+- Handle API errors with global interceptors for consistent error handling
+
+### Security
+- Sanitize user inputs using Angular's built-in sanitization
+- Implement route guards for authentication and authorization
+- Use Angular's `HttpInterceptor` for CSRF protection and API authentication headers
+- Validate form inputs with Angular's reactive forms and custom validators
+- Follow Angular's security best practices (e.g., avoid direct DOM manipulation)
+
+### Performance
+- Enable production builds with `ng build --prod` for optimization
+- Use lazy loading for routes to reduce initial bundle size
+- Optimize change detection with `OnPush` strategy and signals for fine-grained reactivity
+- Use trackBy in `ngFor` loops to improve rendering performance
+- Implement server-side rendering (SSR) or static site generation (SSG) with Angular Universal (if specified)
+
+### Testing
+- Write unit tests for components, services, and pipes using Jasmine and Karma
+- Use Angular's `TestBed` for component testing with mocked dependencies
+- Test signal-based state updates using Angular's testing utilities
+- Write end-to-end tests with Cypress or Playwright (if specified)
+- Mock HTTP requests using `HttpClientTestingModule`
+- Ensure high test coverage for critical functionality
+
+## Implementation Process
+1. Plan project structure and feature modules
+2. Define TypeScript interfaces and models
+3. Scaffold components, services, and pipes using Angular CLI
+4. Implement data services and API integrations with signal-based state
+5. Build reusable components with clear inputs and outputs
+6. Add reactive forms and validation
+7. Apply styling with SCSS and responsive design
+8. Implement lazy-loaded routes and guards
+9. Add error handling and loading states using signals
+10. Write unit and end-to-end tests
+11. Optimize performance and bundle size
+
+## Additional Guidelines
+- Follow Angular's naming conventions (e.g., `feature.component.ts`, `feature.service.ts`)
+- Use Angular CLI commands for generating boilerplate code
+- Document components and services with clear JSDoc comments
+- Ensure accessibility compliance (WCAG 2.1) where applicable
+- Use Angular's built-in i18n for internationalization (if specified)
+- Keep code DRY by creating reusable utilities and shared modules
+- Use signals consistently for state management to ensure reactive updates

client/.github/instructions/copilot-instructions.md

@@ -0,0 +1,112 @@
+# PeerTube Client Development Instructions for Coding Agents
+
+## Client Overview
+
+This is the Angular frontend for PeerTube, a decentralized video hosting platform. The client is built with Angular 20+, TypeScript, and SCSS. It communicates with the PeerTube server API and provides the web interface for users, administrators, and content creators.
+
+**Key Technologies:**
+- Angular 20+ with standalone components
+- TypeScript 5+
+- SCSS for styling
+- RxJS for reactive programming
+- PrimeNg and Bootstrap for UI components
+- WebdriverIO for E2E testing
+- Angular CLI
+
+## Client Build and Development Commands
+
+### Prerequisites (for client development)
+- Node.js 20+
+- yarn 1
+- Running PeerTube server (see ../server instructions)
+
+### Essential Client Commands
+
+```bash
+# From the client directory:
+cd /client
+
+# 1. Install dependencies (ALWAYS first)
+yarn install --pure-lockfile
+
+# 2. Development server with hot reload
+npm run dev
+
+# 3. Build for production
+npm run build
+```
+
+### Client Testing Commands
+```bash
+# From client directory:
+npm run lint                # ESLint for client code
+```
+
+### Common Client Issues and Solutions
+
+**Angular Build Failures:**
+- Always run `yarn install --pure-lockfile` after pulling changes
+- Clear `node_modules` and reinstall if dependency errors occur
+- Build may fail on memory issues: `NODE_OPTIONS="--max-old-space-size=4096" npm run build`
+- Check TypeScript errors carefully - Angular is strict about types
+
+**Development Server Issues:**
+- Default port is 3000, ensure it's not in use
+- Hot reload may fail on file permission issues
+- Clear browser cache if changes don't appear
+
+## Client Architecture and File Structure
+
+### Client Directory Structure
+```
+/src/
+  /app/
+    +admin/           # Admin interface components
+    +my-account/      # User account management pages
+    +my-library/      # User's videos, playlists, subscriptions
+    +search/          # Search functionality and results
+    +shared/          # Shared Angular components, services, pipes
+    +standalone/      # Standalone Angular components
+    +videos/          # Video-related components (watch, upload, etc.)
+    /core/            # Core services (auth, server, notifications)
+    /helpers/         # Utility functions and helpers
+    /menu/            # Navigation menu components
+  /assets/            # Static assets (images, icons, etc.)
+  /environments/      # Environment configurations
+  /locale/            # Internationalization files
+  /sass/              # Global SCSS styles
+```
+
+### Key Client Configuration Files
+
+- `angular.json` - Angular CLI workspace configuration
+- `tsconfig.json` - TypeScript configuration for client
+- `e2e/wdio*.conf.js` - WebdriverIO E2E test configurations
+- `src/environments/` - Environment-specific configurations
+
+### Shared Code with Server (`../shared/`)
+
+The client imports TypeScript models and utilities from the shared directory:
+- `../shared/models/` - Data models (Video, User, Channel, etc.). Import these in client code: `import { Video } from '@peertube/peertube-models'`
+- `../shared/core-utils/` - Utility functions shared between client/server. Import these in client code: `import { ... } from '@peertube/peertube-core-utils'`
+-
+
+## Client Development Workflow
+
+### Making Client Changes
+
+1. **Angular Components:** Create/modify in `/src/app/` following existing patterns
+2. **Shared Components:** Reusable components go in `/src/app/shared/`
+3. **Services:** Core services in `/src/app/core/`, feature services with components
+4. **Styles:** Component styles in `.scss` files, global styles in `/src/sass/`
+5. **Assets:** Images, icons in `/src/assets/`
+6. **Routing:** Routes defined in feature modules or `app-routing.module.ts`
+
+## Trust These Instructions
+
+These instructions are comprehensive and tested specifically for client development. Only search for additional information if:
+1. Commands fail despite following instructions exactly
+2. New error messages appear that aren't documented here
+3. You need specific Angular implementation details not covered above
+
+For server-side questions, refer to the server instructions in `../.github/copilot-instructions.md`.

client/angular.json

@@ -185,12 +185,11 @@
                 "."
               ],
               "sass": {
-                "silenceDeprecations": [ "import", "mixed-decls", "color-functions", "global-builtin" ]
+                "silenceDeprecations": [ "import", "color-functions", "global-builtin" ]
               }
             },
             "assets": [
-              "src/assets/images",
-              "src/manifest.webmanifest"
+              "src/assets/images"
             ],
             "styles": [
               "src/sass/application.scss"
@@ -214,7 +213,6 @@
               "escape-string-regexp",
               "is-plain-object",
               "parse-srcset",
-              "deepmerge",
               "core-js/features/reflect",
               "hammerjs",
               "jschannel"
@@ -246,7 +244,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb",
-                  "maximumError": "120kb"
+                  "maximumError": "140kb"
                 }
               ],
               "fileReplacements": [

client/e2e/src/po/admin-config.po.ts

@@ -2,25 +2,19 @@ import { NSFWPolicyType } from '@peertube/peertube-models'
 import { browserSleep, go, setCheckboxEnabled } from '../utils'
 
 export class AdminConfigPage {
-  async navigateTo (tab: 'instance-homepage' | 'basic-configuration' | 'instance-information' | 'live') {
-    const waitTitles = {
-      'instance-homepage': 'INSTANCE HOMEPAGE',
-      'basic-configuration': 'APPEARANCE',
-      'instance-information': 'INSTANCE',
-      'live': 'LIVE'
+  async navigateTo (page: 'information' | 'live' | 'general' | 'homepage') {
+    const url = '/admin/settings/config/' + page
+
+    const currentUrl = await browser.getUrl()
+    if (!currentUrl.endsWith(url)) {
+      await go(url)
     }
 
-    const url = '/admin/settings/config/edit-custom#' + tab
-
-    if (await browser.getUrl() !== url) {
-      await go('/admin/settings/config/edit-custom#' + tab)
-    }
-
-    await $('h2=' + waitTitles[tab]).waitForDisplayed()
+    await $('a.active[href="' + url + '"]').waitForDisplayed()
   }
 
   async updateNSFWSetting (newValue: NSFWPolicyType) {
-    await this.navigateTo('instance-information')
+    await this.navigateTo('information')
 
     const elem = $(`#instanceDefaultNSFWPolicy-${newValue} + label`)
 
@@ -32,25 +26,25 @@ export class AdminConfigPage {
   }
 
   async updateHomepage (newValue: string) {
-    await this.navigateTo('instance-homepage')
+    await this.navigateTo('homepage')
 
-    return $('#instanceCustomHomepageContent').setValue(newValue)
+    return $('#homepageContent').setValue(newValue)
   }
 
   async toggleSignup (enabled: boolean) {
-    await this.navigateTo('basic-configuration')
+    await this.navigateTo('general')
 
     return setCheckboxEnabled('signupEnabled', enabled)
   }
 
   async toggleSignupApproval (required: boolean) {
-    await this.navigateTo('basic-configuration')
+    await this.navigateTo('general')
 
     return setCheckboxEnabled('signupRequiresApproval', required)
   }
 
   async toggleSignupEmailVerification (required: boolean) {
-    await this.navigateTo('basic-configuration')
+    await this.navigateTo('general')
 
     return setCheckboxEnabled('signupRequiresEmailVerification', required)
   }
@@ -62,11 +56,18 @@ export class AdminConfigPage {
   }
 
   async save () {
-    const button = $('input[type=submit]')
+    const button = $('my-admin-save-bar .save-button')
 
+    try {
       await button.waitForClickable()
-    await button.click()
+    } catch {
+      // The config may have not been changed
+      return
+    } finally {
+      await browserSleep(1000) // Wait for the button to be clickable
+    }
 
-    await browserSleep(1000)
+    await button.click()
+    await button.waitForClickable({ reverse: true })
   }
 }

client/e2e/src/po/login.po.ts

@@ -66,7 +66,7 @@ export class LoginPage {
   }
 
   async logout () {
-    const loggedInDropdown = $('.logged-in-container .logged-in-info')
+    const loggedInDropdown = $('.logged-in-container .dropdown-toggle')
 
     await loggedInDropdown.waitForClickable()
     await loggedInDropdown.click()

client/e2e/src/po/my-account.po.ts

@@ -185,7 +185,7 @@ export class MyAccountPage {
     const playlist = () => {
       return $$('my-video-playlist-miniature')
         .filter(async e => {
-          const t = await e.$('.miniature-name').getText()
+          const t = await e.$('img').getAttribute('aria-label')
 
           return t.includes(name)
         })

client/e2e/src/po/player.po.ts

@@ -72,15 +72,15 @@ export class PlayerPage {
   }
 
   getNSFWContentText () {
-    return $('.video-js .nsfw-content').getText()
+    return $('.video-js .nsfw-info').getText()
   }
 
-  getNSFWMoreContent () {
-    return $('.video-js .nsfw-more-content')
+  getNSFWDetailsContent () {
+    return $('.video-js .nsfw-details-content')
   }
 
   getMoreNSFWInfoButton () {
-    return $('.video-js .nsfw-container button')
+    return $('.video-js .nsfw-info button')
   }
 
   async hasPoster () {

client/e2e/src/po/video-list.po.ts

@@ -86,7 +86,7 @@ export class VideoListPage {
   async expectVideoNSFWTooltip (name: string, summary?: string) {
     const miniature = await this.getVideoMiniature(name)
 
-    const warning = await miniature.$('.nsfw-warning')
+    const warning = miniature.$('.nsfw-warning')
     await warning.waitForDisplayed()
 
     expect(await warning.getAttribute('aria-label')).toEqual(summary)

client/e2e/src/po/video-manage.ts

@@ -76,7 +76,7 @@ export abstract class VideoManage {
     await input.waitForClickable()
     await input.click()
 
-    const nextMonth = $('.p-datepicker-next')
+    const nextMonth = $('.p-datepicker-next-button')
     await nextMonth.click()
 
     await $('.p-datepicker-calendar td[aria-label="1"] > span').click()
@@ -135,7 +135,13 @@ export abstract class VideoManage {
   }
 
   protected async goOnPage (page: 'Main information' | 'Moderation' | 'Live settings') {
-    const el = $('my-video-manage-container .menu').$('*=' + page)
+    const urls = {
+      'Main information': '',
+      'Moderation': 'moderation',
+      'Live settings': 'live'
+    }
+
+    const el = $(`my-video-manage-container .menu a[href*="/${urls[page]}"]`)
     await el.waitForClickable()
     await el.click()
   }

client/e2e/src/po/video-watch.po.ts

@@ -151,10 +151,7 @@ export class VideoWatchPage {
     await this.clickOnMoreDropdownIcon()
 
     // We need the await expression
-    // eslint-disable-next-line @typescript-eslint/await-thenable
-    const items = await $$('.dropdown-menu.show .dropdown-item')
-
-    for (const item of items) {
+    return $$('.dropdown-menu.show .dropdown-item').mapSeries(async item => {
       const content = await item.getText()
 
       if (content.includes('Manage')) {
@@ -162,11 +159,12 @@ export class VideoWatchPage {
         await $('#name').waitForClickable()
         return
       }
-    }
+    })
   }
 
   async clickOnMoreDropdownIcon () {
     const dropdown = $('my-video-actions-dropdown .action-button')
+    await dropdown.scrollIntoView({ block: 'center' })
     await dropdown.click()
 
     await $('.dropdown-menu.show .dropdown-item').waitForDisplayed()
@@ -176,8 +174,12 @@ export class VideoWatchPage {
   // Playlists
   // ---------------------------------------------------------------------------
 
-  clickOnSave () {
-    return $('.action-button-save').click()
+  async clickOnSave () {
+    const button = $('.action-button-save')
+
+    await button.scrollIntoView({ block: 'center' })
+
+    return button.click()
   }
 
   async createPlaylist (name: string) {

client/e2e/src/suites-all/live.e2e-spec.ts

@@ -1,6 +1,6 @@
 import { PlayerPage } from '../po/player.po'
 import { VideoWatchPage } from '../po/video-watch.po'
-import { FIXTURE_URLS, go, isMobileDevice, isSafari } from '../utils'
+import { FIXTURE_URLS, go, isMobileDevice, isSafari, prepareWebBrowser } from '../utils'
 
 describe('Live all workflow', () => {
   let videoWatchPage: VideoWatchPage
@@ -10,9 +10,7 @@ describe('Live all workflow', () => {
     videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
     playerPage = new PlayerPage()
 
-    if (!isMobileDevice()) {
-      await browser.maximizeWindow()
-    }
+    await prepareWebBrowser()
   })
 
   it('Should go to the live page', async () => {

client/e2e/src/suites-all/private-videos.e2e-spec.ts

@@ -1,7 +1,7 @@
 import { LoginPage } from '../po/login.po'
 import { PlayerPage } from '../po/player.po'
 import { VideoWatchPage } from '../po/video-watch.po'
-import { FIXTURE_URLS, go, isMobileDevice, isSafari } from '../utils'
+import { FIXTURE_URLS, go, isMobileDevice, isSafari, prepareWebBrowser } from '../utils'
 
 async function checkCorrectlyPlay (playerPage: PlayerPage) {
   await playerPage.playAndPauseVideo(false, 2)
@@ -22,9 +22,7 @@ describe('Private videos all workflow', () => {
     loginPage = new LoginPage(isMobileDevice())
     playerPage = new PlayerPage()
 
-    if (!isMobileDevice()) {
-      await browser.maximizeWindow()
-    }
+    await prepareWebBrowser()
   })
 
   it('Should log in', async () => {

client/e2e/src/suites-all/videos.e2e-spec.ts

@@ -5,7 +5,7 @@ import { VideoListPage } from '../po/video-list.po'
 import { VideoPublishPage } from '../po/video-publish.po'
 import { VideoUpdatePage } from '../po/video-update.po'
 import { VideoWatchPage } from '../po/video-watch.po'
-import { FIXTURE_URLS, go, isIOS, isMobileDevice, isSafari, waitServerUp } from '../utils'
+import { FIXTURE_URLS, go, isIOS, isMobileDevice, isSafari, prepareWebBrowser, waitServerUp } from '../utils'
 
 function isUploadUnsupported () {
   if (isMobileDevice() || isSafari()) {
@@ -53,9 +53,7 @@ describe('Videos all workflow', () => {
     playerPage = new PlayerPage()
     videoListPage = new VideoListPage(isMobileDevice(), isSafari())
 
-    if (!isMobileDevice()) {
-      await browser.maximizeWindow()
-    }
+    await prepareWebBrowser()
   })
 
   it('Should log in', async () => {

client/e2e/src/suites-local/custom-server-defaults.e2e-spec.ts

@@ -1,7 +1,7 @@
 import { LoginPage } from '../po/login.po'
 import { VideoPublishPage } from '../po/video-publish.po'
 import { VideoWatchPage } from '../po/video-watch.po'
-import { getScreenshotPath, go, isMobileDevice, isSafari, waitServerUp } from '../utils'
+import { getScreenshotPath, go, isMobileDevice, isSafari, prepareWebBrowser, waitServerUp } from '../utils'
 
 describe('Custom server defaults', () => {
   let videoPublishPage: VideoPublishPage
@@ -15,7 +15,7 @@ describe('Custom server defaults', () => {
     videoPublishPage = new VideoPublishPage()
     videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
 
-    await browser.maximizeWindow()
+    await prepareWebBrowser()
   })
 
   describe('Publish default values', function () {

client/e2e/src/suites-local/nsfw.e2e-spec.ts

@@ -9,7 +9,7 @@ import { VideoListPage } from '../po/video-list.po'
 import { VideoPublishPage } from '../po/video-publish.po'
 import { VideoSearchPage } from '../po/video-search.po'
 import { VideoWatchPage } from '../po/video-watch.po'
-import { getScreenshotPath, go, isMobileDevice, isSafari, waitServerUp } from '../utils'
+import { getScreenshotPath, go, isMobileDevice, isSafari, prepareWebBrowser, waitServerUp } from '../utils'
 
 describe('NSFW', () => {
   let videoListPage: VideoListPage
@@ -102,6 +102,8 @@ describe('NSFW', () => {
 
     for (const video of videos) {
       await videoSearchPage.search(video)
+
+      await browser.saveScreenshot(getScreenshotPath('before-test.png'))
       await checkVideo({ policy, videoName: video, nsfwTooltip })
     }
   }
@@ -153,7 +155,7 @@ describe('NSFW', () => {
     videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
     anonymousSettingsPage = new AnonymousSettingsPage()
 
-    await browser.maximizeWindow()
+    await prepareWebBrowser()
   })
 
   describe('Preparation', function () {
@@ -265,10 +267,10 @@ describe('NSFW', () => {
         expect(await moreButton.isDisplayed()).toBeTruthy()
 
         await moreButton.click()
-        await playerPage.getNSFWMoreContent().waitForDisplayed()
+        await playerPage.getNSFWDetailsContent().waitForDisplayed()
 
-        const moreContent = await playerPage.getNSFWMoreContent().getText()
-        expect(moreContent).toContain('Violence')
+        const moreContent = await playerPage.getNSFWDetailsContent().getText()
+        expect(moreContent).toContain('Potentially violent content')
         expect(moreContent).toContain('bibi is violent')
       }
 

client/e2e/src/suites-local/page-crash.e2e-spec.ts

@@ -0,0 +1,119 @@
+import { AdminConfigPage } from '../po/admin-config.po'
+import { LoginPage } from '../po/login.po'
+import { VideoPublishPage } from '../po/video-publish.po'
+import { VideoWatchPage } from '../po/video-watch.po'
+import { getScreenshotPath, go, isMobileDevice, isSafari, prepareWebBrowser, selectCustomSelect, waitServerUp } from '../utils'
+
+// These tests help to notice crash with invalid translated strings
+describe('Page crash', () => {
+  let videoPublishPage: VideoPublishPage
+  let loginPage: LoginPage
+  let videoWatchPage: VideoWatchPage
+  let adminConfigPage: AdminConfigPage
+
+  const languages = [
+    'العربية',
+    'Català',
+    'Čeština',
+    'Deutsch',
+    'ελληνικά',
+    'Esperanto',
+    'Español',
+    'Euskara',
+    'فارسی',
+    'Suomi',
+    'Français',
+    'Gàidhlig',
+    'Galego',
+    'Hrvatski',
+    'Magyar',
+    'Íslenska',
+    'Italiano',
+    '日本語',
+    'Taqbaylit',
+    'Norsk bokmål',
+    'Nederlands',
+    'Norsk nynorsk',
+    'Occitan',
+    'Polski',
+    'Português (Brasil)',
+    'Português (Portugal)',
+    'Pусский',
+    'Slovenčina',
+    'Shqip',
+    'Svenska',
+    'ไทย',
+    'Toki Pona',
+    'Türkçe',
+    'украї́нська мо́ва',
+    'Tiếng Việt',
+    '简体中文（中国）',
+    '繁體中文（台灣）'
+  ]
+
+  before(async () => {
+    await waitServerUp()
+
+    adminConfigPage = new AdminConfigPage()
+    loginPage = new LoginPage(isMobileDevice())
+    videoPublishPage = new VideoPublishPage()
+    videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
+
+    await prepareWebBrowser()
+
+    await loginPage.loginAsRootUser()
+  })
+
+  for (const language of languages) {
+    describe('For language: ' + language, () => {
+      it('Should change the language', async function () {
+        await go('/')
+
+        await $('.settings-button').waitForClickable()
+        await $('.settings-button').click()
+
+        await selectCustomSelect('language', language)
+
+        await $('my-user-interface-settings .primary-button').waitForClickable()
+        await $('my-user-interface-settings .primary-button').click()
+      })
+
+      it('Should upload and watch a video', async function () {
+        await videoPublishPage.navigateTo()
+        await videoPublishPage.uploadVideo('video3.mp4')
+        await videoPublishPage.validSecondStep('video')
+
+        await videoPublishPage.clickOnWatch()
+        await videoWatchPage.waitWatchVideoName('video')
+      })
+
+      it('Should set a homepage', async function () {
+        await adminConfigPage.updateHomepage('My custom homepage content')
+        await adminConfigPage.save()
+
+        // All tests
+        await go('/home')
+
+        await $('*=My custom homepage content').waitForDisplayed()
+      })
+
+      it('Should go on client pages and not crash', async function () {
+        await $('a[href="/videos/overview"]').waitForClickable()
+        await $('a[href="/videos/overview"]').click()
+
+        await $('my-video-overview').waitForExist()
+      })
+
+      it('Should go on videos from subscriptions pages', async function () {
+        await $('a[href="/videos/subscriptions"]').waitForClickable()
+        await $('a[href="/videos/subscriptions"]').click()
+
+        await $('my-videos-user-subscriptions').waitForExist()
+      })
+
+      after(async () => {
+        await browser.saveScreenshot(getScreenshotPath(`after-page-crash-test-${language}.png`))
+      })
+    })
+  }
+})

client/e2e/src/suites-local/player-settings.e2e-spec.ts

@@ -3,7 +3,7 @@ import { LoginPage } from '../po/login.po'
 import { MyAccountPage } from '../po/my-account.po'
 import { VideoPublishPage } from '../po/video-publish.po'
 import { VideoWatchPage } from '../po/video-watch.po'
-import { getScreenshotPath, go, isMobileDevice, isSafari, waitServerUp } from '../utils'
+import { getScreenshotPath, go, isMobileDevice, isSafari, prepareWebBrowser, waitServerUp } from '../utils'
 
 describe('Player settings', () => {
   let videoPublishPage: VideoPublishPage
@@ -21,7 +21,7 @@ describe('Player settings', () => {
     myAccountPage = new MyAccountPage()
     anonymousSettingsPage = new AnonymousSettingsPage()
 
-    await browser.maximizeWindow()
+    await prepareWebBrowser()
   })
 
   describe('P2P', function () {

client/e2e/src/suites-local/plugins.e2e-spec.ts

@@ -1,7 +1,7 @@
 import { AdminPluginPage } from '../po/admin-plugin.po'
 import { LoginPage } from '../po/login.po'
 import { VideoPublishPage } from '../po/video-publish.po'
-import { getCheckbox, getScreenshotPath, isMobileDevice, waitServerUp } from '../utils'
+import { getCheckbox, getScreenshotPath, isMobileDevice, prepareWebBrowser, waitServerUp } from '../utils'
 
 describe('Plugins', () => {
   let videoPublishPage: VideoPublishPage
@@ -28,7 +28,7 @@ describe('Plugins', () => {
     videoPublishPage = new VideoPublishPage()
     adminPluginPage = new AdminPluginPage()
 
-    await browser.maximizeWindow()
+    await prepareWebBrowser()
   })
 
   it('Should install hello world plugin', async () => {

client/e2e/src/suites-local/publish-live.e2e-spec.ts

@@ -2,7 +2,7 @@ import { AdminConfigPage } from '../po/admin-config.po'
 import { LoginPage } from '../po/login.po'
 import { VideoPublishPage } from '../po/video-publish.po'
 import { VideoWatchPage } from '../po/video-watch.po'
-import { getScreenshotPath, isMobileDevice, isSafari, waitServerUp } from '../utils'
+import { getScreenshotPath, isMobileDevice, isSafari, prepareWebBrowser, waitServerUp } from '../utils'
 
 describe('Publish live', function () {
   let videoPublishPage: VideoPublishPage
@@ -18,7 +18,7 @@ describe('Publish live', function () {
     adminConfigPage = new AdminConfigPage()
     videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
 
-    await browser.maximizeWindow()
+    await prepareWebBrowser()
 
     await loginPage.loginAsRootUser()
   })

client/e2e/src/suites-local/publish.e2e-spec.ts

@@ -1,7 +1,7 @@
 import { LoginPage } from '../po/login.po'
 import { VideoPublishPage } from '../po/video-publish.po'
 import { VideoWatchPage } from '../po/video-watch.po'
-import { getScreenshotPath, isMobileDevice, isSafari, waitServerUp } from '../utils'
+import { getScreenshotPath, isMobileDevice, isSafari, prepareWebBrowser, waitServerUp } from '../utils'
 
 describe('Publish video', () => {
   let videoPublishPage: VideoPublishPage
@@ -15,7 +15,7 @@ describe('Publish video', () => {
     videoPublishPage = new VideoPublishPage()
     videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
 
-    await browser.maximizeWindow()
+    await prepareWebBrowser()
 
     await loginPage.loginAsRootUser()
   })

client/e2e/src/suites-local/signup.e2e-spec.ts

@@ -11,6 +11,7 @@ import {
   go,
   isMobileDevice,
   MockSMTPServer,
+  prepareWebBrowser,
   waitServerUp
 } from '../utils'
 
@@ -76,6 +77,7 @@ describe('Signup', () => {
   }) {
     await loginPage.loginAsRootUser()
 
+    // Ensure we change the state of the form to "dirty" so we can save the form
     await adminConfigPage.toggleSignup(options.enabled)
 
     if (options.enabled) {
@@ -104,7 +106,7 @@ describe('Signup', () => {
     signupPage = new SignupPage()
     adminRegistrationPage = new AdminRegistrationPage()
 
-    await browser.maximizeWindow()
+    await prepareWebBrowser()
   })
 
   describe('Signup disabled', function () {

client/e2e/src/suites-local/user-settings.e2e-spec.ts

@@ -10,6 +10,7 @@ import {
   go,
   isMobileDevice,
   MockSMTPServer,
+  prepareWebBrowser,
   waitServerUp
 } from '../utils'
 
@@ -29,7 +30,7 @@ describe('User settings', () => {
 
     await MockSMTPServer.Instance.collectEmails(await getEmailPort(), emails)
 
-    await browser.maximizeWindow()
+    await prepareWebBrowser()
   })
 
   describe('Email', function () {

client/e2e/src/suites-local/video-password.e2e-spec.ts

@@ -4,7 +4,7 @@ import { PlayerPage } from '../po/player.po'
 import { SignupPage } from '../po/signup.po'
 import { VideoPublishPage } from '../po/video-publish.po'
 import { VideoWatchPage } from '../po/video-watch.po'
-import { getScreenshotPath, go, isMobileDevice, isSafari, waitServerUp } from '../utils'
+import { getScreenshotPath, go, isMobileDevice, isSafari, prepareWebBrowser, waitServerUp } from '../utils'
 
 describe('Password protected videos', () => {
   let videoPublishPage: VideoPublishPage
@@ -50,7 +50,7 @@ describe('Password protected videos', () => {
     playerPage = new PlayerPage()
     myAccountPage = new MyAccountPage()
 
-    await browser.maximizeWindow()
+    await prepareWebBrowser()
   })
 
   describe('Owner', function () {

client/e2e/src/utils/common.ts

@@ -1,29 +1,31 @@
-async function browserSleep (amount: number) {
+export async function browserSleep (amount: number) {
   await browser.pause(amount)
 }
 
-function isMobileDevice () {
+// ---------------------------------------------------------------------------
+
+export function isMobileDevice () {
   const platformName = (browser.capabilities['platformName'] || '').toLowerCase()
 
   return platformName === 'android' || platformName === 'ios'
 }
 
-function isAndroid () {
+export function isAndroid () {
   const platformName = (browser.capabilities['platformName'] || '').toLowerCase()
 
   return platformName === 'android'
 }
 
-function isSafari () {
+export function isSafari () {
   return browser.capabilities['browserName'] &&
     browser.capabilities['browserName'].toLowerCase() === 'safari'
 }
 
-function isIOS () {
+export function isIOS () {
   return isMobileDevice() && isSafari()
 }
 
-async function go (url: string) {
+export async function go (url: string) {
   await browser.url(url)
 
   await browser.execute(() => {
@@ -33,7 +35,20 @@ async function go (url: string) {
   })
 }
 
-async function waitServerUp () {
+// ---------------------------------------------------------------------------
+
+export async function prepareWebBrowser () {
+  if (isMobileDevice()) return
+
+  // Window size on chromium doesn't seem to work in "new" headless mode
+  if (process.env.MOZ_HEADLESS_WIDTH) {
+    await browser.setWindowSize(+process.env.MOZ_HEADLESS_WIDTH, +process.env.MOZ_HEADLESS_HEIGHT)
+  }
+
+  await browser.maximizeWindow()
+}
+
+export async function waitServerUp () {
   await browser.waitUntil(async () => {
     await go('/')
     await browserSleep(500)
@@ -41,13 +56,3 @@ async function waitServerUp () {
     return $('<my-app>').isDisplayed()
   }, { timeout: 20 * 1000 })
 }
-
-export {
-  isMobileDevice,
-  isSafari,
-  isIOS,
-  isAndroid,
-  waitServerUp,
-  go,
-  browserSleep
-}

client/e2e/src/utils/elements.ts

@@ -38,6 +38,8 @@ export async function clickOnRadio (name: string) {
 export async function selectCustomSelect (id: string, valueLabel: string) {
   const wrapper = $(`[formcontrolname=${id}] span[role=combobox]`)
 
+  await wrapper.waitForExist()
+  await wrapper.scrollIntoView({ block: 'center' })
   await wrapper.waitForClickable()
   await wrapper.click()
 
@@ -65,9 +67,9 @@ export async function selectCustomSelect (id: string, valueLabel: string) {
 
 export async function findParentElement (
   el: ChainablePromiseElement,
-  finder: (el: WebdriverIO.Element) => Promise<boolean>
+  finder: (el: ChainablePromiseElement) => Promise<boolean>
 ) {
   if (await finder(el) === true) return el
 
-  return findParentElement(await el.parentElement(), finder)
+  return findParentElement(el.parentElement(), finder)
 }

client/e2e/tsconfig.json

@@ -7,6 +7,7 @@
     "module": "commonjs",
     "target": "ES2018",
     "typeRoots": [
+      "../node_modules/@wdio",
       "../node_modules/@types",
       "../node_modules"
     ],

client/e2e/wdio.browserstack.conf.ts

@@ -95,18 +95,18 @@ module.exports = {
       {
         browserName: 'Chrome',
 
-        ...buildBStackMobileOptions({ sessionName: 'Latest Chrome Android', deviceName: 'Samsung Galaxy S8', osVersion: '7.0' })
+        ...buildBStackMobileOptions({ sessionName: 'Latest Chrome Android', deviceName: 'Samsung Galaxy S10', osVersion: '9.0' })
       },
       {
         browserName: 'Safari',
 
-        ...buildBStackMobileOptions({ sessionName: 'Safari iPhone', deviceName: 'iPhone 11', osVersion: '14' })
+        ...buildBStackMobileOptions({ sessionName: 'Safari iPhone', deviceName: 'iPhone 12', osVersion: '14' })
       },
 
       {
         browserName: 'Safari',
 
-        ...buildBStackMobileOptions({ sessionName: 'Safari iPad', deviceName: 'iPad Pro 11 2020', osVersion: '14' })
+        ...buildBStackMobileOptions({ sessionName: 'Safari iPad', deviceName: 'iPad Pro 12.9 2021', osVersion: '14' })
       }
     ],
 
@@ -121,7 +121,8 @@ module.exports = {
 
     services: [
       [
-        'browserstack', { browserstackLocal: true }
+        'browserstack',
+        { browserstackLocal: true }
       ]
     ],
 
@@ -174,6 +175,5 @@ module.exports = {
 
     onPrepare: onBrowserStackPrepare,
     onComplete: onBrowserStackComplete
-
   } as WebdriverIO.Config
 }

client/e2e/wdio.local-test.conf.ts

@@ -28,7 +28,7 @@ module.exports = {
         'browserName': 'chrome',
         'acceptInsecureCerts': true,
         'goog:chromeOptions': {
-          args: [ '--disable-gpu', windowSizeArg ],
+          args: [ '--headless', '--disable-gpu', windowSizeArg ],
           prefs
         }
       }

client/eslint.config.mjs

@@ -150,6 +150,7 @@ export default defineConfig([
       'no-return-assign': 'off',
       '@typescript-eslint/unbound-method': 'off',
       'import/no-named-default': 'off',
+      '@typescript-eslint/prefer-reduce-type-parameter': 'off',
 
       "@typescript-eslint/no-deprecated": [ 'error', {
         allow: [

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "peertube-client",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "private": true,
   "license": "AGPL-3.0",
   "author": {
@@ -53,9 +53,11 @@
     "@ngx-loading-bar/http-client": "^7.0.0",
     "@ngx-loading-bar/router": "^7.0.0",
     "@peertube/maildev": "^1.2.0",
+    "@peertube/player": "workspace:*",
     "@peertube/xliffmerge": "^2.0.3",
     "@plussub/srt-vtt-parser": "^2.0.5",
     "@popperjs/core": "^2.11.5",
+    "@primeng/themes": "^19.1.2",
     "@types/core-js": "^2.5.2",
     "@types/debug": "^4.1.5",
     "@types/jschannel": "^1.0.0",
@@ -66,9 +68,9 @@
     "@types/qrcode": "^1.5.5",
     "@types/sanitize-html": "2.11.0",
     "@types/sha.js": "^2.4.0",
-    "@types/video.js": "^7.3.40",
     "@wdio/browserstack-service": "^9.12.7",
     "@wdio/cli": "^9.12.7",
+    "@wdio/globals": "^9.17.0",
     "@wdio/local-runner": "^9.12.7",
     "@wdio/mocha-framework": "^9.12.6",
     "@wdio/shared-store-service": "^9.12.7",
@@ -83,7 +85,7 @@
     "debug": "^4.3.1",
     "dompurify": "^3.1.6",
     "expect-webdriverio": "^5.1.0",
-    "hls.js": "~1.5.11",
+    "hls.js": "~1.6.7",
     "intl-messageformat": "^10.1.0",
     "jschannel": "^1.0.2",
     "linkify-html": "^4.0.2",
@@ -94,7 +96,7 @@
     "ngx-uploadx": "^7.0.0",
     "p2p-media-loader-core": "^2.2.1",
     "p2p-media-loader-hlsjs": "^2.2.1",
-    "primeng": "^17",
+    "primeng": "^19.1.2",
     "rxjs": "^7.3.0",
     "sass-embedded": "^1.83.4",
     "sha.js": "^2.4.11",
@@ -108,10 +110,10 @@
     "type-fest": "^4.37.0",
     "typescript": "~5.7.3",
     "ua-parser-js": "^2.0.3",
-    "video.js": "^7.19.2",
+    "video.js": "^8.23.4",
     "vite": "^6.0.11",
     "vite-plugin-checker": "^0.9.3",
-    "vite-plugin-node-polyfills": "^0.23.0",
+    "vite-plugin-node-polyfills": "^0.24.0",
     "zone.js": "~0.15.0"
   },
   "dependencies": {

client/src/app/+about/about-contact/about-contact.component.html

@@ -15,8 +15,6 @@
           <div *ngIf="formErrors.fromName" class="form-error" role="alert">{{ formErrors.fromName }}</div>
         </div>
 
-        <button>toto</button>
-
         <div class="form-group">
           <label i18n for="fromEmail">Your email</label>
           <input

client/src/app/+about/about-follows/about-follows.component.html

@@ -19,7 +19,7 @@
       <div *ngFor="let subscription of subscriptions" class="follow-block">
         <my-actor-avatar [actor]="subscription" actorType="instance" size="32"></my-actor-avatar>
 
-        <div>
+        <div class="ellipsis">
           <a class="follow-name" [href]="subscription.url" target="_blank" rel="noopener noreferrer">{{ subscription.name }}</a>
         </div>
       </div>
@@ -68,7 +68,7 @@
       <div *ngFor="let follower of followers" class="follow-block">
         <my-actor-avatar [actor]="follower" actorType="instance" size="32"></my-actor-avatar>
 
-        <div>
+        <div class="ellipsis">
           <a class="follow-name" [href]="follower.url" target="_blank" rel="noopener noreferrer">{{ follower.name }}</a>
         </div>
       </div>

client/src/app/+about/about-instance/children/about-instance-home.component.html

@@ -14,16 +14,20 @@
   <div i18n *ngIf="config.instance.isNSFW" class="fw-bold text-content mt-3">{{ config.instance.name }} is dedicated to sensitive content.</div>
 </div>
 
+@if (descriptionElement) {
 <div class="block description">
   <h4 i18n>Description</h4>
 
   <my-custom-markup-container class="text-content" [content]="descriptionElement"></my-custom-markup-container>
 </div>
+}
 
-<div class="block terms">
+@if (aboutHTML.terms) {
+  <div class="block terms">
     <h4 i18n class="section-title">Terms</h4>
 
     <div class="text-content" [innerHTML]="aboutHTML.terms"></div>
-</div>
+  </div>
+}
 
 <my-support-modal #supportModal [name]="config.instance.name" [content]="config.instance.support.text"></my-support-modal>

client/src/app/+about/about.component.html

@@ -31,6 +31,14 @@
               <my-global-icon iconName="mastodon"></my-global-icon>
             </a>
 
+            <a
+              *ngIf="config.instance.social.xLink"
+              class="media peertube-button-link rounded-icon-button mb-3" i18n-title title="Go to the X profile"
+              target="_blank" rel="noopener noreferrer" [href]="config.instance.social.xLink"
+            >
+              <my-global-icon iconName="x-twitter"></my-global-icon>
+            </a>
+
             <a
             *ngIf="config.instance.social.blueskyLink"
             class="media peertube-button-link rounded-icon-button mb-3" i18n-title title="Go to the Bluesky profile"

client/src/app/+about/about.component.ts

@@ -40,7 +40,7 @@ export class AboutComponent implements OnInit {
     this.menuEntries = [
       {
         label: $localize`Platform`,
-        routerLink: '/about/instance/home',
+        routerLink: '/about/instance',
         pluginSelectorId: 'about-menu-instance'
       },
       {

client/src/app/+accounts/account-videos/account-videos.component.ts

@@ -51,15 +51,14 @@ export class AccountVideosComponent implements OnInit, OnDestroy, DisableForReus
   }
 
   getVideosObservable (pagination: ComponentPaginationLight, filters: VideoFilters) {
-    const options = {
+    return this.videoService.listAccountVideos({
       ...filters.toVideosAPIObject(),
 
       videoPagination: pagination,
       account: this.account,
-      skipCount: true
-    }
-
-    return this.videoService.listAccountVideos(options)
+      skipCount: true,
+      includeScheduledLive: true
+    })
   }
 
   getSyndicationItems () {

client/src/app/+admin/config/admin-config.component.html

@@ -0,0 +1,9 @@
+<div class="root">
+  <div>
+    <my-lateral-menu [config]="menuConfig"></my-lateral-menu>
+  </div>
+
+  <div class="flex-grow-1">
+    <router-outlet></router-outlet>
+  </div>
+</div>

client/src/app/+admin/config/admin-config.component.scss

@@ -0,0 +1,13 @@
+@use "_variables" as *;
+@use "_mixins" as *;
+@use "_form-mixins" as *;
+
+.root {
+  display: flex;
+}
+
+@media screen and (max-width: $medium-view) {
+  .root {
+    margin-bottom: 150px;
+  }
+}

client/src/app/+admin/config/admin-config.component.ts

@@ -0,0 +1,72 @@
+import { CommonModule } from '@angular/common'
+import { Component, OnInit } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { LateralMenuComponent, LateralMenuConfig } from '../../shared/shared-main/menu/lateral-menu.component'
+
+@Component({
+  selector: 'my-admin-config',
+  styleUrls: [ './admin-config.component.scss' ],
+  templateUrl: './admin-config.component.html',
+  imports: [
+    CommonModule,
+    RouterModule,
+    LateralMenuComponent
+  ]
+})
+export class AdminConfigComponent implements OnInit {
+  menuConfig: LateralMenuConfig
+
+  ngOnInit (): void {
+    this.menuConfig = {
+      title: $localize`Configuration`,
+      entries: [
+        {
+          type: 'link',
+          label: $localize`Information`,
+          routerLink: 'information'
+        },
+        {
+          type: 'link',
+          label: $localize`Logo`,
+          routerLink: 'logo'
+        },
+        {
+          type: 'link',
+          label: $localize`General`,
+          routerLink: 'general'
+        },
+        {
+          type: 'link',
+          label: $localize`Homepage`,
+          routerLink: 'homepage'
+        },
+        {
+          type: 'link',
+          label: $localize`Customization`,
+          routerLink: 'customization'
+        },
+
+        { type: 'separator' },
+
+        {
+          type: 'link',
+          label: $localize`VOD`,
+          routerLink: 'vod'
+        },
+        {
+          type: 'link',
+          label: $localize`Live`,
+          routerLink: 'live'
+        },
+
+        { type: 'separator' },
+
+        {
+          type: 'link',
+          label: $localize`Advanced`,
+          routerLink: 'advanced'
+        }
+      ]
+    }
+  }
+}

client/src/app/+admin/config/config.routes.ts

@@ -1,7 +1,64 @@
-import { Routes } from '@angular/router'
-import { EditCustomConfigComponent } from '@app/+admin/config/edit-custom-config'
-import { UserRightGuard } from '@app/core'
-import { UserRight } from '@peertube/peertube-models'
+import { inject } from '@angular/core'
+import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot, Routes } from '@angular/router'
+import { CanDeactivateGuard, ServerService, UserRightGuard } from '@app/core'
+import { CustomPageService } from '@app/shared/shared-main/custom-page/custom-page.service'
+import { CustomConfig, UserRight, VideoCommentPolicyType, VideoConstant, VideoPrivacyType } from '@peertube/peertube-models'
+import { map } from 'rxjs'
+import { AdminConfigComponent } from './admin-config.component'
+import {
+  AdminConfigAdvancedComponent,
+  AdminConfigGeneralComponent,
+  AdminConfigHomepageComponent,
+  AdminConfigInformationComponent,
+  AdminConfigLiveComponent,
+  AdminConfigVODComponent
+} from './pages'
+import { AdminConfigCustomizationComponent } from './pages/admin-config-customization.component'
+import { AdminConfigService } from '../../shared/shared-admin/admin-config.service'
+import { AdminConfigLogoComponent } from './pages/admin-config-logo.component'
+import { InstanceLogoService } from '../../shared/shared-instance/instance-logo.service'
+
+export const customConfigResolver: ResolveFn<CustomConfig> = (_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {
+  return inject(AdminConfigService).getCustomConfig()
+}
+
+export const homepageResolver: ResolveFn<string> = (_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {
+  return inject(CustomPageService).getInstanceHomepage()
+    .pipe(map(({ content }) => content))
+}
+
+export const categoriesResolver: ResolveFn<VideoConstant<number>[]> = (_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {
+  return inject(ServerService).getVideoCategories()
+}
+
+export const languagesResolver: ResolveFn<VideoConstant<string>[]> = (_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {
+  return inject(ServerService).getVideoLanguages()
+}
+
+export const licencesResolver: ResolveFn<VideoConstant<number>[]> = (_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {
+  return inject(ServerService).getVideoLicences()
+}
+
+export const privaciesResolver: ResolveFn<VideoConstant<VideoPrivacyType>[]> = (
+  _route: ActivatedRouteSnapshot,
+  _state: RouterStateSnapshot
+) => {
+  return inject(ServerService).getVideoPrivacies()
+}
+
+export const commentPoliciesResolver: ResolveFn<VideoConstant<VideoCommentPolicyType>[]> = (
+  _route: ActivatedRouteSnapshot,
+  _state: RouterStateSnapshot
+) => {
+  return inject(ServerService).getCommentPolicies()
+}
+
+export const logosResolver: ResolveFn<ReturnType<InstanceLogoService['getAllLogos']>> = (
+  _route: ActivatedRouteSnapshot,
+  _state: RouterStateSnapshot
+) => {
+  return inject(InstanceLogoService).getAllLogos()
+}
 
 export const configRoutes: Routes = [
   {
@@ -10,18 +67,117 @@ export const configRoutes: Routes = [
     data: {
       userRight: UserRight.MANAGE_CONFIGURATION
     },
+    resolve: {
+      customConfig: customConfigResolver
+    },
+    providers: [
+      InstanceLogoService
+    ],
+    component: AdminConfigComponent,
     children: [
       {
-        path: '',
-        redirectTo: 'edit-custom',
+        // Old path with PeerTube < 7.3
+        path: 'edit-custom',
+        redirectTo: 'information',
         pathMatch: 'full'
       },
       {
-        path: 'edit-custom',
-        component: EditCustomConfigComponent,
+        path: '',
+        redirectTo: 'information',
+        pathMatch: 'full'
+      },
+      {
+        path: 'homepage',
+        component: AdminConfigHomepageComponent,
+        canDeactivate: [ CanDeactivateGuard ],
+        resolve: {
+          homepageContent: homepageResolver
+        },
         data: {
           meta: {
-            title: $localize`Edit custom configuration`
+            title: $localize`Edit your platform homepage`
+          }
+        }
+      },
+      {
+        path: 'customization',
+        component: AdminConfigCustomizationComponent,
+        canDeactivate: [ CanDeactivateGuard ],
+        data: {
+          meta: {
+            title: $localize`Platform customization`
+          }
+        }
+      },
+      {
+        path: 'information',
+        component: AdminConfigInformationComponent,
+        canDeactivate: [ CanDeactivateGuard ],
+        resolve: {
+          categories: categoriesResolver,
+          languages: languagesResolver
+        },
+        data: {
+          meta: {
+            title: $localize`Platform information`
+          }
+        }
+      },
+      {
+        path: 'logo',
+        component: AdminConfigLogoComponent,
+        canDeactivate: [ CanDeactivateGuard ],
+        resolve: {
+          logos: logosResolver
+        },
+        data: {
+          meta: {
+            title: $localize`Platform logos`
+          }
+        }
+      },
+      {
+        path: 'general',
+        component: AdminConfigGeneralComponent,
+        canDeactivate: [ CanDeactivateGuard ],
+        resolve: {
+          privacies: privaciesResolver,
+          licences: licencesResolver,
+          commentPolicies: commentPoliciesResolver
+        },
+        data: {
+          meta: {
+            title: $localize`General configuration`
+          }
+        }
+      },
+      {
+        path: 'vod',
+        component: AdminConfigVODComponent,
+        canDeactivate: [ CanDeactivateGuard ],
+        data: {
+          meta: {
+            title: $localize`VOD configuration`
+          }
+        }
+      },
+      {
+        path: 'live',
+        component: AdminConfigLiveComponent,
+        canDeactivate: [ CanDeactivateGuard ],
+        data: {
+          meta: {
+            title: $localize`Live configuration`
+          }
+        }
+      },
+      {
+        path: 'advanced',
+        component: AdminConfigAdvancedComponent,
+        canDeactivate: [ CanDeactivateGuard ],
+        data: {
+          meta: {
+            title: $localize`Advanced configuration`
           }
         }
       }

client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html

@@ -1,135 +0,0 @@
-<ng-container [formGroup]="form()">
-
-  <div class="pt-two-cols mt-5"> <!-- cache grid -->
-
-    <div class="title-col">
-      <h2 i18n>CACHE</h2>
-      <div i18n class="inner-form-description">
-        Some files are not federated, and fetched when necessary. Define their caching policies.
-      </div>
-    </div>
-
-    <div class="content-col">
-      <ng-container formGroupName="cache">
-        <div class="form-group" formGroupName="previews">
-          <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
-
-          <div class="number-with-unit">
-            <input
-              type="number" min="0" id="cachePreviewsSize" class="form-control"
-              formControlName="size" [ngClass]="{ 'input-error': formErrors()['cache.previews.size'] }"
-            >
-            <span i18n>{getCacheSize('previews'), plural, =1 {cached image} other {cached images}}</span>
-          </div>
-
-          <div *ngIf="formErrors().cache.previews.size" class="form-error" role="alert">{{ formErrors().cache.previews.size }}</div>
-        </div>
-
-        <div class="form-group" formGroupName="captions">
-          <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
-
-          <div class="number-with-unit">
-            <input
-              type="number" min="0" id="cacheCaptionsSize" class="form-control"
-              formControlName="size" [ngClass]="{ 'input-error': formErrors()['cache.captions.size'] }"
-            >
-            <span i18n>{getCacheSize('captions'), plural, =1 {cached caption} other {cached captions}}</span>
-          </div>
-
-          <div *ngIf="formErrors().cache.captions.size" class="form-error" role="alert">{{ formErrors().cache.captions.size }}</div>
-        </div>
-
-        <div class="form-group" formGroupName="torrents">
-          <label i18n for="cacheTorrentsSize">Number of video torrents to keep in cache</label>
-
-          <div class="number-with-unit">
-            <input
-              type="number" min="0" id="cacheTorrentsSize" class="form-control"
-              formControlName="size" [ngClass]="{ 'input-error': formErrors()['cache.torrents.size'] }"
-            >
-            <span i18n>{getCacheSize('torrents'), plural, =1 {cached torrent} other {cached torrents}}</span>
-          </div>
-
-          <div *ngIf="formErrors().cache.torrents.size" class="form-error" role="alert">{{ formErrors().cache.torrents.size }}</div>
-        </div>
-
-        <div class="form-group" formGroupName="torrents">
-          <label i18n for="cacheTorrentsSize">Number of video storyboard images to keep in cache</label>
-
-          <div class="number-with-unit">
-            <input
-              type="number" min="0" id="cacheStoryboardsSize" class="form-control"
-              formControlName="size" [ngClass]="{ 'input-error': formErrors()['cache.storyboards.size'] }"
-            >
-            <span i18n>{getCacheSize('storyboards'), plural, =1 {cached storyboard} other {cached storyboards}}</span>
-          </div>
-
-          <div *ngIf="formErrors().cache.storyboards.size" class="form-error" role="alert">{{ formErrors().cache.storyboards.size }}</div>
-        </div>
-      </ng-container>
-
-    </div>
-  </div>
-
-  <div class="pt-two-cols mt-4"> <!-- cache grid -->
-    <div class="title-col">
-      <div class="anchor" id="customizations"></div> <!-- customizations anchor -->
-      <h2 i18n>CUSTOMIZATIONS</h2>
-      <div i18n class="inner-form-description">
-        Slight modifications to your PeerTube instance for when creating a plugin or theme is overkill.
-      </div>
-    </div>
-
-    <div class="content-col">
-      <ng-container formGroupName="instance">
-        <ng-container formGroupName="customizations">
-          <div class="form-group">
-            <label i18n for="customizationJavascript">JavaScript</label>
-            <my-help>
-              <ng-container i18n>
-                <p class="mb-2">Write JavaScript code directly. Example:</p>
-                <pre>console.log('my instance is amazing');</pre>
-              </ng-container>
-            </my-help>
-
-            <textarea
-              id="customizationJavascript" formControlName="javascript" class="form-control" dir="ltr"
-              [ngClass]="{ 'input-error': formErrors()['instance.customizations.javascript'] }"
-            ></textarea>
-
-            <div *ngIf="formErrors().instance.customizations.javascript" class="form-error" role="alert">{{ formErrors().instance.customizations.javascript }}</div>
-          </div>
-
-          <div class="form-group">
-            <label for="customizationCSS">CSS</label>
-
-            <my-help>
-              <ng-container i18n>
-                  <p class="mb-2">Write CSS code directly. Example:</p>
-<pre>
-#custom-css {{ '{' }}
-  color: red;
-{{ '}' }}
-</pre>
-                  <p class="mb-2">Prepend with <em>#custom-css</em> to override styles. Example:</p>
-<pre>
-#custom-css .logged-in-email {{ '{' }}
-  color: red;
-{{ '}' }}
-</pre>
-              </ng-container>
-            </my-help>
-
-            <textarea
-              id="customizationCSS" formControlName="css" class="form-control" dir="ltr"
-              [ngClass]="{ 'input-error': formErrors()['instance.customizations.css'] }"
-            ></textarea>
-            <div *ngIf="formErrors().instance.customizations.css" class="form-error" role="alert">{{ formErrors().instance.customizations.css }}</div>
-          </div>
-        </ng-container>
-      </ng-container>
-
-    </div>
-  </div>
-
-</ng-container>

client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts

@@ -1,19 +0,0 @@
-import { NgClass, NgIf } from '@angular/common'
-import { Component, input } from '@angular/core'
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { HelpComponent } from '../../../shared/shared-main/buttons/help.component'
-
-@Component({
-  selector: 'my-edit-advanced-configuration',
-  templateUrl: './edit-advanced-configuration.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ],
-  imports: [ FormsModule, ReactiveFormsModule, NgClass, NgIf, HelpComponent ]
-})
-export class EditAdvancedConfigurationComponent {
-  readonly form = input<FormGroup>(undefined)
-  readonly formErrors = input<any>(undefined)
-
-  getCacheSize (type: 'captions' | 'previews' | 'torrents' | 'storyboards') {
-    return this.form().value['cache'][type]['size']
-  }
-}

client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html

@@ -1,745 +0,0 @@
-<ng-container [formGroup]="form()">
-  <div class="pt-two-cols mt-5"> <!-- appearance grid -->
-    <div class="title-col">
-      <h2 i18n>APPEARANCE</h2>
-
-      <div i18n class="inner-form-description">
-        Use <a class="link-primary" routerLink="/admin/settings/plugins">plugins & themes</a> for more involved changes, or add slight <a class="link-primary" routerLink="/admin/settings/config/edit-custom" fragment="advanced-configuration">customizations</a>.
-      </div>
-    </div>
-
-    <div class="content-col">
-
-      <ng-container formGroupName="theme">
-        <div class="form-group">
-          <label i18n for="themeDefault">Theme</label>
-
-          <my-select-options formControlName="default" inputId="themeDefault" [items]="availableThemes"></my-select-options>
-        </div>
-      </ng-container>
-
-      <div class="form-group" formGroupName="instance">
-        <label i18n id="instanceDefaultClientRouteLabel" for="instanceDefaultClientRoute">Landing page</label>
-
-        <my-select-custom-value
-          labelId="instanceDefaultClientRouteLabel"
-          inputId="instanceDefaultClientRoute"
-          [items]="defaultLandingPageOptions"
-          formControlName="defaultClientRoute"
-          inputType="text"
-          [clearable]="false"
-        ></my-select-custom-value>
-
-        <div *ngIf="formErrors().instance.defaultClientRoute" class="form-error" role="alert">{{ formErrors().instance.defaultClientRoute }}</div>
-      </div>
-
-      <div class="form-group" formGroupName="trending">
-        <ng-container formGroupName="videos">
-          <ng-container formGroupName="algorithms">
-            <label i18n for="trendingVideosAlgorithmsDefault">Default trending algorithm</label>
-
-            <div class="peertube-select-container">
-              <select id="trendingVideosAlgorithmsDefault" formControlName="default" class="form-control">
-                <option i18n value="hot">Hot videos</option>
-                <option i18n value="most-viewed">Recent views</option>
-                <option i18n value="most-liked">Most liked videos</option>
-                <option i18n value="views">Global views</option>
-              </select>
-            </div>
-
-            <div *ngIf="formErrors().trending.videos.algorithms.default" class="form-error" role="alert">{{ formErrors().trending.videos.algorithms.default }}</div>
-          </ng-container>
-        </ng-container>
-      </div>
-
-      <ng-container formGroupName="client">
-
-        <ng-container formGroupName="videos">
-          <ng-container formGroupName="miniature">
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="clientVideosMiniaturePreferAuthorDisplayName" formControlName="preferAuthorDisplayName"
-                i18n-labelText labelText="Prefer author display name in video miniature"
-              ></my-peertube-checkbox>
-            </div>
-          </ng-container>
-        </ng-container>
-
-        <ng-container formGroupName="menu">
-          <ng-container formGroupName="login">
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="clientMenuLoginRedirectOnSingleExternalAuth" formControlName="redirectOnSingleExternalAuth"
-                i18n-labelText labelText="Redirect users on single external auth when users click on the login button in menu"
-              >
-                <ng-container ngProjectAs="description">
-                  <span *ngIf="countExternalAuth() === 0" i18n>⚠️ You don't have any external auth plugin enabled.</span>
-                  <span *ngIf="countExternalAuth() > 1" i18n>⚠️ You have multiple external auth plugins enabled.</span>
-                </ng-container>
-             </my-peertube-checkbox>
-            </div>
-          </ng-container>
-        </ng-container>
-      </ng-container>
-
-    </div>
-  </div>
-
-  <div class="pt-two-cols mt-4"> <!-- broadcast grid -->
-    <div class="title-col">
-      <h2 i18n>BROADCAST MESSAGE</h2>
-      <div i18n class="inner-form-description">
-        Display a message on your instance
-      </div>
-    </div>
-
-    <div class="content-col">
-
-      <ng-container formGroupName="broadcastMessage">
-
-        <div class="form-group">
-          <my-peertube-checkbox
-            inputName="broadcastMessageEnabled" formControlName="enabled"
-            i18n-labelText labelText="Enable broadcast message"
-          ></my-peertube-checkbox>
-        </div>
-
-        <div class="form-group">
-          <my-peertube-checkbox
-            inputName="broadcastMessageDismissable" formControlName="dismissable"
-            i18n-labelText labelText="Allow users to dismiss the broadcast message "
-          ></my-peertube-checkbox>
-        </div>
-
-        <div class="form-group">
-          <label i18n for="broadcastMessageLevel">Broadcast message level</label>
-
-          <div class="peertube-select-container">
-            <select id="broadcastMessageLevel" formControlName="level" class="form-control">
-              <option i18n value="info">info</option>
-              <option i18n value="warning">warning</option>
-              <option i18n value="error">error</option>
-            </select>
-          </div>
-
-          <div *ngIf="formErrors().broadcastMessage.level" class="form-error" role="alert">{{ formErrors().broadcastMessage.level }}</div>
-        </div>
-
-        <div class="form-group">
-          <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
-
-          <my-markdown-textarea
-            inputId="broadcastMessageMessage" formControlName="message"
-            [formError]="formErrors()['broadcastMessage.message']" markdownType="to-unsafe-html"
-          ></my-markdown-textarea>
-
-          <div *ngIf="formErrors().broadcastMessage.message" class="form-error" role="alert">{{ formErrors().broadcastMessage.message }}</div>
-        </div>
-
-      </ng-container>
-
-    </div>
-  </div>
-
-  <div class="pt-two-cols mt-4"> <!-- new users grid -->
-    <div class="title-col">
-      <h2 i18n>NEW USERS</h2>
-      <div i18n class="inner-form-description">
-        Manage <a class="link-primary" routerLink="/admin/overview/users">users</a> to set their quota individually.
-      </div>
-    </div>
-
-    <div class="content-col">
-
-      <ng-container formGroupName="signup">
-        <div class="form-group">
-          <my-peertube-checkbox
-            inputName="signupEnabled" formControlName="enabled"
-            i18n-labelText labelText="Enable Signup"
-          >
-            <ng-container ngProjectAs="description">
-              <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
-
-              <my-alert type="primary" class="alert-signup" *ngIf="signupAlertMessage">{{ signupAlertMessage }}</my-alert>
-            </ng-container>
-
-            <ng-container ngProjectAs="extra">
-              <div class="form-group">
-                <my-peertube-checkbox [ngClass]="getDisabledSignupClass()"
-                  inputName="signupRequiresApproval" formControlName="requiresApproval"
-                  i18n-labelText labelText="Signup requires approval by moderators"
-                ></my-peertube-checkbox>
-              </div>
-
-              <div class="form-group">
-                <my-peertube-checkbox [ngClass]="getDisabledSignupClass()"
-                  inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
-                  i18n-labelText labelText="Signup requires email verification"
-                ></my-peertube-checkbox>
-              </div>
-
-              <div [ngClass]="getDisabledSignupClass()">
-                <label i18n for="signupLimit">Signup limit</label>
-                <span i18n class="small muted ms-1">When the total number of users in your instance reaches this limit, registrations are disabled. -1 == unlimited</span>
-
-                <div class="number-with-unit">
-                  <input
-                    type="number" min="-1" id="signupLimit" class="form-control"
-                    formControlName="limit" [ngClass]="{ 'input-error': formErrors()['signup.limit'] }"
-                  >
-                  <span i18n>{form().value['signup']['limit'], plural, =1 {user} other {users}}</span>
-                </div>
-
-                <div *ngIf="formErrors().signup.limit" class="form-error" role="alert">{{ formErrors().signup.limit }}</div>
-
-                <small i18n *ngIf="hasUnlimitedSignup()" class="muted small">Signup won't be limited to a fixed number of users.</small>
-              </div>
-
-              <div [ngClass]="getDisabledSignupClass()" class="mt-3">
-                <label i18n for="signupMinimumAge">Minimum required age to create an account</label>
-
-                <div class="number-with-unit">
-                  <input
-                    type="number" min="1" id="signupMinimumAge" class="form-control"
-                    formControlName="minimumAge" [ngClass]="{ 'input-error': formErrors()['signup.minimumAge'] }"
-                  >
-                  <span i18n>{form().value['signup']['minimumAge'], plural, =1 {year old} other {years old}}</span>
-                </div>
-
-                <div *ngIf="formErrors().signup.minimumAge" class="form-error" role="alert">{{ formErrors().signup.minimumAge }}</div>
-              </div>
-            </ng-container>
-          </my-peertube-checkbox>
-        </div>
-      </ng-container>
-
-      <ng-container formGroupName="user">
-        <div class="form-group">
-          <label i18n id="userVideoQuotaLabel" for="userVideoQuota">Default video quota per user</label>
-
-          <my-select-custom-value
-            labelId="userVideoQuotaLabel"
-            inputId="userVideoQuota"
-            [items]="getVideoQuotaOptions()"
-            formControlName="videoQuota"
-            i18n-inputSuffix inputSuffix="bytes" inputType="number"
-            [clearable]="false"
-          ></my-select-custom-value>
-
-          <my-user-real-quota-info class="mt-2 d-block small muted" [videoQuota]="getUserVideoQuota()"></my-user-real-quota-info>
-
-          <div *ngIf="formErrors().user.videoQuota" class="form-error" role="alert">{{ formErrors().user.videoQuota }}</div>
-        </div>
-
-        <div class="form-group">
-          <label i18n id="userVideoQuotaDaily" for="userVideoQuotaDaily">Default daily upload limit per user</label>
-
-          <my-select-custom-value
-            labelId="userVideoQuotaDailyLabel"
-            inputId="userVideoQuotaDaily"
-            [items]="getVideoQuotaDailyOptions()"
-            formControlName="videoQuotaDaily"
-            i18n-inputSuffix inputSuffix="bytes" inputType="number"
-            [clearable]="false"
-          ></my-select-custom-value>
-
-          <div *ngIf="formErrors().user.videoQuotaDaily" class="form-error" role="alert">{{ formErrors().user.videoQuotaDaily }}</div>
-        </div>
-        <div class="form-group">
-          <ng-container formGroupName="history">
-            <ng-container formGroupName="videos">
-              <my-peertube-checkbox
-                inputName="videosHistoryEnabled" formControlName="enabled"
-                i18n-labelText labelText="Automatically enable video history for new users"
-              >
-              </my-peertube-checkbox>
-            </ng-container>
-          </ng-container>
-        </div>
-      </ng-container>
-
-    </div>
-  </div>
-
-  <div class="pt-two-cols mt-4"> <!-- videos grid -->
-    <div class="title-col">
-      <h2 i18n>VIDEOS</h2>
-    </div>
-
-    <div class="content-col">
-
-      <ng-container formGroupName="import">
-
-        <ng-container formGroupName="videos">
-
-          <div class="form-group">
-            <label i18n for="importConcurrency">Import jobs concurrency</label>
-            <span i18n class="small muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
-
-            <div class="number-with-unit">
-              <input type="number" id="importConcurrency" formControlName="concurrency" />
-              <span i18n>jobs in parallel</span>
-            </div>
-
-            <div *ngIf="formErrors().import.concurrency" class="form-error" role="alert">{{ formErrors().import.concurrency }}</div>
-          </div>
-
-          <div class="form-group" formGroupName="http">
-            <my-peertube-checkbox
-              inputName="importVideosHttpEnabled" formControlName="enabled"
-              i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)"
-            >
-              <ng-container ngProjectAs="description">
-                <span i18n>⚠️ If enabled, we recommend to use <a class="link-primary" href="https://docs.joinpeertube.org/maintain/configuration#security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span>
-              </ng-container>
-            </my-peertube-checkbox>
-          </div>
-
-          <div class="form-group" formGroupName="torrent">
-            <my-peertube-checkbox
-              inputName="importVideosTorrentEnabled" formControlName="enabled"
-              i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
-            >
-            <ng-container ngProjectAs="description">
-              <span i18n>⚠️ We don't recommend to enable this feature if you don't trust your users</span>
-            </ng-container>
-          </my-peertube-checkbox>
-          </div>
-
-        </ng-container>
-
-        <ng-container formGroupName="videoChannelSynchronization">
-          <div class="form-group">
-            <my-peertube-checkbox
-              inputName="importSynchronizationEnabled" formControlName="enabled"
-              i18n-labelText labelText="Allow channel synchronization with channel of other platforms like YouTube"
-            >
-            <ng-container ngProjectAs="description">
-              <span i18n [hidden]="isImportVideosHttpEnabled()">
-                ⛔ You need to allow  import with HTTP URL to be able to activate this feature.
-              </span>
-            </ng-container>
-            </my-peertube-checkbox>
-          </div>
-
-          <div class="form-group">
-            <label i18n for="videoChannelSynchronizationMaxPerUser">Max channel synchronization per user</label>
-
-            <div class="number-with-unit">
-              <input
-                type="number" min="1" id="videoChannelSynchronizationMaxPerUser" class="form-control"
-                formControlName="maxPerUser" [ngClass]="{ 'input-error': formErrors()['import']['videoChannelSynchronization']['maxPerUser'] }"
-              >
-              <span i18n>{form().value['import']['videoChannelSynchronization']['maxPerUser'], plural, =1 {sync} other {syncs}}</span>
-            </div>
-
-            <div *ngIf="formErrors().import.videoChannelSynchronization.maxPerUser" class="form-error" role="alert">{{ formErrors().import.videoChannelSynchronization.maxPerUser }}</div>
-          </div>
-        </ng-container>
-
-      </ng-container>
-
-      <ng-container formGroupName="autoBlacklist">
-        <ng-container formGroupName="videos">
-          <ng-container formGroupName="ofUsers">
-
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
-                i18n-labelText labelText="Block new videos automatically"
-              >
-              <ng-container ngProjectAs="description">
-                <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
-              </ng-container>
-            </my-peertube-checkbox>
-            </div>
-
-          </ng-container>
-        </ng-container>
-      </ng-container>
-
-      <ng-container formGroupName="videoFile">
-        <ng-container formGroupName="update">
-          <div class="form-group">
-            <my-peertube-checkbox
-              inputName="videoFileUpdateEnabled" formControlName="enabled"
-              i18n-labelText labelText="Allow users to upload a new version of their video"
-            >
-            </my-peertube-checkbox>
-          </div>
-        </ng-container>
-      </ng-container>
-
-      <ng-container formGroupName="storyboards">
-        <div class="form-group">
-          <my-peertube-checkbox
-            inputName="storyboardsEnabled" formControlName="enabled"
-            i18n-labelText labelText="Enable video storyboards"
-          >
-            <ng-container ngProjectAs="description">
-              <span i18n>Generate storyboards of local videos using ffmpeg so users can see the video preview in the player while scrubbing the video</span>
-            </ng-container>
-          </my-peertube-checkbox>
-        </div>
-      </ng-container>
-
-      <ng-container formGroupName="videoTranscription">
-        <div class="form-group">
-          <my-peertube-checkbox
-            inputName="videoTranscriptionEnabled" formControlName="enabled"
-            i18n-labelText labelText="Enable video transcription"
-          >
-            <ng-container ngProjectAs="description">
-              <span i18n><a href="https://docs.joinpeertube.org/admin/configuration#automatic-transcription" target="_blank">Automatically create subtitles</a> for uploaded/imported VOD videos</span>
-            </ng-container>
-
-            <ng-container ngProjectAs="extra">
-              <div class="form-group" formGroupName="remoteRunners" [ngClass]="getTranscriptionRunnerDisabledClass()">
-                <my-peertube-checkbox
-                  inputName="videoTranscriptionRemoteRunnersEnabled" formControlName="enabled"
-                  i18n-labelText labelText="Enable remote runners for transcription"
-                >
-                  <ng-container ngProjectAs="description">
-                    <span i18n>
-                      Use <a routerLink="/admin/settings/system/runners/runners-list">remote runners</a> to process transcription tasks.
-                      Remote runners has to register on your instance first.
-                    </span>
-                  </ng-container>
-                </my-peertube-checkbox>
-              </div>
-            </ng-container>
-          </my-peertube-checkbox>
-        </div>
-      </ng-container>
-    </div>
-  </div>
-
-  <div class="pt-two-cols mt-4"> <!-- video channels grid -->
-    <div class="title-col">
-      <h2 i18n>VIDEO CHANNELS</h2>
-    </div>
-
-    <div class="content-col">
-      <div class="form-group" formGroupName="videoChannels">
-        <label i18n for="videoChannelsMaxPerUser">Max video channels per user</label>
-
-        <div class="number-with-unit">
-          <input
-            type="number" min="1" id="videoChannelsMaxPerUser" class="form-control"
-            formControlName="maxPerUser" [ngClass]="{ 'input-error': formErrors()['videoChannels.maxPerUser'] }"
-          >
-          <span i18n>{form().value['videoChannels']['maxPerUser'], plural, =1 {channel} other {channels}}</span>
-        </div>
-
-        <div *ngIf="formErrors().videoChannels.maxPerUser" class="form-error" role="alert">{{ formErrors().videoChannels.maxPerUser }}</div>
-      </div>
-    </div>
-  </div>
-
-  <div class="pt-two-cols mt-4"> <!-- search grid -->
-    <div class="title-col">
-      <h2 i18n>SEARCH</h2>
-    </div>
-
-    <div class="content-col">
-
-      <ng-container formGroupName="search">
-        <ng-container formGroupName="remoteUri">
-
-          <div class="form-group">
-            <my-peertube-checkbox
-              inputName="searchRemoteUriUsers" formControlName="users"
-              i18n-labelText labelText="Allow users to do remote URI/handle search"
-            >
-              <ng-container ngProjectAs="description">
-                <span i18n>Allow <strong>your users</strong> to look up remote videos/actors that may not be federated with your instance</span>
-              </ng-container>
-            </my-peertube-checkbox>
-          </div>
-
-          <div class="form-group">
-            <my-peertube-checkbox
-              inputName="searchRemoteUriAnonymous" formControlName="anonymous"
-              i18n-labelText labelText="Allow anonymous to do remote URI/handle search"
-            >
-              <ng-container ngProjectAs="description">
-                <span i18n>Allow <strong>anonymous users</strong> to look up remote videos/actors that may not be federated with your instance</span>
-              </ng-container>
-            </my-peertube-checkbox>
-          </div>
-
-        </ng-container>
-
-        <ng-container formGroupName="searchIndex">
-          <div class="form-group">
-            <my-peertube-checkbox
-              inputName="searchIndexEnabled" formControlName="enabled"
-              i18n-labelText labelText="Enable global search"
-            >
-              <ng-container ngProjectAs="description">
-                <div i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</div>
-              </ng-container>
-
-              <ng-container ngProjectAs="extra">
-                <div [ngClass]="getDisabledSearchIndexClass()">
-                  <label i18n for="searchIndexUrl">Search index URL</label>
-
-                  <div i18n class="label-small-info">
-                    Use your <a class="link-primary" target="_blank" href="https://framagit.org/framasoft/peertube/search-index">your own search index</a> or choose the official one, <a class="link-primary" target="_blank" href="https://sepiasearch.org">https://sepiasearch.org</a>, that is not moderated.
-                  </div>
-
-                  <input
-                    type="text"  id="searchIndexUrl" class="form-control"
-                    formControlName="url" [ngClass]="{ 'input-error': formErrors()['search.searchIndex.url'] }"
-                  >
-
-                  <div *ngIf="formErrors().search.searchIndex.url" class="form-error" role="alert">{{ formErrors().search.searchIndex.url }}</div>
-                </div>
-
-                <div class="mt-3">
-                  <my-peertube-checkbox [ngClass]="getDisabledSearchIndexClass()"
-                    inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch"
-                    i18n-labelText labelText="Disable local search in search bar"
-                  ></my-peertube-checkbox>
-                </div>
-
-                <div class="mt-3">
-                  <my-peertube-checkbox [ngClass]="getDisabledSearchIndexClass()"
-                    inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch"
-                    i18n-labelText labelText="Search bar uses the global search index by default"
-                  >
-                    <ng-container ngProjectAs="description">
-                      <span i18n>Otherwise the local search stays used by default</span>
-                    </ng-container>
-                  </my-peertube-checkbox>
-                </div>
-
-              </ng-container>
-            </my-peertube-checkbox>
-          </div>
-
-        </ng-container>
-
-      </ng-container>
-
-    </div>
-  </div>
-
-  <div class="pt-two-cols mt-4"> <!-- import/export grid -->
-    <div class="title-col">
-      <h2 i18n>USER IMPORT/EXPORT</h2>
-    </div>
-
-    <div class="content-col">
-
-      <ng-container formGroupName="import">
-        <ng-container formGroupName="users">
-          <div class="form-group">
-            <my-peertube-checkbox
-              inputName="importUsersEnabled" formControlName="enabled"
-              i18n-labelText labelText="Allow your users to import a data archive"
-            >
-              <ng-container ngProjectAs="description">
-                <div i18n>Video quota is checked on import so the user doesn't upload a too big archive file</div>
-                <div i18n>Video quota (daily quota is not taken into account) is also checked for each video when PeerTube is processing the import</div>
-              </ng-container>
-            </my-peertube-checkbox>
-          </div>
-        </ng-container>
-      </ng-container>
-
-      <ng-container formGroupName="export">
-
-        <ng-container formGroupName="users">
-
-          <div class="form-group">
-            <my-peertube-checkbox
-              inputName="exportUsersEnabled" formControlName="enabled"
-              i18n-labelText labelText="Allow your users to export their data"
-            >
-              <ng-container ngProjectAs="description">
-                <span i18n>Users can export their PeerTube data in a .zip for backup or re-import. Only one export at a time is allowed per user</span>
-              </ng-container>
-
-              <ng-container ngProjectAs="extra">
-
-                <div class="form-group" [ngClass]="getDisabledExportUsersClass()">
-                  <label i18n id="exportUsersMaxUserVideoQuota" for="exportUsersMaxUserVideoQuota">Max user video quota allowed to generate the export</label>
-
-                  <span i18n class="ms-2 small muted">If the user decides to include the video files in the archive</span>
-
-                  <my-select-custom-value
-                    labelId="exportUsersMaxUserVideoQuota"
-                    inputId="exportUsersMaxUserVideoQuota"
-                    [items]="exportMaxUserVideoQuotaOptions"
-                    formControlName="maxUserVideoQuota"
-                    i18n-inputSuffix inputSuffix="bytes" inputType="number"
-                    [clearable]="false"
-                  ></my-select-custom-value>
-
-                  <div *ngIf="formErrors().export.users.maxUserVideoQuota" class="form-error" role="alert">{{ formErrors().export.users.maxUserVideoQuota }}</div>
-                </div>
-
-                <div class="form-group" [ngClass]="getDisabledExportUsersClass()">
-                  <label i18n for="exportUsersExportExpiration">User export expiration</label>
-
-                  <my-select-options inputId="exportUsersExportExpiration" [items]="exportExpirationOptions" formControlName="exportExpiration"></my-select-options>
-
-                  <div i18n class="mt-1 small muted">The archive file is deleted after this period.</div>
-
-                  <div *ngIf="formErrors().export.users.exportExpiration" class="form-error" role="alert">{{ formErrors().export.users.exportExpiration }}</div>
-                </div>
-
-              </ng-container>
-            </my-peertube-checkbox>
-          </div>
-
-        </ng-container>
-      </ng-container>
-    </div>
-  </div>
-
-  <div class="pt-two-cols mt-4"> <!-- federation grid -->
-    <div class="title-col">
-      <h2 i18n>FEDERATION</h2>
-      <div i18n class="inner-form-description">
-        Manage <a class="link-primary" routerLink="/admin/settings/follows">relations</a> with other instances.
-      </div>
-    </div>
-
-    <div class="content-col">
-
-      <ng-container formGroupName="followers">
-        <ng-container formGroupName="instance">
-
-          <div class="form-group">
-            <my-peertube-checkbox
-              inputName="followersInstanceEnabled" formControlName="enabled"
-              i18n-labelText labelText="Other instances can follow yours"
-            ></my-peertube-checkbox>
-          </div>
-
-          <div class="form-group">
-            <my-peertube-checkbox
-              inputName="followersInstanceManualApproval" formControlName="manualApproval"
-              i18n-labelText labelText="Manually approve new instance followers"
-            ></my-peertube-checkbox>
-          </div>
-        </ng-container>
-      </ng-container>
-
-      <ng-container formGroupName="followings">
-        <ng-container formGroupName="instance">
-
-          <ng-container formGroupName="autoFollowBack">
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
-                i18n-labelText labelText="Automatically follow back instances"
-              >
-                <ng-container ngProjectAs="description">
-                  <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
-                </ng-container>
-              </my-peertube-checkbox>
-            </div>
-          </ng-container>
-
-          <ng-container formGroupName="autoFollowIndex">
-            <div class="form-group">
-              <my-peertube-checkbox
-                inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
-                i18n-labelText labelText="Automatically follow instances of a public index"
-              >
-                <ng-container ngProjectAs="description">
-                  <div i18n>⚠️ This functionality requires a lot of attention and extra moderation.</div>
-
-                  <span i18n>
-                    See <a class="link-primary" href="https://docs.joinpeertube.org/admin/following-instances#automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL
-                  </span>
-                </ng-container>
-
-                <ng-container ngProjectAs="extra">
-                  <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
-                    <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
-                    <input
-                      type="text" id="followingsInstanceAutoFollowIndexUrl" class="form-control"
-                      formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors()['followings.instance.autoFollowIndex.indexUrl'] }"
-                    >
-                    <div *ngIf="formErrors().followings.instance.autoFollowIndex.indexUrl" class="form-error" role="alert">{{ formErrors().followings.instance.autoFollowIndex.indexUrl }}</div>
-                  </div>
-                </ng-container>
-              </my-peertube-checkbox>
-            </div>
-
-          </ng-container>
-        </ng-container>
-      </ng-container>
-
-    </div>
-  </div>
-
-  <div class="pt-two-cols mt-4"> <!-- administrators grid -->
-    <div class="title-col">
-      <h2 i18n>ADMINISTRATORS</h2>
-    </div>
-
-    <div class="content-col">
-
-      <div class="form-group" formGroupName="admin">
-        <label i18n for="adminEmail">Admin email</label>
-
-        <input
-          type="text" id="adminEmail" class="form-control"
-          formControlName="email" [ngClass]="{ 'input-error': formErrors()['admin.email'] }"
-        >
-
-        <div *ngIf="formErrors().admin.email" class="form-error" role="alert">{{ formErrors().admin.email }}</div>
-      </div>
-
-      <div class="form-group" formGroupName="contactForm">
-        <my-peertube-checkbox
-          inputName="enableContactForm" formControlName="enabled"
-          i18n-labelText labelText="Enable contact form"
-        ></my-peertube-checkbox>
-      </div>
-
-    </div>
-  </div>
-
-  <div class="pt-two-cols mt-4"> <!-- Twitter grid -->
-    <div class="title-col">
-      <h2 i18n>TWITTER/X</h2>
-
-      <div i18n class="inner-form-description">
-        Extra configuration required by Twitter/X. All other social media (Facebook, Mastodon, etc.) are supported out of the box.
-      </div>
-    </div>
-
-    <div class="content-col">
-
-      <ng-container formGroupName="services">
-        <ng-container formGroupName="twitter">
-
-          <div class="form-group">
-            <label for="servicesTwitterUsername" i18n>Your Twitter/X username</label>
-
-            <div class="label-small-info">
-              <p i18n class="mb-0">Indicates the Twitter/X account for the website or platform where the content was published.</p>
-
-              <p i18n>This is just an extra information injected in PeerTube HTML that is required by Twitter/X. If you don't have a Twitter/X account, just leave the default value.</p>
-            </div>
-
-            <input
-              type="text" id="servicesTwitterUsername" class="form-control"
-              formControlName="username" [ngClass]="{ 'input-error': formErrors()['services.twitter.username'] }"
-            >
-
-            <div *ngIf="formErrors().services.twitter.username" class="form-error" role="alert">{{ formErrors().services.twitter.username }}</div>
-          </div>
-
-        </ng-container>
-      </ng-container>
-
-    </div>
-  </div>
-</ng-container>

client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts

@@ -1,215 +0,0 @@
-import { NgClass, NgIf } from '@angular/common'
-import { Component, OnChanges, OnInit, SimpleChanges, inject, input } from '@angular/core'
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { RouterLink } from '@angular/router'
-import { ThemeService } from '@app/core'
-import { AlertComponent } from '@app/shared/shared-main/common/alert.component'
-import { HTMLServerConfig } from '@peertube/peertube-models'
-import { pairwise } from 'rxjs/operators'
-import { SelectOptionsItem } from 'src/types/select-options-item.model'
-import { MarkdownTextareaComponent } from '../../../shared/shared-forms/markdown-textarea.component'
-import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
-import { SelectCustomValueComponent } from '../../../shared/shared-forms/select/select-custom-value.component'
-import { SelectOptionsComponent } from '../../../shared/shared-forms/select/select-options.component'
-import { HelpComponent } from '../../../shared/shared-main/buttons/help.component'
-import { UserRealQuotaInfoComponent } from '../../shared/user-real-quota-info.component'
-import { ConfigService } from '../shared/config.service'
-
-@Component({
-  selector: 'my-edit-basic-configuration',
-  templateUrl: './edit-basic-configuration.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ],
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    RouterLink,
-    SelectCustomValueComponent,
-    NgIf,
-    PeertubeCheckboxComponent,
-    HelpComponent,
-    MarkdownTextareaComponent,
-    NgClass,
-    UserRealQuotaInfoComponent,
-    SelectOptionsComponent,
-    AlertComponent
-  ]
-})
-export class EditBasicConfigurationComponent implements OnInit, OnChanges {
-  private configService = inject(ConfigService)
-  private themeService = inject(ThemeService)
-
-  readonly form = input<FormGroup>(undefined)
-  readonly formErrors = input<any>(undefined)
-
-  readonly serverConfig = input<HTMLServerConfig>(undefined)
-
-  signupAlertMessage: string
-  defaultLandingPageOptions: SelectOptionsItem[] = []
-  availableThemes: SelectOptionsItem[]
-
-  exportExpirationOptions: SelectOptionsItem[] = []
-  exportMaxUserVideoQuotaOptions: SelectOptionsItem[] = []
-
-  ngOnInit () {
-    this.buildLandingPageOptions()
-    this.checkSignupField()
-    this.checkImportSyncField()
-
-    this.availableThemes = [
-      this.themeService.getDefaultThemeItem(),
-
-      ...this.themeService.buildAvailableThemes()
-    ]
-
-    this.exportExpirationOptions = [
-      { id: 1000 * 3600 * 24, label: $localize`1 day` },
-      { id: 1000 * 3600 * 24 * 2, label: $localize`2 days` },
-      { id: 1000 * 3600 * 24 * 7, label: $localize`7 days` },
-      { id: 1000 * 3600 * 24 * 30, label: $localize`30 days` }
-    ]
-
-    this.exportMaxUserVideoQuotaOptions = this.configService.videoQuotaOptions.filter(o => (o.id as number) >= 1)
-  }
-
-  ngOnChanges (changes: SimpleChanges) {
-    if (changes['serverConfig']) {
-      this.buildLandingPageOptions()
-    }
-  }
-
-  countExternalAuth () {
-    return this.serverConfig().plugin.registeredExternalAuths.length
-  }
-
-  getVideoQuotaOptions () {
-    return this.configService.videoQuotaOptions
-  }
-
-  getVideoQuotaDailyOptions () {
-    return this.configService.videoQuotaDailyOptions
-  }
-
-  doesTrendingVideosAlgorithmsEnabledInclude (algorithm: string) {
-    const enabled = this.form().value['trending']['videos']['algorithms']['enabled']
-    if (!Array.isArray(enabled)) return false
-
-    return !!enabled.find((e: string) => e === algorithm)
-  }
-
-  getUserVideoQuota () {
-    return this.form().value['user']['videoQuota']
-  }
-
-  isExportUsersEnabled () {
-    return this.form().value['export']['users']['enabled'] === true
-  }
-
-  getDisabledExportUsersClass () {
-    return { 'disabled-checkbox-extra': !this.isExportUsersEnabled() }
-  }
-
-  isSignupEnabled () {
-    return this.form().value['signup']['enabled'] === true
-  }
-
-  getDisabledSignupClass () {
-    return { 'disabled-checkbox-extra': !this.isSignupEnabled() }
-  }
-
-  isImportVideosHttpEnabled (): boolean {
-    return this.form().value['import']['videos']['http']['enabled'] === true
-  }
-
-  importSynchronizationChecked () {
-    return this.isImportVideosHttpEnabled() && this.form().value['import']['videoChannelSynchronization']['enabled']
-  }
-
-  hasUnlimitedSignup () {
-    return this.form().value['signup']['limit'] === -1
-  }
-
-  isSearchIndexEnabled () {
-    return this.form().value['search']['searchIndex']['enabled'] === true
-  }
-
-  getDisabledSearchIndexClass () {
-    return { 'disabled-checkbox-extra': !this.isSearchIndexEnabled() }
-  }
-
-  // ---------------------------------------------------------------------------
-
-  isTranscriptionEnabled () {
-    return this.form().value['videoTranscription']['enabled'] === true
-  }
-
-  getTranscriptionRunnerDisabledClass () {
-    return { 'disabled-checkbox-extra': !this.isTranscriptionEnabled() }
-  }
-
-  // ---------------------------------------------------------------------------
-
-  isAutoFollowIndexEnabled () {
-    return this.form().value['followings']['instance']['autoFollowIndex']['enabled'] === true
-  }
-
-  buildLandingPageOptions () {
-    let links: { label: string, path: string }[] = []
-
-    if (this.serverConfig().homepage.enabled) {
-      links.push({ label: $localize`Home`, path: '/home' })
-    }
-
-    links = links.concat([
-      { label: $localize`Discover`, path: '/videos/overview' },
-      { label: $localize`Browse all videos`, path: '/videos/browse' },
-      { label: $localize`Browse local videos`, path: '/videos/browse?scope=local' }
-    ])
-
-    this.defaultLandingPageOptions = links.map(o => ({
-      id: o.path,
-      label: o.label,
-      description: o.path
-    }))
-  }
-
-  private checkImportSyncField () {
-    const importSyncControl = this.form().get('import.videoChannelSynchronization.enabled')
-    const importVideosHttpControl = this.form().get('import.videos.http.enabled')
-
-    importVideosHttpControl.valueChanges
-      .subscribe(httpImportEnabled => {
-        importSyncControl.setValue(httpImportEnabled && importSyncControl.value)
-        if (httpImportEnabled) {
-          importSyncControl.enable()
-        } else {
-          importSyncControl.disable()
-        }
-      })
-  }
-
-  private checkSignupField () {
-    const signupControl = this.form().get('signup.enabled')
-
-    signupControl.valueChanges
-      .pipe(pairwise())
-      .subscribe(([ oldValue, newValue ]) => {
-        if (oldValue === false && newValue === true) {
-          this.signupAlertMessage =
-            // eslint-disable-next-line max-len
-            $localize`You enabled signup: we automatically enabled the "Block new videos automatically" checkbox of the "Videos" section just below.`
-
-          this.form().patchValue({
-            autoBlacklist: {
-              videos: {
-                ofUsers: {
-                  enabled: true
-                }
-              }
-            }
-          })
-        }
-      })
-
-    signupControl.updateValueAndValidity()
-  }
-}

client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts

@@ -1,106 +0,0 @@
-import { Injectable } from '@angular/core'
-import { FormGroup } from '@angular/forms'
-import { formatICU } from '@app/helpers'
-
-export type ResolutionOption = {
-  id: string
-  label: string
-  description?: string
-}
-
-@Injectable()
-export class EditConfigurationService {
-
-  getTranscodingResolutions () {
-    return [
-      {
-        id: '0p',
-        label: $localize`Audio-only`,
-        // eslint-disable-next-line max-len
-        description: $localize`"Split audio and video" must be enabled for the PeerTube player to propose an "Audio only" resolution to users`
-      },
-      {
-        id: '144p',
-        label: $localize`144p`
-      },
-      {
-        id: '240p',
-        label: $localize`240p`
-      },
-      {
-        id: '360p',
-        label: $localize`360p`
-      },
-      {
-        id: '480p',
-        label: $localize`480p`
-      },
-      {
-        id: '720p',
-        label: $localize`720p`
-      },
-      {
-        id: '1080p',
-        label: $localize`1080p`
-      },
-      {
-        id: '1440p',
-        label: $localize`1440p`
-      },
-      {
-        id: '2160p',
-        label: $localize`2160p`
-      }
-    ]
-  }
-
-  isTranscodingEnabled (form: FormGroup) {
-    return form.value['transcoding']['enabled'] === true
-  }
-
-  isHLSEnabled (form: FormGroup) {
-    return form.value['transcoding']['hls']['enabled'] === true
-  }
-
-  isRemoteRunnerVODEnabled (form: FormGroup) {
-    return form.value['transcoding']['remoteRunners']['enabled'] === true
-  }
-
-  isRemoteRunnerLiveEnabled (form: FormGroup) {
-    return form.value['live']['transcoding']['remoteRunners']['enabled'] === true
-  }
-
-  isStudioEnabled (form: FormGroup) {
-    return form.value['videoStudio']['enabled'] === true
-  }
-
-  isLiveEnabled (form: FormGroup) {
-    return form.value['live']['enabled'] === true
-  }
-
-  isLiveTranscodingEnabled (form: FormGroup) {
-    return form.value['live']['transcoding']['enabled'] === true
-  }
-
-  getTotalTranscodingThreads (form: FormGroup) {
-    const transcodingEnabled = form.value['transcoding']['enabled']
-    const transcodingThreads = form.value['transcoding']['threads']
-    const liveTranscodingEnabled = form.value['live']['transcoding']['enabled']
-    const liveTranscodingThreads = form.value['live']['transcoding']['threads']
-
-    // checks whether all enabled method are on fixed values and not on auto (= 0)
-    let noneOnAuto = !transcodingEnabled || +transcodingThreads > 0
-    noneOnAuto &&= !liveTranscodingEnabled || +liveTranscodingThreads > 0
-
-    // count total of fixed value, repalcing auto by a single thread (knowing it will display "at least")
-    let value = 0
-    if (transcodingEnabled) value += +transcodingThreads || 1
-    if (liveTranscodingEnabled) value += +liveTranscodingThreads || 1
-
-    return {
-      value,
-      atMost: noneOnAuto, // auto switches everything to a least estimation since ffmpeg will take as many threads as possible
-      unit: formatICU($localize`{value, plural, =1 {thread} other {threads}}`, { value })
-    }
-  }
-}

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html

@@ -1,96 +0,0 @@
-<h1 class="visually-hidden" i18n>Configuration</h1>
-
-<my-alert type="warning" *ngIf="!isUpdateAllowed()" i18n>
-  Updating instance configuration from the web interface is disabled by the system administrator.
-</my-alert>
-
-<form [formGroup]="form">
-
-  <div ngbNav #nav="ngbNav" [activeId]="activeNav" (activeIdChange)="onNavChange($event)" class="nav-tabs">
-
-    <ng-container ngbNavItem="instance-homepage">
-      <a ngbNavLink i18n>Homepage</a>
-
-      <ng-template ngbNavContent>
-        <my-edit-homepage [form]="form" [formErrors]="formErrors"></my-edit-homepage>
-      </ng-template>
-    </ng-container>
-
-    <ng-container ngbNavItem="instance-information">
-      <a ngbNavLink i18n>Information</a>
-
-      <ng-template ngbNavContent>
-        <my-edit-instance-information [form]="form" [formErrors]="formErrors" [languageItems]="languageItems" [categoryItems]="categoryItems">
-        </my-edit-instance-information>
-      </ng-template>
-    </ng-container>
-
-    <ng-container ngbNavItem="basic-configuration">
-      <a ngbNavLink i18n>Basic</a>
-
-      <ng-template ngbNavContent>
-        <my-edit-basic-configuration [form]="form" [formErrors]="formErrors" [serverConfig]="serverConfig">
-        </my-edit-basic-configuration>
-      </ng-template>
-    </ng-container>
-
-    <ng-container ngbNavItem="transcoding">
-      <a ngbNavLink i18n>VOD Transcoding</a>
-
-      <ng-template ngbNavContent>
-        <my-edit-vod-transcoding [form]="form" [formErrors]="formErrors" [serverConfig]="serverConfig">
-        </my-edit-vod-transcoding>
-      </ng-template>
-    </ng-container>
-
-    <ng-container ngbNavItem="live">
-      <a ngbNavLink i18n>Live streaming</a>
-
-      <ng-template ngbNavContent>
-        <my-edit-live-configuration [form]="form" [formErrors]="formErrors" [serverConfig]="serverConfig">
-        </my-edit-live-configuration>
-      </ng-template>
-    </ng-container>
-
-    <ng-container ngbNavItem="advanced-configuration">
-      <a ngbNavLink i18n>Advanced</a>
-
-      <ng-template ngbNavContent>
-        <my-edit-advanced-configuration [form]="form" [formErrors]="formErrors">
-        </my-edit-advanced-configuration>
-      </ng-template>
-    </ng-container>
-  </div>
-
-  <div [ngbNavOutlet]="nav"></div>
-
-  <div class="row mt-4"> <!-- submit placement block -->
-    <div class="col-md-7 col-xl-5"></div>
-    <div class="col-md-5 col-xl-5">
-
-      <div role="alert" class="form-error submit-error" i18n *ngIf="!form.valid && isUpdateAllowed()">
-        There are errors in the form:
-
-        <ul>
-          <li *ngFor="let error of grabAllErrors()">
-            {{ error }}
-          </li>
-        </ul>
-      </div>
-
-      <span role="alert" class="form-error submit-error" i18n *ngIf="!hasLiveAllowReplayConsistentOptions()">
-        You cannot allow live replay if you don't enable transcoding.
-      </span>
-
-      <span i18n *ngIf="!isUpdateAllowed()">
-        You cannot change the server configuration because it's managed externally.
-      </span>
-
-      <input
-        class="peertube-button primary-button"
-        (click)="formValidated()" type="submit" i18n-value value="Update configuration"
-        [disabled]="!form.valid || !hasConsistentOptions() || !isUpdateAllowed()"
-      >
-    </div>
-  </div>
-</form>

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss

@@ -1,144 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-@use '_form-mixins' as *;
-
-$form-base-input-width: 340px;
-$form-max-width: 500px;
-
-form {
-  padding-bottom: 1.5rem;
-}
-
-my-markdown-textarea {
-  display: block;
-  max-width: $form-max-width;
-}
-
-.homepage my-markdown-textarea {
-  display: block;
-  max-width: 90%;
-
-  ::ng-deep textarea {
-    height: 300px !important;
-  }
-}
-
-input[type=text],
-input[type=number] {
-  @include peertube-input-text($form-base-input-width);
-}
-
-.number-with-unit {
-  position: relative;
-  width: fit-content;
-
-  input[type=number] + span {
-    position: absolute;
-    top: 0.4em;
-    right: 3em;
-
-    @media screen and (max-width: $mobile-view) {
-      display: none;
-    }
-  }
-
-  input[disabled] {
-    opacity: 0.8;
-    pointer-events: none;
-  }
-}
-
-input[type=checkbox] {
-  @include peertube-checkbox;
-}
-
-.peertube-select-container {
-  @include peertube-select-container($form-base-input-width);
-}
-
-my-select-checkbox,
-my-select-options,
-my-select-custom-value {
-  display: block;
-
-  @include responsive-width($form-base-input-width);
-}
-
-input[type=submit] {
-  display: flex;
-
-  @include margin-left(auto);
-
-  + .form-error {
-    display: inline;
-
-    @include margin-left(5px);
-  }
-}
-
-.inner-form-description {
-  font-size: 15px;
-  margin-bottom: 15px;
-}
-
-textarea {
-  max-width: 100%;
-  display: block;
-
-  @include peertube-textarea(500px, 150px);
-
-  &.small {
-    height: 75px;
-  }
-}
-
-.label-small-info {
-  font-style: italic;
-  margin-bottom: 10px;
-  font-size: 14px;
-}
-
-.disabled-checkbox-extra {
-  &,
-  ::ng-deep label {
-    opacity: .5;
-    pointer-events: none;
-  }
-}
-
-input[disabled] {
-  opacity: 0.5;
-}
-
-ngb-tabset:not(.previews) ::ng-deep {
-  .nav-link {
-    font-size: 105%;
-  }
-}
-
-.submit-error {
-  margin-bottom: 20px;
-}
-
-.alert-signup {
-  width: fit-content;
-  margin-top: 10px;
-}
-
-.callout-container {
-  position: absolute;
-  display: flex;
-  height: 0;
-  width: 100%;
-  justify-content: right;
-}
-
-my-actor-banner-edit {
-  max-width: $form-max-width;
-}
-
-h4 {
-  font-weight: $font-bold;
-  margin-bottom: 0.5rem;
-  font-size: 1rem;
-}

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts

@@ -1,479 +0,0 @@
-import { NgFor, NgIf } from '@angular/common'
-import { Component, OnInit, inject } from '@angular/core'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { ActivatedRoute, Router } from '@angular/router'
-import { ConfigService } from '@app/+admin/config/shared/config.service'
-import { Notifier } from '@app/core'
-import { ServerService } from '@app/core/server/server.service'
-import { URL_VALIDATOR } from '@app/shared/form-validators/common-validators'
-import {
-  ADMIN_EMAIL_VALIDATOR,
-  CACHE_SIZE_VALIDATOR,
-  CONCURRENCY_VALIDATOR,
-  EXPORT_EXPIRATION_VALIDATOR,
-  EXPORT_MAX_USER_VIDEO_QUOTA_VALIDATOR,
-  INSTANCE_NAME_VALIDATOR,
-  INSTANCE_SHORT_DESCRIPTION_VALIDATOR,
-  MAX_INSTANCE_LIVES_VALIDATOR,
-  MAX_LIVE_DURATION_VALIDATOR,
-  MAX_SYNC_PER_USER,
-  MAX_USER_LIVES_VALIDATOR,
-  MAX_VIDEO_CHANNELS_PER_USER_VALIDATOR,
-  SERVICES_TWITTER_USERNAME_VALIDATOR,
-  SIGNUP_LIMIT_VALIDATOR,
-  SIGNUP_MINIMUM_AGE_VALIDATOR,
-  TRANSCODING_MAX_FPS_VALIDATOR,
-  TRANSCODING_THREADS_VALIDATOR
-} from '@app/shared/form-validators/custom-config-validators'
-import { USER_VIDEO_QUOTA_DAILY_VALIDATOR, USER_VIDEO_QUOTA_VALIDATOR } from '@app/shared/form-validators/user-validators'
-import { FormReactive } from '@app/shared/shared-forms/form-reactive'
-import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
-import { AlertComponent } from '@app/shared/shared-main/common/alert.component'
-import { CustomPageService } from '@app/shared/shared-main/custom-page/custom-page.service'
-import { NgbNav, NgbNavContent, NgbNavItem, NgbNavLink, NgbNavLinkBase, NgbNavOutlet } from '@ng-bootstrap/ng-bootstrap'
-import { CustomConfig, CustomPage, HTMLServerConfig } from '@peertube/peertube-models'
-import merge from 'lodash-es/merge'
-import omit from 'lodash-es/omit'
-import { forkJoin } from 'rxjs'
-import { SelectOptionsItem } from 'src/types/select-options-item.model'
-import { EditAdvancedConfigurationComponent } from './edit-advanced-configuration.component'
-import { EditBasicConfigurationComponent } from './edit-basic-configuration.component'
-import { EditConfigurationService } from './edit-configuration.service'
-import { EditHomepageComponent } from './edit-homepage.component'
-import { EditInstanceInformationComponent } from './edit-instance-information.component'
-import { EditLiveConfigurationComponent } from './edit-live-configuration.component'
-import { EditVODTranscodingComponent } from './edit-vod-transcoding.component'
-
-type ComponentCustomConfig = CustomConfig & {
-  instanceCustomHomepage: CustomPage
-}
-
-@Component({
-  selector: 'my-edit-custom-config',
-  templateUrl: './edit-custom-config.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ],
-  imports: [
-    NgIf,
-    FormsModule,
-    ReactiveFormsModule,
-    NgbNav,
-    NgbNavItem,
-    NgbNavLink,
-    NgbNavLinkBase,
-    NgbNavContent,
-    EditHomepageComponent,
-    EditInstanceInformationComponent,
-    EditBasicConfigurationComponent,
-    EditVODTranscodingComponent,
-    EditLiveConfigurationComponent,
-    EditAdvancedConfigurationComponent,
-    NgbNavOutlet,
-    NgFor,
-    AlertComponent
-  ]
-})
-export class EditCustomConfigComponent extends FormReactive implements OnInit {
-  protected formReactiveService = inject(FormReactiveService)
-  private router = inject(Router)
-  private route = inject(ActivatedRoute)
-  private notifier = inject(Notifier)
-  private configService = inject(ConfigService)
-  private customPage = inject(CustomPageService)
-  private serverService = inject(ServerService)
-  private editConfigurationService = inject(EditConfigurationService)
-
-  activeNav: string
-
-  customConfig: ComponentCustomConfig
-  serverConfig: HTMLServerConfig
-
-  homepage: CustomPage
-
-  languageItems: SelectOptionsItem[] = []
-  categoryItems: SelectOptionsItem[] = []
-
-  ngOnInit () {
-    this.serverConfig = this.serverService.getHTMLConfig()
-
-    const formGroupData: { [key in keyof ComponentCustomConfig]: any } = {
-      instance: {
-        name: INSTANCE_NAME_VALIDATOR,
-        shortDescription: INSTANCE_SHORT_DESCRIPTION_VALIDATOR,
-        description: null,
-
-        isNSFW: false,
-        defaultNSFWPolicy: null,
-
-        terms: null,
-        codeOfConduct: null,
-
-        creationReason: null,
-        moderationInformation: null,
-        administrator: null,
-        maintenanceLifetime: null,
-        businessModel: null,
-
-        hardwareInformation: null,
-
-        categories: null,
-        languages: null,
-
-        serverCountry: null,
-        support: {
-          text: null
-        },
-        social: {
-          externalLink: URL_VALIDATOR,
-          mastodonLink: URL_VALIDATOR,
-          blueskyLink: URL_VALIDATOR
-        },
-
-        defaultClientRoute: null,
-
-        customizations: {
-          javascript: null,
-          css: null
-        }
-      },
-      theme: {
-        default: null
-      },
-      services: {
-        twitter: {
-          username: SERVICES_TWITTER_USERNAME_VALIDATOR
-        }
-      },
-      client: {
-        videos: {
-          miniature: {
-            preferAuthorDisplayName: null
-          }
-        },
-        menu: {
-          login: {
-            redirectOnSingleExternalAuth: null
-          }
-        }
-      },
-      cache: {
-        previews: {
-          size: CACHE_SIZE_VALIDATOR
-        },
-        captions: {
-          size: CACHE_SIZE_VALIDATOR
-        },
-        torrents: {
-          size: CACHE_SIZE_VALIDATOR
-        },
-        storyboards: {
-          size: CACHE_SIZE_VALIDATOR
-        }
-      },
-      signup: {
-        enabled: null,
-        limit: SIGNUP_LIMIT_VALIDATOR,
-        requiresApproval: null,
-        requiresEmailVerification: null,
-        minimumAge: SIGNUP_MINIMUM_AGE_VALIDATOR
-      },
-      import: {
-        videos: {
-          concurrency: CONCURRENCY_VALIDATOR,
-          http: {
-            enabled: null
-          },
-          torrent: {
-            enabled: null
-          }
-        },
-        videoChannelSynchronization: {
-          enabled: null,
-          maxPerUser: MAX_SYNC_PER_USER
-        },
-        users: {
-          enabled: null
-        }
-      },
-      export: {
-        users: {
-          enabled: null,
-          maxUserVideoQuota: EXPORT_MAX_USER_VIDEO_QUOTA_VALIDATOR,
-          exportExpiration: EXPORT_EXPIRATION_VALIDATOR
-        }
-      },
-      trending: {
-        videos: {
-          algorithms: {
-            enabled: null,
-            default: null
-          }
-        }
-      },
-      admin: {
-        email: ADMIN_EMAIL_VALIDATOR
-      },
-      contactForm: {
-        enabled: null
-      },
-      user: {
-        history: {
-          videos: {
-            enabled: null
-          }
-        },
-        videoQuota: USER_VIDEO_QUOTA_VALIDATOR,
-        videoQuotaDaily: USER_VIDEO_QUOTA_DAILY_VALIDATOR
-      },
-      videoChannels: {
-        maxPerUser: MAX_VIDEO_CHANNELS_PER_USER_VALIDATOR
-      },
-      transcoding: {
-        enabled: null,
-        threads: TRANSCODING_THREADS_VALIDATOR,
-        allowAdditionalExtensions: null,
-        allowAudioFiles: null,
-        profile: null,
-        concurrency: CONCURRENCY_VALIDATOR,
-        resolutions: {},
-        alwaysTranscodeOriginalResolution: null,
-        originalFile: {
-          keep: null
-        },
-        hls: {
-          enabled: null,
-          splitAudioAndVideo: null
-        },
-        webVideos: {
-          enabled: null
-        },
-        remoteRunners: {
-          enabled: null
-        },
-        fps: {
-          max: TRANSCODING_MAX_FPS_VALIDATOR
-        }
-      },
-      live: {
-        enabled: null,
-
-        maxDuration: MAX_LIVE_DURATION_VALIDATOR,
-        maxInstanceLives: MAX_INSTANCE_LIVES_VALIDATOR,
-        maxUserLives: MAX_USER_LIVES_VALIDATOR,
-        allowReplay: null,
-        latencySetting: {
-          enabled: null
-        },
-
-        transcoding: {
-          enabled: null,
-          threads: TRANSCODING_THREADS_VALIDATOR,
-          profile: null,
-          resolutions: {},
-          alwaysTranscodeOriginalResolution: null,
-          remoteRunners: {
-            enabled: null
-          },
-          fps: {
-            max: TRANSCODING_MAX_FPS_VALIDATOR
-          }
-        }
-      },
-      videoStudio: {
-        enabled: null,
-        remoteRunners: {
-          enabled: null
-        }
-      },
-      videoTranscription: {
-        enabled: null,
-        remoteRunners: {
-          enabled: null
-        }
-      },
-      videoFile: {
-        update: {
-          enabled: null
-        }
-      },
-      autoBlacklist: {
-        videos: {
-          ofUsers: {
-            enabled: null
-          }
-        }
-      },
-      followers: {
-        instance: {
-          enabled: null,
-          manualApproval: null
-        }
-      },
-      followings: {
-        instance: {
-          autoFollowBack: {
-            enabled: null
-          },
-          autoFollowIndex: {
-            enabled: null,
-            indexUrl: URL_VALIDATOR
-          }
-        }
-      },
-      broadcastMessage: {
-        enabled: null,
-        level: null,
-        dismissable: null,
-        message: null
-      },
-      search: {
-        remoteUri: {
-          users: null,
-          anonymous: null
-        },
-        searchIndex: {
-          enabled: null,
-          url: URL_VALIDATOR,
-          disableLocalSearch: null,
-          isDefaultSearch: null
-        }
-      },
-
-      instanceCustomHomepage: {
-        content: null
-      },
-
-      storyboards: {
-        enabled: null
-      }
-    }
-
-    const defaultValues = {
-      transcoding: {
-        resolutions: {} as { [id: string]: string }
-      },
-      live: {
-        transcoding: {
-          resolutions: {} as { [id: string]: string }
-        }
-      }
-    }
-
-    for (const resolution of this.editConfigurationService.getTranscodingResolutions()) {
-      defaultValues.transcoding.resolutions[resolution.id] = 'false'
-      formGroupData.transcoding.resolutions[resolution.id] = null
-
-      defaultValues.live.transcoding.resolutions[resolution.id] = 'false'
-      formGroupData.live.transcoding.resolutions[resolution.id] = null
-    }
-
-    this.buildForm(formGroupData)
-
-    if (this.route.snapshot.fragment) {
-      this.onNavChange(this.route.snapshot.fragment)
-    }
-
-    this.loadConfigAndUpdateForm()
-    this.loadCategoriesAndLanguages()
-
-    if (!this.isUpdateAllowed()) {
-      this.form.disable()
-    }
-  }
-
-  formValidated () {
-    this.forceCheck()
-    if (!this.form.valid) return
-
-    const value: ComponentCustomConfig = merge(this.customConfig, this.form.getRawValue())
-
-    forkJoin([
-      this.configService.updateCustomConfig(omit(value, 'instanceCustomHomepage')),
-      this.customPage.updateInstanceHomepage(value.instanceCustomHomepage.content)
-    ])
-      .subscribe({
-        next: ([ resConfig ]) => {
-          const instanceCustomHomepage = { content: value.instanceCustomHomepage.content }
-
-          this.customConfig = { ...resConfig, instanceCustomHomepage }
-
-          // Reload general configuration
-          this.serverService.resetConfig()
-            .subscribe(config => {
-              this.serverConfig = config
-            })
-
-          this.updateForm()
-
-          this.notifier.success($localize`Configuration updated.`)
-        },
-
-        error: err => this.notifier.error(err.message)
-      })
-  }
-
-  isUpdateAllowed () {
-    return this.serverConfig.webadmin.configuration.edition.allowed === true
-  }
-
-  hasConsistentOptions () {
-    if (this.hasLiveAllowReplayConsistentOptions()) return true
-
-    return false
-  }
-
-  hasLiveAllowReplayConsistentOptions () {
-    if (
-      this.editConfigurationService.isTranscodingEnabled(this.form) === false &&
-      this.editConfigurationService.isLiveEnabled(this.form) &&
-      this.form.value['live']['allowReplay'] === true
-    ) {
-      return false
-    }
-
-    return true
-  }
-
-  onNavChange (newActiveNav: string) {
-    this.activeNav = newActiveNav
-
-    this.router.navigate([], { fragment: this.activeNav })
-  }
-
-  grabAllErrors () {
-    return this.formReactiveService.grabAllErrors(this.formErrors)
-  }
-
-  private updateForm () {
-    this.form.patchValue(this.customConfig)
-  }
-
-  private loadConfigAndUpdateForm () {
-    forkJoin([
-      this.configService.getCustomConfig(),
-      this.customPage.getInstanceHomepage()
-    ]).subscribe({
-      next: ([ config, homepage ]) => {
-        this.customConfig = { ...config, instanceCustomHomepage: homepage }
-
-        this.updateForm()
-        this.markAllAsDirty()
-      },
-
-      error: err => this.notifier.error(err.message)
-    })
-  }
-
-  private loadCategoriesAndLanguages () {
-    forkJoin([
-      this.serverService.getVideoLanguages(),
-      this.serverService.getVideoCategories()
-    ]).subscribe({
-      next: ([ languages, categories ]) => {
-        this.languageItems = languages.map(l => ({ label: l.label, id: l.id }))
-        this.categoryItems = categories.map(l => ({ label: l.label, id: l.id }))
-      },
-
-      error: err => this.notifier.error(err.message)
-    })
-  }
-}

client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html

@@ -1,32 +0,0 @@
-<ng-container [formGroup]="form()">
-
-  <ng-container formGroupName="instanceCustomHomepage">
-
-    <div class="homepage pt-two-cols mt-5"> <!-- homepage grid -->
-      <div class="title-col">
-        <h2 i18n>INSTANCE HOMEPAGE</h2>
-      </div>
-
-      <div class="content-col">
-
-        <div class="form-group">
-          <label i18n for="instanceCustomHomepageContent">Homepage</label>
-          <div class="label-small-info">
-            <my-custom-markup-help></my-custom-markup-help>
-          </div>
-
-          <my-markdown-textarea
-            inputId="instanceCustomHomepageContent" formControlName="content"
-            [customMarkdownRenderer]="getCustomMarkdownRenderer()" [debounceTime]="500"
-            [formError]="formErrors()['instanceCustomHomepage.content']"
-            dir="ltr" monospace="true"
-          ></my-markdown-textarea>
-
-          <div *ngIf="formErrors().instanceCustomHomepage.content" class="form-error" role="alert">{{ formErrors().instanceCustomHomepage.content }}</div>
-        </div>
-      </div>
-    </div>
-
-  </ng-container>
-
-</ng-container>

client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts

@@ -1,25 +0,0 @@
-import { Component, inject, input } from '@angular/core'
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { NgIf } from '@angular/common'
-import { MarkdownTextareaComponent } from '../../../shared/shared-forms/markdown-textarea.component'
-import { CustomMarkupHelpComponent } from '../../../shared/shared-custom-markup/custom-markup-help.component'
-import { CustomMarkupService } from '@app/shared/shared-custom-markup/custom-markup.service'
-
-@Component({
-  selector: 'my-edit-homepage',
-  templateUrl: './edit-homepage.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ],
-  imports: [ FormsModule, ReactiveFormsModule, CustomMarkupHelpComponent, MarkdownTextareaComponent, NgIf ]
-})
-export class EditHomepageComponent {
-  private customMarkup = inject(CustomMarkupService)
-
-  readonly form = input<FormGroup>(undefined)
-  readonly formErrors = input<any>(undefined)
-
-  customMarkdownRenderer: (text: string) => Promise<HTMLElement>
-
-  getCustomMarkdownRenderer () {
-    return this.customMarkup.getCustomMarkdownRenderer()
-  }
-}

client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts

@@ -1,158 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { HttpErrorResponse } from '@angular/common/http'
-import { Component, OnInit, inject, input } from '@angular/core'
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { RouterLink } from '@angular/router'
-import { Notifier, ServerService } from '@app/core'
-import { genericUploadErrorHandler } from '@app/helpers'
-import { CustomMarkupService } from '@app/shared/shared-custom-markup/custom-markup.service'
-import { SelectRadioComponent } from '@app/shared/shared-forms/select/select-radio.component'
-import { InstanceService } from '@app/shared/shared-main/instance/instance.service'
-import { maxBy } from '@peertube/peertube-core-utils'
-import { ActorImage, HTMLServerConfig } from '@peertube/peertube-models'
-import { SelectOptionsItem } from 'src/types/select-options-item.model'
-import { ActorAvatarEditComponent } from '../../../shared/shared-actor-image-edit/actor-avatar-edit.component'
-import { ActorBannerEditComponent } from '../../../shared/shared-actor-image-edit/actor-banner-edit.component'
-import { CustomMarkupHelpComponent } from '../../../shared/shared-custom-markup/custom-markup-help.component'
-import { MarkdownTextareaComponent } from '../../../shared/shared-forms/markdown-textarea.component'
-import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
-import { SelectCheckboxComponent } from '../../../shared/shared-forms/select/select-checkbox.component'
-import { HelpComponent } from '../../../shared/shared-main/buttons/help.component'
-import { PeerTubeTemplateDirective } from '../../../shared/shared-main/common/peertube-template.directive'
-
-@Component({
-  selector: 'my-edit-instance-information',
-  templateUrl: './edit-instance-information.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ],
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    ActorAvatarEditComponent,
-    ActorBannerEditComponent,
-    SelectRadioComponent,
-    CommonModule,
-    CustomMarkupHelpComponent,
-    MarkdownTextareaComponent,
-    SelectCheckboxComponent,
-    RouterLink,
-    PeertubeCheckboxComponent,
-    PeerTubeTemplateDirective,
-    HelpComponent
-  ]
-})
-export class EditInstanceInformationComponent implements OnInit {
-  private customMarkup = inject(CustomMarkupService)
-  private notifier = inject(Notifier)
-  private instanceService = inject(InstanceService)
-  private server = inject(ServerService)
-
-  readonly form = input<FormGroup>(undefined)
-  readonly formErrors = input<any>(undefined)
-
-  readonly languageItems = input<SelectOptionsItem[]>([])
-  readonly categoryItems = input<SelectOptionsItem[]>([])
-
-  instanceBannerUrl: string
-  instanceAvatars: ActorImage[] = []
-
-  nsfwItems: SelectOptionsItem[] = [
-    {
-      id: 'do_not_list',
-      label: $localize`Hide`
-    },
-    {
-      id: 'warn',
-      label: $localize`Warn`
-    },
-    {
-      id: 'blur',
-      label: $localize`Blur`
-    },
-    {
-      id: 'display',
-      label: $localize`Display`
-    }
-  ]
-
-  private serverConfig: HTMLServerConfig
-
-  get instanceName () {
-    return this.server.getHTMLConfig().instance.name
-  }
-
-  ngOnInit () {
-    this.serverConfig = this.server.getHTMLConfig()
-
-    this.updateActorImages()
-  }
-
-  getCustomMarkdownRenderer () {
-    return this.customMarkup.getCustomMarkdownRenderer()
-  }
-
-  onBannerChange (formData: FormData) {
-    this.instanceService.updateInstanceBanner(formData)
-      .subscribe({
-        next: () => {
-          this.notifier.success($localize`Banner changed.`)
-
-          this.resetActorImages()
-        },
-
-        error: (err: HttpErrorResponse) => genericUploadErrorHandler({ err, name: $localize`banner`, notifier: this.notifier })
-      })
-  }
-
-  onBannerDelete () {
-    this.instanceService.deleteInstanceBanner()
-      .subscribe({
-        next: () => {
-          this.notifier.success($localize`Banner deleted.`)
-
-          this.resetActorImages()
-        },
-
-        error: err => this.notifier.error(err.message)
-      })
-  }
-
-  onAvatarChange (formData: FormData) {
-    this.instanceService.updateInstanceAvatar(formData)
-      .subscribe({
-        next: () => {
-          this.notifier.success($localize`Avatar changed.`)
-
-          this.resetActorImages()
-        },
-
-        error: (err: HttpErrorResponse) => genericUploadErrorHandler({ err, name: $localize`avatar`, notifier: this.notifier })
-      })
-  }
-
-  onAvatarDelete () {
-    this.instanceService.deleteInstanceAvatar()
-      .subscribe({
-        next: () => {
-          this.notifier.success($localize`Avatar deleted.`)
-
-          this.resetActorImages()
-        },
-
-        error: err => this.notifier.error(err.message)
-      })
-  }
-
-  private updateActorImages () {
-    this.instanceBannerUrl = maxBy(this.serverConfig.instance.banners, 'width')?.path
-    this.instanceAvatars = this.serverConfig.instance.avatars
-  }
-
-  private resetActorImages () {
-    this.server.resetConfig()
-      .subscribe(config => {
-        this.serverConfig = config
-
-        this.updateActorImages()
-      })
-  }
-}

client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.ts

@@ -1,112 +0,0 @@
-import { SelectOptionsItem } from 'src/types/select-options-item.model'
-import { Component, OnChanges, OnInit, SimpleChanges, inject, input } from '@angular/core'
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { HTMLServerConfig } from '@peertube/peertube-models'
-import { ConfigService } from '../shared/config.service'
-import { EditConfigurationService, ResolutionOption } from './edit-configuration.service'
-import { SelectCustomValueComponent } from '../../../shared/shared-forms/select/select-custom-value.component'
-import { RouterLink } from '@angular/router'
-import { SelectOptionsComponent } from '../../../shared/shared-forms/select/select-options.component'
-import { NgClass, NgIf, NgFor } from '@angular/common'
-import { PeerTubeTemplateDirective } from '../../../shared/shared-main/common/peertube-template.directive'
-import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
-
-@Component({
-  selector: 'my-edit-live-configuration',
-  templateUrl: './edit-live-configuration.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ],
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    PeertubeCheckboxComponent,
-    PeerTubeTemplateDirective,
-    NgClass,
-    NgIf,
-    SelectOptionsComponent,
-    NgFor,
-    RouterLink,
-    SelectCustomValueComponent
-  ]
-})
-export class EditLiveConfigurationComponent implements OnInit, OnChanges {
-  private configService = inject(ConfigService)
-  private editConfigurationService = inject(EditConfigurationService)
-
-  readonly form = input<FormGroup>(undefined)
-  readonly formErrors = input<any>(undefined)
-  readonly serverConfig = input<HTMLServerConfig>(undefined)
-
-  transcodingThreadOptions: SelectOptionsItem[] = []
-  transcodingProfiles: SelectOptionsItem[] = []
-
-  liveMaxDurationOptions: SelectOptionsItem[] = []
-  liveResolutions: ResolutionOption[] = []
-
-  ngOnInit () {
-    this.transcodingThreadOptions = this.configService.transcodingThreadOptions
-
-    this.liveMaxDurationOptions = [
-      { id: -1, label: $localize`No limit` },
-      { id: 1000 * 3600, label: $localize`1 hour` },
-      { id: 1000 * 3600 * 3, label: $localize`3 hours` },
-      { id: 1000 * 3600 * 5, label: $localize`5 hours` },
-      { id: 1000 * 3600 * 10, label: $localize`10 hours` }
-    ]
-
-    this.liveResolutions = this.editConfigurationService.getTranscodingResolutions()
-  }
-
-  ngOnChanges (changes: SimpleChanges) {
-    if (changes['serverConfig']) {
-      this.transcodingProfiles = this.buildAvailableTranscodingProfile()
-    }
-  }
-
-  buildAvailableTranscodingProfile () {
-    const profiles = this.serverConfig().live.transcoding.availableProfiles
-
-    return profiles.map(p => {
-      if (p === 'default') {
-        return { id: p, label: $localize`Default`, description: $localize`x264, targeting maximum device compatibility` }
-      }
-
-      return { id: p, label: p }
-    })
-  }
-
-  getResolutionKey (resolution: string) {
-    return 'live.transcoding.resolutions.' + resolution
-  }
-
-  getLiveRTMPPort () {
-    return this.serverConfig().live.rtmp.port
-  }
-
-  isLiveEnabled () {
-    return this.editConfigurationService.isLiveEnabled(this.form())
-  }
-
-  isRemoteRunnerLiveEnabled () {
-    return this.editConfigurationService.isRemoteRunnerLiveEnabled(this.form())
-  }
-
-  getDisabledLiveClass () {
-    return { 'disabled-checkbox-extra': !this.isLiveEnabled() }
-  }
-
-  getDisabledLiveTranscodingClass () {
-    return { 'disabled-checkbox-extra': !this.isLiveEnabled() || !this.isLiveTranscodingEnabled() }
-  }
-
-  getDisabledLiveLocalTranscodingClass () {
-    return { 'disabled-checkbox-extra': !this.isLiveEnabled() || !this.isLiveTranscodingEnabled() || this.isRemoteRunnerLiveEnabled() }
-  }
-
-  isLiveTranscodingEnabled () {
-    return this.editConfigurationService.isLiveTranscodingEnabled(this.form())
-  }
-
-  getTotalTranscodingThreads () {
-    return this.editConfigurationService.getTotalTranscodingThreads(this.form())
-  }
-}

client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts

@@ -1,159 +0,0 @@
-import { NgClass, NgFor, NgIf } from '@angular/common'
-import { Component, OnChanges, OnInit, SimpleChanges, inject, input } from '@angular/core'
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { RouterLink } from '@angular/router'
-import { Notifier } from '@app/core'
-import { HTMLServerConfig } from '@peertube/peertube-models'
-import { SelectOptionsItem } from 'src/types/select-options-item.model'
-import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
-import { SelectCustomValueComponent } from '../../../shared/shared-forms/select/select-custom-value.component'
-import { SelectOptionsComponent } from '../../../shared/shared-forms/select/select-options.component'
-import { PeerTubeTemplateDirective } from '../../../shared/shared-main/common/peertube-template.directive'
-import { ConfigService } from '../shared/config.service'
-import { EditConfigurationService, ResolutionOption } from './edit-configuration.service'
-
-@Component({
-  selector: 'my-edit-vod-transcoding',
-  templateUrl: './edit-vod-transcoding.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ],
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    PeertubeCheckboxComponent,
-    PeerTubeTemplateDirective,
-    NgClass,
-    NgFor,
-    NgIf,
-    RouterLink,
-    SelectCustomValueComponent,
-    SelectOptionsComponent
-  ]
-})
-export class EditVODTranscodingComponent implements OnInit, OnChanges {
-  private configService = inject(ConfigService)
-  private editConfigurationService = inject(EditConfigurationService)
-  private notifier = inject(Notifier)
-
-  readonly form = input<FormGroup>(undefined)
-  readonly formErrors = input<any>(undefined)
-  readonly serverConfig = input<HTMLServerConfig>(undefined)
-
-  transcodingThreadOptions: SelectOptionsItem[] = []
-  transcodingProfiles: SelectOptionsItem[] = []
-  resolutions: ResolutionOption[] = []
-
-  additionalVideoExtensions = ''
-
-  ngOnInit () {
-    this.transcodingThreadOptions = this.configService.transcodingThreadOptions
-    this.resolutions = this.editConfigurationService.getTranscodingResolutions()
-
-    this.checkTranscodingFields()
-  }
-
-  ngOnChanges (changes: SimpleChanges) {
-    if (changes['serverConfig']) {
-      this.transcodingProfiles = this.buildAvailableTranscodingProfile()
-
-      this.additionalVideoExtensions = this.serverConfig().video.file.extensions.join(' ')
-    }
-  }
-
-  buildAvailableTranscodingProfile () {
-    const profiles = this.serverConfig().transcoding.availableProfiles
-
-    return profiles.map(p => {
-      if (p === 'default') {
-        return { id: p, label: $localize`Default`, description: $localize`x264, targeting maximum device compatibility` }
-      }
-
-      return { id: p, label: p }
-    })
-  }
-
-  getResolutionKey (resolution: string) {
-    return 'transcoding.resolutions.' + resolution
-  }
-
-  isRemoteRunnerVODEnabled () {
-    return this.editConfigurationService.isRemoteRunnerVODEnabled(this.form())
-  }
-
-  isTranscodingEnabled () {
-    return this.editConfigurationService.isTranscodingEnabled(this.form())
-  }
-
-  isHLSEnabled () {
-    return this.editConfigurationService.isHLSEnabled(this.form())
-  }
-
-  isStudioEnabled () {
-    return this.editConfigurationService.isStudioEnabled(this.form())
-  }
-
-  getTranscodingDisabledClass () {
-    return { 'disabled-checkbox-extra': !this.isTranscodingEnabled() }
-  }
-
-  getHLSDisabledClass () {
-    return { 'disabled-checkbox-extra': !this.isHLSEnabled() }
-  }
-
-  getLocalTranscodingDisabledClass () {
-    return { 'disabled-checkbox-extra': !this.isTranscodingEnabled() || this.isRemoteRunnerVODEnabled() }
-  }
-
-  getStudioDisabledClass () {
-    return { 'disabled-checkbox-extra': !this.isStudioEnabled() }
-  }
-
-  getTotalTranscodingThreads () {
-    return this.editConfigurationService.getTotalTranscodingThreads(this.form())
-  }
-
-  private checkTranscodingFields () {
-    const transcodingControl = this.form().get('transcoding.enabled')
-    const videoStudioControl = this.form().get('videoStudio.enabled')
-    const hlsControl = this.form().get('transcoding.hls.enabled')
-    const webVideosControl = this.form().get('transcoding.webVideos.enabled')
-
-    webVideosControl.valueChanges
-      .subscribe(newValue => {
-        if (newValue === false && hlsControl.value === false) {
-          hlsControl.setValue(true)
-
-          this.notifier.info(
-            $localize`Automatically enable HLS transcoding because at least 1 output format must be enabled when transcoding is enabled`,
-            '',
-            10000
-          )
-        }
-      })
-
-    hlsControl.valueChanges
-      .subscribe(newValue => {
-        if (newValue === false && webVideosControl.value === false) {
-          webVideosControl.setValue(true)
-
-          this.notifier.info(
-            // eslint-disable-next-line max-len
-            $localize`Automatically enable Web Videos transcoding because at least 1 output format must be enabled when transcoding is enabled`,
-            '',
-            10000
-          )
-        }
-      })
-
-    transcodingControl.valueChanges
-      .subscribe(newValue => {
-        if (newValue === false) {
-          videoStudioControl.setValue(false)
-        }
-      })
-
-    transcodingControl.updateValueAndValidity()
-    webVideosControl.updateValueAndValidity()
-    videoStudioControl.updateValueAndValidity()
-    hlsControl.updateValueAndValidity()
-  }
-}

client/src/app/+admin/config/edit-custom-config/index.ts

@@ -1,8 +0,0 @@
-export * from './edit-advanced-configuration.component'
-export * from './edit-basic-configuration.component'
-export * from './edit-configuration.service'
-export * from './edit-custom-config.component'
-export * from './edit-homepage.component'
-export * from './edit-instance-information.component'
-export * from './edit-live-configuration.component'
-export * from './edit-vod-transcoding.component'

client/src/app/+admin/config/index.ts

@@ -1,2 +1,2 @@
-export * from './edit-custom-config'
+export * from './pages'
 export * from './config.routes'

client/src/app/+admin/config/pages/admin-config-advanced.component.html

@@ -0,0 +1,112 @@
+<my-admin-save-bar i18n-title title="Advanced configuration" (save)="save()" [form]="form" [formErrors]="formErrors"></my-admin-save-bar>
+
+<form [formGroup]="form">
+
+  <div class="pt-two-cols">
+
+    <div class="title-col">
+      <h2 i18n>CACHE</h2>
+      <div i18n class="inner-form-description">
+        Some files are not federated, and fetched when necessary. Define their caching policies.
+      </div>
+    </div>
+
+    <div class="content-col">
+      <ng-container formGroupName="cache">
+        <div class="form-group" formGroupName="previews">
+          <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
+
+          <div class="number-with-unit">
+            <input
+              type="number" min="0" id="cachePreviewsSize" class="form-control"
+              formControlName="size" [ngClass]="{ 'input-error': formErrors.cache.previews.size }"
+            >
+            <span i18n>{getCacheSize('previews'), plural, =1 {cached image} other {cached images}}</span>
+          </div>
+
+          <div *ngIf="formErrors.cache.previews.size" class="form-error" role="alert">{{ formErrors.cache.previews.size }}</div>
+        </div>
+
+        <div class="form-group" formGroupName="captions">
+          <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
+
+          <div class="number-with-unit">
+            <input
+              type="number" min="0" id="cacheCaptionsSize" class="form-control"
+              formControlName="size" [ngClass]="{ 'input-error': formErrors.cache.captions.size }"
+            >
+            <span i18n>{getCacheSize('captions'), plural, =1 {cached caption} other {cached captions}}</span>
+          </div>
+
+          <div *ngIf="formErrors.cache.captions.size" class="form-error" role="alert">{{ formErrors.cache.captions.size }}</div>
+        </div>
+
+        <div class="form-group" formGroupName="torrents">
+          <label i18n for="cacheTorrentsSize">Number of video torrents to keep in cache</label>
+
+          <div class="number-with-unit">
+            <input
+              type="number" min="0" id="cacheTorrentsSize" class="form-control"
+              formControlName="size" [ngClass]="{ 'input-error': formErrors.cache.torrents.size }"
+            >
+            <span i18n>{getCacheSize('torrents'), plural, =1 {cached torrent} other {cached torrents}}</span>
+          </div>
+
+          <div *ngIf="formErrors.cache.torrents.size" class="form-error" role="alert">{{ formErrors.cache.torrents.size }}</div>
+        </div>
+
+        <div class="form-group" formGroupName="storyboards">
+          <label i18n for="cacheTorrentsSize">Number of video storyboard images to keep in cache</label>
+
+          <div class="number-with-unit">
+            <input
+              type="number" min="0" id="cacheStoryboardsSize" class="form-control"
+              formControlName="size" [ngClass]="{ 'input-error': formErrors.cache.storyboards.size }"
+            >
+            <span i18n>{getCacheSize('storyboards'), plural, =1 {cached storyboard} other {cached storyboards}}</span>
+          </div>
+
+          <div *ngIf="formErrors.cache.storyboards.size" class="form-error" role="alert">{{ formErrors.cache.storyboards.size }}</div>
+        </div>
+      </ng-container>
+
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>TWITTER/X</h2>
+
+      <div i18n class="inner-form-description">
+        Extra configuration required by Twitter/X. All other social media (Facebook, Mastodon, etc.) are supported out of the box.
+      </div>
+    </div>
+
+    <div class="content-col">
+
+      <ng-container formGroupName="services">
+        <ng-container formGroupName="twitter">
+
+          <div class="form-group">
+            <label for="servicesTwitterUsername" i18n>Your Twitter/X username</label>
+
+            <div class="form-group-description">
+              <p i18n class="mb-0">Indicates the Twitter/X account for the website or platform where the content was published.</p>
+
+              <p i18n>This is just an extra information injected in PeerTube HTML that is required by Twitter/X. If you don't have a Twitter/X account, just leave the default value.</p>
+            </div>
+
+            <input
+              type="text" id="servicesTwitterUsername" class="form-control"
+              formControlName="username" [ngClass]="{ 'input-error': formErrors.services.twitter.username }"
+            >
+
+            <div *ngIf="formErrors.services.twitter.username" class="form-error" role="alert">{{ formErrors.services.twitter.username }}</div>
+          </div>
+
+        </ng-container>
+      </ng-container>
+
+    </div>
+  </div>
+</form>

client/src/app/+admin/config/pages/admin-config-advanced.component.ts

@@ -0,0 +1,129 @@
+import { CommonModule } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ActivatedRoute } from '@angular/router'
+import { CanComponentDeactivate } from '@app/core'
+import { CACHE_SIZE_VALIDATOR, SERVICES_TWITTER_USERNAME_VALIDATOR } from '@app/shared/form-validators/custom-config-validators'
+import {
+  BuildFormArgumentTyped,
+  FormDefaultTyped,
+  FormReactiveErrorsTyped,
+  FormReactiveMessagesTyped
+} from '@app/shared/form-validators/form-validator.model'
+import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
+import { CustomConfig } from '@peertube/peertube-models'
+import { Subscription } from 'rxjs'
+import { AdminConfigService } from '../../../shared/shared-admin/admin-config.service'
+import { AdminSaveBarComponent } from '../shared/admin-save-bar.component'
+
+type Form = {
+  services: FormGroup<{
+    twitter: FormGroup<{
+      username: FormControl<string>
+    }>
+  }>
+
+  cache: FormGroup<{
+    previews: FormGroup<{
+      size: FormControl<number>
+    }>
+    captions: FormGroup<{
+      size: FormControl<number>
+    }>
+    torrents: FormGroup<{
+      size: FormControl<number>
+    }>
+    storyboards: FormGroup<{
+      size: FormControl<number>
+    }>
+  }>
+}
+
+@Component({
+  selector: 'my-admin-config-advanced',
+  templateUrl: './admin-config-advanced.component.html',
+  styleUrls: [ './admin-config-common.scss' ],
+  imports: [ CommonModule, FormsModule, ReactiveFormsModule, AdminSaveBarComponent ]
+})
+export class AdminConfigAdvancedComponent implements OnInit, OnDestroy, CanComponentDeactivate {
+  private route = inject(ActivatedRoute)
+  private formReactiveService = inject(FormReactiveService)
+  private adminConfigService = inject(AdminConfigService)
+
+  form: FormGroup<Form>
+  formErrors: FormReactiveErrorsTyped<Form> = {}
+  validationMessages: FormReactiveMessagesTyped<Form> = {}
+
+  private customConfig: CustomConfig
+  private customConfigSub: Subscription
+
+  ngOnInit () {
+    this.customConfig = this.route.parent.snapshot.data['customConfig']
+
+    this.buildForm()
+
+    this.customConfigSub = this.adminConfigService.getCustomConfigReloadedObs()
+      .subscribe(customConfig => {
+        this.customConfig = customConfig
+
+        this.form.patchValue(this.customConfig)
+      })
+  }
+
+  ngOnDestroy () {
+    if (this.customConfigSub) this.customConfigSub.unsubscribe()
+  }
+
+  canDeactivate () {
+    return { canDeactivate: !this.form.dirty }
+  }
+
+  private buildForm () {
+    const obj: BuildFormArgumentTyped<Form> = {
+      services: {
+        twitter: {
+          username: SERVICES_TWITTER_USERNAME_VALIDATOR
+        }
+      },
+      cache: {
+        previews: {
+          size: CACHE_SIZE_VALIDATOR
+        },
+        captions: {
+          size: CACHE_SIZE_VALIDATOR
+        },
+        torrents: {
+          size: CACHE_SIZE_VALIDATOR
+        },
+        storyboards: {
+          size: CACHE_SIZE_VALIDATOR
+        }
+      }
+    }
+
+    const defaultValues: FormDefaultTyped<Form> = this.customConfig
+
+    const {
+      form,
+      formErrors,
+      validationMessages
+    } = this.formReactiveService.buildForm<Form>(obj, defaultValues)
+
+    this.form = form
+    this.formErrors = formErrors
+    this.validationMessages = validationMessages
+  }
+
+  getCacheSize (type: 'captions' | 'previews' | 'torrents' | 'storyboards') {
+    return this.form.value.cache[type].size
+  }
+
+  save () {
+    this.adminConfigService.saveAndUpdateCurrent({
+      currentConfig: this.customConfig,
+      form: this.form,
+      formConfig: this.form.value,
+      success: $localize`Advanced configuration updated.`
+    })
+  }
+}

client/src/app/+admin/config/pages/admin-config-common.scss

@@ -0,0 +1,83 @@
+@use "_variables" as *;
+@use "_mixins" as *;
+@use "_form-mixins" as *;
+
+$form-base-input-width: 340px;
+$form-max-width: 500px;
+
+form {
+  padding-bottom: 1.5rem;
+}
+
+my-markdown-textarea {
+  display: block;
+  max-width: $form-max-width;
+}
+
+.homepage my-markdown-textarea {
+  display: block;
+  max-width: 100%;
+
+  ::ng-deep textarea {
+    height: 300px !important;
+  }
+}
+
+input[type="text"],
+input[type="number"] {
+  @include peertube-input-text($form-base-input-width);
+}
+
+input[type="checkbox"] {
+  @include peertube-checkbox;
+}
+
+.peertube-select-container {
+  @include peertube-select-container($form-base-input-width);
+}
+
+my-select-videos-sort,
+my-select-videos-scope,
+my-select-checkbox,
+my-select-options,
+my-select-player-theme,
+my-select-custom-value {
+  display: block;
+
+  @include responsive-width($form-base-input-width);
+}
+
+.inner-form-description {
+  font-size: 14px;
+  margin-bottom: 1rem;
+  color: pvar(--fg-300);
+}
+
+textarea {
+  max-width: 100%;
+  display: block;
+
+  @include peertube-textarea(500px, 150px);
+
+  &.small {
+    height: 75px;
+  }
+}
+
+.disabled-checkbox-extra {
+  &,
+  ::ng-deep label {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+my-actor-banner-edit {
+  max-width: $form-max-width;
+}
+
+h4 {
+  font-weight: $font-bold;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+}

client/src/app/+admin/config/pages/admin-config-customization.component.html

@@ -0,0 +1,216 @@
+<my-admin-save-bar i18n-title title="Platform customization" (save)="save()" [form]="form" [formErrors]="formErrors"></my-admin-save-bar>
+
+<form [formGroup]="form">
+  <div class="pt-two-cols">
+    <div class="title-col">
+      <h2 i18n>APPEARANCE</h2>
+    </div>
+
+    <div class="content-col">
+      <div class="form-group" formGroupName="theme">
+        <label i18n for="themeDefault">Theme</label>
+
+        <my-select-options formControlName="default" inputId="themeDefault" [items]="availableThemes"></my-select-options>
+      </div>
+
+      <ng-container formGroupName="client">
+        <ng-container formGroupName="videos">
+          <div class="form-group" formGroupName="miniature">
+            <my-peertube-checkbox
+              inputName="clientVideosMiniaturePreferAuthorDisplayName"
+              formControlName="preferAuthorDisplayName"
+              i18n-labelText
+              labelText="Prefer author display name in video miniature"
+            ></my-peertube-checkbox>
+          </div>
+        </ng-container>
+      </ng-container>
+
+      <ng-container formGroupName="defaults">
+        <ng-container formGroupName="player">
+          <div class="form-group">
+            <label i18n for="defaultsPlayerTheme">Player Theme</label>
+
+            <my-select-player-theme mode="instance" formControlName="theme" inputId="defaultsPlayerTheme"></my-select-player-theme>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>CUSTOMIZATION</h2>
+
+      <div i18n class="inner-form-description">
+        Use <a class="link-primary" routerLink="/admin/settings/plugins">plugins & themes</a> for more involved changes
+      </div>
+    </div>
+
+    <div class="content-col">
+      <ng-template #alertIntro>
+        <div i18n>UI customization only applies if the user is using the default platform theme.</div>
+      </ng-template>
+
+      @if (getCurrentThemeName() !== getDefaultThemeName()) {
+        <my-alert type="warning">
+          <ng-template *ngTemplateOutlet="alertIntro"></ng-template>
+
+          <div i18n>You can't preview the changes because you aren't using your platform's default theme.</div>
+          <div i18n>Current theme: <strong>{{ getCurrentThemeLabel() }}</strong></div>
+          <div i18n>Platform theme: <strong>{{ getDefaultThemeLabel() }}</strong>.</div>
+        </my-alert>
+      } @else {
+        <my-alert type="info">
+          <ng-template *ngTemplateOutlet="alertIntro"></ng-template>
+
+          <div i18n>You can preview your UI customization but <strong>don't forget to save your changes</strong> once you are happy with the results.</div>
+        </my-alert>
+      }
+
+      <div class="form-group" formGroupName="theme">
+        <ng-container formGroupName="customization">
+          @for (field of customizationFormFields; track field.name) {
+            <div class="form-group">
+              <label [for]="field.inputId">{{ field.label }}</label>
+
+              <button
+                *ngIf="!hasDefaultCustomizationValue(field.name)"
+                type="button"
+                i18n
+                class="reset-button reset-button-small"
+                (click)="resetCustomizationField(field.name)"
+              >
+                Reset
+              </button>
+
+              <div *ngIf="field.description" class="form-group-description">{{ field.description }}</div>
+
+              @if (field.type === 'color') {
+                <p-colorpicker class="d-block" [inputId]="field.inputId" [formControlName]="field.name" />
+              } @else if (field.type === 'radius') {
+                <my-select-custom-value
+                  [labelId]="field.inputId"
+                  [inputId]="field.inputId"
+                  [items]="field.items"
+                  [formControlName]="field.name"
+                  inputType="text"
+                  [clearable]="false"
+                ></my-select-custom-value>
+              } @else {
+                <input
+                  type="text"
+                  [id]="field.inputId"
+                  [name]="field.inputId"
+                  class="form-control"
+                  [formControlName]="field.name"
+                  [ngClass]="{ 'input-error': formErrors.theme.customization[field.name]}"
+                >
+              }
+            </div>
+          }
+        </ng-container>
+      </div>
+    </div>
+  </div>
+
+  <div class="pt-two-cols">
+    <div class="title-col">
+      <h2 i18n>EMAIL</h2>
+    </div>
+
+    <ng-container formGroupName="email">
+      <div class="content-col">
+        <div class="form-group" formGroupName="subject">
+          <label i18n for="emailSubjectPrefix">Subject prefix</label>
+          <div class="form-group-description" i18n>Support <pre class="d-inline">{{ '{{instanceName}}' }}</pre> template variable</div>
+
+          <input
+            type="text" id="emailSubjectPrefix" class="form-control"
+            formControlName="prefix" [ngClass]="{ 'input-error': formErrors.email.subject.prefix }"
+          >
+
+          <div *ngIf="formErrors.email.subject.prefix" class="form-error" role="alert">{{ formErrors.email.subject.prefix }}</div>
+        </div>
+
+        <div class="form-group" formGroupName="body">
+          <label i18n for="emailBodySignature">Body signature</label>
+          <div class="form-group-description" i18n>Support <pre class="d-inline">{{ '{{instanceName}}' }}</pre> template variable</div>
+
+          <input
+            type="text" id="emailBodySignature" class="form-control"
+            formControlName="signature" [ngClass]="{ 'input-error': formErrors.email.body.signature }"
+          >
+
+          <div *ngIf="formErrors.email.body.signature" class="form-error" role="alert">{{ formErrors.email.body.signature }}</div>
+        </div>
+      </div>
+    </ng-container>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <div class="anchor" id="customizations"></div>
+      <h2 i18n>ADVANCED</h2>
+      <div i18n class="inner-form-description">
+        Advanced modifications to your PeerTube platform if creating a plugin or a theme is overkill.
+      </div>
+    </div>
+
+    <div class="content-col">
+      <ng-container formGroupName="instance">
+        <ng-container formGroupName="customizations">
+          <div class="form-group">
+            <label i18n for="customizationJavascript">JavaScript</label>
+            <my-help>
+              <ng-container i18n>
+                <p class="mb-2">Write JavaScript code directly. Example:</p>
+                <pre>console.log('my instance is amazing');</pre>
+              </ng-container>
+            </my-help>
+
+            <textarea
+              id="customizationJavascript"
+              formControlName="javascript"
+              class="form-control"
+              dir="ltr"
+              [ngClass]="{ 'input-error': formErrors.instance.customizations.javascript }"
+            ></textarea>
+
+            <div *ngIf="formErrors.instance.customizations.javascript" class="form-error" role="alert">{{ formErrors.instance.customizations.javascript }}</div>
+          </div>
+
+          <div class="form-group">
+            <label for="customizationCSS">CSS</label>
+
+            <my-help>
+              <ng-container i18n>
+                <p class="mb-2">Write CSS code directly. Example:</p>
+                <pre>
+  #custom-css {{ '{' }}
+  color: red;
+  {{ '}' }}
+  </pre>
+                <p class="mb-2">Prepend with <em>#custom-css</em> to override styles. Example:</p>
+                <pre>
+  #custom-css .logged-in-email {{ '{' }}
+  color: red;
+  {{ '}' }}
+  </pre>
+              </ng-container>
+            </my-help>
+
+            <textarea
+              id="customizationCSS"
+              formControlName="css"
+              class="form-control"
+              dir="ltr"
+              [ngClass]="{ 'input-error': formErrors.instance.customizations.css }"
+            ></textarea>
+            <div *ngIf="formErrors.instance.customizations.css" class="form-error" role="alert">{{ formErrors.instance.customizations.css }}</div>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+</form>

client/src/app/+admin/config/pages/admin-config-customization.component.ts

@@ -0,0 +1,404 @@
+import { CommonModule } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, ValueChangeEvent } from '@angular/forms'
+import { ActivatedRoute, RouterModule } from '@angular/router'
+import { CanComponentDeactivate, ServerService, ThemeService } from '@app/core'
+import { BuildFormArgumentTyped, FormDefaultTyped, FormReactiveMessagesTyped } from '@app/shared/form-validators/form-validator.model'
+import { FormReactiveErrorsTyped, FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
+import { PeertubeCheckboxComponent } from '@app/shared/shared-forms/peertube-checkbox.component'
+import { SelectCustomValueComponent } from '@app/shared/shared-forms/select/select-custom-value.component'
+import { SelectOptionsComponent } from '@app/shared/shared-forms/select/select-options.component'
+import { objectKeysTyped } from '@peertube/peertube-core-utils'
+import { CustomConfig, PlayerTheme } from '@peertube/peertube-models'
+import { capitalizeFirstLetter } from '@root-helpers/string'
+import { ColorPaletteThemeConfig, ThemeCustomizationKey } from '@root-helpers/theme-manager'
+import debug from 'debug'
+import { ColorPickerModule } from 'primeng/colorpicker'
+import { debounceTime, Subscription } from 'rxjs'
+import { SelectOptionsItem } from 'src/types'
+import { AdminConfigService } from '../../../shared/shared-admin/admin-config.service'
+import { HelpComponent } from '../../../shared/shared-main/buttons/help.component'
+import { AlertComponent } from '../../../shared/shared-main/common/alert.component'
+import { AdminSaveBarComponent } from '../shared/admin-save-bar.component'
+import { SelectPlayerThemeComponent } from '@app/shared/shared-forms/select/select-player-theme.component'
+
+const debugLogger = debug('peertube:config')
+
+type Form = {
+  instance: FormGroup<{
+    customizations: FormGroup<{
+      css: FormControl<string>
+      javascript: FormControl<string>
+    }>
+  }>
+
+  client: FormGroup<{
+    videos: FormGroup<{
+      miniature: FormGroup<{
+        preferAuthorDisplayName: FormControl<boolean>
+      }>
+    }>
+  }>
+
+  email: FormGroup<{
+    subject: FormGroup<{
+      prefix: FormControl<string>
+    }>
+
+    body: FormGroup<{
+      signature: FormControl<string>
+    }>
+  }>
+
+  theme: FormGroup<{
+    default: FormControl<string>
+
+    customization: FormGroup<{
+      primaryColor: FormControl<string>
+      foregroundColor: FormControl<string>
+      backgroundColor: FormControl<string>
+      backgroundSecondaryColor: FormControl<string>
+      menuForegroundColor: FormControl<string>
+      menuBackgroundColor: FormControl<string>
+      menuBorderRadius: FormControl<string>
+      headerForegroundColor: FormControl<string>
+      headerBackgroundColor: FormControl<string>
+      inputBorderRadius: FormControl<string>
+    }>
+  }>
+
+  defaults: FormGroup<{
+    player: FormGroup<{
+      theme: FormControl<PlayerTheme>
+    }>
+  }>
+}
+
+type FieldType = 'color' | 'radius'
+
+@Component({
+  selector: 'my-admin-config-customization',
+  templateUrl: './admin-config-customization.component.html',
+  styleUrls: [ './admin-config-common.scss' ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    ReactiveFormsModule,
+    AdminSaveBarComponent,
+    ColorPickerModule,
+    AlertComponent,
+    SelectOptionsComponent,
+    HelpComponent,
+    PeertubeCheckboxComponent,
+    SelectCustomValueComponent,
+    SelectPlayerThemeComponent
+  ]
+})
+export class AdminConfigCustomizationComponent implements OnInit, OnDestroy, CanComponentDeactivate {
+  private formReactiveService = inject(FormReactiveService)
+  private adminConfigService = inject(AdminConfigService)
+  private serverService = inject(ServerService)
+  private themeService = inject(ThemeService)
+  private route = inject(ActivatedRoute)
+
+  form: FormGroup<Form>
+  formErrors: FormReactiveErrorsTyped<Form> = {}
+  validationMessages: FormReactiveMessagesTyped<Form> = {}
+
+  customizationFormFields: {
+    label: string
+    inputId: string
+    name: ThemeCustomizationKey
+    description?: string
+    type: FieldType
+    items?: SelectOptionsItem[]
+  }[] = []
+
+  availableThemes: SelectOptionsItem[]
+  availablePlayerThemes: SelectOptionsItem<PlayerTheme>[] = []
+
+  private customizationResetFields = new Set<ThemeCustomizationKey>()
+  private customConfig: CustomConfig
+
+  private customConfigSub: Subscription
+
+  private readonly formFieldsObject: Record<
+    ThemeCustomizationKey,
+    { label: string, description?: string, type: FieldType, items?: SelectOptionsItem[] }
+  > = {
+    primaryColor: { label: $localize`Primary color`, type: 'color' },
+    foregroundColor: { label: $localize`Foreground color`, type: 'color' },
+    backgroundColor: { label: $localize`Background color`, type: 'color' },
+    backgroundSecondaryColor: {
+      label: $localize`Secondary background color`,
+      description: $localize`Used as a background for inputs, overlays...`,
+      type: 'color'
+    },
+    menuForegroundColor: { label: $localize`Menu foreground color`, type: 'color' },
+    menuBackgroundColor: { label: $localize`Menu background color`, type: 'color' },
+
+    menuBorderRadius: {
+      label: $localize`Menu rounding`,
+      type: 'radius',
+      items: [
+        { id: '0', label: $localize`Not rounded` },
+        { id: '6px', label: $localize`Slightly rounded` },
+        { id: '14px', label: $localize`Moderately rounded (default)` },
+        { id: '60px', label: $localize`Rounded` }
+      ]
+    },
+
+    headerForegroundColor: { label: $localize`Header foreground color`, type: 'color' },
+    headerBackgroundColor: { label: $localize`Header background color`, type: 'color' },
+
+    inputBorderRadius: {
+      label: $localize`Input rounding`,
+      type: 'radius',
+      items: [
+        { id: '0', label: $localize`Not rounded` },
+        { id: '4px', label: $localize`Slightly rounded (default)` },
+        { id: '10px', label: $localize`Moderately rounded` },
+        { id: '20px', label: $localize`Rounded` }
+      ]
+    }
+  }
+
+  ngOnInit () {
+    this.customConfig = this.route.parent.snapshot.data['customConfig']
+
+    this.availableThemes = [
+      this.themeService.getDefaultThemeItem(),
+
+      ...this.themeService.buildAvailableThemes()
+    ]
+
+    this.availablePlayerThemes = [
+      { id: 'galaxy', label: $localize`Galaxy`, description: $localize`Original theme` },
+      { id: 'lucide', label: $localize`Lucide`, description: $localize`A clean and modern theme` }
+    ]
+
+    this.buildForm()
+    this.subscribeToCustomizationChanges()
+
+    this.customConfigSub = this.adminConfigService.getCustomConfigReloadedObs()
+      .subscribe(customConfig => {
+        this.customConfig = customConfig
+
+        this.form.patchValue(this.getDefaultFormValues(), { emitEvent: false })
+      })
+  }
+
+  ngOnDestroy () {
+    if (this.customConfigSub) this.customConfigSub.unsubscribe()
+  }
+
+  canDeactivate () {
+    return { canDeactivate: !this.form.dirty }
+  }
+
+  private subscribeToCustomizationChanges () {
+    let currentAnimationFrame: number
+
+    this.form.get('theme.customization').valueChanges.pipe(debounceTime(250)).subscribe(formValues => {
+      if (currentAnimationFrame) {
+        cancelAnimationFrame(currentAnimationFrame)
+        currentAnimationFrame = null
+      }
+
+      currentAnimationFrame = requestAnimationFrame(() => {
+        this.themeService.updateColorPalette({
+          ...this.customConfig.theme,
+
+          customization: this.buildNewCustomization(formValues)
+        })
+      })
+    })
+
+    for (const [ key, control ] of Object.entries((this.form.get('theme.customization') as FormGroup).controls)) {
+      control.events.subscribe(event => {
+        if (event instanceof ValueChangeEvent) {
+          debugLogger(`Deleting "${key}" from reset fields`)
+
+          this.customizationResetFields.delete(key as ThemeCustomizationKey)
+        }
+      })
+    }
+  }
+
+  private buildForm () {
+    for (const [ untypedName, info ] of Object.entries(this.formFieldsObject)) {
+      const name = untypedName as ThemeCustomizationKey
+
+      this.customizationFormFields.push({
+        label: info.label,
+        type: info.type,
+        inputId: `themeCustomization${capitalizeFirstLetter(name)}`,
+        name,
+        items: info.items
+      })
+
+      if (!this.customConfig.theme.customization[name]) {
+        this.customizationResetFields.add(name)
+      }
+    }
+
+    const obj: BuildFormArgumentTyped<Form> = {
+      client: {
+        videos: {
+          miniature: {
+            preferAuthorDisplayName: null
+          }
+        }
+      },
+      email: {
+        subject: {
+          prefix: null
+        },
+        body: {
+          signature: null
+        }
+      },
+      instance: {
+        customizations: {
+          css: null,
+          javascript: null
+        }
+      },
+      theme: {
+        default: null,
+        customization: {
+          primaryColor: null,
+          foregroundColor: null,
+          backgroundColor: null,
+          backgroundSecondaryColor: null,
+          menuForegroundColor: null,
+          menuBackgroundColor: null,
+          menuBorderRadius: null,
+          headerForegroundColor: null,
+          headerBackgroundColor: null,
+          inputBorderRadius: null
+        }
+      },
+      defaults: {
+        player: {
+          theme: null
+        }
+      }
+    }
+
+    const {
+      form,
+      formErrors,
+      validationMessages
+    } = this.formReactiveService.buildForm<Form>(obj, this.getDefaultFormValues())
+
+    this.form = form
+    this.formErrors = formErrors
+    this.validationMessages = validationMessages
+  }
+
+  getCurrentThemeName () {
+    return this.themeService.getCurrentThemeName()
+  }
+
+  getCurrentThemeLabel () {
+    return this.availableThemes.find(t => t.id === this.themeService.getCurrentThemeName())?.label
+  }
+
+  getDefaultThemeName () {
+    return this.serverService.getHTMLConfig().theme.default
+  }
+
+  getDefaultThemeLabel () {
+    return this.availableThemes.find(t => t.id === this.getDefaultThemeName())?.label
+  }
+
+  hasDefaultCustomizationValue (field: ThemeCustomizationKey) {
+    return this.customizationResetFields.has(field)
+  }
+
+  resetCustomizationField (field: ThemeCustomizationKey) {
+    this.customizationResetFields.add(field)
+
+    this.themeService.updateColorPalette({
+      ...this.customConfig.theme,
+
+      customization: this.buildNewCustomization(this.form.get('theme.customization').value)
+    })
+
+    const value = this.formatCustomizationFieldForForm(field, this.themeService.getCSSConfigValue(field))
+    const control = this.getCustomizationControl(field)
+
+    control.patchValue(value, { emitEvent: false })
+    control.markAsDirty()
+  }
+
+  save () {
+    const formValues = this.form.value
+    formValues.theme.customization = this.buildNewCustomization(formValues.theme.customization)
+
+    this.adminConfigService.saveAndUpdateCurrent({
+      currentConfig: this.customConfig,
+      form: this.form,
+      formConfig: this.form.value,
+      success: $localize`Platform customization updated.`
+    })
+  }
+
+  private getCustomizationControl (field: ThemeCustomizationKey) {
+    return this.form.get('theme.customization').get(field)
+  }
+
+  private getDefaultFormValues (): FormDefaultTyped<Form> {
+    return {
+      ...this.customConfig,
+
+      theme: {
+        default: this.customConfig.theme.default,
+        customization: this.getDefaultCustomization()
+      }
+    }
+  }
+
+  private getDefaultCustomization () {
+    const config = this.customConfig.theme.customization
+
+    return objectKeysTyped(this.formFieldsObject).reduce((acc, field) => {
+      acc[field] = config[field]
+        ? this.formatCustomizationFieldForForm(field, config[field])
+        : this.formatCustomizationFieldForForm(field, this.themeService.getCSSConfigValue(field))
+
+      return acc
+    }, {} as Record<ThemeCustomizationKey, string>)
+  }
+
+  // ---------------------------------------------------------------------------
+
+  private formatCustomizationFieldForForm (field: ThemeCustomizationKey, value: string) {
+    if (this.formFieldsObject[field].type === 'color') {
+      return this.themeService.formatColorForForm(value)
+    }
+
+    return value
+  }
+
+  // ---------------------------------------------------------------------------
+
+  private buildNewCustomization (formValues: any) {
+    return objectKeysTyped(this.customConfig.theme.customization).reduce(
+      (acc: ColorPaletteThemeConfig['customization'], field) => {
+        acc[field] = this.formatCustomizationFieldForTheme(field, formValues[field])
+
+        return acc
+      },
+      {} as ColorPaletteThemeConfig['customization']
+    )
+  }
+
+  private formatCustomizationFieldForTheme (field: ThemeCustomizationKey, value: string) {
+    if (this.customizationResetFields.has(field)) return null
+
+    return value
+  }
+}

client/src/app/+admin/config/pages/admin-config-general.component.html

@@ -0,0 +1,850 @@
+<my-admin-save-bar i18n-title title="General configuration" (save)="save()" [form]="form" [formErrors]="formErrors"></my-admin-save-bar>
+
+<form [formGroup]="form">
+  <div class="pt-two-cols">
+    <div class="title-col">
+      <h2 i18n>BEHAVIOR</h2>
+    </div>
+
+    <div class="content-col">
+      <div class="form-group" formGroupName="instance">
+        <label i18n id="instanceDefaultClientRouteLabel" for="instanceDefaultClientRoute">Landing page</label>
+
+        <my-select-custom-value
+          labelId="instanceDefaultClientRouteLabel"
+          inputId="instanceDefaultClientRoute"
+          [items]="defaultLandingPageOptions"
+          formControlName="defaultClientRoute"
+          inputType="text"
+          [clearable]="false"
+        ></my-select-custom-value>
+
+        <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error" role="alert">{{ formErrors.instance.defaultClientRoute }}</div>
+      </div>
+
+      <div class="form-group" formGroupName="trending">
+        <ng-container formGroupName="videos">
+          <ng-container formGroupName="algorithms">
+            <label i18n for="trendingVideosAlgorithmsDefault">Default trending algorithm</label>
+
+            <div class="peertube-select-container">
+              <select id="trendingVideosAlgorithmsDefault" formControlName="default" class="form-control">
+                <option i18n value="hot">Hot videos</option>
+                <option i18n value="most-viewed">Recent views</option>
+                <option i18n value="most-liked">Most liked videos</option>
+                <option i18n value="views">Global views</option>
+              </select>
+            </div>
+
+            <div *ngIf="formErrors.trending.videos.algorithms.default" class="form-error" role="alert">{{ formErrors.trending.videos.algorithms.default }}</div>
+          </ng-container>
+        </ng-container>
+      </div>
+
+      <ng-container formGroupName="client">
+        <ng-container formGroupName="menu">
+          <ng-container formGroupName="login">
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="clientMenuLoginRedirectOnSingleExternalAuth"
+                formControlName="redirectOnSingleExternalAuth"
+                i18n-labelText
+                labelText="Redirect users on single external auth when users click on the login button in menu"
+              >
+                <ng-container ngProjectAs="description">
+                  @if (countExternalAuth() === 0) {
+                    <span i18n>⚠️ You don't have any external auth plugin enabled</span>
+                  } @else if (countExternalAuth() > 1) {
+                    <span i18n>⚠️ You have multiple external auth plugins enabled</span>
+                  }
+                </ng-container>
+              </my-peertube-checkbox>
+            </div>
+          </ng-container>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>BROADCAST MESSAGE</h2>
+      <div i18n class="inner-form-description">
+        Display a message on your platform
+      </div>
+    </div>
+
+    <div class="content-col">
+      <ng-container formGroupName="broadcastMessage">
+        <div class="form-group">
+          <my-peertube-checkbox
+            inputName="broadcastMessageEnabled"
+            formControlName="enabled"
+            i18n-labelText
+            labelText="Enable broadcast message"
+          ></my-peertube-checkbox>
+        </div>
+
+        <div class="form-group">
+          <my-peertube-checkbox
+            inputName="broadcastMessageDismissable"
+            formControlName="dismissable"
+            i18n-labelText
+            labelText="Allow users to dismiss the broadcast message "
+          ></my-peertube-checkbox>
+        </div>
+
+        <div class="form-group">
+          <label i18n for="broadcastMessageLevel">Broadcast message level</label>
+
+          <div class="peertube-select-container">
+            <select id="broadcastMessageLevel" formControlName="level" class="form-control">
+              <option i18n value="info">info</option>
+              <option i18n value="warning">warning</option>
+              <option i18n value="error">error</option>
+            </select>
+          </div>
+
+          <div *ngIf="formErrors.broadcastMessage.level" class="form-error" role="alert">{{ formErrors.broadcastMessage.level }}</div>
+        </div>
+
+        <div class="form-group">
+          <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
+
+          <my-markdown-textarea
+            inputId="broadcastMessageMessage"
+            formControlName="message"
+            [formError]="formErrors.broadcastMessage.message"
+            markdownType="to-unsafe-html"
+          ></my-markdown-textarea>
+
+          <div *ngIf="formErrors.broadcastMessage.message" class="form-error" role="alert">{{ formErrors.broadcastMessage.message }}</div>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <!-- new users grid -->
+    <div class="title-col">
+      <h2 i18n>NEW USERS</h2>
+    </div>
+
+    <div class="content-col">
+      <ng-container formGroupName="signup">
+        <div class="form-group">
+          <my-peertube-checkbox inputName="signupEnabled" formControlName="enabled" i18n-labelText labelText="Enable Signup">
+            <ng-container ngProjectAs="description">
+              <span i18n>⚠️ This functionality requires a lot of attention and extra moderation</span>
+
+              <my-alert type="primary" class="d-block mt-2" *ngIf="signupAlertMessage">{{ signupAlertMessage }}</my-alert>
+            </ng-container>
+
+            <ng-container ngProjectAs="extra">
+              <div class="form-group">
+                <my-peertube-checkbox
+                  [ngClass]="getDisabledSignupClass()"
+                  inputName="signupRequiresApproval"
+                  formControlName="requiresApproval"
+                  i18n-labelText
+                  labelText="Signup requires approval by moderators"
+                ></my-peertube-checkbox>
+              </div>
+
+              <div class="form-group">
+                <my-peertube-checkbox
+                  [ngClass]="getDisabledSignupClass()"
+                  inputName="signupRequiresEmailVerification"
+                  formControlName="requiresEmailVerification"
+                  i18n-labelText
+                  labelText="Signup requires email verification"
+                ></my-peertube-checkbox>
+              </div>
+
+              <div [ngClass]="getDisabledSignupClass()">
+                <label i18n for="signupLimit">Signup limit</label>
+                <span i18n class="small muted ms-1">When the total number of users in your platform reaches this limit, registrations are disabled. -1 = unlimited</span>
+
+                <div class="number-with-unit">
+                  <input
+                    type="number"
+                    min="-1"
+                    id="signupLimit"
+                    class="form-control"
+                    formControlName="limit"
+                    [ngClass]="{ 'input-error': formErrors.signup.limit }"
+                  >
+                  <span i18n>{form.value.signup.limit, plural, =1 {user} other {users}}</span>
+                </div>
+
+                <div *ngIf="formErrors.signup.limit" class="form-error" role="alert">{{ formErrors.signup.limit }}</div>
+
+                <small i18n *ngIf="hasUnlimitedSignup()" class="muted small">Signup won't be limited to a fixed number of users</small>
+              </div>
+
+              <div [ngClass]="getDisabledSignupClass()" class="mt-3">
+                <label i18n for="signupMinimumAge">Minimum required age to create an account</label>
+
+                <div class="number-with-unit">
+                  <input
+                    type="number"
+                    min="1"
+                    id="signupMinimumAge"
+                    class="form-control"
+                    formControlName="minimumAge"
+                    [ngClass]="{ 'input-error': formErrors.signup.minimumAge }"
+                  >
+                  <span i18n>{form.value.signup.minimumAge, plural, =1 {year old} other {years old}}</span>
+                </div>
+
+                <div *ngIf="formErrors.signup.minimumAge" class="form-error" role="alert">{{ formErrors.signup.minimumAge }}</div>
+              </div>
+            </ng-container>
+          </my-peertube-checkbox>
+        </div>
+      </ng-container>
+
+      <ng-container formGroupName="user">
+        <div class="form-group">
+          <label i18n id="userVideoQuotaLabel" for="userVideoQuota">Default video quota for a new user</label>
+
+          <my-select-custom-value
+            labelId="userVideoQuotaLabel"
+            inputId="userVideoQuota"
+            [items]="getVideoQuotaOptions()"
+            formControlName="videoQuota"
+            i18n-inputSuffix
+            inputSuffix="bytes"
+            inputType="number"
+            [clearable]="false"
+          ></my-select-custom-value>
+
+          <my-user-real-quota-info class="mt-2 d-block small muted" [videoQuota]="getUserVideoQuota()"></my-user-real-quota-info>
+
+          <div *ngIf="formErrors.user.videoQuota" class="form-error" role="alert">{{ formErrors.user.videoQuota }}</div>
+        </div>
+
+        <div class="form-group">
+          <label i18n id="userVideoQuotaDaily" for="userVideoQuotaDaily">Default daily upload limit for a new user</label>
+
+          <my-select-custom-value
+            labelId="userVideoQuotaDailyLabel"
+            inputId="userVideoQuotaDaily"
+            [items]="getVideoQuotaDailyOptions()"
+            formControlName="videoQuotaDaily"
+            i18n-inputSuffix
+            inputSuffix="bytes"
+            inputType="number"
+            [clearable]="false"
+          ></my-select-custom-value>
+
+          <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error" role="alert">{{ formErrors.user.videoQuotaDaily }}</div>
+        </div>
+        <div class="form-group">
+          <ng-container formGroupName="history">
+            <ng-container formGroupName="videos">
+              <my-peertube-checkbox
+                inputName="videosHistoryEnabled"
+                formControlName="enabled"
+                i18n-labelText
+                labelText="Automatically enable video history for a new user"
+              >
+              </my-peertube-checkbox>
+            </ng-container>
+          </ng-container>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>VIDEO IMPORTS</h2>
+    </div>
+
+    <div class="content-col">
+      <ng-container formGroupName="import">
+        <ng-container formGroupName="videos">
+          <div class="form-group">
+            <label i18n for="importConcurrency">Import jobs concurrency</label>
+            <span i18n class="small muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart</span>
+
+            <div class="number-with-unit">
+              <input type="number" id="importConcurrency" formControlName="concurrency" />
+              <span i18n>jobs in parallel</span>
+            </div>
+
+            <div *ngIf="formErrors.import.videos.concurrency" class="form-error" role="alert">{{ formErrors.import.videos.concurrency }}</div>
+          </div>
+
+          <div class="form-group" formGroupName="http">
+            <my-peertube-checkbox
+              inputName="importVideosHttpEnabled"
+              formControlName="enabled"
+              i18n-labelText
+              labelText="Allow import with HTTP URL (e.g. YouTube)"
+            >
+              <ng-container ngProjectAs="description">
+                <span i18n
+                >⚠️ If enabled, we recommend to use <a class="link-primary" href="https://docs.joinpeertube.org/maintain/configuration#security"
+                  >a HTTP proxy</a> to prevent private URL access from your PeerTube server</span>
+              </ng-container>
+            </my-peertube-checkbox>
+          </div>
+
+          <div class="form-group" formGroupName="torrent">
+            <my-peertube-checkbox
+              inputName="importVideosTorrentEnabled"
+              formControlName="enabled"
+              i18n-labelText
+              labelText="Allow import with a torrent file or a magnet URI"
+            >
+              <ng-container ngProjectAs="description">
+                <span i18n>⚠️ We don't recommend to enable this feature if you don't trust your users</span>
+              </ng-container>
+            </my-peertube-checkbox>
+          </div>
+        </ng-container>
+
+        <ng-container formGroupName="videoChannelSynchronization">
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="importSynchronizationEnabled"
+              formControlName="enabled"
+              i18n-labelText
+              labelText="Allow channel synchronization with channel of other platforms like YouTube"
+            >
+              <ng-container ngProjectAs="description">
+                <span i18n [hidden]="isImportVideosHttpEnabled()">
+                  ⛔ You need to allow import with HTTP URL to be able to activate this feature.
+                </span>
+              </ng-container>
+            </my-peertube-checkbox>
+          </div>
+
+          <div class="form-group">
+            <label i18n for="videoChannelSynchronizationMaxPerUser">Max channel synchronization per user</label>
+
+            <div class="number-with-unit">
+              <input
+                type="number"
+                min="1"
+                id="videoChannelSynchronizationMaxPerUser"
+                class="form-control"
+                formControlName="maxPerUser"
+                [ngClass]="{ 'input-error': formErrors['import']['videoChannelSynchronization']['maxPerUser'] }"
+              >
+              <span i18n>{form.value.import.videoChannelSynchronization.maxPerUser, plural, =1 {sync} other {syncs}}</span>
+            </div>
+
+            <div *ngIf="formErrors.import.videoChannelSynchronization.maxPerUser" class="form-error" role="alert">
+              {{ formErrors.import.videoChannelSynchronization.maxPerUser }}
+            </div>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>BROWSE VIDEOS</h2>
+    </div>
+
+    <div class="content-col">
+      <div class="form-group" formGroupName="client">
+        <ng-container formGroupName="browseVideos">
+          <div class="form-group">
+            <label i18n for="browseVideosDefaultSort">Default sort</label>
+
+            <my-select-videos-sort inputId="browseVideosDefaultSort" formControlName="defaultSort"></my-select-videos-sort>
+
+            <div *ngIf="formErrors.client.browseVideos.defaultSort" class="form-error" role="alert">{{ formErrors.client.browseVideos.defaultSort }}</div>
+          </div>
+
+          <div class="form-group">
+            <label i18n for="browseVideosDefaultScope">Default scope</label>
+
+            <my-select-videos-scope inputId="browseVideosDefaultScope" formControlName="defaultScope"></my-select-videos-scope>
+
+            <div *ngIf="formErrors.client.browseVideos.defaultScope" class="form-error" role="alert">{{ formErrors.client.browseVideos.defaultScope }}</div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>VIDEOS</h2>
+    </div>
+
+    <div class="content-col">
+      <ng-container formGroupName="autoBlacklist">
+        <ng-container formGroupName="videos">
+          <ng-container formGroupName="ofUsers">
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="autoBlacklistVideosOfUsersEnabled"
+                formControlName="enabled"
+                i18n-labelText
+                labelText="Block new videos automatically"
+              >
+                <ng-container ngProjectAs="description">
+                  <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
+                </ng-container>
+              </my-peertube-checkbox>
+            </div>
+          </ng-container>
+        </ng-container>
+      </ng-container>
+
+      <ng-container formGroupName="videoFile">
+        <ng-container formGroupName="update">
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="videoFileUpdateEnabled"
+              formControlName="enabled"
+              i18n-labelText
+              labelText="Allow users to upload a new version of their video"
+            >
+            </my-peertube-checkbox>
+          </div>
+        </ng-container>
+      </ng-container>
+
+      <ng-container formGroupName="storyboards">
+        <div class="form-group">
+          <my-peertube-checkbox inputName="storyboardsEnabled" formControlName="enabled" i18n-labelText labelText="Enable video storyboards">
+            <ng-container ngProjectAs="description">
+              <span i18n>Generate storyboards of local videos using ffmpeg so users can see the video preview in the player while scrubbing the video</span>
+            </ng-container>
+
+            <ng-container ngProjectAs="extra">
+              <div class="form-group" formGroupName="remoteRunners" [ngClass]="getStoryboardRunnerDisabledClass()">
+                <my-peertube-checkbox
+                  inputName="storyboardsRemoteRunnersEnabled" formControlName="enabled"
+                  i18n-labelText labelText="Enable remote runners to generate storyboards"
+                >
+                  <ng-container ngProjectAs="description">
+                    <div i18n>Use <a routerLink="/admin/settings/system/runners/runners-list">remote runners</a> to generate storyboards.</div>
+                    <div i18n>Remote runners have to register on your instance first.</div>
+                  </ng-container>
+                </my-peertube-checkbox>
+              </div>
+            </ng-container>
+          </my-peertube-checkbox>
+        </div>
+      </ng-container>
+
+      <ng-container formGroupName="videoTranscription">
+        <div class="form-group">
+          <my-peertube-checkbox inputName="videoTranscriptionEnabled" formControlName="enabled" i18n-labelText labelText="Enable video transcription">
+            <ng-container ngProjectAs="description">
+              <span i18n><a href="https://docs.joinpeertube.org/admin/configuration#automatic-transcription" target="_blank">Automatically create subtitles</a>
+                for uploaded/imported VOD videos</span>
+            </ng-container>
+
+            <ng-container ngProjectAs="extra">
+              <div class="form-group" formGroupName="remoteRunners" [ngClass]="getTranscriptionRunnerDisabledClass()">
+                <my-peertube-checkbox
+                  inputName="videoTranscriptionRemoteRunnersEnabled"
+                  formControlName="enabled"
+                  i18n-labelText
+                  labelText="Enable remote runners for transcription"
+                >
+                  <ng-container ngProjectAs="description">
+                    <div i18n>Use <a routerLink="/admin/settings/system/runners/runners-list">remote runners</a> to process transcription tasks.</div>
+                    <div i18n>Remote runners have to register on your instance first.</div>
+                  </ng-container>
+                </my-peertube-checkbox>
+              </div>
+            </ng-container>
+          </my-peertube-checkbox>
+        </div>
+      </ng-container>
+
+      <ng-container formGroupName="defaults">
+        <ng-container formGroupName="publish">
+          <div class="form-group">
+            <label i18n for="defaultsPublishPrivacy">Default video privacy</label>
+
+            <my-select-options inputId="defaultsPublishPrivacy" [items]="privacyOptions" formControlName="privacy"></my-select-options>
+
+            <div *ngIf="formErrors.defaults.publish.privacy" class="form-error" role="alert">{{ formErrors.defaults.publish.privacy }}</div>
+          </div>
+
+          <div class="form-group">
+            <label i18n for="defaultsPublishLicence">Default video licence</label>
+
+            <my-select-options inputId="defaultsPublishLicence" [items]="licenceOptions" formControlName="licence" clearable="true"></my-select-options>
+
+            <div *ngIf="formErrors.defaults.publish.licence" class="form-error" role="alert">{{ formErrors.defaults.publish.licence }}</div>
+          </div>
+
+          <div class="form-group">
+            <label i18n for="defaultsPublishCommentsPolicy">Default comment policy</label>
+
+            <my-select-options inputId="defaultsPublishCommentsPolicy" [items]="commentPoliciesOptions" formControlName="commentsPolicy"></my-select-options>
+
+            <div *ngIf="formErrors.defaults.publish.commentsPolicy" class="form-error" role="alert">{{ formErrors.defaults.publish.commentsPolicy }}</div>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>VIDEO CHANNELS</h2>
+    </div>
+
+    <div class="content-col">
+      <div class="form-group" formGroupName="videoChannels">
+        <label i18n for="videoChannelsMaxPerUser">Max video channels per user</label>
+
+        <div class="number-with-unit">
+          <input
+            type="number"
+            min="1"
+            id="videoChannelsMaxPerUser"
+            class="form-control"
+            formControlName="maxPerUser"
+            [ngClass]="{ 'input-error': formErrors.videoChannels.maxPerUser }"
+          >
+          <span i18n>{form.value.videoChannels.maxPerUser, plural, =1 {channel} other {channels}}</span>
+        </div>
+
+        <div *ngIf="formErrors.videoChannels.maxPerUser" class="form-error" role="alert">{{ formErrors.videoChannels.maxPerUser }}</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>FEDERATION</h2>
+      <div i18n class="inner-form-description">
+        Manage <a class="link-primary" routerLink="/admin/settings/follows">relations</a> with other platforms.
+      </div>
+    </div>
+
+    <div class="content-col">
+      <ng-container formGroupName="videoComments">
+        <div class="form-group">
+          <my-peertube-checkbox
+            inputName="videoCommentsAcceptRemoteComments"
+            formControlName="acceptRemoteComments"
+            i18n-labelText
+            labelText="Accept comments made on remote platforms"
+          >
+            <ng-container ngProjectAs="description">
+              <span i18n>This setting is not retroactive: current comments from remote platforms will not be deleted</span>
+            </ng-container>
+          </my-peertube-checkbox>
+        </div>
+      </ng-container>
+
+      <ng-container formGroupName="followers">
+        <ng-container formGroupName="channels">
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="followersChannelsEnabled"
+              formControlName="enabled"
+              i18n-labelText
+              labelText="Remote actors can follow channels of your platform"
+            >
+              <ng-container ngProjectAs="description">
+                <span i18n>This setting is not retroactive: current followers of channels of your platform will not be affected</span>
+              </ng-container>
+            </my-peertube-checkbox>
+          </div>
+        </ng-container>
+
+        <ng-container formGroupName="instance">
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="followersInstanceEnabled"
+              formControlName="enabled"
+              i18n-labelText
+              labelText="Remote actors can follow your platform"
+            >
+              <ng-container ngProjectAs="description">
+                <span i18n>This setting is not retroactive: current followers of your platform will not be affected</span>
+              </ng-container>
+            </my-peertube-checkbox>
+          </div>
+
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="followersInstanceManualApproval"
+              formControlName="manualApproval"
+              i18n-labelText
+              labelText="Manually approve new followers that follow your platform"
+            ></my-peertube-checkbox>
+          </div>
+        </ng-container>
+      </ng-container>
+
+      <ng-container formGroupName="followings">
+        <ng-container formGroupName="instance">
+          <ng-container formGroupName="autoFollowBack">
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="followingsInstanceAutoFollowBackEnabled"
+                formControlName="enabled"
+                i18n-labelText
+                labelText="Automatically follow back followers that follow your platform"
+              >
+                <ng-container ngProjectAs="description">
+                  <span i18n>⚠️ This functionality requires a lot of attention and extra moderation</span>
+                </ng-container>
+              </my-peertube-checkbox>
+            </div>
+          </ng-container>
+
+          <ng-container formGroupName="autoFollowIndex">
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="followingsInstanceAutoFollowIndexEnabled"
+                formControlName="enabled"
+                i18n-labelText
+                labelText="Automatically follow platforms of a public index"
+              >
+                <ng-container ngProjectAs="description">
+                  <div i18n>⚠️ This functionality requires a lot of attention and extra moderation.</div>
+
+                  <span i18n>
+                    See <a
+                      class="link-primary"
+                      href="https://docs.joinpeertube.org/admin/following-instances#automatically-follow-other-instances"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >the documentation</a> for more information about the expected URL
+                  </span>
+                </ng-container>
+
+                <ng-container ngProjectAs="extra">
+                  <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
+                    <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
+                    <input
+                      type="text"
+                      id="followingsInstanceAutoFollowIndexUrl"
+                      class="form-control"
+                      formControlName="indexUrl"
+                      [ngClass]="{ 'input-error': formErrors.followings.instance.autoFollowIndex.indexUrl }"
+                    >
+                    <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error" role="alert">
+                      {{ formErrors.followings.instance.autoFollowIndex.indexUrl }}
+                    </div>
+                  </div>
+                </ng-container>
+              </my-peertube-checkbox>
+            </div>
+          </ng-container>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>PLAYER</h2>
+    </div>
+
+    <div class="content-col">
+      <ng-container formGroupName="defaults">
+        <ng-container formGroupName="player">
+
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="defaultsPlayerAutoplay"
+              formControlName="autoPlay"
+              i18n-labelText
+              labelText="Automatically play videos in the player"
+            ></my-peertube-checkbox>
+          </div>
+        </ng-container>
+
+        <ng-container formGroupName="p2p">
+          <div class="form-group" formGroupName="webapp">
+            <my-peertube-checkbox
+              inputName="defaultsP2PWebappEnabled"
+              formControlName="enabled"
+              i18n-labelText
+              labelText="Enable P2P streaming by default on your platform"
+            ></my-peertube-checkbox>
+          </div>
+
+          <div class="form-group" formGroupName="embed">
+            <my-peertube-checkbox
+              inputName="defaultsP2PEmbedEnabled"
+              formControlName="enabled"
+              i18n-labelText
+              labelText="Enable P2P streaming by default for videos embedded on external websites"
+            ></my-peertube-checkbox>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>SEARCH</h2>
+    </div>
+
+    <div class="content-col">
+      <ng-container formGroupName="search">
+        <ng-container formGroupName="remoteUri">
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="searchRemoteUriUsers"
+              formControlName="users"
+              i18n-labelText
+              labelText="Allow users to do remote URI/handle search"
+            >
+              <ng-container ngProjectAs="description">
+                <span i18n>Allow <strong>your users</strong> to look up remote videos/actors that may not be federated with your platform</span>
+              </ng-container>
+            </my-peertube-checkbox>
+          </div>
+
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="searchRemoteUriAnonymous"
+              formControlName="anonymous"
+              i18n-labelText
+              labelText="Allow anonymous to do remote URI/handle search"
+            >
+              <ng-container ngProjectAs="description">
+                <span i18n>Allow <strong>anonymous users</strong> to look up remote videos/actors that may not be federated with your platform</span>
+              </ng-container>
+            </my-peertube-checkbox>
+          </div>
+        </ng-container>
+
+        <ng-container formGroupName="searchIndex">
+          <div class="form-group">
+            <my-peertube-checkbox inputName="searchIndexEnabled" formControlName="enabled" i18n-labelText labelText="Enable global search">
+              <ng-container ngProjectAs="description">
+                <div i18n>⚠️ This functionality depends heavily on the moderation of platforms followed by the search index you select</div>
+              </ng-container>
+
+              <ng-container ngProjectAs="extra">
+                <div [ngClass]="getDisabledSearchIndexClass()">
+                  <label i18n for="searchIndexUrl">Search index URL</label>
+
+                  <div i18n class="form-group-description">
+                    Use <a class="link-primary" target="_blank" href="https://framagit.org/framasoft/peertube/search-index">your own search index</a> or choose the official one, <a class="link-primary" target="_blank" href="https://sepiasearch.org">https://sepiasearch.org</a>, that is not moderated.
+                  </div>
+
+                  <input
+                    type="text"
+                    id="searchIndexUrl"
+                    class="form-control"
+                    formControlName="url"
+                    [ngClass]="{ 'input-error': formErrors.search.searchIndex.url }"
+                  >
+
+                  <div *ngIf="formErrors.search.searchIndex.url" class="form-error" role="alert">{{ formErrors.search.searchIndex.url }}</div>
+                </div>
+
+                <div class="mt-3">
+                  <my-peertube-checkbox
+                    [ngClass]="getDisabledSearchIndexClass()"
+                    inputName="searchIndexDisableLocalSearch"
+                    formControlName="disableLocalSearch"
+                    i18n-labelText
+                    labelText="Disable local search in search bar"
+                  ></my-peertube-checkbox>
+                </div>
+
+                <div class="mt-3">
+                  <my-peertube-checkbox
+                    [ngClass]="getDisabledSearchIndexClass()"
+                    inputName="searchIndexIsDefaultSearch"
+                    formControlName="isDefaultSearch"
+                    i18n-labelText
+                    labelText="Search bar uses the global search index by default"
+                  >
+                    <ng-container ngProjectAs="description">
+                      <span i18n>Otherwise, the local search will be used by default</span>
+                    </ng-container>
+                  </my-peertube-checkbox>
+                </div>
+              </ng-container>
+            </my-peertube-checkbox>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>USER IMPORT/EXPORT</h2>
+    </div>
+
+    <div class="content-col">
+      <ng-container formGroupName="import">
+        <ng-container formGroupName="users">
+          <div class="form-group">
+            <my-peertube-checkbox inputName="importUsersEnabled" formControlName="enabled" i18n-labelText labelText="Allow your users to import a data archive">
+              <ng-container ngProjectAs="description">
+                <div i18n>Video quota is checked on import so the user doesn't upload a too big archive file</div>
+                <div i18n>Video quota (daily quota is not taken into account) is also checked for each video when PeerTube is processing the import</div>
+              </ng-container>
+            </my-peertube-checkbox>
+          </div>
+        </ng-container>
+      </ng-container>
+
+      <ng-container formGroupName="export">
+        <ng-container formGroupName="users">
+          <div class="form-group">
+            <my-peertube-checkbox inputName="exportUsersEnabled" formControlName="enabled" i18n-labelText labelText="Allow your users to export their data">
+              <ng-container ngProjectAs="description">
+                <span i18n>Users can export their PeerTube data in a .zip for backup or re-import. Only one export at a time is allowed per user</span>
+              </ng-container>
+
+              <ng-container ngProjectAs="extra">
+                <div class="form-group" [ngClass]="getDisabledExportUsersClass()">
+                  <label i18n id="exportUsersMaxUserVideoQuota" for="exportUsersMaxUserVideoQuota">Max user video quota allowed to generate the export</label>
+
+                  <span i18n class="ms-2 small muted">If the user decides to include the video files in the archive</span>
+
+                  <my-select-custom-value
+                    labelId="exportUsersMaxUserVideoQuota"
+                    inputId="exportUsersMaxUserVideoQuota"
+                    [items]="exportMaxUserVideoQuotaOptions"
+                    formControlName="maxUserVideoQuota"
+                    i18n-inputSuffix
+                    inputSuffix="bytes"
+                    inputType="number"
+                    [clearable]="false"
+                  ></my-select-custom-value>
+
+                  <div *ngIf="formErrors.export.users.maxUserVideoQuota" class="form-error" role="alert">{{ formErrors.export.users.maxUserVideoQuota }}</div>
+                </div>
+
+                <div class="form-group" [ngClass]="getDisabledExportUsersClass()">
+                  <label i18n for="exportUsersExportExpiration">User export expiration</label>
+
+                  <my-select-options
+                    inputId="exportUsersExportExpiration"
+                    [items]="exportExpirationOptions"
+                    formControlName="exportExpiration"
+                  ></my-select-options>
+
+                  <div i18n class="mt-1 small muted">The archive file is deleted after this period</div>
+
+                  <div *ngIf="formErrors.export.users.exportExpiration" class="form-error" role="alert">{{ formErrors.export.users.exportExpiration }}</div>
+                </div>
+              </ng-container>
+            </my-peertube-checkbox>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+</form>

client/src/app/+admin/config/pages/admin-config-general.component.ts

@@ -0,0 +1,629 @@
+import { CommonModule } from '@angular/common'
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { FormArray, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ActivatedRoute, RouterLink } from '@angular/router'
+import { getVideoQuotaDailyOptions, getVideoQuotaOptions } from '@app/+admin/shared/user-quota-options'
+import { CanComponentDeactivate, ServerService } from '@app/core'
+import { URL_VALIDATOR } from '@app/shared/form-validators/common-validators'
+import {
+  CONCURRENCY_VALIDATOR,
+  EXPORT_EXPIRATION_VALIDATOR,
+  EXPORT_MAX_USER_VIDEO_QUOTA_VALIDATOR,
+  MAX_SYNC_PER_USER,
+  MAX_VIDEO_CHANNELS_PER_USER_VALIDATOR,
+  SIGNUP_LIMIT_VALIDATOR,
+  SIGNUP_MINIMUM_AGE_VALIDATOR
+} from '@app/shared/form-validators/custom-config-validators'
+import {
+  BuildFormArgumentTyped,
+  FormDefaultTyped,
+  FormReactiveErrorsTyped,
+  FormReactiveMessagesTyped
+} from '@app/shared/form-validators/form-validator.model'
+import { USER_VIDEO_QUOTA_DAILY_VALIDATOR, USER_VIDEO_QUOTA_VALIDATOR } from '@app/shared/form-validators/user-validators'
+import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
+import { AlertComponent } from '@app/shared/shared-main/common/alert.component'
+import { VideoService } from '@app/shared/shared-main/video/video.service'
+import { BroadcastMessageLevel, CustomConfig, VideoCommentPolicyType, VideoConstant, VideoPrivacyType } from '@peertube/peertube-models'
+import { Subscription } from 'rxjs'
+import { pairwise } from 'rxjs/operators'
+import { SelectOptionsItem } from 'src/types/select-options-item.model'
+import { AdminConfigService } from '../../../shared/shared-admin/admin-config.service'
+import { MarkdownTextareaComponent } from '../../../shared/shared-forms/markdown-textarea.component'
+import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
+import { SelectCustomValueComponent } from '../../../shared/shared-forms/select/select-custom-value.component'
+import { SelectOptionsComponent } from '../../../shared/shared-forms/select/select-options.component'
+import { SelectVideosScopeComponent } from '../../../shared/shared-forms/select/select-videos-scope.component'
+import { SelectVideosSortComponent } from '../../../shared/shared-forms/select/select-videos-sort.component'
+import { HelpComponent } from '../../../shared/shared-main/buttons/help.component'
+import { UserRealQuotaInfoComponent } from '../../shared/user-real-quota-info.component'
+import { AdminSaveBarComponent } from '../shared/admin-save-bar.component'
+
+type Form = {
+  instance: FormGroup<{
+    defaultClientRoute: FormControl<string>
+  }>
+
+  client: FormGroup<{
+    browseVideos: FormGroup<{
+      defaultSort: FormControl<string>
+      defaultScope: FormControl<string>
+    }>
+
+    menu: FormGroup<{
+      login: FormGroup<{
+        redirectOnSingleExternalAuth: FormControl<boolean>
+      }>
+    }>
+  }>
+
+  signup: FormGroup<{
+    enabled: FormControl<boolean>
+    limit: FormControl<number>
+    requiresApproval: FormControl<boolean>
+    requiresEmailVerification: FormControl<boolean>
+    minimumAge: FormControl<number>
+  }>
+
+  import: FormGroup<{
+    videos: FormGroup<{
+      concurrency: FormControl<number>
+
+      http: FormGroup<{
+        enabled: FormControl<boolean>
+      }>
+
+      torrent: FormGroup<{
+        enabled: FormControl<boolean>
+      }>
+    }>
+    videoChannelSynchronization: FormGroup<{
+      enabled: FormControl<boolean>
+      maxPerUser: FormControl<number>
+    }>
+    users: FormGroup<{
+      enabled: FormControl<boolean>
+    }>
+  }>
+
+  export: FormGroup<{
+    users: FormGroup<{
+      enabled: FormControl<boolean>
+      maxUserVideoQuota: FormControl<number>
+      exportExpiration: FormControl<number>
+    }>
+  }>
+
+  trending: FormGroup<{
+    videos: FormGroup<{
+      algorithms: FormGroup<{
+        enabled: FormArray<FormControl<string>>
+        default: FormControl<string>
+      }>
+    }>
+  }>
+
+  user: FormGroup<{
+    history: FormGroup<{
+      videos: FormGroup<{
+        enabled: FormControl<boolean>
+      }>
+    }>
+    videoQuota: FormControl<number>
+    videoQuotaDaily: FormControl<number>
+  }>
+
+  videoChannels: FormGroup<{
+    maxPerUser: FormControl<number>
+  }>
+
+  videoTranscription: FormGroup<{
+    enabled: FormControl<boolean>
+    remoteRunners: FormGroup<{
+      enabled: FormControl<boolean>
+    }>
+  }>
+
+  videoFile: FormGroup<{
+    update: FormGroup<{
+      enabled: FormControl<boolean>
+    }>
+  }>
+
+  autoBlacklist: FormGroup<{
+    videos: FormGroup<{
+      ofUsers: FormGroup<{
+        enabled: FormControl<boolean>
+      }>
+    }>
+  }>
+
+  followers: FormGroup<{
+    instance: FormGroup<{
+      enabled: FormControl<boolean>
+      manualApproval: FormControl<boolean>
+    }>
+    channels: FormGroup<{
+      enabled: FormControl<boolean>
+    }>
+  }>
+
+  followings: FormGroup<{
+    instance: FormGroup<{
+      autoFollowBack: FormGroup<{
+        enabled: FormControl<boolean>
+      }>
+      autoFollowIndex: FormGroup<{
+        enabled: FormControl<boolean>
+        indexUrl: FormControl<string>
+      }>
+    }>
+  }>
+
+  broadcastMessage: FormGroup<{
+    enabled: FormControl<boolean>
+    level: FormControl<BroadcastMessageLevel>
+    dismissable: FormControl<boolean>
+    message: FormControl<string>
+  }>
+
+  search: FormGroup<{
+    remoteUri: FormGroup<{
+      users: FormControl<boolean>
+      anonymous: FormControl<boolean>
+    }>
+    searchIndex: FormGroup<{
+      enabled: FormControl<boolean>
+      url: FormControl<string>
+      disableLocalSearch: FormControl<boolean>
+      isDefaultSearch: FormControl<boolean>
+    }>
+  }>
+
+  storyboards: FormGroup<{
+    enabled: FormControl<boolean>
+
+    remoteRunners: FormGroup<{
+      enabled: FormControl<boolean>
+    }>
+  }>
+
+  defaults: FormGroup<{
+    publish: FormGroup<{
+      commentsPolicy: FormControl<VideoCommentPolicyType>
+      privacy: FormControl<VideoPrivacyType>
+      licence: FormControl<number>
+    }>
+
+    p2p: FormGroup<{
+      webapp: FormGroup<{
+        enabled: FormControl<boolean>
+      }>
+
+      embed: FormGroup<{
+        enabled: FormControl<boolean>
+      }>
+    }>
+
+    player: FormGroup<{
+      autoPlay: FormControl<boolean>
+    }>
+  }>
+
+  videoComments: FormGroup<{
+    acceptRemoteComments: FormControl<boolean>
+  }>
+}
+
+@Component({
+  selector: 'my-admin-config-general',
+  templateUrl: './admin-config-general.component.html',
+  styleUrls: [ './admin-config-common.scss' ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterLink,
+    SelectCustomValueComponent,
+    PeertubeCheckboxComponent,
+    HelpComponent,
+    MarkdownTextareaComponent,
+    UserRealQuotaInfoComponent,
+    SelectOptionsComponent,
+    AlertComponent,
+    AdminSaveBarComponent,
+    SelectVideosSortComponent,
+    SelectVideosScopeComponent
+  ]
+})
+export class AdminConfigGeneralComponent implements OnInit, OnDestroy, CanComponentDeactivate {
+  private server = inject(ServerService)
+  private route = inject(ActivatedRoute)
+  private formReactiveService = inject(FormReactiveService)
+  private adminConfigService = inject(AdminConfigService)
+  private videoService = inject(VideoService)
+
+  form: FormGroup<Form>
+  formErrors: FormReactiveErrorsTyped<Form> = {}
+  validationMessages: FormReactiveMessagesTyped<Form> = {}
+
+  signupAlertMessage: string
+  defaultLandingPageOptions: SelectOptionsItem[] = []
+
+  exportExpirationOptions: SelectOptionsItem[] = []
+  exportMaxUserVideoQuotaOptions: SelectOptionsItem[] = []
+
+  privacyOptions: SelectOptionsItem[] = []
+  commentPoliciesOptions: SelectOptionsItem[] = []
+  licenceOptions: SelectOptionsItem[] = []
+
+  private customConfig: CustomConfig
+  private customConfigSub: Subscription
+
+  ngOnInit () {
+    this.customConfig = this.route.parent.snapshot.data['customConfig']
+
+    const data = this.route.snapshot.data as {
+      licences: VideoConstant<number>[]
+      privacies: VideoConstant<VideoPrivacyType>[]
+      commentPolicies: VideoConstant<VideoCommentPolicyType>[]
+    }
+
+    this.privacyOptions = this.videoService.explainedPrivacyLabels(data.privacies).videoPrivacies
+    this.licenceOptions = data.licences
+
+    this.commentPoliciesOptions = data.commentPolicies
+
+    this.buildLandingPageOptions()
+
+    this.exportExpirationOptions = [
+      { id: 1000 * 3600 * 24, label: $localize`1 day` },
+      { id: 1000 * 3600 * 24 * 2, label: $localize`2 days` },
+      { id: 1000 * 3600 * 24 * 7, label: $localize`7 days` },
+      { id: 1000 * 3600 * 24 * 30, label: $localize`30 days` }
+    ]
+
+    this.exportMaxUserVideoQuotaOptions = this.getVideoQuotaOptions().filter(o => o.id >= 1)
+
+    this.buildForm()
+
+    this.subscribeToSignupChanges()
+    this.subscribeToImportSyncChanges()
+
+    this.customConfigSub = this.adminConfigService.getCustomConfigReloadedObs()
+      .subscribe(customConfig => {
+        this.customConfig = customConfig
+
+        this.form.patchValue(this.customConfig)
+      })
+  }
+
+  ngOnDestroy () {
+    if (this.customConfigSub) this.customConfigSub.unsubscribe()
+  }
+
+  private buildForm () {
+    const obj: BuildFormArgumentTyped<Form> = {
+      instance: {
+        defaultClientRoute: null
+      },
+      client: {
+        browseVideos: {
+          defaultSort: null,
+          defaultScope: null
+        },
+        menu: {
+          login: {
+            redirectOnSingleExternalAuth: null
+          }
+        }
+      },
+      signup: {
+        enabled: null,
+        limit: SIGNUP_LIMIT_VALIDATOR,
+        requiresApproval: null,
+        requiresEmailVerification: null,
+        minimumAge: SIGNUP_MINIMUM_AGE_VALIDATOR
+      },
+      import: {
+        videos: {
+          concurrency: CONCURRENCY_VALIDATOR,
+          http: {
+            enabled: null
+          },
+          torrent: {
+            enabled: null
+          }
+        },
+        videoChannelSynchronization: {
+          enabled: null,
+          maxPerUser: MAX_SYNC_PER_USER
+        },
+        users: {
+          enabled: null
+        }
+      },
+      export: {
+        users: {
+          enabled: null,
+          maxUserVideoQuota: EXPORT_MAX_USER_VIDEO_QUOTA_VALIDATOR,
+          exportExpiration: EXPORT_EXPIRATION_VALIDATOR
+        }
+      },
+      trending: {
+        videos: {
+          algorithms: {
+            enabled: null,
+            default: null
+          }
+        }
+      },
+      user: {
+        history: {
+          videos: {
+            enabled: null
+          }
+        },
+        videoQuota: USER_VIDEO_QUOTA_VALIDATOR,
+        videoQuotaDaily: USER_VIDEO_QUOTA_DAILY_VALIDATOR
+      },
+      videoChannels: {
+        maxPerUser: MAX_VIDEO_CHANNELS_PER_USER_VALIDATOR
+      },
+      videoTranscription: {
+        enabled: null,
+        remoteRunners: {
+          enabled: null
+        }
+      },
+      videoFile: {
+        update: {
+          enabled: null
+        }
+      },
+      autoBlacklist: {
+        videos: {
+          ofUsers: {
+            enabled: null
+          }
+        }
+      },
+      followers: {
+        instance: {
+          enabled: null,
+          manualApproval: null
+        },
+        channels: {
+          enabled: null
+        }
+      },
+      followings: {
+        instance: {
+          autoFollowBack: {
+            enabled: null
+          },
+          autoFollowIndex: {
+            enabled: null,
+            indexUrl: URL_VALIDATOR
+          }
+        }
+      },
+      broadcastMessage: {
+        enabled: null,
+        level: null,
+        dismissable: null,
+        message: null
+      },
+      search: {
+        remoteUri: {
+          users: null,
+          anonymous: null
+        },
+        searchIndex: {
+          enabled: null,
+          url: URL_VALIDATOR,
+          disableLocalSearch: null,
+          isDefaultSearch: null
+        }
+      },
+      storyboards: {
+        enabled: null,
+        remoteRunners: {
+          enabled: null
+        }
+      },
+      defaults: {
+        publish: {
+          commentsPolicy: null,
+          privacy: null,
+          licence: null
+        },
+        p2p: {
+          webapp: {
+            enabled: null
+          },
+          embed: {
+            enabled: null
+          }
+        },
+        player: {
+          autoPlay: null
+        }
+      },
+      videoComments: {
+        acceptRemoteComments: null
+      }
+    }
+
+    const defaultValues: FormDefaultTyped<Form> = this.customConfig
+
+    const {
+      form,
+      formErrors,
+      validationMessages
+    } = this.formReactiveService.buildForm<Form>(obj, defaultValues)
+
+    this.form = form
+    this.formErrors = formErrors
+    this.validationMessages = validationMessages
+  }
+
+  canDeactivate () {
+    return { canDeactivate: !this.form.dirty }
+  }
+
+  countExternalAuth () {
+    return this.server.getHTMLConfig().plugin.registeredExternalAuths.length
+  }
+
+  getVideoQuotaOptions () {
+    return getVideoQuotaOptions()
+  }
+
+  getVideoQuotaDailyOptions () {
+    return getVideoQuotaDailyOptions()
+  }
+
+  doesTrendingVideosAlgorithmsEnabledInclude (algorithm: string) {
+    const enabled = this.form.value.trending.videos.algorithms.enabled
+    if (!Array.isArray(enabled)) return false
+
+    return !!enabled.find((e: string) => e === algorithm)
+  }
+
+  getUserVideoQuota () {
+    return this.form.value.user.videoQuota
+  }
+
+  isExportUsersEnabled () {
+    return this.form.value.export.users.enabled === true
+  }
+
+  getDisabledExportUsersClass () {
+    return { 'disabled-checkbox-extra': !this.isExportUsersEnabled() }
+  }
+
+  isSignupEnabled () {
+    return this.form.value.signup.enabled === true
+  }
+
+  getDisabledSignupClass () {
+    return { 'disabled-checkbox-extra': !this.isSignupEnabled() }
+  }
+
+  isImportVideosHttpEnabled (): boolean {
+    return this.form.value.import.videos.http.enabled === true
+  }
+
+  importSynchronizationChecked () {
+    return this.isImportVideosHttpEnabled() && this.form.value.import.videoChannelSynchronization.enabled
+  }
+
+  hasUnlimitedSignup () {
+    return this.form.value.signup.limit === -1
+  }
+
+  isSearchIndexEnabled () {
+    return this.form.value.search.searchIndex.enabled === true
+  }
+
+  getDisabledSearchIndexClass () {
+    return { 'disabled-checkbox-extra': !this.isSearchIndexEnabled() }
+  }
+
+  // ---------------------------------------------------------------------------
+
+  isTranscriptionEnabled () {
+    return this.form.value.videoTranscription.enabled === true
+  }
+
+  getTranscriptionRunnerDisabledClass () {
+    return { 'disabled-checkbox-extra': !this.isTranscriptionEnabled() }
+  }
+
+  // ---------------------------------------------------------------------------
+
+  isStoryboardEnabled () {
+    return this.form.value.storyboards.enabled === true
+  }
+
+  getStoryboardRunnerDisabledClass () {
+    return { 'disabled-checkbox-extra': !this.isStoryboardEnabled() }
+  }
+
+  // ---------------------------------------------------------------------------
+
+  isAutoFollowIndexEnabled () {
+    return this.form.value.followings.instance.autoFollowIndex.enabled === true
+  }
+
+  buildLandingPageOptions () {
+    let links: { label: string, path: string }[] = []
+
+    if (this.server.getHTMLConfig().homepage.enabled) {
+      links.push({ label: $localize`Home`, path: '/home' })
+    }
+
+    links = links.concat([
+      { label: $localize`Discover`, path: '/videos/overview' },
+      { label: $localize`Browse all videos`, path: '/videos/browse' },
+      { label: $localize`Browse local videos`, path: '/videos/browse?scope=local' }
+    ])
+
+    this.defaultLandingPageOptions = links.map(o => ({
+      id: o.path,
+      label: o.label,
+      description: o.path
+    }))
+  }
+
+  private subscribeToImportSyncChanges () {
+    const controls = this.form.controls
+
+    const importSyncControl = controls.import.controls.videoChannelSynchronization.controls.enabled
+    const importVideosHttpControl = controls.import.controls.videos.controls.http.controls.enabled
+
+    importVideosHttpControl.valueChanges
+      .subscribe(httpImportEnabled => {
+        importSyncControl.setValue(httpImportEnabled && importSyncControl.value)
+
+        if (httpImportEnabled) importSyncControl.enable()
+        else importSyncControl.disable()
+      })
+  }
+
+  private subscribeToSignupChanges () {
+    const signupControl = this.form.controls.signup.controls.enabled
+
+    signupControl.valueChanges
+      .pipe(pairwise())
+      .subscribe(([ oldValue, newValue ]) => {
+        if (oldValue === false && newValue === true) {
+          this.signupAlertMessage =
+            // eslint-disable-next-line max-len
+            $localize`You enabled signup: we automatically enabled the "Block new videos automatically" checkbox of the "Videos" section just below.`
+
+          this.form.patchValue({
+            autoBlacklist: {
+              videos: {
+                ofUsers: {
+                  enabled: true
+                }
+              }
+            }
+          })
+        }
+      })
+
+    signupControl.updateValueAndValidity()
+  }
+
+  save () {
+    this.adminConfigService.saveAndUpdateCurrent({
+      currentConfig: this.customConfig,
+      form: this.form,
+      formConfig: this.form.value,
+      success: $localize`General configuration updated.`
+    })
+  }
+}

client/src/app/+admin/config/pages/admin-config-homepage.component.html

@@ -0,0 +1,28 @@
+<my-admin-save-bar i18n-title title="Edit your homepage" (save)="save()" [form]="form" [formErrors]="formErrors"></my-admin-save-bar>
+
+<form class="homepage pt-two-cols" [formGroup]="form">
+  <div class="title-col">
+    <h2 i18n>HOMEPAGE</h2>
+  </div>
+
+  <div class="content-col">
+    <div class="form-group">
+      <label i18n for="homepageContent">Homepage content</label>
+      <div class="form-group-description">
+        <my-custom-markup-help></my-custom-markup-help>
+      </div>
+
+      <my-markdown-textarea
+        inputId="homepageContent"
+        formControlName="homepageContent"
+        [customMarkdownRenderer]="getCustomMarkdownRenderer()"
+        [debounceTime]="500"
+        [formError]="formErrors['homepageContent']"
+        dir="ltr"
+        monospace="true"
+      ></my-markdown-textarea>
+
+      <div *ngIf="formErrors.homepageContent" class="form-error" role="alert">{{ formErrors.homepageContent }}</div>
+    </div>
+  </div>
+</form>

client/src/app/+admin/config/pages/admin-config-homepage.component.ts

@@ -0,0 +1,83 @@
+import { CommonModule } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ActivatedRoute } from '@angular/router'
+import { CanComponentDeactivate, Notifier } from '@app/core'
+import { BuildFormArgument } from '@app/shared/form-validators/form-validator.model'
+import { CustomMarkupService } from '@app/shared/shared-custom-markup/custom-markup.service'
+import { FormReactiveErrors, FormReactiveMessages, FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
+import { CustomPageService } from '@app/shared/shared-main/custom-page/custom-page.service'
+import { CustomMarkupHelpComponent } from '../../../shared/shared-custom-markup/custom-markup-help.component'
+import { MarkdownTextareaComponent } from '../../../shared/shared-forms/markdown-textarea.component'
+import { AdminSaveBarComponent } from '../shared/admin-save-bar.component'
+
+type Form = {
+  homepageContent: FormControl<string>
+}
+
+@Component({
+  selector: 'my-admin-config-homepage',
+  templateUrl: './admin-config-homepage.component.html',
+  styleUrls: [ './admin-config-common.scss' ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    CustomMarkupHelpComponent,
+    MarkdownTextareaComponent,
+    AdminSaveBarComponent
+  ]
+})
+export class AdminConfigHomepageComponent implements OnInit, CanComponentDeactivate {
+  private formReactiveService = inject(FormReactiveService)
+  private notifier = inject(Notifier)
+
+  private route = inject(ActivatedRoute)
+  private customMarkup = inject(CustomMarkupService)
+  private customPage = inject(CustomPageService)
+
+  form: FormGroup<Form>
+  formErrors: FormReactiveErrors = {}
+  validationMessages: FormReactiveMessages = {}
+
+  ngOnInit () {
+    this.buildForm()
+  }
+
+  canDeactivate () {
+    return { canDeactivate: !this.form.dirty }
+  }
+
+  getCustomMarkdownRenderer () {
+    return this.customMarkup.getCustomMarkdownRenderer()
+  }
+
+  save () {
+    this.customPage.updateInstanceHomepage(this.form.value.homepageContent)
+      .subscribe({
+        next: () => {
+          this.form.markAsPristine()
+
+          this.notifier.success($localize`Homepage updated.`)
+        },
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+
+  private buildForm () {
+    const obj: BuildFormArgument = {
+      homepageContent: null
+    }
+
+    const {
+      form,
+      formErrors,
+      validationMessages
+    } = this.formReactiveService.buildForm<Form>(obj, { homepageContent: this.route.snapshot.data['homepageContent'] })
+
+    this.form = form
+    this.formErrors = formErrors
+    this.validationMessages = validationMessages
+  }
+}

client/src/app/+admin/config/pages/admin-config-information.component.html

@@ -1,50 +1,52 @@
-<ng-container [formGroup]="form()">
+<my-admin-save-bar i18n-title title="Platform information" (save)="save()" [form]="form" [formErrors]="formErrors"></my-admin-save-bar>
 
-  <ng-container formGroupName="instance">
+<form [formGroup]="form">
 
-    <div class="pt-two-cols mt-5"> <!-- instance grid -->
+  <div class="pt-two-cols mt-4">
     <div class="title-col">
-        <h2 i18n>INSTANCE</h2>
+      <h2 i18n>ADMINISTRATORS</h2>
     </div>
 
     <div class="content-col">
-        <div class="form-group">
-          <label i18n for="avatarfile">Square icon</label>
 
-          <div class="label-small-info">
-            <p i18n class="mb-0">Square icon can be used on your custom homepage.</p>
+      <div class="form-group" formGroupName="admin">
+        <label i18n for="adminEmail">Admin email</label>
+
+        <input
+          type="text" id="adminEmail" class="form-control"
+          formControlName="email" [ngClass]="{ 'input-error': formErrors.admin.email }"
+        >
+
+        <div *ngIf="formErrors.admin.email" class="form-error" role="alert">{{ formErrors.admin.email }}</div>
       </div>
 
-          <my-actor-avatar-edit
-            class="d-block mb-4"
-            actorType="account" previewImage="false" [username]="instanceName" displayUsername="false"
-            [avatars]="instanceAvatars" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
-          ></my-actor-avatar-edit>
+      <div class="form-group" formGroupName="contactForm">
+        <my-peertube-checkbox
+          inputName="enableContactForm" formControlName="enabled"
+          i18n-labelText labelText="Enable contact form"
+        ></my-peertube-checkbox>
       </div>
 
-        <div class="form-group">
-          <label i18n for="bannerfile">Banner</label>
-
-          <div class="label-small-info">
-            <p i18n class="mb-0">Banner is displayed in the about, login and registration pages and be used on your custom homepage.</p>
-            <p i18n>It can also be displayed on external websites to promote your instance, such as <a target="_blank"  href="https://joinpeertube.org/instances">JoinPeerTube.org</a>.</p>
+    </div>
   </div>
 
-          <my-actor-banner-edit
-            [previewImage]="false" class="d-block mb-4"
-            [bannerUrl]="instanceBannerUrl" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
-          ></my-actor-banner-edit>
+  <ng-container formGroupName="instance">
+
+    <div class="pt-two-cols">
+      <div class="title-col">
+        <h2 i18n>PLATFORM</h2>
       </div>
 
+      <div class="content-col">
         <div class="form-group">
           <label i18n for="instanceName">Name</label>
 
           <input
             type="text" id="instanceName" class="form-control"
-            formControlName="name" [ngClass]="{ 'input-error': formErrors().instance.name }"
+            formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
           >
 
-          <div *ngIf="formErrors().instance.name" class="form-error" role="alert">{{ formErrors().instance.name }}</div>
+          <div *ngIf="formErrors.instance.name" class="form-error" role="alert">{{ formErrors.instance.name }}</div>
         </div>
 
         <div class="form-group">
@@ -52,32 +54,44 @@
 
           <textarea
             id="instanceShortDescription" formControlName="shortDescription" class="form-control small"
-            [ngClass]="{ 'input-error': formErrors()['instance.shortDescription'] }"
+            [ngClass]="{ 'input-error': formErrors.instance.shortDescription }"
           ></textarea>
 
-          <div *ngIf="formErrors().instance.shortDescription" class="form-error" role="alert">{{ formErrors().instance.shortDescription }}</div>
+          <div *ngIf="formErrors.instance.shortDescription" class="form-error" role="alert">{{ formErrors.instance.shortDescription }}</div>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceDescription">Description</label>
-          <div class="label-small-info">
+          <div class="form-group-description">
             <my-custom-markup-help supportRelMe="true"></my-custom-markup-help>
           </div>
 
           <my-markdown-textarea
             inputId="instanceDescription" formControlName="description"
             [customMarkdownRenderer]="getCustomMarkdownRenderer()" [debounceTime]="500"
-            [formError]="formErrors()['instance.description']"
+            [formError]="formErrors.instance.description"
           ></my-markdown-textarea>
         </div>
 
+        <div class="form-group">
+          <label i18n for="instanceDefaultLanguage">Default language</label>
+          <div class="form-group-description">
+            <div i18n>Default language used for users, in emails for example.</div>
+            <div i18n>The web interface still uses the web browser preferred language if not overridden by user preference</div>
+          </div>
+
+          <div>
+            <my-select-options inputId="instanceDefaultLanguage" formControlName="defaultLanguage" [items]="defaultLanguageItems"></my-select-options>
+          </div>
+        </div>
+
         <div class="form-group">
           <label i18n for="instanceCategories">Main instance categories</label>
 
           <div>
             <my-select-checkbox
               inputId="instanceCategories"
-              formControlName="categories" [availableItems]="categoryItems()"
+              formControlName="categories" [availableItems]="categoryItems"
               [selectableGroup]="false"
               i18n-placeholder placeholder="Add a new category"
             >
@@ -91,7 +105,7 @@
           <div>
             <my-select-checkbox
               inputId="instanceLanguages"
-              formControlName="languages" [availableItems]="languageItems()"
+              formControlName="languages" [availableItems]="languageItems"
               [selectableGroup]="false"
               i18n-placeholder placeholder="Add a new language"
             >
@@ -101,20 +115,20 @@
 
         <div class="form-group">
           <label i18n for="instanceServerCountry">Server country</label>
-          <div i18n class="label-small-info">PeerTube uses this setting to explain to your users which law they must follow in the "About" pages</div>
+          <div i18n class="form-group-description">PeerTube uses this setting to explain to your users which law they must follow in the "About" pages</div>
 
           <input
             type="text" id="instanceServerCountry" class="form-control"
-            formControlName="serverCountry" [ngClass]="{ 'input-error': formErrors().instance.serverCountry }"
+            formControlName="serverCountry" [ngClass]="{ 'input-error': formErrors.instance.serverCountry }"
           >
 
-          <div *ngIf="formErrors().instance.serverCountry" class="form-error" role="alert">{{ formErrors().instance.serverCountry }}</div>
+          <div *ngIf="formErrors.instance.serverCountry" class="form-error" role="alert">{{ formErrors.instance.serverCountry }}</div>
         </div>
 
       </div>
     </div>
 
-    <div class="pt-two-cols mt-4"> <!-- social grid -->
+    <div class="pt-two-cols mt-4">
       <div class="title-col">
         <h2 i18n>SOCIAL</h2>
         <div i18n class="inner-form-description">
@@ -126,25 +140,25 @@
 
         <div class="form-group" formGroupName="support">
           <label i18n for="instanceSupportText">Support text</label><my-help helpType="markdownText"></my-help>
-          <div i18n class="label-small-info">Explain to your users how to support your platform. If set, PeerTube will display a "Support" button in "About" instance pages</div>
+          <div i18n class="form-group-description">Explain to your users how to support your platform. If set, PeerTube will display a "Support" button in "About" instance pages</div>
 
           <my-markdown-textarea
             inputId="instanceSupportText" formControlName="text" markdownType="enhanced"
-            [formError]="formErrors()['instance.support.text']"
+            [formError]="formErrors.instance.support.text"
           ></my-markdown-textarea>
         </div>
 
         <ng-container formGroupName="social">
           <div class="form-group">
             <label i18n for="instanceSocialExternalLink">External link</label>
-            <div i18n class="label-small-info">Link to your main website</div>
+            <div i18n class="form-group-description">Link to your main website</div>
 
             <input
               type="text" id="instanceSocialExternalLink" class="form-control"
-              formControlName="externalLink" [ngClass]="{ 'input-error': formErrors().instance.social.externalLink }"
+              formControlName="externalLink" [ngClass]="{ 'input-error': formErrors.instance.social.externalLink }"
             >
 
-            <div *ngIf="formErrors().instance.social.externalLink" class="form-error" role="alert">{{ formErrors().instance.social.externalLink }}</div>
+            <div *ngIf="formErrors.instance.social.externalLink" class="form-error" role="alert">{{ formErrors.instance.social.externalLink }}</div>
           </div>
 
           <div class="form-group">
@@ -152,10 +166,21 @@
 
             <input
               type="text" id="instanceSocialMastodonLink" class="form-control"
-              formControlName="mastodonLink" [ngClass]="{ 'input-error': formErrors().instance.social.mastodonLink }"
+              formControlName="mastodonLink" [ngClass]="{ 'input-error': formErrors.instance.social.mastodonLink }"
             >
 
-            <div *ngIf="formErrors().instance.social.mastodonLink" class="form-error" role="alert">{{ formErrors().instance.social.mastodonLink }}</div>
+            <div *ngIf="formErrors.instance.social.mastodonLink" class="form-error" role="alert">{{ formErrors.instance.social.mastodonLink }}</div>
+          </div>
+
+          <div class="form-group">
+            <label i18n for="instanceSocialXLink">X link</label>
+
+            <input
+              type="text" id="instanceSocialXLink" class="form-control"
+              formControlName="xLink" [ngClass]="{ 'input-error': formErrors.instance.social.xLink }"
+            >
+
+            <div *ngIf="formErrors.instance.social.xLink" class="form-error" role="alert">{{ formErrors.instance.social.xLink }}</div>
           </div>
 
           <div class="form-group">
@@ -163,10 +188,10 @@
 
             <input
               type="text" id="instanceSocialBlueskyLink" class="form-control"
-              formControlName="blueskyLink" [ngClass]="{ 'input-error': formErrors().instance.social.blueskyLink }"
+              formControlName="blueskyLink" [ngClass]="{ 'input-error': formErrors.instance.social.blueskyLink }"
             >
 
-            <div *ngIf="formErrors().instance.social.blueskyLink" class="form-error" role="alert">{{ formErrors().instance.social.blueskyLink }}</div>
+            <div *ngIf="formErrors.instance.social.blueskyLink" class="form-error" role="alert">{{ formErrors.instance.social.blueskyLink }}</div>
           </div>
         </ng-container>
 
@@ -174,7 +199,7 @@
 
     </div>
 
-    <div class="pt-two-cols mt-4"> <!-- moderation grid -->
+    <div class="pt-two-cols mt-4">
       <div class="title-col">
         <h2 i18n>MODERATION & SENSITIVE CONTENT</h2>
         <div i18n class="inner-form-description">
@@ -205,7 +230,7 @@
             formControlName="defaultNSFWPolicy"
           ></my-select-radio>
 
-          <div *ngIf="formErrors().instance.defaultNSFWPolicy" class="form-error" role="alert">{{ formErrors().instance.defaultNSFWPolicy }}</div>
+          <div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error" role="alert">{{ formErrors.instance.defaultNSFWPolicy }}</div>
         </div>
 
         <div class="form-group">
@@ -213,7 +238,7 @@
 
           <my-markdown-textarea
             inputId="instanceTerms" formControlName="terms" markdownType="enhanced"
-            [formError]="formErrors()['instance.terms']"
+            [formError]="formErrors.instance.terms"
           ></my-markdown-textarea>
         </div>
 
@@ -222,74 +247,74 @@
 
           <my-markdown-textarea
             inputId="instanceCodeOfConduct" formControlName="codeOfConduct" markdownType="enhanced"
-            [formError]="formErrors()['instance.codeOfConduct']"
+            [formError]="formErrors.instance.codeOfConduct"
           ></my-markdown-textarea>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceModerationInformation">Moderation information</label><my-help helpType="markdownText"></my-help>
-          <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding sensitive content? Political videos? etc</div>
+          <div i18n class="form-group-description">Who moderates the instance? What is the policy regarding sensitive content? Political videos? etc</div>
 
           <my-markdown-textarea
             inputId="instanceModerationInformation" formControlName="moderationInformation" markdownType="enhanced"
-            [formError]="formErrors()['instance.moderationInformation']"
+            [formError]="formErrors.instance.moderationInformation"
           ></my-markdown-textarea>
         </div>
 
       </div>
     </div>
 
-    <div class="pt-two-cols mt-4"> <!-- you and your instance grid -->
+    <div class="pt-two-cols mt-4">
       <div class="title-col">
-        <h2 i18n>YOU AND YOUR INSTANCE</h2>
+        <h2 i18n>YOU AND YOUR PLATFORM</h2>
       </div>
 
       <div class="content-col">
 
         <div class="form-group">
           <label i18n for="instanceAdministrator">Who is behind the instance?</label><my-help helpType="markdownText"></my-help>
-          <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
+          <div i18n class="form-group-description">A single person? A non-profit? A company?</div>
 
           <my-markdown-textarea
             inputId="instanceAdministrator" formControlName="administrator" markdownType="enhanced"
-            [formError]="formErrors()['instance.administrator']"
+            [formError]="formErrors.instance.administrator"
           ></my-markdown-textarea>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceCreationReason">Why did you create this instance?</label><my-help helpType="markdownText"></my-help>
-          <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
+          <div i18n class="form-group-description">To share your personal videos? To open registrations and allow people to upload what they want?</div>
 
           <my-markdown-textarea
             inputId="instanceCreationReason" formControlName="creationReason" markdownType="enhanced"
-            [formError]="formErrors()['instance.creationReason']"
+            [formError]="formErrors.instance.creationReason"
           ></my-markdown-textarea>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label><my-help helpType="markdownText"></my-help>
-          <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
+          <div i18n class="form-group-description">It's important to know for users who want to register on your instance</div>
 
           <my-markdown-textarea
             inputId="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" markdownType="enhanced"
-            [formError]="formErrors()['instance.maintenanceLifetime']"
+            [formError]="formErrors.instance.maintenanceLifetime"
           ></my-markdown-textarea>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label><my-help helpType="markdownText"></my-help>
-          <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
+          <div i18n class="form-group-description">With your own funds? With user donations? Advertising?</div>
 
           <my-markdown-textarea
             inputId="instanceBusinessModel" formControlName="businessModel" markdownType="enhanced"
-            [formError]="formErrors()['instance.businessModel']"
+            [formError]="formErrors.instance.businessModel"
           ></my-markdown-textarea>
         </div>
 
       </div>
     </div>
 
-    <div class="pt-two-cols mt-4"> <!-- other information grid -->
+    <div class="pt-two-cols mt-4">
       <div class="title-col">
         <h2 i18n>OTHER INFORMATION</h2>
       </div>
@@ -298,11 +323,11 @@
 
         <div class="form-group">
           <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
-          <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
+          <div i18n class="form-group-description">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
 
           <my-markdown-textarea
             inputId="instanceHardwareInformation" formControlName="hardwareInformation" markdownType="enhanced"
-            [formError]="formErrors()['instance.hardwareInformation']"
+            [formError]="formErrors.instance.hardwareInformation"
           ></my-markdown-textarea>
         </div>
 
@@ -311,4 +336,4 @@
 
   </ng-container>
 
-</ng-container>
+</form>

client/src/app/+admin/config/pages/admin-config-information.component.ts

@@ -0,0 +1,251 @@
+import { CommonModule } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ActivatedRoute, RouterLink } from '@angular/router'
+import { CanComponentDeactivate, ServerService } from '@app/core'
+import { URL_VALIDATOR } from '@app/shared/form-validators/common-validators'
+import {
+  ADMIN_EMAIL_VALIDATOR,
+  INSTANCE_NAME_VALIDATOR,
+  INSTANCE_SHORT_DESCRIPTION_VALIDATOR
+} from '@app/shared/form-validators/custom-config-validators'
+import {
+  BuildFormArgumentTyped,
+  FormDefaultTyped,
+  FormReactiveErrorsTyped,
+  FormReactiveMessagesTyped
+} from '@app/shared/form-validators/form-validator.model'
+import { CustomMarkupService } from '@app/shared/shared-custom-markup/custom-markup.service'
+import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
+import { SelectOptionsComponent } from '@app/shared/shared-forms/select/select-options.component'
+import { SelectRadioComponent } from '@app/shared/shared-forms/select/select-radio.component'
+import { getCompleteLocale, I18N_LOCALES } from '@peertube/peertube-core-utils'
+import { ActorImage, CustomConfig, NSFWPolicyType, VideoConstant } from '@peertube/peertube-models'
+import merge from 'lodash-es/merge'
+import { Subscription } from 'rxjs'
+import { SelectOptionsItem } from 'src/types/select-options-item.model'
+import { AdminConfigService } from '../../../shared/shared-admin/admin-config.service'
+import { CustomMarkupHelpComponent } from '../../../shared/shared-custom-markup/custom-markup-help.component'
+import { MarkdownTextareaComponent } from '../../../shared/shared-forms/markdown-textarea.component'
+import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
+import { SelectCheckboxComponent } from '../../../shared/shared-forms/select/select-checkbox.component'
+import { HelpComponent } from '../../../shared/shared-main/buttons/help.component'
+import { PeerTubeTemplateDirective } from '../../../shared/shared-main/common/peertube-template.directive'
+import { AdminSaveBarComponent } from '../shared/admin-save-bar.component'
+
+type Form = {
+  admin: FormGroup<{
+    email: FormControl<string>
+  }>
+
+  contactForm: FormGroup<{
+    enabled: FormControl<boolean>
+  }>
+
+  instance: FormGroup<{
+    name: FormControl<string>
+    shortDescription: FormControl<string>
+    description: FormControl<string>
+    categories: FormControl<number[]>
+    defaultLanguage: FormControl<string>
+    languages: FormControl<string[]>
+    serverCountry: FormControl<string>
+
+    support: FormGroup<{
+      text: FormControl<string>
+    }>
+
+    social: FormGroup<{
+      externalLink: FormControl<string>
+      mastodonLink: FormControl<string>
+      blueskyLink: FormControl<string>
+      xLink: FormControl<string>
+    }>
+
+    isNSFW: FormControl<boolean>
+    defaultNSFWPolicy: FormControl<NSFWPolicyType>
+
+    terms: FormControl<string>
+    codeOfConduct: FormControl<string>
+    moderationInformation: FormControl<string>
+    administrator: FormControl<string>
+    creationReason: FormControl<string>
+    maintenanceLifetime: FormControl<string>
+    businessModel: FormControl<string>
+    hardwareInformation: FormControl<string>
+  }>
+}
+
+@Component({
+  selector: 'my-admin-config-information',
+  templateUrl: './admin-config-information.component.html',
+  styleUrls: [ './admin-config-common.scss' ],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    SelectRadioComponent,
+    CommonModule,
+    CustomMarkupHelpComponent,
+    MarkdownTextareaComponent,
+    SelectCheckboxComponent,
+    RouterLink,
+    PeertubeCheckboxComponent,
+    PeerTubeTemplateDirective,
+    HelpComponent,
+    AdminSaveBarComponent,
+    SelectOptionsComponent
+  ]
+})
+export class AdminConfigInformationComponent implements OnInit, OnDestroy, CanComponentDeactivate {
+  private customMarkup = inject(CustomMarkupService)
+  private server = inject(ServerService)
+  private route = inject(ActivatedRoute)
+  private formReactiveService = inject(FormReactiveService)
+  private adminConfigService = inject(AdminConfigService)
+
+  form: FormGroup<Form>
+  formErrors: FormReactiveErrorsTyped<Form> = {}
+  validationMessages: FormReactiveMessagesTyped<Form> = {}
+
+  languageItems: SelectOptionsItem[] = []
+  categoryItems: SelectOptionsItem[] = []
+
+  instanceBannerUrl: string
+  instanceAvatars: ActorImage[] = []
+
+  nsfwItems: SelectOptionsItem[] = [
+    {
+      id: 'do_not_list',
+      label: $localize`Hide`
+    },
+    {
+      id: 'warn',
+      label: $localize`Warn`
+    },
+    {
+      id: 'blur',
+      label: $localize`Blur`
+    },
+    {
+      id: 'display',
+      label: $localize`Display`
+    }
+  ]
+
+  defaultLanguageItems: SelectOptionsItem[] = []
+
+  private customConfig: CustomConfig
+  private customConfigSub: Subscription
+
+  get instanceName () {
+    return this.server.getHTMLConfig().instance.name
+  }
+
+  ngOnInit () {
+    this.customConfig = this.route.parent.snapshot.data['customConfig']
+
+    const data = this.route.snapshot.data as {
+      languages: VideoConstant<string>[]
+      categories: VideoConstant<number>[]
+    }
+
+    this.languageItems = data.languages.map(l => ({ label: l.label, id: l.id }))
+    this.categoryItems = data.categories.map(l => ({ label: l.label, id: l.id }))
+    this.defaultLanguageItems = Object.entries(I18N_LOCALES).map(([ id, label ]) => ({ label, id }))
+
+    this.buildForm()
+
+    this.customConfigSub = this.adminConfigService.getCustomConfigReloadedObs()
+      .subscribe(customConfig => {
+        this.customConfig = customConfig
+
+        this.form.patchValue(this.customConfig)
+      })
+  }
+
+  ngOnDestroy () {
+    if (this.customConfigSub) this.customConfigSub.unsubscribe()
+  }
+
+  private buildForm () {
+    const obj: BuildFormArgumentTyped<Form> = {
+      admin: {
+        email: ADMIN_EMAIL_VALIDATOR
+      },
+      contactForm: {
+        enabled: null
+      },
+      instance: {
+        name: INSTANCE_NAME_VALIDATOR,
+        shortDescription: INSTANCE_SHORT_DESCRIPTION_VALIDATOR,
+        description: null,
+
+        isNSFW: null,
+        defaultNSFWPolicy: null,
+
+        terms: null,
+        codeOfConduct: null,
+
+        creationReason: null,
+        moderationInformation: null,
+        administrator: null,
+        maintenanceLifetime: null,
+        businessModel: null,
+
+        hardwareInformation: null,
+
+        defaultLanguage: null,
+
+        categories: null,
+        languages: null,
+
+        serverCountry: null,
+        support: {
+          text: null
+        },
+        social: {
+          externalLink: URL_VALIDATOR,
+          mastodonLink: URL_VALIDATOR,
+          blueskyLink: URL_VALIDATOR,
+          xLink: URL_VALIDATOR
+        }
+      }
+    }
+
+    const defaultValues: FormDefaultTyped<Form> = merge(
+      this.customConfig,
+      {
+        instance: {
+          defaultLanguage: getCompleteLocale(this.customConfig.instance.defaultLanguage)
+        }
+      } satisfies FormDefaultTyped<Form>
+    )
+
+    const {
+      form,
+      formErrors,
+      validationMessages
+    } = this.formReactiveService.buildForm<Form>(obj, defaultValues)
+
+    this.form = form
+    this.formErrors = formErrors
+    this.validationMessages = validationMessages
+  }
+
+  canDeactivate () {
+    return { canDeactivate: !this.form.dirty }
+  }
+
+  getCustomMarkdownRenderer () {
+    return this.customMarkup.getCustomMarkdownRenderer()
+  }
+
+  save () {
+    this.adminConfigService.saveAndUpdateCurrent({
+      currentConfig: this.customConfig,
+      form: this.form,
+      formConfig: this.form.value,
+      success: $localize`Information updated.`
+    })
+  }
+}

client/src/app/+admin/config/pages/admin-config-live.component.html

@@ -1,11 +1,13 @@
-<ng-container [formGroup]="form()">
+<my-admin-save-bar i18n-title title="Live configuration" (save)="save()" [form]="form" [formErrors]="formErrors" [inconsistentOptions]="checkTranscodingConsistentOptions()"></my-admin-save-bar>
 
-  <div class="pt-two-cols mt-5">
+<form [formGroup]="form">
+
+  <div class="pt-two-cols">
     <div class="title-col">
       <h2 i18n>LIVE</h2>
 
       <div i18n class="inner-form-description">
-        Enable users of your instance to stream live.
+        Enable users of your platform to stream a live.
       </div>
     </div>
 
@@ -46,16 +48,16 @@
               </div>
 
               <div class="form-group" [ngClass]="getDisabledLiveClass()">
-                <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your instance</label>
+                <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your platform</label>
 
                 <span i18n class="ms-2 small muted">(-1 for "unlimited")</span>
 
                 <div class="number-with-unit">
                   <input type="number" id="liveMaxInstanceLives" formControlName="maxInstanceLives" />
-                  <span i18n>{form().value['live']['maxInstanceLives'], plural, =1 {live} other {lives}}</span>
+                  <span i18n>{form.value.live.maxInstanceLives, plural, =1 {live} other {lives}}</span>
                 </div>
 
-                <div *ngIf="formErrors().live.maxInstanceLives" class="form-error" role="alert">{{ formErrors().live.maxInstanceLives }}</div>
+                <div *ngIf="formErrors.live.maxInstanceLives" class="form-error" role="alert">{{ formErrors.live.maxInstanceLives }}</div>
               </div>
 
               <div class="form-group" [ngClass]="getDisabledLiveClass()">
@@ -64,10 +66,10 @@
 
                 <div class="number-with-unit">
                   <input type="number" id="liveMaxUserLives" formControlName="maxUserLives" />
-                  <span i18n>{form().value['live']['maxUserLives'], plural, =1 {live} other {lives}}</span>
+                  <span i18n>{form.value.live.maxUserLives, plural, =1 {live} other {lives}}</span>
                 </div>
 
-                <div *ngIf="formErrors().live.maxUserLives" class="form-error" role="alert">{{ formErrors().live.maxUserLives }}</div>
+                <div *ngIf="formErrors.live.maxUserLives" class="form-error" role="alert">{{ formErrors.live.maxUserLives }}</div>
               </div>
 
               <div class="form-group" [ngClass]="getDisabledLiveClass()">
@@ -75,7 +77,7 @@
 
                 <my-select-options inputId="liveMaxDuration" [items]="liveMaxDurationOptions" formControlName="maxDuration"></my-select-options>
 
-                <div *ngIf="formErrors().live.maxDuration" class="form-error" role="alert">{{ formErrors().live.maxDuration }}</div>
+                <div *ngIf="formErrors.live.maxDuration" class="form-error" role="alert">{{ formErrors.live.maxDuration }}</div>
               </div>
 
             </ng-container>
@@ -123,7 +125,7 @@
                   <span>FPS</span>
                 </div>
 
-                <div *ngIf="formErrors().live.transcoding.fps.max" class="form-error" role="alert">{{ formErrors().live.transcoding.fps.max }}</div>
+                <div *ngIf="formErrors.live.transcoding.fps.max" class="form-error" role="alert">{{ formErrors.live.transcoding.fps.max }}</div>
               </div>
 
               <div class="ms-2 mt-3">
@@ -165,10 +167,8 @@
               i18n-labelText labelText="Enable remote runners for lives"
             >
               <ng-container ngProjectAs="description">
-                <span i18n>
-                  Use <a routerLink="/admin/settings/system/runners/runners-list">remote runners</a> to process live transcoding.
-                  Remote runners has to register on your instance first.
-                </span>
+                <div i18n>Use <a routerLink="/admin/settings/system/runners/runners-list">remote runners</a> to process live transcoding.</div>
+                <div i18n>Remote runners have to register on your instance first.</div>
               </ng-container>
             </my-peertube-checkbox>
           </div>
@@ -193,7 +193,7 @@
               formControlName="threads"
               [clearable]="false"
             ></my-select-custom-value>
-            <div *ngIf="formErrors().live.transcoding.threads" class="form-error" role="alert">{{ formErrors().live.transcoding.threads }}</div>
+            <div *ngIf="formErrors.live.transcoding.threads" class="form-error" role="alert">{{ formErrors.live.transcoding.threads }}</div>
           </div>
 
           <div class="form-group mt-4" [ngClass]="getDisabledLiveLocalTranscodingClass()">
@@ -202,7 +202,7 @@
 
             <my-select-options inputId="liveTranscodingProfile" formControlName="profile" [items]="transcodingProfiles"></my-select-options>
 
-            <div *ngIf="formErrors().live.transcoding.profile" class="form-error" role="alert">{{ formErrors().live.transcoding.profile }}</div>
+            <div *ngIf="formErrors.live.transcoding.profile" class="form-error" role="alert">{{ formErrors.live.transcoding.profile }}</div>
           </div>
 
         </ng-container>
@@ -210,4 +210,4 @@
 
     </div>
   </div>
-</ng-container>
+</form>

client/src/app/+admin/config/pages/admin-config-live.component.ts

@@ -0,0 +1,237 @@
+import { CommonModule } from '@angular/common'
+import { Component, OnInit, OnDestroy, inject } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ActivatedRoute, RouterLink } from '@angular/router'
+import { CanComponentDeactivate, ServerService } from '@app/core'
+import {
+  MAX_INSTANCE_LIVES_VALIDATOR,
+  MAX_LIVE_DURATION_VALIDATOR,
+  MAX_USER_LIVES_VALIDATOR,
+  TRANSCODING_MAX_FPS_VALIDATOR,
+  TRANSCODING_THREADS_VALIDATOR
+} from '@app/shared/form-validators/custom-config-validators'
+import {
+  BuildFormArgumentTyped,
+  FormDefaultTyped,
+  FormReactiveErrorsTyped,
+  FormReactiveMessagesTyped
+} from '@app/shared/form-validators/form-validator.model'
+import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
+import { CustomConfig } from '@peertube/peertube-models'
+import { SelectOptionsItem } from 'src/types/select-options-item.model'
+import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
+import { SelectCustomValueComponent } from '../../../shared/shared-forms/select/select-custom-value.component'
+import { SelectOptionsComponent } from '../../../shared/shared-forms/select/select-options.component'
+import { PeerTubeTemplateDirective } from '../../../shared/shared-main/common/peertube-template.directive'
+import { AdminConfigService, FormResolutions, ResolutionOption } from '../../../shared/shared-admin/admin-config.service'
+import { AdminSaveBarComponent } from '../shared/admin-save-bar.component'
+import { Subscription } from 'rxjs'
+
+type Form = {
+  live: FormGroup<{
+    enabled: FormControl<boolean>
+    allowReplay: FormControl<boolean>
+    latencySetting: FormGroup<{
+      enabled: FormControl<boolean>
+    }>
+    maxInstanceLives: FormControl<number>
+    maxUserLives: FormControl<number>
+    maxDuration: FormControl<number>
+
+    transcoding: FormGroup<{
+      enabled: FormControl<boolean>
+
+      fps: FormGroup<{
+        max: FormControl<number>
+      }>
+
+      resolutions: FormGroup<FormResolutions>
+      alwaysTranscodeOriginalResolution: FormControl<boolean>
+
+      remoteRunners: FormGroup<{
+        enabled: FormControl<boolean>
+      }>
+
+      threads: FormControl<number>
+      profile: FormControl<string>
+    }>
+  }>
+}
+
+@Component({
+  selector: 'my-admin-config-live',
+  templateUrl: './admin-config-live.component.html',
+  styleUrls: [ './admin-config-common.scss' ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    PeertubeCheckboxComponent,
+    PeerTubeTemplateDirective,
+    SelectOptionsComponent,
+    RouterLink,
+    SelectCustomValueComponent,
+    AdminSaveBarComponent
+  ]
+})
+export class AdminConfigLiveComponent implements OnInit, OnDestroy, CanComponentDeactivate {
+  private configService = inject(AdminConfigService)
+  private server = inject(ServerService)
+  private route = inject(ActivatedRoute)
+  private formReactiveService = inject(FormReactiveService)
+  private adminConfigService = inject(AdminConfigService)
+
+  form: FormGroup<Form>
+  formErrors: FormReactiveErrorsTyped<Form> = {}
+  validationMessages: FormReactiveMessagesTyped<Form> = {}
+
+  transcodingThreadOptions: SelectOptionsItem[] = []
+  transcodingProfiles: SelectOptionsItem[] = []
+
+  liveMaxDurationOptions: SelectOptionsItem[] = []
+  liveResolutions: ResolutionOption[] = []
+
+  private customConfig: CustomConfig
+  private customConfigSub: Subscription
+
+  ngOnInit () {
+    this.customConfig = this.route.parent.snapshot.data['customConfig']
+
+    this.transcodingThreadOptions = this.configService.transcodingThreadOptions
+
+    this.liveMaxDurationOptions = [
+      { id: -1, label: $localize`No limit` },
+      { id: 1000 * 3600, label: $localize`1 hour` },
+      { id: 1000 * 3600 * 3, label: $localize`3 hours` },
+      { id: 1000 * 3600 * 5, label: $localize`5 hours` },
+      { id: 1000 * 3600 * 10, label: $localize`10 hours` }
+    ]
+
+    this.liveResolutions = this.adminConfigService.getTranscodingOptions('live')
+    this.transcodingProfiles = this.adminConfigService.buildTranscodingProfiles(
+      this.server.getHTMLConfig().live.transcoding.availableProfiles
+    )
+
+    this.buildForm()
+
+    this.customConfigSub = this.adminConfigService.getCustomConfigReloadedObs()
+      .subscribe(customConfig => {
+        this.customConfig = customConfig
+
+        this.form.patchValue(this.customConfig)
+      })
+  }
+
+  ngOnDestroy () {
+    if (this.customConfigSub) this.customConfigSub.unsubscribe()
+  }
+
+  private buildForm () {
+    const obj: BuildFormArgumentTyped<Form> = {
+      live: {
+        enabled: null,
+        allowReplay: null,
+
+        maxDuration: MAX_LIVE_DURATION_VALIDATOR,
+        maxInstanceLives: MAX_INSTANCE_LIVES_VALIDATOR,
+        maxUserLives: MAX_USER_LIVES_VALIDATOR,
+        latencySetting: {
+          enabled: null
+        },
+
+        transcoding: {
+          enabled: null,
+          threads: TRANSCODING_THREADS_VALIDATOR,
+          profile: null,
+          resolutions: this.adminConfigService.buildFormResolutions('live'),
+          alwaysTranscodeOriginalResolution: null,
+          remoteRunners: {
+            enabled: null
+          },
+          fps: {
+            max: TRANSCODING_MAX_FPS_VALIDATOR
+          }
+        }
+      }
+    }
+
+    const defaultValues: FormDefaultTyped<Form> = this.customConfig
+
+    const {
+      form,
+      formErrors,
+      validationMessages
+    } = this.formReactiveService.buildForm<Form>(obj, defaultValues)
+
+    this.form = form
+    this.formErrors = formErrors
+    this.validationMessages = validationMessages
+  }
+
+  canDeactivate () {
+    return { canDeactivate: !this.form.dirty }
+  }
+
+  getResolutionKey (resolution: string) {
+    return 'live.transcoding.resolutions.' + resolution
+  }
+
+  getLiveRTMPPort () {
+    return this.server.getHTMLConfig().live.rtmp.port
+  }
+
+  isLiveEnabled () {
+    return this.form.value.live.enabled === true
+  }
+
+  isRemoteRunnerLiveEnabled () {
+    return this.form.value.live.transcoding.remoteRunners.enabled === true
+  }
+
+  getDisabledLiveClass () {
+    return { 'disabled-checkbox-extra': !this.isLiveEnabled() }
+  }
+
+  getDisabledLiveTranscodingClass () {
+    return { 'disabled-checkbox-extra': !this.isLiveEnabled() || !this.isLiveTranscodingEnabled() }
+  }
+
+  getDisabledLiveLocalTranscodingClass () {
+    return { 'disabled-checkbox-extra': !this.isLiveEnabled() || !this.isLiveTranscodingEnabled() || this.isRemoteRunnerLiveEnabled() }
+  }
+
+  isLiveTranscodingEnabled () {
+    return this.form.value.live.transcoding.enabled === true
+  }
+
+  getTotalTranscodingThreads () {
+    return this.adminConfigService.getTotalTranscodingThreads({
+      transcoding: this.customConfig.transcoding,
+      live: {
+        transcoding: {
+          enabled: this.form.value.live.transcoding.enabled,
+          threads: this.form.value.live.transcoding.threads
+        }
+      }
+    })
+  }
+
+  save () {
+    this.adminConfigService.saveAndUpdateCurrent({
+      currentConfig: this.customConfig,
+      form: this.form,
+      formConfig: this.form.value,
+      success: $localize`Live configuration updated.`
+    })
+  }
+
+  checkTranscodingConsistentOptions () {
+    return this.adminConfigService.checkTranscodingConsistentOptions({
+      transcoding: this.customConfig.transcoding,
+      live: {
+        enabled: this.form.value.live.enabled,
+        allowReplay: this.form.value.live.allowReplay
+      }
+    })
+  }
+}

client/src/app/+admin/config/pages/admin-config-logo.component.html

@@ -0,0 +1,132 @@
+<my-admin-save-bar i18n-title title="Upload logos" (save)="save()" [form]="form" [formErrors]="formErrors"></my-admin-save-bar>
+
+<form [formGroup]="form">
+  <div class="pt-two-cols mt-4">
+    <div class="title-col">
+      <h2 i18n>LOGO</h2>
+    </div>
+
+    <div class="content-col">
+      <div class="form-group">
+        <label i18n for="avatarfile">Square icon</label>
+
+        <div class="form-group-description">
+          <div class="mb-0">
+            <div i18n>Square icon is used in the mobile application and can be used on your custom homepage.</div>
+            <div i18n>It's also used as a fallback for the favicon, header icon and social media logo.</div>
+          </div>
+        </div>
+
+        <my-preview-upload class="avatar-preview" formControlName="avatar" inputName="avatar" displayDelete="true"></my-preview-upload>
+      </div>
+
+      <div class="form-group">
+        <label i18n for="bannerfile">Banner</label>
+
+        <div class="form-group-description">
+          <p i18n class="mb-0">Banner is displayed in the about, login and registration pages and be used on your custom homepage.</p>
+          <p i18n>
+            It can also be displayed on external websites to promote your instance, such as <a target="_blank" href="https://joinpeertube.org/instances"
+            >JoinPeerTube.org</a>.
+          </p>
+        </div>
+
+        <my-preview-upload class="banner-preview" formControlName="banner" inputName="banner" displayDelete="true"></my-preview-upload>
+      </div>
+
+      <div class="form-group">
+        <label i18n for="favicon">Favicon</label>
+
+        <div class="form-group-description">
+          <p class="mb-0">
+            <ng-container i18n>Favicon is the icon displayed in web browser tab. </ng-container>
+            <ng-container i18n>If not set, the <strong>Square icon</strong> will be used.</ng-container>
+          </p>
+
+          <p i18n>It will be resized to 32x32 pixels and converted to .png format.</p>
+        </div>
+
+        <my-preview-upload
+          class="favicon-preview"
+          formControlName="favicon"
+          inputName="favicon"
+          displayDelete="true"
+          buttonsAside="true"
+          [previewSize]="{ height: '32px', width: '32px' }"
+        ></my-preview-upload>
+      </div>
+
+      <div class="form-group">
+        <label i18n for="header-wide">Desktop header logo</label>
+
+        <div class="form-group-description">
+          <p class="mb-0">
+            <ng-container i18n>Logo displayed in the header on large screens such as desktop computers.</ng-container>
+            <ng-container i18n>If not set, the <strong>Square icon</strong> will be used.</ng-container>
+          </p>
+
+          <p i18n>Its height will be reduced to 48 pixels and the width will be calculated based on the original file ratio.</p>
+        </div>
+
+        <my-preview-upload
+          class="header-wide-preview"
+          formControlName="header-wide"
+          inputName="header-wide"
+          displayDelete="true"
+          buttonsAside="true"
+          [previewSize]="{ height: '48px', width: 'auto' }"
+        ></my-preview-upload>
+      </div>
+
+      <div class="form-group">
+        <my-peertube-checkbox
+          inputName="hideInstanceName"
+          formControlName="hideInstanceName"
+          i18n-labelText
+          labelText="Hide the name of your platform in the header on desktop (wide screens)"
+        >
+          <ng-container ngProjectAs="description">
+            <div i18n>Useful for example if your "Desktop header logo" already includes your platform name</div>
+          </ng-container>
+        </my-peertube-checkbox>
+      </div>
+
+      <div class="form-group">
+        <label i18n for="header-square">Mobile header logo</label>
+
+        <div class="form-group-description">
+          <p class="mb-0">
+            <ng-container i18n>Logo displayed in the header on small screens such as mobile devices. </ng-container>
+            <ng-container i18n>If not set, the <strong>Square icon</strong> will be used.</ng-container>
+          </p>
+
+          <p i18n>It will be resized to 48x48 pixels.</p>
+        </div>
+
+        <my-preview-upload
+          class="header-square-preview"
+          formControlName="header-square"
+          inputName="header-square"
+          displayDelete="true"
+          buttonsAside="true"
+          [previewSize]="{ height: '48px', width: '48px' }"
+        ></my-preview-upload>
+      </div>
+
+      <div class="form-group">
+        <label i18n for="opengraph">Social media logo</label>
+
+        <div class="form-group-description">
+          <p class="mb-0">
+            <ng-container i18n>Default logo displayed on social media. </ng-container>
+            <ng-container i18n>If not set, the <strong>Square icon</strong> will be used.</ng-container>
+          </p>
+
+          <p i18n>It will be resized to 1200x650 pixels.</p>
+        </div>
+
+        <my-preview-upload class="opengraph-preview" formControlName="opengraph" inputName="opengraph" displayDelete="true"></my-preview-upload>
+      </div>
+    </div>
+  </div>
+</form>

client/src/app/+admin/config/pages/admin-config-logo.component.scss

@@ -0,0 +1,30 @@
+@use "sass:math";
+@use "_variables" as *;
+@use "_mixins" as *;
+@use "_form-mixins" as *;
+
+.banner-preview {
+  max-width: 500px;
+  aspect-ratio: math.div(1, $banner-inverted-ratio);
+  width: 100%;
+  height: auto;
+}
+
+.avatar-preview,
+.header-square-preview {
+  width: 128px;
+  height: 128px;
+}
+
+.header-wide-preview {
+  width: auto;
+  height: 128px;
+  max-width: 500px;
+}
+
+.opengraph-preview {
+  max-width: 500px;
+  aspect-ratio: math.div(1200, 630);
+  width: 100%;
+  height: auto;
+}

client/src/app/+admin/config/pages/admin-config-logo.component.ts

@@ -0,0 +1,174 @@
+import { CommonModule } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ActivatedRoute } from '@angular/router'
+import { CanComponentDeactivate, Notifier, ServerService } from '@app/core'
+import {
+  BuildFormArgumentTyped,
+  FormReactiveErrorsTyped,
+  FormReactiveMessagesTyped
+} from '@app/shared/form-validators/form-validator.model'
+import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
+import { PeertubeCheckboxComponent } from '@app/shared/shared-forms/peertube-checkbox.component'
+import { CustomConfig, LogoType } from '@peertube/peertube-models'
+import { of, Subscription, switchMap, tap } from 'rxjs'
+import { AdminConfigService } from '../../../shared/shared-admin/admin-config.service'
+import { PreviewUploadComponent } from '../../../shared/shared-forms/preview-upload.component'
+import { AdminSaveBarComponent } from '../shared/admin-save-bar.component'
+import { InstanceLogoService } from '../../../shared/shared-instance/instance-logo.service'
+
+type Form = {
+  hideInstanceName: FormControl<boolean>
+
+  avatar: FormControl<Blob>
+  banner: FormControl<Blob>
+  favicon: FormControl<Blob>
+  'header-square': FormControl<Blob>
+  'header-wide': FormControl<Blob>
+  opengraph: FormControl<Blob>
+}
+
+@Component({
+  selector: 'my-admin-config-logo',
+  templateUrl: './admin-config-logo.component.html',
+  styleUrls: [ './admin-config-logo.component.scss', './admin-config-common.scss' ],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule,
+    AdminSaveBarComponent,
+    PreviewUploadComponent,
+    PeertubeCheckboxComponent
+  ]
+})
+export class AdminConfigLogoComponent implements OnInit, OnDestroy, CanComponentDeactivate {
+  private notifier = inject(Notifier)
+  private logoService = inject(InstanceLogoService)
+  private server = inject(ServerService)
+  private route = inject(ActivatedRoute)
+  private formReactiveService = inject(FormReactiveService)
+  private serverService = inject(ServerService)
+  private adminConfigService = inject(AdminConfigService)
+
+  form: FormGroup<Form>
+  formErrors: FormReactiveErrorsTyped<Form> = {}
+  validationMessages: FormReactiveMessagesTyped<Form> = {}
+
+  private customConfig: CustomConfig
+  private customConfigSub: Subscription
+
+  get instanceName () {
+    return this.server.getHTMLConfig().instance.name
+  }
+
+  ngOnInit () {
+    this.customConfig = this.route.parent.snapshot.data['customConfig']
+
+    this.buildForm()
+
+    this.customConfigSub = this.adminConfigService.getCustomConfigReloadedObs()
+      .subscribe(customConfig => {
+        this.customConfig = customConfig
+
+        this.form.patchValue({ hideInstanceName: customConfig.client.header.hideInstanceName })
+      })
+  }
+
+  ngOnDestroy () {
+    if (this.customConfigSub) this.customConfigSub.unsubscribe()
+  }
+
+  private buildForm () {
+    const obj: BuildFormArgumentTyped<Form> = {
+      'hideInstanceName': null,
+
+      'avatar': null,
+      'banner': null,
+      'favicon': null,
+      'header-square': null,
+      'header-wide': null,
+      'opengraph': null
+    }
+
+    const defaultValues = {
+      hideInstanceName: this.customConfig.client.header.hideInstanceName,
+
+      ...this.route.snapshot.data.logos
+    }
+
+    const {
+      form,
+      formErrors,
+      validationMessages
+    } = this.formReactiveService.buildForm<Form>(obj, defaultValues)
+
+    this.form = form
+    this.formErrors = formErrors
+    this.validationMessages = validationMessages
+  }
+
+  canDeactivate () {
+    return { canDeactivate: !this.form.dirty }
+  }
+
+  save () {
+    this.adminConfigService.updateCustomConfig({
+      client: {
+        header: {
+          hideInstanceName: this.form.value.hideInstanceName
+        }
+      }
+    }).pipe(
+      switchMap(() => this.serverService.resetConfig()),
+      tap(newConfig => Object.assign(this.customConfig, newConfig)),
+      switchMap(() => this.buildSaveAvatar()),
+      switchMap(() => this.saveBanner()),
+      switchMap(() => this.saveLogo('favicon')),
+      switchMap(() => this.saveLogo('header-square')),
+      switchMap(() => this.saveLogo('header-wide')),
+      switchMap(() => this.saveLogo('opengraph')),
+      switchMap(() => this.serverService.resetConfig()),
+      switchMap(() => this.logoService.getAllLogos())
+    ).subscribe({
+      next: logos => {
+        this.notifier.success($localize`Logos updated`)
+
+        this.form.patchValue(logos)
+        this.form.markAsPristine()
+      },
+
+      error: err => this.notifier.error(err.message)
+    })
+  }
+
+  private buildSaveAvatar () {
+    if (this.form.controls.avatar.pristine) return of(true)
+
+    const avatar = this.form.value.avatar
+
+    return avatar
+      ? this.logoService.updateAvatar(avatar)
+      : this.logoService.deleteAvatar()
+  }
+
+  private saveBanner () {
+    if (this.form.controls.banner.pristine) return of(true)
+
+    const banner = this.form.value.banner
+
+    return banner
+      ? this.logoService.updateBanner(banner)
+      : this.logoService.deleteBanner()
+  }
+
+  private saveLogo (type: LogoType) {
+    const control = this.form.get(type)
+    if (control.pristine) return of(true)
+
+    const logo = control.value
+
+    return logo
+      ? this.logoService.updateLogo(logo, type)
+      : this.logoService.deleteLogo(type)
+  }
+}

client/src/app/+admin/config/pages/admin-config-vod.component.html

@@ -1,10 +1,18 @@
-<ng-container [formGroup]="form()">
+<my-admin-save-bar i18n-title title="VOD configuration" (save)="save()" [form]="form" [formErrors]="formErrors" [inconsistentOptions]="checkTranscodingConsistentOptions()"></my-admin-save-bar>
+
+<form [formGroup]="form">
+
+  <div class="pt-two-cols">
+    <div class="title-col">
+      <h2 i18n>TRANSCODING</h2>
+
+      <div i18n class="inner-form-description">
+        Process uploaded videos so that they are streamable on any device. Although this is costly in terms of resources, it is a critical part of PeerTube, so proceed with caution.
+      </div>
+    </div>
 
-  <div class="pt-two-cols mt-4">
-    <div class="title-col"></div>
     <div class="content-col">
-
-      <div class="callout callout-primary">
+      <div class="callout callout-primary mb-4">
         <span i18n>
           Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically.
         </span>
@@ -15,20 +23,6 @@
           However, you may want to read <a class="link-primary" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin/configuration#vod-transcoding">our guidelines</a> before tweaking the following values.
         </span>
       </div>
-    </div>
-  </div>
-
-  <div class="pt-two-cols mt-4">
-    <div class="title-col">
-      <h2 i18n>TRANSCODING</h2>
-
-      <div i18n class="inner-form-description">
-        Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
-        resources, this is a critical part of PeerTube, so tread carefully.
-      </div>
-    </div>
-
-    <div class="content-col">
 
       <ng-container formGroupName="transcoding">
 
@@ -151,7 +145,7 @@
                     <span>FPS</span>
                   </div>
 
-                  <div *ngIf="formErrors().transcoding.fps.max" class="form-error" role="alert">{{ formErrors().transcoding.fps.max }}</div>
+                  <div *ngIf="formErrors.transcoding.fps.max" class="form-error" role="alert">{{ formErrors.transcoding.fps.max }}</div>
                 </div>
 
                 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
@@ -191,10 +185,8 @@
             i18n-labelText labelText="Enable remote runners for VOD"
           >
             <ng-container ngProjectAs="description">
-              <span i18n>
-                Use <a routerLink="/admin/settings/system/runners/runners-list">remote runners</a> to process VOD transcoding.
-                Remote runners has to register on your instance first.
-              </span>
+              <div i18n>Use <a routerLink="/admin/settings/system/runners/runners-list">remote runners</a> to process VOD transcoding.</div>
+              <div i18n>Remote runners have to register on your instance first.</div>
             </ng-container>
           </my-peertube-checkbox>
         </div>
@@ -220,7 +212,7 @@
             [clearable]="false"
           ></my-select-custom-value>
 
-          <div *ngIf="formErrors().transcoding.threads" class="form-error" role="alert">{{ formErrors().transcoding.threads }}</div>
+          <div *ngIf="formErrors.transcoding.threads" class="form-error" role="alert">{{ formErrors.transcoding.threads }}</div>
         </div>
 
         <div class="form-group" [ngClass]="getLocalTranscodingDisabledClass()">
@@ -232,7 +224,7 @@
             <span i18n>jobs in parallel</span>
           </div>
 
-          <div *ngIf="formErrors().transcoding.concurrency" class="form-error" role="alert">{{ formErrors().transcoding.concurrency }}</div>
+          <div *ngIf="formErrors.transcoding.concurrency" class="form-error" role="alert">{{ formErrors.transcoding.concurrency }}</div>
         </div>
 
         <div class="form-group" [ngClass]="getLocalTranscodingDisabledClass()">
@@ -241,7 +233,7 @@
 
           <my-select-options inputId="transcodingProfile" formControlName="profile" [items]="transcodingProfiles"></my-select-options>
 
-          <div *ngIf="formErrors().transcoding.profile" class="form-error" role="alert">{{ formErrors().transcoding.profile }}</div>
+          <div *ngIf="formErrors.transcoding.profile" class="form-error" role="alert">{{ formErrors.transcoding.profile }}</div>
         </div>
 
       </ng-container>
@@ -268,23 +260,23 @@
             <ng-container ngProjectAs="description" *ngIf="!isTranscodingEnabled()">
               <span i18n>⚠️ You need to enable transcoding first to enable video studio</span>
             </ng-container>
-          </my-peertube-checkbox>
-        </div>
 
-        <div class="form-group" formGroupName="remoteRunners" [ngClass]="getStudioDisabledClass()">
+            <ng-container ngProjectAs="extra">
+              <div class="form-group" formGroupName="remoteRunners" [ngClass]="getStudioRunnerDisabledClass()">
                 <my-peertube-checkbox
                   inputName="videoStudioRemoteRunnersEnabled" formControlName="enabled"
                   i18n-labelText labelText="Enable remote runners for studio"
                 >
                   <ng-container ngProjectAs="description">
-              <span i18n>
-                Use <a routerLink="/admin/settings/system/runners/runners-list">remote runners</a> to process studio transcoding tasks.
-                Remote runners has to register on your instance first.
-              </span>
+                    <div i18n>Use <a routerLink="/admin/settings/system/runners/runners-list">remote runners</a> to process studio transcoding tasks.</div>
+                    <div i18n>Remote runners have to register on your instance first.</div>
+                  </ng-container>
+                </my-peertube-checkbox>
+              </div>
             </ng-container>
           </my-peertube-checkbox>
         </div>
       </ng-container>
     </div>
   </div>
-</ng-container>
+</form>

client/src/app/+admin/config/pages/admin-config-vod.component.ts

@@ -0,0 +1,308 @@
+import { CommonModule } from '@angular/common'
+import { Component, OnInit, OnDestroy, inject } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ActivatedRoute, RouterLink } from '@angular/router'
+import { CanComponentDeactivate, Notifier, ServerService } from '@app/core'
+import {
+  CONCURRENCY_VALIDATOR,
+  TRANSCODING_MAX_FPS_VALIDATOR,
+  TRANSCODING_THREADS_VALIDATOR
+} from '@app/shared/form-validators/custom-config-validators'
+import {
+  BuildFormArgumentTyped,
+  FormDefaultTyped,
+  FormReactiveErrorsTyped,
+  FormReactiveMessagesTyped
+} from '@app/shared/form-validators/form-validator.model'
+import { FormReactiveService } from '@app/shared/shared-forms/form-reactive.service'
+import { CustomConfig } from '@peertube/peertube-models'
+import { Subscription } from 'rxjs'
+import { SelectOptionsItem } from 'src/types/select-options-item.model'
+import { AdminConfigService, FormResolutions, ResolutionOption } from '../../../shared/shared-admin/admin-config.service'
+import { PeertubeCheckboxComponent } from '../../../shared/shared-forms/peertube-checkbox.component'
+import { SelectCustomValueComponent } from '../../../shared/shared-forms/select/select-custom-value.component'
+import { SelectOptionsComponent } from '../../../shared/shared-forms/select/select-options.component'
+import { PeerTubeTemplateDirective } from '../../../shared/shared-main/common/peertube-template.directive'
+import { AdminSaveBarComponent } from '../shared/admin-save-bar.component'
+
+type Form = {
+  transcoding: FormGroup<{
+    enabled: FormControl<boolean>
+    allowAdditionalExtensions: FormControl<boolean>
+    allowAudioFiles: FormControl<boolean>
+
+    originalFile: FormGroup<{
+      keep: FormControl<boolean>
+    }>
+
+    webVideos: FormGroup<{
+      enabled: FormControl<boolean>
+    }>
+
+    hls: FormGroup<{
+      enabled: FormControl<boolean>
+      splitAudioAndVideo: FormControl<boolean>
+    }>
+
+    fps: FormGroup<{
+      max: FormControl<number>
+    }>
+
+    resolutions: FormGroup<FormResolutions>
+    alwaysTranscodeOriginalResolution: FormControl<boolean>
+
+    remoteRunners: FormGroup<{
+      enabled: FormControl<boolean>
+    }>
+
+    threads: FormControl<number>
+
+    profile: FormControl<string>
+    concurrency: FormControl<number>
+  }>
+
+  videoStudio: FormGroup<{
+    enabled: FormControl<boolean>
+    remoteRunners: FormGroup<{
+      enabled: FormControl<boolean>
+    }>
+  }>
+}
+
+@Component({
+  selector: 'my-admin-config-vod',
+  templateUrl: './admin-config-vod.component.html',
+  styleUrls: [ './admin-config-common.scss' ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    PeertubeCheckboxComponent,
+    PeerTubeTemplateDirective,
+    RouterLink,
+    SelectCustomValueComponent,
+    SelectOptionsComponent,
+    AdminSaveBarComponent
+  ]
+})
+export class AdminConfigVODComponent implements OnInit, OnDestroy, CanComponentDeactivate {
+  private configService = inject(AdminConfigService)
+  private notifier = inject(Notifier)
+  private server = inject(ServerService)
+  private route = inject(ActivatedRoute)
+  private formReactiveService = inject(FormReactiveService)
+  private adminConfigService = inject(AdminConfigService)
+
+  form: FormGroup<Form>
+  formErrors: FormReactiveErrorsTyped<Form> = {}
+  validationMessages: FormReactiveMessagesTyped<Form> = {}
+
+  transcodingThreadOptions: SelectOptionsItem[] = []
+  transcodingProfiles: SelectOptionsItem[] = []
+  resolutions: ResolutionOption[] = []
+
+  additionalVideoExtensions = ''
+
+  private customConfig: CustomConfig
+  private customConfigSub: Subscription
+
+  ngOnInit () {
+    const serverConfig = this.server.getHTMLConfig()
+
+    this.customConfig = this.route.parent.snapshot.data['customConfig']
+
+    this.transcodingThreadOptions = this.configService.transcodingThreadOptions
+    this.resolutions = this.adminConfigService.getTranscodingOptions('vod')
+    this.additionalVideoExtensions = serverConfig.video.file.extensions.join(' ')
+    this.transcodingProfiles = this.adminConfigService.buildTranscodingProfiles(serverConfig.transcoding.availableProfiles)
+
+    this.buildForm()
+
+    this.subscribeToTranscodingChanges()
+
+    this.customConfigSub = this.adminConfigService.getCustomConfigReloadedObs()
+      .subscribe(customConfig => {
+        this.customConfig = customConfig
+
+        this.form.patchValue(this.customConfig)
+      })
+  }
+
+  ngOnDestroy () {
+    if (this.customConfigSub) this.customConfigSub.unsubscribe()
+  }
+
+  private buildForm () {
+    const obj: BuildFormArgumentTyped<Form> = {
+      transcoding: {
+        enabled: null,
+        allowAdditionalExtensions: null,
+        allowAudioFiles: null,
+
+        originalFile: {
+          keep: null
+        },
+
+        webVideos: {
+          enabled: null
+        },
+
+        hls: {
+          enabled: null,
+          splitAudioAndVideo: null
+        },
+
+        fps: {
+          max: TRANSCODING_MAX_FPS_VALIDATOR
+        },
+
+        resolutions: this.adminConfigService.buildFormResolutions('vod'),
+        alwaysTranscodeOriginalResolution: null,
+
+        remoteRunners: {
+          enabled: null
+        },
+
+        threads: TRANSCODING_THREADS_VALIDATOR,
+
+        profile: null,
+        concurrency: CONCURRENCY_VALIDATOR
+      },
+
+      videoStudio: {
+        enabled: null,
+        remoteRunners: {
+          enabled: null
+        }
+      }
+    }
+
+    const defaultValues: FormDefaultTyped<Form> = this.customConfig
+
+    const {
+      form,
+      formErrors,
+      validationMessages
+    } = this.formReactiveService.buildForm<Form>(obj, defaultValues)
+
+    this.form = form
+    this.formErrors = formErrors
+    this.validationMessages = validationMessages
+  }
+
+  canDeactivate () {
+    return { canDeactivate: !this.form.dirty }
+  }
+
+  getResolutionKey (resolution: string) {
+    return 'transcoding.resolutions.' + resolution
+  }
+
+  isRemoteRunnerVODEnabled () {
+    return this.form.value.transcoding.remoteRunners.enabled === true
+  }
+
+  isTranscodingEnabled () {
+    return this.form.value.transcoding.enabled === true
+  }
+
+  isHLSEnabled () {
+    return this.form.value.transcoding.hls.enabled === true
+  }
+
+  isStudioEnabled () {
+    return this.form.value.videoStudio.enabled === true
+  }
+
+  getTranscodingDisabledClass () {
+    return { 'disabled-checkbox-extra': !this.isTranscodingEnabled() }
+  }
+
+  getHLSDisabledClass () {
+    return { 'disabled-checkbox-extra': !this.isHLSEnabled() }
+  }
+
+  getLocalTranscodingDisabledClass () {
+    return { 'disabled-checkbox-extra': !this.isTranscodingEnabled() || this.isRemoteRunnerVODEnabled() }
+  }
+
+  getStudioRunnerDisabledClass () {
+    return { 'disabled-checkbox-extra': !this.isStudioEnabled() }
+  }
+
+  getTotalTranscodingThreads () {
+    return this.adminConfigService.getTotalTranscodingThreads({
+      live: this.customConfig.live,
+      transcoding: {
+        enabled: this.form.value.transcoding.enabled,
+        threads: this.form.value.transcoding.threads
+      }
+    })
+  }
+
+  private subscribeToTranscodingChanges () {
+    const controls = this.form.controls
+
+    const transcodingControl = controls.transcoding.controls.enabled
+    const videoStudioControl = controls.videoStudio.controls.enabled
+    const hlsControl = controls.transcoding.controls.hls.controls.enabled
+    const webVideosControl = controls.transcoding.controls.webVideos.controls.enabled
+
+    webVideosControl.valueChanges
+      .subscribe(newValue => {
+        if (newValue === false && hlsControl.value === false) {
+          hlsControl.setValue(true)
+
+          this.notifier.info(
+            $localize`Automatically enable HLS transcoding because at least 1 output format must be enabled when transcoding is enabled`,
+            '',
+            10000
+          )
+        }
+      })
+
+    hlsControl.valueChanges
+      .subscribe(newValue => {
+        if (newValue === false && webVideosControl.value === false) {
+          webVideosControl.setValue(true)
+
+          this.notifier.info(
+            // eslint-disable-next-line max-len
+            $localize`Automatically enable Web Videos transcoding because at least 1 output format must be enabled when transcoding is enabled`,
+            '',
+            10000
+          )
+        }
+      })
+
+    transcodingControl.valueChanges
+      .subscribe(newValue => {
+        if (newValue === false) {
+          videoStudioControl.setValue(false)
+        }
+      })
+
+    transcodingControl.updateValueAndValidity()
+    webVideosControl.updateValueAndValidity()
+    videoStudioControl.updateValueAndValidity()
+    hlsControl.updateValueAndValidity()
+  }
+
+  save () {
+    this.adminConfigService.saveAndUpdateCurrent({
+      currentConfig: this.customConfig,
+      form: this.form,
+      formConfig: this.form.value,
+      success: $localize`VOD configuration updated.`
+    })
+  }
+
+  checkTranscodingConsistentOptions () {
+    return this.adminConfigService.checkTranscodingConsistentOptions({
+      transcoding: {
+        enabled: this.form.value.transcoding.enabled
+      },
+      live: this.customConfig.live
+    })
+  }
+}