Fix playlist element scrolling

3 files changed, 10 insertions, 7 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
index 75ed9d901..fc67ac65a 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
@@ -4,6 +4,7 @@
 @use '_miniature' as *;
 
 .playlist {
+  position: relative;
   min-width: 200px;
   max-width: 470px;
   height: 66vh;
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
index b44238310..879d296a7 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, ComponentPagination, HooksService, Notifier, SessionStorageService, UserService } from '@app/core'
+import { isInViewport } from '@app/helpers'
 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
 import { getBoolOrDefault } from '@root-helpers/local-storage-utils'
+import { peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
 import { VideoPlaylistPrivacy } from '@shared/models'
 
 @Component({
@@ -132,7 +133,12 @@ export class VideoWatchPlaylistComponent {
         this.videoFound.emit(playlistElement.video.uuid)
 
         setTimeout(() => {
-          document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
+          const element = document.querySelector<HTMLElement>('.element-' + this.currentPlaylistPosition)
+          const container = document.querySelector<HTMLElement>('.playlist')
+
+          if (isInViewport(element, container)) return
+
+          container.scrollTop = element.offsetTop
         })
 
         return
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 830215225..4c15ae3d7 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -11,11 +11,7 @@
       <img class="placeholder-image" *ngIf="playerPlaceholderImgSrc" [src]="playerPlaceholderImgSrc" alt="Placeholder image" i18n-alt>
     </div>
 
-    <my-video-watch-playlist
-      #videoWatchPlaylist
-      [playlist]="playlist" class="playlist"
-      (videoFound)="onPlaylistVideoFound($event)"
-    ></my-video-watch-playlist>
+    <my-video-watch-playlist #videoWatchPlaylist [playlist]="playlist" (videoFound)="onPlaylistVideoFound($event)"></my-video-watch-playlist>
 
     <my-plugin-placeholder pluginId="player-next"></my-plugin-placeholder>
   </div>