aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-03-29 15:56:01 +0200
committerChocobozzz <chocobozzz@cpy.re>2021-03-31 09:05:51 +0200
commit100d9ce23bb7c5186132607e4c444f9cba5002a4 (patch)
tree2028938d90321c6d2454c4aea2e6f24e53393a4a /client/src/app
parent900f7820814b95b07ef0bcac04036a95abfbe060 (diff)
downloadPeerTube-100d9ce23bb7c5186132607e4c444f9cba5002a4.tar.gz
PeerTube-100d9ce23bb7c5186132607e4c444f9cba5002a4.tar.zst
PeerTube-100d9ce23bb7c5186132607e4c444f9cba5002a4.zip
Add support button in channel page
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+video-channels/video-channels.component.html7
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss4
-rw-r--r--client/src/app/+video-channels/video-channels.component.ts6
-rw-r--r--client/src/app/+video-channels/video-channels.module.ts4
-rw-r--r--client/src/app/+videos/+video-watch/modal/video-support.component.ts31
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.ts6
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.module.ts6
-rw-r--r--client/src/app/shared/shared-main/video-channel/video-channel.model.ts2
-rw-r--r--client/src/app/shared/shared-support-modal/index.ts3
-rw-r--r--client/src/app/shared/shared-support-modal/shared-support-modal.module.ts24
-rw-r--r--client/src/app/shared/shared-support-modal/support-modal.component.html (renamed from client/src/app/+videos/+video-watch/modal/video-support.component.html)4
-rw-r--r--client/src/app/shared/shared-support-modal/support-modal.component.scss (renamed from client/src/app/+videos/+video-watch/modal/video-support.component.scss)0
-rw-r--r--client/src/app/shared/shared-support-modal/support-modal.component.ts40
14 files changed, 97 insertions, 42 deletions
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 @@
7 </a> 7 </a>
8 8
9 <my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button> 9 <my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
10
11 <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
12 <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
13 <span class="icon-text" i18n>Support</span>
14 </button>
10 </ng-template> 15 </ng-template>
11 16
12 <ng-template #ownerTemplate> 17 <ng-template #ownerTemplate>
@@ -112,3 +117,5 @@
112 117
113 <router-outlet></router-outlet> 118 <router-outlet></router-outlet>
114</div> 119</div>
120
121<my-support-modal #supportModal [videoChannel]="videoChannel"></my-support-modal>
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 @@
36 @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize)); 36 @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
37} 37}
38 38
39.support-button {
40 @include button-with-icon(21px, 0, -1px);
41}
42
39.channel-description { 43.channel-description {
40 grid-column: 1; 44 grid-column: 1;
41} 45}
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'
5import { ActivatedRoute } from '@angular/router' 5import { ActivatedRoute } from '@angular/router'
6import { AuthService, MarkdownService, Notifier, RestExtractor, ScreenService } from '@app/core' 6import { AuthService, MarkdownService, Notifier, RestExtractor, ScreenService } from '@app/core'
7import { ListOverflowItem, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main' 7import { ListOverflowItem, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
8import { SupportModalComponent } from '@app/shared/shared-support-modal'
8import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' 9import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
9import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' 10import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
10 11
@@ -14,6 +15,7 @@ import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
14}) 15})
15export class VideoChannelsComponent implements OnInit, OnDestroy { 16export class VideoChannelsComponent implements OnInit, OnDestroy {
16 @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent 17 @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
18 @ViewChild('supportModal') supportModal: SupportModalComponent
17 19
18 videoChannel: VideoChannel 20 videoChannel: VideoChannel
19 hotkeys: Hotkey[] 21 hotkeys: Hotkey[]
@@ -101,6 +103,10 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
101 this.notifier.success($localize`Username copied`) 103 this.notifier.success($localize`Username copied`)
102 } 104 }
103 105
106 showSupportModal () {
107 this.supportModal.show()
108 }
109
104 private loadChannelVideosCount () { 110 private loadChannelVideosCount () {
105 this.videoService.getVideoChannelVideos({ 111 this.videoService.getVideoChannelVideos({
106 videoChannel: this.videoChannel, 112 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'
2import { SharedFormModule } from '@app/shared/shared-forms' 2import { SharedFormModule } from '@app/shared/shared-forms'
3import { SharedGlobalIconModule } from '@app/shared/shared-icons' 3import { SharedGlobalIconModule } from '@app/shared/shared-icons'
4import { SharedMainModule } from '@app/shared/shared-main' 4import { SharedMainModule } from '@app/shared/shared-main'
5import { SharedSupportModal } from '@app/shared/shared-support-modal'
5import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription' 6import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
6import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature' 7import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
7import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist' 8import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist'
@@ -19,7 +20,8 @@ import { VideoChannelsComponent } from './video-channels.component'
19 SharedVideoPlaylistModule, 20 SharedVideoPlaylistModule,
20 SharedVideoMiniatureModule, 21 SharedVideoMiniatureModule,
21 SharedUserSubscriptionModule, 22 SharedUserSubscriptionModule,
22 SharedGlobalIconModule 23 SharedGlobalIconModule,
24 SharedSupportModal
23 ], 25 ],
24 26
25 declarations: [ 27 declarations: [
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 @@
1import { Component, Input, ViewChild } from '@angular/core'
2import { MarkdownService } from '@app/core'
3import { VideoDetails } from '@app/shared/shared-main'
4import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
5
6@Component({
7 selector: 'my-video-support',
8 templateUrl: './video-support.component.html',
9 styleUrls: [ './video-support.component.scss' ]
10})
11export class VideoSupportComponent {
12 @Input() video: VideoDetails = null
13
14 @ViewChild('modal', { static: true }) modal: NgbModal
15
16 videoHTMLSupport = ''
17
18 constructor (
19 private markdownService: MarkdownService,
20 private modalService: NgbModal
21 ) { }
22
23 show () {
24 const modalRef = this.modalService.open(this.modal, { centered: true })
25
26 this.markdownService.enhancedMarkdownToHTML(this.video.support)
27 .then(r => this.videoHTMLSupport = r)
28
29 return modalRef
30 }
31}
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 @@
313</div> 313</div>
314 314
315<ng-container *ngIf="video !== null"> 315<ng-container *ngIf="video !== null">
316 <my-video-support #videoSupportModal [video]="video"></my-video-support> 316 <my-support-modal #supportModal [video]="video"></my-support-modal>
317 <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share> 317 <my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share>
318</ng-container> 318</ng-container>
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'
21import { isXPercentInViewport, scrollToTop } from '@app/helpers' 21import { isXPercentInViewport, scrollToTop } from '@app/helpers'
22import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main' 22import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
23import { VideoShareComponent } from '@app/shared/shared-share-modal' 23import { VideoShareComponent } from '@app/shared/shared-share-modal'
24import { SupportModalComponent } from '@app/shared/shared-support-modal'
24import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' 25import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
25import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature' 26import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature'
26import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' 27import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
@@ -39,7 +40,6 @@ import {
39} from '../../../assets/player/peertube-player-manager' 40} from '../../../assets/player/peertube-player-manager'
40import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils' 41import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils'
41import { environment } from '../../../environments/environment' 42import { environment } from '../../../environments/environment'
42import { VideoSupportComponent } from './modal/video-support.component'
43import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' 43import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
44 44
45type URLOptions = CustomizationOptions & { playerMode: PlayerMode } 45type URLOptions = CustomizationOptions & { playerMode: PlayerMode }
@@ -54,7 +54,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
54 54
55 @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent 55 @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
56 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent 56 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
57 @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent 57 @ViewChild('supportModal') supportModal: SupportModalComponent
58 @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent 58 @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
59 @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent 59 @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
60 60
@@ -282,7 +282,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
282 282
283 this.pausePlayer() 283 this.pausePlayer()
284 284
285 const modalRef = this.videoSupportModal.show() 285 const modalRef = this.supportModal.show()
286 286
287 modalRef.result.then(() => { 287 modalRef.result.then(() => {
288 if (isVideoPlaying) { 288 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'
4import { SharedMainModule } from '@app/shared/shared-main' 4import { SharedMainModule } from '@app/shared/shared-main'
5import { SharedModerationModule } from '@app/shared/shared-moderation' 5import { SharedModerationModule } from '@app/shared/shared-moderation'
6import { SharedShareModal } from '@app/shared/shared-share-modal' 6import { SharedShareModal } from '@app/shared/shared-share-modal'
7import { SharedSupportModal } from '@app/shared/shared-support-modal'
7import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription' 8import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription'
8import { SharedVideoModule } from '@app/shared/shared-video' 9import { SharedVideoModule } from '@app/shared/shared-video'
9import { SharedVideoCommentModule } from '@app/shared/shared-video-comment' 10import { SharedVideoCommentModule } from '@app/shared/shared-video-comment'
@@ -13,7 +14,6 @@ import { VideoCommentService } from '../../shared/shared-video-comment/video-com
13import { VideoCommentAddComponent } from './comment/video-comment-add.component' 14import { VideoCommentAddComponent } from './comment/video-comment-add.component'
14import { VideoCommentComponent } from './comment/video-comment.component' 15import { VideoCommentComponent } from './comment/video-comment.component'
15import { VideoCommentsComponent } from './comment/video-comments.component' 16import { VideoCommentsComponent } from './comment/video-comments.component'
16import { VideoSupportComponent } from './modal/video-support.component'
17import { RecommendationsModule } from './recommendations/recommendations.module' 17import { RecommendationsModule } from './recommendations/recommendations.module'
18import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive' 18import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive'
19import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' 19import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
@@ -34,14 +34,14 @@ import { VideoWatchComponent } from './video-watch.component'
34 SharedGlobalIconModule, 34 SharedGlobalIconModule,
35 SharedVideoCommentModule, 35 SharedVideoCommentModule,
36 SharedShareModal, 36 SharedShareModal,
37 SharedVideoModule 37 SharedVideoModule,
38 SharedSupportModal
38 ], 39 ],
39 40
40 declarations: [ 41 declarations: [
41 VideoWatchComponent, 42 VideoWatchComponent,
42 VideoWatchPlaylistComponent, 43 VideoWatchPlaylistComponent,
43 44
44 VideoSupportComponent,
45 VideoCommentsComponent, 45 VideoCommentsComponent,
46 VideoCommentAddComponent, 46 VideoCommentAddComponent,
47 VideoCommentComponent, 47 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 {
46 if (hash.ownerAccount) { 46 if (hash.ownerAccount) {
47 this.ownerAccount = hash.ownerAccount 47 this.ownerAccount = hash.ownerAccount
48 this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host) 48 this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
49 this.ownerAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.ownerAccount) 49 this.ownerAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.ownerAccount)
50 } 50 }
51 } 51 }
52 52
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 @@
1export * from './support-modal.component'
2
3export * 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 @@
1import { NgModule } from '@angular/core'
2import { SharedFormModule } from '../shared-forms'
3import { SharedGlobalIconModule } from '../shared-icons'
4import { SharedMainModule } from '../shared-main/shared-main.module'
5import { SupportModalComponent } from './support-modal.component'
6
7@NgModule({
8 imports: [
9 SharedMainModule,
10 SharedFormModule,
11 SharedGlobalIconModule
12 ],
13
14 declarations: [
15 SupportModalComponent
16 ],
17
18 exports: [
19 SupportModalComponent
20 ],
21
22 providers: [ ]
23})
24export class SharedSupportModal { }
diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.html b/client/src/app/shared/shared-support-modal/support-modal.component.html
index 935656d23..4a967987f 100644
--- a/client/src/app/+videos/+video-watch/modal/video-support.component.html
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.html
@@ -1,10 +1,10 @@
1<ng-template #modal let-hide="close"> 1<ng-template #modal let-hide="close">
2 <div class="modal-header"> 2 <div class="modal-header">
3 <h4 i18n class="modal-title">Support {{ video.account.displayName }}</h4> 3 <h4 i18n class="modal-title">Support {{ displayName }}</h4>
4 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> 4 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
5 </div> 5 </div>
6 6
7 <div class="modal-body" [innerHTML]="videoHTMLSupport"></div> 7 <div class="modal-body" [innerHTML]="htmlSupport"></div>
8 8
9 <div class="modal-footer inputs"> 9 <div class="modal-footer inputs">
10 <input 10 <input
diff --git a/client/src/app/+videos/+video-watch/modal/video-support.component.scss b/client/src/app/shared/shared-support-modal/support-modal.component.scss
index 184e09027..184e09027 100644
--- a/client/src/app/+videos/+video-watch/modal/video-support.component.scss
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.scss
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 @@
1import { Component, Input, ViewChild } from '@angular/core'
2import { MarkdownService } from '@app/core'
3import { VideoDetails } from '@app/shared/shared-main'
4import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
5import { VideoChannel } from '@shared/models'
6
7@Component({
8 selector: 'my-support-modal',
9 templateUrl: './support-modal.component.html',
10 styleUrls: [ './support-modal.component.scss' ]
11})
12export class SupportModalComponent {
13 @Input() video: VideoDetails = null
14 @Input() videoChannel: VideoChannel = null
15
16 @ViewChild('modal', { static: true }) modal: NgbModal
17
18 htmlSupport = ''
19 displayName = ''
20
21 constructor (
22 private markdownService: MarkdownService,
23 private modalService: NgbModal
24 ) { }
25
26 show () {
27 const modalRef = this.modalService.open(this.modal, { centered: true })
28
29 const support = this.video?.support || this.videoChannel.support
30
31 this.markdownService.enhancedMarkdownToHTML(support)
32 .then(r => this.htmlSupport = r)
33
34 this.displayName = this.video
35 ? this.video.channel.displayName
36 : this.videoChannel.displayName
37
38 return modalRef
39 }
40}