diff options
Diffstat (limited to 'client/src/app/+videos/+video-watch')
3 files changed, 70 insertions, 4 deletions
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html index 0d1768aa9..13242a2bc 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.html +++ b/client/src/app/+videos/+video-watch/video-watch.component.html | |||
@@ -29,6 +29,14 @@ | |||
29 | This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}. | 29 | This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}. |
30 | </div> | 30 | </div> |
31 | 31 | ||
32 | <div i18n class="col-md-12 alert alert-info" *ngIf="isWaitingForLive()"> | ||
33 | This live has not started yet. | ||
34 | </div> | ||
35 | |||
36 | <div i18n class="col-md-12 alert alert-info" *ngIf="isLiveEnded()"> | ||
37 | This live is finished. | ||
38 | </div> | ||
39 | |||
32 | <div class="col-md-12 alert alert-danger" *ngIf="video?.blacklisted"> | 40 | <div class="col-md-12 alert alert-danger" *ngIf="video?.blacklisted"> |
33 | <div class="blocked-label" i18n>This video is blocked.</div> | 41 | <div class="blocked-label" i18n>This video is blocked.</div> |
34 | {{ video.blockedReason }} | 42 | {{ video.blockedReason }} |
@@ -113,7 +121,7 @@ | |||
113 | </div> | 121 | </div> |
114 | </div> | 122 | </div> |
115 | 123 | ||
116 | <ng-container *ngIf="!isUserLoggedIn()"> | 124 | <ng-container *ngIf="!isUserLoggedIn() && !isLive()"> |
117 | <button | 125 | <button |
118 | *ngIf="isVideoDownloadable()" class="action-button action-button-save" | 126 | *ngIf="isVideoDownloadable()" class="action-button action-button-save" |
119 | (click)="showDownloadModal()" (keydown.enter)="showDownloadModal()" | 127 | (click)="showDownloadModal()" (keydown.enter)="showDownloadModal()" |
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss index b2bd04cf3..4bf5ff808 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss | |||
@@ -50,6 +50,8 @@ $video-info-margin-left: 44px; | |||
50 | } | 50 | } |
51 | 51 | ||
52 | #video-wrapper { | 52 | #video-wrapper { |
53 | $video-height: 66vh; | ||
54 | |||
53 | background-color: #000; | 55 | background-color: #000; |
54 | display: flex; | 56 | display: flex; |
55 | justify-content: center; | 57 | justify-content: center; |
@@ -58,6 +60,7 @@ $video-info-margin-left: 44px; | |||
58 | display: flex; | 60 | display: flex; |
59 | justify-content: center; | 61 | justify-content: center; |
60 | flex-grow: 1; | 62 | flex-grow: 1; |
63 | height: $video-height; | ||
61 | } | 64 | } |
62 | 65 | ||
63 | .remote-server-down { | 66 | .remote-server-down { |
@@ -84,7 +87,7 @@ $video-info-margin-left: 44px; | |||
84 | ::ng-deep .video-js { | 87 | ::ng-deep .video-js { |
85 | width: 100%; | 88 | width: 100%; |
86 | max-width: getPlayerWidth(66vh); | 89 | max-width: getPlayerWidth(66vh); |
87 | height: 66vh; | 90 | height: $video-height; |
88 | 91 | ||
89 | // VideoJS create an inner video player | 92 | // VideoJS create an inner video player |
90 | video { | 93 | video { |
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 fde32dc74..e4edb42fb 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts | |||
@@ -4,7 +4,17 @@ import { catchError } from 'rxjs/operators' | |||
4 | import { PlatformLocation } from '@angular/common' | 4 | import { PlatformLocation } from '@angular/common' |
5 | import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' | 5 | import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' |
6 | import { ActivatedRoute, Router } from '@angular/router' | 6 | import { ActivatedRoute, Router } from '@angular/router' |
7 | import { AuthService, AuthUser, ConfirmService, MarkdownService, Notifier, RestExtractor, ServerService, UserService } from '@app/core' | 7 | import { |
8 | AuthService, | ||
9 | AuthUser, | ||
10 | ConfirmService, | ||
11 | MarkdownService, | ||
12 | Notifier, | ||
13 | PeerTubeSocket, | ||
14 | RestExtractor, | ||
15 | ServerService, | ||
16 | UserService | ||
17 | } from '@app/core' | ||
8 | import { HooksService } from '@app/core/plugins/hooks.service' | 18 | import { HooksService } from '@app/core/plugins/hooks.service' |
9 | import { RedirectService } from '@app/core/routing/redirect.service' | 19 | import { RedirectService } from '@app/core/routing/redirect.service' |
10 | import { isXPercentInViewport, scrollToTop } from '@app/helpers' | 20 | import { isXPercentInViewport, scrollToTop } from '@app/helpers' |
@@ -30,6 +40,8 @@ import { environment } from '../../../environments/environment' | |||
30 | import { VideoSupportComponent } from './modal/video-support.component' | 40 | import { VideoSupportComponent } from './modal/video-support.component' |
31 | import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' | 41 | import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' |
32 | 42 | ||
43 | type URLOptions = CustomizationOptions & { playerMode: PlayerMode } | ||
44 | |||
33 | @Component({ | 45 | @Component({ |
34 | selector: 'my-video-watch', | 46 | selector: 'my-video-watch', |
35 | templateUrl: './video-watch.component.html', | 47 | templateUrl: './video-watch.component.html', |
@@ -76,6 +88,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
76 | private paramsSub: Subscription | 88 | private paramsSub: Subscription |
77 | private queryParamsSub: Subscription | 89 | private queryParamsSub: Subscription |
78 | private configSub: Subscription | 90 | private configSub: Subscription |
91 | private liveVideosSub: Subscription | ||
79 | 92 | ||
80 | private serverConfig: ServerConfig | 93 | private serverConfig: ServerConfig |
81 | 94 | ||
@@ -99,6 +112,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
99 | private videoCaptionService: VideoCaptionService, | 112 | private videoCaptionService: VideoCaptionService, |
100 | private hotkeysService: HotkeysService, | 113 | private hotkeysService: HotkeysService, |
101 | private hooks: HooksService, | 114 | private hooks: HooksService, |
115 | private peertubeSocket: PeerTubeSocket, | ||
102 | private location: PlatformLocation, | 116 | private location: PlatformLocation, |
103 | @Inject(LOCALE_ID) private localeId: string | 117 | @Inject(LOCALE_ID) private localeId: string |
104 | ) { | 118 | ) { |
@@ -165,6 +179,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
165 | if (this.paramsSub) this.paramsSub.unsubscribe() | 179 | if (this.paramsSub) this.paramsSub.unsubscribe() |
166 | if (this.queryParamsSub) this.queryParamsSub.unsubscribe() | 180 | if (this.queryParamsSub) this.queryParamsSub.unsubscribe() |
167 | if (this.configSub) this.configSub.unsubscribe() | 181 | if (this.configSub) this.configSub.unsubscribe() |
182 | if (this.liveVideosSub) this.liveVideosSub.unsubscribe() | ||
168 | 183 | ||
169 | // Unbind hotkeys | 184 | // Unbind hotkeys |
170 | this.hotkeysService.remove(this.hotkeys) | 185 | this.hotkeysService.remove(this.hotkeys) |
@@ -306,6 +321,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
306 | return this.video && this.video.scheduledUpdate !== undefined | 321 | return this.video && this.video.scheduledUpdate !== undefined |
307 | } | 322 | } |
308 | 323 | ||
324 | isLive () { | ||
325 | return !!(this.video?.isLive) | ||
326 | } | ||
327 | |||
328 | isWaitingForLive () { | ||
329 | return this.video?.state.id === VideoState.WAITING_FOR_LIVE | ||
330 | } | ||
331 | |||
332 | isLiveEnded () { | ||
333 | return this.video?.state.id === VideoState.LIVE_ENDED | ||
334 | } | ||
335 | |||
309 | isVideoBlur (video: Video) { | 336 | isVideoBlur (video: Video) { |
310 | return video.isVideoNSFWForUser(this.user, this.serverConfig) | 337 | return video.isVideoNSFWForUser(this.user, this.serverConfig) |
311 | } | 338 | } |
@@ -470,8 +497,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
470 | private async onVideoFetched ( | 497 | private async onVideoFetched ( |
471 | video: VideoDetails, | 498 | video: VideoDetails, |
472 | videoCaptions: VideoCaption[], | 499 | videoCaptions: VideoCaption[], |
473 | urlOptions: CustomizationOptions & { playerMode: PlayerMode } | 500 | urlOptions: URLOptions |
474 | ) { | 501 | ) { |
502 | this.subscribeToLiveEventsIfNeeded(this.video, video) | ||
503 | |||
475 | this.video = video | 504 | this.video = video |
476 | this.videoCaptions = videoCaptions | 505 | this.videoCaptions = videoCaptions |
477 | 506 | ||
@@ -489,6 +518,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
489 | if (res === false) return this.location.back() | 518 | if (res === false) return this.location.back() |
490 | } | 519 | } |
491 | 520 | ||
521 | const videoState = this.video.state.id | ||
522 | if (videoState === VideoState.LIVE_ENDED || videoState === VideoState.WAITING_FOR_LIVE) return | ||
523 | |||
492 | // Flush old player if needed | 524 | // Flush old player if needed |
493 | this.flushPlayer() | 525 | this.flushPlayer() |
494 | 526 | ||
@@ -794,6 +826,29 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
794 | return !this.player.paused() | 826 | return !this.player.paused() |
795 | } | 827 | } |
796 | 828 | ||
829 | private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) { | ||
830 | if (!this.liveVideosSub) { | ||
831 | this.liveVideosSub = this.peertubeSocket.getLiveVideosObservable() | ||
832 | .subscribe(({ payload }) => { | ||
833 | if (payload.state !== VideoState.PUBLISHED || this.video.state.id !== VideoState.WAITING_FOR_LIVE) return | ||
834 | |||
835 | const videoUUID = this.video.uuid | ||
836 | |||
837 | // Reset to refetch the video | ||
838 | this.video = undefined | ||
839 | this.loadVideo(videoUUID) | ||
840 | }) | ||
841 | } | ||
842 | |||
843 | if (oldVideo && oldVideo.id !== newVideo.id) { | ||
844 | await this.peertubeSocket.unsubscribeLiveVideos(oldVideo.id) | ||
845 | } | ||
846 | |||
847 | if (!newVideo.isLive) return | ||
848 | |||
849 | await this.peertubeSocket.subscribeToLiveVideosSocket(newVideo.id) | ||
850 | } | ||
851 | |||
797 | private initHotkeys () { | 852 | private initHotkeys () { |
798 | this.hotkeys = [ | 853 | this.hotkeys = [ |
799 | // These hotkeys are managed by the player | 854 | // These hotkeys are managed by the player |