Begin integrating components with lit

2024-05-09 22:32:42 +02:00
parent 9ff4abfce4
commit 2638e137b3
6 changed files with 176 additions and 53 deletions
--- a/client/common/configuration/register.ts
+++ b/client/common/configuration/register.ts
@ -5,6 +5,7 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { renderConfigurationHome } from './templates/home'
 import { renderConfigurationChannel } from './templates/channel'
+import { render } from 'lit'

 /**
 * Registers stuff related to the user's configuration pages.
@ -19,7 +20,7 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
  registerClientRoute({
    route: 'livechat/configuration',
    onMount: async ({ rootEl }) => {
-      rootEl.innerHTML = await renderConfigurationHome(clientOptions)
+      render(await renderConfigurationHome(clientOptions), rootEl)
    }
  })

@ -28,7 +29,7 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
    onMount: async ({ rootEl }) => {
      const urlParams = new URLSearchParams(window.location.search)
      const channelId = urlParams.get('channelId') ?? ''
-      await renderConfigurationChannel(clientOptions, channelId, rootEl)
+      render(await renderConfigurationChannel(clientOptions, channelId, rootEl), rootEl)
    }
  })

--- a/client/common/configuration/templates/channel.mustache
+++ b/client/common/configuration/templates/channel.mustache
@ -87,42 +87,34 @@
          <tbody>
            <tr class="button.peertube-livechat-forbidden-words-row-{{fieldNumber}}">
              <td>
-                <label for="peertube-livechat-forbidden-words-{{fieldNumber}}">{{forbiddenWords}}</label>
                {{! warning: don't add extra line break in textarea! }}
                <textarea
                  name="forbidden_words_{{fieldNumber}}"
                  id="peertube-livechat-forbidden-words-{{fieldNumber}}"
                  class="form-control"
                >{{joinedEntries}}</textarea>
-                <p class="form-group-description">{{forbiddenWordsDesc2}}</p>
              </td>
-                <label>
-                  <input
-                    type="checkbox"
-                    name="forbidden_words_regexp_{{fieldNumber}}"
-                    value="1"
-                    {{#regexp}}
-                      checked="checked"
-                    {{/regexp}}
-                  />
-                  {{forbiddenWordsRegexp}}
-                </label>
-                <p class="form-group-description">{{forbiddenWordsRegexpDesc}}</p>
              <td>
-                <label>
-                  <input
-                    type="checkbox"
-                    name="forbidden_words_applytomoderators_{{fieldNumber}}"
-                    value="1"
-                    {{#applyToModerators}}
-                      checked="checked"
-                    {{/applyToModerators}}
-                  />
-                  {{forbiddenWordsApplyToModerators}}
-                </label>
-                <p class="form-group-description">{{forbiddenWordsApplyToModeratorsDesc}}</p>
+                <input
+                  type="checkbox"
+                  name="forbidden_words_regexp_{{fieldNumber}}"
+                  value="1"
+                  {{#regexp}}
+                    checked="checked"
+                  {{/regexp}}
+                />
              </td>
-                <label for="peertube-livechat-forbidden-words-label-{{fieldNumber}}">{{forbiddenWordsLabel}}</label>
+              <td>
+                <input
+                  type="checkbox"
+                  name="forbidden_words_applytomoderators_{{fieldNumber}}"
+                  value="1"
+                  {{#applyToModerators}}
+                    checked="checked"
+                  {{/applyToModerators}}
+                />
+              </td>
+              <td>
                <input
                  type="text"
                  name="forbidden_words_label_{{fieldNumber}}"
@ -130,9 +122,8 @@
                  id="peertube-livechat-forbidden-words-label-{{fieldNumber}}"
                  value="{{label}}"
                />
-                <p class="form-group-description">{{forbiddenWordsLabelDesc}}</p>
+              </td>
              <td>
-                <label for="peertube-livechat-forbidden-words-reason-{{fieldNumber}}">{{forbiddenWordsReason}}</label>
                <input
                  type="text"
                  name="forbidden_words_reason_{{fieldNumber}}"
@ -140,16 +131,15 @@
                  id="peertube-livechat-forbidden-words-reason-{{fieldNumber}}"
                  value="{{reason}}"
                />
-                <p class="form-group-description">{{forbiddenWordsReasonDesc}}</p>
              </td>
-                <label for="peertube-livechat-forbidden-words-comments-{{fieldNumber}}">{{forbiddenWordsComments}}</label>
+              <td>
                {{! warning: don't add extra line break in textarea! }}
                <textarea
                  name="forbidden_words_comments_{{fieldNumber}}"
                  id="peertube-livechat-forbidden-words-comments-{{fieldNumber}}"
                  class="form-control"
                >{{comments}}</textarea>
-                <p class="form-group-description">{{forbiddenWordsCommentsDesc}}</p>
+              </td>
              <td>
                <button type="button" class="btn btn-danger peertube-livechat-forbidden-words-{{fieldNumber}}-remove">x</button>
              </td>
--- a/client/common/configuration/templates/channel.ts
+++ b/client/common/configuration/templates/channel.ts
@ -6,6 +6,8 @@ import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { localizedHelpUrl } from '../../../utils/help'
 import { helpButtonSVG } from '../../../videowatch/buttons'
 import { vivifyConfigurationChannel, getConfigurationChannelViewData } from './logic/channel'
+import { TemplateResult, html } from 'lit'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 // Must use require for mustache, import seems buggy.
 const Mustache = require('mustache')

@ -21,20 +23,18 @@ async function renderConfigurationChannel (
  registerClientOptions: RegisterClientOptions,
  channelId: string,
  rootEl: HTMLElement
-): Promise<void> {
+): Promise<TemplateResult> {
  try {
    const view = await getConfigurationChannelViewData(registerClientOptions, channelId)
    await fillViewHelpButtons(registerClientOptions, view)
    await fillLabels(registerClientOptions, view)

-    const content = Mustache.render(MUSTACHE_CONFIGURATION_CHANNEL, view) as string
-
-    rootEl.innerHTML = content
+    return html`${unsafeHTML(Mustache.render(MUSTACHE_CONFIGURATION_CHANNEL, view))}`

    await vivifyConfigurationChannel(registerClientOptions, rootEl, channelId)
  } catch (err: any) {
    registerClientOptions.peertubeHelpers.notifier.error(err.toString())
-    rootEl.innerHTML = ''
+    return html``
  }
 }

--- a/client/common/configuration/templates/home.ts
+++ b/client/common/configuration/templates/home.ts
@ -5,15 +5,22 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { localizedHelpUrl } from '../../../utils/help'
 import { helpButtonSVG } from '../../../videowatch/buttons'
-// Must use require for mustache, import seems buggy.
-const Mustache = require('mustache')
+import { TemplateResult, html } from 'lit';
+
+interface HomeViewData {
+  title: string
+  description: string
+  please_select: string
+  channels: any[]
+  helpButton: TemplateResult
+}

 /**
 * Renders the livechat configuration setup home page.
 * @param registerClientOptions Peertube client options
 * @returns The page content
 */
