* Added: Setting to control the priority of third-party emote providers. This lets you, as an example, prioritize emotes from 7TV over BetterTTV. Note that these priorities are still secondary to emote source priorities (personal emotes > channel emotes > global emotes). (Closes #1587) * Added: Setting to replace the native player 'Clip' button with a custom button that better fits the style of the other buttons. (Closes #1580) * Fixed: Highlighting messages from users with open viewer cards not working correctly with alternating background colors enabled. (Closes #1581) * Fixed: Various directory features not working correctly. (Closes #1588) * Fixed: Emotes unlocked with channel points appearing on FFZ emote cards with the source 'CHANNEL_POINTS'. * Fixed: The Experiments UI failing to load correctly if an experiment has no name. * Experiments: Preparing for a new PubSub experiment. * API Added: `emotes.setProvider(provider: string, data: {name: string, icon: string, description: string})` for registering an emote provider. This is used by the new setting to let users customize emote provider priorities. * API Added: All modules now have a `addon_manifest` property which will contain the add-on's manifest if the module belongs to an add-on. |
||
---|---|---|
.github | ||
bin | ||
res | ||
socketserver | ||
src | ||
styles | ||
types | ||
.editorconfig | ||
.eslintrc.js | ||
.gitignore | ||
fontello.client.json | ||
fontello.config.json | ||
jsconfig.json | ||
LICENSE | ||
old_changes.html | ||
package.json | ||
pnpm-lock.yaml | ||
README.md | ||
tsconfig.json | ||
typedoc.json | ||
webpack.config.js |
FrankerFaceZ
Copyright (c) 2024 Dan Salvato LLC
Licensed under the Apache License, Version 2.0. See LICENSE.
Developing
FrankerFaceZ uses node.js to manage development dependencies and to run an HTTP server for development. This project uses the pnpm package manager. To get everything you need:
- Install node.js and pnpm
- Run
pnpm install
within the FrankerFaceZ directory.
From there, you can use npm to build FrankerFaceZ from source simply by
running pnpm build
. For development, you can instruct webpack to watch
the source files for changes and re-build automatically with pnpm start
FrankerFaceZ comes with a local development server that listens on port 8000 and it serves up local development copies of files, falling back to the CDN when a local copy of a file isn't present.
Note: The local development server uses
webpack-dev-server
internally, which self-signs a certificate for hosting content via HTTPS. You will need to ensure your browser accepts a self-signed certificate for localhost.
The user-script version of FrankerFaceZ is designed to make it easy to load from your local development server. Please switch to using the user-script version for development purposes.
Then, you must set the local storage variable ffzDebugMode
to true.
Just run the following in your console on Twitch:
localStorage.ffzDebugMode = true;
You can edit the project's icon font using the pnpm font
command. This will
create a new Fontello session, if one doesn't already exist, and open your
default web browser to Fontello so you can edit the font.
If you're running the development server with pnpm start
, you'll be able to
automatically save changes to the Fontello font by clicking Fontello's Export
button. Otherwise, you can use pnpm font:save
to download the changes
from your session.
Editor Settings
Please make sure that your editor is configured to use tabs rather than spaces
for indentation and that lines are ended with \n
. It's recommended that you
configure linting support for your editor as well.
If you're using Visual Studio Code, make sure to install the ESLint extension and add the following to your workspace settings:
{
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
]
}