Rewriting Share modal WIP:

Using lit to entirely rewrite the share chat modal.

client/common/videowatch/elements/index.ts

@@ -0,0 +1 @@
+import './share-chat'

client/common/videowatch/elements/share-chat.ts

@@ -0,0 +1,225 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { Video } from '@peertube/peertube-types'
+import type { LiveChatSettings } from '../../lib/contexts/peertube'
+import { html, PropertyValues, TemplateResult } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { LivechatElement } from '../../lib/elements/livechat'
+import { tplShareChatCopy, tplShareChatTips, tplShareChatTabs, tplShareChatOptions } from './templates/share-chat'
+import { isAutoColorsAvailable } from 'shared/lib/autocolors'
+import { getIframeUri, getXMPPAddr, UriOptions } from '../uri'
+
+/**
+ * Results of the ShareChatElement.computeUrl method.
+ */
+interface ComputedUrl {
+  /**
+   * The string to share.
+   */
+  shareString: string
+
+  /**
+   * The url to open in a browser window, if relevant (http:// or xmpp://).
+   * Undefined when not a standard uri (for iframes for exemple).
+   * This will be the url used by the "open" button.
+   */
+  openUrl: string | undefined
+}
+
+@customElement('livechat-share-chat')
+export class ShareChatElement extends LivechatElement {
+  /**
+   * The associated video.
+   * Must be given when calling this custom element.
+   */
+  @property({ attribute: false })
+  protected _video!: Video
+
+  /**
+   * The settings.
+   * Must be given when calling this custom element.
+   */
+  @property({ attribute: false })
+  protected _settings!: LiveChatSettings
+
+  /**
+   * The current tab.
+   */
+  @property({ attribute: false })
+  public currentTab: 'peertube' | 'embed' | 'xmpp' = 'peertube'
+
+  /**
+   * Should we render the XMPP tab?
+   */
+  @property({ attribute: false })
+  public xmppUriEnabled: boolean = false
+
+  /**
+   * Can we use autocolors?
+   */
+  @property({ attribute: false })
+  public autocolorsAvailable: boolean = false
+
+  /**
+   * In the Embed tab, should we generated an iframe link.
+   */
+  @property({ attribute: false })
+  public embedIFrame: boolean = false
+
+  /**
+   * In the Embed tab, should we generated a read-only chat link.
+   */
+  @property({ attribute: false })
+  public embedReadOnly: boolean = false
+
+  /**
+   * Read-only, with scrollbar?
+   */
+  @property({ attribute: false })
+  public embedReadOnlyScrollbar: boolean = false
+
+  /**
+   * Read-only, transparent background?
+   */
+  @property({ attribute: false })
+  public embedReadOnlyTransparentBackground: boolean = false
+
+  /**
+   * In the Embed tab, should we use current theme color?
+   */
+  @property({ attribute: false })
+  public embedAutocolors: boolean = false
+
+  protected override firstUpdated (changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties)
+    const settings = this._settings
+    this.xmppUriEnabled = !!settings['prosody-room-allow-s2s']
+    this.autocolorsAvailable = isAutoColorsAvailable(settings['converse-theme'])
+
+    this._restorePreviousState()
+  }
+
+  protected override render = (): TemplateResult => {
+    return html`
+      ${tplShareChatTabs(this)}
+      ${tplShareChatCopy(this)}
+      <div class="livechat-shareurl-block">
+        ${tplShareChatTips(this)}
+        ${tplShareChatOptions(this)}
+      </div>
+    `
+  }
+
+  protected _restorePreviousState (): void {
+    // TODO: restore previous state.
+
+    // Some sanity checks, to not be in an impossible state.
+    if (!this.xmppUriEnabled && this.currentTab === 'xmpp') {
+      this.currentTab = 'peertube'
+    }
+  }
+
+  public computeUrl (): ComputedUrl {
+    switch (this.currentTab) {
+      case 'peertube': return this._computeUrlPeertube()
+      case 'embed': return this._computeUrlEmbed()
+      case 'xmpp': return this._computeUrlXMPP()
+      default:
+        return {
+          shareString: '',
+          openUrl: undefined
+        }
+    }
+  }
+
+  protected _computeUrlPeertube (): ComputedUrl {
+    const url = window.location.protocol +
+      '//' +
+      window.location.host +
+      '/p/livechat/room?room=' +
+      encodeURIComponent(this._video.uuid)
+    return {
+      shareString: url,
+      openUrl: url
+    }
+  }
+
+  protected _computeUrlXMPP (): ComputedUrl {
+    const addr = getXMPPAddr(this.ptContext.ptOptions, this._settings, this._video)
+    return {
+      shareString: addr?.jid ?? '',
+      openUrl: addr?.uri
+    }
+  }
+
+  protected _computeUrlEmbed (): ComputedUrl {
+    const uriOptions: UriOptions = {
+      ignoreAutoColors: this.autocolorsAvailable ? !this.embedAutocolors : true,
+      permanent: true
+    }
+
+    if (this.embedReadOnly) {
+      uriOptions.readonly = this.embedReadOnlyScrollbar ? true : 'noscroll'
+      if (this.embedReadOnlyTransparentBackground) {
+        uriOptions.transparent = true
+      }
+    }
+
+    // Note: for the "embed" case, the url is always the same as the iframe.
+    // So we use getIframeUri to compte, and just change the finale result if we really want the iframe.
+    const url = getIframeUri(this.ptContext.ptOptions, this._settings, this._video, uriOptions)
+    if (!url) {
+      return {
+        shareString: '',
+        openUrl: undefined
+      }
+    }
+
+    if (!this.embedIFrame) {
+      return {
+        shareString: url,
+        openUrl: url
+      }
+    }
+
+    // Actually building the iframe:
+    const iframe = document.createElement('iframe')
+    iframe.setAttribute('src', url)
+    iframe.setAttribute('title', this._video.name)
+    iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms')
+    iframe.setAttribute('width', '560')
+    iframe.setAttribute('height', '315')
+    iframe.setAttribute('frameborder', '0')
+    const iframeHTML = iframe.outerHTML
+    iframe.remove()
+    return {
+      shareString: iframeHTML,
+      openUrl: undefined
+    }
+  }
+
+  /**
+   * Copy the current url in the clipboard.
+   */
+  public async copyUrl (): Promise<void> {
+    await navigator.clipboard.writeText(this.computeUrl().shareString)
+    this.ptNotifier.success(await this.ptTranslate(LOC_COPIED))
+  }
+
+  /**
+   * Opens the url.
+   */
+  public openUrl (): void {
+    const url = this.computeUrl().openUrl
+    if (!url) {
+      return
+    }
+    window.open(url)
+  }
+
+  public switchTab (tab: ShareChatElement['currentTab']): void {
+    this.currentTab = tab
+  }
+}

