Fix lint

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

.dprint.json

@@ -67,6 +67,16 @@
   "json": {},
   "markdown": {},
   "toml": {},
+  "malva": {
+    "quotes": "preferDouble",
+    "printWidth": 140,
+    "hexCase": "ignore",
+    "blockSelectorLinebreak": "always"
+  },
+  "markup": {
+    "printWidth": 160,
+    "preferAttrsSingleLine": true
+  },
   "excludes": [
     "**/node_modules",
     "**/*-lock.json",
@@ -76,6 +86,8 @@
     "https://plugins.dprint.dev/typescript-0.91.1.wasm",
     "https://plugins.dprint.dev/json-0.19.3.wasm",
     "https://plugins.dprint.dev/markdown-0.17.1.wasm",
-    "https://plugins.dprint.dev/toml-0.6.2.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"
   ]
 }

.eslintrc.json

@@ -1,151 +0,0 @@
-{
-  "extends": "standard-with-typescript",
-  "root": true,
-  "rules": {
-    "eol-last": [
-      "error",
-      "always"
-    ],
-    "indent": "off",
-    "no-lone-blocks": "off",
-    "no-mixed-operators": "off",
-    "max-len": [
-      "error",
-      {
-        "code": 140
-      }
-    ],
-    "array-bracket-spacing": [
-      "error",
-      "always"
-    ],
-    "quote-props": [
-      "error",
-      "consistent-as-needed"
-    ],
-    "padded-blocks": "off",
-    "prefer-regex-literals": "off",
-    "no-async-promise-executor": "off",
-    "dot-notation": "off",
-    "promise/param-names": "off",
-    "import/first": "off",
-    "operator-linebreak": [
-      "error",
-      "after",
-      {
-        "overrides": {
-          "?": "before",
-          ":": "before"
-        }
-      }
-    ],
-    "quotes": "off",
-
-    "no-constant-binary-expression": "error",
-
-    "@typescript-eslint/indent": [
-      "error",
-      2,
-      {
-        "SwitchCase": 1,
-        "MemberExpression": "off",
-        // https://github.com/eslint/eslint/issues/15299
-        "ignoredNodes": ["PropertyDefinition", "TSTypeParameterInstantiation", "TSConditionalType *"]
-      }
-    ],
-    "@typescript-eslint/consistent-type-assertions": [
-      "error",
-      {
-        "assertionStyle": "as"
-      }
-    ],
-    "@typescript-eslint/array-type": [
-      "error",
-      {
-        "default": "array"
-      }
-    ],
-    "@typescript-eslint/restrict-template-expressions": [
-      "off",
-      {
-        "allowNumber": "true"
-      }
-    ],
-    "@typescript-eslint/no-this-alias": [
-      "error",
-      {
-        "allowDestructuring": true, // Allow `const { props, state } = this`; false by default
-        "allowedNames": ["self"] // Allow `const self = this`; `[]` by default
-      }
-    ],
-
-    "@typescript-eslint/return-await": "off",
-    "@typescript-eslint/dot-notation": "off",
-    "@typescript-eslint/method-signature-style": "off",
-    "@typescript-eslint/no-base-to-string": "off",
-    "@typescript-eslint/quotes": [
-        "error",
-        "single",
-        {
-            "avoidEscape": true,
-            "allowTemplateLiterals": true
-        }
-    ],
-    "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/promise-function-async": "off",
-    "@typescript-eslint/no-dynamic-delete": "off",
-    "@typescript-eslint/no-unnecessary-boolean-literal-compare": "off",
-    "@typescript-eslint/strict-boolean-expressions": "off",
-    "@typescript-eslint/consistent-type-definitions": "off",
-    "@typescript-eslint/no-misused-promises": "off",
-    "@typescript-eslint/no-namespace": "off",
-    "@typescript-eslint/no-empty-interface": "off",
-    "@typescript-eslint/no-extraneous-class": "off",
-    "@typescript-eslint/no-use-before-define": "off",
-
-    "require-await": "off",
-    "@typescript-eslint/require-await": "error",
-
-    // bugged but useful
-    "@typescript-eslint/restrict-plus-operands": "off",
-
-    // Requires strictNullChecks
-    "@typescript-eslint/prefer-nullish-coalescing": "off",
-    "@typescript-eslint/consistent-type-imports": "off",
-    "@typescript-eslint/consistent-indexed-object-style": "off",
-    "@typescript-eslint/no-confusing-void-expression": "off",
-    "@typescript-eslint/consistent-type-exports": "off",
-    "@typescript-eslint/key-spacing": "off",
-
-    "@typescript-eslint/no-unsafe-argument": "off",
-
-    "@typescript-eslint/ban-types": [
-      "error",
-      {
-        "types": {
-          "{}": false,
-          "Function": false
-        },
-        "extendDefaults": true
-      }
-    ]
-  },
-  "ignorePatterns": [
-    "node_modules",
-    "packages/tests/fixtures",
-    "apps/**/dist",
-    "packages/**/dist",
-    "server/dist",
-    "packages/types-generator/tests",
-    "*.js",
-    "/client",
-    "/dist"
-  ],
-  "parserOptions": {
-    "project": [
-      "./tsconfig.eslint.json"
-    ],
-    "EXPERIMENTAL_useSourceOfProjectReferenceRedirect": true
-  }
-}

.github/CONTRIBUTING.md

@@ -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/ISSUE_TEMPLATE/config.yml

@@ -1,11 +1,11 @@
 blank_issues_enabled: false
 contact_links:
-  - name: 🤷💻🤦 Question/Forum
+  - name: 📱 Mobile Application bug/feature request
+    url: https://framagit.org/framasoft/peertube/mobile-application/-/issues
+    about: Use the mobile application repository to report bugs or request new features
+  - name: 🤷 Question/Forum
     url: https://framacolibri.org/c/peertube
     about: You can ask and answer other questions here
   - name: 💬 Matrix
     url: https://matrix.to/#/#peertube:matrix.org
     about: Chat with us via Matrix for quick Q/A here
-  - name: 💬 IRC
-    url: https://web.libera.chat/#peertube
-    about: Chat with us via IRC for quick Q/A here

.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:

CHANGELOG.md

@@ -1,5 +1,260 @@
 # Changelog
 
