aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+videos/+video-watch/video-watch.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+videos/+video-watch/video-watch.component.ts')
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.ts76
1 files changed, 35 insertions, 41 deletions
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 7a98cab3b..366e9bb57 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -21,6 +21,7 @@ import { RedirectService } from '@app/core/routing/redirect.service'
21import { isXPercentInViewport, scrollToTop } from '@app/helpers' 21import { isXPercentInViewport, scrollToTop } from '@app/helpers'
22import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main' 22import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
23import { VideoShareComponent } from '@app/shared/shared-share-modal' 23import { VideoShareComponent } from '@app/shared/shared-share-modal'
24import { SupportModalComponent } from '@app/shared/shared-support-modal'
24import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' 25import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
25import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature' 26import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature'
26import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' 27import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
@@ -28,7 +29,12 @@ import { MetaService } from '@ngx-meta/core'
28import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' 29import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
29import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' 30import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
30import { ServerConfig, ServerErrorCode, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models' 31import { ServerConfig, ServerErrorCode, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
31import { getStoredP2PEnabled, getStoredTheater } from '../../../assets/player/peertube-player-local-storage' 32import {
33 cleanupVideoWatch,
34 getStoredP2PEnabled,
35 getStoredTheater,
36 getStoredVideoWatchHistory
37} from '../../../assets/player/peertube-player-local-storage'
32import { 38import {
33 CustomizationOptions, 39 CustomizationOptions,
34 P2PMediaLoaderOptions, 40 P2PMediaLoaderOptions,
@@ -39,7 +45,6 @@ import {
39} from '../../../assets/player/peertube-player-manager' 45} from '../../../assets/player/peertube-player-manager'
40import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils' 46import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils'
41import { environment } from '../../../environments/environment' 47import { environment } from '../../../environments/environment'
42import { VideoSupportComponent } from './modal/video-support.component'
43import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' 48import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
44 49
45type URLOptions = CustomizationOptions & { playerMode: PlayerMode } 50type URLOptions = CustomizationOptions & { playerMode: PlayerMode }
@@ -54,7 +59,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
54 59
55 @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent 60 @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
56 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent 61 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
57 @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent 62 @ViewChild('supportModal') supportModal: SupportModalComponent
58 @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent 63 @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
59 @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent 64 @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
60 65
@@ -195,6 +200,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
195 this.theaterEnabled = getStoredTheater() 200 this.theaterEnabled = getStoredTheater()
196 201
197 this.hooks.runAction('action:video-watch.init', 'video-watch') 202 this.hooks.runAction('action:video-watch.init', 'video-watch')
203
204 setTimeout(cleanupVideoWatch, 1500) // Run in timeout to ensure we're not blocking the UI
198 } 205 }
199 206
200 ngOnDestroy () { 207 ngOnDestroy () {
@@ -277,23 +284,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
277 } 284 }
278 285
279 showSupportModal () { 286 showSupportModal () {
280 // Check video was playing before opening support modal 287 this.supportModal.show()
281 const isVideoPlaying = this.isPlaying()
282
283 this.pausePlayer()
284
285 const modalRef = this.videoSupportModal.show()
286
287 modalRef.result.then(() => {
288 if (isVideoPlaying) {
289 this.resumePlayer()
290 }
291 })
292 } 288 }
293 289
294 showShareModal () { 290 showShareModal () {
295 this.pausePlayer()
296
297 this.videoShareModal.show(this.currentTime, this.videoWatchPlaylist.currentPlaylistPosition) 291 this.videoShareModal.show(this.currentTime, this.videoWatchPlaylist.currentPlaylistPosition)
298 } 292 }
299 293
@@ -301,6 +295,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
301 return this.authService.isLoggedIn() 295 return this.authService.isLoggedIn()
302 } 296 }
303 297
298 getVideoUrl () {
299 if (!this.video.url) {
300 return this.video.originInstanceUrl + VideoDetails.buildClientUrl(this.video.uuid)
301 }
302 return this.video.url
303 }
304
304 getVideoTags () { 305 getVideoTags () {
305 if (!this.video || Array.isArray(this.video.tags) === false) return [] 306 if (!this.video || Array.isArray(this.video.tags) === false) return []
306 307
@@ -316,10 +317,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
316 } 317 }
317 } 318 }
318 319
319 onModalOpened () {
320 this.pausePlayer()
321 }
322
323 onVideoRemoved () { 320 onVideoRemoved () {
324 this.redirectService.redirectToHomepage() 321 this.redirectService.redirectToHomepage()
325 } 322 }
@@ -396,6 +393,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
396 this.loadVideo(videoId) 393 this.loadVideo(videoId)
397 } 394 }
398 395
396 displayOtherVideosAsRow () {
397 // Use the same value as in the SASS file
398 return this.screenService.getWindowInnerWidth() <= 1100
399 }
400
399 private loadVideo (videoId: string) { 401 private loadVideo (videoId: string) {
400 // Video did not change 402 // Video did not change
401 if (this.video && this.video.uuid === videoId) return 403 if (this.video && this.video.uuid === videoId) return
@@ -570,7 +572,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
570 this.setOpenGraphTags() 572 this.setOpenGraphTags()
571 this.checkUserRating() 573 this.checkUserRating()
572 574
573 this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs }) 575 const hookOptions = {
576 videojs,
577 video: this.video,
578 playlist: this.playlist
579 }
580 this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', hookOptions)
574 } 581 }
575 582
576 private async buildPlayer (urlOptions: URLOptions) { 583 private async buildPlayer (urlOptions: URLOptions) {
@@ -768,9 +775,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
768 const getStartTime = () => { 775 const getStartTime = () => {
769 const byUrl = urlOptions.startTime !== undefined 776 const byUrl = urlOptions.startTime !== undefined
770 const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined) 777 const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined)
778 const byLocalStorage = getStoredVideoWatchHistory(video.uuid)
771 779
772 if (byUrl) return timeToInt(urlOptions.startTime) 780 if (byUrl) return timeToInt(urlOptions.startTime)
773 if (byHistory) return video.userHistory.currentTime 781 if (byHistory) return video.userHistory.currentTime
782 if (byLocalStorage) return byLocalStorage.duration
774 783
775 return 0 784 return 0
776 } 785 }
@@ -815,6 +824,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
815 ? this.videoService.getVideoViewUrl(video.uuid) 824 ? this.videoService.getVideoViewUrl(video.uuid)
816 : null, 825 : null,
817 embedUrl: video.embedUrl, 826 embedUrl: video.embedUrl,
827 embedTitle: video.name,
818 828
819 isLive: video.isLive, 829 isLive: video.isLive,
820 830
@@ -827,7 +837,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
827 837
828 serverUrl: environment.apiUrl, 838 serverUrl: environment.apiUrl,
829 839
830 videoCaptions: playerCaptions 840 videoCaptions: playerCaptions,
841
842 videoUUID: video.uuid
831 }, 843 },
832 844
833 webtorrent: { 845 webtorrent: {
@@ -867,24 +879,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
867 return { playerMode: mode, playerOptions: options } 879 return { playerMode: mode, playerOptions: options }
868 } 880 }
869 881
870 private pausePlayer () {
871 if (!this.player) return
872
873 this.player.pause()
874 }
875
876 private resumePlayer () {
877 if (!this.player) return
878
879 this.player.play()
880 }
881
882 private isPlaying () {
883 if (!this.player) return
884
885 return !this.player.paused()
886 }
887
888 private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) { 882 private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) {
889 if (!this.liveVideosSub) { 883 if (!this.liveVideosSub) {
890 this.liveVideosSub = this.buildLiveEventsSubscription() 884 this.liveVideosSub = this.buildLiveEventsSubscription()