peertube-plugin-livechat/client/common/configuration/templates/home.ts

79 lines
2.7 KiB
TypeScript
Raw Normal View History

2023-08-08 15:15:05 +00:00
import type { RegisterClientOptions } from '@peertube/peertube-types/client'
// Must use require for mustache, import seems buggy.
const Mustache = require('mustache')
2023-08-08 16:26:40 +00:00
/**
* Renders the livechat configuration setup home page.
2023-08-08 16:26:40 +00:00
* @param registerClientOptions Peertube client options
* @returns The page content
*/
async function renderConfigurationHome (registerClientOptions: RegisterClientOptions): Promise<string> {
2023-08-08 15:15:05 +00:00
const { peertubeHelpers } = registerClientOptions
try {
// Getting the current username in localStorage. Don't know any cleaner way to do.
const username = window.localStorage.getItem('username')
if (!username) {
throw new Error('Can\'t get the current username.')
}
2023-09-20 12:59:01 +00:00
// FIXME: if more than 100 channels, loop (or add a pagination)
2023-08-08 15:15:05 +00:00
const channels = await (await fetch(
2023-08-09 12:24:52 +00:00
'/api/v1/accounts/' + encodeURIComponent(username) + '/video-channels?start=0&count=100&sort=name',
2023-08-08 15:15:05 +00:00
{
method: 'GET',
headers: peertubeHelpers.getAuthHeader()
}
)).json()
if (!channels || !('data' in channels) || !Array.isArray(channels.data)) {
throw new Error('Can\'t get the channel list.')
}
for (const channel of channels.data) {
channel.livechatConfigurationUri = '/p/livechat/configuration/channel?channelId=' + encodeURIComponent(channel.id)
2023-08-08 15:15:05 +00:00
}
const view = {
title: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_TITLE),
description: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_DESC),
please_select: await peertubeHelpers.translate(LOC_LIVECHAT_CONFIGURATION_PLEASE_SELECT),
2023-08-08 15:15:05 +00:00
channels: channels.data
}
return Mustache.render(`
2023-09-20 12:59:01 +00:00
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
2023-08-08 15:15:05 +00:00
<h1>{{title}}</h1>
<p>{{description}}</p>
2023-09-20 13:06:34 +00:00
<p>{{please_select}}</p>
2023-09-20 12:59:01 +00:00
<ul class="peertube-plugin-livechat-configuration-home-channels">
2023-08-08 15:15:05 +00:00
{{#channels}}
<li>
<a href="{{livechatConfigurationUri}}">
2023-09-20 12:59:01 +00:00
{{#avatar}}
<img class="avatar channel" src="{{path}}">
{{/avatar}}
{{^avatar}}
<div class="avatar channel initial gray"></div>
{{/avatar}}
2023-08-08 15:15:05 +00:00
</a>
2023-09-20 12:59:01 +00:00
<div class="peertube-plugin-livechat-configuration-home-info">
<a href="{{livechatConfigurationUri}}">
<div>{{displayName}}</div>
<div>{{name}}</div>
</a>
</div>
2023-08-08 15:15:05 +00:00
</li>
{{/channels}}
</ul>
</div>
`, view) as string
} catch (err: any) {
peertubeHelpers.notifier.error(err.toString())
return ''
}
}
export {
renderConfigurationHome
2023-08-08 15:15:05 +00:00
}