peertube-plugin-livechat/client/common/configuration/elements/channel-home.ts

84 lines
3.2 KiB
TypeScript
Raw Normal View History

2024-05-23 15:17:28 +00:00
// SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
//
// SPDX-License-Identifier: AGPL-3.0-only
import type { RegisterClientOptions } from '@peertube/peertube-types/client'
2024-05-23 15:27:49 +00:00
import { html } from 'lit'
import { customElement, property, state } from 'lit/decorators.js'
2024-05-23 14:56:11 +00:00
import { ptTr } from '../../lib/directives/translation'
2024-05-23 20:52:39 +00:00
import { Task } from '@lit/task'
import type { ChannelLiveChatInfos } from 'shared/lib/types'
import { ChannelDetailsService } from '../services/channel-details'
import { provide } from '@lit/context'
2024-05-23 14:56:11 +00:00
import { channelDetailsServiceContext } from '../contexts/channel'
import { registerClientOptionsContext } from '../../lib/contexts/peertube'
2024-05-23 15:09:58 +00:00
import { LivechatElement } from '../../lib/elements/livechat'
2024-05-23 13:52:12 +00:00
@customElement('livechat-channel-home')
2024-05-23 15:09:58 +00:00
export class ChannelHomeElement extends LivechatElement {
@provide({ context: registerClientOptionsContext })
@property({ attribute: false })
2024-05-24 12:08:48 +00:00
public registerClientOptions?: RegisterClientOptions
@state()
2024-05-24 12:08:48 +00:00
public _channels?: ChannelLiveChatInfos[]
@provide({ context: channelDetailsServiceContext })
2024-05-24 12:08:48 +00:00
private _channelDetailsService?: ChannelDetailsService
@state()
public _formStatus: boolean | any = undefined
2024-05-23 20:52:39 +00:00
private readonly _asyncTaskRender = new Task(this, {
task: async ([registerClientOptions]) => {
// 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.')
}
2024-05-23 20:52:39 +00:00
if (registerClientOptions) {
this._channelDetailsService = new ChannelDetailsService(registerClientOptions)
this._channels = await this._channelDetailsService.fetchUserChannels(username)
}
},
args: () => [this.registerClientOptions]
2024-05-23 20:52:39 +00:00
})
2024-05-23 20:52:39 +00:00
protected override render = (): unknown => {
return this._asyncTaskRender.render({
pending: () => html`<livechat-spinner></livechat-spinner>`,
error: () => html`<livechat-error></livechat-error>`,
complete: () => html`
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
<h1>
${ptTr(LOC_LIVECHAT_CONFIGURATION_TITLE)}
2024-06-04 13:54:00 +00:00
<livechat-help-button .page=${'documentation/user/streamers/channel'}>
2024-05-23 13:52:12 +00:00
</livechat-help-button>
</h1>
<p>${ptTr(LOC_LIVECHAT_CONFIGURATION_DESC)}</p>
<p>${ptTr(LOC_LIVECHAT_CONFIGURATION_PLEASE_SELECT)}</p>
<ul class="peertube-plugin-livechat-configuration-home-channels">
${this._channels?.map((channel) => html`
<li>
<a href="${channel.livechatConfigurationUri}">
2024-05-23 20:52:39 +00:00
${channel.avatar
? html`<img class="avatar channel" src="${channel.avatar.path}">`
: html`<div class="avatar channel initial gray"></div>`
}
</a>
<div class="peertube-plugin-livechat-configuration-home-info">
<a href="${channel.livechatConfigurationUri}">
<div>${channel.displayName}</div>
<div>${channel.name}</div>
</a>
</div>
</li>
`)}
</ul>
</div>
`
})
}
}