Separate player in dedicated build

 * Separate player in a dedicated build, that we can control using vite.
   We had too many issues with Angular build system and we can now
   have the same build between the embed and the client. We can also
   embed SVG directly in the CSS
 * Upgrade p2p-media-loader to v2
 * Update internal infohashes to reflect this p2p-media-loader protocol
   change (they are updated at PeerTube startup)
 * Minimum required iOS version is now v14

client/.browserslistrc

@@ -1,4 +1,4 @@
 last 1 Chrome version
 last 2 Edge major versions
 Firefox ESR
-ios_saf >= 13.1
+ios_saf >= 14

client/.eslintrc.json

@@ -163,7 +163,8 @@
         "@typescript-eslint/unbound-method": [
           "error",
           { "ignoreStatic": true }
-        ]
+        ],
+        "import/no-named-default": "off"
       }
     },
     {

client/.gitignore

@@ -12,6 +12,8 @@
 /e2e/local.log
 /e2e/browserstack.err
 /e2e/screenshots
+/src/standalone/player/build
+/src/standalone/player/dist
 /src/standalone/embed-player-api/build
 /src/standalone/embed-player-api/dist
 /e2e/logs

client/angular.json

@@ -183,7 +183,10 @@
               "includePaths": [
                 "src/sass/include",
                 "."
-              ]
+              ],
+              "sass": {
+                "silenceDeprecations": [ "import", "mixed-decls", "color-functions", "global-builtin" ]
+              }
             },
             "assets": [
               "src/assets/images",
@@ -212,7 +215,9 @@
               "is-plain-object",
               "parse-srcset",
               "deepmerge",
-              "core-js/features/reflect"
+              "core-js/features/reflect",
+              "hammerjs",
+              "jschannel"
             ],
             "scripts": [],
             "extractLicenses": false,
@@ -241,7 +246,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb",
-                  "maximumError": "100kb"
+                  "maximumError": "120kb"
                 }
               ],
               "fileReplacements": [

client/e2e/tsconfig.json

@@ -5,7 +5,7 @@
     "noImplicitAny": false,
     "esModuleInterop": true,
     "module": "commonjs",
-    "target": "ES2015",
+    "target": "ES2018",
     "typeRoots": [
       "../node_modules/@types",
       "../node_modules"

client/package.json

@@ -24,10 +24,13 @@
     "net": false,
     "stream": false,
     "os": false,
+    "http": false,
+    "dgram": false,
     "util": false
   },
   "workspaces": [
-    "../packages/*"
+    "../packages/*",
+    "./src/standalone/player"
   ],
   "typings": "*.d.ts",
   "devDependencies": {
@@ -55,8 +58,6 @@
     "@ngx-loading-bar/http-client": "^7.0.0",
     "@ngx-loading-bar/router": "^7.0.0",
     "@peertube/maildev": "^1.2.0",
-    "@peertube/p2p-media-loader-core": "^1.0.20",
-    "@peertube/p2p-media-loader-hlsjs": "^1.0.20",
     "@peertube/xliffmerge": "^2.0.3",
     "@plussub/srt-vtt-parser": "^2.0.5",
     "@popperjs/core": "^2.11.5",
@@ -103,8 +104,11 @@
     "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",
     "rxjs": "^7.3.0",
+    "sass-embedded": "^1.83.4",
     "sha.js": "^2.4.11",
     "socket.io-client": "^4.5.4",
     "stylelint": "^16.2.1",
@@ -115,9 +119,9 @@
     "tslib": "^2.4.0",
     "typescript": "~5.7.3",
     "video.js": "^7.19.2",
-    "vite": "^5.3.1",
-    "vite-plugin-checker": "^0.7.2",
-    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite": "^6.0.11",
+    "vite-plugin-checker": "^0.8.0",
+    "vite-plugin-node-polyfills": "^0.23.0",
     "zone.js": "~0.15.0"
   },
   "dependencies": {}

client/src/app/+videos/+video-watch/player-styles.component.scss

@@ -1,5 +1 @@
-@use 'node_modules/video.js/dist/video-js';
-
-$assets-path: '../../assets/';
-
-@use '../../../sass/player/index';
+@use '../../../standalone/player/build/peertube-player.css';

client/src/app/+videos/+video-watch/video-watch.component.ts

@@ -47,16 +47,18 @@ import { logger } from '@root-helpers/logger'
 import { isP2PEnabled, videoRequiresFileToken, videoRequiresUserAuth } from '@root-helpers/video'
 import debug from 'debug'
 import { forkJoin, map, Observable, of, Subscription, switchMap } from 'rxjs'
+import { environment } from '../../../environments/environment'
 import {
+  cleanupVideoWatch,
+  getStoredTheater,
+  getStoredVideoWatchHistory,
   HLSOptions,
   PeerTubePlayer,
   PeerTubePlayerConstructorOptions,
   PeerTubePlayerLoadOptions,
   PlayerMode,
   videojs
-} from '../../../assets/player'
-import { cleanupVideoWatch, getStoredTheater, getStoredVideoWatchHistory } from '../../../assets/player/peertube-player-local-storage'
-import { environment } from '../../../environments/environment'
+} from '@peertube/player'
 import { DateToggleComponent } from '../../shared/shared-main/date/date-toggle.component'
 import { PluginPlaceholderComponent } from '../../shared/shared-main/plugins/plugin-placeholder.component'
 import { VideoViewsCounterComponent } from '../../shared/shared-video/video-views-counter.component'

