X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Babout%2Fabout-instance%2Fabout-instance.component.ts;h=fc52142158b2a80c8fba72f0923192246560e4c6;hb=8527f4b163c41d13820ff0ccf6427643547ab745;hp=0af1dca9cc9710675a9e124f0886acfe8b8e5174;hpb=4402b54dce0fe652ba71326f0dc74db287963260;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts index 0af1dca9c..fc5214215 100644 --- a/client/src/app/+about/about-instance/about-instance.component.ts +++ b/client/src/app/+about/about-instance/about-instance.component.ts @@ -1,97 +1,93 @@ -import { Component, OnInit, ViewChild } from '@angular/core' +import { ViewportScroller } from '@angular/common' +import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core' +import { ActivatedRoute } from '@angular/router' import { Notifier, ServerService } from '@app/core' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' -import { InstanceService } from '@app/shared/instance/instance.service' -import { MarkdownService } from '@app/shared/renderer' -import { forkJoin } from 'rxjs' -import { first } from 'rxjs/operators' -import { peertubeTranslate } from '@shared/models' +import { AboutHTML } from '@app/shared/shared-instance' +import { copyToClipboard } from '@root-helpers/utils' +import { HTMLServerConfig, ServerStats } from '@shared/models/server' +import { ResolverData } from './about-instance.resolver' +import { ContactAdminModalComponent } from './contact-admin-modal.component' @Component({ selector: 'my-about-instance', templateUrl: './about-instance.component.html', styleUrls: [ './about-instance.component.scss' ] }) -export class AboutInstanceComponent implements OnInit { +export class AboutInstanceComponent implements OnInit, AfterViewChecked { + @ViewChild('descriptionWrapper') descriptionWrapper: ElementRef @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent + aboutHTML: AboutHTML + descriptionElement: HTMLDivElement + + languages: string[] = [] + categories: string[] = [] shortDescription = '' - html = { - description: '', - terms: '', - codeOfConduct: '', - moderationInformation: '', - administrator: '' - } + initialized = false - maintenanceLifetime = '' - businessModel = '' + serverStats: ServerStats - languages: string[] = [] - categories: string[] = [] + private serverConfig: HTMLServerConfig + + private lastScrollHash: string constructor ( + private viewportScroller: ViewportScroller, + private route: ActivatedRoute, private notifier: Notifier, - private serverService: ServerService, - private instanceService: InstanceService, - private markdownService: MarkdownService, - private i18n: I18n + private serverService: ServerService ) {} get instanceName () { - return this.serverService.getConfig().instance.name + return this.serverConfig.instance.name } get isContactFormEnabled () { - return this.serverService.getConfig().email.enabled && this.serverService.getConfig().contactForm.enabled + return this.serverConfig.email.enabled && this.serverConfig.contactForm.enabled } get isNSFW () { - return this.serverService.getConfig().instance.isNSFW + return this.serverConfig.instance.isNSFW } ngOnInit () { - forkJoin([ - this.instanceService.getAbout(), - this.serverService.localeObservable.pipe(first()), - this.serverService.videoLanguagesLoaded.pipe(first()), - this.serverService.videoCategoriesLoaded.pipe(first()) - ]).subscribe( - async ([ res, translations ]) => { - this.shortDescription = res.instance.shortDescription - - this.maintenanceLifetime = res.instance.maintenanceLifetime - this.businessModel = res.instance.businessModel - - for (const key of [ 'description', 'terms', 'codeOfConduct', 'moderationInformation', 'administrator' ]) { - this.html[ key ] = await this.markdownService.textMarkdownToHTML(res.instance[ key ]) - } - - const languagesArray = this.serverService.getVideoLanguages() - const categoriesArray = this.serverService.getVideoCategories() - - this.languages = res.instance.languages - .map(l => { - const languageObj = languagesArray.find(la => la.id === l) - - return peertubeTranslate(languageObj.label, translations) - }) - - this.categories = res.instance.categories - .map(c => { - const categoryObj = categoriesArray.find(ca => ca.id === c) - - return peertubeTranslate(categoryObj.label, translations) - }) - }, - - () => this.notifier.error(this.i18n('Cannot get about information from server')) - ) + const { about, languages, categories, aboutHTML, descriptionElement, serverStats }: ResolverData = this.route.snapshot.data.instanceData + + this.serverStats = serverStats + + this.aboutHTML = aboutHTML + this.descriptionElement = descriptionElement + + this.languages = languages + this.categories = categories + + this.shortDescription = about.instance.shortDescription + + this.serverConfig = this.serverService.getHTMLConfig() + + this.route.data.subscribe(data => { + if (!data?.isContact) return + + const prefill = this.route.snapshot.queryParams + + this.contactAdminModal.show(prefill) + }) + + this.initialized = true + } + + ngAfterViewChecked () { + if (this.initialized && window.location.hash && window.location.hash !== this.lastScrollHash) { + this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', '')) + + this.lastScrollHash = window.location.hash + } } - openContactModal () { - return this.contactAdminModal.show() + onClickCopyLink (anchor: HTMLAnchorElement) { + const link = anchor.href + copyToClipboard(link) + this.notifier.success(link, $localize`Link copied`) } }