diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index 33c50095d..1925a4f39 100644 --- a/.github/workflows/docker.yml +++ b/.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\", \"ref\": \"master\", \"tags\": \"chocobozzz/peertube:production-bookworm,chocobozzz/peertube:$(git describe --abbrev=0)-bookworm\" }" + two="{ \"build-peertube\": true, \"file\": \"./support/docker/production/Dockerfile.bookworm\", \"ref\": \"master\", \"tags\": \"chocobozzz/peertube:production-bookworm,chocobozzz/peertube:$(git describe --abbrev=0)-bookworm\" }" three="{ \"build-peertube\": false, \"file\": \"./support/docker/production/Dockerfile.nginx\", \"ref\": \"master\", \"tags\": \"chocobozzz/peertube-webserver:latest\" }" matrix="[$one,$two,$three]" diff --git a/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.ts b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.ts index f97c59bb2..5e90a0b51 100644 --- a/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.ts +++ b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.ts @@ -1,4 +1,4 @@ -import { CommonModule, NgClass } from '@angular/common' +import { CommonModule } from '@angular/common' import { Component, OnInit, inject, output, viewChild } from '@angular/core' import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { Notifier, ServerService } from '@app/core' diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts index 4cfa6e3a7..d4c72f6f8 100644 --- a/client/src/app/shared/shared-main/video/video.service.ts +++ b/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']]: 'You are the owner of the content or you have the rights of the copyright holders' + [VideoLicence['COPYRIGHT']]: $localize`You are the owner of the content or you have the rights of the copyright holders` } return serverLicences.map(p => { diff --git a/client/src/sass/include/_css-variables.scss b/client/src/sass/include/_css-variables.scss index 4fd1d83b9..fca8870bf 100644 --- a/client/src/sass/include/_css-variables.scss +++ b/client/src/sass/include/_css-variables.scss @@ -69,8 +69,8 @@ --alert-primary-bg: #{pvar(--primary-200)}; --alert-primary-border-color: #{pvar(--primary-300)}; - --embed-fg: #fff; - --embed-big-play-bg: rgba(0, 0, 0, 0.8); + --pt-player-fg: #fff; + --pt-player-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)}; - --player-overlay-fg: #{pvar(--fg-400)}; - --player-overlay-bg: #{pvar(--bg-secondary-400)}; + --pt-player-overlay-secondary-fg: #{pvar(--fg-400)}; + --pt-player-overlay-secondary-bg: #{pvar(--bg-secondary-400)}; // --------------------------------------------------------------------------- diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index fb4320cce..c3d6f6c23 100644 --- a/client/src/sass/include/_variables.scss +++ b/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), - --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) + --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) ); // SASS type check our CSS variables diff --git a/client/src/standalone/player/src/sass/shared/_player-variables.scss b/client/src/standalone/player/src/sass/shared/_player-variables.scss index e939d3c4e..7e1978cce 100644 --- a/client/src/standalone/player/src/sass/shared/_player-variables.scss +++ b/client/src/standalone/player/src/sass/shared/_player-variables.scss @@ -1,9 +1,7 @@ @use "sass:color"; -$primary-foreground-color: #fff; -$primary-foreground-opacity: 0.9; -$primary-foreground-opacity-hover: 1; -$primary-background-color: rgba(0, 0, 0, 0.8); +$fg-opacity: 0.9; +$fg-opacity-hover: 1; $font-size: 13px; diff --git a/client/src/standalone/player/src/sass/shared/context-menu.scss b/client/src/standalone/player/src/sass/shared/context-menu.scss index 8f12bcac7..3a4a1c34f 100644 --- a/client/src/standalone/player/src/sass/shared/context-menu.scss +++ b/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(--embed-background-color); + background-color: var(--pt-player-overlay-bg); padding: 8px 0; border-radius: 4px; width: $context-menu-width; z-index: 105; // On top of the progress bar .vjs-menu-content { - opacity: $primary-foreground-opacity; - color: pvar(--embed-fg); + opacity: $fg-opacity; + color: pvar(--pt-player-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: rgba(255, 255, 255, 0.2); + background-color: var(--pt-player-overlay-bg-hover); } [class^="vjs-icon-"] { diff --git a/client/src/standalone/player/src/sass/shared/control-bar.scss b/client/src/standalone/player/src/sass/shared/control-bar.scss index 3d6e597a0..404713a0f 100644 --- a/client/src/standalone/player/src/sass/shared/control-bar.scss +++ b/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(--embed-fg); + color: pvar(--pt-player-fg); transition: opacity 0.1s; &:not(.vjs-disabled) { - opacity: $primary-foreground-opacity; + opacity: $fg-opacity; &:hover { - opacity: $primary-foreground-opacity-hover; + opacity: $fg-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(--embed-background-color); + background-color: var(--pt-player-overlay-bg); 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(--embed-fg); - opacity: $primary-foreground-opacity; + color: pvar(--pt-player-fg); + opacity: $fg-opacity; } .vjs-time-control { @@ -195,7 +195,7 @@ $chapter-marker-size: 9px; .vjs-pt-live-control { width: auto; - opacity: $primary-foreground-opacity; // videojs adds a .vjs-disabled when the live is synced + opacity: $fg-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: $primary-foreground-opacity-hover; + opacity: $fg-opacity-hover; } } @@ -275,7 +275,7 @@ $chapter-marker-size: 9px; background-color: rgba(255, 255, 255, 0.2); .vjs-play-progress { - background: pvar(--embed-fg); + background: pvar(--pt-player-fg); // Not display the circle if the progress is not hovered &::before { @@ -480,7 +480,7 @@ $chapter-marker-size: 9px; &.enabled, &.enabled:hover { - opacity: $primary-foreground-opacity !important; + opacity: $fg-opacity !important; } &:focus { diff --git a/client/src/standalone/player/src/sass/shared/nsfw.scss b/client/src/standalone/player/src/sass/shared/nsfw.scss index 3a5c5fca0..4bd9dd725 100644 --- a/client/src/standalone/player/src/sass/shared/nsfw.scss +++ b/client/src/standalone/player/src/sass/shared/nsfw.scss @@ -22,8 +22,8 @@ .nsfw-details { width: 100%; width: fit-content; - background-color: pvar(--player-overlay-bg); - color: pvar(--player-overlay-fg); + background-color: pvar(--pt-player-overlay-secondary-bg); + color: pvar(--pt-player-overlay-secondary-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(--player-overlay-fg); + background-color: pvar(--pt-player-overlay-secondary-fg); display: block; @include margin-left(auto); diff --git a/client/src/standalone/player/src/sass/shared/peertube-skin.scss b/client/src/standalone/player/src/sass/shared/peertube-skin.scss index ddc80393d..716f15cbd 100644 --- a/client/src/standalone/player/src/sass/shared/peertube-skin.scss +++ b/client/src/standalone/player/src/sass/shared/peertube-skin.scss @@ -5,10 +5,10 @@ @use "./_player-mixins" as *; body { - --embed-foreground-color: #{$primary-foreground-color}; - --embed-background-color: #{$primary-background-color}; + --pt-player-overlay-bg: rgba(0, 0, 0, 0.6); + --pt-player-overlay-bg-hover: rgba(255, 255, 255, 0.15); - --embed-big-play-background-color: #{$primary-background-color}; + --pt-player-big-play-background-color: rgba(0, 0, 0, 0.8); // 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) { - --embed-background-color: #000; + --pt-player-overlay-bg: #000; } } @@ -27,7 +27,7 @@ body { .video-js.vjs-peertube-skin { font-size: $font-size; - color: pvar(--embed-fg); + color: pvar(--pt-player-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(--embed-big-play-bg); + background-color: pvar(--pt-player-big-play-bg); border-radius: 100%; transition: 0.2s background-color; @@ -85,7 +85,7 @@ body { } .vjs-control-bar { - opacity: $primary-foreground-opacity-hover; + opacity: $fg-opacity-hover; } } diff --git a/client/src/standalone/player/src/sass/shared/settings-menu.scss b/client/src/standalone/player/src/sass/shared/settings-menu.scss index 9beeb66d6..04f560920 100644 --- a/client/src/standalone/player/src/sass/shared/settings-menu.scss +++ b/client/src/standalone/player/src/sass/shared/settings-menu.scss @@ -10,7 +10,6 @@ $setting-transition-easing: ease-out; .video-js { .vjs-settings-sub-menu-title { - width: 4em; text-transform: initial; } @@ -18,12 +17,12 @@ $setting-transition-easing: ease-out; position: absolute; right: 0.5em; bottom: 4em; - color: pvar(--embed-fg); + color: pvar(--pt-player-fg); margin: 0 auto; font-size: $font-size !important; z-index: 100; border-radius: 10px; - background-color: var(--embed-background-color); + background-color: var(--pt-player-overlay-bg); width: auto; overflow: hidden; @@ -89,7 +88,7 @@ $setting-transition-easing: ease-out; &:hover { cursor: pointer; - background-color: rgba(255, 255, 255, 0.2); + background-color: var(--pt-player-overlay-bg-hover); } &.disabled { diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 5dd86fa65..70106698b 100644 --- a/client/src/standalone/videos/embed.ts +++ b/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('--embed-big-play-background-color', this.playerOptionsBuilder.getBigPlayBackgroundColor()) + body.style.setProperty('--pt-player-big-play-background-color', this.playerOptionsBuilder.getBigPlayBackgroundColor()) } if (this.playerOptionsBuilder.hasForegroundColor()) { - body.style.setProperty('--embed-foreground-color', this.playerOptionsBuilder.getForegroundColor()) + body.style.setProperty('--pt-player-fg', this.playerOptionsBuilder.getForegroundColor()) } }