Optimize video views component

Chocobozzz · Nov 25, 2024 · 4551314 · 4551314
1 parent a253a80
commit 4551314
Show file tree

Hide file tree

Showing 20 changed files with 71 additions and 63 deletions.
diff --git a/client/src/app/+my-account/my-account-import-export/my-account-import.component.html b/client/src/app/+my-account/my-account-import-export/my-account-import.component.html
@@ -54,7 +54,7 @@ <h2 i18n>IMPORT</h2>
       } @else {
         <my-upload-progress
           [isUploading]="uploadingArchive" [uploadPercents]="uploadPercents" [error]="error" [uploaded]="archiveUploadFinished"
-          [enableRetryAfterError]="enableRetryAfterError" (cancel)="cancelUpload()" (retry)="retryUpload()"
+          [enableRetryAfterError]="enableRetryAfterError" (cancelUpload)="cancelUpload()" (retry)="retryUpload()"
         >
         </my-upload-progress>
 

diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
@@ -50,7 +50,7 @@
 
 <my-upload-progress
   [isUploading]="isUploadingVideo" [uploadPercents]="videoUploadPercents" [error]="error" [uploaded]="videoUploaded"
-  [enableRetryAfterError]="enableRetryAfterError" (cancel)="cancelUpload()" (retry)="retryUpload()"
+  [enableRetryAfterError]="enableRetryAfterError" (cancelUpload)="cancelUpload()" (retry)="retryUpload()"
 >
 </my-upload-progress>
 

diff --git a/client/src/app/+videos/+video-edit/video-update.component.html b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -3,7 +3,7 @@ <h1 class="title-page" i18n>Update {{ videoDetails?.name }}</h1>
 
   <my-upload-progress
     [isUploading]="isReplacingVideoFile" [uploadPercents]="videoUploadPercents" [error]="uploadError" [uploaded]="updateDone"
-    [enableRetryAfterError]="false" (cancel)="cancelUpload()"
+    [enableRetryAfterError]="false" (cancelUpload)="cancelUpload()"
   >
   </my-upload-progress>
 

diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
@@ -61,7 +61,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
   @Input() textValue?: string
 
   @Output() commentCreated = new EventEmitter<VideoComment>()
-  @Output() cancel = new EventEmitter()
+  @Output() cancelEdition = new EventEmitter()
 
   @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
   @ViewChild('emojiModal', { static: true }) emojiModal: NgbModal
@@ -186,7 +186,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
   }
 
   cancelCommentReply () {
-    this.cancel.emit(null)
+    this.cancelEdition.emit(null)
     this.form.value['text'] = this.textareaElement.nativeElement.value = ''
   }
 

diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -69,7 +69,7 @@
         [parentComments]="newParentComments"
         [focusOnInit]="true"
         (commentCreated)="onCommentReplyCreated($event)"
-        (cancel)="onResetReply()"
+        (cancelEdition)="onResetReply()"
         [textValue]="redraftValue"
       ></my-video-comment-add>
 

diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -43,7 +43,7 @@
           <ng-template #publishedTemplate>
             <ng-container i18n>Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle></ng-container>
             •
-            <my-video-views-counter [video]="video"></my-video-views-counter>
+            <my-video-views-counter [isLive]="video.isLive" [viewers]="video.viewers" [views]="video.views"></my-video-views-counter>
           </ng-template>
 
           <div class="d-block d-md-none"> <!-- only shown on medium devices, has its counterpart for larger viewports below -->

diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -50,7 +50,7 @@ import { forkJoin, map, Observable, of, Subscription, switchMap } from 'rxjs'
 import {
   HLSOptions,
   PeerTubePlayer,
-  PeerTubePlayerContructorOptions,
+  PeerTubePlayerConstructorOptions,
   PeerTubePlayerLoadOptions,
   PlayerMode,
   videojs
@@ -662,7 +662,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   private buildPeerTubePlayerConstructorOptions (options: {
     urlOptions: URLOptions
-  }): PeerTubePlayerContructorOptions {
+  }): PeerTubePlayerConstructorOptions {
     const { urlOptions } = options
 
     return {

diff --git a/client/src/app/shared/shared-main/common/link.component.html b/client/src/app/shared/shared-main/common/link.component.html
@@ -4,10 +4,12 @@
   <ng-content></ng-content>
 </ng-template>
 
-<a *ngIf="!href" [routerLink]="internalLink" [attr.title]="title" [ariaLabel]="ariaLabel" [tabindex]="tabindex" [ngClass]="builtClasses">
-  <ng-template *ngTemplateOutlet="content"></ng-template>
-</a>
-
-<a *ngIf="href" [href]="href" [target]="target" [attr.title]="title" [ariaLabel]="ariaLabel" [tabindex]="tabindex" [ngClass]="builtClasses">
-  <ng-template *ngTemplateOutlet="content"></ng-template>
-</a>
+@if (href) {
+  <a [href]="href" [target]="target" [attr.title]="title" [ariaLabel]="ariaLabel" [tabindex]="tabindex" [ngClass]="builtClasses">
+    <ng-template *ngTemplateOutlet="content"></ng-template>
+  </a>
+} @else {
+  <a [routerLink]="internalLink" [attr.title]="title" [ariaLabel]="ariaLabel" [tabindex]="tabindex" [ngClass]="builtClasses">
+    <ng-template *ngTemplateOutlet="content"></ng-template>
+  </a>
+}
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
@@ -1,23 +1,23 @@
 import { AuthUser } from '@app/core'
 import { User } from '@app/core/users/user.model'
-import { durationToString, formatICU, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
+import { durationToString, getAbsoluteAPIUrl, getAbsoluteEmbedUrl } from '@app/helpers'
 import { Actor } from '@app/shared/shared-main/account/actor.model'
 import { buildVideoWatchPath, getAllFiles, peertubeTranslate } from '@peertube/peertube-core-utils'
 import {
   ActorImage,
   HTMLServerConfig,
   UserRight,
-  Video as VideoServerModel,
   VideoConstant,
   VideoFile,
   VideoPrivacy,
   VideoPrivacyType,
   VideoScheduleUpdate,
+  Video as VideoServerModel,
+  VideoSource,
   VideoState,
   VideoStateType,
   VideoStreamingPlaylist,
-  VideoStreamingPlaylistType,
-  VideoSource
+  VideoStreamingPlaylistType
 } from '@peertube/peertube-models'
 
 export class Video implements VideoServerModel {
@@ -326,12 +326,4 @@ export class Video implements VideoServerModel {
       this.isLocal === true &&
       (this.account.name === user.username || user.hasRight(UserRight.SEE_ALL_VIDEOS))
   }
-
-  getExactNumberOfViews () {
-    if (this.isLive) {
-      return formatICU($localize`{viewers, plural, =0 {No viewers} =1 {1 viewer} other {{viewers} viewers}}`, { viewers: this.viewers })
-    }
-
-    return formatICU($localize`{views, plural, =0 {No view} =1 {1 view} other {{views} views}}`, { views: this.views })
-  }
 }
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
@@ -1,10 +1,12 @@
-<a [ariaLabel]="ariaLabel" *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail" tabindex="-1">
-  <ng-container *ngTemplateOutlet="aContent"></ng-container>
-</a>
-
-<a [ariaLabel]="ariaLabel" *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail" tabindex="-1">
-  <ng-container *ngTemplateOutlet="aContent"></ng-container>
-</a>
+@if (videoHref) {
+  <a [ariaLabel]="ariaLabel" [href]="videoHref" [target]="videoTarget" class="video-thumbnail" tabindex="-1">
+    <ng-container *ngTemplateOutlet="aContent"></ng-container>
+  </a>
+} @else {
+  <a [ariaLabel]="ariaLabel" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail" tabindex="-1">
+    <ng-container *ngTemplateOutlet="aContent"></ng-container>
+  </a>
+}
 
 <ng-template #aContent>
   <img alt="" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
@@ -29,7 +31,7 @@
   @if (video.isLive) {
     <div  class="live-overlay" [ngClass]="{ 'live-streaming': isLiveStreaming(), 'ended-live': isEndedLive() }">
       @if (isLiveStreaming()) {
-        <ng-container i18n >LIVE</ng-container>
+        <ng-container i18n>LIVE</ng-container>
       } @else if (isEndedLive()) {
         <ng-container i18n>LIVE ENDED</ng-container>
       } @else {

diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -49,10 +49,10 @@
       <div class="date-and-views">
         <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle>
 
-        <span class="views" [title]="video.getExactNumberOfViews()">
+        <span class="views">
           <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
 
-          <my-video-views-counter *ngIf="displayOptions.views" [video]="video"></my-video-views-counter>
+          <my-video-views-counter *ngIf="displayOptions.views" [isLive]="video.isLive" [viewers]="video.viewers" [views]="video.views"></my-video-views-counter>
         </span>
       </div>
 

diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -28,8 +28,8 @@
         <span class="date-and-views">
           <my-date-toggle [date]="playlistElement.video.publishedAt"></my-date-toggle>
 
-          <span class="views" [title]="playlistElement.video.getExactNumberOfViews()">
-            • <my-video-views-counter [video]="playlistElement.video"></my-video-views-counter>
+          <span class="views">
+            • <my-video-views-counter [isLive]="playlistElement.video.isLive" [viewers]="playlistElement.video.viewers" [views]="playlistElement.video.views"></my-video-views-counter>
           </span>
         </span>
 

diff --git a/client/src/app/shared/shared-video/video-views-counter.component.html b/client/src/app/shared/shared-video/video-views-counter.component.html
@@ -1,9 +1,11 @@
-<span [title]="video.getExactNumberOfViews()">
-  <ng-container i18n *ngIf="!video.isLive">
-    {video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}
-  </ng-container>
-
-  <ng-container i18n *ngIf="video.isLive">
-    {video.viewers, plural, =1 {1 viewer} other {{{ video.viewers | myNumberFormatter }} viewers}}
-  </ng-container>
+<span [title]="getExactNumberOfViews()">
+  @if (isLive) {
+    <ng-container i18n>
+      {viewers, plural, =1 {1 viewer} other {{{ viewers | myNumberFormatter }} viewers}}
+    </ng-container>
+  } @else {
+    <ng-container i18n>
+      {views, plural, =1 {1 view} other {{{ views | myNumberFormatter }} views}}
+    </ng-container>
+  }
 </span>
diff --git a/client/src/app/shared/shared-video/video-views-counter.component.ts b/client/src/app/shared/shared-video/video-views-counter.component.ts
@@ -1,15 +1,25 @@
-import { Component, Input } from '@angular/core'
+import { booleanAttribute, ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { formatICU } from '@app/helpers'
 import { NumberFormatterPipe } from '../shared-main/common/number-formatter.pipe'
-import { NgIf } from '@angular/common'
-import { Video } from '../shared-main/video/video.model'
 
 @Component({
   selector: 'my-video-views-counter',
   styleUrls: [ './video-views-counter.component.scss' ],
   templateUrl: './video-views-counter.component.html',
   standalone: true,
-  imports: [ NgIf, NumberFormatterPipe ]
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ NumberFormatterPipe ]
 })
 export class VideoViewsCounterComponent {
-  @Input() video: Video
+  @Input({ required: true, transform: booleanAttribute }) isLive: boolean
+  @Input({ required: true }) viewers: number
+  @Input({ required: true }) views: number
+
+  getExactNumberOfViews () {
+    if (this.isLive) {
+      return formatICU($localize`{viewers, plural, =0 {No viewers} =1 {1 viewer} other {{viewers} viewers}}`, { viewers: this.viewers })
+    }
+
+    return formatICU($localize`{views, plural, =0 {No view} =1 {1 view} other {{views} views}}`, { views: this.views })
+  }
 }
diff --git a/client/src/app/shared/standalone-upload/upload-progress.component.html b/client/src/app/shared/standalone-upload/upload-progress.component.html
@@ -8,7 +8,7 @@
 
   <input
     *ngIf="uploaded === false"
-    type="button" class="peertube-button secondary-button ms-1" i18n-value="Cancel ongoing upload" value="Cancel" (click)="cancel.emit()"
+    type="button" class="peertube-button secondary-button ms-1" i18n-value="Cancel ongoing upload" value="Cancel" (click)="cancelUpload.emit()"
   />
 </div>
 
@@ -20,7 +20,7 @@
   </my-progress-bar>
 
   <input type="button" class="peertube-button secondary-button ms-1" i18n-value="Retry failed upload" value="Retry" (click)="retry.emit()" />
-  <input type="button" class="peertube-button secondary-button ms-1" i18n-value="Cancel ongoing upload" value="Cancel" (click)="cancel.emit()" />
+  <input type="button" class="peertube-button secondary-button ms-1" i18n-value="Cancel ongoing upload" value="Cancel" (click)="cancelUpload.emit()" />
 </div>
 
 <my-alert *ngIf="error && !enableRetryAfterError" type="danger">

diff --git a/client/src/app/shared/standalone-upload/upload-progress.component.ts b/client/src/app/shared/standalone-upload/upload-progress.component.ts
@@ -17,7 +17,7 @@ export class UploadProgressComponent {
   @Input() uploaded: boolean
   @Input() enableRetryAfterError: boolean
 
-  @Output() cancel = new EventEmitter()
+  @Output() cancelUpload = new EventEmitter()
   @Output() retry = new EventEmitter()
 
   getUploadingLabel () {

diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
@@ -41,7 +41,7 @@ import { buildVideoLink, decorateVideoLink, isDefaultLocale, pick } from '@peert
 import { saveAverageBandwidth } from './peertube-player-local-storage'
 import { ControlBarOptionsBuilder, HLSOptionsBuilder, WebVideoOptionsBuilder } from './shared/player-options-builder'
 import { TranslationsManager } from './translations-manager'
-import { PeerTubePlayerContructorOptions, PeerTubePlayerLoadOptions, PlayerNetworkInfo, VideoJSPluginOptions } from './types'
+import { PeerTubePlayerConstructorOptions, PeerTubePlayerLoadOptions, PlayerNetworkInfo, VideoJSPluginOptions } from './types'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
@@ -69,7 +69,7 @@ export class PeerTubePlayer {
 
   private currentLoadOptions: PeerTubePlayerLoadOptions
 
-  constructor (private options: PeerTubePlayerContructorOptions) {
+  constructor (private options: PeerTubePlayerConstructorOptions) {
     this.pluginsManager = options.pluginsManager
   }
 

diff --git a/client/src/assets/player/shared/player-options-builder/control-bar-options-builder.ts b/client/src/assets/player/shared/player-options-builder/control-bar-options-builder.ts
@@ -1,13 +1,13 @@
 import {
   NextPreviousVideoButtonOptions,
   PeerTubeLinkButtonOptions,
-  PeerTubePlayerContructorOptions,
+  PeerTubePlayerConstructorOptions,
   PeerTubePlayerLoadOptions,
   TheaterButtonOptions
 } from '../../types'
 
 type ControlBarOptionsBuilderConstructorOptions =
-  Pick<PeerTubePlayerContructorOptions, 'peertubeLink' | 'instanceName' | 'theaterButton'> &
+  Pick<PeerTubePlayerConstructorOptions, 'peertubeLink' | 'instanceName' | 'theaterButton'> &
   {
     videoShortUUID: () => string
     p2pEnabled: () => boolean

diff --git a/client/src/assets/player/shared/player-options-builder/hls-options-builder.ts b/client/src/assets/player/shared/player-options-builder/hls-options-builder.ts
@@ -10,7 +10,7 @@ import {
   HLSLoaderClass,
   HLSPluginOptions,
   P2PMediaLoaderPluginOptions,
-  PeerTubePlayerContructorOptions,
+  PeerTubePlayerConstructorOptions,
   PeerTubePlayerLoadOptions
 } from '../../types'
 import { getRtcConfig, isSameOrigin } from '../common'
@@ -22,7 +22,7 @@ import debug from 'debug'
 const debugLogger = debug('peertube:player:hls')
 
 type ConstructorOptions =
-  Pick<PeerTubePlayerContructorOptions, 'pluginsManager' | 'serverUrl' | 'authorizationHeader' | 'stunServers'> &
+  Pick<PeerTubePlayerConstructorOptions, 'pluginsManager' | 'serverUrl' | 'authorizationHeader' | 'stunServers'> &
   Pick<PeerTubePlayerLoadOptions, 'videoPassword' | 'requiresUserAuth' | 'videoFileToken' | 'requiresPassword' |
   'isLive' | 'liveOptions' | 'p2pEnabled' | 'hls'>
 

diff --git a/client/src/assets/player/types/peertube-player-options.ts b/client/src/assets/player/types/peertube-player-options.ts
@@ -5,7 +5,7 @@ import { PlaylistPluginOptions, VideoJSCaption, VideoJSStoryboard } from './peer
 
 export type PlayerMode = 'web-video' | 'p2p-media-loader'
 
-export type PeerTubePlayerContructorOptions = {
+export type PeerTubePlayerConstructorOptions = {
   playerElement: () => HTMLVideoElement
 
   controls: boolean