From 19e7a90045345b531a489289dc8d4e032fa15d6c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 1 Mar 2022 11:11:12 +0100 Subject: Fix playlist element scrolling --- .../playlist/video-watch-playlist.component.scss | 1 + .../playlist/video-watch-playlist.component.ts | 10 ++++- .../+video-watch/video-watch.component.html | 6 +-- client/src/app/helpers/utils/dom.ts | 43 ++++++++++++++++++++++ client/src/app/helpers/utils/index.ts | 2 +- client/src/app/helpers/utils/ui.ts | 33 ----------------- 6 files changed, 54 insertions(+), 41 deletions(-) create mode 100644 client/src/app/helpers/utils/dom.ts delete mode 100644 client/src/app/helpers/utils/ui.ts (limited to 'client/src') 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('.element-' + this.currentPlaylistPosition) + const container = document.querySelector('.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 @@ Placeholder image - + diff --git a/client/src/app/helpers/utils/dom.ts b/client/src/app/helpers/utils/dom.ts new file mode 100644 index 000000000..f65e4d726 --- /dev/null +++ b/client/src/app/helpers/utils/dom.ts @@ -0,0 +1,43 @@ +function scrollToTop (behavior: 'auto' | 'smooth' = 'auto') { + window.scrollTo({ + left: 0, + top: 0, + behavior + }) +} + +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) { + const rect = el.getBoundingClientRect() + const windowHeight = (window.innerHeight || document.documentElement.clientHeight) + + return !( + Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible || + Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible + ) +} + +export { + scrollToTop, + isInViewport, + isXPercentInViewport +} 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' diff --git a/client/src/app/helpers/utils/ui.ts b/client/src/app/helpers/utils/ui.ts deleted file mode 100644 index ac8298926..000000000 --- a/client/src/app/helpers/utils/ui.ts +++ /dev/null @@ -1,33 +0,0 @@ -function scrollToTop (behavior: 'auto' | 'smooth' = 'auto') { - window.scrollTo({ - left: 0, - top: 0, - behavior - }) -} - -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 isXPercentInViewport (el: HTMLElement, percentVisible: number) { - const rect = el.getBoundingClientRect() - const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - - return !( - Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible || - Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible - ) -} - -export { - scrollToTop, - isInViewport, - isXPercentInViewport -} -- cgit v1.2.3