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

253 lines
8.0 KiB
JavaScript
Raw Normal View History

2021-02-20 10:55:00 +00:00
'use strict'
2021-02-19 17:21:40 +00:00
2021-02-20 17:31:21 +00:00
function register ({ registerHook, peertubeHelpers }) {
const logger = {
log: (s) => console.log('[peertube-plugin-livechat] ' + s),
info: (s) => console.info('[peertube-plugin-livechat] ' + s),
error: (s) => console.error('[peertube-plugin-livechat] ' + s),
warn: (s) => console.warn('[peertube-plugin-livechat] ' + s)
2021-02-19 17:21:40 +00:00
}
2021-02-20 17:31:21 +00:00
const videoCache = {}
let lastUUID = null
let settings = {}
2021-02-19 17:21:40 +00:00
2021-02-20 17:31:21 +00:00
function parseUUIDs (s) {
if (!s) {
return []
}
let a = s.split('\n')
a = a.map(line => {
return line.replace(/#.*$/, '')
.replace(/^\s+/, '')
.replace(/\s+$/, '')
2021-02-19 17:21:40 +00:00
})
2021-02-20 17:31:21 +00:00
return a.filter(line => line !== '')
}
2021-02-19 17:21:40 +00:00
2021-02-20 17:31:21 +00:00
function getBaseRoute () {
// 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-02-20 17:31:21 +00:00
function getIframeUri (uuid) {
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 = ''
if (!settings['chat-use-builtin']) {
iframeUri = settings['chat-uri'] || ''
iframeUri = iframeUri.replace(/{{VIDEO_UUID}}/g, uuid)
2021-02-20 17:31:21 +00:00
if (!/^https?:\/\//.test(iframeUri)) {
logger.error('The webchaturi must begin with https://')
return null
}
} else {
// Using the builtin converseJS
// FIXME: with Peertube 3.0.1 there is no loadByIdOrUUID method,
// we need to pass the complete url.
const video = videoCache[uuid]
if (video) {
const url = video.originInstanceUrl + '/videos/watch/' + uuid
iframeUri = getBaseRoute() + '/webchat?url=' + encodeURIComponent(url)
}
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-02-20 17:31:21 +00:00
function displayButton (buttons, name, label, callback) {
const button = document.createElement('button')
button.classList.add(
'action-button',
2021-02-20 15:03:44 +00:00
'peertube-plugin-livechat-stuff',
2021-02-20 17:31:21 +00:00
'peertube-plugin-livechat-button-' + name
)
2021-02-20 17:31:21 +00:00
button.setAttribute('type', 'button')
button.textContent = label
button.onclick = callback
buttons.prepend(button)
}
2021-02-19 17:21:40 +00:00
function displayChatButtons (peertubeHelpers, uuid, showOpenBlank) {
2021-02-20 17:31:21 +00:00
logger.log('Adding buttons in the DOM...')
const p = new Promise((resolve, reject) => {
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 buttons = document.querySelector('.video-actions')
const iframeUri = getIframeUri(uuid)
if (!iframeUri) {
return reject(new Error('No uri, cant display the buttons.'))
}
if (showOpenBlank) {
displayButton(buttons, 'openblank', labelOpenBlank, () => {
closeChat()
window.open(iframeUri)
})
}
2021-02-20 17:31:21 +00:00
displayButton(buttons, 'open', labelOpen, () => openChat())
displayButton(buttons, 'close', labelClose, () => closeChat())
toggleShowHideButtons(null)
resolve()
})
})
return p
}
function toggleShowHideButtons (chatOpened) {
2021-02-19 17:21:40 +00:00
// showing/hiding buttons...
2021-02-20 17:31:21 +00:00
document.querySelectorAll('.peertube-plugin-livechat-button-open')
.forEach(button => (button.style.display = (chatOpened === true || chatOpened === null ? 'none' : '')))
2021-02-19 17:21:40 +00:00
2021-02-20 17:31:21 +00:00
document.querySelectorAll('.peertube-plugin-livechat-button-close')
.forEach(button => (button.style.display = (chatOpened === false || chatOpened === null ? 'none' : '')))
}
function openChat () {
const p = new Promise((resolve, reject) => {
const uuid = lastUUID
if (!uuid) {
logger.log('No current uuid.')
return reject(new Error('No current uuid.'))
}
2021-02-19 17:21:40 +00:00
2021-02-20 17:31:21 +00:00
logger.info('Trying to load the chat for video ' + uuid + '.')
const iframeUri = getIframeUri(uuid)
if (!iframeUri) {
logger.error('Incorrect iframe uri')
return reject(new Error('Incorrect iframe uri'))
}
const additionalStyles = settings['chat-style'] || ''
logger.info('Opening the chat...')
const videoWrapper = document.querySelector('#video-wrapper')
// Creating the iframe...
const iframe = document.createElement('iframe')
iframe.setAttribute('src', iframeUri)
iframe.classList.add(
'peertube-plugin-livechat',
'peertube-plugin-livechat-stuff',
'peertube-plugin-livechat-iframe-stuff'
)
iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms')
iframe.setAttribute('frameborder', '0')
if (additionalStyles) {
iframe.setAttribute('style', additionalStyles)
}
videoWrapper.append(iframe)
2021-02-19 17:21:40 +00:00
2021-02-20 17:31:21 +00:00
// showing/hiding buttons...
toggleShowHideButtons(true)
2021-02-19 17:21:40 +00:00
2021-02-20 17:31:21 +00:00
resolve()
})
return p
2021-02-20 15:03:44 +00:00
}
2021-02-20 17:31:21 +00:00
function closeChat () {
document.querySelectorAll('.peertube-plugin-livechat-iframe-stuff')
.forEach(dom => dom.remove())
// showing/hiding buttons...
toggleShowHideButtons(false)
}
2021-02-20 17:31:21 +00:00
function initChat () {
const el = document.querySelector('#videojs-wrapper')
if (!el) {
logger.error('The required div is not present in the DOM.')
return
}
2021-02-20 17:31:21 +00:00
if (el.classList.contains('peertube-plugin-livechat-init')) {
logger.log('The chat seems already initialized...')
return
}
2021-02-20 17:31:21 +00:00
// Adding a custom class in the dom, so we know initChat was already called.
el.classList.add('peertube-plugin-livechat-init')
peertubeHelpers.getSettings().then(s => {
settings = s
const liveOn = !!settings['chat-all-lives']
const nonLiveOn = !!settings['chat-all-non-lives']
const uuids = parseUUIDs(settings['chat-videos-list'])
if (!uuids.length && !liveOn && !nonLiveOn) {
logger.log('Feature not activated.')
2021-02-20 17:31:21 +00:00
return
}
2021-02-20 17:31:21 +00:00
logger.log('Checking if this video should have a chat...')
const uuid = lastUUID
const video = videoCache[uuid]
if (!video) {
logger.error('Can\'t find the video ' + uuid + ' in the videoCache')
return
}
if (settings['chat-only-locals' && !video.isLocal]) {
logger.log('This video is not local, and we dont want chats on non local videos.')
return
}
2021-02-20 17:31:21 +00:00
if (uuids.indexOf(uuid) >= 0) {
logger.log('This video is in the list for chats.')
} else if (video.isLive && liveOn) {
logger.log('This video is live and we want all lives.')
} else if (!video.isLive && nonLiveOn) {
logger.log('This video is not live and we want all non-lives.')
} else {
2021-02-20 17:31:21 +00:00
logger.log('This video will not have a chat.')
return
}
2021-02-20 17:31:21 +00:00
displayChatButtons(peertubeHelpers, uuid, !!settings['chat-open-blank']).then(() => {
2021-02-20 17:31:21 +00:00
if (settings['chat-auto-display']) {
openChat()
} else {
toggleShowHideButtons(false)
}
})
})
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',
handler: (video) => {
// 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
}