Better video player responsive

client/src/assets/player/peertube-player.ts

@@ -124,6 +124,7 @@ export class PeerTubePlayer {
 
   setPoster (url: string) {
     this.player?.poster(url)
+    this.options.playerElement().poster = ''
   }
 
   enable () {

client/src/assets/player/shared/peertube/peertube-plugin.ts

@@ -47,6 +47,8 @@ class PeerTubePlugin extends Plugin {
 
   private stopTimeHandler: (...args: any[]) => void
 
+  private resizeObserver: ResizeObserver
+
   constructor (player: videojs.Player, private readonly options: PeerTubePluginOptions) {
     super(player)
 
@@ -122,9 +124,24 @@ class PeerTubePlugin extends Plugin {
 
         this.hideFatalError()
       })
+
+      this.updatePlayerSizeClasses()
+
+      if (typeof ResizeObserver !== 'undefined') {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.updatePlayerSizeClasses()
+        })
+
+        this.resizeObserver.observe(this.player.el())
+      }
     })
 
     this.player.on('resolution-change', (_: any, { resolution }: { resolution: number }) => {
+      if (this.player.paused()) {
+        this.player.on('play', () => this.adaptPosterForAudioOnly(resolution))
+        return
+      }
+
       this.adaptPosterForAudioOnly(resolution)
     })
 
@@ -133,6 +150,7 @@ class PeerTubePlugin extends Plugin {
 
   dispose () {
     if (this.videoViewInterval) clearInterval(this.videoViewInterval)
+    if (this.resizeObserver) this.resizeObserver.disconnect()
 
     super.dispose()
   }
@@ -233,20 +251,22 @@ class PeerTubePlugin extends Plugin {
 
     const defaultRatio = getComputedStyle(this.player.el()).getPropertyValue(this.options.autoPlayerRatio.cssRatioVariable)
 
-    const updateFromOptions = () => {
+    const tryToUpdateRatioFromOptions = () => {
       if (!this.options.videoRatio()) return
 
       this.adaptPlayerFromRatio({ ratio: this.options.videoRatio(), defaultRatio })
+      this.updatePlayerSizeClasses()
     }
 
-    updateFromOptions()
+    tryToUpdateRatioFromOptions()
 
-    this.player.on('video-change', () => updateFromOptions())
+    this.player.on('video-change', () => tryToUpdateRatioFromOptions())
 
     this.player.on('video-ratio-changed', (_event, data: { ratio: number }) => {
       if (this.options.videoRatio()) return
 
       this.adaptPlayerFromRatio({ ratio: data.ratio, defaultRatio })
+      this.updatePlayerSizeClasses()
     })
   }
 
@@ -376,6 +396,26 @@ class PeerTubePlugin extends Plugin {
 
   // ---------------------------------------------------------------------------
 
+  private updatePlayerSizeClasses () {
+    requestAnimationFrame(() => {
+      debugLogger('Updating player size classes')
+
+      const width = this.player.currentWidth()
+
+      const breakpoints = [ 350, 570, 750 ]
+
+      for (const breakpoint of breakpoints) {
+        if (width <= breakpoint) {
+          this.player.addClass('vjs-size-' + breakpoint)
+        } else {
+          this.player.removeClass('vjs-size-' + breakpoint)
+        }
+      }
+    })
+  }
+
+  // ---------------------------------------------------------------------------
+
   private listenFullScreenChange () {
     this.player.on('fullscreenchange', () => {
       if (this.player.isFullscreen()) this.player.focus()

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

@@ -29,8 +29,4 @@ $dock-padding: 20px;
 $first-control-bar-element-margin-left: 10px;
 $first-control-bar-element-margin-left-small-width: 5px;
 
-$screen-width-750: 750px;
-$screen-width-570: 570px;
-$screen-width-350: 350px;
-
 $assets-path: '../../assets/' !default;

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

@@ -462,83 +462,6 @@
       }
     }
   }
-
-  @media screen and (max-width: $screen-width-750) {
-    .vjs-theater-control {
-      display: none;
-    }
-
-    .vjs-peertube {
-      .icon,
-      .download-speed-text,
-      .upload-speed-text {
-        display: none !important;
-      }
-    }
-  }
-
-  @media screen and (max-width: $screen-width-570) {
-    .vjs-volume-control {
-      display: none;
-    }
-
-    .vjs-mute-control {
-      @include margin(0, 5px, 0, 5px);
-    }
-
-    .vjs-peertube {
-      padding: 0 !important;
-
-      .vjs-peertube-displayed {
-        display: none !important;
-      }
-    }
-
-    .vjs-peertube-link {
-      max-width: 100px;
-    }
-
-    &.vjs-live {
-      .vjs-duration {
-        display: none !important;
-      }
-
-      .vjs-peertube {
-        display: none !important;
-      }
-    }
-  }
-
-  @media screen and (max-width: $screen-width-350) {
-    .vjs-next-video,
-    .vjs-previous-video {
-      display: none !important;
-    }
-
-    .vjs-peertube-link {
-      padding: 0 !important;
-    }
-
-    > button:first-child {
-      @include margin-left($first-control-bar-element-margin-left-small-width);
-    }
-
-    > button:last-child {
-      @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;
-      }
-    }
-  }
 }
 
 .vjs-marker {
@@ -553,3 +476,84 @@
 .vjs-peertube-skin.vjs-has-captions .vjs-caption-toggle-control {
   display: block !important;
 }
+
+// ---------------------------------------------------------------------------
+// Custom media queries
+// ---------------------------------------------------------------------------
+
+.video-js.vjs-peertube-skin.vjs-size-750 .vjs-control-bar {
+  .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 {
+  .vjs-volume-control {
+    display: none;
+  }
+
+  .vjs-mute-control {
+    @include margin(0, 5px, 0, 5px);
+  }
+
+  .vjs-peertube {
+    padding: 0 !important;
+
+    .vjs-peertube-displayed {
+      display: none !important;
+    }
+  }
+
+  .vjs-peertube-link {
+    max-width: 100px;
+  }
+
+  &.vjs-live {
+    .vjs-duration {
+      display: none !important;
+    }
+
+    .vjs-peertube {
+      display: none !important;
+    }
+  }
+}
+
+.video-js.vjs-peertube-skin.vjs-size-350 .vjs-control-bar {
+  .vjs-next-video,
+  .vjs-previous-video {
+    display: none !important;
+  }
+
+  .vjs-peertube-link {
+    padding: 0 !important;
+  }
+
+  > button:first-child {
+    @include margin-left($first-control-bar-element-margin-left-small-width);
+  }
+
+  > button:last-child {
+    @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;
+    }
+  }
+}

client/src/sass/player/dock.scss

@@ -71,42 +71,43 @@
     }
   }
 
