Add ability for plugins to register client routes

8 files changed, 109 insertions, 5 deletions

diff --git a/client/src/app/+plugin-pages/index.ts b/client/src/app/+plugin-pages/index.ts
new file mode 100644
index 000000000..b988f13f6
--- /dev/null
+++ b/client/src/app/+plugin-pages/index.ts
@@ -0,0 +1,3 @@
+export * from './plugin-pages-routing.module'
+export * from './plugin-pages.component'
+export * from './plugin-pages.module'
diff --git a/client/src/app/+plugin-pages/plugin-pages-routing.module.ts b/client/src/app/+plugin-pages/plugin-pages-routing.module.ts
new file mode 100644
index 000000000..b47a787e0
--- /dev/null
+++ b/client/src/app/+plugin-pages/plugin-pages-routing.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { PluginPagesComponent } from './plugin-pages.component'
+
+const pluginPagesRoutes: Routes = [
+  {
+    path: '**',
+    component: PluginPagesComponent,
+    data: {
+      reloadOnSameNavigation: true
+    }
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(pluginPagesRoutes) ],
+  exports: [ RouterModule ]
+})
+export class PluginPagesRoutingModule {}
diff --git a/client/src/app/+plugin-pages/plugin-pages.component.html b/client/src/app/+plugin-pages/plugin-pages.component.html
new file mode 100644
index 000000000..cf62d1bd7
--- /dev/null
+++ b/client/src/app/+plugin-pages/plugin-pages.component.html
@@ -0,0 +1 @@
+<div #root></div>
diff --git a/client/src/app/+plugin-pages/plugin-pages.component.ts b/client/src/app/+plugin-pages/plugin-pages.component.ts
new file mode 100644
index 000000000..5f294ee13
--- /dev/null
+++ b/client/src/app/+plugin-pages/plugin-pages.component.ts
@@ -0,0 +1,31 @@
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { PluginService } from '@app/core'
+
+@Component({
+  templateUrl: './plugin-pages.component.html'
+})
+export class PluginPagesComponent implements AfterViewInit {
+  @ViewChild('root') root: ElementRef
+
+  constructor (
+    private route: ActivatedRoute,
+    private router: Router,
+    private pluginService: PluginService
+  ) {
+
+  }
+
+  ngAfterViewInit () {
+    const path = '/' + this.route.snapshot.url.map(u => u.path).join('/')
+
+    const registered = this.pluginService.getRegisteredClientRoute(path)
+    if (!registered) {
+      console.log('Could not find registered route %s.', path, this.pluginService.getAllRegisteredClientRoutes())
+
+      return this.router.navigate([ '/404' ], { skipLocationChange: true })
+    }
+
+    registered.onMount({ rootEl: this.root.nativeElement })
+  }
+}
diff --git a/client/src/app/+plugin-pages/plugin-pages.module.ts b/client/src/app/+plugin-pages/plugin-pages.module.ts
new file mode 100644
index 000000000..86f86c752
--- /dev/null
+++ b/client/src/app/+plugin-pages/plugin-pages.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core'
+import { PluginPagesRoutingModule } from './plugin-pages-routing.module'
+import { PluginPagesComponent } from './plugin-pages.component'
+
+@NgModule({
+  imports: [
+    PluginPagesRoutingModule
+  ],
+
+  declarations: [
+    PluginPagesComponent
+  ],
+
+  exports: [
+    PluginPagesComponent
+  ],
+
+  providers: [
+  ]
+})
+export class PluginPagesModule { }
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index 438cb6512..42328d83d 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -58,6 +58,12 @@ const routes: Routes = [
   },
 
   {
+    path: 'p',
+    loadChildren: () => import('./+plugin-pages/plugin-pages.module').then(m => m.PluginPagesModule),
+    canActivateChild: [ MetaGuard ]
+  },
+
+  {
     path: 'about',
     loadChildren: () => import('./+about/about.module').then(m => m.AboutModule),
     canActivateChild: [ MetaGuard ]
diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts
index 89391c2c5..fdbbd2d56 100644
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -20,7 +20,8 @@ import {
   PluginType,
   PublicServerSetting,
   RegisterClientFormFieldOptions,
-  RegisterClientSettingsScript,
+  RegisterClientSettingsScriptOptions,
+  RegisterClientRouteOptions,
   RegisterClientVideoFieldOptions,
   ServerConfigPlugin
 } from '@shared/models'
@@ -48,7 +49,8 @@ export class PluginService implements ClientHook {
   private formFields: FormFields = {
     video: []
   }
-  private settingsScripts: { [ npmName: string ]: RegisterClientSettingsScript } = {}
+  private settingsScripts: { [ npmName: string ]: RegisterClientSettingsScriptOptions } = {}
+  private clientRoutes: { [ route: string ]: RegisterClientRouteOptions } = {}
 
   private pluginsManager: PluginsManager
 
@@ -67,7 +69,8 @@ export class PluginService implements ClientHook {
     this.pluginsManager = new PluginsManager({
       peertubeHelpersFactory: this.buildPeerTubeHelpers.bind(this),
       onFormFields: this.onFormFields.bind(this),
-      onSettingsScripts: this.onSettingsScripts.bind(this)
+      onSettingsScripts: this.onSettingsScripts.bind(this),
+      onClientRoute: this.onClientRoute.bind(this)
     })
   }
 
@@ -123,6 +126,14 @@ export class PluginService implements ClientHook {
     return this.settingsScripts[npmName]
   }
 
+  getRegisteredClientRoute (route: string) {
+    return this.clientRoutes[route]
+  }
+
+  getAllRegisteredClientRoutes () {
+    return Object.keys(this.clientRoutes)
+  }
+
   translateBy (npmName: string, toTranslate: string) {
     const helpers = this.helpers[npmName]
     if (!helpers) {
@@ -140,12 +151,20 @@ export class PluginService implements ClientHook {
     })
   }
 
-  private onSettingsScripts (pluginInfo: PluginInfo, options: RegisterClientSettingsScript) {
+  private onSettingsScripts (pluginInfo: PluginInfo, options: RegisterClientSettingsScriptOptions) {
     const npmName = this.nameToNpmName(pluginInfo.plugin.name, pluginInfo.pluginType)
 
     this.settingsScripts[npmName] = options
   }
 
+  private onClientRoute (options: RegisterClientRouteOptions) {
+    const route = options.route.startsWith('/')
+      ? options.route
+      : `/${options.route}`
+
+    this.clientRoutes[route] = options
+  }
+
   private buildPeerTubeHelpers (pluginInfo: PluginInfo): RegisterClientHelpers {
     const { plugin } = pluginInfo
     const npmName = this.nameToNpmName(pluginInfo.plugin.name, pluginInfo.pluginType)
@@ -161,6 +180,10 @@ export class PluginService implements ClientHook {
         return environment.apiUrl + `${pathPrefix}/${plugin.name}/${plugin.version}/router`
       },
 
+      getBasePluginClientPath: () => {
+        return '/p'
+      },
+
       getSettings: () => {
         const path = PluginService.BASE_PLUGIN_API_URL + '/' + npmName + '/public-settings'
 
diff --git a/client/src/app/core/routing/custom-reuse-strategy.ts b/client/src/app/core/routing/custom-reuse-strategy.ts
index 1498e221f..5d3ad2e67 100644
--- a/client/src/app/core/routing/custom-reuse-strategy.ts
+++ b/client/src/app/core/routing/custom-reuse-strategy.ts
@@ -58,7 +58,7 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
 
   // Reuse the route if we're going to and from the same route
   shouldReuseRoute (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
-    return future.routeConfig === curr.routeConfig
+    return future.routeConfig === curr.routeConfig && future.routeConfig?.data?.reloadOnSameNavigation !== true
   }
 
   private gb () {