import { finalize } from 'rxjs/operators'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
import { AuthService, Notifier } from '@app/core'
-import { Video, VideoService } from '../../shared-main'
+import { FindInBulkService } from '@app/shared/shared-search'
+import { Video } from '../../shared-main'
import { MiniatureDisplayOptions } from '../../shared-video-miniature'
import { CustomMarkupComponent } from './shared'
-import { FindInBulkService } from '@app/shared/shared-search'
/*
* Markup component that creates a video miniature only
@Component({
selector: 'my-video-miniature-markup',
templateUrl: 'video-miniature-markup.component.html',
- styleUrls: [ 'video-miniature-markup.component.scss' ]
+ styleUrls: [ 'video-miniature-markup.component.scss' ],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class VideoMiniatureMarkupComponent implements CustomMarkupComponent, OnInit {
@Input() uuid: string
@Input() onlyDisplayTitle: boolean
+ @Input() video: Video
@Output() loaded = new EventEmitter<boolean>()
- video: Video
-
displayOptions: MiniatureDisplayOptions = {
date: true,
views: true,
constructor (
private auth: AuthService,
private findInBulk: FindInBulkService,
- private notifier: Notifier
+ private notifier: Notifier,
+ private cd: ChangeDetectorRef
) { }
getUser () {
}
}
+ if (this.video) return
+
this.findInBulk.getVideo(this.uuid)
.pipe(finalize(() => this.loaded.emit(true)))
- .subscribe(
- video => this.video = video,
+ .subscribe({
+ next: video => {
+ this.video = video
+ this.cd.markForCheck()
+ },
- err => this.notifier.error($localize`Error in video miniature component: ${err.message}`)
- )
+ error: err => this.notifier.error($localize`Error in video miniature component: ${err.message}`)
+ })
}
}