X-Git-Url: https://git.librecmc.org/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fvideo%2Fvideo-miniature.component.ts;h=48475033cc180c1e0c05d37f04867f7e77addf96;hb=73b3aa6429dfb2e31628fa09a479dce318289d7d;hp=2f951a1f1b3ecb25eeb7d1d84901b31922b9f4fc;hpb=be0f59b4eec3c2c4dcd151e2b174be39dff1568e;p=oweals%2Fpeertube.git diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts index 2f951a1f1..48475033c 100644 --- a/client/src/app/shared/video/video-miniature.component.ts +++ b/client/src/app/shared/video/video-miniature.component.ts @@ -1,10 +1,23 @@ -import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core' +import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output } from '@angular/core' import { User } from '../users' import { Video } from './video.model' import { ServerService } from '@app/core' -import { VideoPrivacy } from '../../../../../shared' +import { VideoPrivacy, VideoState } from '../../../../../shared' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component' +import { ScreenService } from '@app/shared/misc/screen.service' export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' +export type MiniatureDisplayOptions = { + date?: boolean + views?: boolean + by?: boolean + privacyLabel?: boolean + privacyText?: boolean + state?: boolean + blacklistInfo?: boolean + nsfw?: boolean +} @Component({ selector: 'my-video-miniature', @@ -15,31 +28,53 @@ export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' export class VideoMiniatureComponent implements OnInit { @Input() user: User @Input() video: Video + @Input() ownerDisplayType: OwnerDisplayType = 'account' + @Input() displayOptions: MiniatureDisplayOptions = { + date: true, + views: true, + by: true, + privacyLabel: false, + privacyText: false, + state: false, + blacklistInfo: false + } + @Input() displayAsRow = false + @Input() displayVideoActions = true + + @Output() videoBlacklisted = new EventEmitter() + @Output() videoUnblacklisted = new EventEmitter() + @Output() videoRemoved = new EventEmitter() + + videoActionsDisplayOptions: VideoActionsDisplayType = { + playlist: true, + download: false, + update: true, + blacklist: true, + delete: true, + report: true + } + showActions = false private ownerDisplayTypeChosen: 'account' | 'videoChannel' - constructor (private serverService: ServerService) { } + constructor ( + private screenService: ScreenService, + private serverService: ServerService, + private i18n: I18n, + @Inject(LOCALE_ID) private localeId: string + ) { } get isVideoBlur () { return this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig()) } ngOnInit () { - if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') { - this.ownerDisplayTypeChosen = this.ownerDisplayType - return - } + this.setUpBy() - // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12) - // -> Use the account name - if ( - this.video.channel.name === `${this.video.account.name}_channel` || - this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/) - ) { - this.ownerDisplayTypeChosen = 'account' - } else { - this.ownerDisplayTypeChosen = 'videoChannel' + // We rely on mouseenter to lazy load actions + if (this.screenService.isInTouchScreen()) { + this.loadActions() } } @@ -58,4 +93,63 @@ export class VideoMiniatureComponent implements OnInit { isPrivateVideo () { return this.video.privacy.id === VideoPrivacy.PRIVATE } + + getStateLabel (video: Video) { + if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) { + return this.i18n('Published') + } + + if (video.scheduledUpdate) { + const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId) + return this.i18n('Publication scheduled on ') + updateAt + } + + if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) { + return this.i18n('Waiting transcoding') + } + + if (video.state.id === VideoState.TO_TRANSCODE) { + return this.i18n('To transcode') + } + + if (video.state.id === VideoState.TO_IMPORT) { + return this.i18n('To import') + } + + return '' + } + + loadActions () { + if (this.displayVideoActions) this.showActions = true + } + + onVideoBlacklisted () { + this.videoBlacklisted.emit() + } + + onVideoUnblacklisted () { + this.videoUnblacklisted.emit() + } + + onVideoRemoved () { + this.videoRemoved.emit() + } + + private setUpBy () { + if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') { + this.ownerDisplayTypeChosen = this.ownerDisplayType + return + } + + // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12) + // -> Use the account name + if ( + this.video.channel.name === `${this.video.account.name}_channel` || + this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/) + ) { + this.ownerDisplayTypeChosen = 'account' + } else { + this.ownerDisplayTypeChosen = 'videoChannel' + } + } }