Automatic colspan for tables

client/src/app/+admin/follows/followers-list/followers-list.component.html

@@ -72,7 +72,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No follower found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>Your instance doesn't have any follower.</ng-container>

client/src/app/+admin/follows/following-list/following-list.component.html

@@ -79,7 +79,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No host found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>Your instance is not following anyone.</ng-container>

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html

@@ -57,7 +57,7 @@
 
   <ng-template pTemplate="rowexpansion" let-redundancy>
     <tr *ngIf="redundancy.redundancies.files.length !== 0">
-      <td class="expand-cell" [attr.colspan]="getColspan()">
+      <td class="expand-cell" myAutoColspan>
         <div *ngFor="let file of redundancy.redundancies.files" class="expansion-block">
           <my-video-redundancy-information [redundancyElement]="file"></my-video-redundancy-information>
         </div>
@@ -65,7 +65,7 @@
     </tr>
 
     <tr *ngIf="redundancy.redundancies.streamingPlaylists.length !== 0">
-      <td class="expand-cell" [attr.colspan]="getColspan()">
+      <td class="expand-cell" myAutoColspan>
         <div *ngFor="let playlist of redundancy.redundancies.streamingPlaylists">
           <my-video-redundancy-information [redundancyElement]="playlist"></my-video-redundancy-information>
         </div>
@@ -75,7 +75,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="isDisplayingRemoteVideos()" i18n>Your instance doesn't mirror any video.</ng-container>
           <ng-container *ngIf="!isDisplayingRemoteVideos()" i18n>Your instance has no mirrored videos.</ng-container>

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts

@@ -63,12 +63,6 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
         })
   }
 
-  getColspan () {
-    if (this.isDisplayingRemoteVideos()) return 5
-
-    return 4
-  }
-
   isDisplayingRemoteVideos () {
     return this.displayType === 'remote-videos'
   }

client/src/app/+admin/moderation/registration-list/registration-list.component.html

@@ -102,7 +102,7 @@
 
   <ng-template pTemplate="rowexpansion" let-registration>
     <tr>
-      <td colspan="9">
+      <td myAutoColspan>
         <div class="moderation-expanded">
           <div class="left">
             <div class="d-flex">
@@ -122,7 +122,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="9">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No registrations found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No registrations found.</ng-container>

client/src/app/+admin/moderation/video-block-list/video-block-list.component.html

@@ -68,7 +68,7 @@
 
   <ng-template pTemplate="rowexpansion" let-videoBlock>
     <tr>
-      <td class="expand-cell" colspan="6">
+      <td class="expand-cell" myAutoColspan>
         <div class="d-flex moderation-expanded">
 
           <div class="left">
@@ -87,7 +87,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No blocked video found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No blocked video found.</ng-container>

client/src/app/+admin/overview/comments/video-comment-list.component.html

@@ -93,7 +93,7 @@
 
   <ng-template pTemplate="rowexpansion" let-videoComment>
     <tr>
-      <td class="expand-cell" colspan="5">
+      <td class="expand-cell" myAutoColspan>
         <div [innerHTML]="videoComment.textHtml"></div>
       </td>
     </tr>
@@ -101,7 +101,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="7">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No comments found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No comments found.</ng-container>

client/src/app/+admin/overview/users/user-list/user-list.component.html

@@ -146,7 +146,7 @@
 
   <ng-template pTemplate="rowexpansion" let-user>
     <tr class="user-blocked-reason">
-      <td colspan="7">
+      <td myAutoColspan>
         <span i18n class="ban-reason-label">Ban reason:</span>
         {{ user.blockedReason }}
       </td>

client/src/app/+admin/overview/videos/video-list.component.html

@@ -100,7 +100,7 @@
 
   <ng-template pTemplate="rowexpansion" let-video>
     <tr>
-      <td class="video-info expand-cell" colspan="7">
+      <td class="video-info expand-cell" myAutoColspan>
         <div>
           <div *ngIf="isWebTorrent(video)">
             WebTorrent:

client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html

@@ -87,7 +87,7 @@
 
   <ng-template pTemplate="rowexpansion" let-runnerJob>
     <tr>
