Fix playlist element scrolling
This commit is contained in:
parent
7bde625050
commit
19e7a90045
|
@ -4,6 +4,7 @@
|
|||
@use '_miniature' as *;
|
||||
|
||||
.playlist {
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
max-width: 470px;
|
||||
height: 66vh;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
|
@ -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'
|
||||
|
|
Loading…
Reference in New Issue