Custom channel emoticons WIP (#130)

client/@types/global.d.ts

@@ -83,9 +83,12 @@ declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_FOR_MORE_INFO: string
 
 declare const LOC_VALIDATION_ERROR: string
 declare const LOC_INVALID_VALUE: string
+declare const LOC_INVALID_VALUE_MISSING: string
 declare const LOC_INVALID_VALUE_WRONG_TYPE: string
 declare const LOC_INVALID_VALUE_WRONG_FORMAT: string
 declare const LOC_INVALID_VALUE_NOT_IN_RANGE: string
+declare const LOC_INVALID_VALUE_FILE_TOO_BIG: string
+
 declare const LOC_CHATROOM_NOT_ACCESSIBLE: string
 
 declare const LOC_PROMOTE: string

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

@@ -9,6 +9,7 @@ import { LivechatElement } from '../../lib/elements/livechat'
 import { registerClientOptionsContext } from '../../lib/contexts/peertube'
 import { ChannelDetailsService } from '../services/channel-details'
 import { channelDetailsServiceContext } from '../contexts/channel'
+import { maxEmojisPerChannel } from 'shared/lib/emojis'
 import { ptTr } from '../../lib/directives/translation'
 import { ValidationError } from '../../lib/models/validation'
 import { Task } from '@lit/task'
@@ -78,12 +79,19 @@ export class ChannelEmojisElement extends LivechatElement {
               <livechat-dynamic-table-form
                 .header=${tableHeaderList}
                 .schema=${tableSchema}
+                .maxLines=${maxEmojisPerChannel}
                 .validation=${this._validationError?.properties}
                 .validationPrefix=${'emojis'}
                 .rows=${this._channelEmojisConfiguration?.emojis.customEmojis}
                 @update=${(e: CustomEvent) => {
                     if (this._channelEmojisConfiguration) {
                       this._channelEmojisConfiguration.emojis.customEmojis = e.detail
+                      // Fixing missing ':' for shortnames:
+                      for (const desc of this._channelEmojisConfiguration.emojis.customEmojis) {
+                        if (desc.sn === '') { continue }
+                        if (!desc.sn.startsWith(':')) { desc.sn = ':' + desc.sn }
+                        if (!desc.sn.endsWith(':')) { desc.sn += ':' }
+                      }
                       this.requestUpdate('_channelEmojisConfiguration')
                     }
                   }
@@ -131,6 +139,7 @@ export class ChannelEmojisElement extends LivechatElement {
     try {
       await this._channelDetailsService.saveEmojisConfiguration(this.channelId, this._channelEmojisConfiguration.emojis)
       this._validationError = undefined
+      peertubeHelpers.notifier.info(await peertubeHelpers.translate(LOC_SUCCESSFULLY_SAVED))
       this.requestUpdate('_validationError')
     } catch (error) {
       this._validationError = undefined

client/common/configuration/services/channel-details.ts

@@ -184,10 +184,16 @@ export class ChannelDetailsService {
 
     for (const [i, e] of channelEmojis.customEmojis.entries()) {
       propertiesError[`emojis.${i}.sn`] = []
-      // FIXME: the ":" should not be in the value, but added afterward.
-      if (!/^:[\w-]+:$/.test(e.sn)) {
+      if (e.sn === '') {
+        propertiesError[`emojis.${i}.sn`].push(ValidationErrorType.Missing)
+      } else if (!/^:[\w-]+:$/.test(e.sn)) {
         propertiesError[`emojis.${i}.sn`].push(ValidationErrorType.WrongFormat)
       }
+
+      propertiesError[`emojis.${i}.url`] = []
+      if (!e.url) {
+        propertiesError[`emojis.${i}.url`].push(ValidationErrorType.Missing)
+      }
     }
 
     if (Object.values(propertiesError).find(e => e.length > 0)) {
@@ -227,7 +233,5 @@ export class ChannelDetailsService {
       }
       throw new Error('Can\'t get channel emojis options.')
     }
-
-    return response.json()
   }
 }

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

@@ -6,6 +6,7 @@
 import type { TagsInputElement } from './tags-input'
 import type { DirectiveResult } from 'lit/directive'
 import { ValidationErrorType } from '../models/validation'
+import { maxSize, inputFileAccept } from 'shared/lib/emojis'
 import { html, nothing, TemplateResult } from 'lit'
 import { repeat } from 'lit/directives/repeat.js'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -93,6 +94,9 @@ export class DynamicTableFormElement extends LivechatElement {
   @property({ attribute: false })
   public schema: DynamicFormSchema = {}
 
+  @property({ attribute: false })
+  public maxLines?: number = undefined
+
   @property()
   public validation?: {[key: string]: ValidationErrorType[] }
 
@@ -223,6 +227,9 @@ export class DynamicTableFormElement extends LivechatElement {
   }
 
   private readonly _renderFooter = (): TemplateResult => {
+    if (this.maxLines && this._rowsById.length >= this.maxLines) {
+      return html``
+    }
     return html`<tfoot>
     <tr>
       ${Object.values(this.header).map(() => html`<td></td>`)}
@@ -574,7 +581,10 @@ export class DynamicTableFormElement extends LivechatElement {
       id=${inputId}
       aria-describedby="${inputId}-feedback"
       @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
-      .value=${propertyValue}></livechat-image-file-input>`
+      .value=${propertyValue}
+      .maxSize=${maxSize}
+      .accept=${inputFileAccept}
+    ></livechat-image-file-input>`
   }
 
   _getInputValidationClass = (propertyName: string,
@@ -595,6 +605,9 @@ export class DynamicTableFormElement extends LivechatElement {
       this.validation?.[`${this.validationPrefix}.${originalIndex}.${propertyName}`]
 
     if (validationErrorTypes !== undefined && validationErrorTypes.length !== 0) {
+      if (validationErrorTypes.includes(ValidationErrorType.Missing)) {
+        errorMessages.push(html`${ptTr(LOC_INVALID_VALUE_MISSING)}`)
+      }
       if (validationErrorTypes.includes(ValidationErrorType.WrongType)) {
         errorMessages.push(html`${ptTr(LOC_INVALID_VALUE_WRONG_TYPE)}`)
       }

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

@@ -33,6 +33,12 @@ export class ImageFileInputElement extends LivechatElement {
   @property({ reflect: true })
   public value: string | undefined
 
+  @property({ attribute: false })
+  public maxSize?: number
+
+  @property({ attribute: false })
+  public accept: string[] = ['image/jpg', 'image/png', 'image/gif']
+
   protected override render = (): unknown => {
     // FIXME: limit file size in the upload field.
     return html`
@@ -46,7 +52,7 @@ export class ImageFileInputElement extends LivechatElement {
       }
       <input
         type="file"
-        accept="image/jpg,image/png,image/gif"
+        accept="${this.accept.join(',')}"
         class="form-control"
         style=${this.value ? 'visibility: hidden;' : ''}
         @change=${async (ev: Event) => this._upload(ev)}
@@ -65,9 +71,16 @@ export class ImageFileInputElement extends LivechatElement {
     const target = ev.target
     const file = (target as HTMLInputElement).files?.[0]
     if (!file) {
-      this.value = ''
-      const event = new Event('change')
-      this.dispatchEvent(event)
+      return
+    }
+
+    if (this.maxSize && file.size > this.maxSize) {
+      let msg = await this.registerClientOptions?.peertubeHelpers.translate(LOC_INVALID_VALUE_FILE_TOO_BIG)
+      if (msg) {
+        // FIXME: better unit handling (here we force kb)
+        msg = msg.replace('%s', Math.round(this.maxSize / 1024).toString() + 'k')
+        this.registerClientOptions?.peertubeHelpers.notifier.error(msg)
+      }
       return
     }
 

client/common/lib/models/validation.ts

@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 export enum ValidationErrorType {
+  Missing,
   WrongType,
   WrongFormat,
   NotInRange,