From bd2b51be4b29e6c3c72d8715164cde672bd41186 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 28 Jun 2022 14:04:03 +0200 Subject: Put instance name in embed button --- .../app/+videos/+video-watch/video-watch.component.ts | 1 + .../player/shared/control-bar/peertube-link-button.ts | 4 +++- .../manager-options/control-bar-options-builder.ts | 5 ++++- client/src/assets/player/types/manager-options.ts | 2 ++ .../assets/player/types/peertube-videojs-typings.ts | 1 + client/src/sass/player/control-bar.scss | 19 +++++++++++++++++-- client/src/standalone/videos/embed.scss | 19 ------------------- client/src/standalone/videos/embed.ts | 2 ++ .../videos/shared/player-manager-options.ts | 8 +++++++- 9 files changed, 37 insertions(+), 24 deletions(-) (limited to 'client') diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts index d05f08a5f..6a3bd1522 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts @@ -627,6 +627,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { embedUrl: video.embedUrl, embedTitle: video.name, + instanceName: this.serverConfig.instance.name, isLive: video.isLive, liveOptions, diff --git a/client/src/assets/player/shared/control-bar/peertube-link-button.ts b/client/src/assets/player/shared/control-bar/peertube-link-button.ts index 6d83263cc..4687525a9 100644 --- a/client/src/assets/player/shared/control-bar/peertube-link-button.ts +++ b/client/src/assets/player/shared/control-bar/peertube-link-button.ts @@ -5,6 +5,8 @@ import { PeerTubeLinkButtonOptions } from '../../types' const Button = videojs.getComponent('Button') class PeerTubeLinkButton extends Button { + private instanceName: string + constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) { super(player, options as any) } @@ -24,7 +26,7 @@ class PeerTubeLinkButton extends Button { private buildElement () { const el = videojs.dom.createEl('a', { href: this.buildLink(), - innerHTML: 'PeerTube', + innerHTML: (this.options_ as PeerTubeLinkButtonOptions).instanceName, title: this.player().localize('Video page (new window)'), className: 'vjs-peertube-link', target: '_blank' diff --git a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts index 72a10eb26..27f366732 100644 --- a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts +++ b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts @@ -51,7 +51,10 @@ export class ControlBarOptionsBuilder { if (this.options.peertubeLink === true) { Object.assign(children, { - peerTubeLinkButton: { shortUUID: this.options.videoShortUUID } as PeerTubeLinkButtonOptions + peerTubeLinkButton: { + shortUUID: this.options.videoShortUUID, + instanceName: this.options.instanceName + } as PeerTubeLinkButtonOptions }) } diff --git a/client/src/assets/player/types/manager-options.ts b/client/src/assets/player/types/manager-options.ts index a6f00876f..cadce739d 100644 --- a/client/src/assets/player/types/manager-options.ts +++ b/client/src/assets/player/types/manager-options.ts @@ -51,6 +51,8 @@ export interface CommonOptions extends CustomizationOptions { inactivityTimeout: number poster: string + instanceName: string + theaterButton: boolean captions: boolean diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts index ad284a671..115afb614 100644 --- a/client/src/assets/player/types/peertube-videojs-typings.ts +++ b/client/src/assets/player/types/peertube-videojs-typings.ts @@ -127,6 +127,7 @@ type NextPreviousVideoButtonOptions = { type PeerTubeLinkButtonOptions = { shortUUID: string + instanceName: string } type PeerTubeP2PInfoButtonOptions = { diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss index 6271523af..34470f3b1 100644 --- a/client/src/sass/player/control-bar.scss +++ b/client/src/sass/player/control-bar.scss @@ -160,8 +160,8 @@ .vjs-peertube { @include margin-right(6px); + @include margin-left(auto); - width: 100%; line-height: $control-bar-height; text-align: end; overflow: hidden; @@ -358,11 +358,13 @@ .vjs-peertube-link { @include disable-outline; @include disable-default-a-behaviour; + @include ellipsis; text-decoration: none; line-height: $control-bar-height; font-weight: $font-semibold; padding: 0 5px; + max-width: 150px; } .vjs-theater-control { @@ -420,6 +422,10 @@ } @media screen and (max-width: $screen-width-570) { + .vjs-volume-control { + display: none; + } + .vjs-peertube { padding: 0 !important; @@ -428,6 +434,10 @@ } } + .vjs-peertube-link { + max-width: 100px; + } + &.vjs-live { .vjs-duration { display: none !important; @@ -440,7 +450,6 @@ } @media screen and (max-width: $screen-width-350) { - .vjs-volume-control, .vjs-next-video, .vjs-previous-video { display: none !important; @@ -458,6 +467,12 @@ @include margin-right($first-control-bar-element-margin-left-small-width); } + .vjs-play-control { + @include margin-left(0); + + width: 30px; + } + &.vjs-live { .vjs-current-time { display: none !important; diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index 8c20bae79..3631ea7e6 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss @@ -40,25 +40,6 @@ body { .vjs-poster { background-size: 100% auto; } - - @media screen and (max-width: 350px) { - .vjs-play-control { - padding: 0 5px !important; - width: 25px !important; - } - - .vjs-volume-control { - display: none !important; - } - - .vjs-volume-panel { - width: 26px !important; - } - - .vjs-peertube-link { - padding: 0; - } - } } #error-block { diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 0a2b0ccbd..c15d4db17 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -196,6 +196,8 @@ export class PeerTubeEmbed { captionsResponse, alreadyHadPlayer, translations, + serverConfig: this.config, + onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer(uuid), playlistTracker: this.playlistTracker, diff --git a/client/src/standalone/videos/shared/player-manager-options.ts b/client/src/standalone/videos/shared/player-manager-options.ts index 144d74319..f3bd46a69 100644 --- a/client/src/standalone/videos/shared/player-manager-options.ts +++ b/client/src/standalone/videos/shared/player-manager-options.ts @@ -148,6 +148,8 @@ export class PlayerManagerOptions { captionsResponse: Response live?: LiveVideo + serverConfig: HTMLServerConfig + alreadyHadPlayer: boolean translations: Translations @@ -163,7 +165,8 @@ export class PlayerManagerOptions { alreadyHadPlayer, translations, playlistTracker, - live + live, + serverConfig } = options const videoCaptions = await this.buildCaptions(captionsResponse, translations) @@ -205,7 +208,10 @@ export class PlayerManagerOptions { videoDuration: video.duration, enableHotkeys: true, + peertubeLink: this.peertubeLink, + instanceName: serverConfig.instance.name, + poster: window.location.origin + video.previewPath, theaterButton: false, -- cgit v1.2.3