-  @media screen and (max-width: $screen-width-750) {
-    .peertube-dock-avatar {
-      --avatarSize: 40px;
-    }
-
-    .peertube-dock {
-      font-size: 16px;
-    }
-
-    .peertube-dock-description {
-      font-size: 9px;
-    }
-  }
-
-  @media screen and (max-width: $screen-width-570) {
-    .peertube-dock-avatar {
-      --avatarSize: 35px;
-    }
-
-    .peertube-dock {
-      font-size: 14px;
-    }
-  }
-
-  @media screen and (max-width: $screen-width-350) {
-    .peertube-dock-avatar {
-      --avatarSize: 30px;
-    }
-
-    .peertube-dock {
-      font-size: 13px;
-    }
-  }
-
   &.vjs-playing.vjs-user-inactive .peertube-dock {
     opacity: 0;
     transition: opacity 1s;
   }
 }
+
+.video-js.vjs-peertube-skin.vjs-size-750 {
+  .peertube-dock-avatar {
+    --avatarSize: 40px;
+  }
+
+  .peertube-dock {
+    font-size: 16px;
+  }
+
+  .peertube-dock-description {
+    font-size: 9px;
+  }
+}
+
+
+.video-js.vjs-peertube-skin.vjs-size-570 {
+  .peertube-dock-avatar {
+    --avatarSize: 35px;
+  }
+
+  .peertube-dock {
+    font-size: 14px;
+  }
+}
+
+.video-js.vjs-peertube-skin.vjs-size-350 {
+  .peertube-dock-avatar {
+    --avatarSize: 30px;
+  }
+
+  .peertube-dock {
+    font-size: 13px;
+  }
+}

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

@@ -114,39 +114,6 @@ body {
     background-size: cover;
   }
 
-  @media screen and (max-width: $screen-width-750) {
-    .vjs-big-play-button {
-      font-size: 5em;
-      border-width: 3px;
-
-      .vjs-icon-placeholder::before {
-        @include big-play-button-triangle-size(32px);
-      }
-    }
-  }
-
-  @media screen and (max-width: $screen-width-570) {
-    .vjs-big-play-button {
-      font-size: 4.5em;
-      border-width: 2.5px;
-
-      .vjs-icon-placeholder::before {
-        @include big-play-button-triangle-size(27px);
-      }
-    }
-  }
-
-  @media screen and (max-width: $screen-width-350) {
-    .vjs-big-play-button {
-      font-size: 3em;
-      border-width: 2px;
-
-      .vjs-icon-placeholder::before {
-        @include big-play-button-triangle-size(20px);
-      }
-    }
-  }
-
   // Theater mode is enabled
   &.vjs-theater-enabled {
     .vjs-theater-control {
@@ -229,3 +196,30 @@ body {
     display: block;
   }
 }
+
+
+// ---------------------------------------------------------------------------
+// Custom media queries
+// ---------------------------------------------------------------------------
+
+.video-js.vjs-peertube-skin.vjs-size-570 {
+  .vjs-big-play-button {
+    font-size: 5em;
+    border-width: 3px;
+
+    .vjs-icon-placeholder::before {
+      @include big-play-button-triangle-size(32px);
+    }
+  }
+}
+
+.video-js.vjs-peertube-skin.vjs-size-350 {
+  .vjs-big-play-button {
+    font-size: 3em;
+    border-width: 2px;
+
+    .vjs-icon-placeholder::before {
+      @include big-play-button-triangle-size(20px);
+    }
+  }
+}