aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-03-01 11:11:12 +0100
committerChocobozzz <me@florianbigard.com>2022-03-01 13:37:40 +0100
commit19e7a90045345b531a489289dc8d4e032fa15d6c (patch)
tree45778fcedfa107062c553c170806946a1735d07a /client/src/app
parent7bde625050cb661f51db20992f9f3912a582fcee (diff)
downloadPeerTube-19e7a90045345b531a489289dc8d4e032fa15d6c.tar.gz
PeerTube-19e7a90045345b531a489289dc8d4e032fa15d6c.tar.zst
PeerTube-19e7a90045345b531a489289dc8d4e032fa15d6c.zip
Fix playlist element scrolling
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss1
-rw-r--r--client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts10
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.html6
-rw-r--r--client/src/app/helpers/utils/dom.ts (renamed from client/src/app/helpers/utils/ui.ts)26
-rw-r--r--client/src/app/helpers/utils/index.ts2
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 @@
4@use '_miniature' as *; 4@use '_miniature' as *;
5 5
6.playlist { 6.playlist {
7 position: relative;
7 min-width: 200px; 8 min-width: 200px;
8 max-width: 470px; 9 max-width: 470px;
9 height: 66vh; 10 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 @@
1import { Component, EventEmitter, Input, Output } from '@angular/core' 1import { Component, EventEmitter, Input, Output } from '@angular/core'
2import { Router } from '@angular/router' 2import { Router } from '@angular/router'
3import { AuthService, ComponentPagination, HooksService, Notifier, SessionStorageService, UserService } from '@app/core' 3import { AuthService, ComponentPagination, HooksService, Notifier, SessionStorageService, UserService } from '@app/core'
4import { isInViewport } from '@app/helpers'
4import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist' 5import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
5import { peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
6import { getBoolOrDefault } from '@root-helpers/local-storage-utils' 6import { getBoolOrDefault } from '@root-helpers/local-storage-utils'
7import { peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
7import { VideoPlaylistPrivacy } from '@shared/models' 8import { VideoPlaylistPrivacy } from '@shared/models'
8 9
9@Component({ 10@Component({
@@ -132,7 +133,12 @@ export class VideoWatchPlaylistComponent {
132 this.videoFound.emit(playlistElement.video.uuid) 133 this.videoFound.emit(playlistElement.video.uuid)
133 134
134 setTimeout(() => { 135 setTimeout(() => {
135 document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false) 136 const element = document.querySelector<HTMLElement>('.element-' + this.currentPlaylistPosition)
137 const container = document.querySelector<HTMLElement>('.playlist')
138
139 if (isInViewport(element, container)) return
140
141 container.scrollTop = element.offsetTop
136 }) 142 })
137 143
138 return 144 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 @@
11 <img class="placeholder-image" *ngIf="playerPlaceholderImgSrc" [src]="playerPlaceholderImgSrc" alt="Placeholder image" i18n-alt> 11 <img class="placeholder-image" *ngIf="playerPlaceholderImgSrc" [src]="playerPlaceholderImgSrc" alt="Placeholder image" i18n-alt>
12 </div> 12 </div>
13 13
14 <my-video-watch-playlist 14 <my-video-watch-playlist #videoWatchPlaylist [playlist]="playlist" (videoFound)="onPlaylistVideoFound($event)"></my-video-watch-playlist>
15 #videoWatchPlaylist
16 [playlist]="playlist" class="playlist"
17 (videoFound)="onPlaylistVideoFound($event)"
18 ></my-video-watch-playlist>
19 15
20 <my-plugin-placeholder pluginId="player-next"></my-plugin-placeholder> 16 <my-plugin-placeholder pluginId="player-next"></my-plugin-placeholder>
21 </div> 17 </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') {
6 }) 6 })
7} 7}
8 8
9function isInViewport (el: HTMLElement) { 9function isInViewport (el: HTMLElement, container: HTMLElement = document.documentElement) {
10 const bounding = el.getBoundingClientRect() 10 const boundingEl = el.getBoundingClientRect()
11 return ( 11 const boundingContainer = container.getBoundingClientRect()
12 bounding.top >= 0 && 12
13 bounding.left >= 0 && 13 const relativePos = {
14 bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 14 top: 0,
15 bounding.right <= (window.innerWidth || document.documentElement.clientWidth) 15 left: 0,
16 ) 16 bottom: 0,
17 right: 0
18 }
19
20 relativePos.top = boundingEl.top - boundingContainer.top
21 relativePos.left = boundingEl.left - boundingContainer.left
22
23 return relativePos.top >= 0 &&
24 relativePos.left >= 0 &&
25 boundingEl.bottom <= boundingContainer.bottom &&
26 boundingEl.right <= boundingContainer.right
17} 27}
18 28
19function isXPercentInViewport (el: HTMLElement, percentVisible: number) { 29function 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'
2export * from './date' 2export * from './date'
3export * from './html' 3export * from './html'
4export * from './object' 4export * from './object'
5export * from './ui' 5export * from './dom'
6export * from './upload' 6export * from './upload'
7export * from './url' 7export * from './url'