From f8c00564e7e66c7c9d65ea044a4c1485df0e4c7c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 5 Nov 2020 10:56:23 +0100 Subject: [PATCH] Add live info in watch page --- .../my-account-videos.component.ts | 2 +- .../src/app/+my-account/my-account.module.ts | 8 +++--- .../+video-edit/shared/video-edit.module.ts | 4 ++- .../video-go-live.component.html | 3 +- .../video-go-live.component.ts | 7 +++-- .../+video-edit/video-update.component.ts | 5 ++-- .../+video-edit/video-update.resolver.ts | 3 +- .../+video-watch/video-watch.component.html | 2 +- .../+video-watch/video-watch.component.scss | 6 ++-- .../+video-watch/video-watch.component.ts | 14 +++++++++- .../shared/shared-main/shared-main.module.ts | 3 +- .../src/app/shared/shared-main/video/index.ts | 1 - .../shared/shared-main/video/video.model.ts | 5 ++++ .../src/app/shared/shared-video-live/index.ts | 4 +++ .../live-stream-information.component.html | 0 .../live-stream-information.component.scss | 0 .../live-stream-information.component.ts | 3 +- .../live-video.service.ts | 2 +- .../shared-video-live.module.ts | 28 +++++++++++++++++++ .../shared-video-miniature.module.ts | 4 ++- .../video-actions-dropdown.component.html | 1 + .../video-actions-dropdown.component.ts | 22 ++++++++++++++- 22 files changed, 102 insertions(+), 25 deletions(-) create mode 100644 client/src/app/shared/shared-video-live/index.ts rename client/src/app/{+my-account/my-account-videos/modals => shared/shared-video-live}/live-stream-information.component.html (100%) rename client/src/app/{+my-account/my-account-videos/modals => shared/shared-video-live}/live-stream-information.component.scss (100%) rename client/src/app/{+my-account/my-account-videos/modals => shared/shared-video-live}/live-stream-information.component.ts (90%) rename client/src/app/shared/{shared-main/video => shared-video-live}/live-video.service.ts (94%) create mode 100644 client/src/app/shared/shared-video-live/shared-video-live.module.ts diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts index 7a3019239..84f022ad2 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts @@ -6,10 +6,10 @@ import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenServi import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' import { immutableAssign } from '@app/helpers' import { DropdownAction, Video, VideoService } from '@app/shared/shared-main' +import { LiveStreamInformationComponent } from '@app/shared/shared-video-live' import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' import { VideoSortField } from '@shared/models' import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component' -import { LiveStreamInformationComponent } from './modals/live-stream-information.component' @Component({ selector: 'my-account-videos', diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts index 6b8baff52..6d21fff72 100644 --- a/client/src/app/+my-account/my-account.module.ts +++ b/client/src/app/+my-account/my-account.module.ts @@ -6,6 +6,7 @@ import { NgModule } from '@angular/core' import { SharedAbuseListModule } from '@app/shared/shared-abuse-list' import { SharedFormModule } from '@app/shared/shared-forms' import { SharedGlobalIconModule } from '@app/shared/shared-icons' +import { SharedVideoLiveModule } from '@app/shared/shared-video-live' import { SharedMainModule } from '@app/shared/shared-main' import { SharedModerationModule } from '@app/shared/shared-moderation' import { SharedShareModal } from '@app/shared/shared-share-modal' @@ -33,9 +34,8 @@ import { MyAccountVideoPlaylistCreateComponent } from './my-account-video-playli import { MyAccountVideoPlaylistElementsComponent } from './my-account-video-playlists/my-account-video-playlist-elements.component' import { MyAccountVideoPlaylistUpdateComponent } from './my-account-video-playlists/my-account-video-playlist-update.component' import { MyAccountVideoPlaylistsComponent } from './my-account-video-playlists/my-account-video-playlists.component' -import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component' import { VideoChangeOwnershipComponent } from './my-account-videos/modals/video-change-ownership.component' -import { LiveStreamInformationComponent } from './my-account-videos/modals/live-stream-information.component' +import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component' import { MyAccountComponent } from './my-account.component' @NgModule({ @@ -56,7 +56,8 @@ import { MyAccountComponent } from './my-account.component' SharedUserInterfaceSettingsModule, SharedGlobalIconModule, SharedAbuseListModule, - SharedShareModal + SharedShareModal, + SharedVideoLiveModule ], declarations: [ @@ -69,7 +70,6 @@ import { MyAccountComponent } from './my-account.component' MyAccountVideosComponent, VideoChangeOwnershipComponent, - LiveStreamInformationComponent, MyAccountOwnershipComponent, MyAccountAcceptOwnershipComponent, diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.module.ts b/client/src/app/+videos/+video-edit/shared/video-edit.module.ts index 593114181..7a3854065 100644 --- a/client/src/app/+videos/+video-edit/shared/video-edit.module.ts +++ b/client/src/app/+videos/+video-edit/shared/video-edit.module.ts @@ -3,6 +3,7 @@ import { NgModule } from '@angular/core' import { SharedFormModule } from '@app/shared/shared-forms' import { SharedGlobalIconModule } from '@app/shared/shared-icons' import { SharedMainModule } from '@app/shared/shared-main' +import { SharedVideoLiveModule } from '@app/shared/shared-video-live' import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service' import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component' import { VideoEditComponent } from './video-edit.component' @@ -13,7 +14,8 @@ import { VideoEditComponent } from './video-edit.component' SharedMainModule, SharedFormModule, - SharedGlobalIconModule + SharedGlobalIconModule, + SharedVideoLiveModule ], declarations: [ diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html index 5657827a9..2ec825978 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html +++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html @@ -35,7 +35,8 @@
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts index 870a70d3d..d29b2da97 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts +++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts @@ -5,7 +5,8 @@ import { Router } from '@angular/router' import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@app/core' import { scrollToTop } from '@app/helpers' import { FormValidatorService } from '@app/shared/shared-forms' -import { LiveVideoService, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main' +import { VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main' +import { LiveVideoService } from '@app/shared/shared-video-live' import { LoadingBarService } from '@ngx-loading-bar/core' import { LiveVideo, LiveVideoCreate, LiveVideoUpdate, ServerErrorCode, VideoPrivacy } from '@shared/models' import { VideoSend } from './video-send' @@ -64,8 +65,6 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, CanCompon channelId: this.firstStepChannelId } - this.firstStepDone.emit(name) - // Go live in private mode, but correctly fill the update form with the first user choice const toPatch = Object.assign({}, video, { privacy: this.firstStepPrivacyId }) this.form.patchValue(toPatch) @@ -76,6 +75,8 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, CanCompon this.videoUUID = res.video.uuid this.isInUpdateForm = true + this.firstStepDone.emit(name) + this.fetchVideoLive() }, diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts index 7126ad05b..e37163ca9 100644 --- a/client/src/app/+videos/+video-edit/video-update.component.ts +++ b/client/src/app/+videos/+video-edit/video-update.component.ts @@ -1,13 +1,14 @@ +import { of } from 'rxjs' import { map, switchMap } from 'rxjs/operators' import { Component, HostListener, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { Notifier } from '@app/core' import { FormReactive, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms' -import { LiveVideoService, VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main' +import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main' +import { LiveVideoService } from '@app/shared/shared-video-live' import { LoadingBarService } from '@ngx-loading-bar/core' import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models' import { hydrateFormFromVideo } from './shared/video-edit-utils' -import { of } from 'rxjs' @Component({ selector: 'my-videos-update', diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts index 5388a64b0..276548b79 100644 --- a/client/src/app/+videos/+video-edit/video-update.resolver.ts +++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts @@ -2,7 +2,8 @@ import { forkJoin, of } from 'rxjs' import { map, switchMap } from 'rxjs/operators' import { Injectable } from '@angular/core' import { ActivatedRouteSnapshot, Resolve } from '@angular/router' -import { VideoCaptionService, VideoChannelService, VideoDetails, LiveVideoService, VideoService } from '@app/shared/shared-main' +import { VideoCaptionService, VideoChannelService, VideoDetails, VideoService } from '@app/shared/shared-main' +import { LiveVideoService } from '@app/shared/shared-video-live' @Injectable() export class VideoUpdateResolver implements Resolve { 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 74c82fbfd..daee4be2a 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.html +++ b/client/src/app/+videos/+video-watch/video-watch.component.html @@ -136,7 +136,7 @@ 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 712022141..e198a8bb0 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss @@ -27,14 +27,14 @@ $video-info-margin-left: 44px; flex-direction: column; justify-content: center; + $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); + #videojs-wrapper { width: 100%; - height: auto; + height: $height; } ::ng-deep .video-js { - $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); - height: $height; width: 100%; max-width: initial; 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 9a3439731..48623cae0 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts @@ -21,7 +21,7 @@ import { isXPercentInViewport, scrollToTop } from '@app/helpers' import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main' import { VideoShareComponent } from '@app/shared/shared-share-modal' import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' -import { VideoDownloadComponent } from '@app/shared/shared-video-miniature' +import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature' import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' import { MetaService } from '@ngx-meta/core' import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' @@ -82,6 +82,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy { tooltipSupport = '' tooltipSaveToPlaylist = '' + videoActionsOptions: VideoActionsDisplayType = { + playlist: false, + download: true, + update: true, + blacklist: true, + delete: true, + report: true, + duplicate: true, + mute: true, + liveInfo: true + } + private nextVideoUuid = '' private nextVideoTitle = '' private currentTime: number diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts index 3816cab19..be0630395 100644 --- a/client/src/app/shared/shared-main/shared-main.module.ts +++ b/client/src/app/shared/shared-main/shared-main.module.ts @@ -30,7 +30,7 @@ import { FeedComponent } from './feeds' import { LoaderComponent, SmallLoaderComponent } from './loaders' import { HelpComponent, ListOverflowComponent, TopMenuDropdownComponent } from './misc' import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users' -import { LiveVideoService, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video' +import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video' import { VideoCaptionService } from './video-caption' import { VideoChannelService } from './video-channel' @@ -152,7 +152,6 @@ import { VideoChannelService } from './video-channel' RedundancyService, VideoImportService, VideoOwnershipService, - LiveVideoService, VideoService, VideoCaptionService, diff --git a/client/src/app/shared/shared-main/video/index.ts b/client/src/app/shared/shared-main/video/index.ts index f69089517..3053df4ef 100644 --- a/client/src/app/shared/shared-main/video/index.ts +++ b/client/src/app/shared/shared-main/video/index.ts @@ -1,4 +1,3 @@ -export * from './live-video.service' export * from './redundancy.service' export * from './video-details.model' export * from './video-edit.model' diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts index e3a52af3d..92f5bc0c0 100644 --- a/client/src/app/shared/shared-main/video/video.model.ts +++ b/client/src/app/shared/shared-main/video/video.model.ts @@ -193,6 +193,11 @@ export class Video implements VideoServerModel { return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.UPDATE_ANY_VIDEO)) } + isLiveInfoAvailableBy (user: AuthUser) { + return this.isLive && + user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.GET_ANY_LIVE)) + } + canBeDuplicatedBy (user: AuthUser) { return user && this.isLocal === false && user.hasRight(UserRight.MANAGE_VIDEOS_REDUNDANCIES) } diff --git a/client/src/app/shared/shared-video-live/index.ts b/client/src/app/shared/shared-video-live/index.ts new file mode 100644 index 000000000..c4048e7c5 --- /dev/null +++ b/client/src/app/shared/shared-video-live/index.ts @@ -0,0 +1,4 @@ +export * from './live-video.service' +export * from './live-stream-information.component' + +export * from './shared-video-live.module' diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html similarity index 100% rename from client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html rename to client/src/app/shared/shared-video-live/live-stream-information.component.html diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss b/client/src/app/shared/shared-video-live/live-stream-information.component.scss similarity index 100% rename from client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss rename to client/src/app/shared/shared-video-live/live-stream-information.component.scss diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts b/client/src/app/shared/shared-video-live/live-stream-information.component.ts similarity index 90% rename from client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts rename to client/src/app/shared/shared-video-live/live-stream-information.component.ts index a5885a8e7..e6142eb2e 100644 --- a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts +++ b/client/src/app/shared/shared-video-live/live-stream-information.component.ts @@ -1,6 +1,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core' -import { LiveVideoService, Video } from '@app/shared/shared-main' +import { Video } from '@app/shared/shared-main' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { LiveVideoService } from './live-video.service' @Component({ selector: 'my-live-stream-information', diff --git a/client/src/app/shared/shared-main/video/live-video.service.ts b/client/src/app/shared/shared-video-live/live-video.service.ts similarity index 94% rename from client/src/app/shared/shared-main/video/live-video.service.ts rename to client/src/app/shared/shared-video-live/live-video.service.ts index 093d65e83..b02442eae 100644 --- a/client/src/app/shared/shared-main/video/live-video.service.ts +++ b/client/src/app/shared/shared-video-live/live-video.service.ts @@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http' import { Injectable } from '@angular/core' import { RestExtractor } from '@app/core' import { LiveVideo, LiveVideoCreate, LiveVideoUpdate } from '@shared/models' -import { environment } from '../../../../environments/environment' +import { environment } from '../../../environments/environment' @Injectable() export class LiveVideoService { diff --git a/client/src/app/shared/shared-video-live/shared-video-live.module.ts b/client/src/app/shared/shared-video-live/shared-video-live.module.ts new file mode 100644 index 000000000..c35c2caa3 --- /dev/null +++ b/client/src/app/shared/shared-video-live/shared-video-live.module.ts @@ -0,0 +1,28 @@ + +import { NgModule } from '@angular/core' +import { SharedFormModule } from '../shared-forms' +import { SharedGlobalIconModule } from '../shared-icons' +import { SharedMainModule } from '../shared-main/shared-main.module' +import { LiveStreamInformationComponent } from './live-stream-information.component' +import { LiveVideoService } from './live-video.service' + +@NgModule({ + imports: [ + SharedMainModule, + SharedFormModule, + SharedGlobalIconModule + ], + + declarations: [ + LiveStreamInformationComponent + ], + + exports: [ + LiveStreamInformationComponent + ], + + providers: [ + LiveVideoService + ] +}) +export class SharedVideoLiveModule { } diff --git a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts index 666144864..08c8da3dd 100644 --- a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts +++ b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts @@ -5,6 +5,7 @@ import { SharedGlobalIconModule } from '../shared-icons' import { SharedMainModule } from '../shared-main/shared-main.module' import { SharedModerationModule } from '../shared-moderation' import { SharedThumbnailModule } from '../shared-thumbnail' +import { SharedVideoLiveModule } from '../shared-video-live' import { SharedVideoPlaylistModule } from '../shared-video-playlist/shared-video-playlist.module' import { VideoActionsDropdownComponent } from './video-actions-dropdown.component' import { VideoDownloadComponent } from './video-download.component' @@ -18,7 +19,8 @@ import { VideosSelectionComponent } from './videos-selection.component' SharedModerationModule, SharedVideoPlaylistModule, SharedThumbnailModule, - SharedGlobalIconModule + SharedGlobalIconModule, + SharedVideoLiveModule ], declarations: [ diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html index 3c8271b65..00ee196ac 100644 --- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html +++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html @@ -18,4 +18,5 @@ + diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts index 8f4c129a5..18b4a2f3c 100644 --- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts +++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts @@ -13,6 +13,7 @@ import { VideoDetails, VideoService } from '../shared-main' +import { LiveStreamInformationComponent } from '../shared-video-live' import { VideoAddToPlaylistComponent } from '../shared-video-playlist' import { VideoDownloadComponent } from './video-download.component' @@ -25,6 +26,7 @@ export type VideoActionsDisplayType = { report?: boolean duplicate?: boolean mute?: boolean + liveInfo?: boolean } @Component({ @@ -39,6 +41,7 @@ export class VideoActionsDropdownComponent implements OnChanges { @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent @ViewChild('videoReportModal') videoReportModal: VideoReportComponent @ViewChild('videoBlockModal') videoBlockModal: VideoBlockComponent + @ViewChild('liveStreamInformationModal') liveStreamInformationModal: LiveStreamInformationComponent @Input() video: Video | VideoDetails @Input() videoCaptions: VideoCaption[] = [] @@ -51,7 +54,8 @@ export class VideoActionsDropdownComponent implements OnChanges { delete: true, report: true, duplicate: true, - mute: true + mute: true, + liveInfo: false } @Input() placement = 'left' @@ -127,6 +131,12 @@ export class VideoActionsDropdownComponent implements OnChanges { this.videoBlockModal.show() } + showLiveInfoModal (video: Video) { + this.modalOpened.emit() + + this.liveStreamInformationModal.show(video) + } + /* Actions checker */ isVideoUpdatable () { @@ -145,6 +155,10 @@ export class VideoActionsDropdownComponent implements OnChanges { return this.video.isUnblockableBy(this.user) } + isVideoLiveInfoAvailable () { + return this.video.isLiveInfoAvailableBy(this.user) + } + isVideoDownloadable () { return this.video && this.video.isLive !== true && @@ -260,6 +274,12 @@ export class VideoActionsDropdownComponent implements OnChanges { isDisplayed: () => this.displayOptions.download && this.isVideoDownloadable(), iconName: 'download' }, + { + label: $localize`Display live information`, + handler: ({ video }) => this.showLiveInfoModal(video), + isDisplayed: () => this.isVideoLiveInfoAvailable(), + iconName: 'live' + }, { label: $localize`Update`, linkBuilder: ({ video }) => [ '/videos/update', video.uuid ],