2018-09-18 09:59:05 +00:00
|
|
|
import { catchError } from 'rxjs/operators'
|
2018-07-17 15:06:34 +00:00
|
|
|
import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
|
2017-06-16 12:32:15 +00:00
|
|
|
import { ActivatedRoute, Router } from '@angular/router'
|
2018-03-01 12:57:29 +00:00
|
|
|
import { RedirectService } from '@app/core/routing/redirect.service'
|
2018-03-23 13:26:20 +00:00
|
|
|
import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
|
2018-02-20 15:13:05 +00:00
|
|
|
import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
|
2017-11-30 08:21:11 +00:00
|
|
|
import { MetaService } from '@ngx-meta/core'
|
2018-12-19 15:04:34 +00:00
|
|
|
import { Notifier, ServerService } from '@app/core'
|
2018-07-13 16:21:19 +00:00
|
|
|
import { forkJoin, Subscription } from 'rxjs'
|
2018-09-02 18:54:23 +00:00
|
|
|
import { Hotkey, HotkeysService } from 'angular2-hotkeys'
|
2019-03-13 13:18:58 +00:00
|
|
|
import { UserVideoRateType, VideoCaption, VideoPlaylistPrivacy, VideoPrivacy, VideoState } from '../../../../../shared'
|
2017-06-16 12:32:15 +00:00
|
|
|
import { AuthService, ConfirmService } from '../../core'
|
2018-05-31 09:35:01 +00:00
|
|
|
import { RestExtractor, VideoBlacklistService } from '../../shared'
|
2017-12-07 10:15:19 +00:00
|
|
|
import { VideoDetails } from '../../shared/video/video-details.model'
|
2017-12-11 16:36:46 +00:00
|
|
|
import { VideoService } from '../../shared/video/video.service'
|
2017-12-27 15:11:53 +00:00
|
|
|
import { VideoDownloadComponent } from './modal/video-download.component'
|
|
|
|
import { VideoReportComponent } from './modal/video-report.component'
|
|
|
|
import { VideoShareComponent } from './modal/video-share.component'
|
2018-08-13 14:57:13 +00:00
|
|
|
import { VideoBlacklistComponent } from './modal/video-blacklist.component'
|
2018-09-02 18:54:23 +00:00
|
|
|
import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
|
2018-05-31 16:12:15 +00:00
|
|
|
import { I18n } from '@ngx-translate/i18n-polyfill'
|
2018-06-06 12:23:40 +00:00
|
|
|
import { environment } from '../../../environments/environment'
|
2018-07-13 16:21:19 +00:00
|
|
|
import { VideoCaptionService } from '@app/shared/video-caption'
|
2019-01-14 15:48:38 +00:00
|
|
|
import { MarkdownService } from '@app/shared/renderer'
|
2019-02-06 09:39:50 +00:00
|
|
|
import {
|
|
|
|
P2PMediaLoaderOptions,
|
|
|
|
PeertubePlayerManager,
|
|
|
|
PeertubePlayerManagerOptions,
|
2019-02-07 14:56:17 +00:00
|
|
|
PlayerMode
|
2019-02-06 09:39:50 +00:00
|
|
|
} from '../../../assets/player/peertube-player-manager'
|
2019-03-13 13:18:58 +00:00
|
|
|
import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
|
|
|
|
import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
|
|
|
|
import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
|
|
|
|
import { Video } from '@app/shared/video/video.model'
|
2016-03-14 12:50:19 +00:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'my-video-watch',
|
2016-09-19 20:49:31 +00:00
|
|
|
templateUrl: './video-watch.component.html',
|
|
|
|
styleUrls: [ './video-watch.component.scss' ]
|
2016-03-14 12:50:19 +00:00
|
|
|
})
|
2016-07-08 15:15:14 +00:00
|
|
|
export class VideoWatchComponent implements OnInit, OnDestroy {
|
2018-02-28 14:33:45 +00:00
|
|
|
private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
|
|
|
|
|
2017-10-19 12:58:28 +00:00
|
|
|
@ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
|
2017-06-16 12:32:15 +00:00
|
|
|
@ViewChild('videoShareModal') videoShareModal: VideoShareComponent
|
|
|
|
@ViewChild('videoReportModal') videoReportModal: VideoReportComponent
|
2018-02-20 15:13:05 +00:00
|
|
|
@ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
|
2018-08-13 14:57:13 +00:00
|
|
|
@ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
|
2018-09-02 18:54:23 +00:00
|
|
|
@ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
|
2017-06-16 12:32:15 +00:00
|
|
|
|
2019-01-23 14:36:45 +00:00
|
|
|
player: any
|
2017-12-20 08:57:00 +00:00
|
|
|
playerElement: HTMLVideoElement
|
2017-06-17 09:28:11 +00:00
|
|
|
userRating: UserVideoRateType = null
|
2017-10-25 14:43:19 +00:00
|
|
|
video: VideoDetails = null
|
2017-11-28 14:40:53 +00:00
|
|
|
descriptionLoading = false
|
2017-10-30 19:26:06 +00:00
|
|
|
|
2019-03-13 13:18:58 +00:00
|
|
|
playlist: VideoPlaylist = null
|
|
|
|
playlistVideos: Video[] = []
|
|
|
|
playlistPagination: ComponentPagination = {
|
|
|
|
currentPage: 1,
|
|
|
|
itemsPerPage: 10,
|
|
|
|
totalItems: null
|
|
|
|
}
|
|
|
|
noPlaylistVideos = false
|
|
|
|
currentPlaylistPosition = 1
|
|
|
|
|
2017-10-30 19:26:06 +00:00
|
|
|
completeDescriptionShown = false
|
|
|
|
completeVideoDescription: string
|
|
|
|
shortVideoDescription: string
|
2017-10-26 13:01:47 +00:00
|
|
|
videoHTMLDescription = ''
|
2017-12-21 09:49:52 +00:00
|
|
|
likesBarTooltipText = ''
|
2018-03-08 11:01:55 +00:00
|
|
|
hasAlreadyAcceptedPrivacyConcern = false
|
2018-07-16 17:15:20 +00:00
|
|
|
remoteServerDown = false
|
2018-09-02 18:54:23 +00:00
|
|
|
hotkeys: Hotkey[]
|
2017-06-16 12:32:15 +00:00
|
|
|
|
2019-03-07 16:06:00 +00:00
|
|
|
private currentTime: number
|
2017-06-16 12:32:15 +00:00
|
|
|
private paramsSub: Subscription
|
2019-03-13 13:18:58 +00:00
|
|
|
private queryParamsSub: Subscription
|
2017-06-16 12:32:15 +00:00
|
|
|
|
|
|
|
constructor (
|
2016-05-27 15:49:18 +00:00
|
|
|
private elementRef: ElementRef,
|
2018-07-17 15:06:34 +00:00
|
|
|
private changeDetector: ChangeDetectorRef,
|
2016-07-08 15:15:14 +00:00
|
|
|
private route: ActivatedRoute,
|
2017-04-04 19:37:03 +00:00
|
|
|
private router: Router,
|
2016-05-31 20:39:36 +00:00
|
|
|
private videoService: VideoService,
|
2019-03-13 13:18:58 +00:00
|
|
|
private playlistService: VideoPlaylistService,
|
2017-10-10 08:02:18 +00:00
|
|
|
private videoBlacklistService: VideoBlacklistService,
|
2017-04-04 19:37:03 +00:00
|
|
|
private confirmService: ConfirmService,
|
2016-11-04 16:37:44 +00:00
|
|
|
private metaService: MetaService,
|
2017-01-27 15:14:11 +00:00
|
|
|
private authService: AuthService,
|
2018-04-19 09:01:34 +00:00
|
|
|
private serverService: ServerService,
|
2018-05-31 09:35:01 +00:00
|
|
|
private restExtractor: RestExtractor,
|
2018-12-19 15:04:34 +00:00
|
|
|
private notifier: Notifier,
|
2018-01-10 16:36:35 +00:00
|
|
|
private markdownService: MarkdownService,
|
2018-03-01 12:57:29 +00:00
|
|
|
private zone: NgZone,
|
2018-05-31 16:12:15 +00:00
|
|
|
private redirectService: RedirectService,
|
2018-07-13 16:21:19 +00:00
|
|
|
private videoCaptionService: VideoCaptionService,
|
2018-06-06 12:23:40 +00:00
|
|
|
private i18n: I18n,
|
2018-09-02 18:54:23 +00:00
|
|
|
private hotkeysService: HotkeysService,
|
2018-06-06 12:23:40 +00:00
|
|
|
@Inject(LOCALE_ID) private localeId: string
|
2016-05-31 20:39:36 +00:00
|
|
|
) {}
|
2016-03-14 12:50:19 +00:00
|
|
|
|
2017-12-12 13:41:59 +00:00
|
|
|
get user () {
|
|
|
|
return this.authService.getUser()
|
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
ngOnInit () {
|
2018-03-23 13:26:20 +00:00
|
|
|
if (
|
2019-02-08 15:16:40 +00:00
|
|
|
!!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === false ||
|
2018-03-23 13:26:20 +00:00
|
|
|
peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
|
|
|
|
) {
|
2018-03-07 16:35:30 +00:00
|
|
|
this.hasAlreadyAcceptedPrivacyConcern = true
|
|
|
|
}
|
|
|
|
|
2017-01-29 17:35:19 +00:00
|
|
|
this.paramsSub = this.route.params.subscribe(routeParams => {
|
2019-03-13 13:18:58 +00:00
|
|
|
const videoId = routeParams[ 'videoId' ]
|
|
|
|
if (videoId) this.loadVideo(videoId)
|
2018-05-31 09:35:01 +00:00
|
|
|
|
2019-03-13 13:18:58 +00:00
|
|
|
const playlistId = routeParams[ 'playlistId' ]
|
|
|
|
if (playlistId) this.loadPlaylist(playlistId)
|
|
|
|
})
|
2018-06-14 09:25:49 +00:00
|
|
|
|
2019-03-13 13:18:58 +00:00
|
|
|
this.queryParamsSub = this.route.queryParams.subscribe(queryParams => {
|
|
|
|
const videoId = queryParams[ 'videoId' ]
|
|
|
|
if (videoId) this.loadVideo(videoId)
|
2017-06-16 12:32:15 +00:00
|
|
|
})
|
2018-09-02 18:54:23 +00:00
|
|
|
|
|
|
|
this.hotkeys = [
|
2018-09-11 12:13:02 +00:00
|
|
|
new Hotkey('shift+l', (event: KeyboardEvent): boolean => {
|
2018-09-02 18:54:23 +00:00
|
|
|
this.setLike()
|
|
|
|
return false
|
2018-10-03 08:11:26 +00:00
|
|
|
}, undefined, this.i18n('Like the video')),
|
2018-09-11 12:13:02 +00:00
|
|
|
new Hotkey('shift+d', (event: KeyboardEvent): boolean => {
|
2018-09-02 18:54:23 +00:00
|
|
|
this.setDislike()
|
|
|
|
return false
|
2018-10-03 08:11:26 +00:00
|
|
|
}, undefined, this.i18n('Dislike the video')),
|
2018-09-11 12:13:02 +00:00
|
|
|
new Hotkey('shift+s', (event: KeyboardEvent): boolean => {
|
2018-09-02 18:54:23 +00:00
|
|
|
this.subscribeButton.subscribed ?
|
|
|
|
this.subscribeButton.unsubscribe() :
|
|
|
|
this.subscribeButton.subscribe()
|
|
|
|
return false
|
2018-10-03 08:11:26 +00:00
|
|
|
}, undefined, this.i18n('Subscribe to the account'))
|
2018-09-02 18:54:23 +00:00
|
|
|
]
|
|
|
|
if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
|
2016-11-04 15:04:50 +00:00
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
ngOnDestroy () {
|
2018-04-03 16:06:58 +00:00
|
|
|
this.flushPlayer()
|
2016-11-08 20:17:17 +00:00
|
|
|
|
2017-01-29 17:35:19 +00:00
|
|
|
// Unsubscribe subscriptions
|
2019-03-13 13:18:58 +00:00
|
|
|
if (this.paramsSub) this.paramsSub.unsubscribe()
|
|
|
|
if (this.queryParamsSub) this.queryParamsSub.unsubscribe()
|
2018-09-02 18:54:23 +00:00
|
|
|
|
|
|
|
// Unbind hotkeys
|
|
|
|
if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys)
|
2016-03-14 12:50:19 +00:00
|
|
|
}
|
2016-03-14 21:16:43 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
setLike () {
|
|
|
|
if (this.isUserLoggedIn() === false) return
|
2018-01-07 13:48:10 +00:00
|
|
|
if (this.userRating === 'like') {
|
|
|
|
// Already liked this video
|
|
|
|
this.setRating('none')
|
|
|
|
} else {
|
|
|
|
this.setRating('like')
|
|
|
|
}
|
2017-03-08 20:35:43 +00:00
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
setDislike () {
|
|
|
|
if (this.isUserLoggedIn() === false) return
|
2018-01-07 13:48:10 +00:00
|
|
|
if (this.userRating === 'dislike') {
|
|
|
|
// Already disliked this video
|
|
|
|
this.setRating('none')
|
|
|
|
} else {
|
|
|
|
this.setRating('dislike')
|
|
|
|
}
|
2017-03-08 20:35:43 +00:00
|
|
|
}
|
|
|
|
|
2017-10-30 19:26:06 +00:00
|
|
|
showMoreDescription () {
|
|
|
|
if (this.completeVideoDescription === undefined) {
|
|
|
|
return this.loadCompleteDescription()
|
|
|
|
}
|
|
|
|
|
|
|
|
this.updateVideoDescription(this.completeVideoDescription)
|
2017-11-28 14:40:53 +00:00
|
|
|
this.completeDescriptionShown = true
|
2017-10-30 19:26:06 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
showLessDescription () {
|
|
|
|
this.updateVideoDescription(this.shortVideoDescription)
|
2017-11-28 14:40:53 +00:00
|
|
|
this.completeDescriptionShown = false
|
2017-10-30 19:26:06 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
loadCompleteDescription () {
|
2017-11-28 14:40:53 +00:00
|
|
|
this.descriptionLoading = true
|
|
|
|
|
2017-10-30 19:26:06 +00:00
|
|
|
this.videoService.loadCompleteDescription(this.video.descriptionPath)
|
2018-06-12 18:04:58 +00:00
|
|
|
.subscribe(
|
|
|
|
description => {
|
|
|
|
this.completeDescriptionShown = true
|
|
|
|
this.descriptionLoading = false
|
|
|
|
|
|
|
|
this.shortVideoDescription = this.video.description
|
|
|
|
this.completeVideoDescription = description
|
|
|
|
|
|
|
|
this.updateVideoDescription(this.completeVideoDescription)
|
|
|
|
},
|
|
|
|
|
|
|
|
error => {
|
|
|
|
this.descriptionLoading = false
|
2018-12-19 15:04:34 +00:00
|
|
|
this.notifier.error(error.message)
|
2018-06-12 18:04:58 +00:00
|
|
|
}
|
|
|
|
)
|
2017-10-30 19:26:06 +00:00
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
showReportModal (event: Event) {
|
|
|
|
event.preventDefault()
|
|
|
|
this.videoReportModal.show()
|
2017-01-20 18:22:15 +00:00
|
|
|
}
|
|
|
|
|
2018-02-20 15:13:05 +00:00
|
|
|
showSupportModal () {
|
|
|
|
this.videoSupportModal.show()
|
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
showShareModal () {
|
2019-03-07 16:06:00 +00:00
|
|
|
this.videoShareModal.show(this.currentTime)
|
2016-11-08 20:11:57 +00:00
|
|
|
}
|
|
|
|
|
2017-10-19 12:58:28 +00:00
|
|
|
showDownloadModal (event: Event) {
|
2017-06-16 12:32:15 +00:00
|
|
|
event.preventDefault()
|
2017-10-19 12:58:28 +00:00
|
|
|
this.videoDownloadModal.show()
|
2016-11-08 20:11:57 +00:00
|
|
|
}
|
|
|
|
|
2018-08-13 14:57:13 +00:00
|
|
|
showBlacklistModal (event: Event) {
|
|
|
|
event.preventDefault()
|
|
|
|
this.videoBlacklistModal.show()
|
|
|
|
}
|
|
|
|
|
2018-08-14 07:08:47 +00:00
|
|
|
async unblacklistVideo (event: Event) {
|
|
|
|
event.preventDefault()
|
|
|
|
|
|
|
|
const confirmMessage = this.i18n(
|
|
|
|
'Do you really want to remove this video from the blacklist? It will be available again in the videos list.'
|
|
|
|
)
|
|
|
|
|
|
|
|
const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist'))
|
|
|
|
if (res === false) return
|
|
|
|
|
|
|
|
this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe(
|
|
|
|
() => {
|
2018-12-19 15:04:34 +00:00
|
|
|
this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name }))
|
2018-08-14 07:08:47 +00:00
|
|
|
|
|
|
|
this.video.blacklisted = false
|
|
|
|
this.video.blacklistedReason = null
|
|
|
|
},
|
|
|
|
|
2018-12-19 15:04:34 +00:00
|
|
|
err => this.notifier.error(err.message)
|
2018-08-14 07:08:47 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
isUserLoggedIn () {
|
|
|
|
return this.authService.isLoggedIn()
|
2017-01-20 18:22:15 +00:00
|
|
|
}
|
|
|
|
|
2017-12-27 15:11:53 +00:00
|
|
|
isVideoUpdatable () {
|
|
|
|
return this.video.isUpdatableBy(this.authService.getUser())
|
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
isVideoBlacklistable () {
|
2017-12-12 13:41:59 +00:00
|
|
|
return this.video.isBlackistableBy(this.user)
|
2017-04-26 19:22:10 +00:00
|
|
|
}
|
|
|
|
|
2018-08-14 07:08:47 +00:00
|
|
|
isVideoUnblacklistable () {
|
|
|
|
return this.video.isUnblacklistableBy(this.user)
|
|
|
|
}
|
|
|
|
|
2017-12-06 16:15:59 +00:00
|
|
|
getVideoTags () {
|
|
|
|
if (!this.video || Array.isArray(this.video.tags) === false) return []
|
|
|
|
|
2018-07-24 09:40:04 +00:00
|
|
|
return this.video.tags
|
2017-12-06 16:15:59 +00:00
|
|
|
}
|
|
|
|
|
2017-12-20 16:53:58 +00:00
|
|
|
isVideoRemovable () {
|
|
|
|
return this.video.isRemovableBy(this.authService.getUser())
|
|
|
|
}
|
|
|
|
|
2018-02-22 14:29:32 +00:00
|
|
|
async removeVideo (event: Event) {
|
2017-12-20 16:53:58 +00:00
|
|
|
event.preventDefault()
|
|
|
|
|
2018-05-31 16:12:15 +00:00
|
|
|
const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
|
2018-02-22 14:29:32 +00:00
|
|
|
if (res === false) return
|
2017-12-20 16:53:58 +00:00
|
|
|
|
2018-02-22 14:29:32 +00:00
|
|
|
this.videoService.removeVideo(this.video.id)
|
2018-06-12 18:04:58 +00:00
|
|
|
.subscribe(
|
2018-12-19 15:04:34 +00:00
|
|
|
() => {
|
|
|
|
this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }))
|
2018-06-12 18:04:58 +00:00
|
|
|
|
|
|
|
// Go back to the video-list.
|
|
|
|
this.redirectService.redirectToHomepage()
|
|
|
|
},
|
|
|
|
|
2018-12-19 15:04:34 +00:00
|
|
|
error => this.notifier.error(error.message)
|
2018-06-12 18:04:58 +00:00
|
|
|
)
|
2017-12-20 16:53:58 +00:00
|
|
|
}
|
|
|
|
|
2018-03-08 11:01:55 +00:00
|
|
|
acceptedPrivacyConcern () {
|
2018-03-23 13:26:20 +00:00
|
|
|
peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
|
2018-03-08 11:01:55 +00:00
|
|
|
this.hasAlreadyAcceptedPrivacyConcern = true
|
|
|
|
}
|
|
|
|
|
2018-06-12 18:04:58 +00:00
|
|
|
isVideoToTranscode () {
|
|
|
|
return this.video && this.video.state.id === VideoState.TO_TRANSCODE
|
|
|
|
}
|
|
|
|
|
2018-10-06 17:17:21 +00:00
|
|
|
isVideoDownloadable () {
|
2018-10-08 12:45:22 +00:00
|
|
|
return this.video && this.video.downloadEnabled
|
2018-10-06 17:17:21 +00:00
|
|
|
}
|
|
|
|
|
2018-08-03 07:43:00 +00:00
|
|
|
isVideoToImport () {
|
|
|
|
return this.video && this.video.state.id === VideoState.TO_IMPORT
|
|
|
|
}
|
|
|
|
|
2018-06-15 14:52:15 +00:00
|
|
|
hasVideoScheduledPublication () {
|
|
|
|
return this.video && this.video.scheduledUpdate !== undefined
|
|
|
|
}
|
|
|
|
|
2019-03-13 13:18:58 +00:00
|
|
|
isVideoBlur (video: Video) {
|
|
|
|
return video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
|
|
|
|
}
|
|
|
|
|
|
|
|
isPlaylistOwned () {
|
|
|
|
return this.playlist.isLocal === true && this.playlist.ownerAccount.name === this.user.username
|
|
|
|
}
|
|
|
|
|
|
|
|
isUnlistedPlaylist () {
|
|
|
|
return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED
|
|
|
|
}
|
|
|
|
|
|
|
|
isPrivatePlaylist () {
|
|
|
|
return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
|
|
|
|
}
|
|
|
|
|
|
|
|
isPublicPlaylist () {
|
|
|
|
return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
|
|
|
|
}
|
|
|
|
|
|
|
|
onPlaylistVideosNearOfBottom () {
|
|
|
|
// Last page
|
|
|
|
if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
|
|
|
|
|
|
|
|
this.playlistPagination.currentPage += 1
|
|
|
|
this.loadPlaylistElements(false)
|
|
|
|
}
|
|
|
|
|
|
|
|
onElementRemoved (video: Video) {
|
|
|
|
this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id)
|
|
|
|
|
|
|
|
this.playlistPagination.totalItems--
|
|
|
|
}
|
|
|
|
|
|
|
|
private loadVideo (videoId: string) {
|
|
|
|
// Video did not change
|
|
|
|
if (this.video && this.video.uuid === videoId) return
|
|
|
|
|
|
|
|
if (this.player) this.player.pause()
|
|
|
|
|
|
|
|
// Video did change
|
|
|
|
forkJoin(
|
|
|
|
this.videoService.getVideo(videoId),
|
|
|
|
this.videoCaptionService.listCaptions(videoId)
|
|
|
|
)
|
|
|
|
.pipe(
|
|
|
|
// If 401, the video is private or blacklisted so redirect to 404
|
|
|
|
catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
|
|
|
|
)
|
|
|
|
.subscribe(([ video, captionsResult ]) => {
|
|
|
|
const queryParams = this.route.snapshot.queryParams
|
|
|
|
const startTime = queryParams.start
|
|
|
|
const stopTime = queryParams.stop
|
|
|
|
const subtitle = queryParams.subtitle
|
|
|
|
const playerMode = queryParams.mode
|
|
|
|
|
|
|
|
this.onVideoFetched(video, captionsResult.data, { startTime, stopTime, subtitle, playerMode })
|
|
|
|
.catch(err => this.handleError(err))
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
private loadPlaylist (playlistId: string) {
|
|
|
|
// Playlist did not change
|
|
|
|
if (this.playlist && this.playlist.uuid === playlistId) return
|
|
|
|
|
|
|
|
this.playlistService.getVideoPlaylist(playlistId)
|
|
|
|
.pipe(
|
|
|
|
// If 401, the video is private or blacklisted so redirect to 404
|
|
|
|
catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
|
|
|
|
)
|
|
|
|
.subscribe(playlist => {
|
|
|
|
this.playlist = playlist
|
|
|
|
|
|
|
|
const videoId = this.route.snapshot.queryParams['videoId']
|
|
|
|
this.loadPlaylistElements(!videoId)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
private loadPlaylistElements (redirectToFirst = false) {
|
|
|
|
this.videoService.getPlaylistVideos(this.playlist.id, this.playlistPagination)
|
|
|
|
.subscribe(({ totalVideos, videos }) => {
|
|
|
|
this.playlistVideos = this.playlistVideos.concat(videos)
|
|
|
|
this.playlistPagination.totalItems = totalVideos
|
|
|
|
|
|
|
|
if (totalVideos === 0) {
|
|
|
|
this.noPlaylistVideos = true
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
this.updatePlaylistIndex()
|
|
|
|
|
|
|
|
if (redirectToFirst) {
|
|
|
|
const extras = {
|
|
|
|
queryParams: { videoId: this.playlistVideos[ 0 ].uuid },
|
|
|
|
replaceUrl: true
|
|
|
|
}
|
|
|
|
this.router.navigate([], extras)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2017-10-30 19:26:06 +00:00
|
|
|
private updateVideoDescription (description: string) {
|
|
|
|
this.video.description = description
|
|
|
|
this.setVideoDescriptionHTML()
|
|
|
|
}
|
|
|
|
|
2019-02-15 14:52:18 +00:00
|
|
|
private async setVideoDescriptionHTML () {
|
|
|
|
this.videoHTMLDescription = await this.markdownService.textMarkdownToHTML(this.video.description)
|
2017-10-30 19:26:06 +00:00
|
|
|
}
|
|
|
|
|
2017-12-21 09:49:52 +00:00
|
|
|
private setVideoLikesBarTooltipText () {
|
2018-06-12 18:04:58 +00:00
|
|
|
this.likesBarTooltipText = this.i18n('{{likesNumber}} likes / {{dislikesNumber}} dislikes', {
|
|
|
|
likesNumber: this.video.likes,
|
|
|
|
dislikesNumber: this.video.dislikes
|
|
|
|
})
|
2017-12-21 09:49:52 +00:00
|
|
|
}
|
|
|
|
|
2017-07-23 09:07:30 +00:00
|
|
|
private handleError (err: any) {
|
|
|
|
const errorMessage: string = typeof err === 'string' ? err : err.message
|
2018-02-26 08:55:23 +00:00
|
|
|
if (!errorMessage) return
|
|
|
|
|
2018-07-16 17:15:20 +00:00
|
|
|
// Display a message in the video player instead of a notification
|
2018-07-17 12:44:19 +00:00
|
|
|
if (errorMessage.indexOf('from xs param') !== -1) {
|
2018-07-16 17:15:20 +00:00
|
|
|
this.flushPlayer()
|
|
|
|
this.remoteServerDown = true
|
2018-07-17 15:06:34 +00:00
|
|
|
this.changeDetector.detectChanges()
|
|
|
|
|
2018-07-16 17:15:20 +00:00
|
|
|
return
|
2017-07-23 09:07:30 +00:00
|
|
|
}
|
|
|
|
|
2018-12-19 15:04:34 +00:00
|
|
|
this.notifier.error(errorMessage)
|
2017-07-23 09:07:30 +00:00
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
private checkUserRating () {
|
2017-03-08 20:35:43 +00:00
|
|
|
// Unlogged users do not have ratings
|
2017-06-16 12:32:15 +00:00
|
|
|
if (this.isUserLoggedIn() === false) return
|
2017-03-08 20:35:43 +00:00
|
|
|
|
|
|
|
this.videoService.getUserVideoRating(this.video.id)
|
2018-06-12 18:04:58 +00:00
|
|
|
.subscribe(
|
|
|
|
ratingObject => {
|
|
|
|
if (ratingObject) {
|
|
|
|
this.userRating = ratingObject.rating
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-12-19 15:04:34 +00:00
|
|
|
err => this.notifier.error(err.message)
|
2018-06-12 18:04:58 +00:00
|
|
|
)
|
2017-03-08 20:35:43 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 14:56:17 +00:00
|
|
|
private async onVideoFetched (
|
|
|
|
video: VideoDetails,
|
|
|
|
videoCaptions: VideoCaption[],
|
2019-03-07 16:06:00 +00:00
|
|
|
urlOptions: { startTime?: number, stopTime?: number, subtitle?: string, playerMode?: string }
|
2019-02-07 14:56:17 +00:00
|
|
|
) {
|
2017-06-16 12:32:15 +00:00
|
|
|
this.video = video
|
2017-04-04 19:37:03 +00:00
|
|
|
|
2018-04-04 07:04:34 +00:00
|
|
|
// Re init attributes
|
|
|
|
this.descriptionLoading = false
|
|
|
|
this.completeDescriptionShown = false
|
2018-07-16 17:15:20 +00:00
|
|
|
this.remoteServerDown = false
|
2019-03-07 16:06:00 +00:00
|
|
|
this.currentTime = undefined
|
2018-04-04 07:04:34 +00:00
|
|
|
|
2019-03-13 13:18:58 +00:00
|
|
|
this.updatePlaylistIndex()
|
|
|
|
|
2018-12-17 13:22:36 +00:00
|
|
|
let startTime = urlOptions.startTime || (this.video.userHistory ? this.video.userHistory.currentTime : 0)
|
2019-01-08 14:16:54 +00:00
|
|
|
// If we are at the end of the video, reset the timer
|
2018-10-05 09:15:06 +00:00
|
|
|
if (this.video.duration - startTime <= 1) startTime = 0
|
|
|
|
|
2019-03-13 13:18:58 +00:00
|
|
|
if (this.isVideoBlur(this.video)) {
|
2018-02-28 14:33:45 +00:00
|
|
|
const res = await this.confirmService.confirm(
|
2018-05-31 16:12:15 +00:00
|
|
|
this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'),
|
|
|
|
this.i18n('Mature or explicit content')
|
2017-10-27 06:51:40 +00:00
|
|
|
)
|
2018-03-01 12:57:29 +00:00
|
|
|
if (res === false) return this.redirectService.redirectToHomepage()
|
2017-04-04 19:37:03 +00:00
|
|
|
}
|
|
|
|
|
2018-04-03 16:06:58 +00:00
|
|
|
// Flush old player if needed
|
|
|
|
this.flushPlayer()
|
2018-04-03 15:33:39 +00:00
|
|
|
|
|
|
|
// Build video element, because videojs remove it on dispose
|
2019-03-13 13:18:58 +00:00
|
|
|
const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-wrapper')
|
2018-04-03 15:33:39 +00:00
|
|
|
this.playerElement = document.createElement('video')
|
|
|
|
this.playerElement.className = 'video-js vjs-peertube-skin'
|
2018-05-22 07:16:05 +00:00
|
|
|
this.playerElement.setAttribute('playsinline', 'true')
|
2018-04-03 15:33:39 +00:00
|
|
|
playerElementWrapper.appendChild(this.playerElement)
|
|
|
|
|
2018-07-13 16:21:19 +00:00
|
|
|
const playerCaptions = videoCaptions.map(c => ({
|
|
|
|
label: c.language.label,
|
|
|
|
language: c.language.id,
|
|
|
|
src: environment.apiUrl + c.captionPath
|
|
|
|
}))
|
|
|
|
|
2019-02-06 09:39:50 +00:00
|
|
|
const options: PeertubePlayerManagerOptions = {
|
2019-01-23 14:36:45 +00:00
|
|
|
common: {
|
|
|
|
autoplay: this.isAutoplay(),
|
2019-02-06 09:39:50 +00:00
|
|
|
|
2019-01-23 14:36:45 +00:00
|
|
|
playerElement: this.playerElement,
|
2019-02-06 09:39:50 +00:00
|
|
|
onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
|
|
|
|
|
2019-01-23 14:36:45 +00:00
|
|
|
videoDuration: this.video.duration,
|
|
|
|
enableHotkeys: true,
|
|
|
|
inactivityTimeout: 2500,
|
|
|
|
poster: this.video.previewUrl,
|
|
|
|
startTime,
|
2019-03-07 16:06:00 +00:00
|
|
|
stopTime: urlOptions.stopTime,
|
2019-01-23 14:36:45 +00:00
|
|
|
|
|
|
|
theaterMode: true,
|
|
|
|
captions: videoCaptions.length !== 0,
|
|
|
|
peertubeLink: false,
|
|
|
|
|
|
|
|
videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null,
|
|
|
|
embedUrl: this.video.embedUrl,
|
|
|
|
|
|
|
|
language: this.localeId,
|
|
|
|
|
|
|
|
subtitle: urlOptions.subtitle,
|
2017-10-06 08:40:09 +00:00
|
|
|
|
2019-01-23 14:36:45 +00:00
|
|
|
userWatching: this.user && this.user.videosHistoryEnabled === true ? {
|
|
|
|
url: this.videoService.getUserWatchingVideoUrl(this.video.uuid),
|
|
|
|
authorizationHeader: this.authService.getRequestHeaderValue()
|
|
|
|
} : undefined,
|
2017-10-06 08:40:09 +00:00
|
|
|
|
2019-01-23 14:36:45 +00:00
|
|
|
serverUrl: environment.apiUrl,
|
|
|
|
|
|
|
|
videoCaptions: playerCaptions
|
2019-02-06 09:39:50 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
webtorrent: {
|
|
|
|
videoFiles: this.video.files
|
2019-01-29 07:37:25 +00:00
|
|
|
}
|
2018-06-06 12:23:40 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 14:56:17 +00:00
|
|
|
const mode: PlayerMode = urlOptions.playerMode === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent'
|
|
|
|
|
|
|
|
if (mode === 'p2p-media-loader') {
|
|
|
|
const hlsPlaylist = this.video.getHlsPlaylist()
|
2018-06-06 12:23:40 +00:00
|
|
|
|
2019-01-29 07:37:25 +00:00
|
|
|
const p2pMediaLoader = {
|
|
|
|
playlistUrl: hlsPlaylist.playlistUrl,
|
|
|
|
segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
|
|
|
|
redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
|
|
|
|
trackerAnnounce: this.video.trackerUrls,
|
2019-01-23 14:36:45 +00:00
|
|
|
videoFiles: this.video.files
|
2019-01-29 07:37:25 +00:00
|
|
|
} as P2PMediaLoaderOptions
|
|
|
|
|
|
|
|
Object.assign(options, { p2pMediaLoader })
|
2018-06-06 12:23:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
this.zone.runOutsideAngular(async () => {
|
2019-01-29 07:37:25 +00:00
|
|
|
this.player = await PeertubePlayerManager.initialize(mode, options)
|
2019-01-23 14:36:45 +00:00
|
|
|
this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
|
2019-03-07 16:06:00 +00:00
|
|
|
|
|
|
|
this.player.on('timeupdate', () => {
|
|
|
|
this.currentTime = Math.floor(this.player.currentTime())
|
|
|
|
})
|
2019-03-13 13:18:58 +00:00
|
|
|
|
|
|
|
this.player.one('ended', () => {
|
|
|
|
if (this.playlist) {
|
|
|
|
this.zone.run(() => this.navigateToNextPlaylistVideo())
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
this.player.one('stopped', () => {
|
|
|
|
if (this.playlist) {
|
|
|
|
this.zone.run(() => this.navigateToNextPlaylistVideo())
|
|
|
|
}
|
|
|
|
})
|
2018-04-03 15:33:39 +00:00
|
|
|
})
|
2018-02-28 14:33:45 +00:00
|
|
|
|
|
|
|
this.setVideoDescriptionHTML()
|
|
|
|
this.setVideoLikesBarTooltipText()
|
|
|
|
|
|
|
|
this.setOpenGraphTags()
|
|
|
|
this.checkUserRating()
|
2017-04-04 19:37:03 +00:00
|
|
|
}
|
|
|
|
|
2018-11-14 14:01:28 +00:00
|
|
|
private setRating (nextRating: UserVideoRateType) {
|
2018-01-07 13:48:10 +00:00
|
|
|
let method
|
|
|
|
switch (nextRating) {
|
|
|
|
case 'like':
|
|
|
|
method = this.videoService.setVideoLike
|
|
|
|
break
|
|
|
|
case 'dislike':
|
|
|
|
method = this.videoService.setVideoDislike
|
|
|
|
break
|
|
|
|
case 'none':
|
|
|
|
method = this.videoService.unsetVideoLike
|
|
|
|
break
|
|
|
|
}
|
|
|
|
|
|
|
|
method.call(this.videoService, this.video.id)
|
2018-06-12 18:04:58 +00:00
|
|
|
.subscribe(
|
|
|
|
() => {
|
|
|
|
// Update the video like attribute
|
|
|
|
this.updateVideoRating(this.userRating, nextRating)
|
|
|
|
this.userRating = nextRating
|
|
|
|
},
|
|
|
|
|
2018-12-19 15:04:34 +00:00
|
|
|
(err: { message: string }) => this.notifier.error(err.message)
|
2018-06-12 18:04:58 +00:00
|
|
|
)
|
2018-01-07 13:48:10 +00:00
|
|
|
}
|
|
|
|
|
2018-11-14 14:01:28 +00:00
|
|
|
private updateVideoRating (oldRating: UserVideoRateType, newRating: UserVideoRateType) {
|
2017-06-16 12:32:15 +00:00
|
|
|
let likesToIncrement = 0
|
|
|
|
let dislikesToIncrement = 0
|
2017-03-08 20:35:43 +00:00
|
|
|
|
|
|
|
if (oldRating) {
|
2017-06-16 12:32:15 +00:00
|
|
|
if (oldRating === 'like') likesToIncrement--
|
|
|
|
if (oldRating === 'dislike') dislikesToIncrement--
|
2017-03-08 20:35:43 +00:00
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
if (newRating === 'like') likesToIncrement++
|
|
|
|
if (newRating === 'dislike') dislikesToIncrement++
|
2017-03-08 20:35:43 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
this.video.likes += likesToIncrement
|
|
|
|
this.video.dislikes += dislikesToIncrement
|
2018-02-28 08:49:40 +00:00
|
|
|
|
2018-02-28 14:33:45 +00:00
|
|
|
this.video.buildLikeAndDislikePercents()
|
2018-02-28 08:49:40 +00:00
|
|
|
this.setVideoLikesBarTooltipText()
|
2017-03-08 20:35:43 +00:00
|
|
|
}
|
|
|
|
|
2019-03-13 13:18:58 +00:00
|
|
|
private updatePlaylistIndex () {
|
|
|
|
if (this.playlistVideos.length === 0 || !this.video) return
|
|
|
|
|
|
|
|
for (const video of this.playlistVideos) {
|
|
|
|
if (video.id === this.video.id) {
|
|
|
|
this.currentPlaylistPosition = video.playlistElement.position
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Load more videos to find our video
|
|
|
|
this.onPlaylistVideosNearOfBottom()
|
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
private setOpenGraphTags () {
|
|
|
|
this.metaService.setTitle(this.video.name)
|
2017-03-10 09:33:36 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
this.metaService.setTag('og:type', 'video')
|
2016-11-04 16:37:44 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
this.metaService.setTag('og:title', this.video.name)
|
|
|
|
this.metaService.setTag('name', this.video.name)
|
2016-11-04 16:37:44 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
this.metaService.setTag('og:description', this.video.description)
|
|
|
|
this.metaService.setTag('description', this.video.description)
|
2016-11-04 16:37:44 +00:00
|
|
|
|
2017-07-12 10:19:39 +00:00
|
|
|
this.metaService.setTag('og:image', this.video.previewPath)
|
2016-11-04 16:37:44 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
this.metaService.setTag('og:duration', this.video.duration.toString())
|
2016-11-04 16:37:44 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
this.metaService.setTag('og:site_name', 'PeerTube')
|
2016-11-04 16:37:44 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
this.metaService.setTag('og:url', window.location.href)
|
|
|
|
this.metaService.setTag('url', window.location.href)
|
2016-11-04 16:37:44 +00:00
|
|
|
}
|
2017-11-30 08:21:11 +00:00
|
|
|
|
2017-12-19 13:01:34 +00:00
|
|
|
private isAutoplay () {
|
2018-06-14 09:25:49 +00:00
|
|
|
// 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
|
2017-12-19 13:01:34 +00:00
|
|
|
if (!this.user) return true
|
|
|
|
|
|
|
|
// Be sure the autoPlay is set to false
|
|
|
|
return this.user.autoPlayVideo !== false
|
|
|
|
}
|
2018-04-03 16:06:58 +00:00
|
|
|
|
|
|
|
private flushPlayer () {
|
|
|
|
// Remove player if it exists
|
|
|
|
if (this.player) {
|
|
|
|
this.player.dispose()
|
|
|
|
this.player = undefined
|
|
|
|
}
|
|
|
|
}
|
2019-03-13 13:18:58 +00:00
|
|
|
|
|
|
|
private navigateToNextPlaylistVideo () {
|
|
|
|
if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
|
|
|
|
const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1)
|
|
|
|
|
|
|
|
const start = next.playlistElement.startTimestamp
|
|
|
|
const stop = next.playlistElement.stopTimestamp
|
|
|
|
this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } })
|
|
|
|
}
|
|
|
|
}
|
2016-03-14 12:50:19 +00:00
|
|
|
}
|