Fix playlist element scrolling

5 files changed, 29 insertions, 16 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>
diff --git a/client/src/app/helpers/utils/ui.ts b/client/src/app/helpers/utils/dom.ts
index ac8298926..f65e4d726 100644
--- a/client/src/app/helpers/utils/ui.ts
+++ b/client/src/app/helpers/utils/dom.ts
@@ -6,14 +6,24 @@ function scrollToTop (behavior: 'auto' | 'smooth' = 'auto') {
   })
 }
 
-function isInViewport (el: HTMLElement) {
-  const bounding = el.getBoundingClientRect()
-  return (
-    bounding.top >= 0 &&
-      bounding.left >= 0 &&
-      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
-  )
+function isInViewport (el: HTMLElement, container: HTMLElement = document.documentElement) {
+  const boundingEl = el.getBoundingClientRect()
+  const boundingContainer = container.getBoundingClientRect()
+
+  const relativePos = {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  }
+
+  relativePos.top = boundingEl.top - boundingContainer.top
+  relativePos.left = boundingEl.left - boundingContainer.left
+
+  return relativePos.top >= 0 &&
+    relativePos.left >= 0 &&
+    boundingEl.bottom <= boundingContainer.bottom &&
+    boundingEl.right <= boundingContainer.right
 }
 
 function isXPercentInViewport (el: HTMLElement, percentVisible: number) {
diff --git a/client/src/app/helpers/utils/index.ts b/client/src/app/helpers/utils/index.ts
index dc09c92ab..f821985c9 100644
--- a/client/src/app/helpers/utils/index.ts
+++ b/client/src/app/helpers/utils/index.ts
@@ -2,6 +2,6 @@ export * from './channel'
 export * from './date'
 export * from './html'
 export * from './object'
-export * from './ui'
+export * from './dom'
 export * from './upload'
 export * from './url'