@mkody/twitch-emoticons
Version:
Gets Twitch, BTTV, FFZ and 7TV emotes as well as parsing text to emotes!
233 lines (170 loc) • 12.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
<script src="scripts/nav.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav >
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BTTVEmote.html">BTTVEmote</a><ul class='methods'><li data-type='method'><a href="BTTVEmote.html#toLink">toLink</a></li><li data-type='method'><a href="BTTVEmote.html#toObject">toObject</a></li><li data-type='method'><a href="BTTVEmote.html#.fromObject">fromObject</a></li></ul></li><li><a href="Channel.html">Channel</a><ul class='methods'><li data-type='method'><a href="Channel.html#fetchBTTVEmotes">fetchBTTVEmotes</a></li><li data-type='method'><a href="Channel.html#fetchFFZEmotes">fetchFFZEmotes</a></li><li data-type='method'><a href="Channel.html#fetchSevenTVEmotes">fetchSevenTVEmotes</a></li></ul></li><li><a href="Collection.html">Collection</a><ul class='methods'><li data-type='method'><a href="Collection.html#filter">filter</a></li><li data-type='method'><a href="Collection.html#find">find</a></li><li data-type='method'><a href="Collection.html#map">map</a></li></ul></li><li><a href="Emote.html">Emote</a><ul class='methods'><li data-type='method'><a href="Emote.html#toObject">toObject</a></li></ul></li><li><a href="EmoteFetcher.html">EmoteFetcher</a><ul class='methods'><li data-type='method'><a href="EmoteFetcher.html#_cacheBTTVEmote">_cacheBTTVEmote</a></li><li data-type='method'><a href="EmoteFetcher.html#_cacheFFZEmote">_cacheFFZEmote</a></li><li data-type='method'><a href="EmoteFetcher.html#_cacheSevenTVEmote">_cacheSevenTVEmote</a></li><li data-type='method'><a href="EmoteFetcher.html#_cacheTwitchEmote">_cacheTwitchEmote</a></li><li data-type='method'><a href="EmoteFetcher.html#_getRawBTTVEmotes">_getRawBTTVEmotes</a></li><li data-type='method'><a href="EmoteFetcher.html#_getRawFFZEmoteSet">_getRawFFZEmoteSet</a></li><li data-type='method'><a href="EmoteFetcher.html#_getRawFFZEmotes">_getRawFFZEmotes</a></li><li data-type='method'><a href="EmoteFetcher.html#_getRawSevenTVEmotes">_getRawSevenTVEmotes</a></li><li data-type='method'><a href="EmoteFetcher.html#_getRawTwitchEmotes">_getRawTwitchEmotes</a></li><li data-type='method'><a href="EmoteFetcher.html#_setupChannel">_setupChannel</a></li><li data-type='method'><a href="EmoteFetcher.html#fetchBTTVEmotes">fetchBTTVEmotes</a></li><li data-type='method'><a href="EmoteFetcher.html#fetchFFZEmotes">fetchFFZEmotes</a></li><li data-type='method'><a href="EmoteFetcher.html#fetchSevenTVEmotes">fetchSevenTVEmotes</a></li><li data-type='method'><a href="EmoteFetcher.html#fetchTwitchEmotes">fetchTwitchEmotes</a></li><li data-type='method'><a href="EmoteFetcher.html#fromObject">fromObject</a></li></ul></li><li><a href="EmoteParser.html">EmoteParser</a><ul class='methods'><li data-type='method'><a href="EmoteParser.html#parse">parse</a></li></ul></li><li><a href="FFZEmote.html">FFZEmote</a><ul class='methods'><li data-type='method'><a href="FFZEmote.html#toLink">toLink</a></li><li data-type='method'><a href="FFZEmote.html#toObject">toObject</a></li><li data-type='method'><a href="FFZEmote.html#.fromObject">fromObject</a></li></ul></li><li><a href="SevenTVEmote.html">SevenTVEmote</a><ul class='methods'><li data-type='method'><a href="SevenTVEmote.html#toLink">toLink</a></li><li data-type='method'><a href="SevenTVEmote.html#toObject">toObject</a></li><li data-type='method'><a href="SevenTVEmote.html#.fromObject">fromObject</a></li></ul></li><li><a href="TwitchEmote.html">TwitchEmote</a><ul class='methods'><li data-type='method'><a href="TwitchEmote.html#toLink">toLink</a></li><li data-type='method'><a href="TwitchEmote.html#toObject">toObject</a></li><li data-type='method'><a href="TwitchEmote.html#.fromObject">fromObject</a></li></ul></li></ul>
</nav>
<div id="main">
<section class="package">
<h3>@mkody/twitch-emoticons 2.9.1</h3>
</section>
<section class="readme usertext">
<article><h1>twitch-emoticons</h1>
<p>Gets Twitch, BTTV, FFZ and 7TV emotes as well as parsing text to emotes!</p>
<h3>Migrating from upstream</h3>
<p>You must now use a Twitch user ID instead of the username to fetch user's emotes.<br>
You can use <a href="https://s.kdy.ch/twitchid/">this page to quickly grab it</a>.</p>
<p>To fetch Twitch emotes you need to get a client and secret from Twitch <a href="https://dev.twitch.tv/console/apps/create">here</a>, it's free.<br>
If you are only using BetterTTV, FrankerFaceZ and 7TV you don't need to provide Twitch app keys as they are independent from the Twitch API.</p>
<h3>Install</h3>
<pre class="prettyprint source lang-sh"><code>npm install @mkody/twitch-emoticons
# or
pnpm install @mkody/twitch-emoticons
# or
yarn add @mkody/twitch-emoticons
</code></pre>
<h3>Examples</h3>
<h4>Basic Twitch emote parsing</h4>
<pre class="prettyprint source lang-js"><code>// With ESM import
import TwitchEmoticons from '@mkody/twitch-emoticons';
const { EmoteFetcher, EmoteParser } = TwitchEmoticons;
// ... or require()
const { EmoteFetcher, EmoteParser } = require('@mkody/twitch-emoticons');
// Your Twitch app keys
const clientId = '<your client id>';
const clientSecret = '<your client secret>';
const fetcher = new EmoteFetcher(clientId, clientSecret);
const parser = new EmoteParser(fetcher, {
type: 'markdown',
match: /:(.+?):/g
});
fetcher.fetchTwitchEmotes(null).then(() => {
const kappa = fetcher.emotes.get('Kappa').toLink();
console.log(kappa);
// https://static-cdn.jtvnw.net/emoticons/v2/25/default/dark/1.0
const text = 'Hello :CoolCat:!';
const parsed = parser.parse(text);
console.log(parsed);
// Hello !
});
</code></pre>
<h4>Bring your own <code>@twurple/api</code></h4>
<p>If you already use <a href="https://twurple.js.org/">Twurple</a> in your project and manage authentification<br>
(i.e. with user tokens), you can reuse it in this project by skipping the first two paramters and<br>
setting <code>apiClient</code> with your <a href="https://twurple.js.org/reference/api/classes/ApiClient.html">ApiClient</a> object.</p>
<pre class="prettyprint source lang-js"><code>const fetcher = new EmoteFetcher(null, null, {
apiClient: yourOwnTwurpleApiClientHere
});
</code></pre>
<h4>All providers, global + channel, custom template and match pattern</h4>
<pre class="prettyprint source lang-js"><code>const { EmoteFetcher, EmoteParser } = require('@mkody/twitch-emoticons');
// Your channel ID
const channelId = 44317909;
// Your Twitch app keys
const clientId = '<your client id>';
const clientSecret = '<your client secret>';
const fetcher = new EmoteFetcher(clientId, clientSecret);
const parser = new EmoteParser(fetcher, {
// Custom HTML format
template: '<img class="emote" alt="{name}" src="{link}">',
// Match without :colons:
match: /(\w+)+?/g
});
Promise.all([
// Twitch global
fetcher.fetchTwitchEmotes(),
// Twitch channel
fetcher.fetchTwitchEmotes(channelId),
// BTTV global
fetcher.fetchBTTVEmotes(),
// BTTV channel
fetcher.fetchBTTVEmotes(channelId),
// 7TV global
fetcher.fetchSevenTVEmotes(),
// 7TV channel
fetcher.fetchSevenTVEmotes(channelId),
// FFZ global
fetcher.fetchFFZEmotes(),
// FFZ channel
fetcher.fetchFFZEmotes(channelId)
]).then(() => {
const globalEmotes = parser.parse('EZ Clap way too easy LUL now for the last boss monkaS LaterSooner');
console.log(globalEmotes);
// <img class="emote" alt="EZ" src="https://cdn.7tv.app/emote/63071b80942ffb69e13d700f/1x.webp"> <img class="emote" alt="Clap" src="https://cdn.7tv.app/emote/62fc0a0c4a75fd54bd3520a9/1x.webp"> way too easy <img class="emote" alt="LUL" src="https://static-cdn.jtvnw.net/emoticons/v2/425618/default/dark/1.0"> now for the last boss <img class="emote" alt="monkaS" src="https://cdn.betterttv.net/emote/56e9f494fff3cc5c35e5287e/1x.webp"> <img class="emote" alt="LaterSooner" src="https://cdn.frankerfacez.com/emote/149346/1">
const channelEmotes = parser.parse('KEKW that was 3Head TeriPoint');
console.log(channelEmotes);
// <img class="emote" alt="KEKW" src="https://cdn.betterttv.net/emote/5e9c6c187e090362f8b0b9e8/1x.webp"> that was <img class="emote" alt="3Head" src="https://cdn.frankerfacez.com/emote/274406/1"> <img class="emote" alt="TeriPoint" src="https://cdn.7tv.app/emote/61dc299b600369a98b38ebef/1x.webp">
}).catch(err => {
console.error('Error loading emotes...');
console.error(err);
});
</code></pre>
<h4>7TV formats</h4>
<p>7TV v3 delivers emotes in either WEBP or AVIF.<br>
By default we'll return WEBP emotes but you can override this.</p>
<pre class="prettyprint source lang-js"><code>const { EmoteFetcher } = require('@mkody/twitch-emoticons');
const fetcher = new EmoteFetcher();
// Fetch global emotes in AVIF (channel id has to be `null` for global)
await fetcher.fetchSevenTVEmotes(null, 'avif');
// Fetch 0kody's emotes with the package's default format (WEBP)
await fetcher.fetchSevenTVEmotes(44317909);
// ... which is currently the same as
await fetcher.fetchSevenTVEmotes(44317909, 'webp');
// Fetch Anatole's emotes in AVIF
await fetcher.fetchSevenTVEmotes(24377667, 'avif');
</code></pre>
<h4>Export and import emote data</h4>
<p>This can be useful to save the emotes in a cache or for offline content.<br>
(For offline content, you'll still need to download emotes and proxy their URLs.)</p>
<pre class="prettyprint source lang-js"><code>const { EmoteFetcher } = require('@mkody/twitch-emoticons');
const fetcher = new EmoteFetcher();
// First fetch some emotes
await fetcher.fetchSevenTVEmotes(null, 'avif');
// Then you can use .toObject() on an `Emote` to export its data.
// Here's a map to get them all in a single array.
const emotes = fetcher.emotes.map(emote => emote.toObject());
// Later, with or without a fresh `EmoteFetcher`, you can use .fromObject() on the fetcher.
fetcher.fromObject(emotes);
</code></pre>
<h3>Links</h3>
<ul>
<li><a href="https://github.com/mkody/twitch-emoticons">Github</a></li>
<li><a href="https://mkody.github.io/twitch-emoticons/">Documentation</a></li>
<li><a href="https://github.com/mkody/twitch-emoticons/releases">Changelog</a></li>
</ul>
<p>This library uses the following:</p>
<ul>
<li><a href="https://twurple.js.org/">Twurple</a> and the <a href="https://dev.twitch.tv/">Twitch API</a></li>
<li><a href="https://betterttv.com/developers/api">BetterTTV API</a></li>
<li><a href="https://api.frankerfacez.com/docs/">FrankerFaceZ API</a></li>
<li><a href="https://7tv.io/">7TV API</a></li>
</ul></article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.4</a> using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>
</body>
</html>