Share chat url

Modal for video owner (and instance's moderators) that allows to generate a link to the chat. So you can - for example - obtain the url to use for OBS integration.
WIP

client/videowatch/button.ts

@@ -0,0 +1,56 @@
+import type { SVGButton } from './buttons'
+import { logger } from './logger'
+
+interface displayButtonOptions {
+  buttonContainer: HTMLElement
+  name: string
+  label: string
+  callback: () => void | boolean
+  icon?: SVGButton
+  additionalClasses?: string[]
+}
+
+function displayButton ({
+  name,
+  label,
+  callback,
+  buttonContainer,
+  additionalClasses,
+  icon
+}: displayButtonOptions): void {
+  const button = document.createElement('a')
+  button.classList.add(
+    'orange-button', 'peertube-button-link',
+    'peertube-plugin-livechat-button',
+    'peertube-plugin-livechat-button-' + name
+  )
+  if (additionalClasses) {
+    for (let i = 0; i < additionalClasses.length; i++) {
+      button.classList.add(additionalClasses[i])
+    }
+  }
+  button.onclick = callback
+  if (icon) {
+    try {
+      const svg = icon()
+      const tmp = document.createElement('span')
+      tmp.innerHTML = svg.trim()
+      const svgDom = tmp.firstChild
+      if (svgDom) {
+        button.prepend(svgDom)
+      }
+    } catch (err) {
+      logger.error('Failed to generate the ' + name + ' button: ' + (err as string))
+    }
+
+    button.setAttribute('title', label)
+  } else {
+    button.textContent = label
+  }
+  buttonContainer.append(button)
+}
+
+export {
+  displayButtonOptions,
+  displayButton
+}

client/videowatch/buttons.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 type SVGButton = () => string
 
 const closeSVG: SVGButton = () => {
@@ -84,9 +85,24 @@ const openBlankChatSVG: SVGButton = () => {
 </svg>`
 }
 
+const shareChatUrlSVG: SVGButton = () => {
+  // This content comes from the file public/image/url.svg, after svgo cleaning.
+  // To get the formated content, you can do:
+  // xmllint dist/client/images/url.svg --format
+  // Then replace the color by `currentColor`
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233">
+  <g style="stroke-width:1.17052;stroke-miterlimit:4;stroke-dasharray:none">
+    <path style="opacity:.998;fill:none;fill-opacity:1;stroke:currentColor;stroke-width:1.17052;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m6.556-.435 1.132-1.132c.269-.268.618-.351.784-.186L9.867-.357c.166.165.083.515-.186.784L7.418 2.69c-.269.269-.618.352-.784.186l-.698-.697-.39-.407" transform="matrix(.45208 0 0 .45208 -.73 1.423)"/>
+    <path style="opacity:.998;fill:none;fill-opacity:1;stroke:currentColor;stroke-width:1.17052;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M6.038 3.505 4.906 4.637c-.268.268-.618.351-.784.186L2.727 3.427c-.166-.165-.083-.515.186-.784L5.176.38c.27-.269.619-.352.784-.186l.698.697.39.407" transform="matrix(.45208 0 0 .45208 -.73 1.423)"/>
+  </g>
+</svg>
+`
+}
+
 export {
   closeSVG,
   openChatSVG,
   openBlankChatSVG,
+  shareChatUrlSVG,
   SVGButton
 }

client/videowatch/logger.ts

@@ -0,0 +1,10 @@
+const logger = {
+  log: (s: string) => console.log('[peertube-plugin-livechat] ' + s),
+  info: (s: string) => console.info('[peertube-plugin-livechat] ' + s),
+  error: (s: string) => console.error('[peertube-plugin-livechat] ' + s),
+  warn: (s: string) => console.warn('[peertube-plugin-livechat] ' + s)
+}
+
+export {
+  logger
+}

client/videowatch/share.ts

@@ -0,0 +1,11 @@
+async function shareChatUrl ({ peertubeHelpers }: RegisterOptions): Promise<void> {
+  peertubeHelpers.showModal({
+    title: 'TODO',
+    content: '<p>TODO</p>',
+    close: true
+  })
+}
+
+export {
+  shareChatUrl
+}