Add reset button for file inputs in studio page

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-custom-markup / custom-markup.service.ts

diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
index a3b7303d8bdbb5dd0bc3da02f8f2b4536e53fcd4..a959b336d18b555619dbdddbf9b29b85cacefbd1 100644 (file)
--- a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
+++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
@@ -1,3 +1,4 @@
+import { firstValueFrom } from 'rxjs'
 import { ComponentRef, Injectable } from '@angular/core'
 import { MarkdownService } from '@app/core'
 import {
@@ -18,8 +19,9 @@ import {
   VideoMiniatureMarkupComponent,
   VideosListMarkupComponent
 } from './peertube-custom-tags'
+import { CustomMarkupComponent } from './peertube-custom-tags/shared'
 
-type AngularBuilderFunction = (el: HTMLElement) => ComponentRef<any>
+type AngularBuilderFunction = (el: HTMLElement) => ComponentRef<CustomMarkupComponent>
 type HTMLBuilderFunction = (el: HTMLElement) => HTMLElement
 
 @Injectable()
@@ -44,7 +46,10 @@ export class CustomMarkupService {
     private dynamicElementService: DynamicElementService,
     private markdown: MarkdownService
   ) {
-    this.customMarkdownRenderer = async (text: string) => this.buildElement(text)
+    this.customMarkdownRenderer = (text: string) => {
+      return this.buildElement(text)
+        .then(({ rootElement }) => rootElement)
+    }
   }
 
   getCustomMarkdownRenderer () {
@@ -70,12 +75,19 @@ export class CustomMarkupService {
         })
     }
 
+    const loadedPromises: Promise<boolean>[] = []
+
     for (const selector of Object.keys(this.angularBuilders)) {
       rootElement.querySelectorAll(selector)
         .forEach((e: HTMLElement) => {
           try {
             const component = this.execAngularBuilder(selector, e)
 
+            if (component.instance.loaded) {
+              const p = firstValueFrom(component.instance.loaded)
+              loadedPromises.push(p)
+            }
+
             this.dynamicElementService.injectElement(e, component)
           } catch (err) {
             console.error('Cannot inject component %s.', selector, err)
@@ -83,7 +95,7 @@ export class CustomMarkupService {
         })
     }
 
-    return rootElement
+    return { rootElement, componentsLoaded: Promise.all(loadedPromises) }
   }
 
   private getSupportedTags () {
@@ -108,15 +120,6 @@ export class CustomMarkupService {
     return component
   }
 
-  private videoMiniatureBuilder (el: HTMLElement) {
-    const data = el.dataset as VideoMiniatureMarkupData
-    const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent)
-
-    this.dynamicElementService.setModel(component, { uuid: data.uuid })
-
-    return component
-  }
-
   private playlistMiniatureBuilder (el: HTMLElement) {
     const data = el.dataset as PlaylistMiniatureMarkupData
     const component = this.dynamicElementService.createElement(PlaylistMiniatureMarkupComponent)
@@ -130,7 +133,13 @@ export class CustomMarkupService {
     const data = el.dataset as ChannelMiniatureMarkupData
     const component = this.dynamicElementService.createElement(ChannelMiniatureMarkupComponent)
 
-    this.dynamicElementService.setModel(component, { name: data.name })
+    const model = {
+      name: data.name,
+      displayLatestVideo: this.buildBoolean(data.displayLatestVideo) ?? true,
+      displayDescription: this.buildBoolean(data.displayDescription) ?? true
+    }
+
+    this.dynamicElementService.setModel(component, model)
 
     return component
   }
@@ -140,11 +149,25 @@ export class CustomMarkupService {
     const component = this.dynamicElementService.createElement(ButtonMarkupComponent)
 
     const model = {
-      theme: data.theme,
+      theme: data.theme ?? 'primary',
       href: data.href,
       label: data.label,
-      blankTarget: this.buildBoolean(data.blankTarget)
+      blankTarget: this.buildBoolean(data.blankTarget) ?? false
+    }
+    this.dynamicElementService.setModel(component, model)
+
+    return component
+  }
+
+  private videoMiniatureBuilder (el: HTMLElement) {
+    const data = el.dataset as VideoMiniatureMarkupData
+    const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent)
+
+    const model = {
+      uuid: data.uuid,
+      onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false
     }
+
     this.dynamicElementService.setModel(component, model)
 
     return component
@@ -155,10 +178,21 @@ export class CustomMarkupService {
     const component = this.dynamicElementService.createElement(VideosListMarkupComponent)
 
     const model = {
-      sort: data.sort,
-      categoryOneOf: this.buildArrayNumber(data.categoryOneOf),
-      languageOneOf: this.buildArrayString(data.languageOneOf),
-      count: this.buildNumber(data.count) || 10
+      onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false,
+      maxRows: this.buildNumber(data.maxRows) ?? -1,
+
+      sort: data.sort || '-publishedAt',
+      count: this.buildNumber(data.count) || 10,
+
+      categoryOneOf: this.buildArrayNumber(data.categoryOneOf) ?? [],
+      languageOneOf: this.buildArrayString(data.languageOneOf) ?? [],
+
+      accountHandle: data.accountHandle || undefined,
+      channelHandle: data.channelHandle || undefined,
+
+      isLive: this.buildBoolean(data.isLive),
+
+      isLocal: this.buildBoolean(data.onlyLocal) ? true : undefined
     }
 
     this.dynamicElementService.setModel(component, model)
@@ -169,23 +203,42 @@ export class CustomMarkupService {
   private containerBuilder (el: HTMLElement) {
     const data = el.dataset as ContainerMarkupData
 
+    // Move inner HTML in the new element we'll create
+    const content = el.innerHTML
+    el.innerHTML = ''
+
     const root = document.createElement('div')
-    root.classList.add('peertube-container')
+    root.innerHTML = content
+
+    const layoutClass = data.layout
+      ? 'layout-' + data.layout
+      : 'layout-column'
+
+    root.classList.add('peertube-container', layoutClass)
+
+    root.style.justifyContent = data.justifyContent || 'space-between'
 
     if (data.width) {
       root.setAttribute('width', data.width)
     }
 
-    if (data.title) {
-      const titleElement = document.createElement('h4')
-      titleElement.innerText = data.title
-      root.appendChild(titleElement)
-    }
+    if (data.title || data.description) {
+      const headerElement = document.createElement('div')
+      headerElement.classList.add('header')
+
+      if (data.title) {
+        const titleElement = document.createElement('h4')
+        titleElement.innerText = data.title
+        headerElement.appendChild(titleElement)
+      }
+
+      if (data.description) {
+        const descriptionElement = document.createElement('div')
+        descriptionElement.innerText = data.description
+        headerElement.append(descriptionElement)
+      }
 
-    if (data.description) {
-      const descriptionElement = document.createElement('div')
-      descriptionElement.innerText = data.description
-      root.appendChild(descriptionElement)
+      root.insertBefore(headerElement, root.firstChild)
     }
 
     return root