Add live info in watch page

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',

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,

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: [

client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html

@@ -35,7 +35,8 @@
 <!-- Hidden because we want to load the component -->
 <form [hidden]="!isInUpdateForm" novalidate [formGroup]="form">
   <my-video-edit
-    [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [schedulePublicationPossible]="false"
+    [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions"
+    [schedulePublicationPossible]="false" [waitTranscodingEnabled]="false"
     [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels" [liveVideo]="liveVideo"
     type="go-live"
   ></my-video-edit>

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()
       },
 

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',

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<any> {

client/src/app/+videos/+video-watch/video-watch.component.html

@@ -136,7 +136,7 @@
                   <ng-container *ngIf="isUserLoggedIn()">
                     <my-video-actions-dropdown
                       placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" [videoCaptions]="videoCaptions"
-                      (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
+                      [displayOptions]="videoActionsOptions" (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
                     ></my-video-actions-dropdown>
                   </ng-container>
                 </div>

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;

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

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,

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'

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)
   }

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'

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',

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 {

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 { }

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: [

client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html

@@ -18,4 +18,5 @@
   <my-video-download #videoDownloadModal></my-video-download>
   <my-video-report #videoReportModal [video]="video"></my-video-report>
   <my-video-block #videoBlockModal [video]="video" (videoBlocked)="onVideoBlocked()"></my-video-block>
+  <my-live-stream-information #liveStreamInformationModal *ngIf="displayOptions.liveInfo"></my-live-stream-information>
 </ng-container>

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 ],