Automatic colspan for tables

20 files changed, 50 insertions, 30 deletions

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 14c62f1af..3326d59db 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/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>
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index f46f36375..07495a74c 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/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>
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
index 2b52d3fd8..85b9d8913 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
+++ b/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>
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index d65467a4d..efcefd509 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/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'
   }
diff --git a/client/src/app/+admin/moderation/registration-list/registration-list.component.html b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
index a2b888101..8e5e2cf49 100644
--- a/client/src/app/+admin/moderation/registration-list/registration-list.component.html
+++ b/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>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index 28109d007..53bc6a178 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/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>
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.html b/client/src/app/+admin/overview/comments/video-comment-list.component.html
index b0d8131bf..df9bccc0a 100644
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.html
+++ b/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>
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index 30859a3ad..e37ad2a3e 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/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>
diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index 35b1f9dbd..c4f78cadc 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/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:
diff --git a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
index 5356e0e03..a759e9186 100644
--- a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
+++ b/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>
diff --git a/client/src/app/+admin/system/runners/runner-list/runner-list.component.html b/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
index 606eb9afd..b131d1a74 100644
--- a/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
+++ b/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>
diff --git a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
index 2fd23e2fc..3e5cea881 100644
--- a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
+++ b/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>
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index 5db1a9bb2..40bfdcdf1 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/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>
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
index 92a4a4a52..d25eff24c 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/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>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 2571cc952..5833e3465 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/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>
diff --git a/client/src/app/shared/shared-main/angular/auto-colspan.directive.ts b/client/src/app/shared/shared-main/angular/auto-colspan.directive.ts
new file mode 100644
index 000000000..8da89b668
--- /dev/null
+++ b/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 + '')
+  }
+}
diff --git a/client/src/app/shared/shared-main/angular/index.ts b/client/src/app/shared/shared-main/angular/index.ts
index f72d60313..6ea494129 100644
--- a/client/src/app/shared/shared-main/angular/index.ts
+++ b/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'
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 0bdf27263..d3ec31d6e 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/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,
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index 8cf9aa4c9..609a8cecd 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/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>
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index 1a13e0207..a98333339 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/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>