-async function renderConfigurationHome (registerClientOptions: RegisterClientOptions): Promise<string> {
+async function renderConfigurationHome (registerClientOptions: RegisterClientOptions): Promise<TemplateResult> {
  const { peertubeHelpers } = registerClientOptions

  try {
@ -50,34 +57,33 @@ async function renderConfigurationHome (registerClientOptions: RegisterClientOpt
      }
    }

-    const view = {
+    const view : HomeViewData = {
      title: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_TITLE),
      description: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_DESC),
      please_select: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_PLEASE_SELECT),
-      channels: channels.data
+      channels: channels.data,
+      helpButton: await _fillViewHelpButtons(registerClientOptions)
    }

-    await _fillViewHelpButtons(registerClientOptions, view)

-    return Mustache.render(MUSTACHE_CONFIGURATION_HOME, view) as string
+    return renderConfigurationHomeFromTemplate(view)
  } catch (err: any) {
    peertubeHelpers.notifier.error(err.toString())
-    return ''
+    return html``
  }
 }

 async function _fillViewHelpButtons ( // TODO: refactor with the similar function in channel.ts
-  registerClientOptions: RegisterClientOptions,
-  view: any
-): Promise<void> {
+  registerClientOptions: RegisterClientOptions
+): Promise<TemplateResult> {
  const title = await registerClientOptions.peertubeHelpers.translate(LOC_ONLINE_HELP)

-  const button = async (page: string): Promise<string> => {
+  const button = async (page: string): Promise<TemplateResult> => {
    const helpUrl = await localizedHelpUrl(registerClientOptions, {
      page
    })
    const helpIcon = helpButtonSVG()
-    return `<a
+    return html`<a
        href="${helpUrl}"
        target=_blank
        title="${title}"
@ -85,7 +91,39 @@ async function _fillViewHelpButtons ( // TODO: refactor with the similar functio
      >${helpIcon}</a>`
  }

-  view.helpButton = await button('documentation/user/streamers/channel')
+  return button('documentation/user/streamers/channel')
+}
+
+function renderConfigurationHomeFromTemplate(view: HomeViewData) {
+  return html`
+    <div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
+      <h1>
+        ${view.title}
+        ${view.helpButton}
+      </h1>
+      <p>${view.description}</p>
+      <p>${view.please_select}</p>
+      <ul class="peertube-plugin-livechat-configuration-home-channels">
+      ${view.channels.map((channel) => html`
+        <li>
+          <a href="${channel.livechatConfigurationUri}">
+            ${channel.avatar ?
+              html`<img class="avatar channel" src="${channel.avatar.path}">`
+                     :
+              html`<div class="avatar channel initial gray"></div>`
+            }
+          </a>
+          <div class="peertube-plugin-livechat-configuration-home-info">
+            <a href="${channel.livechatConfigurationUri}">
+              <div>${channel.displayName}</div>
+              <div>${channel.name}</div>
+            </a>
+          </div>
+        </li>
+      `)}
+      </ul>
+    </div>
+    `
 }

 export {