.github/workflows/docker.yml

@@ -28,7 +28,7 @@ jobs:
           git fetch --force --tags
 
           one="{ \"build-peertube\": true, \"file\": \"./support/docker/production/Dockerfile\", \"ref\": \"develop\", \"tags\": \"chocobozzz/peertube:develop-trixie,chocobozzz/peertube:develop\" }"
-          two="{ \"build-peertube\": true, \"file\": \"./support/docker/production/Dockerfile.bookworm\", \"ref\": \"master\", \"tags\": \"chocobozzz/peertube:production-bookworm,chocobozzz/peertube:$(git describe --abbrev=0)-bookworm\" }"
+          two="{ \"build-peertube\": true, \"file\": \"./support/docker/production/Dockerfile\", \"ref\": \"master\", \"tags\": \"chocobozzz/peertube:production-bookworm,chocobozzz/peertube:$(git describe --abbrev=0)-bookworm\" }"
           three="{ \"build-peertube\": false, \"file\": \"./support/docker/production/Dockerfile.nginx\", \"ref\": \"master\", \"tags\": \"chocobozzz/peertube-webserver:latest\" }"
 
           matrix="[$one,$two,$three]"

client/src/app/+admin/moderation/registration-list/process-registration-modal.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common'
+import { CommonModule, NgClass } from '@angular/common'
 import { Component, OnInit, inject, output, viewChild } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Notifier, ServerService } from '@app/core'

client/src/app/shared/shared-main/video/video.service.ts

