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/.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",
@@ -241,7 +244,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb",
-                  "maximumError": "100kb"
+                  "maximumError": "120kb"
                 }
               ],
               "fileReplacements": [

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.1",
+    "p2p-media-loader-hlsjs": "^2.1.1",
     "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,

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,6 @@
+export * from './peertube-player'
+export * from './peertube-player-local-storage'
+export * from '../../../root-helpers/translations-manager'
+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);
     }

client/src/sass/player/playlist.scss → client/src/standalone/player/src/sass/shared/playlist.scss

@@ -44,8 +44,8 @@ $playlist-menu-width: 350px;
     }
 
     .cross {
-      mask-image: url('#{$assets-path}/images/feather/x.svg');
-      -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
+      mask-image: url('./svg/x.svg');
+      -webkit-mask-image: url('./svg/x.svg');
       mask-size: cover;
       -webkit-mask-size: cover;
 
@@ -92,8 +92,8 @@ $playlist-menu-width: 350px;
 }
 
 .vjs-playlist-icon {
-  mask-image: url('#{$assets-path}/images/feather/playlists.svg');
-  -webkit-mask-image: url('#{$assets-path}/images/feather/playlists.svg');
+  mask-image: url('./svg/playlists.svg');
+  -webkit-mask-image: url('./svg/playlists.svg');
   mask-size: cover;
   -webkit-mask-size: cover;
 

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

@@ -145,7 +145,7 @@ $setting-transition-easing: ease-out;
               position: absolute;
               content: ' ';
               margin-top: 1px;
-              background-image: url('#{$assets-path}/player/images/tick-white.svg');
+              background-image: url('./svg/tick-white.svg');
 
               @include icon(15px);
               @include left(15px);