peertube-plugin-livechat/client/videowatch/share.ts

398 lines
14 KiB
TypeScript
Raw Normal View History

import type { RegisterClientOptions } from '@peertube/peertube-types/client'
import type { Video } from '@peertube/peertube-types'
2021-12-14 16:46:07 +00:00
import { logger } from './logger'
2023-04-14 09:57:01 +00:00
import { getIframeUri, getXMPPAddr, UriOptions } from './uri'
2021-12-21 17:12:18 +00:00
import { isAutoColorsAvailable } from 'shared/lib/autocolors'
2021-12-14 16:46:07 +00:00
2021-12-21 17:39:02 +00:00
interface ShareForm {
shareString: HTMLInputElement
openButton: HTMLButtonElement
copyButton: HTMLButtonElement
2021-12-21 17:39:02 +00:00
readonly: HTMLInputElement
withscroll: HTMLInputElement
transparent: HTMLInputElement
readonlyOptions: HTMLElement
2021-12-21 17:39:02 +00:00
autoColors?: HTMLInputElement
generateIframe: HTMLInputElement
divTips: HTMLElement
radioProtocolWeb?: HTMLInputElement
radioProtocolXMPP?: HTMLInputElement
divWebOptions: HTMLDivElement
2021-12-21 17:39:02 +00:00
}
async function shareChatUrl (registerOptions: RegisterClientOptions, settings: any, video: Video): Promise<void> {
2021-12-14 16:46:07 +00:00
const peertubeHelpers = registerOptions.peertubeHelpers
const [
labelShare,
labelWeb,
labelXMPP,
labelXMPPTips,
2021-12-14 16:46:07 +00:00
labelReadonly,
labelWithscroll,
labelTransparent,
labelOBSTips,
2021-12-21 16:14:02 +00:00
labelCopy,
labelCopied,
labelError,
2021-12-21 17:12:18 +00:00
labelOpen,
labelAutocolors,
labelGenerateIframe,
labelChatFor
2021-12-14 16:46:07 +00:00
] = await Promise.all([
peertubeHelpers.translate('Share chat link'),
peertubeHelpers.translate('Web'),
peertubeHelpers.translate('Connect using XMPP'),
// eslint-disable-next-line max-len
peertubeHelpers.translate('You can connect to the room using an external XMPP account, and your favorite XMPP client.'),
2021-12-14 16:46:07 +00:00
peertubeHelpers.translate('Read-only'),
peertubeHelpers.translate('Show the scrollbar'),
peertubeHelpers.translate('Transparent background (for stream integration, with OBS for example)'),
2021-12-14 16:46:07 +00:00
// eslint-disable-next-line max-len
2021-12-21 16:14:02 +00:00
peertubeHelpers.translate('Tips for streamers: To add the chat to your OBS, generate a read-only link and use it as a browser source.'),
peertubeHelpers.translate('Copy'),
peertubeHelpers.translate('Link copied'),
peertubeHelpers.translate('Error'),
2021-12-21 17:12:18 +00:00
peertubeHelpers.translate('Open'),
peertubeHelpers.translate('Use current theme colors'),
peertubeHelpers.translate('Generate an iframe to embed the chat in a website'),
peertubeHelpers.translate('Chat for live stream:')
2021-12-14 16:46:07 +00:00
])
const defaultUri = getIframeUri(registerOptions, settings, video)
if (!defaultUri) {
return
}
2021-12-21 17:39:02 +00:00
let form: ShareForm | undefined
2021-12-14 16:46:07 +00:00
function renderContent (container: HTMLElement): void {
if (!form) {
container.childNodes.forEach(child => container.removeChild(child))
2021-12-15 14:00:39 +00:00
2021-12-21 16:14:02 +00:00
container.classList.add('peertube-plugin-livechat-shareurl-modal')
const divShareString = document.createElement('div')
divShareString.classList.add('livechat-shareurl-copy')
const shareString = document.createElement('input')
shareString.setAttribute('type', 'text')
shareString.setAttribute('readonly', '')
shareString.setAttribute('autocomplete', 'off')
shareString.setAttribute('placeholder', '')
shareString.classList.add('form-control', 'readonly')
divShareString.append(shareString)
const copyButton = document.createElement('button')
copyButton.classList.add('btn', 'btn-outline-secondary', 'text-uppercase')
copyButton.textContent = labelCopy
divShareString.append(copyButton)
const openButton = document.createElement('button')
openButton.classList.add('btn', 'btn-outline-secondary', 'text-uppercase')
openButton.textContent = labelOpen
divShareString.append(openButton)
container.append(divShareString)
2021-12-21 16:14:02 +00:00
let radioProtocolWeb
let radioProtocolXMPP
if (settings['prosody-room-allow-s2s']) {
const protocolContainer = document.createElement('div')
protocolContainer.classList.add('livechat-shareurl-protocol')
radioProtocolWeb = document.createElement('input')
radioProtocolWeb.setAttribute('type', 'radio')
radioProtocolWeb.setAttribute('value', 'web')
radioProtocolWeb.setAttribute('name', 'protocol')
const radioProtocolWebLabel = document.createElement('label')
radioProtocolWebLabel.textContent = labelWeb
radioProtocolWebLabel.prepend(radioProtocolWeb)
protocolContainer.append(radioProtocolWebLabel)
radioProtocolXMPP = document.createElement('input')
radioProtocolXMPP.setAttribute('type', 'radio')
radioProtocolXMPP.setAttribute('value', 'xmpp')
radioProtocolXMPP.setAttribute('name', 'protocol')
const radioProtocolXMPPLabel = document.createElement('label')
radioProtocolXMPPLabel.textContent = labelXMPP
radioProtocolXMPPLabel.prepend(radioProtocolXMPP)
protocolContainer.append(radioProtocolXMPPLabel)
container.append(protocolContainer)
}
2021-12-21 16:14:02 +00:00
const divTips = document.createElement('div')
divTips.textContent = ''
divTips.classList.add('livechat-shareurl-tips')
2021-12-21 16:14:02 +00:00
container.append(divTips)
2021-12-15 14:00:39 +00:00
const divWebOptions = document.createElement('div')
divWebOptions.classList.add('livechat-shareurl-web-options')
container.append(divWebOptions)
2021-12-14 16:46:07 +00:00
const readonly = document.createElement('input')
readonly.setAttribute('type', 'checkbox')
const readonlyLabelEl = document.createElement('label')
readonlyLabelEl.textContent = labelReadonly
readonlyLabelEl.prepend(readonly)
divWebOptions.append(readonlyLabelEl)
const readonlyOptions = document.createElement('div')
readonlyOptions.classList.add('livechat-shareurl-web-options-readonly')
divWebOptions.append(readonlyOptions)
2021-12-14 16:46:07 +00:00
const withscroll = document.createElement('input')
withscroll.setAttribute('type', 'checkbox')
const withscrollLabelEl = document.createElement('label')
withscrollLabelEl.textContent = labelWithscroll
withscrollLabelEl.prepend(withscroll)
readonlyOptions.append(withscrollLabelEl)
const transparent = document.createElement('input')
transparent.setAttribute('type', 'checkbox')
const transparentLabelEl = document.createElement('label')
transparentLabelEl.textContent = labelTransparent
transparentLabelEl.prepend(transparent)
readonlyOptions.append(transparentLabelEl)
2021-12-21 17:12:18 +00:00
let autoColors
if (isAutoColorsAvailable(settings['converse-theme'])) {
2021-12-21 17:12:18 +00:00
const label = document.createElement('label')
label.innerText = labelAutocolors
autoColors = document.createElement('input')
autoColors.setAttribute('type', 'checkbox')
label.prepend(autoColors)
divWebOptions.append(label)
2021-12-21 17:12:18 +00:00
}
const generateIframe = document.createElement('input')
generateIframe.setAttribute('type', 'checkbox')
const generateIframeLabelEl = document.createElement('label')
generateIframeLabelEl.textContent = labelGenerateIframe
generateIframeLabelEl.prepend(generateIframe)
divWebOptions.append(generateIframeLabelEl)
if (radioProtocolWeb) {
radioProtocolWeb.onclick = () => {
renderContent(container)
}
}
if (radioProtocolXMPP) {
radioProtocolXMPP.onclick = () => {
renderContent(container)
}
}
2021-12-14 16:46:07 +00:00
readonly.onclick = () => {
renderContent(container)
}
withscroll.onclick = () => {
renderContent(container)
}
transparent.onclick = () => {
renderContent(container)
}
2021-12-21 17:12:18 +00:00
if (autoColors) {
autoColors.onclick = () => {
renderContent(container)
}
}
generateIframe.onclick = () => {
renderContent(container)
}
2021-12-21 17:12:18 +00:00
shareString.onclick = () => {
shareString.select()
shareString.setSelectionRange(0, 99999) /* For mobile devices */
2021-12-21 16:14:02 +00:00
}
copyButton.onclick = () => {
shareString.select()
shareString.setSelectionRange(0, 99999) /* For mobile devices */
navigator.clipboard.writeText(shareString.value).then(() => {
2021-12-21 16:14:02 +00:00
peertubeHelpers.notifier.success(labelCopied)
}, () => {
peertubeHelpers.notifier.error(labelError)
})
}
openButton.onclick = () => {
2023-04-14 09:57:01 +00:00
const uri = shareString.getAttribute('open-uri') ?? shareString.value
// Don't open the url if it is an iframe!
2023-04-14 09:57:01 +00:00
if (uri.startsWith('http') || uri.startsWith('xmpp')) {
window.open(uri)
}
2021-12-21 16:14:02 +00:00
}
2021-12-14 16:46:07 +00:00
form = {
shareString,
copyButton,
openButton,
2021-12-14 16:46:07 +00:00
readonly,
withscroll,
transparent,
readonlyOptions,
autoColors,
generateIframe,
radioProtocolWeb,
radioProtocolXMPP,
divWebOptions,
divTips
2021-12-14 16:46:07 +00:00
}
2021-12-21 17:39:02 +00:00
restore(form)
2021-12-14 16:46:07 +00:00
}
2021-12-21 17:39:02 +00:00
// Saving the form state, to restore each time the modal is opened.
save(form)
2021-12-14 16:46:07 +00:00
const uriOptions: UriOptions = {
2021-12-21 17:12:18 +00:00
ignoreAutoColors: form.autoColors ? !form.autoColors.checked : true,
2021-12-14 16:46:07 +00:00
permanent: true
}
if (form.radioProtocolXMPP?.checked) {
// To minimize the height gap between the 2 modes,
// and prevent the dialog to resize and move too much,
// we use visibility instead of display
form.divTips.textContent = labelXMPPTips
form.divWebOptions.style.visibility = 'hidden'
} else {
form.divTips.textContent = labelOBSTips
form.divWebOptions.style.visibility = 'visible'
}
2021-12-14 16:46:07 +00:00
if (form.readonly.checked) {
if (form.withscroll.checked) {
uriOptions.readonly = true
} else {
uriOptions.readonly = 'noscroll'
}
if (form.transparent.checked) {
uriOptions.transparent = true
}
form.withscroll.disabled = false
form.transparent.disabled = false
form.readonlyOptions.classList.remove('livechat-shareurl-web-options-readonly-disabled')
} else {
form.withscroll.disabled = true
form.transparent.disabled = true
form.readonlyOptions.classList.add('livechat-shareurl-web-options-readonly-disabled')
2021-12-14 16:46:07 +00:00
}
let shareStringValue
2023-04-14 09:57:01 +00:00
let shareStringOpen: string | undefined
if (!form.radioProtocolXMPP?.checked) {
shareStringValue = getIframeUri(registerOptions, settings, video, uriOptions)
if (form.generateIframe.checked) {
form.openButton.disabled = true
if (shareStringValue) {
// To properly escape all attributes, we are constructing an HTMLIframeElement
const iframe = document.createElement('iframe')
iframe.setAttribute('src', shareStringValue)
iframe.setAttribute('title', labelChatFor + ' ' + 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')
shareStringValue = iframe.outerHTML
}
} else {
form.openButton.disabled = false
}
} else {
// we must generate a XMPP room address
// form.openButton.disabled = true
2023-04-14 09:57:01 +00:00
const addr = getXMPPAddr(registerOptions, settings, video)
shareStringValue = addr?.jid
shareStringOpen = addr?.uri
}
form.shareString.setAttribute('value', shareStringValue ?? '')
2023-04-14 09:57:01 +00:00
if (shareStringOpen) {
form.shareString.setAttribute('open-uri', shareStringOpen)
} else {
form.shareString.removeAttribute('open-uri')
}
2021-12-14 16:46:07 +00:00
}
2021-12-21 17:39:02 +00:00
function save (form: ShareForm): void {
if (!window.localStorage) {
return
}
const v = {
version: 1, // in case we add incompatible values in a near feature
readonly: !!form.readonly.checked,
withscroll: !!form.withscroll.checked,
transparent: !!form.transparent.checked,
autocolors: !!form.autoColors?.checked,
generateIframe: !!form.generateIframe.checked,
protocol: !form.radioProtocolWeb || form.radioProtocolWeb.checked ? 'web' : 'xmpp'
2021-12-21 17:39:02 +00:00
}
window.localStorage.setItem('peertube-plugin-livechat-shareurl', JSON.stringify(v))
}
function restore (form: ShareForm): void {
if (!window.localStorage) {
return
}
const s = window.localStorage.getItem('peertube-plugin-livechat-shareurl')
if (!s) {
return
}
let v: any
try {
v = JSON.parse(s)
if (!v || (typeof v !== 'object') || v.version !== 1) {
return
}
form.readonly.checked = !!v.readonly
form.withscroll.checked = !!v.withscroll
form.transparent.checked = !!v.transparent
2021-12-21 17:39:02 +00:00
if (form.autoColors) {
form.autoColors.checked = !!v.autocolors
}
form.generateIframe.checked = !!v.generateIframe
if (form.radioProtocolXMPP && v.protocol === 'xmpp') {
form.radioProtocolXMPP.checked = true
} else if (form.radioProtocolWeb) {
form.radioProtocolWeb.checked = true
}
2021-12-21 17:39:02 +00:00
} catch (err) {
logger.error(err as string)
}
}
2021-12-14 16:46:07 +00:00
logger.info('Opening the share modal...')
const observer = new MutationObserver(mutations => {
for (const { addedNodes } of mutations) {
addedNodes.forEach(node => {
if ((node as HTMLElement).localName === 'ngb-modal-window') {
logger.info('Detecting a new modal, checking if this is the good one...')
if (!(node as HTMLElement).querySelector) { return }
const title = (node as HTMLElement).querySelector('.modal-title')
if (!(title?.textContent === labelShare)) {
return
}
logger.info('Yes, it is the good modal!')
observer.disconnect()
const modalBodyElem: HTMLElement | null = (node as HTMLElement).querySelector('.modal-body')
if (!modalBodyElem) {
logger.error('Modal has no body... Dont know how to fill it.')
return
}
renderContent(modalBodyElem)
}
})
}
})
observer.observe(document.body, {
childList: true
})
peertubeHelpers.showModal({
2021-12-14 16:46:07 +00:00
title: labelShare,
2021-12-21 16:14:02 +00:00
content: `<p>${defaultUri ?? ''}</p>`, // incase the observer is broken...
close: true
})
2021-12-14 16:46:07 +00:00
// just in case, remove the observer after a timeout, if not already done...
setTimeout(() => {
observer.disconnect()
}, 1000)
}
export {
shareChatUrl
}