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

245 lines
8.0 KiB
TypeScript
Raw Normal View History

import { videoHasWebchat } from 'shared/lib/video'
2021-02-19 17:21:40 +00:00
2021-04-07 16:14:58 +00:00
interface VideoCache {[key: string]: Video}
function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
2021-02-20 17:31:21 +00:00
const logger = {
2021-04-07 16:14:58 +00:00
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)
2021-02-19 17:21:40 +00:00
}
2021-04-07 16:14:58 +00:00
const videoCache: VideoCache = {}
let lastUUID: string | null = null
let settings: any = {}
2021-02-19 17:21:40 +00:00
2021-04-07 16:14:58 +00:00
function getBaseRoute (): string {
2021-02-20 17:31:21 +00:00
// FIXME: should be provided by PeertubeHelpers (does not exists for now)
// We are guessing the route with the correct plugin version with this trick:
const staticBase = peertubeHelpers.getBaseStaticRoute()
// we can't use '/plugins/livechat/router', because the loaded html page needs correct relative paths.
return staticBase.replace(/\/static.*$/, '/router')
2021-02-20 17:31:21 +00:00
}
2021-02-19 17:21:40 +00:00
2021-04-07 16:14:58 +00:00
function getIframeUri (uuid: string): string | null {
2021-02-20 17:31:21 +00:00
if (!settings) {
logger.error('Settings are not initialized, too soon to compute the iframeUri')
return null
2021-02-19 17:21:40 +00:00
}
2021-02-20 17:31:21 +00:00
let iframeUri = ''
2021-04-14 16:47:23 +00:00
if (settings['chat-use-prosody'] || settings['chat-use-builtin']) {
2021-02-20 17:31:21 +00:00
// Using the builtin converseJS
iframeUri = getBaseRoute() + '/webchat/room/' + encodeURIComponent(uuid)
2021-04-14 16:47:23 +00:00
} else if (!settings['chat-use-builtin']) {
iframeUri = settings['chat-uri'] || ''
iframeUri = iframeUri.replace(/{{VIDEO_UUID}}/g, encodeURIComponent(uuid))
2021-04-14 16:47:23 +00:00
if (!/^https?:\/\//.test(iframeUri)) {
logger.error('The webchaturi must begin with https://')
return null
}
} else {
logger.error('Dont known which url use for the iframe.')
return null
2021-02-19 17:21:40 +00:00
}
2021-02-20 17:31:21 +00:00
if (iframeUri === '') {
logger.error('No iframe uri')
return null
}
return iframeUri
}
2021-02-19 17:21:40 +00:00
2021-04-07 16:14:58 +00:00
function displayButton (
buttonContainer: HTMLElement,
name: string,
label: string,
callback: () => void | boolean,
icon: string | null
): void {
2021-02-20 17:31:21 +00:00
const button = document.createElement('button')
button.classList.add(
'peertube-plugin-livechat-button',
2021-02-20 17:31:21 +00:00
'peertube-plugin-livechat-button-' + name
)
2021-02-20 17:31:21 +00:00
button.onclick = callback
if (icon) {
2021-04-07 16:14:58 +00:00
// FIXME: remove «as string» when peertube types will be available
2021-04-09 11:08:20 +00:00
const iconUrl = peertubeHelpers.getBaseStaticRoute() + '/images/' + icon
const iconEl = document.createElement('span')
iconEl.classList.add('peertube-plugin-livechat-button-icon')
iconEl.setAttribute('style',
'background-image: url(\'' + iconUrl + '\');'
)
button.prepend(iconEl)
button.setAttribute('title', label)
} else {
button.textContent = label
}
buttonContainer.append(button)
2021-02-20 17:31:21 +00:00
}
2021-02-19 17:21:40 +00:00
2021-04-07 16:14:58 +00:00
async function insertChatDom (container: HTMLElement, uuid: string, showOpenBlank: boolean): Promise<void> {
logger.log('Adding livechat in the DOM...')
2021-04-07 16:14:58 +00:00
const p = new Promise<void>((resolve, reject) => {
// eslint-disable-next-line @typescript-eslint/no-floating-promises
2021-02-20 17:31:21 +00:00
Promise.all([
peertubeHelpers.translate('Open chat'),
peertubeHelpers.translate('Open chat in a new window'),
peertubeHelpers.translate('Close chat')
]).then(labels => {
const labelOpen = labels[0]
const labelOpenBlank = labels[1]
const labelClose = labels[2]
const iframeUri = getIframeUri(uuid)
if (!iframeUri) {
return reject(new Error('No uri, cant display the buttons.'))
}
const buttonContainer = document.createElement('div')
buttonContainer.classList.add('peertube-plugin-livechat-buttons')
container.append(buttonContainer)
2021-03-08 10:33:09 +00:00
displayButton(buttonContainer, 'open', labelOpen, () => openChat(), 'talking.svg')
if (showOpenBlank) {
displayButton(buttonContainer, 'openblank', labelOpenBlank, () => {
closeChat()
window.open(iframeUri)
2021-03-08 10:33:09 +00:00
}, 'talking-new-window.svg')
}
2021-03-08 10:33:09 +00:00
displayButton(buttonContainer, 'close', labelClose, () => closeChat(), 'bye.svg')
2021-02-20 17:31:21 +00:00
resolve()
})
})
return p
}
2021-04-07 16:14:58 +00:00
function openChat (): void | boolean {
const uuid = lastUUID
if (!uuid) {
logger.log('No current uuid.')
return false
}
2021-02-20 17:31:21 +00:00
2021-04-07 16:14:58 +00:00
logger.info('Trying to load the chat for video ' + uuid + '.')
const iframeUri = getIframeUri(uuid)
if (!iframeUri) {
logger.error('Incorrect iframe uri')
return false
}
const additionalStyles = settings['chat-style'] || ''
2021-04-07 16:14:58 +00:00
logger.info('Opening the chat...')
const container = document.getElementById('peertube-plugin-livechat-container')
if (!container) {
logger.error('Cant found the livechat container.')
return false
}
2021-02-20 17:31:21 +00:00
2021-04-07 16:14:58 +00:00
if (container.querySelector('iframe')) {
logger.error('Seems that there is already an iframe in the container.')
return false
}
2021-02-19 17:21:40 +00:00
2021-04-07 16:14:58 +00:00
// Creating the iframe...
const iframe = document.createElement('iframe')
iframe.setAttribute('src', iframeUri)
iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms')
iframe.setAttribute('frameborder', '0')
if (additionalStyles) {
iframe.setAttribute('style', additionalStyles)
}
container.append(iframe)
container.setAttribute('peertube-plugin-livechat-state', 'open')
2021-02-20 15:03:44 +00:00
}
2021-02-20 17:31:21 +00:00
2021-04-07 16:14:58 +00:00
function closeChat (): void {
const container = document.getElementById('peertube-plugin-livechat-container')
if (!container) {
logger.error('Cant close livechat, container not found.')
return
}
container.querySelectorAll('iframe')
2021-02-20 17:31:21 +00:00
.forEach(dom => dom.remove())
container.setAttribute('peertube-plugin-livechat-state', 'closed')
}
2021-04-07 16:14:58 +00:00
function initChat (): void {
const videoWrapper = document.querySelector('#video-wrapper')
if (!videoWrapper) {
2021-02-20 17:31:21 +00:00
logger.error('The required div is not present in the DOM.')
return
}
let container = videoWrapper.querySelector('#peertube-plugin-livechat-container')
if (container) {
2021-02-20 17:31:21 +00:00
logger.log('The chat seems already initialized...')
return
}
container = document.createElement('div')
container.setAttribute('id', 'peertube-plugin-livechat-container')
container.setAttribute('peertube-plugin-livechat-state', 'initializing')
videoWrapper.append(container)
2021-02-20 17:31:21 +00:00
2021-04-07 16:14:58 +00:00
peertubeHelpers.getSettings().then((s: any) => {
2021-02-20 17:31:21 +00:00
settings = s
2021-02-20 17:31:21 +00:00
logger.log('Checking if this video should have a chat...')
const uuid = lastUUID
2021-04-07 16:14:58 +00:00
if (!uuid) {
logger.error('There is no lastUUID.')
return
}
2021-02-20 17:31:21 +00:00
const video = videoCache[uuid]
if (!video) {
logger.error('Can\'t find the video ' + uuid + ' in the videoCache')
return
}
if (!videoHasWebchat(s, video)) {
logger.log('This video has no webchat')
2021-02-20 17:31:21 +00:00
return
}
2021-02-20 17:31:21 +00:00
2021-04-07 16:14:58 +00:00
insertChatDom(container as HTMLElement, uuid, !!settings['chat-open-blank']).then(() => {
2021-02-20 17:31:21 +00:00
if (settings['chat-auto-display']) {
openChat()
2021-04-07 16:14:58 +00:00
} else if (container) {
container.setAttribute('peertube-plugin-livechat-state', 'closed')
2021-02-20 17:31:21 +00:00
}
}, () => {
logger.error('insertChatDom has failed')
2021-02-20 17:31:21 +00:00
})
}, () => {
logger.error('Cant get settings')
})
2021-02-20 17:31:21 +00:00
}
2021-02-18 17:31:12 +00:00
registerHook({
2021-02-19 17:21:40 +00:00
target: 'filter:api.video-watch.video.get.result',
2021-04-07 16:14:58 +00:00
handler: (video: Video) => {
2021-02-19 17:21:40 +00:00
// For now, hooks for action:video-watch... did not receive the video object
// So we store video objects in videoCache
videoCache[video.uuid] = video
lastUUID = video.uuid
// FIXME: this should be made in action:video-watch.video.loaded.
// But with Peertube 3.0.1, this hook is not called for lives
// in WAITING_FOR_LIVE and LIVE_ENDED states.
2021-02-20 17:31:21 +00:00
initChat()
2021-02-19 17:21:40 +00:00
return video
}
})
// FIXME: this should be the correct hook for initChat...
// registerHook({
// target: 'action:video-watch.video.loaded',
// handler: () => {
2021-02-20 17:31:21 +00:00
// initChat()
// }
// })
2021-02-18 17:31:12 +00:00
}
export {
register
}