Optimize video views component

2024-11-25 16:32:24 +01:00 · 2024-11-25 16:32:24 +01:00 · 4551314baa
parent a253a8088a
commit 4551314baa
20 changed files with 71 additions and 63 deletions
--- 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 @@
      } @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>

--- 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>

--- 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 @@

  <my-upload-progress
    [isUploading]="isReplacingVideoFile" [uploadPercents]="videoUploadPercents" [error]="uploadError" [uploaded]="updateDone"
-    [enableRetryAfterError]="false" (cancel)="cancelUpload()"
+    [enableRetryAfterError]="false" (cancelUpload)="cancelUpload()"
  >
  </my-upload-progress>

--- 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 = ''
  }

--- 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>

--- 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 -->
--- 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 {
--- 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>
+}
--- 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 })
-  }
 }
--- 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 {
--- 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>

--- 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>

--- 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>
--- 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 })
+  }
 }
--- 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">
--- 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 () {
--- 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
  }

--- 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
--- 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'>

--- 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