Put instance name in embed button

9 files changed, 37 insertions, 24 deletions

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,