import { Notifier, ServerService } from '@app/core'
import { forkJoin, Subscription } from 'rxjs'
import { Hotkey, HotkeysService } from 'angular2-hotkeys'
-import { UserVideoRateType, VideoCaption, VideoPlaylistPrivacy, VideoPrivacy, VideoState } from '../../../../../shared'
+import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared'
import { AuthService, ConfirmService } from '../../core'
import { RestExtractor, VideoBlacklistService } from '../../shared'
import { VideoDetails } from '../../shared/video/video-details.model'
import { VideoService } from '../../shared/video/video.service'
-import { VideoDownloadComponent } from './modal/video-download.component'
-import { VideoReportComponent } from './modal/video-report.component'
import { VideoShareComponent } from './modal/video-share.component'
-import { VideoBlacklistComponent } from './modal/video-blacklist.component'
import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { environment } from '../../../environments/environment'
} from '../../../assets/player/peertube-player-manager'
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'
+import { isWebRTCDisabled } from '../../../assets/player/utils'
+import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
@Component({
selector: 'my-video-watch',
export class VideoWatchComponent implements OnInit, OnDestroy {
private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
- @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
+ @ViewChild('videoWatchPlaylist') videoWatchPlaylist: VideoWatchPlaylistComponent
@ViewChild('videoShareModal') videoShareModal: VideoShareComponent
- @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
@ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
- @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
@ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
player: any
playerElement: HTMLVideoElement
+ theaterEnabled = false
userRating: UserVideoRateType = null
video: VideoDetails = null
descriptionLoading = false
playlist: VideoPlaylist = null
- playlistVideos: Video[] = []
- playlistPagination: ComponentPagination = {
- currentPage: 1,
- itemsPerPage: 30,
- totalItems: null
- }
- noPlaylistVideos = false
- currentPlaylistPosition = 1
completeDescriptionShown = false
completeVideoDescription: string
private currentTime: number
private paramsSub: Subscription
private queryParamsSub: Subscription
+ private configSub: Subscription
constructor (
private elementRef: ElementRef,
}
ngOnInit () {
- if (
- !!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === false ||
- peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
- ) {
- this.hasAlreadyAcceptedPrivacyConcern = true
- }
+ this.configSub = this.serverService.configLoaded
+ .subscribe(() => {
+ if (
+ isWebRTCDisabled() ||
+ this.serverService.getConfig().tracker.enabled === false ||
+ peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
+ ) {
+ this.hasAlreadyAcceptedPrivacyConcern = true
+ }
+ })
this.paramsSub = this.route.params.subscribe(routeParams => {
const videoId = routeParams[ 'videoId' ]
)
}
- showReportModal (event: Event) {
- event.preventDefault()
- this.videoReportModal.show()
- }
-
showSupportModal () {
this.videoSupportModal.show()
}
this.videoShareModal.show(this.currentTime)
}
- showDownloadModal (event: Event) {
- event.preventDefault()
- this.videoDownloadModal.show()
- }
-
- showBlacklistModal (event: Event) {
- event.preventDefault()
- this.videoBlacklistModal.show()
- }
-
- 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(
- () => {
- this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name }))
-
- this.video.blacklisted = false
- this.video.blacklistedReason = null
- },
-
- err => this.notifier.error(err.message)
- )
- }
-
isUserLoggedIn () {
return this.authService.isLoggedIn()
}
- isVideoUpdatable () {
- return this.video.isUpdatableBy(this.authService.getUser())
- }
-
- isVideoBlacklistable () {
- return this.video.isBlackistableBy(this.user)
- }
-
- isVideoUnblacklistable () {
- return this.video.isUnblacklistableBy(this.user)
- }
-
getVideoTags () {
if (!this.video || Array.isArray(this.video.tags) === false) return []
return this.video.tags
}
- isVideoRemovable () {
- return this.video.isRemovableBy(this.authService.getUser())
- }
-
- async removeVideo (event: Event) {
- event.preventDefault()
-
- const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
- if (res === false) return
-
- this.videoService.removeVideo(this.video.id)
- .subscribe(
- () => {
- this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }))
-
- // Go back to the video-list.
- this.redirectService.redirectToHomepage()
- },
-
- error => this.notifier.error(error.message)
- )
+ onVideoRemoved () {
+ this.redirectService.redirectToHomepage()
}
acceptedPrivacyConcern () {
return this.video && this.video.state.id === VideoState.TO_TRANSCODE
}
- isVideoDownloadable () {
- return this.video && this.video.downloadEnabled
- }
-
isVideoToImport () {
return this.video && this.video.state.id === VideoState.TO_IMPORT
}
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
this.playlist = playlist
const videoId = this.route.snapshot.queryParams['videoId']
- this.loadPlaylistElements(!videoId)
+ this.videoWatchPlaylist.loadPlaylistElements(playlist, !videoId)
})
}
- private loadPlaylistElements (redirectToFirst = false) {
- this.videoService.getPlaylistVideos(this.playlist.uuid, 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)
- }
- })
- }
-
private updateVideoDescription (description: string) {
this.video.description = description
this.setVideoDescriptionHTML()
this.remoteServerDown = false
this.currentTime = undefined
- this.updatePlaylistIndex()
+ this.videoWatchPlaylist.updatePlaylistIndex(video)
let startTime = urlOptions.startTime || (this.video.userHistory ? this.video.userHistory.currentTime : 0)
// If we are at the end of the video, reset the timer
}
}
- const mode: PlayerMode = urlOptions.playerMode === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent'
+ let mode: PlayerMode
+
+ if (urlOptions.playerMode) {
+ if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader'
+ else mode = 'webtorrent'
+ } else {
+ if (this.video.hasHlsPlaylist()) mode = 'p2p-media-loader'
+ else mode = 'webtorrent'
+ }
if (mode === 'p2p-media-loader') {
const hlsPlaylist = this.video.getHlsPlaylist()
this.zone.runOutsideAngular(async () => {
this.player = await PeertubePlayerManager.initialize(mode, options)
+ this.theaterEnabled = this.player.theaterEnabled
+
this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
this.player.on('timeupdate', () => {
this.player.one('ended', () => {
if (this.playlist) {
- this.zone.run(() => this.navigateToNextPlaylistVideo())
+ this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
}
})
this.player.one('stopped', () => {
if (this.playlist) {
- this.zone.run(() => this.navigateToNextPlaylistVideo())
+ this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
}
})
+
+ this.player.on('theaterChange', (_: any, enabled: boolean) => {
+ this.zone.run(() => this.theaterEnabled = enabled)
+ })
})
this.setVideoDescriptionHTML()
this.setVideoLikesBarTooltipText()
}
- 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()
- }
-
private setOpenGraphTags () {
this.metaService.setTitle(this.video.name)
this.player = undefined
}
}
-
- 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 } })
- }
- }
}