client/src/root-helpers/plugins-manager.ts

@@ -2,7 +2,7 @@
 import debug from 'debug'
 import { firstValueFrom, ReplaySubject } from 'rxjs'
 import { first, shareReplay } from 'rxjs/operators'
-import { RegisterClientHelpers } from 'src/types/register-client-option.model'
+import { RegisterClientHelpers } from '../types/register-client-option.model'
 import { getExternalAuthHref, getHookType, internalRunHook } from '@peertube/peertube-core-utils'
 import {
   ClientDoAction,
@@ -83,19 +83,22 @@ class PluginsManager {
   private readonly onFormFields: OnFormFields
   private readonly onSettingsScripts: OnSettingsScripts
   private readonly onClientRoute: OnClientRoute
+  private readonly backendUrl: string
 
   constructor (options: {
     doAction?: ClientDoAction
     peertubeHelpersFactory: PeertubeHelpersFactory
     onFormFields?: OnFormFields
     onSettingsScripts?: OnSettingsScripts
     onClientRoute?: OnClientRoute
+    backendUrl?: string
   }) {
     this.doAction = options.doAction
     this.peertubeHelpersFactory = options.peertubeHelpersFactory
     this.onFormFields = options.onFormFields
     this.onSettingsScripts = options.onSettingsScripts
     this.onClientRoute = options.onClientRoute
+    this.backendUrl = options.backendUrl
   }
 
   static getPluginPathPrefix (isTheme: boolean) {
@@ -281,7 +284,7 @@ class PluginsManager {
 
     logger.info(`Loading script ${clientScript.script} of plugin ${plugin.name}`)
 
-    const absURL = (environment.apiUrl || window.location.origin) + clientScript.script
+    const absURL = (this.backendUrl || environment.apiUrl || window.location.origin) + clientScript.script
     return dynamicImport(absURL)
       .then((script: ClientScript) => {
         return script.register({

client/src/standalone/build-tools/vite-utils.ts

@@ -0,0 +1,21 @@
+import { resolve } from 'path'
+
+export function getCSSConfig (root: string) {
+  return {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        loadPaths: [ resolve(root, './src/sass/include') ],
+        // FIXME: Wait for bootstrap upgrade that fixes deprecated sass utils
+        silenceDeprecations: [ 'import', 'mixed-decls', 'color-functions', 'global-builtin' ]
+      }
+    }
+  }
+}
+
+export function getAliasConfig (root: string) {
+  return [
+    { find: /^video.js$/, replacement: resolve(root, './node_modules/video.js/core.js') },
+    { find: '@root-helpers', replacement: resolve(root, './src/root-helpers') }
+  ]
+}

client/src/standalone/player/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@peertube/player",
+  "private": false,
+  "version": "0.0.0",
+  "scripts": {
+    "build": "rm -rf ./build && ../../../node_modules/.bin/vite build --mode production --config ./vite.config.mjs",
+    "dev": "../../../node_modules/.bin/vite build --mode dev --watch --config ./vite.config.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Chocobozzz/PeerTube.git"
+  },
+  "keywords": [
+    "peertube",
+    "embed"
+  ],
+  "main": "./build/peertube-player.js",
+  "exports": {
+    ".": "./build/peertube-player.js"
+  },
+  "types": "./src/index.ts",
+  "author": "Chocobozzz",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "sideEffects": true,
+  "bugs": {
+    "url": "https://github.com/Chocobozzz/PeerTube/issues"
+  },
+  "homepage": "https://github.com/Chocobozzz/PeerTube#readme",
+  "dependencies": {}
+}

client/src/standalone/player/src/index.ts

@@ -0,0 +1,5 @@
+export * from './peertube-player'
+export * from './peertube-player-local-storage'
+export * from './types'
+
+import './sass/player.scss'

client/src/assets/player/peertube-player.ts → client/src/standalone/player/src/peertube-player.ts

@@ -31,6 +31,8 @@ import './shared/metrics/metrics-plugin'
 import './shared/p2p-media-loader/hls-plugin'
 import './shared/p2p-media-loader/p2p-media-loader-plugin'
 import './shared/web-video/web-video-plugin'
+import './shared/dock/peertube-dock-component'
+import './shared/dock/peertube-dock-plugin'
 import videojs, { VideoJsPlayer } from 'video.js'
 import { logger } from '@root-helpers/logger'
 import { PluginsManager } from '@root-helpers/plugins-manager'
@@ -40,7 +42,7 @@ import { isMobile } from '@root-helpers/web-browser'
 import { buildVideoLink, decorateVideoLink, isDefaultLocale, pick } from '@peertube/peertube-core-utils'
 import { saveAverageBandwidth } from './peertube-player-local-storage'
 import { ControlBarOptionsBuilder, HLSOptionsBuilder, WebVideoOptionsBuilder } from './shared/player-options-builder'
-import { TranslationsManager } from './translations-manager'
+import { TranslationsManager } from '@root-helpers/translations-manager'
 import { PeerTubePlayerConstructorOptions, PeerTubePlayerLoadOptions, PlayerNetworkInfo, VideoJSPluginOptions } from './types'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)

client/src/standalone/player/src/sass/player.scss

@@ -0,0 +1,2 @@
+@use '../../../node_modules/video.js/dist/video-js';
+@use './shared/index.scss';

client/src/sass/player/_player-variables.scss → client/src/standalone/player/src/sass/shared/_player-variables.scss

@@ -22,5 +22,3 @@ $control-bar-total-height: $control-bar-height - $control-bar-slider-top;
 $progress-margin: 10px;
 
 $dock-padding: 20px;
-
-$assets-path: '../../assets/' !default;

client/src/sass/player/context-menu.scss → client/src/standalone/player/src/sass/shared/context-menu.scss

@@ -50,8 +50,8 @@ $context-menu-width: 350px;
 
       @each $icon in $icons {
         &[class$="-#{$icon}"] {
-          mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
-          -webkit-mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
+          mask-image: url('./svg/#{$icon}.svg');
+          -webkit-mask-image: url('./svg/#{$icon}.svg');
         }
       }
 

client/src/sass/player/control-bar.scss → client/src/standalone/player/src/sass/shared/control-bar.scss

@@ -270,11 +270,11 @@ $chapter-marker-size: 9px;
       @include margin-right(2px);
 
       &.icon-download {
-        background-image: url('#{$assets-path}/player/images/arrow-down.svg');
+        background-image: url('./svg/arrow-down.svg');
       }
 
       &.icon-upload {
-        background-image: url('#{$assets-path}/player/images/arrow-up.svg');
+        background-image: url('./svg/arrow-up.svg');
       }
     }
   }
@@ -291,8 +291,8 @@ $chapter-marker-size: 9px;
     .icon {
       &.icon-next,
       &.icon-previous {
-        mask-image: url('#{$assets-path}/player/images/next.svg');
-        -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
+        mask-image: url('./svg/next.svg');
+        -webkit-mask-image: url('./svg/next.svg');
         mask-size: cover;
         -webkit-mask-size: cover;
 
@@ -319,7 +319,7 @@ $chapter-marker-size: 9px;
       width: $control-bar-icon-size;
       height: $control-bar-icon-size;
       vertical-align: middle;
-      background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
+      background: url('./svg/volume.svg') no-repeat;
       background-size: contain;
 
       &::before {
@@ -328,7 +328,7 @@ $chapter-marker-size: 9px;
     }
 
     &.vjs-vol-0 .vjs-icon-placeholder {
-      background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
+      background: url('./svg/volume-mute.svg') no-repeat;
       background-size: contain;
     }
   }
@@ -415,7 +415,7 @@ $chapter-marker-size: 9px;
       height: $control-bar-icon-size - 4px;
       width: $control-bar-icon-size - 4px;
       vertical-align: middle;
-      background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
+      background: url('./svg/settings.svg') no-repeat;
       background-size: contain;
 
       &::before {
@@ -448,7 +448,7 @@ $chapter-marker-size: 9px;
       width: $control-bar-icon-size - 4px;
       height: $control-bar-icon-size - 4px;
       vertical-align: middle;
-      background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
+      background: url('./svg/theater.svg') no-repeat;
       background-size: contain;
 
       &::before {
@@ -493,7 +493,7 @@ $chapter-marker-size: 9px;
       width: $control-bar-icon-size;
       height: $control-bar-icon-size;
       vertical-align: middle;
-      background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
+      background: url('./svg/fullscreen.svg') no-repeat;
       background-size: contain;
 
       &::before {
@@ -515,14 +515,6 @@ $chapter-marker-size: 9px;
   .vjs-theater-control {
     display: none;
   }
-
-  .vjs-peertube {
-    .icon,
-    .download-speed-text,
-    .upload-speed-text {
-      display: none !important;
-    }
-  }
 }
 
 .video-js.vjs-peertube-skin.vjs-size-570 .vjs-control-bar {
@@ -540,6 +532,12 @@ $chapter-marker-size: 9px;
     .vjs-peertube-displayed {
       display: none !important;
     }
+
+    .icon,
+    .download-speed-text,
+    .upload-speed-text {
+      display: none !important;
+    }
   }
 
   .vjs-peertube-link {

client/src/sass/player/peertube-skin.scss → client/src/standalone/player/src/sass/shared/peertube-skin.scss

@@ -60,7 +60,7 @@ body {
 
     .vjs-icon-placeholder::before {
       content: '';
-      background-image: url('#{$assets-path}/player/images/big-play-button.svg');
+      background-image: url('./svg/big-play-button.svg');
 
       @include big-play-button-triangle-size(45px);
     }