Custom channel emoticons WIP (#130) + various fix

client/common/lib/elements/dynamic-table-form.ts

@@ -1,10 +1,10 @@
 // SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* eslint no-fallthrough: "off" */
-
 import type { TagsInputElement } from './tags-input'
+import type { DirectiveResult } from 'lit/directive'
 import { ValidationErrorType } from '../models/validation'
 import { html, nothing, TemplateResult } from 'lit'
 import { repeat } from 'lit/directives/repeat.js'
@@ -55,6 +55,7 @@ type DynamicTableAcceptedInputTypes = 'textarea'
 | 'url'
 | 'week'
 | 'tags'
+| 'image-file'
 
 interface CellDataSchema {
   min?: number
@@ -76,13 +77,21 @@ interface DynamicTableRowData {
   row: { [key: string]: DynamicTableAcceptedTypes }
 }
 
+export interface DynamicFormHeader {
+  [key: string]: {
+    colName: TemplateResult | DirectiveResult
+    description: TemplateResult | DirectiveResult
+  }
+}
+export interface DynamicFormSchema { [key: string]: CellDataSchema }
+
 @customElement('livechat-dynamic-table-form')
 export class DynamicTableFormElement extends LivechatElement {
   @property({ attribute: false })
-  public header: { [key: string]: { colName: TemplateResult, description: TemplateResult } } = {}
+  public header: DynamicFormHeader = {}
 
   @property({ attribute: false })
-  public schema: { [key: string]: CellDataSchema } = {}
+  public schema: DynamicFormSchema = {}
 
   @property()
   public validation?: {[key: string]: ValidationErrorType[] }
@@ -184,8 +193,8 @@ export class DynamicTableFormElement extends LivechatElement {
     </thead>`
   }
 
-  private readonly _renderHeaderCell = (headerCellData: { colName: TemplateResult
-    description: TemplateResult }): TemplateResult => {
+  private readonly _renderHeaderCell = (headerCellData: { colName: TemplateResult | DirectiveResult
+    description: TemplateResult | DirectiveResult }): TemplateResult => {
     return html`<th scope="col">
       <div data-toggle="tooltip" data-placement="bottom" data-html="true" title=${headerCellData.description}>
         ${headerCellData.colName}
@@ -244,10 +253,8 @@ export class DynamicTableFormElement extends LivechatElement {
 
     switch (propertySchema.default?.constructor) {
       case String:
+        propertySchema.inputType ??= 'text'
         switch (propertySchema.inputType) {
-          case undefined:
-            propertySchema.inputType = 'text'
-
           case 'text':
           case 'color':
           case 'date':
@@ -298,14 +305,24 @@ export class DynamicTableFormElement extends LivechatElement {
               ${feedback}
               `
             break
+
+          case 'image-file':
+            formElement = html`${this._renderImageFileInput(rowId,
+              inputId,
+              inputName,
+              propertyName,
+              propertySchema,
+              propertyValue?.toString(),
+              originalIndex)}
+              ${feedback}
+              `
+            break
         }
         break
 
       case Date:
+        propertySchema.inputType ??= 'datetime'
         switch (propertySchema.inputType) {
-          case undefined:
-            propertySchema.inputType = 'datetime'
-
           case 'date':
           case 'datetime':
           case 'datetime-local':
@@ -324,10 +341,8 @@ export class DynamicTableFormElement extends LivechatElement {
         break
 
       case Number:
+        propertySchema.inputType ??= 'number'
         switch (propertySchema.inputType) {
-          case undefined:
-            propertySchema.inputType = 'number'
-
           case 'number':
           case 'range':
             formElement = html`${this._renderInput(rowId,
@@ -344,10 +359,8 @@ export class DynamicTableFormElement extends LivechatElement {
         break
 
       case Boolean:
+        propertySchema.inputType ??= 'checkbox'
         switch (propertySchema.inputType) {
-          case undefined:
-            propertySchema.inputType = 'checkbox'
-
           case 'checkbox':
             formElement = html`${this._renderCheckbox(rowId,
               inputId,
@@ -363,10 +376,8 @@ export class DynamicTableFormElement extends LivechatElement {
         break
 
       case Array:
+        propertySchema.inputType ??= 'text'
         switch (propertySchema.inputType) {
-          case undefined:
-            propertySchema.inputType = 'text'
-
           case 'text':
           case 'color':
           case 'date':
@@ -549,6 +560,23 @@ export class DynamicTableFormElement extends LivechatElement {
     </select>`
   }
 
+  _renderImageFileInput = (rowId: number,
+    inputId: string,
+    inputName: string,
+    propertyName: string,
+    propertySchema: CellDataSchema,
+    propertyValue: string,
+    originalIndex: number
+  ): TemplateResult => {
+    return html`<livechat-image-file-input
+      .name=${inputName}
+      class="${classMap(this._getInputValidationClass(propertyName, originalIndex))}"
+      id=${inputId}
+      aria-describedby="${inputId}-feedback"
+      @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
+      .value=${propertyValue}></livechat-image-file-input>`
+  }
+
   _getInputValidationClass = (propertyName: string,
     originalIndex: number): { [key: string]: boolean } => {
     const validationErrorTypes: ValidationErrorType[] | undefined =

client/common/lib/elements/help-button.ts

@@ -12,7 +12,7 @@ import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { Task } from '@lit/task'
 import { localizedHelpUrl } from '../../../utils/help'
 import { ptTr } from '../directives/translation'
-import { DirectiveResult } from 'lit/directive'
+import type { DirectiveResult } from 'lit/directive'
 import { LivechatElement } from './livechat'
 
 @customElement('livechat-help-button')

client/common/lib/elements/image-file-input.ts

@@ -0,0 +1,89 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { LivechatElement } from './livechat'
+import { html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+/**
+ * Special element to upload image files.
+ * If no current value, displays an input type="file" field.
+ * When there is already an image, it is displayed.
+ * Clicking on the image triggers a new upload, that will replace the image.
+ *
+ * The value can be either:
+ * * an url (when the image is already saved for example)
+ * * a base64 representation (for image to upload for exemple)
+ *
+ * Doing so, we just have to set the img.src to the value to display the image.
+ */
+@customElement('livechat-image-file-input')
+export class ImageFileInputElement extends LivechatElement {
+  @property({ attribute: false })
+  public name?: string
+
+  @property({ reflect: true })
+  public value: string | undefined
+
+  protected override render = (): unknown => {
+    // FIXME: limit file size in the upload field.
+    return html`
+      ${this.value
+        ? html`<img src=${this.value} @click=${(ev: Event) => {
+          ev.preventDefault()
+          const upload: HTMLInputElement | null | undefined = this.parentElement?.querySelector('input[type="file"]')
+          upload?.click()
+        }} />`
+        : ''
+      }
+      <input
+        type="file"
+        accept="image/jpg,image/png,image/gif"
+        class="form-control"
+        style=${this.value ? 'visibility: hidden;' : ''}
+        @change=${async (ev: Event) => this._upload(ev)}
+      />
+      <input
+        type="hidden"
+        name=${ifDefined(this.name)}
+        value=${this.value ?? ''}
+      />
+    `
+  }
+
+  private async _upload (ev: Event): Promise<void> {
+    ev.preventDefault()
+    const target = ev.target
+    const file = (target as HTMLInputElement).files?.[0]
+    if (!file) {
+      this.value = ''
+      return
+    }
+
+    try {
+      const base64 = await new Promise<string>((resolve, reject) => {
+        const fileReader = new FileReader()
+        fileReader.readAsDataURL(file)
+        fileReader.onload = () => {
+          if (fileReader.result === null) {
+            reject(new Error('Empty result'))
+            return
+          }
+          if (fileReader.result instanceof ArrayBuffer) {
+            reject(new Error('Result is an ArrayBuffer, this was not intended'))
+          } else {
+            resolve(fileReader.result)
+          }
+        }
+        fileReader.onerror = reject
+      })
+
+      this.value = base64
+    } catch (err) {
+      // FIXME: use peertube notifier?
+      console.error(err)
+    }
+  }
+}

client/common/lib/elements/index.js

@@ -1,4 +1,5 @@
 // SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
@@ -7,3 +8,4 @@ import './help-button'
 import './dynamic-table-form'
 import './configuration-row'
 import './tags-input'
+import './image-file-input'