Authentication token generation WIP (#98)

You can now generate links to join chatrooms with your current user. This can be used to create Docks in OBS for example. This could also be used to generate authentication token to join the chat from 3rd party tools.

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

@@ -10,8 +10,9 @@ 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'
+import { isAnonymousUser } from '../../../utils/user'
 
-const validTabNames = ['peertube', 'embed', 'xmpp'] as const
+const validTabNames = ['peertube', 'embed', 'dock', 'xmpp'] as const
 
 type ValidTabNames = typeof validTabNames[number]
 
@@ -60,6 +61,12 @@ export class ShareChatElement extends LivechatElement {
   @property({ attribute: false })
   public xmppUriEnabled: boolean = false
 
+  /**
+   * Should we render the Dock tab?
+   */
+  @property({ attribute: false })
+  public dockEnabled: boolean = false
+
   /**
    * Can we use autocolors?
    */
@@ -100,6 +107,10 @@ export class ShareChatElement extends LivechatElement {
     super.firstUpdated(changedProperties)
     const settings = this._settings
     this.xmppUriEnabled = !!settings['prosody-room-allow-s2s']
+    // Note: for dockEnabled, we check:
+    // * that the user is logged in
+    // * that the video is local (for remote video, tests case are too complicated, and it's not the main use case, so…)
+    this.dockEnabled = !isAnonymousUser(this.ptContext.ptOptions) && this._video.isLocal
     this.autocolorsAvailable = isAutoColorsAvailable(settings['converse-theme'])
 
     this._restorePreviousState()
@@ -154,6 +165,9 @@ export class ShareChatElement extends LivechatElement {
     if (!this.xmppUriEnabled && this.currentTab === 'xmpp') {
       this.currentTab = 'peertube'
     }
+    if (!this.dockEnabled && this.currentTab === 'dock') {
+      this.currentTab = 'peertube'
+    }
   }
 
   protected _saveCurrentState (): void {
@@ -177,6 +191,7 @@ export class ShareChatElement extends LivechatElement {
     switch (this.currentTab) {
       case 'peertube': return this._computeUrlPeertube()
       case 'embed': return this._computeUrlEmbed()
+      case 'dock': return this._computeUrlDock()
       case 'xmpp': return this._computeUrlXMPP()
       default:
         return {
@@ -206,6 +221,32 @@ export class ShareChatElement extends LivechatElement {
     }
   }
 
+  protected _computeUrlDock (): ComputedUrl {
+    return {
+      shareString: '',
+      openUrl: undefined
+    }
+    // const uriOptions: UriOptions = {
+    //   ignoreAutoColors: true,
+    //   permanent: 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
+    //   }
+    // }
+
+    // return {
+    //   shareString: url,
+    //   openUrl: url
+    // }
+  }
+
   protected _computeUrlEmbed (): ComputedUrl {
     const uriOptions: UriOptions = {
       ignoreAutoColors: this.autocolorsAvailable ? !this.embedAutocolors : true,

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

@@ -22,7 +22,11 @@ export function tplShareChatCopy (el: ShareChatElement): TemplateResult {
         input.setSelectionRange(0, 99999) /* For mobile devices */
       }}
     />
-    <button type="button" class="btn btn-outline-secondary text-uppercase" @click=${el.copyUrl}>
+    <button
+      type="button" class="btn btn-outline-secondary text-uppercase"
+      @click=${el.copyUrl}
+      ?disabled=${!computedUrl.shareString}
+    >
       ${ptTr(LOC_COPY)}
     </button>
     <button
@@ -60,6 +64,11 @@ export function tplShareChatTabs (el: ShareChatElement): TemplateResult {
   return html`
   ${_tplShareChatTab(el, 'peertube', LOC_WEB)}
     ${_tplShareChatTab(el, 'embed', LOC_SHARE_CHAT_EMBED)}
+    ${
+      el.dockEnabled
+        ? _tplShareChatTab(el, 'dock', LOC_SHARE_CHAT_DOCK)
+        : ''
+    }
     ${
       el.xmppUriEnabled
         ? _tplShareChatTab(el, 'xmpp', LOC_CONNECT_USING_XMPP)
@@ -79,6 +88,10 @@ export function tplShareChatTips (el: ShareChatElement): TemplateResult {
       label = LOC_TIPS_FOR_STREAMERS
       tips = html`<livechat-help-button .page=${'documentation/user/obs'}></livechat-help-button>`
       break
+    case 'dock':
+      label = LOC_SHARE_CHAT_DOCK_TIPS
+      tips = html`<livechat-help-button .page=${'documentation/user/obs'}></livechat-help-button>`
+      break
     case 'xmpp':
       label = LOC_CONNECT_USING_XMPP_HELP
       break
@@ -154,6 +167,10 @@ function _tplShareChatEmbedOptions (el: ShareChatElement): TemplateResult {
   `
 }
 
+function _tplShareChatDockOptions (_el: ShareChatElement): TemplateResult {
+  return html`<livechat-token-list mode="select"></livechat-token-list>`
+}
+
 function _tplShareChatXMPPOptions (_el: ShareChatElement): TemplateResult {
   return html``
 }
@@ -167,6 +184,9 @@ export function tplShareChatOptions (el: ShareChatElement): TemplateResult {
     case 'embed':
       tpl = _tplShareChatEmbedOptions(el)
       break
+    case 'dock':
+      tpl = _tplShareChatDockOptions(el)
+      break
     case 'xmpp':
       tpl = _tplShareChatXMPPOptions(el)
       break