@@ -563,7 +563,7 @@ export class VideoService {
       [VideoLicence['CC-BY-NC-ND']]: $localize`CC-BY-NC-ND`,
       [VideoLicence['CC0']]: '',
       [VideoLicence.PDM]: $localize`Public domain mark`,
-      [VideoLicence['COPYRIGHT']]: $localize`You are the owner of the content or you have the rights of the copyright holders`
+      [VideoLicence['COPYRIGHT']]: 'You are the owner of the content or you have the rights of the copyright holders'
     }
 
     return serverLicences.map(p => {

client/src/sass/include/_css-variables.scss

@@ -69,8 +69,8 @@
   --alert-primary-bg: #{pvar(--primary-200)};
   --alert-primary-border-color: #{pvar(--primary-300)};
 
-  --pt-player-fg: #fff;
-  --pt-player-big-play-bg: rgba(0, 0, 0, 0.8);
+  --embed-fg: #fff;
+  --embed-big-play-bg: rgba(0, 0, 0, 0.8);
 
   --menu-fg: #{pvar(--fg-400)};
   --menu-bg: #{pvar(--bg-secondary-400)};
@@ -78,8 +78,8 @@
   --header-fg: #{pvar(--fg)};
   --header-bg: #{pvar(--bg)};
 
-  --pt-player-overlay-secondary-fg: #{pvar(--fg-400)};
-  --pt-player-overlay-secondary-bg: #{pvar(--bg-secondary-400)};
+  --player-overlay-fg: #{pvar(--fg-400)};
+  --player-overlay-bg: #{pvar(--bg-secondary-400)};
 
   // ---------------------------------------------------------------------------
 

client/src/sass/include/_variables.scss

@@ -203,10 +203,10 @@ $variables: (
   --alert-primary-fg: var(--alert-primary-fg),
   --alert-primary-bg: var(--alert-primary-bg),
   --alert-primary-border-color: var(--alert-primary-border-color),
-  --pt-player-fg: var(--pt-player-fg),
-  --pt-player-big-play-bg: var(--pt-player-big-play-bg),
-  --pt-player-overlay-secondary-fg: var(--pt-player-overlay-secondary-fg),
-  --pt-player-overlay-secondary-bg: var(--pt-player-overlay-secondary-bg)
+  --embed-fg: var(--embed-fg),
+  --embed-big-play-bg: var(--embed-big-play-bg),
+  --player-overlay-fg: var(--player-overlay-fg),
+  --player-overlay-bg: var(--player-overlay-bg)
 );
 
 // SASS type check our CSS variables

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

@@ -1,7 +1,9 @@
 @use "sass:color";
 
-$fg-opacity: 0.9;
-$fg-opacity-hover: 1;
+$primary-foreground-color: #fff;
+$primary-foreground-opacity: 0.9;
+$primary-foreground-opacity-hover: 1;
+$primary-background-color: rgba(0, 0, 0, 0.8);
 
 $font-size: 13px;
 

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

@@ -6,15 +6,15 @@ $context-menu-width: 350px;
 
 .video-js .vjs-contextmenu-ui-menu {
   position: absolute;
-  background-color: var(--pt-player-overlay-bg);
+  background-color: var(--embed-background-color);
   padding: 8px 0;
   border-radius: 4px;
   width: $context-menu-width;
   z-index: 105; // On top of the progress bar
 
   .vjs-menu-content {
-    opacity: $fg-opacity;
-    color: pvar(--pt-player-fg);
+    opacity: $primary-foreground-opacity;
+    color: pvar(--embed-fg);
     font-size: $font-size !important;
     font-weight: $font-semibold;
   }
@@ -27,7 +27,7 @@ $context-menu-width: 350px;
     justify-content: flex-start;
 
     &:hover {
-      background-color: var(--pt-player-overlay-bg-hover);
+      background-color: rgba(255, 255, 255, 0.2);
     }
 
     [class^="vjs-icon-"] {

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

@@ -83,15 +83,15 @@ $chapter-marker-size: 9px;
   .vjs-theater-control,
   .vjs-caption-toggle-control,
   .vjs-settings {
-    color: pvar(--pt-player-fg);
+    color: pvar(--embed-fg);
 
     transition: opacity 0.1s;
 
     &:not(.vjs-disabled) {
-      opacity: $fg-opacity;
+      opacity: $primary-foreground-opacity;
 
       &:hover {
-        opacity: $fg-opacity-hover;
+        opacity: $primary-foreground-opacity-hover;
       }
     }
   }
@@ -142,7 +142,7 @@ $chapter-marker-size: 9px;
   .vjs-volume-vertical {
     // On top of the progress bar
     z-index: 120;
-    background-color: var(--pt-player-overlay-bg);
+    background-color: var(--embed-background-color);
     border-radius: 10px;
     bottom: 6.75em;
     height: 7em;
@@ -153,8 +153,8 @@ $chapter-marker-size: 9px;
   .vjs-current-time,
   .vjs-duration,
   .vjs-peertube {
-    color: pvar(--pt-player-fg);
-    opacity: $fg-opacity;
+    color: pvar(--embed-fg);
+    opacity: $primary-foreground-opacity;
   }
 
   .vjs-time-control {
@@ -195,7 +195,7 @@ $chapter-marker-size: 9px;
 
   .vjs-pt-live-control {
     width: auto;
-    opacity: $fg-opacity; // videojs adds a .vjs-disabled when the live is synced
+    opacity: $primary-foreground-opacity; // videojs adds a .vjs-disabled when the live is synced
     font-size: var(--control-bar-font-size);
 
     @include margin-right(auto);
@@ -204,7 +204,7 @@ $chapter-marker-size: 9px;
       cursor: pointer;
 
       &:hover {
-        opacity: $fg-opacity-hover;
+        opacity: $primary-foreground-opacity-hover;
       }
     }
 
@@ -275,7 +275,7 @@ $chapter-marker-size: 9px;
     background-color: rgba(255, 255, 255, 0.2);
 
     .vjs-play-progress {
-      background: pvar(--pt-player-fg);
+      background: pvar(--embed-fg);
 
       // Not display the circle if the progress is not hovered
       &::before {
@@ -480,7 +480,7 @@ $chapter-marker-size: 9px;
 
     &.enabled,
     &.enabled:hover {
-      opacity: $fg-opacity !important;
+      opacity: $primary-foreground-opacity !important;
     }
 
     &:focus {

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

@@ -22,8 +22,8 @@
   .nsfw-details {
     width: 100%;
     width: fit-content;
-    background-color: pvar(--pt-player-overlay-secondary-bg);
-    color: pvar(--pt-player-overlay-secondary-fg);
+    background-color: pvar(--player-overlay-bg);
+    color: pvar(--player-overlay-fg);
     max-width: calc(40% - 2 * var(--nsfw-info-margin-x));
     padding: 1rem;
   }
@@ -109,7 +109,7 @@
       -webkit-mask-size: cover;
       width: 20px;
       height: 20px;
-      background-color: pvar(--pt-player-overlay-secondary-fg);
+      background-color: pvar(--player-overlay-fg);
       display: block;
 
       @include margin-left(auto);

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

@@ -5,10 +5,10 @@
 @use "./_player-mixins" as *;
 
 body {
-  --pt-player-overlay-bg: rgba(0, 0, 0, 0.6);
-  --pt-player-overlay-bg-hover: rgba(255, 255, 255, 0.15);
+  --embed-foreground-color: #{$primary-foreground-color};
+  --embed-background-color: #{$primary-background-color};
 
-  --pt-player-big-play-background-color: rgba(0, 0, 0, 0.8);
+  --embed-big-play-background-color: #{$primary-background-color};
 
   // Prevent z-index bug with Firefox PiP button
   // See:
@@ -16,7 +16,7 @@ body {
   // * https://bugzilla.mozilla.org/show_bug.cgi?id=1742585
   // * https://bugzilla.mozilla.org/show_bug.cgi?id=1754604
   @supports (-moz-orient: block) {
-    --pt-player-overlay-bg: #000;
+    --embed-background-color: #000;
   }
 }
 
@@ -27,7 +27,7 @@ body {
 
 .video-js.vjs-peertube-skin {
   font-size: $font-size;
-  color: pvar(--pt-player-fg);
+  color: pvar(--embed-fg);
 
   &.disabled {
     cursor: default;
@@ -53,7 +53,7 @@ body {
     height: calc(var(--big-play-button-size));
     margin-top: calc(var(--big-play-button-size) / 2 * -1);
     line-height: 1;
-    background-color: pvar(--pt-player-big-play-bg);
+    background-color: pvar(--embed-big-play-bg);
     border-radius: 100%;
     transition: 0.2s background-color;
 
@@ -85,7 +85,7 @@ body {
     }
 
     .vjs-control-bar {
-      opacity: $fg-opacity-hover;
+      opacity: $primary-foreground-opacity-hover;
     }
   }
 

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

@@ -10,6 +10,7 @@ $setting-transition-easing: ease-out;
 
 .video-js {
   .vjs-settings-sub-menu-title {
+    width: 4em;
     text-transform: initial;
   }
 
@@ -17,12 +18,12 @@ $setting-transition-easing: ease-out;
     position: absolute;
     right: 0.5em;
     bottom: 4em;
-    color: pvar(--pt-player-fg);
+    color: pvar(--embed-fg);
     margin: 0 auto;
     font-size: $font-size !important;
     z-index: 100;
     border-radius: 10px;
-    background-color: var(--pt-player-overlay-bg);
+    background-color: var(--embed-background-color);
 
     width: auto;
     overflow: hidden;
@@ -88,7 +89,7 @@ $setting-transition-easing: ease-out;
 
           &:hover {
             cursor: pointer;
-            background-color: var(--pt-player-overlay-bg-hover);
+            background-color: rgba(255, 255, 255, 0.2);
           }
 
           &.disabled {

client/src/standalone/videos/embed.ts

@@ -361,11 +361,11 @@ export class PeerTubeEmbed {
     const body = document.getElementById('custom-css')
 
     if (this.playerOptionsBuilder.hasBigPlayBackgroundColor()) {
-      body.style.setProperty('--pt-player-big-play-background-color', this.playerOptionsBuilder.getBigPlayBackgroundColor())
+      body.style.setProperty('--embed-big-play-background-color', this.playerOptionsBuilder.getBigPlayBackgroundColor())
     }
 
     if (this.playerOptionsBuilder.hasForegroundColor()) {
-      body.style.setProperty('--pt-player-fg', this.playerOptionsBuilder.getForegroundColor())
+      body.style.setProperty('--embed-foreground-color', this.playerOptionsBuilder.getForegroundColor())
     }
   }