06. Using Avatars

Kiwi IRC supports showing avatars from existing services such as your wordpress or custom website with existing user profiles.

There are currently two ready to go plugins for avatars.

plugin-avatars - Locally generated avatars powered by dicebear.

plugin-avatar-uploads - Avatar uploads with supporting server side php. (for users logged in with services)

---

Custom avatar plugin

Because there are so many different implementations and avatar services you may need to implement a plugin that generates an avatar URL for each user. An image upload plugin may be beneficial to upload avatars to your website also.

As a starting point, you may use this example plugin and change it to suit your needs. You will need to generate a URL based on the username, nick, and optional account name if they are logged in.

Another option maybe to modify plugin-avatar-uploads to suit your existing avatar systems.

---

Example simple plugin

plugin-myavatars.js

kiwi.plugin('simple-avatars', (kiwi) => {
    const avatarUrl = 'https://example.com/avatars/';

    kiwi.on('irc.join', (event, net) => {
        kiwi.Vue.nextTick(() => {
            updateAvatar(net, event.nick, false);
        });
    });

    kiwi.on('irc.wholist', (event, net) => {
        let nicks = event.users.map((user) => user.nick);
        kiwi.Vue.nextTick(() => {
            nicks.forEach((nick) => {
                updateAvatar(net, nick, false);
            });
        });
    });

    kiwi.on('irc.nick', (event, net) => {
        kiwi.Vue.nextTick(() => {
            updateAvatar(net, event.new_nick, true);
        });
    });

    kiwi.on('irc.account', (event, net) => {
        kiwi.Vue.nextTick(() => {
            updateAvatar(net, event.nick, true);
        });
    });

    // This event is emitted when an avatar is first requested from the user object
    // It can be used instead of the above events (if supported by kiwiirc version)
    // Note: this event will be called in the order that the plugins are loaded into kiwiirc
    // kiwi.on('user.avatar.create', (event) => {
    //     updateAvatar(event.user, false);
    // });

    // This event is emitted when both small and large urls become empty after failing to load
    // eg by server sending 404 when trying to load the image url.
    // It can be used to make multiple plugins play nice together.
    // WARNING: Be careful not to end up in a loop.
    // kiwi.on('user.avatar.failed', (event) => {
    //     updateAvatar(event.user, false);
    // });

    kiwi.on('user.avatar.failed', (event) => {
        updateAvatar(event.user);
    });

    function updateAvatar(net, nick, _force) {
        let force = !!_force;
        let user = kiwi.state.getUser(net.id, nick);
        if (!user) {
            return;
        }

        if (!force && user.avatar && user.avatar.small) {
            return;
        }

        let lcNick = user.nick.toLowerCase();

        Object.assign(user.avatar, {
            small: avatarUrl + lcNick + '-small.png',
            large: avatarUrl + lcNick + '-large.png',
        });
    }
});

---

Example using IRCCloud Avatars

plugin-irccloud-avatars.html

<div id="irccloud_avatars" style="width:1px;height:1px;position:absolute;left:-1000px;"></div>
<script>
kiwi.plugin('irccloud-avatars', (kiwi) => {
    kiwi.on('irc.join', (event, net) => {
        kiwi.Vue.nextTick(() => {
            updateAvatar(net, event.nick);
        });
    });

    kiwi.on('irc.wholist', (event, net) => {
        const nicks = event.users.map((user) => user.nick);
        kiwi.Vue.nextTick(() => {
            nicks.forEach((nick) => {
                updateAvatar(net, nick);
            });
        });
    });

    function updateAvatar(net, nick) {
        const user = kiwi.state.getUser(net.id, nick);
        if (!user) {
            return;
        }

        if (user.avatar && user.avatar.small) {
            return;
        }

        const match = user.username.match(/^(?:uid|sid)([0-9]+)$/);
        if (!match) {
            return;
        }

        const scratch = document.querySelector('#irccloud_avatars');
        if (!scratch) {
            return;
        }

        const src = 'https://static.irccloud-cdn.com/avatar-redirect/' + match[1];
        const img = document.createElement('img');
        img.src = src;

        img.onload = function() {
            Object.assign(user.avatar, {
                small: src,
                large: '',
            });
            scratch.removeChild(img);
        };

        img.onerror = function() {
            scratch.removeChild(img);
        };

        scratch.appendChild(img);
    }
});
</script>