Automatically jump to the highlighted thread
This commit is contained in:
parent
4dae00e68b
commit
bf079b7bfd
|
@ -28,7 +28,7 @@ form {
|
||||||
|
|
||||||
.submit-comment {
|
.submit-comment {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
@include peertube-button;
|
@include peertube-button;
|
||||||
|
|
|
@ -24,8 +24,9 @@
|
||||||
[autoLoading]="true"
|
[autoLoading]="true"
|
||||||
(nearOfBottom)="onNearOfBottom()"
|
(nearOfBottom)="onNearOfBottom()"
|
||||||
>
|
>
|
||||||
<div *ngIf="highlightedThread" id="highlighted-comment">
|
<div #commentHighlightBlock id="highlighted-comment">
|
||||||
<my-video-comment
|
<my-video-comment
|
||||||
|
*ngIf="highlightedThread"
|
||||||
[comment]="highlightedThread"
|
[comment]="highlightedThread"
|
||||||
[video]="video"
|
[video]="video"
|
||||||
[inReplyToCommentId]="inReplyToCommentId"
|
[inReplyToCommentId]="inReplyToCommentId"
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'
|
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, ElementRef } from '@angular/core'
|
||||||
import { ActivatedRoute } from '@angular/router'
|
import { ActivatedRoute } from '@angular/router'
|
||||||
import { ConfirmService } from '@app/core'
|
import { ConfirmService } from '@app/core'
|
||||||
import { NotificationsService } from 'angular2-notifications'
|
import { NotificationsService } from 'angular2-notifications'
|
||||||
|
@ -19,6 +19,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
|
||||||
styleUrls: ['./video-comments.component.scss']
|
styleUrls: ['./video-comments.component.scss']
|
||||||
})
|
})
|
||||||
export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
|
export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
|
||||||
|
@ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef
|
||||||
@Input() video: VideoDetails
|
@Input() video: VideoDetails
|
||||||
@Input() user: User
|
@Input() user: User
|
||||||
|
|
||||||
|
@ -76,7 +77,17 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
|
||||||
this.threadComments[commentId] = res
|
this.threadComments[commentId] = res
|
||||||
this.threadLoading[commentId] = false
|
this.threadLoading[commentId] = false
|
||||||
|
|
||||||
if (highlightThread) this.highlightedThread = new VideoComment(res.comment)
|
if (highlightThread) {
|
||||||
|
this.highlightedThread = new VideoComment(res.comment)
|
||||||
|
|
||||||
|
// Scroll to the highlighted thread
|
||||||
|
setTimeout(() => {
|
||||||
|
// -60 because of the fixed header
|
||||||
|
console.log(this.commentHighlightBlock.nativeElement.offsetTop)
|
||||||
|
const scrollY = this.commentHighlightBlock.nativeElement.offsetTop - 60
|
||||||
|
window.scroll(0, scrollY)
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
err => this.notificationsService.error(this.i18n('Error'), err.message)
|
err => this.notificationsService.error(this.i18n('Error'), err.message)
|
||||||
|
|
|
@ -101,14 +101,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
||||||
)
|
)
|
||||||
|
|
||||||
this.paramsSub = this.route.params.subscribe(routeParams => {
|
this.paramsSub = this.route.params.subscribe(routeParams => {
|
||||||
if (this.player) {
|
|
||||||
this.player.pause()
|
|
||||||
}
|
|
||||||
|
|
||||||
const uuid = routeParams[ 'uuid' ]
|
const uuid = routeParams[ 'uuid' ]
|
||||||
|
|
||||||
// Video did not change
|
// Video did not change
|
||||||
if (this.video && this.video.uuid === uuid) return
|
if (this.video && this.video.uuid === uuid) return
|
||||||
|
|
||||||
|
if (this.player) this.player.pause()
|
||||||
|
|
||||||
// Video did change
|
// Video did change
|
||||||
this.videoService
|
this.videoService
|
||||||
.getVideo(uuid)
|
.getVideo(uuid)
|
||||||
|
@ -469,7 +468,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
|
||||||
}
|
}
|
||||||
|
|
||||||
private isAutoplay () {
|
private isAutoplay () {
|
||||||
// True by default
|
// We'll jump to the thread id, so do not play the video
|
||||||
|
if (this.route.snapshot.params['threadId']) return false
|
||||||
|
|
||||||
|
// Otherwise true by default
|
||||||
if (!this.user) return true
|
if (!this.user) return true
|
||||||
|
|
||||||
// Be sure the autoPlay is set to false
|
// Be sure the autoPlay is set to false
|
||||||
|
|
Loading…
Reference in New Issue