WIP: Display image icon and comment count on video miniature component

This commit is contained in:
Your Name 2024-09-27 12:40:43 -04:00
parent c8804274fe
commit 19a35e6060
4 changed files with 24 additions and 2 deletions

View File

@ -116,6 +116,8 @@ export class Video implements VideoServerModel {
automaticTags?: string[] automaticTags?: string[]
commentCount: number
static buildWatchUrl (video: Partial<Pick<Video, 'uuid' | 'shortUUID'>>) { static buildWatchUrl (video: Partial<Pick<Video, 'uuid' | 'shortUUID'>>) {
return buildVideoWatchPath({ shortUUID: video.shortUUID || video.uuid }) return buildVideoWatchPath({ shortUUID: video.shortUUID || video.uuid })
} }
@ -209,6 +211,8 @@ export class Video implements VideoServerModel {
this.aspectRatio = hash.aspectRatio this.aspectRatio = hash.aspectRatio
this.automaticTags = hash.automaticTags this.automaticTags = hash.automaticTags
this.commentCount = hash.commentCount
} }
isVideoNSFWForUser (user: User, serverConfig: HTMLServerConfig) { isVideoNSFWForUser (user: User, serverConfig: HTMLServerConfig) {

View File

@ -41,6 +41,11 @@
<my-video-views-counter *ngIf="displayOptions.views" [video]="video"></my-video-views-counter> <my-video-views-counter *ngIf="displayOptions.views" [video]="video"></my-video-views-counter>
</span> </span>
<span class="comment-count" *ngIf="displayOptions.commentCount">
<my-global-icon iconName="message-circle"></my-global-icon>
<span>{{ video.commentCount }}</span>
</span>
</span> </span>
<a *ngIf="displayOptions.by" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]"> <a *ngIf="displayOptions.by" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]">

View File

@ -109,6 +109,15 @@ my-actor-avatar {
.video-miniature-created-at-views { .video-miniature-created-at-views {
display: block; display: block;
.comment-count {
float: right;
text-align: right;
span {
margin-left: 5px;
}
}
} }
.video-actions { .video-actions {

View File

@ -25,6 +25,7 @@ import { NgClass, NgIf, NgFor } from '@angular/common'
import { Video } from '../shared-main/video/video.model' import { Video } from '../shared-main/video/video.model'
import { VideoService } from '../shared-main/video/video.service' import { VideoService } from '../shared-main/video/video.service'
import { VideoPlaylistService } from '../shared-video-playlist/video-playlist.service' import { VideoPlaylistService } from '../shared-video-playlist/video-playlist.service'
import { GlobalIconComponent } from '../shared-icons/global-icon.component'
export type MiniatureDisplayOptions = { export type MiniatureDisplayOptions = {
date?: boolean date?: boolean
@ -37,7 +38,8 @@ export type MiniatureDisplayOptions = {
nsfw?: boolean nsfw?: boolean
by?: boolean by?: boolean
forceChannelInBy?: boolean forceChannelInBy?: boolean,
commentCount?: boolean
} }
@Component({ @Component({
selector: 'my-video-miniature', selector: 'my-video-miniature',
@ -55,7 +57,8 @@ export type MiniatureDisplayOptions = {
VideoViewsCounterComponent, VideoViewsCounterComponent,
RouterLink, RouterLink,
NgFor, NgFor,
VideoActionsDropdownComponent VideoActionsDropdownComponent,
GlobalIconComponent
] ]
}) })
export class VideoMiniatureComponent implements OnInit { export class VideoMiniatureComponent implements OnInit {
@ -67,6 +70,7 @@ export class VideoMiniatureComponent implements OnInit {
date: true, date: true,
views: true, views: true,
by: true, by: true,
commentCount: true,
avatar: false, avatar: false,
privacyLabel: false, privacyLabel: false,
privacyText: false, privacyText: false,