-      <td colspan="9">
+      <td myAutoColspan>
         <div class="mt-2 fs-7 font-monospace">
           Parent job: {{ runnerJob.parent?.uuid || '-' }} <br />
           Processed on {{ (runnerJob.startedAt || '-') }} <br />
@@ -111,7 +111,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="9">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container i18n>No runner jobs found.</ng-container>
         </div>

client/src/app/+admin/system/runners/runner-list/runner-list.component.html

@@ -51,7 +51,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container i18n>No remote runners found.</ng-container>
         </div>

client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html

@@ -55,7 +55,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="4">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container i18n>No registration token found for remote runners.</ng-container>
         </div>

client/src/app/+my-library/my-ownership/my-ownership.component.html

@@ -67,7 +67,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container i18n>No ownership change request found.</ng-container>
         </div>

client/src/app/+my-library/my-video-imports/my-video-imports.component.html

@@ -72,7 +72,7 @@
 
   <ng-template pTemplate="rowexpansion" let-videoImport>
     <tr class="video-import-error" *ngIf="videoImport.error">
-      <td colspan="6">
+      <td myAutoColspan>
         <pre>{{ videoImport.error }}</pre>
       </td>
     </tr>

client/src/app/shared/shared-abuse-list/abuse-list-table.component.html

@@ -136,10 +136,10 @@
 
   <ng-template pTemplate="rowexpansion" let-abuse>
       <tr>
-        <td *ngIf="isAdminView()" class="expand-cell" colspan="8">
+        <td *ngIf="isAdminView()" class="expand-cell" myAutoColspan>
           <my-abuse-details [abuse]="abuse" [isAdminView]="true"></my-abuse-details>
         </td>
-        <td *ngIf="!isAdminView()" class="expand-cell" colspan="6">
+        <td *ngIf="!isAdminView()" class="expand-cell" myAutoColspan>
           <my-abuse-details [abuse]="abuse" [isAdminView]="false"></my-abuse-details>
         </td>
       </tr>
@@ -147,7 +147,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No abuses found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No abuses found.</ng-container>

client/src/app/shared/shared-main/angular/auto-colspan.directive.ts

@@ -0,0 +1,22 @@
+import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core'
+
+@Directive({
+  selector: '[myAutoColspan]'
+})
+export class AutoColspanDirective implements AfterViewInit {
+
+  constructor (
+    private host: ElementRef,
+    private renderer: Renderer2
+  ) { }
+
+  ngAfterViewInit () {
+    const el = this.host.nativeElement as HTMLElement
+    const table = el.closest('table')
+    if (!table) throw new Error('table element not found')
+
+    const th = table.querySelectorAll('th')
+
+    this.renderer.setAttribute(el, 'colspan', th.length + '')
+  }
+}

client/src/app/shared/shared-main/angular/index.ts

@@ -1,3 +1,4 @@
+export * from './auto-colspan.directive'
 export * from './autofocus.directive'
 export * from './bytes.pipe'
 export * from './defer-loading.directive'

client/src/app/shared/shared-main/shared-main.module.ts

@@ -18,6 +18,7 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { AccountService, SignupLabelComponent } from './account'
 import {
+  AutoColspanDirective,
   AutofocusDirective,
   BytesPipe,
   DeferLoadingDirective,
@@ -89,6 +90,7 @@ import { VideoChannelService } from './video-channel'
     DurationFormatterPipe,
     AutofocusDirective,
     DeferLoadingDirective,
+    AutoColspanDirective,
 
     InfiniteScrollerDirective,
     PeerTubeTemplateDirective,
@@ -150,6 +152,7 @@ import { VideoChannelService } from './video-channel'
     DurationFormatterPipe,
     AutofocusDirective,
     DeferLoadingDirective,
+    AutoColspanDirective,
 
     InfiniteScrollerDirective,
     PeerTubeTemplateDirective,

client/src/app/shared/shared-moderation/account-blocklist.component.html

@@ -49,7 +49,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="3">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No account found.</ng-container>

client/src/app/shared/shared-moderation/server-blocklist.component.html

@@ -51,7 +51,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="3">
+      <td myAutoColspan>
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>No server found.</ng-container>