Begin integrating components with lit

2024-05-09 22:32:42 +02:00 · 2024-05-09 22:32:42 +02:00 · 2638e137b3
commit 2638e137b3
parent 9ff4abfce4
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,16 +87,14 @@
          <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>
+              <td>
                <input
                  type="checkbox"
                  name="forbidden_words_regexp_{{fieldNumber}}"
@ -105,11 +103,8 @@
                    checked="checked"
                  {{/regexp}}
                />
-                  {{forbiddenWordsRegexp}}
-                </label>
-                <p class="form-group-description">{{forbiddenWordsRegexpDesc}}</p>
+              </td>
              <td>
-                <label>
                <input
                  type="checkbox"
                  name="forbidden_words_applytomoderators_{{fieldNumber}}"
@ -118,11 +113,8 @@
                    checked="checked"
                  {{/applyToModerators}}
                />
-                  {{forbiddenWordsApplyToModerators}}
-                </label>
-                <p class="form-group-description">{{forbiddenWordsApplyToModeratorsDesc}}</p>
              </td>
-                <label for="peertube-livechat-forbidden-words-label-{{fieldNumber}}">{{forbiddenWordsLabel}}</label>
+              <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 {
--- a/package-lock.json
+++ b/package-lock.json
@ -15,6 +15,7 @@
        "escape-html": "^1.0.3",
        "got": "^11.8.2",
        "http-proxy": "^1.18.1",
+        "lit": "^3.1.3",
        "log-rotate": "^0.2.8",
        "openid-client": "^5.6.5",
        "validate-color": "^2.2.1",
@ -2664,6 +2665,19 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
+      "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0"
+      }
+    },
    "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.2.tgz",
@ -4095,6 +4109,11 @@
      "integrity": "sha512-Y0K95ThC3esLEYD6ZuqNek29lNX2EM1qxV8y2FTLUB0ff5wWrk7az+mLrnNFUnaXcgKye22+sFBRXOgpPILZNg==",
      "dev": true
    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
+    },
    "node_modules/@types/validator": {
      "version": "13.7.1",
      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.1.tgz",
@ -8644,6 +8663,34 @@
      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
      "dev": true
    },
+    "node_modules/lit": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.3.tgz",
+      "integrity": "sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==",
+      "dependencies": {
+        "@lit/reactive-element": "^2.0.4",
+        "lit-element": "^4.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.5.tgz",
+      "integrity": "sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0",
+        "@lit/reactive-element": "^2.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.3.tgz",
+      "integrity": "sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
    "node_modules/locate-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@ -14237,6 +14284,19 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "@lit-labs/ssr-dom-shim": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+    },
+    "@lit/reactive-element": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
+      "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
+      "requires": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0"
+      }
+    },
    "@msgpackr-extract/msgpackr-extract-darwin-arm64": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.2.tgz",
@ -15546,6 +15606,11 @@
      "integrity": "sha512-Y0K95ThC3esLEYD6ZuqNek29lNX2EM1qxV8y2FTLUB0ff5wWrk7az+mLrnNFUnaXcgKye22+sFBRXOgpPILZNg==",
      "dev": true
    },
+    "@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
+    },
    "@types/validator": {
      "version": "13.7.1",
      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.1.tgz",
@ -18891,6 +18956,34 @@
      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
      "dev": true
    },
+    "lit": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.3.tgz",
+      "integrity": "sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==",
+      "requires": {
+        "@lit/reactive-element": "^2.0.4",
+        "lit-element": "^4.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "lit-element": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.5.tgz",
+      "integrity": "sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==",
+      "requires": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0",
+        "@lit/reactive-element": "^2.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "lit-html": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.3.tgz",
+      "integrity": "sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==",
+      "requires": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
    "locate-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -39,6 +39,7 @@
    "escape-html": "^1.0.3",
    "got": "^11.8.2",
    "http-proxy": "^1.18.1",
+    "lit": "^3.1.3",
    "log-rotate": "^0.2.8",
    "openid-client": "^5.6.5",
    "validate-color": "^2.2.1",