diff options
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.ts | 76 |
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' | |||
21 | import { isXPercentInViewport, scrollToTop } from '@app/helpers' | 21 | import { isXPercentInViewport, scrollToTop } from '@app/helpers' |
22 | import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main' | 22 | import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main' |
23 | import { VideoShareComponent } from '@app/shared/shared-share-modal' | 23 | import { VideoShareComponent } from '@app/shared/shared-share-modal' |
24 | import { SupportModalComponent } from '@app/shared/shared-support-modal' | ||
24 | import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' | 25 | import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' |
25 | import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature' | 26 | import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature' |
26 | import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' | 27 | import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' |
@@ -28,7 +29,12 @@ import { MetaService } from '@ngx-meta/core' | |||
28 | import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' | 29 | import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' |
29 | import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' | 30 | import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' |
30 | import { ServerConfig, ServerErrorCode, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models' | 31 | import { ServerConfig, ServerErrorCode, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models' |
31 | import { getStoredP2PEnabled, getStoredTheater } from '../../../assets/player/peertube-player-local-storage' | 32 | import { |
33 | cleanupVideoWatch, | ||
34 | getStoredP2PEnabled, | ||
35 | getStoredTheater, | ||
36 | getStoredVideoWatchHistory | ||
37 | } from '../../../assets/player/peertube-player-local-storage' | ||
32 | import { | 38 | import { |
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' |
40 | import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils' | 46 | import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils' |
41 | import { environment } from '../../../environments/environment' | 47 | import { environment } from '../../../environments/environment' |
42 | import { VideoSupportComponent } from './modal/video-support.component' | ||
43 | import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' | 48 | import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' |
44 | 49 | ||
45 | type URLOptions = CustomizationOptions & { playerMode: PlayerMode } | 50 | type 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() |