<script>
import { onMount } from 'svelte';
import { parseBadges, parseEmotes } from 'emotettv';
import getTopViewersStream from './getTopViewersStream';
import './tmi.min.js';
const maxMessages = 10;
let messages = [];
let channelName;
onMount(async () => {
const { channel, channelId } = await getTopViewersStream();
channelName = channel;
const client = new tmi.Client({ channels: [ channel ] });
client.connect();
client.on('message', async (channel, tags, message) => {
if (messages.length >= maxMessages) messages.shift();
const parsedMessage = await parseEmotes(
message,
tags.emotes,
channelId,
);
const text = parsedMessage.toHtml();
const parsedBadges = await parseBadges(tags.badges, channelId)
const badges= parsedBadges.toHtml();
messages = [ ...messages, { text, badges, tags } ];
});
});
</script>
<p>
{#if !messages.length}