From 100d9ce23bb7c5186132607e4c444f9cba5002a4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 29 Mar 2021 15:56:01 +0200 Subject: Add support button in channel page --- .../+video-channels/video-channels.component.html | 7 ++++ .../+video-channels/video-channels.component.scss | 4 +++ .../+video-channels/video-channels.component.ts | 6 ++++ .../app/+video-channels/video-channels.module.ts | 4 ++- .../modal/video-support.component.html | 15 -------- .../modal/video-support.component.scss | 3 -- .../+video-watch/modal/video-support.component.ts | 31 ----------------- .../+video-watch/video-watch.component.html | 2 +- .../+videos/+video-watch/video-watch.component.ts | 6 ++-- .../app/+videos/+video-watch/video-watch.module.ts | 6 ++-- .../video-channel/video-channel.model.ts | 2 +- .../src/app/shared/shared-support-modal/index.ts | 3 ++ .../shared-support-modal.module.ts | 24 +++++++++++++ .../support-modal.component.html | 15 ++++++++ .../support-modal.component.scss | 3 ++ .../support-modal.component.ts | 40 ++++++++++++++++++++++ 16 files changed, 113 insertions(+), 58 deletions(-) delete mode 100644 client/src/app/+videos/+video-watch/modal/video-support.component.html delete mode 100644 client/src/app/+videos/+video-watch/modal/video-support.component.scss delete mode 100644 client/src/app/+videos/+video-watch/modal/video-support.component.ts create mode 100644 client/src/app/shared/shared-support-modal/index.ts create mode 100644 client/src/app/shared/shared-support-modal/shared-support-modal.module.ts create mode 100644 client/src/app/shared/shared-support-modal/support-modal.component.html create mode 100644 client/src/app/shared/shared-support-modal/support-modal.component.scss create mode 100644 client/src/app/shared/shared-support-modal/support-modal.component.ts (limited to 'client/src/app') diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html index 9f9c1f2ca..b9ac13f09 100644 --- a/client/src/app/+video-channels/video-channels.component.html +++ b/client/src/app/+video-channels/video-channels.component.html @@ -7,6 +7,11 @@ + + @@ -112,3 +117,5 @@ + + diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index fb71844bd..ec8f67a7e 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -36,6 +36,10 @@ @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize)); } +.support-button { + @include button-with-icon(21px, 0, -1px); +} + .channel-description { grid-column: 1; } diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts index 4fcc42103..a8ca3d6ff 100644 --- a/client/src/app/+video-channels/video-channels.component.ts +++ b/client/src/app/+video-channels/video-channels.component.ts @@ -5,6 +5,7 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute } from '@angular/router' import { AuthService, MarkdownService, Notifier, RestExtractor, ScreenService } from '@app/core' import { ListOverflowItem, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main' +import { SupportModalComponent } from '@app/shared/shared-support-modal' import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' @@ -14,6 +15,7 @@ import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' }) export class VideoChannelsComponent implements OnInit, OnDestroy { @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent + @ViewChild('supportModal') supportModal: SupportModalComponent videoChannel: VideoChannel hotkeys: Hotkey[] @@ -101,6 +103,10 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { this.notifier.success($localize`Username copied`) } + showSupportModal () { + this.supportModal.show() + } + private loadChannelVideosCount () { this.videoService.getVideoChannelVideos({ videoChannel: this.videoChannel, diff --git a/client/src/app/+video-channels/video-channels.module.ts b/client/src/app/+video-channels/video-channels.module.ts index 1b58a1d92..408f86225 100644 --- a/client/src/app/+video-channels/video-channels.module.ts +++ b/client/src/app/+video-channels/video-channels.module.ts @@ -2,6 +2,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 { SharedSupportModal } from '@app/shared/shared-support-modal' import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription' import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature' import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist' @@ -19,7 +20,8 @@ import { VideoChannelsComponent } from './video-channels.component' SharedVideoPlaylistModule, SharedVideoMiniatureModule, SharedUserSubscriptionModule, - SharedGlobalIconModule + SharedGlobalIconModule, + SharedSupportModal ], declarations: [ diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.html b/client/src/app/+videos/+video-watch/modal/video-support.component.html deleted file mode 100644 index 935656d23..000000000 --- a/client/src/app/+videos/+video-watch/modal/video-support.component.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.scss b/client/src/app/+videos/+video-watch/modal/video-support.component.scss deleted file mode 100644 index 184e09027..000000000 --- a/client/src/app/+videos/+video-watch/modal/video-support.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.action-button-cancel { - margin-right: 0 !important; -} diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.ts b/client/src/app/+videos/+video-watch/modal/video-support.component.ts deleted file mode 100644 index bd5290a72..000000000 --- a/client/src/app/+videos/+video-watch/modal/video-support.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component, Input, ViewChild } from '@angular/core' -import { MarkdownService } from '@app/core' -import { VideoDetails } from '@app/shared/shared-main' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' - -@Component({ - selector: 'my-video-support', - templateUrl: './video-support.component.html', - styleUrls: [ './video-support.component.scss' ] -}) -export class VideoSupportComponent { - @Input() video: VideoDetails = null - - @ViewChild('modal', { static: true }) modal: NgbModal - - videoHTMLSupport = '' - - constructor ( - private markdownService: MarkdownService, - private modalService: NgbModal - ) { } - - show () { - const modalRef = this.modalService.open(this.modal, { centered: true }) - - this.markdownService.enhancedMarkdownToHTML(this.video.support) - .then(r => this.videoHTMLSupport = r) - - return modalRef - } -} 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 b17f898ce..07f7ab7e3 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.html +++ b/client/src/app/+videos/+video-watch/video-watch.component.html @@ -313,6 +313,6 @@ - + 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 ce115dfab..571d1e99a 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' 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 { SupportModalComponent } from '@app/shared/shared-support-modal' import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature' import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' @@ -39,7 +40,6 @@ import { } from '../../../assets/player/peertube-player-manager' import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils' import { environment } from '../../../environments/environment' -import { VideoSupportComponent } from './modal/video-support.component' import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' type URLOptions = CustomizationOptions & { playerMode: PlayerMode } @@ -54,7 +54,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent @ViewChild('videoShareModal') videoShareModal: VideoShareComponent - @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent + @ViewChild('supportModal') supportModal: SupportModalComponent @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent @@ -282,7 +282,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.pausePlayer() - const modalRef = this.videoSupportModal.show() + const modalRef = this.supportModal.show() modalRef.result.then(() => { if (isVideoPlaying) { diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts index fbda9b9c4..d65cf8d68 100644 --- a/client/src/app/+videos/+video-watch/video-watch.module.ts +++ b/client/src/app/+videos/+video-watch/video-watch.module.ts @@ -4,6 +4,7 @@ import { SharedGlobalIconModule } from '@app/shared/shared-icons' import { SharedMainModule } from '@app/shared/shared-main' import { SharedModerationModule } from '@app/shared/shared-moderation' import { SharedShareModal } from '@app/shared/shared-share-modal' +import { SharedSupportModal } from '@app/shared/shared-support-modal' import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription' import { SharedVideoModule } from '@app/shared/shared-video' import { SharedVideoCommentModule } from '@app/shared/shared-video-comment' @@ -13,7 +14,6 @@ import { VideoCommentService } from '../../shared/shared-video-comment/video-com import { VideoCommentAddComponent } from './comment/video-comment-add.component' import { VideoCommentComponent } from './comment/video-comment.component' import { VideoCommentsComponent } from './comment/video-comments.component' -import { VideoSupportComponent } from './modal/video-support.component' import { RecommendationsModule } from './recommendations/recommendations.module' import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive' import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' @@ -34,14 +34,14 @@ import { VideoWatchComponent } from './video-watch.component' SharedGlobalIconModule, SharedVideoCommentModule, SharedShareModal, - SharedVideoModule + SharedVideoModule, + SharedSupportModal ], declarations: [ VideoWatchComponent, VideoWatchPlaylistComponent, - VideoSupportComponent, VideoCommentsComponent, VideoCommentAddComponent, VideoCommentComponent, diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts index c6a63fe6c..bd187a873 100644 --- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts +++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts @@ -46,7 +46,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel { if (hash.ownerAccount) { this.ownerAccount = hash.ownerAccount this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host) - this.ownerAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.ownerAccount) + this.ownerAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.ownerAccount) } } diff --git a/client/src/app/shared/shared-support-modal/index.ts b/client/src/app/shared/shared-support-modal/index.ts new file mode 100644 index 000000000..f41bb4bc2 --- /dev/null +++ b/client/src/app/shared/shared-support-modal/index.ts @@ -0,0 +1,3 @@ +export * from './support-modal.component' + +export * from './shared-support-modal.module' diff --git a/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts b/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts new file mode 100644 index 000000000..1101d5535 --- /dev/null +++ b/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core' +import { SharedFormModule } from '../shared-forms' +import { SharedGlobalIconModule } from '../shared-icons' +import { SharedMainModule } from '../shared-main/shared-main.module' +import { SupportModalComponent } from './support-modal.component' + +@NgModule({ + imports: [ + SharedMainModule, + SharedFormModule, + SharedGlobalIconModule + ], + + declarations: [ + SupportModalComponent + ], + + exports: [ + SupportModalComponent + ], + + providers: [ ] +}) +export class SharedSupportModal { } diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.html b/client/src/app/shared/shared-support-modal/support-modal.component.html new file mode 100644 index 000000000..4a967987f --- /dev/null +++ b/client/src/app/shared/shared-support-modal/support-modal.component.html @@ -0,0 +1,15 @@ + + + + + + + diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.scss b/client/src/app/shared/shared-support-modal/support-modal.component.scss new file mode 100644 index 000000000..184e09027 --- /dev/null +++ b/client/src/app/shared/shared-support-modal/support-modal.component.scss @@ -0,0 +1,3 @@ +.action-button-cancel { + margin-right: 0 !important; +} diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.ts b/client/src/app/shared/shared-support-modal/support-modal.component.ts new file mode 100644 index 000000000..ae603c7a8 --- /dev/null +++ b/client/src/app/shared/shared-support-modal/support-modal.component.ts @@ -0,0 +1,40 @@ +import { Component, Input, ViewChild } from '@angular/core' +import { MarkdownService } from '@app/core' +import { VideoDetails } from '@app/shared/shared-main' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { VideoChannel } from '@shared/models' + +@Component({ + selector: 'my-support-modal', + templateUrl: './support-modal.component.html', + styleUrls: [ './support-modal.component.scss' ] +}) +export class SupportModalComponent { + @Input() video: VideoDetails = null + @Input() videoChannel: VideoChannel = null + + @ViewChild('modal', { static: true }) modal: NgbModal + + htmlSupport = '' + displayName = '' + + constructor ( + private markdownService: MarkdownService, + private modalService: NgbModal + ) { } + + show () { + const modalRef = this.modalService.open(this.modal, { centered: true }) + + const support = this.video?.support || this.videoChannel.support + + this.markdownService.enhancedMarkdownToHTML(support) + .then(r => this.htmlSupport = r) + + this.displayName = this.video + ? this.video.channel.displayName + : this.videoChannel.displayName + + return modalRef + } +} -- cgit v1.2.3