</a>
<my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
+
+ <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
+ <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
+ <span class="icon-text" i18n>Support</span>
+ </button>
</ng-template>
<ng-template #ownerTemplate>
<router-outlet></router-outlet>
</div>
+
+<my-support-modal #supportModal [videoChannel]="videoChannel"></my-support-modal>
@include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
}
+.support-button {
+ @include button-with-icon(21px, 0, -1px);
+}
+
.channel-description {
grid-column: 1;
}
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'
})
export class VideoChannelsComponent implements OnInit, OnDestroy {
@ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
+ @ViewChild('supportModal') supportModal: SupportModalComponent
videoChannel: VideoChannel
hotkeys: Hotkey[]
this.notifier.success($localize`Username copied`)
}
+ showSupportModal () {
+ this.supportModal.show()
+ }
+
private loadChannelVideosCount () {
this.videoService.getVideoChannelVideos({
videoChannel: this.videoChannel,
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'
SharedVideoPlaylistModule,
SharedVideoMiniatureModule,
SharedUserSubscriptionModule,
- SharedGlobalIconModule
+ SharedGlobalIconModule,
+ SharedSupportModal
],
declarations: [
+++ /dev/null
-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
- }
-}
</div>
<ng-container *ngIf="video !== null">
- <my-video-support #videoSupportModal [video]="video"></my-video-support>
+ <my-support-modal #supportModal [video]="video"></my-support-modal>
<my-video-share #videoShareModal [video]="video" [videoCaptions]="videoCaptions" [playlist]="playlist"></my-video-share>
</ng-container>
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'
} 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 }
@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
this.pausePlayer()
- const modalRef = this.videoSupportModal.show()
+ const modalRef = this.supportModal.show()
modalRef.result.then(() => {
if (isVideoPlaying) {
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'
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'
SharedGlobalIconModule,
SharedVideoCommentModule,
SharedShareModal,
- SharedVideoModule
+ SharedVideoModule,
+ SharedSupportModal
],
declarations: [
VideoWatchComponent,
VideoWatchPlaylistComponent,
- VideoSupportComponent,
VideoCommentsComponent,
VideoCommentAddComponent,
VideoCommentComponent,
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)
}
}
--- /dev/null
+export * from './support-modal.component'
+
+export * from './shared-support-modal.module'
--- /dev/null
+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 { }
<ng-template #modal let-hide="close">
<div class="modal-header">
- <h4 i18n class="modal-title">Support {{ video.account.displayName }}</h4>
+ <h4 i18n class="modal-title">Support {{ displayName }}</h4>
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
</div>
- <div class="modal-body" [innerHTML]="videoHTMLSupport"></div>
+ <div class="modal-body" [innerHTML]="htmlSupport"></div>
<div class="modal-footer inputs">
<input
--- /dev/null
+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
+ }
+}
@import './primeng-custom';
@import './ng-select.scss';
+@import './classes.scss';
+
[hidden] {
display: none !important;
}
}
}
}
-
-// Utils
-
-.peertube-button {
- @include peertube-button;
-}
-
-.peertube-button-link {
- @include peertube-button-link;
-}
-
-.orange-button {
- @include orange-button;
-}
-
-.orange-button-inverted {
- @include orange-button-inverted;
-}
--- /dev/null
+@import '_variables';
+@import '_mixins';
+
+.peertube-button {
+ @include peertube-button;
+}
+
+.peertube-button-link {
+ @include peertube-button-link;
+}
+
+.orange-button {
+ @include orange-button;
+}
+
+.orange-button-inverted {
+ @include orange-button-inverted;
+}
+
+.grey-button {
+ @include grey-button;
+}
projects / github / Chocobozzz / PeerTube.git / commitdiff
