import { from } from 'rxjs'
import { finalize, map, switchMap, tap } from 'rxjs/operators'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
import { MarkdownService, Notifier, UserService } from '@app/core'
import { FindInBulkService } from '@app/shared/shared-search'
-import { Video, VideoSortField } from '@shared/models/videos'
-import { VideoChannel, VideoService } from '../../shared-main'
+import { VideoSortField } from '@shared/models'
+import { Video, VideoChannel, VideoService } from '../../shared-main'
import { CustomMarkupComponent } from './shared'
/*
@Component({
selector: 'my-channel-miniature-markup',
templateUrl: 'channel-miniature-markup.component.html',
- styleUrls: [ 'channel-miniature-markup.component.scss' ]
+ styleUrls: [ 'channel-miniature-markup.component.scss' ],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChannelMiniatureMarkupComponent implements CustomMarkupComponent, OnInit {
@Input() name: string
private findInBulk: FindInBulkService,
private videoService: VideoService,
private userService: UserService,
- private notifier: Notifier
+ private notifier: Notifier,
+ private cd: ChangeDetectorRef
) { }
ngOnInit () {
this.findInBulk.getChannel(this.name)
.pipe(
- tap(channel => this.channel = channel),
- switchMap(() => from(this.markdown.textMarkdownToHTML(this.channel.description))),
- tap(html => this.descriptionHTML = html),
+ tap(channel => {
+ this.channel = channel
+ }),
+ switchMap(() => from(this.markdown.textMarkdownToHTML({
+ markdown: this.channel.description,
+ withEmoji: true,
+ withHtml: true
+ }))),
+ tap(html => {
+ this.descriptionHTML = html
+ }),
switchMap(() => this.loadVideosObservable()),
finalize(() => this.loaded.emit(true))
- ).subscribe(
- ({ total, data }) => {
+ ).subscribe({
+ next: ({ total, data }) => {
this.totalVideos = total
this.video = data[0]
+
+ this.cd.markForCheck()
},
- err => this.notifier.error('Error in channel miniature component: ' + err.message)
- )
+ error: err => this.notifier.error($localize`Error in channel miniature component: ${err.message}`)
+ })
}
getVideoChannelLink () {