+## v7.3.0
+
+### IMPORTANT NOTES
+
+  * Minimum supported NodeJS version is `20.17`
+
+### 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
+
+ * **Important** You need to manually execute a migration script after your upgrade while PeerTube is running and the database migration is complete (`Migrations finished. New migration version schema: xxx` in PeerTube startup logs):
+   * Classic installation: `cd /var/www/peertube/peertube-latest && sudo -u peertube NODE_CONFIG_DIR=/var/www/peertube/config NODE_ENV=production node dist/scripts/migrations/peertube-7.2.js`
+   * Docker installation: `cd /var/www/peertube-docker && docker compose exec -u peertube peertube node dist/scripts/migrations/peertube-7.2.js`
+
+### 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`
+
+### Configuration
+
+  * Prefer to not store lives in object storage by default: `object_storage.streaming_playlists.store_live_streams` is now `false` in the config template
+  * Use `hot` trending algorithm by default: `trending.videos.default` is now `hot` in the config template
+  * Add global rate limit to video download that can be changed by `download_generate_video.max_parallel_downloads`
+
+### Docker
+
+  * Add missing docker env options to configure live settings [#6948](https://github.com/Chocobozzz/PeerTube/pull/6948)
+  * Expose NGINX logs folder in `docker-compose.yml` [#6963](https://github.com/Chocobozzz/PeerTube/pull/6963)
+  * Add exec to NGINX process to ensure is PID 1 and then ensure a graceful shutdown[#7041](https://github.com/Chocobozzz/PeerTube/pull/7041)
+
+### NGINX
+
+ * Fix max body size inconsistency with PeerTube backend: https://github.com/Chocobozzz/PeerTube/commit/a2812e40d90619528a6b2a4c491640a9737f8f3c
+
+### Plugins/Themes/Embed API
+
+  * **Breaking change** Theme CSS must include `--is-dark: 0` or `--is-dark: 1` CSS variable for the `body` so PeerTube understands if it's a dark or a light theme
+  * Add server plugin hooks (https://docs.joinpeertube.org/api/plugins):
+    * `filter:email.subject.result` & `filter:email.template-path.result` [#6876](https://github.com/Chocobozzz/PeerTube/pull/6876)
+
+### Features
+
+  * :tada: Redesign *Manage my videos* page :tada:
+    * Redesign the page to list more videos for a clearer overview
+    * Add sort, pagination and column display settings
+    * Add channel buttons to quickly filter videos
+    * Improve video search & filters
+    * Add ability to display video comments count [#6635](https://github.com/Chocobozzz/PeerTube/pull/6635)
+  * :tada: Redesign video management/publication pages :tada:
+    * Migrate the video update page to a *Manage video* tool, that includes *Studio* and *Stats* features
+    * Video publication privacy choice is moved in the second step
+    * Use a lateral menu to navigate between *Manage video* pages
+    * Add information related to the video state (transcoding, etc.) and clearly display unavailable features
+    * Add user agent stats to video stats [#6871](https://github.com/Chocobozzz/PeerTube/pull/6871)
+    * Support drag-and-drop to replace the video file [#6970](https://github.com/Chocobozzz/PeerTube/pull/6970)
+  * :tada: Improve NSFW/sensitive content system :tada:
+    * Support content warning so video authors can describe why the video is considered sensitive
+    * Change the *Blur* sensitive content policy for viewers where the miniature name is not blurred anymore
+    * Add an additional *Warn* sensitive content policy for viewers where the thumbnail is not blurred
+    * *Blur* and *Warn* policies add a *Sensitive* icon below the thumbnail. A warning is also displayed in the player
+    * The player embed now displays the sensitive content warning
+    * Add ability to set predefined sensitive flags to videos so video authors help to identify specific sensitive content
+    * If enabled by administrators, users can override their default sensitive content policy for specific flags.
+    For example, they can hide all sensitive content but display with a warning content flagged as *Violent* by video authors
+    * Add sensitive content filter in admin videos overview
+  * Allow users to resend the email verification link when changing their current email
+  * Inject subtitle links in HLS playlists so it's easier for external video players that use the `master.m3u8` playlist to display subtitles
+  * Disable log coloration when TTY does not support it [#6988](https://github.com/Chocobozzz/PeerTube/pull/6988)
+  * Support more embed parameters in custom markup (`<peertube-video-embed>` and `<peertube-playlist-embed>`) [#6989](https://github.com/Chocobozzz/PeerTube/pull/6989)
+
+### Bug fixes
+
+  * More robust theme CSS variables injection
+  * Fix podcast feed URL in subscribe button
+  * Fix podcast feed download extension when the file is a video
+  * Fix broken downloaded audio file
+  * Fix crash on download stream error
+  * Fix local posts counter in NodeInfo
+  * Run transcription after file replacement
+  * Better video chapters parsing from the description
+  * Correctly handle `generateTranscription` body param on upload/import
+  * Fix federation compatibility with GoToSocial
+  * Fix PeerTube account client redirection
+  * Prevent plugins to log exceptions
+  * Fix broken replay on live privacy change
+  * Fix iOS/Android deep link with URL that contains query params in watch page
+  * Fix ownership changes count
+  * Always specify object storage content type
+  * Fix broken live title in Chinese
+  * Fix theme crash in embed
+  * Fix broken video state on move on object storage failure
+  * Fix CORS issue with object storage providers
+  * Correctly display images in support modal
+
+
+## v7.1.1
+
+### SECURITY
+
+This release fixes important vulnerabilities discovered by Ori Hollander of the JFrog Vulnerability Research team. Many thanks to them!
+
+  * Fix DoS and blind SSRF on ActivityPub playlist creation [CVE-2025-32948](https://research.jfrog.com/vulnerabilities/peertube-activitypub-playlist-creation-blind-ssrf-dos/)
+  * Prevent infinite loop DoS when crawling ActivityPub data [CVE-2025-32947](https://research.jfrog.com/vulnerabilities/peertube-activitypub-crawl-dos/)
+  * Prevent an attacker from adding playlists to a another user's channel using the ActivityPub [CVE-2025-32946](https://research.jfrog.com/vulnerabilities/peertube-arbitrary-playlist-creation-activitypub/)
+  * Prevent an attacker from adding playlists to a another user's channel using the REST API [CVE-2025-32945](https://research.jfrog.com/vulnerabilities/peertube-arbitrary-playlist-creation-rest/)
+  * Add protection against [ZIP bomb](https://en.wikipedia.org/wiki/Zip_bomb) on user import [CVE-2025-32949](https://research.jfrog.com/vulnerabilities/peertube-archive-resource-exhaustion/)
+  * Prevent crash on user import with a ZIP containg an illegal filename [CVE-2025-32944](https://research.jfrog.com/vulnerabilities/peertube-archive-persistent-dos/)
+  * Do not leak private HLS playlists (`.m3u8` files) [CVE-2025-32943](https://research.jfrog.com/vulnerabilities/peertube-hls-path-traversal/)
+
+### Bug fixes
+
+  * Fix playlist page margins
+  * Fix danger button border
+  * Fix unsubscribe button label for channels
+  * Fix remote subscribe on iOS
+  * Add Podcast feed to subscribe button
+  * Always display technical information tab in *About* page
+  * Fix menu button auto font-size to prevent overflow in some locales
+  * Correctly inject multiple `rel="me"` links with supported markdown fields
+  * Fix adding studio watermark with audio/video split HLS file
+  * Reset video state on studio failure
+  * Fix updating a user in administration
+  * Fix error when getting a S3 object with some S3 providers
+  * Specify charset when uploading caption files in S3
+  * Fix theme color parsing with some web browsers
+  * Improve channel description in custom markup miniature
+  * Ensure ffmpeg process is killed if download is aborted
+  * Correctly reload playlist on playlist change in watch page
+  * Use `indexifembedded` in embeds instead of `noindex`
+  * Fix extra space on links of remote comments
+  * Don't convert webp images to jpeg
+
+
 ## v7.1.0
 
 ### IMPORTANT NOTES

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

apps/peertube-cli/CHANGELOG.md

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

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/src/peertube-auth.ts

@@ -16,7 +16,6 @@ export function defineAuthProgram () {
     .option('-p, --password <token>', 'Password')
     .option('--default', 'add the entry as the new default')
     .action(options => {
-      /* eslint-disable no-import-assign */
       prompt.override = options
       prompt.start()
       prompt.get({
@@ -39,7 +38,6 @@ export function defineAuthProgram () {
           }
         }
       }, async (_, result) => {
-
         // Check credentials
         try {
           // Strip out everything after the domain:port.
@@ -111,11 +109,13 @@ export function defineAuthProgram () {
       }
     })
 
-  program.addHelpText('after', '\n\n  Examples:\n\n' +
-    '    $ peertube auth add -u https://peertube.cpy.re -U "PEERTUBE_USER" --password "PEERTUBE_PASSWORD"\n' +
-    '    $ peertube auth add -u https://peertube.cpy.re -U root\n' +
-    '    $ peertube auth list\n' +
-    '    $ peertube auth del https://peertube.cpy.re\n'
+  program.addHelpText(
+    'after',
+    '\n\n  Examples:\n\n' +
+      '    $ peertube auth add -u https://peertube.cpy.re -U "PEERTUBE_USER" --password "PEERTUBE_PASSWORD"\n' +
+      '    $ peertube auth add -u https://peertube.cpy.re -U root\n' +
+      '    $ peertube auth list\n' +
+      '    $ peertube auth del https://peertube.cpy.re\n'
   )
 
   return program

apps/peertube-cli/src/peertube-upload.ts

@@ -72,7 +72,12 @@ export function defineUploadProgram () {
 
         await run({ ...options, url, username, password })
       } catch (err) {
-        console.error('Cannot upload video: ' + err.message)
+        if (err.code === 'ECONNREFUSED') {
+          console.error(`Server is not responding`)
+        } else {
+          console.error('Cannot upload video: ' + err.message)
+        }
+
         process.exit(-1)
       }
     })
@@ -127,7 +132,7 @@ async function buildVideoAttributesFromCommander (server: PeerTubeServer, option
     waitTranscoding: true
   }
 
-  const booleanAttributes: { [id in keyof typeof defaultBooleanAttributes]: boolean } | {} = {}
+  const booleanAttributes: { [id in keyof typeof defaultBooleanAttributes]: boolean } = {} as any
 
   for (const key of Object.keys(defaultBooleanAttributes)) {
     if (options[key] !== undefined) {

apps/peertube-cli/src/shared/cli.ts

@@ -72,8 +72,7 @@ function getRemoteObjectOrDie (
   settings: Settings,
   netrc: Netrc
 ): { url: string, username: string, password: string } {
-
-  function exitIfNoOptions (optionNames: string[], errorPrefix: string = '') {
+  function exitIfNoOptions (optionNames: string[], errorPrefix = '') {
     let exit = false
 
     for (const key of optionNames) {
@@ -126,9 +125,9 @@ function listOptions (val: string) {
 
 function getServerCredentials (options: CommonProgramOptions) {
   return Promise.all([ getSettings(), getNetrc() ])
-                .then(([ settings, netrc ]) => {
-                  return getRemoteObjectOrDie(options, settings, netrc)
-                })
+    .then(([ settings, netrc ]) => {
+      return getRemoteObjectOrDie(options, settings, netrc)
+    })
 }
 
 function buildServer (url: string) {
@@ -184,11 +183,8 @@ export {
   getRemoteObjectOrDie,
   writeSettings,
   deleteSettings,
-
   getServerCredentials,
-
   listOptions,
-
   getAdminTokenOrDie,
   buildServer,
   assignToken

apps/peertube-runner/CHANGELOG.md

@@ -1,8 +1,26 @@
 # Changelog
 
+## 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
+ * Add download file timeout (2 hours) to prevent stuck jobs
+
+## v0.1.2
+
+  * Support query params in custom upload URL
+
+## v0.1.1
+
+  * Fix adding studio watermark with audio/video split HLS file
+
 ## v0.1.0
 
- * Requires Node 20
- * Introduce `list-jobs` command to list processing jobs
- * Update dependencies
- * Send last chunks/playlist content to correctly end the live
+  * Requires Node 20
+  * Introduce `list-jobs` command to list processing jobs
+  * Update dependencies
+  * Send last chunks/playlist content to correctly end the live

apps/peertube-runner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peertube/peertube-runner",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/peertube-runner.js",
   "bin": "dist/peertube-runner.js",
@@ -12,7 +12,7 @@
     "@types/follow-redirects": "1.14.4",
     "env-paths": "^3.0.0",
     "follow-redirects": "^1.15.5",
-    "pino": "^9.2.0",
-    "pino-pretty": "^11.2.1"
+    "pino": "^9.6.0",
+    "pino-pretty": "^13.0.0"
   }
 }

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'
@@ -95,7 +95,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 +273,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 +365,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/shared/config-manager.ts

@@ -137,7 +137,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/http.ts

@@ -41,6 +41,14 @@ export function downloadFile (options: {
       }
 
       const file = createWriteStream(destination)
+
+      file.on('error', err => {
+        remove(destination)
+          .catch(err => logger.error(err))
+
+        return rej(err)
+      })
+
       file.on('finish', () => res())
 
       response.pipe(file)
@@ -55,6 +63,10 @@ export function downloadFile (options: {
 
     request.write(body)
     request.end()
+
+    setTimeout(() => {
+      request.destroy(new Error('Global request timeout'))
+    }, 2 * 3600 * 1000) // 2 hours
   })
 }
 

apps/peertube-runner/src/shared/logger.ts

@@ -1,12 +1,4 @@
 import { pino } from 'pino'
 import pretty from 'pino-pretty'
 
-const logger = pino(pretty({
-  colorize: true
-}))
-
-logger.level = 'info'
-
-export {
-  logger
-}
+export const logger = pino({ level: 'info' }, pretty())

apps/peertube-runner/yarn.lock

@@ -53,37 +53,17 @@
     "@types/node" "*"
 
 "@types/node@*":
-  version "22.9.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.9.3.tgz#08f3d64b3bc6d74b162d36f60213e8a6704ef2b4"
-  integrity sha512-F3u1fs/fce3FFk+DAxbxc78DF8x0cY09RRL8GnXLmkJ1jvx3TtPdWoTT5/NiYfI5ASqXBmfqJi9dZ3gxMx4lzw==
+  version "24.1.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-24.1.0.tgz#0993f7dc31ab5cc402d112315b463e383d68a49c"
+  integrity sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w==
   dependencies:
-    undici-types "~6.19.8"
-
-abort-controller@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
-  integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
-  dependencies:
-    event-target-shim "^5.0.0"
+    undici-types "~7.8.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==
 
-base64-js@^1.3.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
-  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
-
-buffer@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
-  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
-  dependencies:
-    base64-js "^1.3.1"
-    ieee754 "^1.2.1"
-
 colorette@^2.0.7:
   version "2.0.20"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
@@ -95,14 +75,14 @@ dateformat@^4.6.3:
   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==
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.4.tgz#f04715b8ba815e53b4d8109655b6508a6865a7e8"
+  integrity sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==
 
 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==
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.5.tgz#7344d711dea40e0b74abc2ed49778743ccedb08c"
+  integrity sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==
   dependencies:
     once "^1.4.0"
 
@@ -111,16 +91,6 @@ env-paths@^3.0.0:
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-3.0.0.tgz#2f1e89c2f6dbd3408e1b1711dd82d62e317f58da"
   integrity sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==
 
-event-target-shim@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
-  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
-
-events@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
-  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
-
 fast-copy@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/fast-copy/-/fast-copy-3.0.2.tgz#59c68f59ccbcac82050ba992e0d5c389097c9d35"
@@ -151,11 +121,6 @@ help-me@^5.0.0:
   resolved "https://registry.yarnpkg.com/help-me/-/help-me-5.0.0.tgz#b1ebe63b967b74060027c2ac61f9be12d354a6f6"
   integrity sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==
 
-ieee754@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
-  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
-
 joycon@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
@@ -181,9 +146,9 @@ msgpackr-extract@^3.0.2:
     "@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==
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.11.5.tgz#edf0b9d9cb7d8ed6897dd0e42cfb865a2f4b602e"
+  integrity sha512-UjkUHN0yqp9RWKy0Lplhh+wlpdt9oQBYgULZOiFhV3VclSF1JnSQWZ5r9gORQlNYaUKQoR8itv7g7z1xDDuACA==
   optionalDependencies:
     msgpackr-extract "^3.0.2"
 
@@ -213,10 +178,10 @@ pino-abstract-transport@^2.0.0:
   dependencies:
     split2 "^4.0.0"
 
-pino-pretty@^11.2.1:
-  version "11.3.0"
-  resolved "https://registry.yarnpkg.com/pino-pretty/-/pino-pretty-11.3.0.tgz#390b3be044cf3d2e9192c7d19d44f6b690468f2e"
-  integrity sha512-oXwn7ICywaZPHmu3epHGU2oJX4nPmKvHvB/bwrJHlGcbEWaVcotkpyVHMKLKmiVryWYByNp0jpgAcXpFJDXJzA==
+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"
@@ -228,7 +193,6 @@ pino-pretty@^11.2.1:
     on-exit-leak-free "^2.1.0"
     pino-abstract-transport "^2.0.0"
     pump "^3.0.0"
-    readable-stream "^4.0.0"
     secure-json-parse "^2.4.0"
     sonic-boom "^4.0.1"
     strip-json-comments "^3.1.1"
@@ -238,37 +202,32 @@ pino-std-serializers@^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.2.0:
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/pino/-/pino-9.5.0.tgz#a7ef0fea868d22d52d8a4ce46e6e03c5dc46fdd6"
-  integrity sha512-xSEmD4pLnV54t0NOUN16yCl7RIB1c5UUOse5HSyEXtBp+FgFQyPeDutc+Q2ZO7/22vImV7VfEjH/1zV2QuqvYw==
+pino@^9.6.0:
+  version "9.7.0"
+  resolved "https://registry.yarnpkg.com/pino/-/pino-9.7.0.tgz#ff7cd86eb3103ee620204dbd5ca6ffda8b53f645"
+  integrity sha512-vnMCM6xZTb1WDmLvtG2lE/2p+t9hDEIvTWJsu6FejkE62vB7gDhvzrpFR4Cw2to+9JNQxVnkAKVPA1KPB98vWg==
   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"
+    process-warning "^5.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.0"
-  resolved "https://registry.yarnpkg.com/process-warning/-/process-warning-4.0.0.tgz#581e3a7a1fb456c5f4fd239f76bce75897682d5a"
-  integrity sha512-/MyYDxttz7DfGMMHiysAsFE4qF+pQYAA8ziO/3NcRVrQ5fSk+Mns4QZA/oRPFzvcqNoVJXQNWNAsdwBXLUkQKw==
-
-process@^0.11.10:
-  version "0.11.10"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
-  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+process-warning@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/process-warning/-/process-warning-5.0.0.tgz#566e0bf79d1dff30a72d8bbbe9e8ecefe8d378d7"
+  integrity sha512-a39t9ApHNx2L4+HBnQKqxxHNs1r7KF+Intd8Q/g1bUh6q0WIp9voPXJ/x0j+ZL45KF1pJd9+q2jLIRMfvEshkA==
 
 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==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.3.tgz#151d979f1a29668dc0025ec589a455b53282268d"
+  integrity sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==
   dependencies:
     end-of-stream "^1.1.0"
     once "^1.3.1"
@@ -278,27 +237,11 @@ quick-format-unescaped@^4.0.3:
   resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz#93ef6dd8d3453cbc7970dd614fad4c5954d6b5a7"
   integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
 
-readable-stream@^4.0.0:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.5.2.tgz#9e7fc4c45099baeed934bff6eb97ba6cf2729e09"
-  integrity sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==
-  dependencies:
-    abort-controller "^3.0.0"
-    buffer "^6.0.3"
-    events "^3.3.0"
-    process "^0.11.10"
-    string_decoder "^1.3.0"
-
 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-buffer@~5.2.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-
 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"
@@ -321,13 +264,6 @@ split2@^4.0.0:
   resolved "https://registry.yarnpkg.com/split2/-/split2-4.2.0.tgz#c9c5920904d148bab0b9f67145f245a86aadbfa4"
   integrity sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==
 
-string_decoder@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
 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"
@@ -340,10 +276,10 @@ thread-stream@^3.0.0:
   dependencies:
     real-require "^0.2.0"
 
-undici-types@~6.19.8:
-  version "6.19.8"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
-  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+undici-types@~7.8.0:
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.8.0.tgz#de00b85b710c54122e44fbfd911f8d70174cd294"
+  integrity sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==
 
 wrappy@1:
   version "1.0.2"

client/.eslintrc.json

@@ -1,181 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": [
-    "projects/**/*",
-    "node_modules/",
-    "src/standalone/embed-player-api/dist"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts"
-      ],
-      "parserOptions": {
-        "project": [
-          "tsconfig.eslint.json"
-        ],
-        "EXPERIMENTAL_useSourceOfProjectReferenceRedirect": true,
-        "createDefaultProgram": false
-      },
-      "extends": [
-        "../.eslintrc.json",
-        "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "rules": {
-        "jsdoc/newline-after-description": "off",
-        "jsdoc/check-alignment": "off",
-        "lines-between-class-members": "off",
-        "@typescript-eslint/lines-between-class-members": [ "off" ],
-        "arrow-body-style": "off",
-        "no-underscore-dangle": "off",
-        "n/no-callback-literal": "off",
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": [ "element", "attribute" ],
-            "prefix": "my",
-            "style": "kebab-case"
-          }
-        ],
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": [ "element", "attribute" ],
-            "prefix": "my",
-            "style": "camelCase"
-          }
-        ],
-        "@typescript-eslint/no-this-alias": [
-          "error",
-          {
-            "allowDestructuring": true,
-            "allowedNames": ["self", "player"]
-          }
-        ],
-        "@typescript-eslint/prefer-readonly": "off",
-        "@angular-eslint/use-component-view-encapsulation": "error",
-        "prefer-arrow/prefer-arrow-functions": "off",
-        "@typescript-eslint/await-thenable": "error",
-        "@typescript-eslint/consistent-type-definitions": "off",
-        "@typescript-eslint/dot-notation": "off",
-        "@typescript-eslint/explicit-member-accessibility": [
-          "off",
-          {
-            "accessibility": "explicit"
-          }
-        ],
-        "@typescript-eslint/member-ordering": [
-          "off"
-        ],
-        "@typescript-eslint/member-delimiter-style": [
-          "error",
-          {
-            "multiline": {
-              "delimiter": "none",
-              "requireLast": true
-            },
-            "singleline": {
-              "delimiter": "comma",
-              "requireLast": false
-            }
-          }
-        ],
-        "@typescript-eslint/prefer-for-of": "off",
-        "@typescript-eslint/no-empty-function": "error",
-        "@typescript-eslint/no-floating-promises": "off",
-        "@typescript-eslint/no-inferrable-types": "error",
-        "@typescript-eslint/no-shadow": [
-          "off",
-          {
-            "hoist": "all"
-          }
-        ],
-        "@typescript-eslint/no-unnecessary-qualifier": "error",
-        "@typescript-eslint/no-unnecessary-type-assertion": "error",
-        "@typescript-eslint/no-unused-expressions": [
-          "error",
-          {
-            "allowTaggedTemplates": true,
-            "allowShortCircuit": true
-          }
-        ],
-        "@typescript-eslint/quotes": [
-          "error",
-          "single",
-          {
-            "avoidEscape": true,
-            "allowTemplateLiterals": true
-          }
-        ],
-        "@typescript-eslint/semi": [
-          "error",
-          "never"
-        ],
-        "brace-style": [
-          "error",
-          "1tbs"
-        ],
-        "comma-dangle": "error",
-        "curly": [
-          "error",
-          "multi-line"
-        ],
-        "dot-notation": "off",
-        "no-useless-return": "off",
-        "indent": "off",
-        "no-bitwise": "off",
-        "no-console": "off",
-        "no-return-assign": "off",
-        "no-constant-condition": "error",
-        "no-control-regex": "error",
-        "no-duplicate-imports": "error",
-        "no-empty": "error",
-        "no-empty-function": [
-          "error",
-          { "allow": [ "constructors" ] }
-        ],
-        "no-invalid-regexp": "error",
-        "no-multiple-empty-lines": "error",
-        "no-redeclare": "error",
-        "no-regex-spaces": "error",
-        "no-return-await": "error",
-        "no-shadow": "off",
-        "no-unused-expressions": "error",
-        "semi": "error",
-        "space-before-function-paren": [
-          "error",
-          "always"
-        ],
-        "space-in-parens": [
-          "error",
-          "never"
-        ],
-        "object-shorthand": [
-          "error",
-          "properties"
-        ],
-        "quote-props": [
-          "error",
-          "consistent-as-needed"
-        ],
-        "no-constant-binary-expression": "error",
-        "@typescript-eslint/unbound-method": [
-          "error",
-          { "ignoreStatic": true }
-        ],
-        "import/no-named-default": "off"
-      }
-    },
-    {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended",
-        "plugin:@angular-eslint/template/accessibility"
-      ],
-      "rules": {}
-    }
-  ]
-}

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"

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

@@ -1,55 +1,50 @@
+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: 'do_not_list' | 'blur' | 'display') {
-    await this.navigateTo('instance-information')
+  async updateNSFWSetting (newValue: NSFWPolicyType) {
+    await this.navigateTo('information')
 
-    const elem = $('#instanceDefaultNSFWPolicy')
+    const elem = $(`#instanceDefaultNSFWPolicy-${newValue} + label`)
 
     await elem.waitForDisplayed()
     await elem.scrollIntoView({ block: 'center' }) // Avoid issues with fixed header
     await elem.waitForClickable()
 
-    return elem.selectByAttribute('value', newValue)
+    return elem.click()
   }
 
   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)
   }
@@ -61,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()
+    } catch {
+      // The config may have not been changed
+      return
+    } finally {
+      await browserSleep(1000) // Wait for the button to be clickable
+    }
 
-    await button.waitForClickable()
     await button.click()
-
-    await browserSleep(1000)
+    await button.waitForClickable({ reverse: true })
   }
 }

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

@@ -1,26 +1,25 @@
 import { browserSleep, findParentElement, go } from '../utils'
 
 export class AdminRegistrationPage {
-
-  async navigateToRegistratonsList () {
+  async navigateToRegistrationsList () {
     await go('/admin/moderation/registrations/list')
 
     await $('my-registration-list').waitForDisplayed()
   }
 
   async accept (username: string, moderationResponse: string) {
-    const usernameEl = await $('*=' + username)
+    const usernameEl = $('*=' + username)
     await usernameEl.waitForDisplayed()
 
     const tr = await findParentElement(usernameEl, async el => await el.getTagName() === 'tr')
 
     await tr.$('.action-cell .dropdown-root').click()
 
-    const accept = await $('span*=Accept this request')
+    const accept = $('span*=Accept this request')
     await accept.waitForClickable()
     await accept.click()
 
-    const moderationResponseTextarea = await $('#moderationResponse')
+    const moderationResponseTextarea = $('#moderationResponse')
     await moderationResponseTextarea.waitForDisplayed()
 
     await moderationResponseTextarea.setValue(moderationResponse)
@@ -31,5 +30,4 @@ export class AdminRegistrationPage {
 
     await browserSleep(1000)
   }
-
 }

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

@@ -0,0 +1,24 @@
+export class AdminUserPage {
+  async createUser (options: {
+    username: string
+    password: string
+  }) {
+    const { username, password } = options
+
+    await $('.menu-link[title=Overview]').click()
+    await $('a*=Create user').click()
+
+    await $('#username').waitForDisplayed()
+    await $('#username').setValue(username)
+    await $('#password').setValue(password)
+    await $('#channelName').setValue(`${username}_channel`)
+    await $('#email').setValue(`${username}@example.com`)
+
+    const submit = $('my-user-create .primary-button')
+    await submit.scrollIntoView()
+    await submit.waitForClickable()
+    await submit.click()
+
+    await $('.cell-username*=' + username).waitForDisplayed()
+  }
+}

client/e2e/src/po/anonymous-settings.po.ts

@@ -1,19 +1,45 @@
+import { NSFWPolicyType } from '@peertube/peertube-models'
 import { getCheckbox } from '../utils'
 
 export class AnonymousSettingsPage {
-
   async openSettings () {
-    const link = await $('my-header .settings-button')
+    const link = $('my-header .settings-button')
     await link.waitForClickable()
     await link.click()
 
     await $('my-user-video-settings').waitForDisplayed()
   }
 
+  async closeSettings () {
+    const closeModal = $('.modal.show .modal-header > button')
+    await closeModal.waitForClickable()
+    await closeModal.click()
+
+    await $('.modal.show').waitForDisplayed({ reverse: true })
+  }
+
   async clickOnP2PCheckbox () {
     const p2p = await getCheckbox('p2pEnabled')
     await p2p.waitForClickable()
 
     await p2p.click()
   }
+
+  async updateNSFW (newValue: NSFWPolicyType) {
+    const nsfw = $(`#nsfwPolicy-${newValue} + label`)
+
+    await nsfw.waitForClickable()
+    await nsfw.click()
+
+    await $(`#nsfwPolicy-${newValue}:checked`).waitForExist()
+  }
+
+  async updateViolentFlag (newValue: NSFWPolicyType) {
+    const nsfw = $(`#nsfwFlagViolent-${newValue} + label`)
+
+    await nsfw.waitForClickable()
+    await nsfw.click()
+
+    await $(`#nsfwFlagViolent-${newValue}:checked`).waitForExist()
+  }
 }

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

@@ -1,9 +1,7 @@
 import { browserSleep, go, isAndroid } from '../utils'
 
 export class LoginPage {
-
   constructor (private isMobileDevice: boolean) {
-
   }
 
   async login (options: {
@@ -51,8 +49,12 @@ export class LoginPage {
     return $('.alert-danger').getText()
   }
 
-  async loginAsRootUser () {
-    return this.login({ username: 'root', password: 'test' + this.getSuffix() })
+  loginAsRootUser () {
+    return this.login({ username: 'root', password: this.getRootPassword() })
+  }
+
+  getRootPassword () {
+    return 'test' + this.getSuffix()
   }
 
   loginOnPeerTube2 () {
@@ -64,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

@@ -1,3 +1,4 @@
+import { NSFWPolicyType } from '@peertube/peertube-models'
 import { getCheckbox, go, selectCustomSelect } from '../utils'
 
 export class MyAccountPage {
@@ -13,20 +14,34 @@ export class MyAccountPage {
     return $('a[href="/my-library/history/videos"]').click()
   }
 
-  // Settings
+  // ---------------------------------------------------------------------------
+  // My account settings
+  // ---------------------------------------------------------------------------
 
   navigateToMySettings () {
     return $('a[href="/my-account"]').click()
   }
 
-  async updateNSFW (newValue: 'do_not_list' | 'blur' | 'display') {
-    const nsfw = $('#nsfwPolicy')
+  async updateNSFW (newValue: NSFWPolicyType) {
+    const nsfw = $(`#nsfwPolicy-${newValue} + label`)
 
     await nsfw.waitForDisplayed()
     await nsfw.scrollIntoView({ block: 'center' }) // Avoid issues with fixed header
     await nsfw.waitForClickable()
 
-    await nsfw.selectByAttribute('value', newValue)
+    await nsfw.click()
+
+    await this.submitVideoSettings()
+  }
+
+  async updateViolentFlag (newValue: NSFWPolicyType) {
+    const nsfw = $(`#nsfwFlagViolent-${newValue} + label`)
+
+    await nsfw.waitForDisplayed()
+    await nsfw.scrollIntoView({ block: 'center' }) // Avoid issues with fixed header
+    await nsfw.waitForClickable()
+
+    await nsfw.click()
 
     await this.submitVideoSettings()
   }
@@ -50,7 +65,25 @@ export class MyAccountPage {
     await submit.click()
   }
 
-  // My account Videos
+  async updateEmail (email: string, password: string) {
+    const emailInput = $('my-account-change-email #new-email')
+    await emailInput.waitForDisplayed()
+    await emailInput.scrollIntoView({ block: 'center' }) // Avoid issues with fixed header
+    await emailInput.setValue(email)
+
+    const passwordInput = $('my-account-change-email #password')
+    await passwordInput.waitForDisplayed()
+    await passwordInput.setValue(password)
+
+    const submit = $('my-account-change-email input[type=submit]')
+    await submit.waitForClickable()
+    await submit.scrollIntoView({ block: 'center' }) // Avoid issues with fixed header
+    await submit.click()
+  }
+
+  // ---------------------------------------------------------------------------
+  // My account videos
+  // ---------------------------------------------------------------------------
 
   async removeVideo (name: string) {
     const container = await this.getVideoRow(name)
@@ -84,7 +117,21 @@ export class MyAccountPage {
     return elements.length
   }
 
+  async getVideoRow (name: string) {
+    let el = $('.name*=' + name)
+
+    await el.waitForDisplayed()
+
+    while (await el.getTagName() !== 'tr') {
+      el = el.parentElement()
+    }
+
+    return el
+  }
+
+  // ---------------------------------------------------------------------------
   // My account playlists
+  // ---------------------------------------------------------------------------
 
   async getPlaylistVideosText (name: string) {
     const elem = await this.getPlaylist(name)
@@ -124,7 +171,7 @@ export class MyAccountPage {
     await selectCustomSelect('videoChannelId', 'Main root channel')
     await selectCustomSelect('privacy', privacy)
 
-    const submit = await $('form input[type=submit]')
+    const submit = $('form input[type=submit]')
     await submit.waitForClickable()
     await submit.scrollIntoView()
     await submit.click()
@@ -134,27 +181,11 @@ export class MyAccountPage {
     })
   }
 
-  // My account Videos
-
-  private async getVideoRow (name: string) {
-    let el = $('.name*=' + name)
-
-    await el.waitForDisplayed()
-
-    while (await el.getTagName() !== 'tr') {
-      el = el.parentElement()
-    }
-
-    return el
-  }
-
-  // My account playlists
-
   private async getPlaylist (name: string) {
     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

@@ -1,7 +1,6 @@
 import { browserSleep, isIOS, isMobileDevice, isSafari } from '../utils'
 
 export class PlayerPage {
-
   getWatchVideoPlayerCurrentTime () {
     const elem = $('video')
 
@@ -10,7 +9,7 @@ export class PlayerPage {
       : elem.getProperty('currentTime')
 
     return p.then(t => parseInt(t + '', 10))
-            .then(t => Math.ceil(t))
+      .then(t => Math.ceil(t))
   }
 
   waitUntilPlaylistInfo (text: string, maxTime: number) {
@@ -23,9 +22,11 @@ export class PlayerPage {
   }
 
   waitUntilPlayerWrapper () {
-    return browser.waitUntil(async () => {
-      return !!(await $('#placeholder-preview'))
-    })
+    return $('#video-wrapper').waitForExist()
+  }
+
+  waitUntilPlaying () {
+    return $('.video-js.vjs-playing').waitForDisplayed()
   }
 
   async playAndPauseVideo (isAutoplay: boolean, waitUntilSec: number) {
@@ -66,16 +67,36 @@ export class PlayerPage {
     return this.clickOnPlayButton()
   }
 
-  private async clickOnPlayButton () {
-    const playButton = () => $('.vjs-big-play-button')
+  getPlayButton () {
+    return $('.vjs-big-play-button')
+  }
 
-    await playButton().waitForClickable()
-    await playButton().click()
+  getNSFWContentText () {
+    return $('.video-js .nsfw-info').getText()
+  }
+
+  getNSFWDetailsContent () {
+    return $('.video-js .nsfw-details-content')
+  }
+
+  getMoreNSFWInfoButton () {
+    return $('.video-js .nsfw-info button')
+  }
+
+  async hasPoster () {
+    const property = await $('.video-js .vjs-poster').getCSSProperty('background-image')
+
+    return property.value.startsWith('url(')
+  }
+
+  private async clickOnPlayButton () {
+    await this.getPlayButton().waitForClickable()
+    await this.getPlayButton().click()
   }
 
   async fillEmbedVideoPassword (videoPassword: string) {
     const videoPasswordInput = $('input#video-password-input')
-    const confirmButton = await $('button#video-password-submit')
+    const confirmButton = $('button#video-password-submit')
 
     await videoPasswordInput.clearValue()
     await videoPasswordInput.setValue(videoPassword)

client/e2e/src/po/signup.po.ts

@@ -1,7 +1,6 @@
 import { getCheckbox } from '../utils'
 
 export class SignupPage {
-
   getRegisterMenuButton () {
     return $('.create-account-button')
   }
@@ -47,7 +46,7 @@ export class SignupPage {
     await $('#displayName').setValue(options.displayName || `${options.username} display name`)
 
     await $('#username').setValue(options.username)
-    await $('#password').setValue(options.password || 'password')
+    await $('#password').setValue(options.password || 'superpassword')
 
     // Fix weird bug on firefox that "cannot scroll into view" when using just `setValue`
     await $('#email').scrollIntoView({ block: 'center' })

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

@@ -1,9 +1,7 @@
-import { browserSleep, go } from '../utils'
+import { browserSleep, findParentElement, go } from '../utils'
 
 export class VideoListPage {
-
   constructor (private isMobileDevice: boolean, private isSafari: boolean) {
-
   }
 
   async goOnVideosList () {
@@ -53,30 +51,54 @@ export class VideoListPage {
     await this.waitForList()
   }
 
-  async getNSFWFilter () {
+  async getNSFWFilterText () {
     const el = $('.active-filter*=Sensitive')
+
     await el.waitForDisplayed()
 
-    return el
+    return el.getText()
   }
 
   async getVideosListName () {
-    const elems = await $$('.videos .video-miniature .video-name')
+    const elems = $$('.videos .video-miniature .video-name')
     const texts = await elems.map(e => e.getText())
 
     return texts.map(t => t.trim())
   }
 
-  videoExists (name: string) {
+  isVideoDisplayed (name: string) {
     return $('.video-name=' + name).isDisplayed()
   }
 
-  async videoIsBlurred (name: string) {
-    const filter = await $('.video-name=' + name).getCSSProperty('filter')
+  async isVideoBlurred (name: string) {
+    const miniature = await this.getVideoMiniature(name)
+    const filter = await miniature.$('my-video-thumbnail img').getCSSProperty('filter')
 
     return filter.value !== 'none'
   }
 
+  async hasVideoWarning (name: string) {
+    const miniature = await this.getVideoMiniature(name)
+
+    return miniature.$('.nsfw-warning').isDisplayed()
+  }
+
+  async expectVideoNSFWTooltip (name: string, summary?: string) {
+    const miniature = await this.getVideoMiniature(name)
+
+    const warning = miniature.$('.nsfw-warning')
+    await warning.waitForDisplayed()
+
+    expect(await warning.getAttribute('aria-label')).toEqual(summary)
+  }
+
+  private async getVideoMiniature (name: string) {
+    const videoName = $('.video-name=' + name)
+    await videoName.waitForDisplayed()
+
+    return findParentElement(videoName, async el => await el.getTagName() === 'my-video-miniature')
+  }
+
   async clickOnVideo (videoName: string) {
     const video = async () => {
       const videos = await $$('.videos .video-miniature .video-name').filter(async e => {
@@ -92,9 +114,8 @@ export class VideoListPage {
       const elem = await video()
 
       return elem?.isClickable()
-    });
-
-    (await video()).click()
+    })
+    ;(await video()).click()
 
     await browser.waitUntil(async () => (await browser.getUrl()).includes('/w/'))
   }
@@ -116,8 +137,4 @@ export class VideoListPage {
   private waitForList () {
     return $('.videos .video-miniature .video-name').waitForDisplayed()
   }
-
-  private waitForTitle (title: string) {
-    return $('h1=' + title).waitForDisplayed()
-  }
 }

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

@@ -1,4 +1,4 @@
-import { clickOnRadio, getCheckbox, go, isRadioSelected, selectCustomSelect } from '../utils'
+import { clickOnRadio, getCheckbox, go, isRadioSelected, selectCustomSelect, setCheckboxEnabled } from '../utils'
 
 export abstract class VideoManage {
   async clickOnSave () {
@@ -19,13 +19,24 @@ export abstract class VideoManage {
 
   // ---------------------------------------------------------------------------
 
-  async setAsNSFW () {
+  async setAsNSFW (options: {
+    violent?: boolean
+    summary?: string
+  } = {}) {
     await this.goOnPage('Moderation')
 
     const checkbox = await getCheckbox('nsfw')
     await checkbox.waitForClickable()
 
-    return checkbox.click()
+    await checkbox.click()
+
+    if (options.violent) {
+      await setCheckboxEnabled('nsfwFlagViolent', true)
+    }
+
+    if (options.summary) {
+      await $('#nsfwSummary').setValue(options.summary)
+    }
   }
 
   // ---------------------------------------------------------------------------
@@ -65,10 +76,11 @@ export abstract class VideoManage {
     await input.waitForClickable()
     await input.click()
 
-    const nextDay = $('.p-datepicker-today + td > span')
-    await nextDay.waitForClickable()
-    await nextDay.click()
-    await nextDay.waitForDisplayed({ reverse: true })
+    const nextMonth = $('.p-datepicker-next-button')
+    await nextMonth.click()
+
+    await $('.p-datepicker-calendar td[aria-label="1"] > span').click()
+    await $('.p-datepicker-calendar').waitForDisplayed({ reverse: true, timeout: 15000 }) // Can be slow
   }
 
   getScheduleInput () {
@@ -92,7 +104,7 @@ export abstract class VideoManage {
   async getLiveState () {
     await this.goOnPage('Live settings')
 
-    if (await isRadioSelected('#permanentLiveTrue')) return 'permanent'
+    if (await isRadioSelected('permanentLiveTrue')) return 'permanent'
 
     return 'normal'
   }
@@ -123,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-publish.po.ts

@@ -1,9 +1,10 @@
 import { join } from 'path'
 import { VideoManage } from './video-manage'
+import { FIXTURE_URLS } from '../utils'
 
 export class VideoPublishPage extends VideoManage {
   async navigateTo (tab?: 'Go live') {
-    const publishButton = await $('.publish-button > a')
+    const publishButton = $('.publish-button > a')
 
     await publishButton.waitForClickable()
     await publishButton.click()
@@ -30,13 +31,30 @@ export class VideoPublishPage extends VideoManage {
 
     await browser.pause(1000)
 
-    const elem = await $(fileInputSelector)
+    const elem = $(fileInputSelector)
     await elem.chooseFile(fileToUpload)
 
     // Wait for the upload to finish
     await this.getSaveButton().waitForClickable()
   }
 
+  async importVideo () {
+    const tab = $('.nav-link*=Import with URL')
+    await tab.waitForClickable()
+    await tab.click()
+
+    const input = $('#targetUrl')
+    await input.waitForDisplayed()
+    await input.setValue(FIXTURE_URLS.IMPORT_URL)
+
+    const submit = $('.first-step-block .primary-button:not([disabled])')
+    await submit.waitForClickable()
+    await submit.click()
+
+    // Wait for the import to finish
+    await this.getSaveButton().waitForClickable({ timeout: 15000 }) // Can be slow
+  }
+
   async publishLive () {
     await $('#permanentLiveTrue').parentElement().click()
 
@@ -53,6 +71,7 @@ export class VideoPublishPage extends VideoManage {
     await this.goOnPage('Main information')
 
     const nameInput = $('input#name')
+    await nameInput.scrollIntoView()
     await nameInput.clearValue()
     await nameInput.setValue(videoName)
 

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

@@ -40,7 +40,7 @@ export class VideoWatchPage {
   }
 
   isPrivacyWarningDisplayed () {
-    return $('my-privacy-concerns').isDisplayed()
+    return $('.privacy-concerns-text').isDisplayed()
   }
 
   async goOnAssociatedEmbed (passwordProtected = false) {
@@ -74,9 +74,84 @@ export class VideoWatchPage {
     return go(FIXTURE_URLS.HLS_PLAYLIST_EMBED)
   }
 
+  getModalTitleEl () {
+    return $('.modal-content .modal-title')
+  }
+
+  confirmModal () {
+    return $('.modal-content .modal-footer .primary-button').click()
+  }
+
+  private async getVideoNameElement () {
+    // We have 2 video info name block, pick the first that is not empty
+    const elem = async () => {
+      const elems = await $$('.video-info-first-row .video-info-name').filter(e => e.isDisplayed())
+
+      return elems[0]
+    }
+
+    await browser.waitUntil(async () => {
+      const e = await elem()
+
+      return e?.isDisplayed()
+    })
+
+    return elem()
+  }
+
+  // ---------------------------------------------------------------------------
+  // Video password
+  // ---------------------------------------------------------------------------
+
+  isPasswordProtected () {
+    return $('#confirmInput').isExisting()
+  }
+
+  async fillVideoPassword (videoPassword: string) {
+    const videoPasswordInput = $('input#confirmInput')
+    await videoPasswordInput.waitForClickable()
+    await videoPasswordInput.clearValue()
+    await videoPasswordInput.setValue(videoPassword)
+
+    const confirmButton = $('input[value="Confirm"]')
+    await confirmButton.waitForClickable()
+    return confirmButton.click()
+  }
+
+  // ---------------------------------------------------------------------------
+  // Video actions
+  // ---------------------------------------------------------------------------
+
+  async like () {
+    const likeButton = $('.action-button-like')
+    const isActivated = (await likeButton.getAttribute('class')).includes('activated')
+
+    let count: number
+    try {
+      count = parseInt(await $('.action-button-like > .count').getText())
+    } catch (error) {
+      count = 0
+    }
+
+    await likeButton.waitForClickable()
+    await likeButton.click()
+
+    if (isActivated) {
+      if (count === 1) {
+        return expect(!await $('.action-button-like > .count').isExisting())
+      } else {
+        return expect(parseInt(await $('.action-button-like > .count').getText())).toBe(count - 1)
+      }
+    } else {
+      return expect(parseInt(await $('.action-button-like > .count').getText())).toBe(count + 1)
+    }
+  }
+
   async clickOnManage () {
     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) {
@@ -90,8 +165,24 @@ export class VideoWatchPage {
     }
   }
 
-  clickOnSave () {
-    return $('.action-button-save').click()
+  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()
+  }
+
+  // ---------------------------------------------------------------------------
+  // Playlists
+  // ---------------------------------------------------------------------------
+
+  async clickOnSave () {
+    const button = $('.action-button-save')
+
+    await button.scrollIntoView({ block: 'center' })
+
+    return button.click()
   }
 
   async createPlaylist (name: string) {
@@ -116,101 +207,41 @@ export class VideoWatchPage {
     return playlist().click()
   }
 
-  async clickOnMoreDropdownIcon () {
-    const dropdown = $('my-video-actions-dropdown .action-button')
-    await dropdown.click()
-
-    await $('.dropdown-menu.show .dropdown-item').waitForDisplayed()
-  }
-
-  private async getVideoNameElement () {
-    // We have 2 video info name block, pick the first that is not empty
-    const elem = async () => {
-      const elems = await $$('.video-info-first-row .video-info-name').filter(e => e.isDisplayed())
-
-      return elems[0]
-    }
-
-    await browser.waitUntil(async () => {
-      const e = await elem()
-
-      return e?.isDisplayed()
-    })
-
-    return elem()
-  }
-
-  isPasswordProtected () {
-    return $('#confirmInput').isExisting()
-  }
-
-  async fillVideoPassword (videoPassword: string) {
-    const videoPasswordInput = await $('input#confirmInput')
-    await videoPasswordInput.waitForClickable()
-    await videoPasswordInput.clearValue()
-    await videoPasswordInput.setValue(videoPassword)
-
-    const confirmButton = await $('input[value="Confirm"]')
-    await confirmButton.waitForClickable()
-    return confirmButton.click()
-  }
-
-  async like () {
-    const likeButton = await $('.action-button-like')
-    const isActivated = (await likeButton.getAttribute('class')).includes('activated')
-
-    let count: number
-    try {
-      count = parseInt(await $('.action-button-like > .count').getText())
-    } catch (error) {
-      count = 0
-    }
-
-    await likeButton.waitForClickable()
-    await likeButton.click()
-
-    if (isActivated) {
-      if (count === 1) {
-        return expect(!await $('.action-button-like > .count').isExisting())
-      } else {
-        return expect(parseInt(await $('.action-button-like > .count').getText())).toBe(count - 1)
-      }
-    } else {
-      return expect(parseInt(await $('.action-button-like > .count').getText())).toBe(count + 1)
-    }
-  }
+  // ---------------------------------------------------------------------------
+  // Comments
+  // ---------------------------------------------------------------------------
 
   async createThread (comment: string) {
-    const textarea = await $('my-video-comment-add textarea')
+    const textarea = $('my-video-comment-add textarea')
     await textarea.waitForClickable()
 
     await textarea.setValue(comment)
 
-    const confirmButton = await $('.comment-buttons .primary-button')
+    const confirmButton = $('.comment-buttons .primary-button')
     await confirmButton.waitForClickable()
     await confirmButton.click()
 
-    const createdComment = await (await $('.comment-html p')).getText()
+    const createdComment = await $('.comment-html p').getText()
 
     return expect(createdComment).toBe(comment)
   }
 
   async createReply (comment: string) {
-    const replyButton = await $('button.comment-action-reply')
+    const replyButton = $('button.comment-action-reply')
     await replyButton.waitForClickable()
     await replyButton.scrollIntoView({ block: 'center' })
     await replyButton.click()
 
-    const textarea = await $('my-video-comment my-video-comment-add textarea')
+    const textarea = $('my-video-comment my-video-comment-add textarea')
     await textarea.waitForClickable()
     await textarea.setValue(comment)
 
-    const confirmButton = await $('my-video-comment .comment-buttons .primary-button')
+    const confirmButton = $('my-video-comment .comment-buttons .primary-button')
     await confirmButton.waitForClickable()
     await replyButton.scrollIntoView({ block: 'center' })
     await confirmButton.click()
 
-    const createdComment = await $('.is-child .comment-html p')
+    const createdComment = $('.is-child .comment-html p')
     await createdComment.waitForDisplayed()
 
     return expect(await createdComment.getText()).toBe(comment)

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

@@ -2,10 +2,10 @@ import { LoginPage } from '../po/login.po'
 import { MyAccountPage } from '../po/my-account.po'
 import { PlayerPage } from '../po/player.po'
 import { VideoListPage } from '../po/video-list.po'
-import { VideoUpdatePage } from '../po/video-update.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

@@ -0,0 +1,393 @@
+import { NSFWPolicyType } from '@peertube/peertube-models'
+import { AdminConfigPage } from '../po/admin-config.po'
+import { AdminUserPage } from '../po/admin-user.po'
+import { AnonymousSettingsPage } from '../po/anonymous-settings.po'
+import { LoginPage } from '../po/login.po'
+import { MyAccountPage } from '../po/my-account.po'
+import { PlayerPage } from '../po/player.po'
+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, prepareWebBrowser, waitServerUp } from '../utils'
+
+describe('NSFW', () => {
+  let videoListPage: VideoListPage
+  let videoPublishPage: VideoPublishPage
+  let adminConfigPage: AdminConfigPage
+  let loginPage: LoginPage
+  let adminUserPage: AdminUserPage
+  let myAccountPage: MyAccountPage
+  let videoSearchPage: VideoSearchPage
+  let videoWatchPage: VideoWatchPage
+  let playerPage: PlayerPage
+  let anonymousSettingsPage: AnonymousSettingsPage
+
+  const seed = Math.random()
+  const nsfwVideo = seed + ' - nsfw'
+  const violentVideo = seed + ' - violent'
+  const normalVideo = seed + ' - normal'
+
+  let videoUrl: string
+
+  async function checkVideo (options: {
+    policy: NSFWPolicyType
+    videoName: string
+    nsfwTooltip?: string
+  }) {
+    const { policy, videoName, nsfwTooltip } = options
+
+    if (policy === 'do_not_list') {
+      expect(await videoListPage.isVideoDisplayed(videoName)).toBeFalsy()
+    } else if (policy === 'warn') {
+      expect(await videoListPage.isVideoDisplayed(videoName)).toBeTruthy()
+      expect(await videoListPage.isVideoBlurred(videoName)).toBeFalsy()
+      expect(await videoListPage.hasVideoWarning(videoName)).toBeTruthy()
+    } else if (policy === 'blur') {
+      expect(await videoListPage.isVideoDisplayed(videoName)).toBeTruthy()
+      expect(await videoListPage.isVideoBlurred(videoName)).toBeTruthy()
+      expect(await videoListPage.hasVideoWarning(videoName)).toBeTruthy()
+    } else { // Display
+      expect(await videoListPage.isVideoDisplayed(videoName)).toBeTruthy()
+      expect(await videoListPage.isVideoBlurred(videoName)).toBeFalsy()
+      expect(await videoListPage.hasVideoWarning(videoName)).toBeFalsy()
+    }
+
+    if (nsfwTooltip) {
+      await videoListPage.expectVideoNSFWTooltip(videoName, nsfwTooltip)
+    }
+  }
+
+  async function checkFilterText (policy: NSFWPolicyType) {
+    const pagesWithFilters = [
+      videoListPage.goOnRootAccount.bind(videoListPage),
+      videoListPage.goOnBrowseVideos.bind(videoListPage),
+      videoListPage.goOnRootChannel.bind(videoListPage)
+    ]
+
+    for (const goOnPage of pagesWithFilters) {
+      await goOnPage()
+
+      const filterText = await videoListPage.getNSFWFilterText()
+
+      if (policy === 'do_not_list') {
+        expect(filterText).toContain('hidden')
+      } else if (policy === 'warn') {
+        expect(filterText).toContain('warned')
+      } else if (policy === 'blur') {
+        expect(filterText).toContain('blurred')
+      } else {
+        expect(filterText).toContain('displayed')
+      }
+    }
+  }
+
+  async function checkCommonVideoListPages (policy: NSFWPolicyType, videos: string[], nsfwTooltip?: string) {
+    const pages = [
+      videoListPage.goOnRootAccount.bind(videoListPage),
+      videoListPage.goOnBrowseVideos.bind(videoListPage),
+      videoListPage.goOnRootChannel.bind(videoListPage),
+      videoListPage.goOnRootAccountChannels.bind(videoListPage),
+      videoListPage.goOnHomepage.bind(videoListPage)
+    ]
+
+    for (const goOnPage of pages) {
+      await goOnPage()
+
+      for (const video of videos) {
+        await browser.saveScreenshot(getScreenshotPath('before-test.png'))
+        await checkVideo({ policy, videoName: video, nsfwTooltip })
+      }
+    }
+
+    for (const video of videos) {
+      await videoSearchPage.search(video)
+
+      await browser.saveScreenshot(getScreenshotPath('before-test.png'))
+      await checkVideo({ policy, videoName: video, nsfwTooltip })
+    }
+  }
+
+  async function updateAdminNSFW (nsfw: NSFWPolicyType) {
+    await adminConfigPage.updateNSFWSetting(nsfw)
+    await adminConfigPage.save()
+  }
+
+  async function updateUserNSFW (nsfw: NSFWPolicyType, loggedIn: boolean) {
+    if (loggedIn) {
+      await myAccountPage.navigateToMySettings()
+      await myAccountPage.updateNSFW(nsfw)
+
+      return
+    }
+
+    await anonymousSettingsPage.openSettings()
+    await anonymousSettingsPage.updateNSFW(nsfw)
+    await anonymousSettingsPage.closeSettings()
+  }
+
+  async function updateUserViolentNSFW (nsfw: NSFWPolicyType, loggedIn: boolean) {
+    if (loggedIn) {
+      await myAccountPage.navigateToMySettings()
+      await myAccountPage.updateViolentFlag(nsfw)
+
+      return
+    }
+
+    await anonymousSettingsPage.openSettings()
+    await anonymousSettingsPage.updateViolentFlag(nsfw)
+    await anonymousSettingsPage.closeSettings()
+  }
+
+  before(async () => {
+    await waitServerUp()
+  })
+
+  beforeEach(async () => {
+    videoListPage = new VideoListPage(isMobileDevice(), isSafari())
+    adminConfigPage = new AdminConfigPage()
+    loginPage = new LoginPage(isMobileDevice())
+    adminUserPage = new AdminUserPage()
+    videoPublishPage = new VideoPublishPage()
+    myAccountPage = new MyAccountPage()
+    videoSearchPage = new VideoSearchPage()
+    playerPage = new PlayerPage()
+    videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
+    anonymousSettingsPage = new AnonymousSettingsPage()
+
+    await prepareWebBrowser()
+  })
+
+  describe('Preparation', function () {
+    it('Should login and disable NSFW', async () => {
+      await loginPage.loginAsRootUser()
+      await updateUserNSFW('display', true)
+    })
+
+    it('Should set the homepage', async () => {
+      await adminConfigPage.updateHomepage('<peertube-videos-list data-sort="-publishedAt"></peertube-videos-list>')
+      await adminConfigPage.save()
+    })
+
+    it('Should create a user', async () => {
+      await adminUserPage.createUser({
+        username: 'user_' + seed,
+        password: 'superpassword'
+      })
+    })
+
+    it('Should upload NSFW and normal videos', async () => {
+      await videoPublishPage.navigateTo()
+      await videoPublishPage.uploadVideo('video.mp4')
+      await videoPublishPage.setAsNSFW()
+      await videoPublishPage.validSecondStep(nsfwVideo)
+
+      await videoPublishPage.navigateTo()
+      await videoPublishPage.uploadVideo('video.mp4')
+      await videoPublishPage.setAsNSFW({ summary: 'bibi is violent', violent: true })
+      await videoPublishPage.validSecondStep(violentVideo)
+
+      await videoPublishPage.navigateTo()
+      await videoPublishPage.uploadVideo('video2.mp4')
+      await videoPublishPage.validSecondStep(normalVideo)
+    })
+
+    it('Should logout', async function () {
+      await loginPage.logout()
+    })
+  })
+
+  describe('NSFW with an anonymous users using instance default', function () {
+    it('Should correctly handle do not list', async () => {
+      await loginPage.loginAsRootUser()
+      await updateAdminNSFW('do_not_list')
+
+      await loginPage.logout()
+
+      await checkCommonVideoListPages('do_not_list', [ nsfwVideo, violentVideo ])
+      await checkCommonVideoListPages('display', [ normalVideo ])
+
+      await checkFilterText('do_not_list')
+    })
+
+    it('Should correctly handle blur', async () => {
+      await loginPage.loginAsRootUser()
+      await updateAdminNSFW('blur')
+
+      await loginPage.logout()
+
+      await checkCommonVideoListPages('blur', [ nsfwVideo, violentVideo ])
+      await checkCommonVideoListPages('display', [ normalVideo ])
+
+      await checkFilterText('blur')
+    })
+
+    it('Should not autoplay the video and display a warning on watch/embed page', async function () {
+      await videoListPage.clickOnVideo(nsfwVideo)
+      await videoWatchPage.waitWatchVideoName(nsfwVideo)
+
+      videoUrl = await browser.getUrl()
+
+      const check = async () => {
+        expect(await playerPage.getPlayButton().isDisplayed()).toBeTruthy()
+
+        expect(await playerPage.getNSFWContentText()).toContain('This video contains sensitive content')
+        expect(await playerPage.getMoreNSFWInfoButton().isDisplayed()).toBeFalsy()
+        expect(await playerPage.hasPoster()).toBeFalsy()
+      }
+
+      await check()
+      await videoWatchPage.goOnAssociatedEmbed()
+      await check()
+    })
+
+    it('Should correctly handle warn', async () => {
+      await loginPage.loginAsRootUser()
+      await updateAdminNSFW('warn')
+
+      await loginPage.logout()
+
+      await checkCommonVideoListPages('warn', [ nsfwVideo, violentVideo ])
+      await checkCommonVideoListPages('display', [ normalVideo ])
+
+      await checkFilterText('warn')
+    })
+
+    it('Should not autoplay the video and display a warning on watch/embed page', async function () {
+      await videoListPage.clickOnVideo(violentVideo)
+      await videoWatchPage.waitWatchVideoName(violentVideo)
+
+      const check = async () => {
+        expect(await playerPage.getPlayButton().isDisplayed()).toBeTruthy()
+
+        expect(await playerPage.getNSFWContentText()).toContain('This video contains sensitive content')
+        expect(await playerPage.hasPoster()).toBeTruthy()
+
+        const moreButton = playerPage.getMoreNSFWInfoButton()
+        expect(await moreButton.isDisplayed()).toBeTruthy()
+
+        await moreButton.click()
+        await playerPage.getNSFWDetailsContent().waitForDisplayed()
+
+        const moreContent = await playerPage.getNSFWDetailsContent().getText()
+        expect(moreContent).toContain('Potentially violent content')
+        expect(moreContent).toContain('bibi is violent')
+      }
+
+      await check()
+      await videoWatchPage.goOnAssociatedEmbed()
+      await check()
+    })
+
+    it('Should correctly handle display', async () => {
+      await loginPage.loginAsRootUser()
+      await updateAdminNSFW('display')
+
+      await loginPage.logout()
+
+      await checkCommonVideoListPages('display', [ nsfwVideo, violentVideo, normalVideo ])
+
+      await checkFilterText('display')
+    })
+
+    it('Should autoplay the video on watch page', async function () {
+      await videoListPage.clickOnVideo(nsfwVideo)
+      await videoWatchPage.waitWatchVideoName(nsfwVideo)
+
+      expect(await playerPage.getPlayButton().isDisplayed()).toBeFalsy()
+    })
+  })
+
+  describe('NSFW settings', function () {
+    function runSuite (loggedIn: boolean) {
+      it('Should correctly handle do not list', async () => {
+        await updateUserNSFW('do_not_list', loggedIn)
+
+        await checkCommonVideoListPages('do_not_list', [ nsfwVideo, violentVideo ])
+        await checkCommonVideoListPages('display', [ normalVideo ])
+
+        await checkFilterText('do_not_list')
+      })
+
+      it('Should use a confirm modal when viewing the video and watch the video', async function () {
+        await go(videoUrl)
+
+        const confirmTitle = videoWatchPage.getModalTitleEl()
+        await confirmTitle.waitForDisplayed()
+        expect(await confirmTitle.getText()).toContain('Sensitive video')
+
+        await videoWatchPage.confirmModal()
+        await videoWatchPage.waitWatchVideoName(nsfwVideo)
+      })
+
+      it('Should correctly handle blur', async () => {
+        await updateUserNSFW('blur', loggedIn)
+
+        await checkCommonVideoListPages('blur', [ nsfwVideo ], 'This video contains sensitive content')
+        await checkCommonVideoListPages('blur', [ violentVideo ], 'This video contains sensitive content: violence')
+        await checkCommonVideoListPages('display', [ normalVideo ])
+
+        await checkFilterText('blur')
+      })
+
+      it('Should correctly handle warn', async () => {
+        await updateUserNSFW('warn', loggedIn)
+
+        await checkCommonVideoListPages('warn', [ nsfwVideo ], 'This video contains sensitive content')
+        await checkCommonVideoListPages('warn', [ violentVideo ], 'This video contains sensitive content: violence')
+        await checkCommonVideoListPages('display', [ normalVideo ])
+
+        await checkFilterText('warn')
+      })
+
+      it('Should correctly handle display', async () => {
+        await updateUserNSFW('display', loggedIn)
+
+        await checkCommonVideoListPages('display', [ nsfwVideo, violentVideo, normalVideo ])
+
+        await checkFilterText('display')
+      })
+
+      it('Should update the setting to blur violent video with display NSFW setting', async () => {
+        await updateUserViolentNSFW('blur', loggedIn)
+
+        await checkCommonVideoListPages('display', [ nsfwVideo, normalVideo ])
+        await checkCommonVideoListPages('blur', [ violentVideo ])
+      })
+
+      it('Should update the setting to hide NSFW videos but warn violent videos', async () => {
+        await updateUserNSFW('do_not_list', loggedIn)
+        await updateUserViolentNSFW('warn', loggedIn)
+
+        await checkCommonVideoListPages('display', [ normalVideo ])
+        await checkCommonVideoListPages('warn', [ violentVideo ])
+        await checkCommonVideoListPages('do_not_list', [ nsfwVideo ])
+      })
+
+      it('Should update the setting to blur NSFW videos and hide violent videos', async () => {
+        await updateUserNSFW('blur', loggedIn)
+        await updateUserViolentNSFW('do_not_list', loggedIn)
+
+        await checkCommonVideoListPages('display', [ normalVideo ])
+        await checkCommonVideoListPages('do_not_list', [ violentVideo ])
+        await checkCommonVideoListPages('blur', [ nsfwVideo ])
+      })
+    }
+
+    describe('NSFW with an anonymous user', function () {
+      runSuite(false)
+    })
+
+    describe('NSFW with a logged in users', function () {
+      before(async () => {
+        await loginPage.login({ username: 'user_' + seed, password: 'superpassword' })
+      })
+
+      runSuite(true)
+
+      after(async () => {
+        await loginPage.logout()
+      })
+    })
+  })
+})

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

@@ -0,0 +1,87 @@
+import { AnonymousSettingsPage } from '../po/anonymous-settings.po'
+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, prepareWebBrowser, waitServerUp } from '../utils'
+
+describe('Player settings', () => {
+  let videoPublishPage: VideoPublishPage
+  let loginPage: LoginPage
+  let videoWatchPage: VideoWatchPage
+  let myAccountPage: MyAccountPage
+  let anonymousSettingsPage: AnonymousSettingsPage
+
+  before(async () => {
+    await waitServerUp()
+
+    loginPage = new LoginPage(isMobileDevice())
+    videoPublishPage = new VideoPublishPage()
+    videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
+    myAccountPage = new MyAccountPage()
+    anonymousSettingsPage = new AnonymousSettingsPage()
+
+    await prepareWebBrowser()
+  })
+
+  describe('P2P', function () {
+    let videoUrl: string
+
+    async function goOnVideoWatchPage () {
+      await go(videoUrl)
+      await videoWatchPage.waitWatchVideoName('video')
+    }
+
+    async function checkP2P (enabled: boolean) {
+      await goOnVideoWatchPage()
+      expect(await videoWatchPage.isPrivacyWarningDisplayed()).toEqual(enabled)
+
+      await videoWatchPage.goOnAssociatedEmbed()
+      expect(await videoWatchPage.isEmbedWarningDisplayed()).toEqual(enabled)
+    }
+
+    before(async () => {
+      await loginPage.loginAsRootUser()
+      await videoPublishPage.navigateTo()
+      await videoPublishPage.uploadVideo('video.mp4')
+      await videoPublishPage.validSecondStep('video')
+
+      await videoPublishPage.clickOnWatch()
+      await videoWatchPage.waitWatchVideoName('video')
+
+      videoUrl = await browser.getUrl()
+    })
+
+    beforeEach(async function () {
+      await goOnVideoWatchPage()
+    })
+
+    it('Should have P2P enabled for a logged in user', async function () {
+      await checkP2P(true)
+    })
+
+    it('Should disable P2P for a logged in user', async function () {
+      await myAccountPage.navigateToMySettings()
+      await myAccountPage.clickOnP2PCheckbox()
+
+      await checkP2P(false)
+    })
+
+    it('Should have P2P enabled for anonymous users', async function () {
+      await loginPage.logout()
+
+      await checkP2P(true)
+    })
+
+    it('Should disable P2P for an anonymous user', async function () {
+      await anonymousSettingsPage.openSettings()
+      await anonymousSettingsPage.clickOnP2PCheckbox()
+
+      await checkP2P(false)
+    })
+  })
+
+  after(async () => {
+    await browser.saveScreenshot(getScreenshotPath('after-test.png'))
+  })
+})

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,25 +1,42 @@
 import { LoginPage } from '../po/login.po'
 import { VideoPublishPage } from '../po/video-publish.po'
-import { getScreenshotPath, isMobileDevice, waitServerUp } from '../utils'
+import { VideoWatchPage } from '../po/video-watch.po'
+import { getScreenshotPath, isMobileDevice, isSafari, prepareWebBrowser, waitServerUp } from '../utils'
 
 describe('Publish video', () => {
   let videoPublishPage: VideoPublishPage
   let loginPage: LoginPage
+  let videoWatchPage: VideoWatchPage
 
   before(async () => {
     await waitServerUp()
 
     loginPage = new LoginPage(isMobileDevice())
     videoPublishPage = new VideoPublishPage()
+    videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
 
-    await browser.maximizeWindow()
+    await prepareWebBrowser()
+
+    await loginPage.loginAsRootUser()
+  })
+
+  describe('Default upload values', function () {
+    it('Should have default video values', async function () {
+      await videoPublishPage.navigateTo()
+      await videoPublishPage.uploadVideo('video3.mp4')
+      await videoPublishPage.validSecondStep('video')
+
+      await videoPublishPage.clickOnWatch()
+      await videoWatchPage.waitWatchVideoName('video')
+
+      expect(await videoWatchPage.getPrivacy()).toBe('Public')
+      expect(await videoWatchPage.getLicence()).toBe('Unknown')
+      expect(await videoWatchPage.isDownloadEnabled()).toBeTruthy()
+      expect(await videoWatchPage.areCommentsEnabled()).toBeTruthy()
+    })
   })
 
   describe('Common', function () {
-    before(async function () {
-      await loginPage.loginAsRootUser()
-    })
-
     it('Should upload a video and on refresh being redirected to the manage page', async function () {
       await videoPublishPage.navigateTo()
       await videoPublishPage.uploadVideo('video.mp4')
@@ -37,16 +54,26 @@ describe('Publish video', () => {
 
       await videoPublishPage.refresh('scheduled')
 
-      // check if works? screenshot
       expect(videoPublishPage.getScheduleInput()).toBeDisplayed()
 
       const nextDay = new Date()
-      nextDay.setDate(nextDay.getDate() + 1)
+      nextDay.setDate(1)
+      nextDay.setMonth(nextDay.getMonth() + 1)
 
       const inputDate = new Date(await videoPublishPage.getScheduleInput().getValue())
-      expect(nextDay.getDate()).toEqual(inputDate.getDate())
-      expect(nextDay.getMonth()).toEqual(inputDate.getMonth())
-      expect(nextDay.getFullYear()).toEqual(inputDate.getFullYear())
+      expect(inputDate.getDate()).toEqual(nextDay.getDate())
+      expect(inputDate.getMonth()).toEqual(nextDay.getMonth())
+      expect(inputDate.getFullYear()).toEqual(nextDay.getFullYear())
+    })
+  })
+
+  describe('Import', function () {
+    it('Should import a video and on refresh being redirected to the manage page', async function () {
+      await videoPublishPage.navigateTo()
+      await videoPublishPage.importVideo()
+      await videoPublishPage.validSecondStep('second video')
+
+      await videoPublishPage.refresh('second video')
     })
   })
 

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

@@ -5,11 +5,13 @@ import { SignupPage } from '../po/signup.po'
 import {
   browserSleep,
   findEmailTo,
+  getEmailPort,
   getScreenshotPath,
   getVerificationLink,
   go,
   isMobileDevice,
   MockSMTPServer,
+  prepareWebBrowser,
   waitServerUp
 } from '../utils'
 
@@ -75,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) {
@@ -103,7 +106,7 @@ describe('Signup', () => {
     signupPage = new SignupPage()
     adminRegistrationPage = new AdminRegistrationPage()
 
-    await browser.maximizeWindow()
+    await prepareWebBrowser()
   })
 
   describe('Signup disabled', function () {
@@ -189,7 +192,7 @@ describe('Signup', () => {
       })
 
       it('Should validate the third step (account)', async function () {
-        await signupPage.fillAccountStep({ username: 'user_2', displayName: 'user_2 display name', password: 'password' })
+        await signupPage.fillAccountStep({ username: 'user_2', displayName: 'user_2 display name', password: 'superpassword' })
         await signupPage.validateStep()
       })
 
@@ -212,7 +215,7 @@ describe('Signup', () => {
       })
 
       it('Should display a message when trying to login with this account', async function () {
-        const error = await loginPage.getLoginError('user_2', 'password')
+        const error = await loginPage.getLoginError('user_2', 'superpassword')
 
         expect(error).toContain('awaiting approval')
       })
@@ -220,14 +223,14 @@ describe('Signup', () => {
       it('Should accept the registration', async function () {
         await loginPage.loginAsRootUser()
 
-        await adminRegistrationPage.navigateToRegistratonsList()
+        await adminRegistrationPage.navigateToRegistrationsList()
         await adminRegistrationPage.accept('user_2', 'moderation response')
 
         await loginPage.logout()
       })
 
       it('Should be able to login with this new account', async function () {
-        await loginPage.login({ username: 'user_2', password: 'password', displayName: 'user_2 display name' })
+        await loginPage.login({ username: 'user_2', password: 'superpassword', displayName: 'user_2 display name' })
 
         await loginPage.logout()
       })
@@ -236,15 +239,9 @@ describe('Signup', () => {
 
   describe('Email verification enabled', function () {
     const emails: any[] = []
-    let emailPort: number
 
     before(async () => {
-      const key = browser.options.baseUrl + '-emailPort'
-      // FIXME: typings are wrong, get returns a promise
-      // FIXME: use * because the key is not properly escaped by the shared store when using get(key)
-      emailPort = (await (browser.sharedStore.get('*') as unknown as Promise<number>))[key]
-
-      await MockSMTPServer.Instance.collectEmails(emailPort, emails)
+      await MockSMTPServer.Instance.collectEmails(await getEmailPort(), emails)
     })
 
     describe('Direct registration', function () {
@@ -340,7 +337,7 @@ describe('Signup', () => {
           username: 'user_4',
           displayName: 'user_4 display name',
           email: 'user_4@example.com',
-          password: 'password'
+          password: 'superpassword'
         })
         await signupPage.validateStep()
       })
@@ -364,7 +361,7 @@ describe('Signup', () => {
       })
 
       it('Should display a message when trying to login with this account', async function () {
-        const error = await loginPage.getLoginError('user_4', 'password')
+        const error = await loginPage.getLoginError('user_4', 'superpassword')
 
         expect(error).toContain('awaiting approval')
       })
@@ -372,7 +369,7 @@ describe('Signup', () => {
       it('Should accept the registration', async function () {
         await loginPage.loginAsRootUser()
 
-        await adminRegistrationPage.navigateToRegistratonsList()
+        await adminRegistrationPage.navigateToRegistrationsList()
         await adminRegistrationPage.accept('user_4', 'moderation response 2')
 
         await loginPage.logout()
@@ -404,4 +401,8 @@ describe('Signup', () => {
       MockSMTPServer.Instance.kill()
     })
   })
+
+  after(async () => {
+    await browser.saveScreenshot(getScreenshotPath('after-test.png'))
+  })
 })

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

@@ -1,83 +1,79 @@
-import { AnonymousSettingsPage } from '../po/anonymous-settings.po'
+import { AdminConfigPage } from '../po/admin-config.po'
 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 { go, isMobileDevice, isSafari, waitServerUp } from '../utils'
+import {
+  browserSleep,
+  findEmailTo,
+  getEmailPort,
+  getScreenshotPath,
+  getVerificationLink,
+  go,
+  isMobileDevice,
+  MockSMTPServer,
+  prepareWebBrowser,
+  waitServerUp
+} from '../utils'
 
 describe('User settings', () => {
-  let videoPublishPage: VideoPublishPage
   let loginPage: LoginPage
-  let videoWatchPage: VideoWatchPage
   let myAccountPage: MyAccountPage
-  let anonymousSettingsPage: AnonymousSettingsPage
+  let adminConfigPage: AdminConfigPage
+
+  const emails: any[] = []
 
   before(async () => {
     await waitServerUp()
 
     loginPage = new LoginPage(isMobileDevice())
-    videoPublishPage = new VideoPublishPage()
-    videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
     myAccountPage = new MyAccountPage()
-    anonymousSettingsPage = new AnonymousSettingsPage()
+    adminConfigPage = new AdminConfigPage()
 
-    await browser.maximizeWindow()
+    await MockSMTPServer.Instance.collectEmails(await getEmailPort(), emails)
+
+    await prepareWebBrowser()
   })
 
-  describe('P2P', function () {
-    let videoUrl: string
-
-    async function goOnVideoWatchPage () {
-      await go(videoUrl)
-      await videoWatchPage.waitWatchVideoName('video')
-    }
-
-    async function checkP2P (enabled: boolean) {
-      await goOnVideoWatchPage()
-      expect(await videoWatchPage.isPrivacyWarningDisplayed()).toEqual(enabled)
-
-      await videoWatchPage.goOnAssociatedEmbed()
-      expect(await videoWatchPage.isEmbedWarningDisplayed()).toEqual(enabled)
-    }
-
-    before(async () => {
+  describe('Email', function () {
+    before(async function () {
       await loginPage.loginAsRootUser()
-      await videoPublishPage.navigateTo()
-      await videoPublishPage.uploadVideo('video.mp4')
-      await videoPublishPage.validSecondStep('video')
 
-      await videoPublishPage.clickOnWatch()
-      await videoWatchPage.waitWatchVideoName('video')
+      await adminConfigPage.toggleSignup(true)
+      await adminConfigPage.toggleSignupEmailVerification(true)
+      await adminConfigPage.save()
 
-      videoUrl = await browser.getUrl()
+      await browser.refresh()
     })
 
-    beforeEach(async function () {
-      await goOnVideoWatchPage()
-    })
-
-    it('Should have P2P enabled for a logged in user', async function () {
-      await checkP2P(true)
-    })
-
-    it('Should disable P2P for a logged in user', async function () {
+    it('Should ask to change the email', async function () {
       await myAccountPage.navigateToMySettings()
-      await myAccountPage.clickOnP2PCheckbox()
+      await myAccountPage.updateEmail('email2@example.com', loginPage.getRootPassword())
 
-      await checkP2P(false)
+      const pendingEmailBlock = $('.pending-email')
+      await pendingEmailBlock.waitForDisplayed()
+      await expect(pendingEmailBlock).toHaveText(expect.stringContaining('email2@example.com is awaiting email verification'))
+
+      let email: { text: string }
+
+      while (!(email = findEmailTo(emails, 'email2@example.com'))) {
+        await browserSleep(100)
+      }
+
+      await go(getVerificationLink(email))
+
+      const alertBlock = $('.alert-success')
+      await alertBlock.waitForDisplayed()
+      await expect(alertBlock).toHaveText(expect.stringContaining('Email updated'))
+
+      await myAccountPage.navigateToMySettings()
+      const changeEmailBlock = $('.change-email .form-group-description')
+      await changeEmailBlock.waitForDisplayed()
+      await expect(changeEmailBlock).toHaveText(expect.stringContaining('Your current email is email2@example.com'))
     })
+  })
 
-    it('Should have P2P enabled for anonymous users', async function () {
-      await loginPage.logout()
+  after(async () => {
+    MockSMTPServer.Instance.kill()
 
-      await checkP2P(true)
-    })
-
-    it('Should disable P2P for an anonymous user', async function () {
-      await anonymousSettingsPage.openSettings()
-      await anonymousSettingsPage.clickOnP2PCheckbox()
-
-      await checkP2P(false)
-    })
+    await browser.saveScreenshot(getScreenshotPath('after-test.png'))
   })
 })

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/suites-local/videos-list.e2e-spec.ts

@@ -1,213 +0,0 @@
-import { AdminConfigPage } from '../po/admin-config.po'
-import { LoginPage } from '../po/login.po'
-import { MyAccountPage } from '../po/my-account.po'
-import { VideoListPage } from '../po/video-list.po'
-import { VideoSearchPage } from '../po/video-search.po'
-import { VideoPublishPage } from '../po/video-publish.po'
-import { VideoWatchPage } from '../po/video-watch.po'
-import { NSFWPolicy } from '../types/common'
-import { isMobileDevice, isSafari, waitServerUp } from '../utils'
-
-describe('Videos list', () => {
-  let videoListPage: VideoListPage
-  let videoPublishPage: VideoPublishPage
-  let adminConfigPage: AdminConfigPage
-  let loginPage: LoginPage
-  let myAccountPage: MyAccountPage
-  let videoSearchPage: VideoSearchPage
-  let videoWatchPage: VideoWatchPage
-
-  const seed = Math.random()
-  const nsfwVideo = seed + ' - nsfw'
-  const normalVideo = seed + ' - normal'
-
-  async function checkNormalVideo () {
-    expect(await videoListPage.videoExists(normalVideo)).toBeTruthy()
-    expect(await videoListPage.videoIsBlurred(normalVideo)).toBeFalsy()
-  }
-
-  async function checkNSFWVideo (policy: NSFWPolicy, filterText?: string) {
-    if (policy === 'do_not_list') {
-      if (filterText) expect(filterText).toContain('hidden')
-
-      expect(await videoListPage.videoExists(nsfwVideo)).toBeFalsy()
-      return
-    }
-
-    if (policy === 'blur') {
-      if (filterText) expect(filterText).toContain('blurred')
-
-      expect(await videoListPage.videoExists(nsfwVideo)).toBeTruthy()
-      expect(await videoListPage.videoIsBlurred(nsfwVideo)).toBeTruthy()
-      return
-    }
-
-    // display
-    if (filterText) expect(filterText).toContain('displayed')
-
-    expect(await videoListPage.videoExists(nsfwVideo)).toBeTruthy()
-    expect(await videoListPage.videoIsBlurred(nsfwVideo)).toBeFalsy()
-  }
-
-  async function checkCommonVideoListPages (policy: NSFWPolicy) {
-    const promisesWithFilters = [
-      videoListPage.goOnRootAccount.bind(videoListPage),
-      videoListPage.goOnBrowseVideos.bind(videoListPage),
-      videoListPage.goOnRootChannel.bind(videoListPage)
-    ]
-
-    for (const p of promisesWithFilters) {
-      await p()
-
-      const filter = await videoListPage.getNSFWFilter()
-      const filterText = await filter.getText()
-
-      await checkNormalVideo()
-      await checkNSFWVideo(policy, filterText)
-    }
-
-    const promisesWithoutFilters = [
-      videoListPage.goOnRootAccountChannels.bind(videoListPage),
-      videoListPage.goOnHomepage.bind(videoListPage)
-    ]
-    for (const p of promisesWithoutFilters) {
-      await p()
-
-      await checkNormalVideo()
-      await checkNSFWVideo(policy)
-    }
-  }
-
-  async function checkSearchPage (policy: NSFWPolicy) {
-    await videoSearchPage.search(normalVideo)
-    await checkNormalVideo()
-
-    await videoSearchPage.search(nsfwVideo)
-    await checkNSFWVideo(policy)
-  }
-
-  async function updateAdminNSFW (nsfw: NSFWPolicy) {
-    await adminConfigPage.updateNSFWSetting(nsfw)
-    await adminConfigPage.save()
-  }
-
-  async function updateUserNSFW (nsfw: NSFWPolicy) {
-    await myAccountPage.navigateToMySettings()
-    await myAccountPage.updateNSFW(nsfw)
-  }
-
-  before(async () => {
-    await waitServerUp()
-  })
-
-  beforeEach(async () => {
-    videoListPage = new VideoListPage(isMobileDevice(), isSafari())
-    adminConfigPage = new AdminConfigPage()
-    loginPage = new LoginPage(isMobileDevice())
-    videoPublishPage = new VideoPublishPage()
-    myAccountPage = new MyAccountPage()
-    videoSearchPage = new VideoSearchPage()
-    videoWatchPage = new VideoWatchPage(isMobileDevice(), isSafari())
-
-    await browser.maximizeWindow()
-  })
-
-  it('Should login and disable NSFW', async () => {
-    await loginPage.loginAsRootUser()
-    await updateUserNSFW('display')
-  })
-
-  it('Should set the homepage', async () => {
-    await adminConfigPage.updateHomepage('<peertube-videos-list data-sort="-publishedAt"></peertube-videos-list>')
-    await adminConfigPage.save()
-  })
-
-  it('Should upload 2 videos (NSFW and classic videos)', async () => {
-    await videoPublishPage.navigateTo()
-    await videoPublishPage.uploadVideo('video.mp4')
-    await videoPublishPage.setAsNSFW()
-    await videoPublishPage.validSecondStep(nsfwVideo)
-
-    await videoPublishPage.navigateTo()
-    await videoPublishPage.uploadVideo('video2.mp4')
-    await videoPublishPage.validSecondStep(normalVideo)
-  })
-
-  it('Should logout', async function () {
-    await loginPage.logout()
-  })
-
-  describe('Anonymous users', function () {
-    it('Should correctly handle do not list', async () => {
-      await loginPage.loginAsRootUser()
-      await updateAdminNSFW('do_not_list')
-
-      await loginPage.logout()
-      await checkCommonVideoListPages('do_not_list')
-      await checkSearchPage('do_not_list')
-    })
-
-    it('Should correctly handle blur', async () => {
-      await loginPage.loginAsRootUser()
-      await updateAdminNSFW('blur')
-
-      await loginPage.logout()
-      await checkCommonVideoListPages('blur')
-      await checkSearchPage('blur')
-    })
-
-    it('Should correctly handle display', async () => {
-      await loginPage.loginAsRootUser()
-      await updateAdminNSFW('display')
-
-      await loginPage.logout()
-      await checkCommonVideoListPages('display')
-      await checkSearchPage('display')
-    })
-  })
-
-  describe('Logged in users', function () {
-    before(async () => {
-      await loginPage.loginAsRootUser()
-    })
-
-    it('Should correctly handle do not list', async () => {
-      await updateUserNSFW('do_not_list')
-      await checkCommonVideoListPages('do_not_list')
-      await checkSearchPage('do_not_list')
-    })
-
-    it('Should correctly handle blur', async () => {
-      await updateUserNSFW('blur')
-      await checkCommonVideoListPages('blur')
-      await checkSearchPage('blur')
-    })
-
-    it('Should correctly handle display', async () => {
-      await updateUserNSFW('display')
-      await checkCommonVideoListPages('display')
-      await checkSearchPage('display')
-    })
-
-    after(async () => {
-      await loginPage.logout()
-    })
-  })
-
-  describe('Default upload values', function () {
-    it('Should have default video values', async function () {
-      await loginPage.loginAsRootUser()
-      await videoPublishPage.navigateTo()
-      await videoPublishPage.uploadVideo('video3.mp4')
-      await videoPublishPage.validSecondStep('video')
-
-      await videoPublishPage.clickOnWatch()
-      await videoWatchPage.waitWatchVideoName('video')
-
-      expect(await videoWatchPage.getPrivacy()).toBe('Public')
-      expect(await videoWatchPage.getLicence()).toBe('Unknown')
-      expect(await videoWatchPage.isDownloadEnabled()).toBeTruthy()
-      expect(await videoWatchPage.areCommentsEnabled()).toBeTruthy()
-    })
-  })
-})

client/e2e/src/types/common.ts

@@ -1 +0,0 @@
-export type NSFWPolicy = 'do_not_list' | 'blur' | 'display'

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'
+    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,25 +38,38 @@ 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()
 
-  const option = await $$(`[formcontrolname=${id}] li[role=option]`).filter(async o => {
-    const text = await o.getText()
+  const getOption = async () => {
+    const options = await $$(`[formcontrolname=${id}] li[role=option]`).filter(async o => {
+      const text = await o.getText()
 
-    return text.trimStart().startsWith(valueLabel)
-  }).then(options => options[0])
+      return text.trimStart().startsWith(valueLabel)
+    })
 
-  await option.waitForDisplayed()
+    if (options.length === 0) return undefined
 
-  return option.click()
+    return options[0]
+  }
+
+  await browser.waitUntil(async () => {
+    const option = await getOption()
+    if (!option) return false
+
+    return option.isDisplayed()
+  })
+
+  return (await getOption()).click()
 }
 
 export async function findParentElement (
-  el: WebdriverIO.Element,
-  finder: (el: WebdriverIO.Element) => Promise<boolean>
+  el: ChainablePromiseElement,
+  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/src/utils/email.ts

@@ -1,4 +1,4 @@
-function getVerificationLink (email: { text: string }) {
+export function getVerificationLink (email: { text: string }) {
   const { text } = email
 
   const regexp = /\[(?<link>http:\/\/[^\]]+)\]/g
@@ -9,13 +9,15 @@ function getVerificationLink (email: { text: string }) {
   for (const match of matched) {
     const link = match.groups.link
 
-    if (link.includes('/verify-account/')) return link
+    if (link.includes('/verify-account/')) {
+      return link.replace('127.0.0.1', 'localhost')
+    }
   }
 
   throw new Error('Could not find /verify-account/ link')
 }
 
-function findEmailTo (emails: { text: string, to: { address: string }[] }[], to: string) {
+export function findEmailTo (emails: { text: string, to: { address: string }[] }[], to: string) {
   for (const email of emails) {
     for (const { address } of email.to) {
       if (address === to) return email
@@ -25,7 +27,12 @@ function findEmailTo (emails: { text: string, to: { address: string }[] }[], to:
   return undefined
 }
 
-export {
-  getVerificationLink,
-  findEmailTo
+export async function getEmailPort () {
+  const key = browser.options.baseUrl + '-emailPort'
+  // FIXME: typings are wrong, get returns a promise
+  // FIXME: use * because the key is not properly escaped by the shared store when using get(key)
+  const emailPort = (await (browser.sharedStore.get('*') as unknown as Promise<number>))[key]
+  if (!emailPort) throw new Error('Invalid email port')
+
+  return emailPort
 }

client/e2e/src/utils/files.ts

@@ -1,17 +1,13 @@
-import { mkdirSync } from 'fs'
+import { mkdir, rm } from 'fs/promises'
 import { join } from 'path'
 
 const SCREENSHOTS_DIRECTORY = 'screenshots'
 
-function createScreenshotsDirectory () {
-  mkdirSync(SCREENSHOTS_DIRECTORY, { recursive: true })
+export async function createScreenshotsDirectory () {
+  await rm(SCREENSHOTS_DIRECTORY, { recursive: true, force: true })
+  await mkdir(SCREENSHOTS_DIRECTORY, { recursive: true })
 }
 
-function getScreenshotPath (filename: string) {
+export function getScreenshotPath (filename: string) {
   return join(SCREENSHOTS_DIRECTORY, filename)
 }
-
-export {
-  createScreenshotsDirectory,
-  getScreenshotPath
-}

client/e2e/src/utils/hooks.ts

@@ -81,7 +81,7 @@ function buildConfig (suiteFile: string = undefined) {
     }
   }
 
-  if (filename === 'signup.e2e-spec.ts') {
+  if (filename === 'signup.e2e-spec.ts' || filename === 'user-settings.e2e-spec.ts') {
     return {
       signup: {
         limit: -1

client/e2e/src/utils/urls.ts

@@ -13,7 +13,9 @@ const FIXTURE_URLS = {
   HLS_EMBED: 'https://peertube2.cpy.re/videos/embed/969bf103-7818-43b5-94a0-de159e13de50',
   HLS_PLAYLIST_EMBED: 'https://peertube2.cpy.re/video-playlists/embed/73804a40-da9a-40c2-b1eb-2c6d9eec8f0a',
 
-  LIVE_VIDEO: 'https://peertube2.cpy.re/w/oBw6LwsMWWRkmXYfuYRpJd'
+  LIVE_VIDEO: 'https://peertube2.cpy.re/w/oBw6LwsMWWRkmXYfuYRpJd',
+
+  IMPORT_URL: 'https://download.cpy.re/peertube/good_video.mp4'
 }
 
 export {

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/e2e/wdio.main.conf.ts

@@ -102,13 +102,7 @@ export const config = {
     bail: true
   },
 
-  autoCompileOpts: {
-    autoCompile: true,
-
-    tsNodeOpts: {
-      project: require('path').join(__dirname, './tsconfig.json')
-    }
-  },
+  tsConfigPath: require('path').join(__dirname, './tsconfig.json'),
 
   before: function () {
     require('./src/commands/upload')

client/eslint.config.mjs

@@ -0,0 +1,204 @@
+import { defineConfig, globalIgnores } from 'eslint/config'
+import love from 'eslint-config-love'
+import stylistic from '@stylistic/eslint-plugin'
+import angular from 'angular-eslint'
+
+export default defineConfig([
+  globalIgnores([
+    '**/node_modules/',
+    '**/dist',
+    '**/build',
+    '.angular'
+  ]),
+
+  {
+    extends: [
+      love,
+      angular.configs.tsRecommended
+    ],
+
+    processor: angular.processInlineTemplates,
+
+    plugins: {
+      '@stylistic': stylistic
+    },
+
+    files: [
+      'src/**/*.ts',
+      'e2e/**/*.ts'
+    ],
+
+    rules: {
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          'type': [ 'element', 'attribute' ],
+          'prefix': 'my',
+          'style': 'kebab-case'
+        }
+      ],
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          'type': [ 'element', 'attribute' ],
+          'prefix': 'my',
+          'style': 'camelCase'
+        }
+      ],
+      '@angular-eslint/use-component-view-encapsulation': 'error',
+
+      '@typescript-eslint/prefer-readonly': 'off',
+      "n/no-callback-literal": "off",
+
+      '@stylistic/semi': [ 'error', 'never' ],
+
+      'eol-last': [ 'error', 'always' ],
+      'indent': 'off',
+      'no-lone-blocks': 'off',
+      'no-mixed-operators': 'off',
+
+      'max-len': [ 'error', {
+        code: 140
+      } ],
+
+      'array-bracket-spacing': [ 'error', 'always' ],
+      'quote-props': [ 'error', 'consistent-as-needed' ],
+      'padded-blocks': 'off',
+      'no-async-promise-executor': 'off',
+      'dot-notation': 'off',
+      'promise/param-names': 'off',
+      'import/first': 'off',
+
+      'operator-linebreak': [ 'error', 'after', {
+        overrides: {
+          '?': 'before',
+          ':': 'before'
+        }
+      } ],
+
+      '@typescript-eslint/consistent-type-assertions': [ 'error', {
+        assertionStyle: 'as'
+      } ],
+
+      '@typescript-eslint/array-type': [ 'error', {
+        default: 'array'
+      } ],
+
+      '@typescript-eslint/restrict-template-expressions': [ 'off', {
+        allowNumber: 'true'
+      } ],
+
+      '@typescript-eslint/no-this-alias': [ 'error', {
+        allowDestructuring: true,
+        allowedNames: [ 'self' ]
+      } ],
+
+      '@typescript-eslint/return-await': 'off',
+      '@typescript-eslint/no-base-to-string': 'off',
+      '@typescript-eslint/quotes': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/promise-function-async': 'off',
+      '@typescript-eslint/no-dynamic-delete': 'off',
+      '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'off',
+      '@typescript-eslint/strict-boolean-expressions': 'off',
+      '@typescript-eslint/consistent-type-definitions': 'off',
+      '@typescript-eslint/no-misused-promises': 'off',
+      '@typescript-eslint/no-namespace': 'off',
+      '@typescript-eslint/no-empty-interface': 'off',
+      '@typescript-eslint/no-extraneous-class': 'off',
+      '@typescript-eslint/prefer-nullish-coalescing': 'off',
+      '@typescript-eslint/consistent-indexed-object-style': 'off',
+      '@typescript-eslint/restrict-plus-operands': 'off',
+      '@typescript-eslint/no-unnecessary-condition': 'off',
+      '@typescript-eslint/consistent-type-imports': 'off',
+      'no-implicit-globals': 'off',
+      '@typescript-eslint/no-confusing-void-expression': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'logical-assignment-operators': 'off',
+      '@typescript-eslint/no-unsafe-assignment': 'off',
+      '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/no-unsafe-argument': 'off',
+      '@typescript-eslint/no-magic-numbers': 'off',
+      '@typescript-eslint/no-unsafe-call': 'off',
+      '@typescript-eslint/no-unsafe-type-assertion': 'off',
+      '@typescript-eslint/prefer-destructuring': 'off',
+      'promise/avoid-new': 'off',
+      '@typescript-eslint/class-methods-use-this': 'off',
+      'arrow-body-style': 'off',
+      '@typescript-eslint/use-unknown-in-catch-callback-variable': 'off',
+      '@typescript-eslint/consistent-type-exports': 'off',
+      '@typescript-eslint/init-declarations': 'off',
+      'no-console': 'off',
+      '@typescript-eslint/dot-notation': 'off',
+      '@typescript-eslint/method-signature-style': 'off',
+      'eslint-comments/require-description': 'off',
+      'max-lines': 'off',
+      '@typescript-eslint/no-misused-spread': 'off',
+      'consistent-this': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      'prefer-regex-literals': 'off',
+      '@typescript-eslint/prefer-regexp-exec': 'off',
+      '@typescript-eslint/prefer-promise-reject-errors': 'off',
+      '@typescript-eslint/no-unnecessary-template-expression': 'off',
+      '@typescript-eslint/no-loop-func': 'off',
+      '@typescript-eslint/switch-exhaustiveness-check': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-import-type-side-effects': 'off',
+      '@typescript-eslint/no-require-imports': 'off',
+      'no-useless-return': 'off',
+      '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: [
+          { from: 'package', package: 'video.js', name: 'options'}
+        ]
+      }],
+
+      // Can be interesting to enable
+      '@typescript-eslint/no-unsafe-return': 'off',
+      // Can be interesting to enable
+      'complexity': 'off',
+      // Interesting but has a bug with specific cases
+      '@typescript-eslint/no-unnecessary-type-parameters': 'off',
+      // TODO: enable
+      '@typescript-eslint/prefer-as-const': 'off',
+      // TODO: enable
+      '@typescript-eslint/max-params': 'off',
+      // TODO: enable
+      '@typescript-eslint/no-unsafe-function-type': 'off',
+      // TODO: enable
+      '@typescript-eslint/no-deprecated': 'off',
+      // TODO: enable
+      '@typescript-eslint/no-floating-promises': 'off',
+      // TODO: enable but it fails in our CI
+      '@typescript-eslint/no-redundant-type-constituents': 'off',
+
+      // We use many nested callbacks in our tests
+      'max-nested-callbacks': 'off'
+    },
+
+    languageOptions: {
+      parserOptions: {
+        projectService: {
+          allowDefaultProject: [ 'src/standalone/build-tools/vite-utils.ts' ]
+        }
+      }
+    }
+  },
+
+  {
+    files: [ '**/*.html' ],
+    extends: [
+      angular.configs.templateRecommended,
+      angular.configs.templateAccessibility,
+    ],
+    rules: {
+      // TODO: enable
+      '@angular-eslint/template/button-has-type': 'off'
+    }
+  }
+])

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "peertube-client",
-  "version": "7.1.0",
+  "version": "7.3.0",
   "private": true,
   "license": "AGPL-3.0",
   "author": {
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "lint": "npm run lint-ts && npm run lint-scss",
-    "lint-ts": "eslint --cache --ext .ts src/standalone/**/*.ts && npm run ng lint",
+    "lint-ts": "eslint",
     "lint-scss": "stylelint 'src/**/*.scss'",
     "eslint": "eslint",
     "ng": "ng",
@@ -34,11 +34,6 @@
   ],
   "typings": "*.d.ts",
   "devDependencies": {
-    "@angular-eslint/builder": "^19.0.2",
-    "@angular-eslint/eslint-plugin": "^19.0.2",
-    "@angular-eslint/eslint-plugin-template": "^19.0.2",
-    "@angular-eslint/schematics": "^19.0.2",
-    "@angular-eslint/template-parser": "^19.0.2",
     "@angular/animations": "^19.1.4",
     "@angular/build": "^19.1.5",
     "@angular/cdk": "^19.1.2",
@@ -61,41 +56,35 @@
     "@peertube/xliffmerge": "^2.0.3",
     "@plussub/srt-vtt-parser": "^2.0.5",
     "@popperjs/core": "^2.11.5",
-    "@types/chart.js": "^2.9.37",
+    "@primeng/themes": "^19.1.2",
     "@types/core-js": "^2.5.2",
     "@types/debug": "^4.1.5",
     "@types/jschannel": "^1.0.0",
     "@types/linkifyjs": "^2.1.2",
     "@types/lodash-es": "^4.17.0",
     "@types/markdown-it": "^14.1.1",
-    "@types/node": "^18.13.0",
+    "@types/node": "^20",
     "@types/qrcode": "^1.5.5",
     "@types/sanitize-html": "2.11.0",
     "@types/sha.js": "^2.4.0",
     "@types/video.js": "^7.3.40",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "@wdio/browserstack-service": "^8.10.5",
-    "@wdio/cli": "^8.10.5",
-    "@wdio/local-runner": "^8.10.5",
-    "@wdio/mocha-framework": "^8.10.4",
-    "@wdio/shared-store-service": "^8.10.5",
-    "@wdio/spec-reporter": "^8.10.5",
+    "@wdio/browserstack-service": "^9.12.7",
+    "@wdio/cli": "^9.12.7",
+    "@wdio/local-runner": "^9.12.7",
+    "@wdio/mocha-framework": "^9.12.6",
+    "@wdio/shared-store-service": "^9.12.7",
+    "@wdio/spec-reporter": "^9.12.6",
     "angularx-qrcode": "19.0.0",
     "bootstrap": "^5.1.3",
     "buffer": "^6.0.3",
     "chart.js": "^4.3.0",
-    "chartjs-plugin-zoom": "~2.0.1",
+    "chartjs-plugin-zoom": "~2.2.0",
     "color-bits": "^1.0.4",
     "core-js": "^3.22.8",
     "debug": "^4.3.1",
     "dompurify": "^3.1.6",
-    "eslint": "^8.28.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsdoc": "^48.1.0",
-    "eslint-plugin-prefer-arrow": "latest",
-    "expect-webdriverio": "^4.2.3",
-    "hls.js": "~1.5.11",
+    "expect-webdriverio": "^5.1.0",
+    "hls.js": "~1.6.7",
     "intl-messageformat": "^10.1.0",
     "jschannel": "^1.0.2",
     "linkify-html": "^4.0.2",
@@ -104,9 +93,9 @@
     "markdown-it": "14.1.0",
     "markdown-it-emoji": "^3.0.0",
     "ngx-uploadx": "^7.0.0",
-    "p2p-media-loader-core": "^2.1.2",
-    "p2p-media-loader-hlsjs": "^2.1.2",
-    "primeng": "^17",
+    "p2p-media-loader-core": "^2.2.1",
+    "p2p-media-loader-hlsjs": "^2.2.1",
+    "primeng": "^19.1.2",
     "rxjs": "^7.3.0",
     "sass-embedded": "^1.83.4",
     "sha.js": "^2.4.11",
@@ -119,11 +108,17 @@
     "tslib": "^2.4.0",
     "type-fest": "^4.37.0",
     "typescript": "~5.7.3",
+    "ua-parser-js": "^2.0.3",
     "video.js": "^7.19.2",
     "vite": "^6.0.11",
-    "vite-plugin-checker": "^0.8.0",
-    "vite-plugin-node-polyfills": "^0.23.0",
+    "vite-plugin-checker": "^0.9.3",
+    "vite-plugin-node-polyfills": "^0.24.0",
     "zone.js": "~0.15.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@stylistic/eslint-plugin": "^4.2.0",
+    "angular-eslint": "^19.3.0",
+    "eslint": "^9.26.0",
+    "eslint-config-love": "^119.0.0"
+  }
 }

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

@@ -11,19 +11,23 @@
     <span *ngFor="let category of categories" class="pt-badge badge-secondary me-1">{{ category }}</span>
   </div>
 
-  <div i18n *ngIf="config.instance.isNSFW" class="fw-bold text-content mt-3">{{ config.instance.name }} is dedicated to sensitive/NSFW content.</div>
+  <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">
-  <h4 i18n class="section-title">Terms</h4>
+@if (aboutHTML.terms) {
+  <div class="block terms">
+    <h4 i18n class="section-title">Terms</h4>
 
-  <div class="text-content" [innerHTML]="aboutHTML.terms"></div>
-</div>
+    <div class="text-content" [innerHTML]="aboutHTML.terms"></div>
+  </div>
+}
 
 <my-support-modal #supportModal [name]="config.instance.name" [content]="config.instance.support.text"></my-support-modal>

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-video-channels/account-video-channels.component.ts

@@ -59,10 +59,7 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
     views: true,
     by: false,
     avatar: false,
-    privacyLabel: false,
-    privacyText: false,
-    state: false,
-    blacklistInfo: false
+    privacyLabel: false
   }
 
   private accountSub: Subscription
@@ -110,7 +107,7 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
             nsfw: this.videoService.nsfwPolicyToParam(this.nsfwPolicy)
           }
 
-          return this.videoService.getVideoChannelVideos(options)
+          return this.videoService.listChannelVideos(options)
             .pipe(map(data => ({ videoChannel, videos: data.data, total: data.total })))
         })
       )

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

@@ -11,7 +11,6 @@
   [defaultSort]="defaultSort"
 
   displayFilters="true"
-  displayModerationBlock="true"
   [displayAsRow]="displayAsRow()"
 
   hideScopeFilter="true"

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

@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common'
-import { Component, OnDestroy, OnInit, inject, viewChild } from '@angular/core'
+import { Component, inject, OnDestroy, OnInit, viewChild } from '@angular/core'
 import { ComponentPaginationLight, DisableForReuseHook, ScreenService } from '@app/core'
 import { Account } from '@app/shared/shared-main/account/account.model'
 import { AccountService } from '@app/shared/shared-main/account/account.service'
@@ -37,6 +37,8 @@ export class AccountVideosComponent implements OnInit, OnDestroy, DisableForReus
     // Parent get the account for us
     this.accountSub = this.accountService.accountLoaded
       .subscribe(account => {
+        if (account.id === this.account?.id) return
+
         this.account = account
         if (this.alreadyLoaded) this.videosList().reloadVideos()
 
@@ -49,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.getAccountVideos(options)
+      skipCount: true,
+      includeScheduledLive: true
+    })
   }
 
   getSyndicationItems () {

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

@@ -73,6 +73,7 @@
 
     <my-simple-search-input
       class="ms-auto"
+      [initialValue]="search"
       [alwaysShow]="!isInSmallView()" (searchChanged)="searchChanged($event)"
       (inputDisplayChanged)="onSearchInputDisplayChanged($event)" name="search-videos"
       i18n-iconTitle icon-title="Search account videos"

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

@@ -1,7 +1,17 @@
-import { NgClass, NgIf } from '@angular/common'
+import { CommonModule } from '@angular/common'
 import { Component, OnDestroy, OnInit, inject, viewChild } from '@angular/core'
-import { ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'
-import { AuthService, MarkdownService, MetaService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
+import { ActivatedRoute, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'
+import {
+  AuthService,
+  MarkdownService,
+  MetaService,
+  Notifier,
+  PeerTubeRouterService,
+  RedirectService,
+  RestExtractor,
+  ScreenService,
+  UserService
+} from '@app/core'
 import { Account } from '@app/shared/shared-main/account/account.model'
 import { AccountService } from '@app/shared/shared-main/account/account.service'
 import { DropdownAction } from '@app/shared/shared-main/buttons/action-dropdown.component'
@@ -26,13 +36,12 @@ import { SubscribeButtonComponent } from '../shared/shared-user-subscription/sub
   templateUrl: './accounts.component.html',
   styleUrls: [ './accounts.component.scss' ],
   imports: [
-    NgIf,
+    CommonModule,
     ActorAvatarComponent,
     UserModerationDropdownComponent,
     NgbTooltip,
     AccountBlockBadgesComponent,
     CopyButtonComponent,
-    NgClass,
     RouterLink,
     SubscribeButtonComponent,
     RouterLinkActive,
@@ -45,7 +54,6 @@ import { SubscribeButtonComponent } from '../shared/shared-user-subscription/sub
 })
 export class AccountsComponent implements OnInit, OnDestroy {
   private route = inject(ActivatedRoute)
-  private router = inject(Router)
   private userService = inject(UserService)
   private accountService = inject(AccountService)
   private videoChannelService = inject(VideoChannelService)
@@ -58,12 +66,15 @@ export class AccountsComponent implements OnInit, OnDestroy {
   private blocklist = inject(BlocklistService)
   private screenService = inject(ScreenService)
   private metaService = inject(MetaService)
+  private peertubeRouter = inject(PeerTubeRouterService)
 
   readonly accountReportModal = viewChild<AccountReportComponent>('accountReportModal')
 
   account: Account
   accountUser: User
 
+  search = ''
+
   videoChannels: VideoChannel[] = []
 
   links: HorizontalMenuEntry[] = []
@@ -104,6 +115,8 @@ export class AccountsComponent implements OnInit, OnDestroy {
       { label: $localize`Channels`, routerLink: 'video-channels' },
       { label: $localize`Videos`, routerLink: 'videos' }
     ]
+
+    this.search = this.route.snapshot.queryParams['search'] || ''
   }
 
   ngOnDestroy () {
@@ -148,7 +161,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
   searchChanged (search: string) {
     const queryParams = { search }
 
-    this.router.navigate([ './videos' ], { queryParams, relativeTo: this.route, queryParamsHandling: 'merge' })
+    this.peertubeRouter.silentNavigate([ './videos' ], queryParams, this.route)
   }
 
   onSearchInputDisplayChanged (displayed: boolean) {
@@ -225,7 +238,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
   }
 
   private loadAccountVideosCount () {
-    this.videoService.getAccountVideos({
+    this.videoService.listAccountVideos({
       account: this.account,
       videoPagination: {
         currentPage: 1,

client/src/app/+accounts/routes.ts

@@ -13,7 +13,7 @@ import { AccountsComponent } from './accounts.component'
 export default [
   {
     path: 'peertube',
-    redirectTo: '/videos/local'
+    redirectTo: '/videos/browse?scope=local'
   },
   {
     path: ':accountId',

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,139 +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-template ptTemplate="customHtml">
-                <ng-container i18n>
-                  <p class="mb-2">Write JavaScript code directly. Example:</p>
-                  <pre>console.log('my instance is amazing');</pre>
-                </ng-container>
-              </ng-template>
-            </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-template ptTemplate="customHtml">
-                <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>
-              </ng-template>
-            </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,20 +0,0 @@
-import { Component, input } from '@angular/core'
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { PeerTubeTemplateDirective } from '../../../shared/shared-main/common/peertube-template.directive'
-import { HelpComponent } from '../../../shared/shared-main/buttons/help.component'
-import { NgClass, NgIf } from '@angular/common'
-
-@Component({
-  selector: 'my-edit-advanced-configuration',
-  templateUrl: './edit-advanced-configuration.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ],
-  imports: [ FormsModule, ReactiveFormsModule, NgClass, NgIf, HelpComponent, PeerTubeTemplateDirective ]
-})
-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.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) {
-          /* eslint-disable max-len */
-          this.signupAlertMessage =
-            $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,138 +0,0 @@
-import { NgClass, NgIf } 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 { 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 { PeerTubeTemplateDirective } from '../../../shared/shared-main/common/peertube-template.directive'
-import { HelpComponent } from '../../../shared/shared-main/buttons/help.component'
-
-@Component({
-  selector: 'my-edit-instance-information',
-  templateUrl: './edit-instance-information.component.html',
-  styleUrls: [ './edit-custom-config.component.scss' ],
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    ActorAvatarEditComponent,
-    ActorBannerEditComponent,
-    NgClass,
-    NgIf,
-    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[] = []
-
-  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,160 +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)
-
-          // eslint-disable-next-line max-len
-          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,80 @@
+@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-checkbox,
+my-select-options,
+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,210 @@
+<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">
+      <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>
+
+      <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>
+    </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,385 @@
+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 } 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'
+
+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>
+    }>
+  }>
+}
+
+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
+  ]
+})
+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[]
+
+  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.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
+        }
+      }
+    }
+
+    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

@@ -1,23 +1,13 @@
-<ng-container [formGroup]="form()">
-  <div class="pt-two-cols mt-5"> <!-- appearance grid -->
-    <div class="title-col">
-      <h2 i18n>APPEARANCE</h2>
+<my-admin-save-bar i18n-title title="General configuration" (save)="save()" [form]="form" [formErrors]="formErrors"></my-admin-save-bar>
 
-      <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>
+<form [formGroup]="form">
+  <div class="pt-two-cols">
+    <div class="title-col">
+      <h2 i18n>BEHAVIOR</h2>
     </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>
 
@@ -30,7 +20,7 @@
           [clearable]="false"
         ></my-select-custom-value>
 
-        <div *ngIf="formErrors().instance.defaultClientRoute" class="form-error" role="alert">{{ formErrors().instance.defaultClientRoute }}</div>
+        <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error" role="alert">{{ formErrors.instance.defaultClientRoute }}</div>
       </div>
 
       <div class="form-group" formGroupName="trending">
@@ -47,24 +37,13 @@
               </select>
             </div>
 
-            <div *ngIf="formErrors().trending.videos.algorithms.default" class="form-error" role="alert">{{ formErrors().trending.videos.algorithms.default }}</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">
@@ -73,8 +52,11 @@
                 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>
+                  @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>
@@ -85,11 +67,11 @@
     </div>
   </div>
 
-  <div class="pt-two-cols mt-4"> <!-- broadcast grid -->
+  <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 instance
+        Display a message on your platform
       </div>
     </div>
 
@@ -122,7 +104,7 @@
             </select>
           </div>
 
-          <div *ngIf="formErrors().broadcastMessage.level" class="form-error" role="alert">{{ formErrors().broadcastMessage.level }}</div>
+          <div *ngIf="formErrors.broadcastMessage.level" class="form-error" role="alert">{{ formErrors.broadcastMessage.level }}</div>
         </div>
 
         <div class="form-group">
@@ -130,10 +112,10 @@
 
           <my-markdown-textarea
             inputId="broadcastMessageMessage" formControlName="message"
-            [formError]="formErrors()['broadcastMessage.message']" markdownType="to-unsafe-html"
+            [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 *ngIf="formErrors.broadcastMessage.message" class="form-error" role="alert">{{ formErrors.broadcastMessage.message }}</div>
         </div>
 
       </ng-container>
@@ -144,9 +126,6 @@
   <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">
@@ -158,9 +137,9 @@
             i18n-labelText labelText="Enable Signup"
           >
             <ng-container ngProjectAs="description">
-              <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
+              <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>
+              <my-alert type="primary" class="d-block mt-2" *ngIf="signupAlertMessage">{{ signupAlertMessage }}</my-alert>
             </ng-container>
 
             <ng-container ngProjectAs="extra">
@@ -180,19 +159,19 @@
 
               <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>
+                <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'] }"
+                    formControlName="limit" [ngClass]="{ 'input-error': formErrors.signup.limit }"
                   >
-                  <span i18n>{form().value['signup']['limit'], plural, =1 {user} other {users}}</span>
+                  <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>
+                <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>
+                <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">
@@ -201,12 +180,12 @@
                 <div class="number-with-unit">
                   <input
                     type="number" min="1" id="signupMinimumAge" class="form-control"
-                    formControlName="minimumAge" [ngClass]="{ 'input-error': formErrors()['signup.minimumAge'] }"
+                    formControlName="minimumAge" [ngClass]="{ 'input-error': formErrors.signup.minimumAge }"
                   >
-                  <span i18n>{form().value['signup']['minimumAge'], plural, =1 {year old} other {years old}}</span>
+                  <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 *ngIf="formErrors.signup.minimumAge" class="form-error" role="alert">{{ formErrors.signup.minimumAge }}</div>
               </div>
             </ng-container>
           </my-peertube-checkbox>
@@ -215,7 +194,7 @@
 
       <ng-container formGroupName="user">
         <div class="form-group">
-          <label i18n id="userVideoQuotaLabel" for="userVideoQuota">Default video quota per user</label>
+          <label i18n id="userVideoQuotaLabel" for="userVideoQuota">Default video quota for a new user</label>
 
           <my-select-custom-value
             labelId="userVideoQuotaLabel"
@@ -228,11 +207,11 @@
 
           <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 *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>
+          <label i18n id="userVideoQuotaDaily" for="userVideoQuotaDaily">Default daily upload limit for a new user</label>
 
           <my-select-custom-value
             labelId="userVideoQuotaDailyLabel"
@@ -243,14 +222,14 @@
             [clearable]="false"
           ></my-select-custom-value>
 
-          <div *ngIf="formErrors().user.videoQuotaDaily" class="form-error" role="alert">{{ formErrors().user.videoQuotaDaily }}</div>
+          <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"
+                i18n-labelText labelText="Automatically enable video history for a new user"
               >
               </my-peertube-checkbox>
             </ng-container>
@@ -261,9 +240,9 @@
     </div>
   </div>
 
-  <div class="pt-two-cols mt-4"> <!-- videos grid -->
+  <div class="pt-two-cols mt-4">
     <div class="title-col">
-      <h2 i18n>VIDEOS</h2>
+      <h2 i18n>VIDEO IMPORTS</h2>
     </div>
 
     <div class="content-col">
@@ -274,14 +253,14 @@
 
           <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>
+            <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 *ngIf="formErrors.import.videos.concurrency" class="form-error" role="alert">{{ formErrors.import.videos.concurrency }}</div>
           </div>
 
           <div class="form-group" formGroupName="http">
@@ -328,16 +307,25 @@
             <div class="number-with-unit">
               <input
                 type="number" min="1" id="videoChannelSynchronizationMaxPerUser" class="form-control"
-                formControlName="maxPerUser" [ngClass]="{ 'input-error': formErrors()['import']['videoChannelSynchronization']['maxPerUser'] }"
+                formControlName="maxPerUser" [ngClass]="{ 'input-error': formErrors['import']['videoChannelSynchronization']['maxPerUser'] }"
               >
-              <span i18n>{form().value['import']['videoChannelSynchronization']['maxPerUser'], plural, =1 {sync} other {syncs}}</span>
+              <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 *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>VIDEOS</h2>
+    </div>
+
+    <div class="content-col">
 
       <ng-container formGroupName="autoBlacklist">
         <ng-container formGroupName="videos">
@@ -411,10 +399,39 @@
           </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"> <!-- video channels grid -->
+  <div class="pt-two-cols mt-4">
     <div class="title-col">
       <h2 i18n>VIDEO CHANNELS</h2>
     </div>
@@ -426,17 +443,161 @@
         <div class="number-with-unit">
           <input
             type="number" min="1" id="videoChannelsMaxPerUser" class="form-control"
-            formControlName="maxPerUser" [ngClass]="{ 'input-error': formErrors()['videoChannels.maxPerUser'] }"
+            formControlName="maxPerUser" [ngClass]="{ 'input-error': formErrors.videoChannels.maxPerUser }"
           >
-          <span i18n>{form().value['videoChannels']['maxPerUser'], plural, =1 {channel} other {channels}}</span>
+          <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 *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="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">
+
+        <div class="form-group" formGroupName="player">
+          <my-peertube-checkbox
+            inputName="defaultsPlayerAutoplay" formControlName="autoPlay"
+            i18n-labelText labelText="Automatically play videos in the player"
+          ></my-peertube-checkbox>
+        </div>
+
+        <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>
@@ -452,7 +613,7 @@
               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>
+                <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>
@@ -463,7 +624,7 @@
               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>
+                <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>
@@ -477,23 +638,23 @@
               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>
+                <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="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 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'] }"
+                    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 *ngIf="formErrors.search.searchIndex.url" class="form-error" role="alert">{{ formErrors.search.searchIndex.url }}</div>
                 </div>
 
                 <div class="mt-3">
@@ -509,7 +670,7 @@
                     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>
+                      <span i18n>Otherwise, the local search will be used by default</span>
                     </ng-container>
                   </my-peertube-checkbox>
                 </div>
@@ -525,7 +686,7 @@
     </div>
   </div>
 
-  <div class="pt-two-cols mt-4"> <!-- import/export grid -->
+  <div class="pt-two-cols mt-4">
     <div class="title-col">
       <h2 i18n>USER IMPORT/EXPORT</h2>
     </div>
@@ -577,7 +738,7 @@
                     [clearable]="false"
                   ></my-select-custom-value>
 
-                  <div *ngIf="formErrors().export.users.maxUserVideoQuota" class="form-error" role="alert">{{ formErrors().export.users.maxUserVideoQuota }}</div>
+                  <div *ngIf="formErrors.export.users.maxUserVideoQuota" class="form-error" role="alert">{{ formErrors.export.users.maxUserVideoQuota }}</div>
                 </div>
 
                 <div class="form-group" [ngClass]="getDisabledExportUsersClass()">
@@ -585,9 +746,9 @@
 
                   <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 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 *ngIf="formErrors.export.users.exportExpiration" class="form-error" role="alert">{{ formErrors.export.users.exportExpiration }}</div>
                 </div>
 
               </ng-container>
@@ -599,147 +760,4 @@
     </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>
+</form>

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

@@ -0,0 +1,599 @@
+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 { 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<{
+    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>
+  }>
+
+  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
+  ]
+})
+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: {
+        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
+      },
+      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() }
+  }
+
+  // ---------------------------------------------------------------------------
+
+  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>
+
+<form [formGroup]="form">
+
+  <div class="pt-two-cols mt-4">
+    <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>
 
   <ng-container formGroupName="instance">
 
-    <div class="pt-two-cols mt-5"> <!-- instance grid -->
+    <div class="pt-two-cols">
       <div class="title-col">
-        <h2 i18n>INSTANCE</h2>
+        <h2 i18n>PLATFORM</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>
-
-          <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>
-
-        <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>
-
-          <my-actor-banner-edit
-            [previewImage]="false" class="d-block mb-4"
-            [bannerUrl]="instanceBannerUrl" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
-          ></my-actor-banner-edit>
-        </div>
-
         <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,10 @@
 
             <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">
@@ -163,10 +177,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,9 +188,9 @@
 
     </div>
 
-    <div class="pt-two-cols mt-4"> <!-- moderation & nsfw grid -->
+    <div class="pt-two-cols mt-4">
       <div class="title-col">
-        <h2 i18n>MODERATION & NSFW</h2>
+        <h2 i18n>MODERATION & SENSITIVE CONTENT</h2>
         <div i18n class="inner-form-description">
           Manage <a class="link-primary" routerLink="/admin/overview/users">users</a> to build a moderation team.
         </div>
@@ -186,38 +200,26 @@
         <div class="form-group">
           <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
             <ng-template ptTemplate="label">
-              <ng-container i18n>This instance is dedicated to sensitive or NSFW content</ng-container>
+              <ng-container i18n>This instance is dedicated to sensitive content</ng-container>
             </ng-template>
 
             <ng-template ptTemplate="help">
               <ng-container i18n>
                 Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br />
-                Moreover, the NSFW checkbox on video upload will be automatically checked by default.
+                Moreover, the "sensitive content" checkbox on video upload will be automatically checked by default.
               </ng-container>
             </ng-template>
           </my-peertube-checkbox>
         </div>
 
         <div class="form-group">
-          <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
+          <my-select-radio
+            [items]="nsfwItems" inputId="instanceDefaultNSFWPolicy" isGroup="true"
+            i18n-label label="Policy on videos containing sensitive content"
+            formControlName="defaultNSFWPolicy"
+          ></my-select-radio>
 
-          <my-help>
-            <ng-template ptTemplate="customHtml">
-              <ng-container i18n>
-                With <strong>Hide</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
-              </ng-container>
-            </ng-template>
-          </my-help>
-
-          <div class="peertube-select-container">
-            <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
-              <option i18n value="do_not_list">Hide</option>
-              <option i18n value="blur">Blur thumbnails</option>
-              <option i18n value="display">Display</option>
-            </select>
-          </div>
-
-          <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">
@@ -225,7 +227,7 @@
 
           <my-markdown-textarea
             inputId="instanceTerms" formControlName="terms" markdownType="enhanced"
-            [formError]="formErrors()['instance.terms']"
+            [formError]="formErrors.instance.terms"
           ></my-markdown-textarea>
         </div>
 
@@ -234,74 +236,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 NSFW videos? 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>
@@ -310,11 +312,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>
 
@@ -323,4 +325,4 @@
 
   </ng-container>
 
-</ng-container>
+</form>

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

@@ -0,0 +1,249 @@
+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>
+    }>
+
+    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
+        }
+      }
+    }
+
+    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">
@@ -132,7 +134,7 @@
                 <div class="mt-3">
 
                   <ng-container formGroupName="resolutions">
-                    <div class="form-group" *ngFor="let resolution of liveResolutions">
+                    <div class="form-group mb-2" *ngFor="let resolution of liveResolutions">
                       <my-peertube-checkbox
                         [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
                         labelText="{{resolution.label}}"
@@ -193,7 +195,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 +204,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 +212,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>