aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/core/routing/scroll.service.ts
blob: 0966255b3b42337fd1e25317f6670547a6d22214 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import * as debug from 'debug'
import { pairwise } from 'rxjs'
import { ViewportScroller } from '@angular/common'
import { Injectable } from '@angular/core'
import { RouterSetting } from '../'
import { PeerTubeRouterService } from './peertube-router.service'
import { logger } from '@root-helpers/logger'

const debugLogger = debug('peertube:main:ScrollService')

@Injectable()
export class ScrollService {

  private resetScroll = true

  constructor (
    private viewportScroller: ViewportScroller,
    private peertubeRouter: PeerTubeRouterService
  ) { }

  enableScrollRestoration () {
    // We'll manage scroll restoration ourselves
    this.viewportScroller.setHistoryScrollRestoration('manual')

    this.consumeScroll()
    this.produceScroll()
  }

  private produceScroll () {
    // When we add the a-state parameter, we don't want to alter the scroll
    this.peertubeRouter.getNavigationEndEvents().pipe(pairwise())
                      .subscribe(([ e1, e2 ]) => {
                        try {
                          this.resetScroll = false

                          const previousUrl = new URL(window.location.origin + e1.urlAfterRedirects)
                          const nextUrl = new URL(window.location.origin + e2.urlAfterRedirects)

                          if (previousUrl.pathname !== nextUrl.pathname) {
                            this.resetScroll = true
                            return
                          }

                          if (this.peertubeRouter.hasRouteSetting(RouterSetting.DISABLE_SCROLL_RESTORE)) {
                            this.resetScroll = false
                            return
                          }

                          // Remove route settings from the comparison
                          const nextSearchParams = nextUrl.searchParams
                          nextSearchParams.delete(PeerTubeRouterService.ROUTE_SETTING_NAME)

                          const previousSearchParams = previousUrl.searchParams

                          nextSearchParams.sort()
                          previousSearchParams.sort()

                          if (nextSearchParams.toString() !== previousSearchParams.toString()) {
                            this.resetScroll = true
                          }
                        } catch (err) {
                          logger.error('Cannot parse URL to check next scroll.', err)
                          this.resetScroll = true
                        }
                      })
  }

  private consumeScroll () {
    // Handle anchors/restore position
    this.peertubeRouter.getScrollEvents().subscribe(e => {
      debugLogger('Will schedule scroll after router event %o.', { e, resetScroll: this.resetScroll })

      // scrollToAnchor first to preserve anchor position when using history navigation
      if (e.anchor) {
        setTimeout(() => this.viewportScroller.scrollToAnchor(e.anchor))

        return
      }

      if (e.position) {
        setTimeout(() => this.viewportScroller.scrollToPosition(e.position))

        return
      }

      if (this.resetScroll) {
        return this.viewportScroller.scrollToPosition([ 0, 0 ])
      }
    })
  }

}