client/common/videowatch/elements/templates/share-chat.ts

@@ -0,0 +1,171 @@
+import type { ShareChatElement } from '../share-chat'
+import { html, TemplateResult } from 'lit'
+import { ptTr } from '../../../lib/directives/translation'
+import { classMap } from 'lit/directives/class-map.js'
+
+export function tplShareChatCopy (el: ShareChatElement): TemplateResult {
+  const computedUrl = el.computeUrl()
+  return html`<div class="livechat-shareurl-copy">
+    <input
+      type="text"
+      readonly autocomplete="off" placeholder=""
+      class="form-control readonly"
+      value=${computedUrl.shareString}
+      @click=${(ev: Event) => {
+        const input = ev.target as HTMLInputElement
+        // Select the whole value when entering the input.
+        input.select()
+        input.setSelectionRange(0, 99999) /* For mobile devices */
+      }}
+    />
+    <button type="button" class="btn btn-outline-secondary text-uppercase" @click=${el.copyUrl}>
+      ${ptTr(LOC_COPY)}
+    </button>
+    <button
+      type="button" class="btn btn-outline-secondary text-uppercase"
+      @click=${el.openUrl}
+      ?disabled=${computedUrl.openUrl === undefined}
+    >
+      ${ptTr(LOC_OPEN)}
+    </button>
+    <livechat-help-button .page=${'documentation/user/streamers'}></livechat-help-button>
+  </div>`
+}
+
+function _tplShareChatTab (
+  el: ShareChatElement,
+  tabName: ShareChatElement['currentTab'],
+  label: string
+): TemplateResult {
+  return html`
+    <a
+      class=${classMap({
+        'sub-menu-entry': true,
+        active: el.currentTab === tabName
+      })}
+      @click=${(ev: Event) => {
+        ev.preventDefault()
+        el.switchTab(tabName)
+      }}
+    >
+      ${ptTr(label)}
+    </a>`
+}
+
+export function tplShareChatTabs (el: ShareChatElement): TemplateResult {
+  return html`
+  ${_tplShareChatTab(el, 'peertube', LOC_WEB)}
+    ${_tplShareChatTab(el, 'embed', LOC_SHARE_CHAT_EMBED)}
+    ${
+      el.xmppUriEnabled
+        ? _tplShareChatTab(el, 'xmpp', LOC_CONNECT_USING_XMPP)
+        : ''
+    }
+  `
+}
+
+export function tplShareChatTips (el: ShareChatElement): TemplateResult {
+  let label: string | undefined
+  switch (el.currentTab) {
+    case 'peertube':
+      label = LOC_SHARE_CHAT_PEERTUBE_TIPS
+      break
+    case 'embed':
+      label = LOC_TIPS_FOR_STREAMERS
+      break
+    case 'xmpp':
+      label = LOC_CONNECT_USING_XMPP_HELP
+      break
+  }
+  if (!label) {
+    return html``
+  }
+  return html`<div class="livechat-shareurl-tips">${ptTr(label)}</div>`
+}
+
+function _tplShareChatPeertubeOptions (_el: ShareChatElement): TemplateResult {
+  return html``
+}
+
+function _tplShareChatEmbedOptions (el: ShareChatElement): TemplateResult {
+  return html`
+    <label>
+      <input
+        type="checkbox"
+        ?checked=${el.embedIFrame}
+        @click=${() => { el.embedIFrame = !el.embedIFrame }}
+      />
+      ${ptTr(LOC_GENERATE_IFRAME)}
+    </label>
+
+    <label>
+      <input
+        type="checkbox"
+        ?checked=${el.embedReadOnly}
+        @click=${() => { el.embedReadOnly = !el.embedReadOnly }}
+      />
+      ${ptTr(LOC_READ_ONLY)}
+    </label>
+    <div
+      class=${classMap({
+        'livechat-shareurl-suboptions': true,
+        'livechat-shareurl-suboptions-disabled': !el.embedReadOnly
+      })}
+    >
+      <label>
+        <input
+          type="checkbox"
+          ?checked=${el.embedReadOnlyScrollbar}
+          ?disabled=${!el.embedReadOnly}
+          @click=${() => { el.embedReadOnlyScrollbar = !el.embedReadOnlyScrollbar }}
+        />
+        ${ptTr(LOC_SHOW_SCROLLBARR)}
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          ?checked=${el.embedReadOnlyTransparentBackground}
+          ?disabled=${!el.embedReadOnly}
+          @click=${() => { el.embedReadOnlyTransparentBackground = !el.embedReadOnlyTransparentBackground }}
+        />
+        ${ptTr(LOC_TRANSPARENT_BACKGROUND)}
+      </label>
+    </div>
+
+    ${
+      el.autocolorsAvailable
+        ? html`
+          <label>
+            <input
+              type="checkbox"
+              ?checked=${el.embedAutocolors}
+              @click=${() => { el.embedAutocolors = !el.embedAutocolors }}
+            />
+            ${ptTr(LOC_USE_CURRENT_THEME_COLOR)}
+          </label>`
+        : ''
+    }
+  `
+}
+
+function _tplShareChatXMPPOptions (_el: ShareChatElement): TemplateResult {
+  return html``
+}
+
+export function tplShareChatOptions (el: ShareChatElement): TemplateResult {
+  let tpl: TemplateResult
+  switch (el.currentTab) {
+    case 'peertube':
+      tpl = _tplShareChatPeertubeOptions(el)
+      break
+    case 'embed':
+      tpl = _tplShareChatEmbedOptions(el)
+      break
+    case 'xmpp':
+      tpl = _tplShareChatXMPPOptions(el)
+      break
+    default:
+      tpl = html``
+  }
+  return html`<div class="livechat-shareurl-options">${tpl}</div>`
+}