Custom channel emoticons WIP (#130) + various fix

assets/styles/configuration.scss

@@ -423,3 +423,15 @@ livechat-tags-input {
     filter: opacity(50%) grayscale(80%);
   }
 }
+
+livechat-image-file-input {
+  img {
+    cursor: pointer;
+    position: fixed;
+
+    // width and height are values coming from ConverseJS custom emojis.
+    // If we want to upload something else, we should add options on the field to customize.
+    height: 1.5em;
+    width: 1.5em;
+  }
+}

client/@types/global.d.ts

@@ -90,3 +90,7 @@ declare const LOC_CHATROOM_NOT_ACCESSIBLE: string
 declare const LOC_PROMOTE: string
 
 declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_TITLE: string
+declare const LOC_LIVECHAT_EMOJIS_SHORTNAME: string
+declare const LOC_LIVECHAT_EMOJIS_SHORTNAME_DESC: string
+declare const LOC_LIVECHAT_EMOJIS_FILE: string
+declare const LOC_LIVECHAT_EMOJIS_FILE_DESC: string

client/common/configuration/elements/channel-emojis.ts

@@ -4,13 +4,15 @@
 
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import type { ChannelEmojisConfiguration } from 'shared/lib/types'
+import type { DynamicFormHeader, DynamicFormSchema } from '../../lib/elements/dynamic-table-form'
 import { LivechatElement } from '../../lib/elements/livechat'
 import { registerClientOptionsContext } from '../../lib/contexts/peertube'
 import { ChannelDetailsService } from '../services/channel-details'
 import { channelDetailsServiceContext } from '../contexts/channel'
 import { ptTr } from '../../lib/directives/translation'
+import { ValidationError } from '../../lib/models/validation'
 import { Task } from '@lit/task'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { provide } from '@lit/context'
 import { html } from 'lit'
 
@@ -31,7 +33,30 @@ export class ChannelEmojisElement extends LivechatElement {
   @provide({ context: channelDetailsServiceContext })
   private _channelDetailsService?: ChannelDetailsService
 
+  @state()
+  private _validationError?: ValidationError
+
   protected override render = (): unknown => {
+    const tableHeaderList: DynamicFormHeader = {
+      shortname: {
+        colName: ptTr(LOC_LIVECHAT_EMOJIS_SHORTNAME),
+        description: ptTr(LOC_LIVECHAT_EMOJIS_SHORTNAME_DESC)
+      },
+      file: {
+        colName: ptTr(LOC_LIVECHAT_EMOJIS_FILE),
+        description: ptTr(LOC_LIVECHAT_EMOJIS_FILE_DESC)
+      }
+    }
+    const tableSchema: DynamicFormSchema = {
+      shortname: {
+        inputType: 'text',
+        default: ''
+      },
+      file: {
+        inputType: 'image-file',
+        default: ''
+      }
+    }
     return this._asyncTaskRender.render({
       pending: () => {},
       complete: () => html`
@@ -49,6 +74,22 @@ export class ChannelEmojisElement extends LivechatElement {
             FIXME: help url OK?
           </h1>
           <form role="form" @submit=${this._saveEmojis}>
+            <div class="row mt-5">
+              <livechat-dynamic-table-form
+                .header=${tableHeaderList}
+                .schema=${tableSchema}
+                .validation=${this._validationError?.properties}
+                .validationPrefix=${'emojis'}
+                .rows=${this._channelEmojisConfiguration?.emojis.customEmojis}
+                @update=${(_e: CustomEvent) => {
+                    // if (this._channelEmojisConfiguration) {
+                    //   this._channelEmojisConfiguration.configuration.emojis.customEmojis = e.detail
+                    //   this.requestUpdate('_channelEmojisConfiguration')
+                    // }
+                  }
+                }
+              ></livechat-dynamic-table-form>
+            </div>
             <div class="form-group mt-5">
               <button type="submit" class="peertube-button-link orange-button">
                 ${ptTr(LOC_SAVE)}

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
+  private readonly _renderHeaderCell = (headerCellData: { colName: TemplateResult | DirectiveResult
-    description: TemplateResult }): TemplateResult => {
+    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'

languages/en.yml

@@ -476,3 +476,11 @@ task_list_pick_message: |
 promote: 'Become moderator'
 
 livechat_configuration_channel_emojis_title: 'Channel emojis'
+livechat_emojis_shortname: 'Short name'
+livechat_emojis_shortname_desc: |
+  You can use emojis using ":shortname:".
+  The short name can only contain alphanumerical characters, underscores and hyphens.
+livechat_emojis_file: 'File'
+livechat_emojis_file_desc: |
+  The maximum file size must be 32px by 32px.
+  Accepted formats: png, jpg, gif.

server/lib/emojis/emojis.ts

@@ -1,3 +1,7 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
 import type { ChannelEmojis, CustomEmojiDefinition } from '../../../shared/lib/types'
 import { RegisterServerOptions } from '@peertube/peertube-types'
 import { getBaseRouterRoute } from '../helpers'

server/lib/emojis/index.ts

@@ -1,2 +1,6 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
 import './emojis'
 export * from './emojis'