refactor(frontend:files): replace @input with Angular input() and signals for improved reactivity and consistency across file viewers

Author: johaven

frontend/src/app/applications/files/components/viewers/files-viewer-document.component.ts

@@ -5,7 +5,7 @@
  */
 
 import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { Component, inject, input, Input, OnDestroy, OnInit } from '@angular/core'
 import { API_FILES_ONLY_OFFICE_SETTINGS } from '@sync-in-server/backend/src/applications/files/constants/routes'
 import { OnlyOfficeReqConfig } from '@sync-in-server/backend/src/applications/files/interfaces/only-office-config.interface'
 import { SERVER_NAME } from '@sync-in-server/backend/src/common/shared'
@@ -19,7 +19,7 @@ import { OnlyOfficeComponent } from '../utils/only-office.component'
   imports: [OnlyOfficeComponent],
   template: `
     @if (documentConfig) {
-      <div [style.height.px]="currentHeight">
+      <div [style.height.px]="currentHeight()">
         <app-files-onlyoffice-document
           [id]="docId"
           [documentServerUrl]="documentConfig.documentServerUrl"
@@ -31,9 +31,9 @@ import { OnlyOfficeComponent } from '../utils/only-office.component'
   `
 })
 export class FilesViewerDocumentComponent implements OnInit, OnDestroy {
-  @Input() file: FileModel
-  @Input() currentHeight: number
-  @Input() mode: 'view' | 'edit'
+  @Input({ required: true }) file: FileModel
+  @Input({ required: true }) mode: 'view' | 'edit'
+  currentHeight = input<number>()
   protected docId: string
   protected documentConfig: OnlyOfficeReqConfig = null
   private readonly http = inject(HttpClient)

frontend/src/app/applications/files/components/viewers/files-viewer-html.component.ts

@@ -5,26 +5,26 @@
  */
 
 import { HttpClient } from '@angular/common/http'
-import { Component, inject, Input, OnInit } from '@angular/core'
+import { Component, inject, input, OnInit } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
 import { LayoutService } from '../../../../layout/layout.service'
 
 @Component({
   selector: 'app-files-viewer-html',
   template: `@if (content) {
-    <iframe [src]="content" [style.height.px]="currentHeight" class="app-viewer-iframe" sandbox></iframe>
+    <iframe [src]="content" [style.height.px]="currentHeight()" class="app-viewer-iframe" sandbox></iframe>
   }`
 })
 export class FilesViewerHtmlComponent implements OnInit {
-  @Input() currentHeight: number
-  @Input() fileUrl: string
+  fileUrl = input<string>()
+  currentHeight = input<number>()
   protected content: any = null
   private readonly http = inject(HttpClient)
   private readonly sanitizer = inject(DomSanitizer)
   private readonly layout = inject(LayoutService)
 
   ngOnInit() {
-    this.http.get(this.fileUrl, { responseType: 'text' }).subscribe({
+    this.http.get(this.fileUrl(), { responseType: 'text' }).subscribe({
       next: (data: string) => (this.content = this.sanitizer.bypassSecurityTrustResourceUrl(`data:text/html,${data}`)),
       error: (e) => {
         this.content = this.sanitizer.bypassSecurityTrustResourceUrl(

frontend/src/app/applications/files/components/viewers/files-viewer-media.component.ts

@@ -4,7 +4,7 @@
  * See the LICENSE file for licensing details
  */
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { VgBufferingModule } from '@videogular/ngx-videogular/buffering'
 import { VgControlsModule } from '@videogular/ngx-videogular/controls'
 import { VgCoreModule } from '@videogular/ngx-videogular/core'
@@ -15,14 +15,14 @@ import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play'
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule],
   template: `
-    <vg-player [style.height.px]="currentHeight">
+    <vg-player [style.height.px]="currentHeight()">
       <video [vgMedia]="$any(media)" #media preload="none" controls>
-        <source [src]="fileUrl" type="video/webm" />
+        <source [src]="fileUrl()" type="video/webm" />
       </video>
     </vg-player>
   `
 })
 export class FilesViewerMediaComponent {
-  @Input() currentHeight: number
-  @Input() fileUrl: string
+  fileUrl = input<string>()
+  currentHeight = input<number>()
 }

frontend/src/app/applications/files/components/viewers/files-viewer-pdf.component.ts

@@ -4,23 +4,21 @@
  * See the LICENSE file for licensing details
  */
 
-import { ChangeDetectionStrategy, Component, inject, Input, OnInit } from '@angular/core'
-import { DomSanitizer } from '@angular/platform-browser'
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core'
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { assetsUrl } from '../../files.constants'
 
 @Component({
   selector: 'app-files-viewer-pdf',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: ` <iframe [src]="url" class="app-viewer-iframe" [style.height.px]="currentHeight"></iframe> `
+  template: ` <iframe [src]="url()" class="app-viewer-iframe" [style.height.px]="currentHeight()"></iframe> `
 })
-export class FilesViewerPdfComponent implements OnInit {
-  @Input() fileUrl: string
-  @Input() currentHeight: number
-  protected url: any
+export class FilesViewerPdfComponent {
+  fileUrl = input<string>()
+  currentHeight = input<number>()
   private readonly sanitizer = inject(DomSanitizer)
   private readonly pdfjsUrl = `${assetsUrl}/pdfjs/web/viewer.html?file=`
-
-  ngOnInit() {
-    this.url = this.sanitizer.bypassSecurityTrustResourceUrl(`${this.pdfjsUrl}${encodeURIComponent(this.fileUrl)}`)
-  }
+  url = computed<SafeResourceUrl | null>(() =>
+    this.fileUrl() ? this.sanitizer.bypassSecurityTrustResourceUrl(`${this.pdfjsUrl}${encodeURIComponent(this.fileUrl())}`) : null
+  )
 }