From d846d99c6c81028bb7bd3cb20abd433cbf396a22 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 28 Oct 2020 10:49:20 +0100 Subject: Add modal to display live information --- .../modals/live-stream-information.component.html | 33 +++++++++++ .../modals/live-stream-information.component.scss | 10 ++++ .../modals/live-stream-information.component.ts | 40 +++++++++++++ .../modals/video-change-ownership.component.html | 33 +++++++++++ .../modals/video-change-ownership.component.scss | 10 ++++ .../modals/video-change-ownership.component.ts | 69 ++++++++++++++++++++++ .../my-account-videos.component.html | 9 +-- .../my-account-videos.component.ts | 38 ++++++++++-- .../video-change-ownership.component.html | 33 ----------- .../video-change-ownership.component.scss | 10 ---- .../video-change-ownership.component.ts | 69 ---------------------- client/src/app/+my-account/my-account.module.ts | 5 +- .../+videos/+video-watch/video-watch.component.ts | 2 +- .../shared/shared-icons/global-icon.component.ts | 1 + .../shared-moderation/video-block.component.html | 7 ++- .../shared-moderation/video-block.component.scss | 5 ++ .../video-actions-dropdown.component.ts | 7 ++- 17 files changed, 254 insertions(+), 127 deletions(-) create mode 100644 client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html create mode 100644 client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss create mode 100644 client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts create mode 100644 client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html create mode 100644 client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss create mode 100644 client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts delete mode 100644 client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html delete mode 100644 client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss delete mode 100644 client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts (limited to 'client/src/app') diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html new file mode 100644 index 000000000..5e2323b91 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.html @@ -0,0 +1,33 @@ + + + + + + + diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss new file mode 100644 index 000000000..a79fec179 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.scss @@ -0,0 +1,10 @@ +@import '_variables'; +@import '_mixins'; + +p-autocomplete { + display: block; +} + +.form-group { + margin: 20px 0; +} \ No newline at end of file diff --git a/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts new file mode 100644 index 000000000..a5885a8e7 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/live-stream-information.component.ts @@ -0,0 +1,40 @@ +import { Component, ElementRef, ViewChild } from '@angular/core' +import { LiveVideoService, Video } from '@app/shared/shared-main' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' + +@Component({ + selector: 'my-live-stream-information', + templateUrl: './live-stream-information.component.html', + styleUrls: [ './live-stream-information.component.scss' ] +}) +export class LiveStreamInformationComponent { + @ViewChild('modal', { static: true }) modal: ElementRef + + video: Video + rtmpUrl = '' + streamKey = '' + + constructor ( + private modalService: NgbModal, + private liveVideoService: LiveVideoService + ) { } + + show (video: Video) { + this.video = video + this.rtmpUrl = '' + this.streamKey = '' + + this.loadLiveInfo(video) + + this.modalService + .open(this.modal, { centered: true }) + } + + private loadLiveInfo (video: Video) { + this.liveVideoService.getVideoLive(video.id) + .subscribe(live => { + this.rtmpUrl = live.rtmpUrl + this.streamKey = live.streamKey + }) + } +} diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html new file mode 100644 index 000000000..c7c5a0b69 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html @@ -0,0 +1,33 @@ + + + + + + + diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss new file mode 100644 index 000000000..a79fec179 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss @@ -0,0 +1,10 @@ +@import '_variables'; +@import '_mixins'; + +p-autocomplete { + display: block; +} + +.form-group { + margin: 20px 0; +} \ No newline at end of file diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts new file mode 100644 index 000000000..84237dee1 --- /dev/null +++ b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts @@ -0,0 +1,69 @@ +import { Component, ElementRef, OnInit, ViewChild } from '@angular/core' +import { Notifier, UserService } from '@app/core' +import { OWNERSHIP_CHANGE_USERNAME_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators' +import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { Video, VideoOwnershipService } from '@app/shared/shared-main' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' + +@Component({ + selector: 'my-video-change-ownership', + templateUrl: './video-change-ownership.component.html', + styleUrls: [ './video-change-ownership.component.scss' ] +}) +export class VideoChangeOwnershipComponent extends FormReactive implements OnInit { + @ViewChild('modal', { static: true }) modal: ElementRef + + usernamePropositions: string[] + + error: string = null + + private video: Video | undefined = undefined + + constructor ( + protected formValidatorService: FormValidatorService, + private videoOwnershipService: VideoOwnershipService, + private notifier: Notifier, + private userService: UserService, + private modalService: NgbModal + ) { + super() + } + + ngOnInit () { + this.buildForm({ + username: OWNERSHIP_CHANGE_USERNAME_VALIDATOR + }) + this.usernamePropositions = [] + } + + show (video: Video) { + this.video = video + this.modalService + .open(this.modal, { centered: true }) + .result + .then(() => this.changeOwnership()) + .catch((_) => _) // Called when closing (cancel) the modal without validating, do nothing + } + + search (event: { query: string }) { + const query = event.query + this.userService.autocomplete(query) + .subscribe( + usernames => this.usernamePropositions = usernames, + + err => this.notifier.error(err.message) + ) + } + + changeOwnership () { + const username = this.form.value['username'] + + this.videoOwnershipService + .changeOwnership(this.video.id, username) + .subscribe( + () => this.notifier.success($localize`Ownership change request sent.`), + + err => this.notifier.error(err.message) + ) + } +} diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html index f2ed0ac99..aa5b284e7 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html @@ -34,18 +34,13 @@
- - - +
+ 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 46a02a41a..7a3019239 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 @@ -5,10 +5,11 @@ import { ActivatedRoute, Router } from '@angular/router' import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core' import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' import { immutableAssign } from '@app/helpers' -import { Video, VideoService } from '@app/shared/shared-main' +import { DropdownAction, Video, VideoService } from '@app/shared/shared-main' import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' import { VideoSortField } from '@shared/models' -import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component' +import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component' +import { LiveStreamInformationComponent } from './modals/live-stream-information.component' @Component({ selector: 'my-account-videos', @@ -18,6 +19,7 @@ import { VideoChangeOwnershipComponent } from './video-change-ownership/video-ch export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent + @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent titlePage: string selection: SelectionType = {} @@ -37,6 +39,8 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { } ownerDisplayType: OwnerDisplayType = 'videoChannel' + videoActions: DropdownAction<{ video: Video }>[] = [] + videos: Video[] = [] videosSearch: string videosSearchChanged = new Subject() @@ -56,6 +60,8 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { } ngOnInit () { + this.buildActions() + this.videosSearchChanged .pipe(debounceTime(500)) .subscribe(() => { @@ -138,12 +144,36 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { ) } - changeOwnership (event: Event, video: Video) { - event.preventDefault() + changeOwnership (video: Video) { this.videoChangeOwnershipModal.show(video) } + displayLiveInformation (video: Video) { + this.liveStreamInformationModal.show(video) + } + private removeVideoFromArray (id: number) { this.videos = this.videos.filter(v => v.id !== id) } + + private buildActions () { + this.videoActions = [ + { + label: $localize`Display live information`, + handler: ({ video }) => this.displayLiveInformation(video), + isDisplayed: ({ video }) => video.isLive, + iconName: 'live' + }, + { + label: $localize`Change ownership`, + handler: ({ video }) => this.changeOwnership(video), + iconName: 'ownership-change' + }, + { + label: $localize`Delete`, + handler: ({ video }) => this.deleteVideo(video), + iconName: 'delete' + } + ] + } } diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html deleted file mode 100644 index 9d809d2bf..000000000 --- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss deleted file mode 100644 index a79fec179..000000000 --- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -p-autocomplete { - display: block; -} - -.form-group { - margin: 20px 0; -} \ No newline at end of file diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts deleted file mode 100644 index 84237dee1..000000000 --- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { Component, ElementRef, OnInit, ViewChild } from '@angular/core' -import { Notifier, UserService } from '@app/core' -import { OWNERSHIP_CHANGE_USERNAME_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' -import { Video, VideoOwnershipService } from '@app/shared/shared-main' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' - -@Component({ - selector: 'my-video-change-ownership', - templateUrl: './video-change-ownership.component.html', - styleUrls: [ './video-change-ownership.component.scss' ] -}) -export class VideoChangeOwnershipComponent extends FormReactive implements OnInit { - @ViewChild('modal', { static: true }) modal: ElementRef - - usernamePropositions: string[] - - error: string = null - - private video: Video | undefined = undefined - - constructor ( - protected formValidatorService: FormValidatorService, - private videoOwnershipService: VideoOwnershipService, - private notifier: Notifier, - private userService: UserService, - private modalService: NgbModal - ) { - super() - } - - ngOnInit () { - this.buildForm({ - username: OWNERSHIP_CHANGE_USERNAME_VALIDATOR - }) - this.usernamePropositions = [] - } - - show (video: Video) { - this.video = video - this.modalService - .open(this.modal, { centered: true }) - .result - .then(() => this.changeOwnership()) - .catch((_) => _) // Called when closing (cancel) the modal without validating, do nothing - } - - search (event: { query: string }) { - const query = event.query - this.userService.autocomplete(query) - .subscribe( - usernames => this.usernamePropositions = usernames, - - err => this.notifier.error(err.message) - ) - } - - changeOwnership () { - const username = this.form.value['username'] - - this.videoOwnershipService - .changeOwnership(this.video.id, username) - .subscribe( - () => this.notifier.success($localize`Ownership change request sent.`), - - err => this.notifier.error(err.message) - ) - } -} diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts index 5f7ed4d2f..6b8baff52 100644 --- a/client/src/app/+my-account/my-account.module.ts +++ b/client/src/app/+my-account/my-account.module.ts @@ -34,7 +34,8 @@ import { MyAccountVideoPlaylistElementsComponent } from './my-account-video-play 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/video-change-ownership/video-change-ownership.component' +import { VideoChangeOwnershipComponent } from './my-account-videos/modals/video-change-ownership.component' +import { LiveStreamInformationComponent } from './my-account-videos/modals/live-stream-information.component' import { MyAccountComponent } from './my-account.component' @NgModule({ @@ -68,6 +69,8 @@ import { MyAccountComponent } from './my-account.component' MyAccountVideosComponent, VideoChangeOwnershipComponent, + LiveStreamInformationComponent, + MyAccountOwnershipComponent, MyAccountAcceptOwnershipComponent, MyAccountVideoImportsComponent, 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 e4edb42fb..9a3439731 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts @@ -226,7 +226,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } isVideoDownloadable () { - return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled + return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled && !this.video.isLive } loadCompleteDescription () { diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts index 99efcd599..ab71bc3e7 100644 --- a/client/src/app/shared/shared-icons/global-icon.component.ts +++ b/client/src/app/shared/shared-icons/global-icon.component.ts @@ -66,6 +66,7 @@ const icons = { 'cross': require('!!raw-loader?!../../../assets/images/feather/x.svg').default, 'tick': require('!!raw-loader?!../../../assets/images/feather/check.svg').default, 'columns': require('!!raw-loader?!../../../assets/images/feather/columns.svg').default, + 'live': require('!!raw-loader?!../../../assets/images/feather/live.svg').default, 'repeat': require('!!raw-loader?!../../../assets/images/feather/repeat.svg').default, 'message-circle': require('!!raw-loader?!../../../assets/images/feather/message-circle.svg').default } diff --git a/client/src/app/shared/shared-moderation/video-block.component.html b/client/src/app/shared/shared-moderation/video-block.component.html index 5e73d66c5..e982c4d77 100644 --- a/client/src/app/shared/shared-moderation/video-block.component.html +++ b/client/src/app/shared/shared-moderation/video-block.component.html @@ -1,6 +1,7 @@ @@ -28,6 +29,10 @@ + + Blocking this live will automatically terminate the live stream. + +