21ae0059a5
* Added: The FFZ Subwoofer badge now displays a user's number of subscribed months in its tool-tip. * Added: Setting to set the default sorting mode of the directory. (Have you tried the Deck add-on?) * Fixed: The location of certain player action buttons was incorrect after Twitch made changes to the player. * Changed: Badges added by add-on are now grouped by add-on in badge visibility settings. This allows users to disable all badges from a given add-on at once, and is just generally nicer to look at. * API Added: `iterateMessages()` method on the `chat` module as an easy way to iterate over all live chat messages, in case existing messages need to be modified without the overhead of tokenization. * API Added: Badges can now be stacked together for visibility purposes, similar to Twitch's native badge versions, by setting a `base_id` on each badge. * API Added: Badges can now display dynamic data on their tool-tip by using a `tooltipExtra` method. This was used to display Subwoofer subscription lengths. * API Added: New setting UI type `setting-text` that can be used to insert arbitrary markdown into settings pages. * API Changed: The `ffz_user_class` special property on messages can be an array instead of a string. * API Fixed: Add-on proxy modules are now correctly used for an add-on's sub-modules. |
||
|---|---|---|
| .github | ||
| bin | ||
| res | ||
| socketserver | ||
| src | ||
| styles | ||
| .babelrc | ||
| .eslintrc.js | ||
| .gitignore | ||
| changelog.html | ||
| fontello.client.json | ||
| fontello.config.json | ||
| jsconfig.json | ||
| LICENSE | ||
| old_changes.html | ||
| package.json | ||
| pnpm-lock.yaml | ||
| README.md | ||
| webpack.config.js | ||
FrankerFaceZ
Copyright (c) 2018 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 installwithin 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-serverinternally, which self-signs a certificate for hosting content via HTTPS. You will need to ensure your browser accepts a self-signed certificate for localhost.
To make FrankerFaceZ load from your local development server, you must set
the local storage variable ffzDebugMode to true. Just run the following
in your console on Twitch: localStorage.ffzDebugMode = true;
It should be noted that this project is not a browser extension that you would load in your browser's extensions system. You still need the FrankerFaceZ extension or user-script for your browser.
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"
]
}