Optimize caption edit modal

client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.html

@@ -42,7 +42,8 @@
       </div>
 
       <div class="text-start segments pe-2 ps-2" [hidden]="rawEdition">
-        <div class="pt-1 pb-1 mb-3" *ngFor="let segment of segments">
+        @for (segment of segments; track segment.id) {
+          <div class="pt-1 pb-1 mb-3">
             @if (segmentToUpdate === segment) {
               <div role="form">
                 <div class="d-flex flex-wrap ">
@@ -95,19 +96,24 @@
                 <div
                   class="flex-grow-1 segment-text ps-1 pe-1" role="button" tabindex="0" i18n-title title="Jump to this segment"
                   (keyup.enter)="onSegmentClick($event, segment)" (click)="onSegmentClick($event, segment)"
-                [ngClass]="getSegmentClasses(segment)"
+                  [ngClass]="{ active: segment === activeSegment }"
                 >
                   <strong class="segment-start me-2 d-block">{{ segment.startFormatted }} -> {{ segment.endFormatted }}</strong>
-                <span class="segment-text fs-7" [innerHTML]="segment.text | nl2br"></span>
+                  <span class="segment-text fs-7">{{ segment.text }}</span>
                 </div>
 
                 <div class="d-flex flex-column ms-3" [ngClass]="{ 'opacity-0': !!segmentToUpdate }">
+                    @defer (on viewport) {
                       <my-edit-button i18n-title title="Edit this segment" (click)="updateSegment(segment)"></my-edit-button>
                       <my-delete-button class="mt-1" i18n-title title="Delete this segment" (click)="deleteSegment(segment)"></my-delete-button>
+                    } @placeholder {
+                      <div style="height: 100%; width: 40px"></div>
+                    }
                   </div>
               </div>
             }
           </div>
+        }
       </div>
     </div>
   </div>

client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.scss

@@ -14,6 +14,8 @@
 }
 
 .segment-text {
+  white-space: pre-wrap;
+
   &.active,
   &:hover {
     background: pvar(--mainBackgroundHoverColor);

client/src/app/+videos/+video-edit/shared/caption/video-caption-edit-modal-content.component.ts

@@ -330,13 +330,9 @@ export class VideoCaptionEditModalContentComponent extends FormReactive implemen
     this.openedModal.close()
   }
 
-  getSegmentClasses (segment: Segment) {
-    return { active: this.activeSegment === segment, ['segment-' + segment.id]: true }
-  }
-
   private scrollToSegment (segment: Segment) {
     setTimeout(() => {
-      const element = document.querySelector<HTMLElement>('.segment-' + segment.id)
+      const element = document.querySelector<HTMLElement>(`.segments > div:nth-child(${parseInt(segment.id) + 1})`)
       if (!element) return
 
       element.scrollIntoView({ behavior: 'smooth', block: 'center' })

client/src/app/shared/shared-main/buttons/button.component.ts

@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, booleanAttribute } from '@angular/core'
+import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input, OnChanges, booleanAttribute } from '@angular/core'
+import { RouterLink } from '@angular/router'
 import { GlobalIconName } from '@app/shared/shared-icons/global-icon.component'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
 import { GlobalIconComponent } from '../../shared-icons/global-icon.component'
 import { LoaderComponent } from '../common/loader.component'
-import { RouterLink } from '@angular/router'
-import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
-import { NgIf, NgClass, NgTemplateOutlet } from '@angular/common'
 
 @Component({
   selector: 'my-button',
@@ -15,7 +15,7 @@ import { NgIf, NgClass, NgTemplateOutlet } from '@angular/common'
   imports: [ NgIf, NgClass, NgbTooltip, NgTemplateOutlet, RouterLink, LoaderComponent, GlobalIconComponent ]
 })
 
-export class ButtonComponent implements OnInit, OnChanges {
+export class ButtonComponent implements OnChanges {
   @Input() label = ''
   @Input() theme: 'orange' | 'grey' = 'grey'
   @Input() icon: GlobalIconName
@@ -27,15 +27,13 @@ export class ButtonComponent implements OnInit, OnChanges {
 
   classes: { [id: string]: boolean } = {}
 
-  ngOnInit () {
-    this.buildClasses()
-  }
-
   ngOnChanges () {
     this.buildClasses()
   }
 
   private buildClasses () {
+    console.log('build classes')
+
     this.classes = {
       'peertube-button': !this.ptRouterLink,
       'peertube-button-link': !!this.ptRouterLink,

client/src/app/shared/shared-main/buttons/delete-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core'
 import { ButtonComponent } from './button.component'
 
 @Component({
@@ -11,15 +11,16 @@ import { ButtonComponent } from './button.component'
     ></my-button>
   `,
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ ButtonComponent ]
 })
-export class DeleteButtonComponent implements OnInit {
+export class DeleteButtonComponent implements OnChanges {
   @Input() label: string
   @Input() title: string
   @Input() responsiveLabel = false
   @Input() disabled: boolean
 
-  ngOnInit () {
+  ngOnChanges () {
     if (this.label === undefined && !this.title) {
       this.title = $localize`Delete`
     }

client/src/app/shared/shared-main/buttons/edit-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core'
 import { ButtonComponent } from './button.component'
 
 @Component({
@@ -10,15 +10,16 @@ import { ButtonComponent } from './button.component'
     ></my-button>
   `,
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ ButtonComponent ]
 })
-export class EditButtonComponent implements OnInit {
+export class EditButtonComponent implements OnChanges {
   @Input() label: string
   @Input() title: string
   @Input() ptRouterLink: string[] | string = []
   @Input() responsiveLabel = false
 
-  ngOnInit () {
+  ngOnChanges () {
     // <my-edit-button /> No label
     if (this.label === undefined && !this.title) {
       this.title = $localize`Update`