Add files via upload
This commit is contained in:
Rodrigo Emanuel
GitHub
674
LICENSE
Normal file
674
LICENSE
Normal file
@@ -0,0 +1,674 @@
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 3, 29 June 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU General Public License is a free, copyleft license for
|
||||
software and other kinds of works.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
the GNU General Public License is intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users. We, the Free Software Foundation, use the
|
||||
GNU General Public License for most of our software; it applies also to
|
||||
any other work released this way by its authors. You can apply it to
|
||||
your programs, too.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
To protect your rights, we need to prevent others from denying you
|
||||
these rights or asking you to surrender the rights. Therefore, you have
|
||||
certain responsibilities if you distribute copies of the software, or if
|
||||
you modify it: responsibilities to respect the freedom of others.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must pass on to the recipients the same
|
||||
freedoms that you received. You must make sure that they, too, receive
|
||||
or can get the source code. And you must show them these terms so they
|
||||
know their rights.
|
||||
|
||||
Developers that use the GNU GPL protect your rights with two steps:
|
||||
(1) assert copyright on the software, and (2) offer you this License
|
||||
giving you legal permission to copy, distribute and/or modify it.
|
||||
|
||||
For the developers' and authors' protection, the GPL clearly explains
|
||||
that there is no warranty for this free software. For both users' and
|
||||
authors' sake, the GPL requires that modified versions be marked as
|
||||
changed, so that their problems will not be attributed erroneously to
|
||||
authors of previous versions.
|
||||
|
||||
Some devices are designed to deny users access to install or run
|
||||
modified versions of the software inside them, although the manufacturer
|
||||
can do so. This is fundamentally incompatible with the aim of
|
||||
protecting users' freedom to change the software. The systematic
|
||||
pattern of such abuse occurs in the area of products for individuals to
|
||||
use, which is precisely where it is most unacceptable. Therefore, we
|
||||
have designed this version of the GPL to prohibit the practice for those
|
||||
products. If such problems arise substantially in other domains, we
|
||||
stand ready to extend this provision to those domains in future versions
|
||||
of the GPL, as needed to protect the freedom of users.
|
||||
|
||||
Finally, every program is threatened constantly by software patents.
|
||||
States should not allow patents to restrict development and use of
|
||||
software on general-purpose computers, but in those that do, we wish to
|
||||
avoid the special danger that patents applied to a free program could
|
||||
make it effectively proprietary. To prevent this, the GPL assures that
|
||||
patents cannot be used to render the program non-free.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Use with the GNU Affero General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU Affero General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the special requirements of the GNU Affero General Public License,
|
||||
section 13, concerning interaction through a network will apply to the
|
||||
combination as such.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If the program does terminal interaction, make it output a short
|
||||
notice like this when it starts in an interactive mode:
|
||||
|
||||
<program> Copyright (C) <year> <name of author>
|
||||
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
||||
This is free software, and you are welcome to redistribute it
|
||||
under certain conditions; type `show c' for details.
|
||||
|
||||
The hypothetical commands `show w' and `show c' should show the appropriate
|
||||
parts of the General Public License. Of course, your program's commands
|
||||
might be different; for a GUI interface, you would use an "about box".
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU GPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
|
||||
The GNU General Public License does not permit incorporating your program
|
||||
into proprietary programs. If your program is a subroutine library, you
|
||||
may consider it more useful to permit linking proprietary applications with
|
||||
the library. If this is what you want to do, use the GNU Lesser General
|
||||
Public License instead of this License. But first, please read
|
||||
<https://www.gnu.org/licenses/why-not-lgpl.html>.
|
||||
106
README.md
Normal file
106
README.md
Normal file
@@ -0,0 +1,106 @@
|
||||
# 💬 ChatRD
|
||||
|
||||
ChatRD is a chat overlay widget for OBS that unifies messages and events from **Twitch**, **YouTube**, **TikTok** (and more to come).
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Features
|
||||
|
||||
- 💬 **Multi-platform chat**
|
||||
- 💬 **Multi-language events**
|
||||
- 📊 **Events and Live stats**
|
||||
- 🎨 **Customizable**
|
||||
- 💾 **Saves your settings using localStorage and Streamer.Bot's Global Varaibles**
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Usage
|
||||
|
||||
1. Make sure your **Twitch** and **YouTube** accounts are connected on **Streamer.bot** and you have **TikFinity Desktop App** installed and set up to your account on **TikTok**. **BOTH APPS NEED TO RUN ON THE SAME PC**.
|
||||
2. In **Streamer.bot**, go to **Server/Clients → WebSocket Server** and make sure it is running
|
||||
3. Import the string inside the file [streamerbot-import.vortisrd](https://github.com/vortisrd/chatrd/blob/main/streamerbot-import.vortisrd) to your **Streamer.bot** using the **Import** button at the top.
|
||||
4. Open the [Settings Page](https://vortisrd.github.io/chatrd) in your browser
|
||||
5. Choose your desired options
|
||||
6. Click **"Copy URL"**
|
||||
7. Add a Browser Source in OBS and paste the link
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ How to Use it in a Local Network
|
||||
|
||||
1. On **Streamer.bot**, go to **Server/Clients → WebSocket Server** and make sure the Address is set to the Local Network IP from the PC, for example **192.168.0.10** ... or, if you prefer, use 0.0.0.0.
|
||||
2. On the [Settings Page](https://vortisrd.github.io/chatrd), make sure you set that IP on **Streamer.bot WebSocket Server**.
|
||||
3. Turn the **"Run Locally"** switch on.
|
||||
4. Click **"Copy URL"**
|
||||
5. [Download ChatRD](https://github.com/vortisrd/chatrd/archive/refs/heads/main.zip) on the machine you want to see the chat on or want to set up OBS in, unzipping the file.
|
||||
6. Open it on your browser or add it in OBS as Browser Source (don't tick **Local File**)following the file trail, for example: **file:///C:/PATH_TO_THE_FILE/chat.html**.
|
||||
7. After **chat.html**, paste the URL copied from the configurator. The full link should be like this: **file:///C:/PATH_TO_THE_FILE/chat.html?language=ptbr&showPlatform=true&showAvatar=true&showTimestamps=false&showBadges=true&showPlatformStatistics=false&excludeCommands=true&showTwitchMessages=true&showTwitchFollows=true&showTwitchBits=true&showTwitchAnnouncements=true&showTwitchSubs=true&showTwitchGiftedSubs=true&showTwitchMassGiftedSubs=true&showTwitchGiftedSubsUserTrain=true&showTwitchRewardRedemptions=true&showTwitchRaids=true&showTwitchSharedChat=true&showTwitchViewers=true&showYouTubeMessages=true&showYouTubeSuperChats=true&showYouTubeSuperStickers=false&showYouTubeMemberships=true&showYouTubeGiftMemberships=true&showYouTubeMembershipsTrain=true&showYouTubeStatistics=true&showTikTokMessages=true&showTikTokFollows=true&showTikTokGifts=true&showTikTokSubs=true&showTikTokStatistics=true&showStreamlabsDonations=true&showStreamElementsTips=true&ignoreChatters=&streamerBotServerAddress=127.0.0.1&streamerBotServerPort=8080&=&hideAfter=0**
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 🧩 Integrations
|
||||
|
||||
- 🟣 **Twitch** (via Streamer.bot)
|
||||
- 🔴 **YouTube** (via Streamer.bot)
|
||||
- ⚫ **TikTok** (via TikFinity Desktop App)
|
||||
- 💸 **Streamlabs / StreamElements**
|
||||
|
||||
---
|
||||
|
||||
## 📦 Dependencies
|
||||
|
||||
- [Streamer.bot](https://streamer.bot)
|
||||
- [Streamer.bot Client JS](https://streamerbot.github.io/client/)
|
||||
- [TikFinity Desktop App](https://tikfinity.zerody.one/)
|
||||
- [Font Awesome](https://fontawesome.com/)
|
||||
- [Animate.css](https://animate.style/)
|
||||
- [Simple Notify](https://simple-notify.github.io/simple-notify/)
|
||||
- [DOMPurify](https://github.com/cure53/DOMPurify)
|
||||
|
||||
---
|
||||
|
||||
## 📝 To-Do List
|
||||
|
||||
- Trovo
|
||||
- Kick
|
||||
- Patreon
|
||||
- Ko-Fi
|
||||
- TipeeeStream
|
||||
- Fourthwall
|
||||
- LivePix
|
||||
- Tipa.Ai
|
||||
|
||||
---
|
||||
|
||||
## **⚠️ DISCLAIMERS ⚠️**
|
||||
|
||||
### About YouTube Membership Emojis
|
||||
I tried to add member emotes but **that is currently impossible due to YouTube's API not exposing Members Emotes and with that, Streamer.bot won't be able to show them.**. So I've added a way for the users to add them manually at the overlay, with the data saved as a Streamer.Bot Global Variable.
|
||||
|
||||
What Casterlabs Caffeinated, Social Stream Ninja and Onecomme do to scrape the emotes won't work with the current way Streamer.bot and my code works, so I had to choose between **making the user add them manually** or build a **server-sided executable (using NodeJS, Python or whatever) to read the chat as it's going or scrape the HTML code**. I don't want to add another executable on top of the user's flow, so it would be easier to use what it's currently available. **And no, I won't do any research based on what other tools do.** Tried to do that and wasted 1 week of my life doing it.
|
||||
|
||||
When YouTube decide to expose their Partner Emotes on their API, I'll come back to this.
|
||||
|
||||
### About Custom Styling
|
||||
The safest way to customize ChatRD is open either the Chat or the Config in your browser and use [it's Dev Tools](https://cdn.discordapp.com/attachments/1360070885620453496/1363850037276180591/image.png?ex=680a2ad3&is=6808d953&hm=aac3045c97602afcb7eacf207eb73bccf036348a2daf27ced49f1e422f380f7a&format=webp&quality=lossless&width=1872&height=541) to look for the tags, their classes, identifiers and then style in the way you want. **You need basic CSS knowledge for that**.
|
||||
|
||||
After you finish it, paste the CSS inside the [Custom CSS field within Browser Source Property Window](https://media.discordapp.net/attachments/1360070885620453496/1363577945117032578/image.png?ex=6809d62c&is=680884ac&hm=fe81c53d8b144ca48506ff5d143dbb3a43cabefbb55e4d4b19943a9607f2bf96&=&format=webp&quality=lossless&width=994&height=960).
|
||||
|
||||
### About Support on Changing the Javascript or other Core Files
|
||||
If you break it, you fix it. 😊
|
||||
|
||||
|
||||
---
|
||||
|
||||
## ✨ Credits
|
||||
|
||||
Made with ❤️ by **VortisRD**
|
||||
|
||||
🔗 [GitHub](https://github.com/vortisrd) • [Twitch](https://twitch.tv/vortisrd) • [YouTube](https://youtube.com/@vortisrd) • [TikTok](https://tiktok.com/@vortisrd) • [Twitter / X](https://twitter.com/vortisrd)
|
||||
|
||||
Heavily inspired by [Nutty](https://nutty.gg)
|
||||
|
||||
🔗 [GitHub](https://github.com/nuttylmao) • [Twitch](https://twitch.tv/nutty) • [YouTube](https://youtube.com/@nuttylmao) • [TikTok](https://tiktok.com/@nuttylmao) • [Twitter / X](https://x.com/nuttylmao)
|
||||
73
chat.html
Normal file
73
chat.html
Normal file
@@ -0,0 +1,73 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ChatRD</title>
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-notify@1.0.4/dist/simple-notify.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
||||
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="statistics">
|
||||
<div class="platform" id="twitch">
|
||||
<i class="fa-brands fa-twitch"></i>
|
||||
<span class="viewers"><i class="fa-solid fa-user"></i> <span>0</span></span>
|
||||
</div>
|
||||
|
||||
<div class="platform" id="youtube">
|
||||
<i class="fa-brands fa-youtube"></i>
|
||||
<span class="viewers"><i class="fa-solid fa-user"></i> <span>0</span></span>
|
||||
<span class="likes"><i class="fa-solid fa-thumbs-up"></i> <span>0</span></span>
|
||||
</div>
|
||||
|
||||
<div class="platform" id="tiktok">
|
||||
<i class="fa-brands fa-tiktok"></i>
|
||||
<span class="viewers"><i class="fa-solid fa-user"></i> <span>0</span></span>
|
||||
<span class="likes"><i class="fa-solid fa-heart"></i> <span>0</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="chat">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.5/dist/purify.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/simple-notify@1.0.4/dist/simple-notify.min.js"></script>
|
||||
<script src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
|
||||
|
||||
|
||||
<script src="js/lang/ptbr.js"></script>
|
||||
<script src="js/lang/en.js"></script>
|
||||
<script src="js/lang/es.js"></script>
|
||||
|
||||
<script src="js/lang/lang.js"></script>
|
||||
|
||||
|
||||
<script src="js/app-mockup.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
|
||||
<script src="js/twitch/module.js"></script>
|
||||
<script src="js/youtube/module.js"></script>
|
||||
<script src="js/tiktok/module.js"></script>
|
||||
|
||||
<script src="js/streamlabs/module.js"></script>
|
||||
<script src="js/streamelements/module.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
400
css/app.css
Normal file
400
css/app.css
Normal file
@@ -0,0 +1,400 @@
|
||||
/* Basic reset and styling */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sn-notify-outline { --sn-notify-background-color: #27272a; }
|
||||
.sn-notify-outline .sn-notify-title { --sn-notify-title-color: #FFFFFF; }
|
||||
.sn-notify-outline .sn-notify-text { --sn-notify-text-color: rgba(255,255,255,0.5); }
|
||||
|
||||
/* Full-page container styling */
|
||||
html {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
font-family: "Inter", sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-color: #121212;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#chat {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#chat .message {
|
||||
color: #FFF;
|
||||
font-size: 18px;
|
||||
line-height: 150%;
|
||||
text-shadow: 2px 2px 2px rgba(0,0,0,0.75);
|
||||
transition: all ease-in-out 300ms;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#chat .message img {
|
||||
height: 22px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#chat .message .text img.gigantify {
|
||||
height: 84px;
|
||||
display: block;
|
||||
margin: 10px 0 5px 0;
|
||||
}
|
||||
|
||||
#chat .message .user { font-weight: bold; }
|
||||
|
||||
#chat .message .time {
|
||||
display: inline-block;
|
||||
background: rgba(0,0,0,0.5);
|
||||
font-size: 12px;
|
||||
padding: 0px 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#chat .message .avatar {
|
||||
display: inline-block;
|
||||
margin: 2px 0px;
|
||||
}
|
||||
|
||||
#chat .message .avatar img {
|
||||
height: 28px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
#chat .message .platform {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #000;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 18px;
|
||||
transform: translateY(2px);
|
||||
border-radius: 5px;
|
||||
text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
#chat .message .badges i {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #000;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
margin: 0 5px 0 0;
|
||||
text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
#chat .message .reply {
|
||||
max-width: 100%;
|
||||
flex-basis: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#chat .message .reply i {
|
||||
transform: rotate(90deg);
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
|
||||
#chat .message .shared {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
text-shadow: none;
|
||||
font-size: 14px;
|
||||
margin: 2px 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#chat .message .shared span {
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
padding: 2px 10px 2px 5px;
|
||||
background: #a970ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#chat .message .shared i {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
|
||||
#chat .message.event {
|
||||
text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#chat .message.event .platform {
|
||||
background: none;
|
||||
margin: 2px 7px 0 6px;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
#chat .message.event > div {
|
||||
padding: 5px 15px 5px 5px;
|
||||
margin: 2px 0 0 0;
|
||||
border-radius: 5px;
|
||||
background: rgba(0,0,0,0.15);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*#chat .message.twitch .platform { background: #a970ff; }*/
|
||||
|
||||
#chat .message.twitch .platform { color: #a970ff; background: transparent !important; text-shadow: 0px 0px 0px #a970ff;}
|
||||
#chat .message.twitch .platform::after {
|
||||
content: '';
|
||||
background: #FFF;
|
||||
width: 11px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
transform: translate(1px,-3px);
|
||||
}
|
||||
#chat .message.twitch.event .platform {
|
||||
color: #FFF;
|
||||
}
|
||||
#chat .message.twitch.event .platform::after {
|
||||
background: transparent;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
#chat .message.twitch .badges img { margin: 0 2px; }
|
||||
#chat .message.twitch.event > div {
|
||||
background: rgba(169,112,255,0.85);
|
||||
background: linear-gradient(180deg, rgba(169,112,255,0.85) 0%, rgba(95,67,138,0.85) 100%);
|
||||
}
|
||||
#chat .message.twitch.event .platform { background: transparent; }
|
||||
|
||||
#chat .message.twitch.announcement > div {
|
||||
padding: 10px 15px 13px 10px;
|
||||
display: inline-block;
|
||||
border-bottom: 2px solid #ffcc00;
|
||||
background: rgba(18,18,18,0.85);
|
||||
background: linear-gradient(180deg, rgba(18,18,18,0.85) 1%, rgba(0,0,0,0.85) 100%);
|
||||
}
|
||||
|
||||
#chat .message.twitch.announcement .reply {
|
||||
padding: 2px;
|
||||
color: #ffcc00;
|
||||
}
|
||||
|
||||
#chat .message.twitch.announcement .reply i {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
#chat .message.twitch.announcement .platform {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#chat .message.twitch.rewards-redemption > div {
|
||||
padding: 10px 15px 13px 10px;
|
||||
display: inline-block;
|
||||
border-bottom: 2px solid #ffcc00;
|
||||
background: rgba(18,18,18,0.85);
|
||||
background: linear-gradient(180deg, rgba(18,18,18,0.85) 1%, rgba(0,0,0,0.85) 100%);
|
||||
}
|
||||
#chat .message.twitch.rewards-redemption .reply {
|
||||
padding: 2px;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#chat .message.twitch.rewards-redemption .reply i {
|
||||
transform: rotate(0deg);
|
||||
color: #ffcc00;
|
||||
}
|
||||
|
||||
#chat .message.twitch.rewards-redemption .platform {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*#chat .message.youtube .platform { background: #ff0000; }*/
|
||||
#chat .message.youtube .platform { color: #FF0000; background: transparent !important; }
|
||||
#chat .message.youtube .platform::after { content: ''; background: #FFF; width: 5px; height: 5px; position: absolute; z-index: -1; }
|
||||
|
||||
#chat .message.youtube.event .platform { color: #FFF; }
|
||||
#chat .message.youtube.event .platform::after { background: transparent; }
|
||||
|
||||
#chat .message.youtube.event > div {
|
||||
background: rgba(255,0,0,0.85);
|
||||
background: linear-gradient(180deg, rgba(255,0,0,0.85) 1%, rgba(136,0,0,0.85) 100%);
|
||||
}
|
||||
#chat .message.youtube.event .platform { background: transparent; }
|
||||
|
||||
|
||||
#chat .message.youtube.owner .user {
|
||||
background: #ffd600;
|
||||
color: #121212 !important;
|
||||
border-radius: 5px;
|
||||
padding: 2px 5px;
|
||||
margin-right: 5px;
|
||||
text-shadow: 2px 2px 2px rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
#chat .message.youtube.owner .badges i.fa-solid.fa-video { background: #ff0000 }
|
||||
|
||||
#chat .message.youtube.mod .user { color: #5e84f1 !important; }
|
||||
#chat .message.youtube.mod .badges i.fa-solid.fa-wrench { background: #5e84f1 }
|
||||
|
||||
#chat .message.youtube.sub .user { color: #2ba640 !important; }
|
||||
#chat .message.youtube.sub .badges i.fa-solid.fa-star { background: #2ba640; }
|
||||
|
||||
#chat .message.youtube .badges i.fa-solid.fa-check { background: #999; }
|
||||
|
||||
|
||||
#chat .message.youtube.event.supersticker > div .platform { order: 1; }
|
||||
#chat .message.youtube.event.supersticker > div .sticker {
|
||||
order: 2;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
filter: drop-shadow(0px 0px 6px rgba(0,0,0,1));
|
||||
padding: 5px 10px 5px 0;
|
||||
}
|
||||
#chat .message.youtube.event.supersticker > div .sticker img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#chat .message.youtube.event.supersticker > div .info { order: 3; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#chat .message.streamlabs .platform { background: #80f5d2; }
|
||||
#chat .message.streamlabs.event > div {
|
||||
background: rgba(128,245,210,0.85);
|
||||
background: linear-gradient(180deg, rgba(128,245,210,0.85) 1%, rgba(8,108,78,0.85) 100%);
|
||||
}
|
||||
#chat .message.streamlabs.event .platform { background: transparent; }
|
||||
|
||||
|
||||
|
||||
#chat .message.streamelements .platform { background: #2700ff; }
|
||||
#chat .message.streamelements.event > div {
|
||||
background: rgba(39,0,255,0.85);
|
||||
background: linear-gradient(180deg, rgba(39,0,255,0.85) 1%, rgba(13,0,88,0.85) 100%);
|
||||
}
|
||||
#chat .message.streamelements.event .platform { background: transparent; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*#chat .message.tiktok .platform { background: #000; }*/
|
||||
#chat .message.tiktok .platform { color: #FFF; background: transparent !important; }
|
||||
|
||||
#chat .message.tiktok.event > div {
|
||||
background: rgba(255,0,80,0.85);
|
||||
background: linear-gradient(180deg, rgba(255,0,80,0.85) 1%, rgba(120,0,38,0.85) 100%);
|
||||
}
|
||||
#chat .message.tiktok.event .platform { background: transparent; }
|
||||
|
||||
#chat .message.tiktok.mod .badges i.fa-solid.fa-wrench {
|
||||
background: #121212;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#chat.horizontal {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: max-content;
|
||||
right: 0;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#statistics {
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
top: 0; left: 0;
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: flex-end;
|
||||
backdrop-filter: blur(5px);
|
||||
font-weight: bold;
|
||||
-webkit-mask-image: linear-gradient(to top, transparent, black 40%);
|
||||
mask-image: linear-gradient(to top, transparent, black 40%);
|
||||
}
|
||||
|
||||
|
||||
#statistics .platform {
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
padding: 10px 15px;
|
||||
border-radius: 100px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
#statistics .platform i.fa-brands {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#statistics .platform > span {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
#statistics .platform#twitch {
|
||||
background: #a970ff;
|
||||
}
|
||||
|
||||
#statistics .platform#youtube {
|
||||
background: #FF0000;
|
||||
}
|
||||
|
||||
#statistics .platform#tiktok {
|
||||
background: #ff0050;
|
||||
}
|
||||
413
css/settings.css
Normal file
413
css/settings.css
Normal file
@@ -0,0 +1,413 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
overflow-wrap: break-word;
|
||||
background-color: #121212;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a { color: #ffcc00; }
|
||||
|
||||
|
||||
#chat-divided {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
#chat-settings { width: 640px; }
|
||||
#chat-preview { width: calc(100% - 640px); }
|
||||
|
||||
#chat-preview iframe {
|
||||
position: sticky;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.url-bar {
|
||||
margin: 20px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.url-bar input[type=text] {
|
||||
font-family: "Inter", sans-serif;
|
||||
border: none;
|
||||
background: #171717;
|
||||
color: #FFF;
|
||||
padding: 15px 30px;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.url-bar button {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
margin-top: 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
background: #252525;
|
||||
color: #FFF;
|
||||
transition: .4s;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.url-bar button:hover {
|
||||
background: #292929;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 20px 30px;
|
||||
border-radius: 20px;
|
||||
background: #171717;
|
||||
margin: 20px auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tab-content h2 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 20px;
|
||||
padding: 15px 0px;
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
|
||||
.tab-content h2 i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tab-content .setting {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 0px;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tab-content .setting.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-content .setting.column label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-content .setting.column .emote-list {
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* allow items to wrap */
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.tab-content .setting.column .emote-list .emote-item {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background: #222;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.tab-content .setting.column .emote-list .emote-item button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
border-radius: 10px;
|
||||
|
||||
transition: .4s;
|
||||
|
||||
text-align: center;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-content .setting.column .emote-list .emote-item button.add {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
right: unset;
|
||||
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.tab-content .setting.column .emote-list .emote-item button.add:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.tab-content .setting.column .emote-list .emote-item button.add i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.tab-content .setting.column .emote-list .emote-item em {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.tab-content .setting.column .emote-list .emote-item img {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
|
||||
.tab-content .setting i {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.tab-content .setting i.fa-arrow-turn-up {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
||||
.tab-content .setting small { color: #777; }
|
||||
|
||||
.tab-content .setting input[type=text],
|
||||
.tab-content .setting input[type=number],
|
||||
.tab-content .setting textarea {
|
||||
font-family: "Inter", sans-serif;
|
||||
border: none;
|
||||
background:#222;
|
||||
color: #FFF;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tab-content .setting textarea {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.tab-content .setting.select select {
|
||||
font-family: "Inter", sans-serif;
|
||||
border: none;
|
||||
background:#222;
|
||||
color: #FFF;
|
||||
padding: 10px 20px 10px 10px;
|
||||
border-radius: 10px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tab-content .setting .switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
.tab-content .setting .switch input[type=checkbox] {
|
||||
opacity: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* The slider */
|
||||
.tab-content .setting .slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #CCC;
|
||||
transition: .4s;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.tab-content .setting .slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 1.3em;
|
||||
width: 1.2em;
|
||||
border-radius: 16px;
|
||||
left: 5px;
|
||||
top: 3px;
|
||||
bottom: 0;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.tab-content .setting input[type=checkbox]:checked + .slider {
|
||||
background-color: #03c4de;
|
||||
}
|
||||
|
||||
.tab-content .setting input[type=checkbox]:checked + .slider:before {
|
||||
transform: translateX(1.4em);
|
||||
}
|
||||
|
||||
.tab-content#twitch .setting input[type=checkbox]:checked + .slider {
|
||||
background-color: #a970ff;
|
||||
}
|
||||
.tab-content#youtube .setting input[type=checkbox]:checked + .slider {
|
||||
background-color: #FF0000;
|
||||
}
|
||||
.tab-content#tiktok .setting input[type=checkbox]:checked + .slider {
|
||||
background-color: #ff0050;
|
||||
}
|
||||
|
||||
.tab-content#extras .setting input[type=checkbox]:checked + .slider {
|
||||
background-color: #00dd63;
|
||||
}
|
||||
|
||||
.tab-content .setting input[type=checkbox]:disabled + .slider {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
padding: 20px;
|
||||
background: rgba(18,18,18,0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
display: inline-block;
|
||||
margin: 10px 5px;
|
||||
font-size: 20px;
|
||||
color: #ffcc00;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
#chat-divided {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#chat-settings {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#chat-settings .field {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chat-settings .field input {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#chat-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer { font-size: 12px; }
|
||||
}
|
||||
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #121212;
|
||||
padding: 1.5em;
|
||||
border-radius: 1em;
|
||||
width: 640px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
|
||||
.modal-content input[type=text],
|
||||
.modal-content input[type=number],
|
||||
.modal-content textarea {
|
||||
font-family: "Inter", sans-serif;
|
||||
border: none;
|
||||
background:#222;
|
||||
color: #FFF;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
outline: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.modal-content button {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
margin-top: 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
background: #252525;
|
||||
color: #FFF;
|
||||
transition: .4s;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.modal-content #confirmAddEmote {
|
||||
background: #00dd63;
|
||||
}
|
||||
|
||||
.modal-content #cancelAddEmote {
|
||||
background: #ff0000;
|
||||
}
|
||||
|
||||
.modal-content h3 {
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
|
||||
.modal-content label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1em;
|
||||
}
|
||||
153
index.html
Normal file
153
index.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ChatRD - Config</title>
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-notify@1.0.4/dist/simple-notify.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
||||
|
||||
<link rel="stylesheet" href="css/settings.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="chat-divided">
|
||||
<div id="chat-settings">
|
||||
<h1>ChatRD - Setup</h1>
|
||||
|
||||
|
||||
<div class="tab-content" id="config">
|
||||
<h2><i class="fa-solid fa-screwdriver-wrench"></i> Config</h2>
|
||||
<div class="setting field"><label>Streamer.bot WebSocket Server</label><input type="text" name="streamerBotServerAddress" value="127.0.0.1"></div>
|
||||
<div class="setting field"><label>Streamer.bot WebSocket Port</label><input type="text" name="streamerBotServerPort" value="8080"></div>
|
||||
<div class="setting"><label>Run Locally<br><small>In case you want to download ChatRD to run locally or over the network.<br><a target="_blank" href="https://github.com/vortisrd/chatrd?tab=readme-ov-file#%EF%B8%8F-how-to-use-in-a-local-network--como-usar-em-rede-local">Follow the tutorial.</a></small></label><label class="switch"><input type="checkbox" name="runThisLocally"><span class="slider"></span></label></div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="geral">
|
||||
<h2><i class="fa-solid fa-gears"></i> General</h2>
|
||||
<div class="setting select">
|
||||
<label>Language<br><small>Change the chat's events language.</small></label>
|
||||
<select name="language">
|
||||
<option value="ptbr">Brazilian Portuguese</option>
|
||||
<option value="en" selected>English</option>
|
||||
<option value="es">Spanish</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting"><label>Events Mockup<br><small>Will show random fake events when Streamer.bot is <strong><u>offline</u></strong>.</small></label></label><label class="switch"><input type="checkbox" name="eventsMockup"><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Horizontal Direction<br><small>Chat/Events will be horizontal.</small></label></label><label class="switch"><input type="checkbox" name="chatHorizontal"><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Platforms<br><small>Shows the platforms icons.</small></label></label><label class="switch"><input type="checkbox" name="showPlatform" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Avatars</label><label class="switch"><input type="checkbox" name="showAvatar" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Timestamps</label><label class="switch"><input type="checkbox" name="showTimestamps" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> AM/PM</label><label class="switch"><input type="checkbox" name="ampmTimeStamps"><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Badges</label><label class="switch"><input type="checkbox" name="showBadges" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Platform Statistics<br><small>Shows all platform statistics.</small></label><label class="switch"><input type="checkbox" name="showPlatformStatistics" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Ignore Commands<br><small>Ignores texts starting with "!".</small></label><label class="switch"><input type="checkbox" name="excludeCommands" checked><span class="slider"></span></label></div>
|
||||
<div class="setting field"><label>Ignore Chatters<br><small>Separate their names by commas. eg.: StreamLabs,StreamElements</small></label><input type="text" name="ignoreChatters" value="Streamlabs,Streamelements"></div>
|
||||
<div class="setting field"><label>Hide Chat Msg<br><small>Hides a message after X seconds. (0 disables it)</small></label><input type="number" name="hideAfter" value="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="twitch">
|
||||
<h2><i class="fa-brands fa-twitch"></i> Twitch</h2>
|
||||
<div class="setting"><label>Chat</label><label class="switch"><input type="checkbox" name="showTwitchMessages" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Followers</label><label class="switch"><input type="checkbox" name="showTwitchFollows" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Bits</label><label class="switch"><input type="checkbox" name="showTwitchBits" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Announcements</label><label class="switch"><input type="checkbox" name="showTwitchAnnouncements" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Subscriptions<br><small>Show Subscription events. <u><strong>Disabling this disables all sub events</strong></u>.</small></label><label class="switch"><input type="checkbox" name="showTwitchSubs" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Subs<br><small>When a user gifts another user a sub.</small></label><label class="switch"><input type="checkbox" name="showTwitchGiftedSubs" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Bomb<br><small>When a user gifts subs massively.</small></label><label class="switch"><input type="checkbox" name="showTwitchMassGiftedSubs" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Bomb Users Train<br><small>Shows all users that were gifted a sub on a Gifted Bomb.</small></label><label class="switch"><input type="checkbox" name="showTwitchGiftedSubsUserTrain" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Channel Point Rewards</label><label class="switch"><input type="checkbox" name="showTwitchRewardRedemptions" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Raids</label><label class="switch"><input type="checkbox" name="showTwitchRaids" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Shared Chat</label><label class="switch"><input type="checkbox" name="showTwitchSharedChat" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Viewers</label><label class="switch"><input type="checkbox" name="showTwitchViewers" checked><span class="slider"></span></label></div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="youtube">
|
||||
<h2><i class="fa-brands fa-youtube"></i> YouTube</h2>
|
||||
<div class="setting"><label>Chat</label><label class="switch"><input type="checkbox" name="showYouTubeMessages" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>SuperChat</label><label class="switch"><input type="checkbox" name="showYouTubeSuperChats" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Super Sticker</label><label class="switch"><input type="checkbox" name="showYouTubeSuperStickers" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Show Super Sticker GIF</label><label class="switch"><input type="checkbox" name="showYouTubeSuperStickerGif" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Membership<br><small>Show Membership events. <u><strong>Disabling this disables all member events</strong></u>.</small></label><label class="switch"><input type="checkbox" name="showYouTubeMemberships" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Membership<br><small>Shows the person gifting members.</small></label><label class="switch"><input type="checkbox" name="showYouTubeGiftMemberships" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Membership Train<br><small>Shows all users that were gifted a membership on a massive gifting membership.</small></label><label class="switch"><input type="checkbox" name="showYouTubeMembershipsTrain" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Statistics<br><small>Shows viewers and likes.</small></label><label class="switch"><input type="checkbox" name="showYouTubeStatistics" checked><span class="slider"></span></label></div>
|
||||
<div class="setting column">
|
||||
<label>Members Only Emotes<br><small>Because YouTube's API doesn't expose Partner Custom Emotes. <em>Really YouTube!?</em> 🤨<br><em id="memberemotesbstatus" style="font-style: normal; font-weight: bold; color: #ff0000;">Streamer.Bot Needs to be Online!</em></small></label>
|
||||
<div class="emote-list">
|
||||
|
||||
<span class="emote-item">
|
||||
<button class="add"><i class="fa-solid fa-plus"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Textarea for debugging purposes -->
|
||||
<textarea name="youTubeCustomEmotes" style="display: none;">{}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="tiktok">
|
||||
<h2><i class="fa-brands fa-tiktok"></i> TikTok</h2>
|
||||
<div class="setting"><label>Chat</label><label class="switch"><input type="checkbox" name="showTikTokMessages" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Followers</label><label class="switch"><input type="checkbox" name="showTikTokFollows" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Gifts</label><label class="switch"><input type="checkbox" name="showTikTokGifts" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Subscriptions</label><label class="switch"><input type="checkbox" name="showTikTokSubs" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>Statistics<br><small>Shows viewers and likes.</small></label><label class="switch"><input type="checkbox" name="showTikTokStatistics" checked><span class="slider"></span></label></div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="extras">
|
||||
<h2><i class="fa-solid fa-dollar-sign"></i> Donations</h2>
|
||||
<div class="setting"><label>Streamlabs Tips</label><label class="switch"><input type="checkbox" name="showStreamlabsDonations" checked><span class="slider"></span></label></div>
|
||||
<div class="setting"><label>StreamElements Tips</label><label class="switch"><input type="checkbox" name="showStreamElementsTips" checked><span class="slider"></span></label></div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
|
||||
<div class="url-bar">
|
||||
<input type="text" id="outputUrl" placeholder="URL Here..." readonly="">
|
||||
<button onclick="copyUrl()">Copy URL</button>
|
||||
</div>
|
||||
|
||||
<p>Made with ❤️ by <strong>VortisRD</strong></p>
|
||||
<p>
|
||||
<a target="_blank" href="https://twitch.com/vortisrd"><i class="fa-brands fa-twitch"></i></a>
|
||||
<a target="_blank" href="https://youtube.com/@vortisrd"><i class="fa-brands fa-youtube"></i></a>
|
||||
<a target="_blank" href="https://tiktok.com/@vortisrd"><i class="fa-brands fa-tiktok"></i></a>
|
||||
<a target="_blank" href="https://x.com/vortisrd"><i class="fa-brands fa-x-twitter"></i></a>
|
||||
<a target="_blank" href="https://github.com/vortisrd"><i class="fa-brands fa-github"></i></a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div id="chat-preview">
|
||||
<iframe src="" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="addEmoteModal" class="modal hidden">
|
||||
<div class="modal-content">
|
||||
<h3>Add YouTube Custom Emote</h3>
|
||||
<label>
|
||||
Emote Name
|
||||
<input type="text" id="newEmoteName" placeholder="Use 'EmoteName', not ':EmoteName:'" class="avoid">
|
||||
</label>
|
||||
<label>
|
||||
Image URL
|
||||
<input type="text" id="newEmoteURL" placeholder="https://example.com/emote.png" class="avoid">
|
||||
</label>
|
||||
<div class="modal-buttons">
|
||||
<button id="confirmAddEmote">Add</button>
|
||||
<button id="cancelAddEmote">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
|
||||
<script src="js/settings.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
685
js/app-mockup.js
Normal file
685
js/app-mockup.js
Normal file
@@ -0,0 +1,685 @@
|
||||
/* ----------------------- */
|
||||
/* MOCKUP SYSTEM */
|
||||
/* ----------------------- */
|
||||
|
||||
let mockupInterval = null;
|
||||
let isMockupActive = false;
|
||||
const mockupDelay = 2500; // 2 seconds between events
|
||||
let mockupConnectionState = false; // Track mock connection state
|
||||
|
||||
// Sample data for mockup events
|
||||
const mockData = {
|
||||
avatars: [
|
||||
'https://static-cdn.jtvnw.net/user-default-pictures-uv/dbdc9198-def8-11e9-8681-784f43822e80-profile_image-300x300.png',
|
||||
'https://static-cdn.jtvnw.net/user-default-pictures-uv/13e5fa74-defa-11e9-809c-784f43822e80-profile_image-300x300.png',
|
||||
'https://static-cdn.jtvnw.net/user-default-pictures-uv/215b7342-def9-11e9-9a66-784f43822e80-profile_image-300x300.png',
|
||||
'https://static-cdn.jtvnw.net/user-default-pictures-uv/ce57700a-def9-11e9-842d-784f43822e80-profile_image-300x300.png'
|
||||
],
|
||||
users: [
|
||||
{ name: 'Ninja' },
|
||||
{ name: 'SypherPK' },
|
||||
{ name: 'CouRageJD', },
|
||||
{ name: 'Gaules' },
|
||||
{ name: 'Nadeshot' },
|
||||
{ name: 'WILDCAT', },
|
||||
{ name: 'NickEh30' },
|
||||
{ name: 'LEGIQN' },
|
||||
{ name: 'moistcr1tikal' },
|
||||
{ name: 'FISHNOTHING' },
|
||||
{ name: 'smii7y' },
|
||||
{ name: 'kinggothalion', },
|
||||
{ name: 'harrisheller' },
|
||||
{ name: 'kaicenat' },
|
||||
{ name: 'caseoh_' }
|
||||
],
|
||||
messages: [
|
||||
"Hey everyone! How's the stream going?",
|
||||
"This game looks awesome!",
|
||||
"LOL that was hilarious",
|
||||
"GG WP!",
|
||||
"When are you playing Minecraft next?",
|
||||
"Love the new overlay!",
|
||||
"First time watching, this is great!",
|
||||
"Can you explain that strategy again?",
|
||||
"Greetings from Germany!",
|
||||
"What's your favorite game?",
|
||||
|
||||
"Let's gooooo!",
|
||||
"That clutch tho 🔥",
|
||||
"I can't stop laughing 😂",
|
||||
"You just destroyed them!",
|
||||
"What a play!",
|
||||
"Did anyone else see that??",
|
||||
"Streamer luck confirmed 😆",
|
||||
"Please do that move again!",
|
||||
"Bro you cracked?",
|
||||
"This chat is wild tonight",
|
||||
|
||||
"Can you shout out my friend?",
|
||||
"What setup are you using?",
|
||||
"Mic sounds super clean",
|
||||
"W stream fr",
|
||||
"Hydrate check! 💧",
|
||||
"Pet the dog on stream pls",
|
||||
"That reaction time 😳",
|
||||
"You're my comfort streamer 🧡",
|
||||
"This game brings back memories",
|
||||
"Why is this so intense omg",
|
||||
|
||||
"Chat, what’s your favorite snack?",
|
||||
"That edit was slick",
|
||||
"Mobile gang where you at?",
|
||||
"Sheeesh 🥶",
|
||||
"This is better than Netflix",
|
||||
"How long you been streaming?",
|
||||
"Can we get some hype in the chat?",
|
||||
"I wish I was this good",
|
||||
"Can mods ban that guy?",
|
||||
"Backseat gaming intensifies 😅",
|
||||
|
||||
"This reminds me of old-school Twitch",
|
||||
"Nice aim bot... jk (I hope)",
|
||||
"Wanna 1v1?",
|
||||
"The vibes are immaculate today",
|
||||
"Who else is vibing with the music?",
|
||||
"That moment needs to be clipped",
|
||||
"Streamer out here cooking 🔥",
|
||||
"Yo, this community is chill",
|
||||
"Day made. Thanks for the laughs!",
|
||||
"Okay but that was actually insane"
|
||||
],
|
||||
|
||||
emotes: [
|
||||
{
|
||||
"id": "emotesv2_9eade28238d64e83b0219a9025d4692d",
|
||||
"type": "Twitch",
|
||||
"name": "AnotherRecord",
|
||||
"startIndex": 24,
|
||||
"endIndex": 36,
|
||||
"imageUrl": "https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_9eade28238d64e83b0219a9025d4692d/default/dark/2.0"
|
||||
},
|
||||
{
|
||||
"id": "301428702",
|
||||
"type": "Twitch",
|
||||
"name": "BOP",
|
||||
"startIndex": 20,
|
||||
"endIndex": 22,
|
||||
"imageUrl": "https://static-cdn.jtvnw.net/emoticons/v2/301428702/default/dark/2.0"
|
||||
},
|
||||
{
|
||||
"id": "354",
|
||||
"type": "Twitch",
|
||||
"name": "4Head",
|
||||
"startIndex": 14,
|
||||
"endIndex": 18,
|
||||
"imageUrl": "https://static-cdn.jtvnw.net/emoticons/v2/354/default/dark/2.0"
|
||||
},
|
||||
{
|
||||
"id": "425618",
|
||||
"type": "Twitch",
|
||||
"name": "LUL",
|
||||
"startIndex": 10,
|
||||
"endIndex": 12,
|
||||
"imageUrl": "https://static-cdn.jtvnw.net/emoticons/v2/425618/default/dark/2.0"
|
||||
},
|
||||
{
|
||||
"id": "305954156",
|
||||
"type": "Twitch",
|
||||
"name": "PogChamp",
|
||||
"startIndex": 0,
|
||||
"endIndex": 7,
|
||||
"imageUrl": "https://static-cdn.jtvnw.net/emoticons/v2/305954156/default/dark/2.0"
|
||||
}
|
||||
],
|
||||
emotesInsideMessages: [
|
||||
'PogChamp',
|
||||
'LUL',
|
||||
'BOP',
|
||||
'4Head',
|
||||
'AnotherRecord'
|
||||
],
|
||||
rewards: [
|
||||
'Highlight My Message',
|
||||
'Play Sound Effect',
|
||||
'Choose Next Game',
|
||||
'Song Request',
|
||||
'Dad Joke',
|
||||
'Hydration Check'
|
||||
],
|
||||
announcements: [
|
||||
'Welcome to the stream everyone!',
|
||||
'Don\'t forget to follow for stream notifications!',
|
||||
'We\'re going to raid someone awesome after this game!',
|
||||
'Thanks for all the subs today!',
|
||||
'New emotes coming next week!'
|
||||
],
|
||||
badges: [
|
||||
{ "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/28ac9d77-bba9-4281-aba9-716081aee210/3" },
|
||||
{ "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/c4a29737-e8a5-4420-917a-314a447f083e/3" },
|
||||
{ "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/ae1c6c62-c057-4fad-a1d4-663bf988701f/3" },
|
||||
{ "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/bbbe0db0-a598-423e-86d0-f9fb98ca1933/3" },
|
||||
{ "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/2de71f4f-b152-4308-a426-127a4cf8003a/3" },
|
||||
{ "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/4149750c-9582-4515-9e22-da7d5437643b/3" },
|
||||
{ "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/5864739a-5e58-4623-9450-a2c0555ef90b/3" }
|
||||
],
|
||||
superstickers: [
|
||||
{ "imageUrl": "https://lh3.googleusercontent.com/G2OgWJkuvSullUPp2i09zG_WR0IpQu-6Ti4pFXn_FJ1OkR6zU5GdiP9cBavimQopETyojInsRCe8uefjJBqn=s148-rwa" },
|
||||
{ "imageUrl": "https://lh3.googleusercontent.com/-21C0x6zYcDxpJVYKl8CCKroyjW2Hdvh2FWBipCTFhonaPy2cSJZWTGvmjsoBJu-LedOHQrw1Qu7TYXxIlxv=s148-rwa" },
|
||||
{ "imageUrl": "https://lh3.googleusercontent.com/kpwCxm65pv0p2YMunCEHaYcD1A0TnwTg4uSJMDsBriu6cZSGOAjXw_CPvV5PajvWEq1LANypR_WHRpA7HU8=s148-rwa" },
|
||||
{ "imageUrl": "https://lh3.googleusercontent.com/y4t53UFh4eWO9FmuXgELtXn0cWsZEAJOWCExbumx2vcNclm2VYJkd4Omo7lKLxOg78zaXBmukrN0ONPRDwM=s148-rwa" },
|
||||
{ "imageUrl": "https://lh3.googleusercontent.com/aQTC6r0gjuns5TwJTMoA_mqOH3mizXxzlAJqh_CpLx8lWyKiUgS_EjTATRTX0Qzm8MlZyXAg7r6kFzlH8HgS=s148-rwa" },
|
||||
{ "imageUrl": "https://lh3.googleusercontent.com/oUIeg07YsvEuUcF7wOg6U3o1dOCANoBWuF1DYr2jGPFOyQ-bEFRiFm-6gU3urJPaX_AqtZgsNpGb0KNimA=s148-rwa" },
|
||||
{ "imageUrl": "https://lh3.googleusercontent.com/gauEuKs0cTW_YrtkKit45UrShY7KuK2-Kh9RV3H3Eirtx2KY6PHLeaDHbFz-l9OGMYISF0F57Wk2lzTiHw=s148-rwa" },
|
||||
{ "imageUrl": "https://lh3.googleusercontent.com/PQlPxOdeVk_oY3D_Ow0JRXvV3AbVIEoApzvenbfgsAHoLF4_EgxCV7Dsd-kqMsCAqhHhNG0vUY2Ssoa03iW_=s148-rwa" },
|
||||
{ "imageUrl": "https://lh3.googleusercontent.com/Cmmj_3s8DpgpuHdOhUmIZQU0Gmex9IISD2SNk4UQY-HA1jHfSPYCk6-gZ-PEpLKGHgyEfZNRCiAV_lHC_Q=s148-rwa" },
|
||||
],
|
||||
tiktokGifts: [
|
||||
{ name: "Rose", coins: 1 },
|
||||
{ name: "Finger Heart", coins: 5 },
|
||||
{ name: "TikTok", coins: 10 },
|
||||
{ name: "Confetti", coins: 100 },
|
||||
{ name: "Galaxy", coins: 1000 }
|
||||
]
|
||||
};
|
||||
|
||||
// Function to generate a random mockup event
|
||||
function generateMockEvent() {
|
||||
const eventTypes = [
|
||||
'twitch-chat', 'twitch-chat', 'twitch-chat', 'twitch-chat', 'twitch-chat',
|
||||
|
||||
'twitch-follow', 'twitch-bits', 'twitch-sub', 'twitch-resub',
|
||||
'twitch-giftsub', 'twitch-giftbomb', 'twitch-raid',
|
||||
'twitch-announcement', 'twitch-reward', 'twitch-gigantifyemote',
|
||||
|
||||
'youtube-chat', 'youtube-chat', 'youtube-chat', 'youtube-chat', 'youtube-chat',
|
||||
'youtube-superchat', 'youtube-supersticker', 'youtube-newsponsor', 'youtube-membermilestone', 'youtube-membergift',
|
||||
|
||||
'tiktok-chat', 'tiktok-chat', 'tiktok-chat', 'tiktok-chat', 'tiktok-chat',
|
||||
'tiktok-follow', 'tiktok-sub', 'tiktok-gift',
|
||||
|
||||
'streamlabs-tip', 'streamelements-tip',
|
||||
];
|
||||
|
||||
// Select random event type and user
|
||||
|
||||
const fakeAvatar = mockData.avatars[Math.floor(Math.random() * mockData.avatars.length)];
|
||||
const eventType = eventTypes[Math.floor(Math.random() * eventTypes.length)];
|
||||
const user = mockData.users[Math.floor(Math.random() * mockData.users.length)];
|
||||
const announcement = mockData.announcements[Math.floor(Math.random() * mockData.announcements.length)];
|
||||
const reward = mockData.rewards[Math.floor(Math.random() * mockData.rewards.length)];
|
||||
const emote = mockData.emotes[Math.floor(Math.random() * mockData.emotes.length)];
|
||||
const emotesInsideMessages = mockData.emotesInsideMessages[Math.floor(Math.random() * mockData.emotesInsideMessages.length)];
|
||||
const messagetext = mockData.messages[Math.floor(Math.random() * mockData.messages.length)];
|
||||
const messageId = randomString(40);
|
||||
|
||||
const shuffledBadges = [...mockData.badges].sort(() => Math.random() - 0.5);
|
||||
const badgeCount = Math.floor(Math.random() * 3) + 1; // 1 to 3
|
||||
const badgeschosen = shuffledBadges.slice(0, badgeCount);
|
||||
|
||||
const randomIndex = Math.floor(Math.random() * mockData.superstickers.length);
|
||||
const randomStickerUrl = mockData.superstickers[randomIndex].imageUrl;
|
||||
|
||||
const tiktokGift = mockData.tiktokGifts[Math.floor(Math.random() * mockData.tiktokGifts.length)];
|
||||
|
||||
const firstMessage = Math.random() < 0.1;
|
||||
|
||||
switch(eventType) {
|
||||
case 'twitch-chat' :
|
||||
|
||||
var data = {
|
||||
emotes: mockData.emotes,
|
||||
message: {
|
||||
username: user.name.toLowerCase(),
|
||||
color: randomColor(),
|
||||
displayName: user.name,
|
||||
message: messagetext + ' ' + emotesInsideMessages,
|
||||
firstMessage: firstMessage,
|
||||
badges: badgeschosen,
|
||||
},
|
||||
messageId: messageId,
|
||||
};
|
||||
|
||||
const ifHasReply = Math.random() < 0.05;
|
||||
if (ifHasReply) {
|
||||
data.message.isReply = true;
|
||||
var replier = mockData.users[Math.floor(Math.random() * mockData.users.length)];
|
||||
data.message.reply = {
|
||||
userName: replier.name,
|
||||
msgBody: mockData.messages[Math.floor(Math.random() * mockData.messages.length)]
|
||||
};
|
||||
}
|
||||
|
||||
const ifHasShared = Math.random() < 0.05;
|
||||
if (ifHasShared) {
|
||||
data.message.isSharedChat = true;
|
||||
var sharedParentUser = mockData.users[Math.floor(Math.random() * mockData.users.length)];
|
||||
|
||||
data.sharedChat = {
|
||||
sourceRoom: {
|
||||
name: sharedParentUser.name
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
twitchChatMessage(data);
|
||||
|
||||
break;
|
||||
case 'twitch-follow' :
|
||||
|
||||
var data = {
|
||||
user_id: user.name.toLowerCase(),
|
||||
user_name: user.name,
|
||||
};
|
||||
|
||||
twitchFollowMessage(data);
|
||||
|
||||
break;
|
||||
case 'twitch-bits' :
|
||||
|
||||
var data = {
|
||||
|
||||
emotes: mockData.emotes,
|
||||
user: {
|
||||
id: user.name.toLowerCase(),
|
||||
name: user.name
|
||||
},
|
||||
message: {
|
||||
bits: Math.floor(Math.random() * 10000) + 1,
|
||||
message: messagetext,
|
||||
},
|
||||
messageId: messageId,
|
||||
};
|
||||
|
||||
twitchBitsMessage(data);
|
||||
|
||||
break;
|
||||
case 'twitch-sub' :
|
||||
|
||||
var data = {
|
||||
user: {
|
||||
id: user.name.toLowerCase(),
|
||||
name: user.name
|
||||
},
|
||||
duration_months: 1,
|
||||
sub_tier: parseInt(Math.floor(Math.random() * 3) + 1),
|
||||
isPrime: Math.random() < 0.1,
|
||||
text: messagetext
|
||||
}
|
||||
|
||||
twitchSubMessage(data);
|
||||
|
||||
break;
|
||||
case 'twitch-resub' :
|
||||
|
||||
var data = {
|
||||
user: {
|
||||
id: user.name.toLowerCase(),
|
||||
name: user.name
|
||||
},
|
||||
cumulativeMonths: Math.floor(Math.random() * 50) + 1,
|
||||
subTier: parseInt(Math.floor(Math.random() * 3) + 1),
|
||||
isPrime: Math.random() < 0.1,
|
||||
text: messagetext
|
||||
}
|
||||
|
||||
twitchReSubMessage(data);
|
||||
|
||||
break;
|
||||
case 'twitch-giftsub' :
|
||||
|
||||
var gifterUser = mockData.users[Math.floor(Math.random() * mockData.users.length)];
|
||||
var data = {
|
||||
user: {
|
||||
id: user.name.toLowerCase(),
|
||||
name: user.name
|
||||
},
|
||||
recipient: { name: gifterUser.name },
|
||||
durationMonths: Math.floor(Math.random() * 50) + 1,
|
||||
subTier: parseInt(Math.floor(Math.random() * 3) + 1),
|
||||
cumlativeTotal: Math.floor(Math.random() * 200) + 1
|
||||
}
|
||||
|
||||
twitchGiftMessage(data);
|
||||
|
||||
break;
|
||||
case 'twitch-giftbomb' :
|
||||
|
||||
var data = {
|
||||
user: {
|
||||
id: user.name.toLowerCase(),
|
||||
name: user.name
|
||||
},
|
||||
total: Math.floor(Math.random() * 50) + 1,
|
||||
sub_tier: parseInt(Math.floor(Math.random() * 3) + 1),
|
||||
cumulative_total: Math.floor(Math.random() * 200) + 1
|
||||
}
|
||||
|
||||
twitchGiftSubsMessage(data);
|
||||
|
||||
break;
|
||||
case 'twitch-raid' :
|
||||
|
||||
var data = {
|
||||
from_broadcaster_user_login: user.name.toLowerCase(),
|
||||
from_broadcaster_user_name: user.name,
|
||||
viewers: Math.floor(Math.random() * 200) + 1
|
||||
}
|
||||
|
||||
twitchRaidMessage(data);
|
||||
|
||||
break;
|
||||
case 'twitch-announcement' :
|
||||
|
||||
var data = {
|
||||
messageId: messageId,
|
||||
user: {
|
||||
id: user.name.toLowerCase(),
|
||||
name: user.name
|
||||
},
|
||||
text: announcement,
|
||||
parts: mockData.emotes
|
||||
}
|
||||
|
||||
twitchAnnouncementMessage(data);
|
||||
|
||||
break;
|
||||
case 'twitch-reward' :
|
||||
|
||||
var data = {
|
||||
user_id: user.name.toLowerCase(),
|
||||
user_name: user.name,
|
||||
user_input: announcement,
|
||||
reward: {
|
||||
title: reward
|
||||
}
|
||||
}
|
||||
|
||||
twitchRewardRedemption(data);
|
||||
|
||||
break;
|
||||
|
||||
case 'youtube-chat' :
|
||||
|
||||
var amIMod = Math.random() < 0.1;
|
||||
var amISub = Math.random() < 0.1;
|
||||
var amIOwner = Math.random() < 0.1;
|
||||
|
||||
if (amIOwner == true) {
|
||||
amIMod = false;
|
||||
amISub = false;
|
||||
}
|
||||
|
||||
var data = {
|
||||
user : {
|
||||
id: user.name.toLowerCase(),
|
||||
profileImageUrl: fakeAvatar,
|
||||
name: user.name,
|
||||
isVerified: Math.random() < 0.2,
|
||||
isSponsor: amISub,
|
||||
isModerator: amIMod,
|
||||
isOwner: amIOwner,
|
||||
},
|
||||
emotes: mockData.emotes,
|
||||
message: messagetext,
|
||||
eventId: messageId,
|
||||
};
|
||||
|
||||
youTubeChatMessage(data);
|
||||
|
||||
break;
|
||||
case 'youtube-superchat' :
|
||||
|
||||
var data = {
|
||||
user: {
|
||||
id: user.name.toLowerCase(),
|
||||
name: user.name,
|
||||
},
|
||||
eventId: messageId,
|
||||
amount: '$' + Math.floor(Math.random() * 2000) + 1,
|
||||
message : messagetext
|
||||
};
|
||||
|
||||
youTubeSuperChatMessage(data);
|
||||
|
||||
break;
|
||||
case 'youtube-supersticker' :
|
||||
|
||||
var data = {
|
||||
user: {
|
||||
id: user.name.toLowerCase(),
|
||||
name: user.name
|
||||
},
|
||||
eventId: messageId,
|
||||
amount: '$' + Math.floor(Math.random() * 2000) + 1,
|
||||
_fVK15WwYFFCcGLW0zi1jLCJXj3f: {
|
||||
imageUrl: randomStickerUrl
|
||||
}
|
||||
};
|
||||
|
||||
youTubeSuperStickerMessage(data);
|
||||
|
||||
|
||||
break;
|
||||
case 'youtube-newsponsor' :
|
||||
|
||||
var data = {
|
||||
user: {
|
||||
id: user.name.toLowerCase(),
|
||||
name: user.name,
|
||||
},
|
||||
eventId: messageId,
|
||||
levelName: parseInt(Math.floor(Math.random() * 3) + 1),
|
||||
months: 1
|
||||
};
|
||||
|
||||
youTubeNewSponsorMessage(data);
|
||||
|
||||
break;
|
||||
case 'youtube-membermilestone' :
|
||||
|
||||
var data = {
|
||||
user: {
|
||||
id: user.name.toLowerCase(),
|
||||
name: user.name,
|
||||
},
|
||||
eventId: messageId,
|
||||
levelName: parseInt(Math.floor(Math.random() * 3) + 1),
|
||||
months: Math.floor(Math.random() * 50) + 1,
|
||||
message: messagetext
|
||||
};
|
||||
|
||||
youTubeNewSponsorMessage(data);
|
||||
|
||||
|
||||
break;
|
||||
case 'youtube-membergift' :
|
||||
|
||||
var data = {
|
||||
user : {
|
||||
id: user.name.toLowerCase(),
|
||||
name: user.name,
|
||||
},
|
||||
tier: parseInt(Math.floor(Math.random() * 3) + 1),
|
||||
count: Math.floor(Math.random() * 50) + 1,
|
||||
eventId: messageId,
|
||||
};
|
||||
|
||||
youTubeGiftedMembersMessage(data);
|
||||
|
||||
break;
|
||||
|
||||
case 'tiktok-chat' :
|
||||
|
||||
var data = {
|
||||
userId: user.name.toLowerCase(),
|
||||
nickname: user.name,
|
||||
profilePictureUrl: fakeAvatar,
|
||||
isSubscriber: Math.random() < 0.2,
|
||||
isModerator: Math.random() < 0.1,
|
||||
isOwner: Math.random() < 0.05,
|
||||
|
||||
emotes: {},
|
||||
|
||||
comment: messagetext,
|
||||
|
||||
msgId: messageId,
|
||||
};
|
||||
|
||||
tiktokChatMessage(data);
|
||||
|
||||
break;
|
||||
case 'tiktok-follow' :
|
||||
|
||||
var data = {
|
||||
userId: user.name.toLowerCase(),
|
||||
nickname: user.name,
|
||||
profilePictureUrl: fakeAvatar,
|
||||
msgId: messageId,
|
||||
};
|
||||
|
||||
tiktokFollowMessage(data);
|
||||
|
||||
break;
|
||||
case 'tiktok-sub' :
|
||||
|
||||
var data = {
|
||||
userId: user.name.toLowerCase(),
|
||||
nickname: user.name,
|
||||
profilePictureUrl: fakeAvatar,
|
||||
msgId: messageId,
|
||||
subMonth: Math.floor(Math.random() * 50) + 1
|
||||
};
|
||||
|
||||
tiktokSubMessage(data);
|
||||
|
||||
break;
|
||||
case 'tiktok-gift' :
|
||||
|
||||
var data = {
|
||||
userId: user.name.toLowerCase(),
|
||||
nickname: user.name,
|
||||
profilePictureUrl: fakeAvatar,
|
||||
msgId: messageId,
|
||||
|
||||
giftName: tiktokGift.name,
|
||||
repeatCount: Math.floor(Math.random() * 50) + 1,
|
||||
diamondCount: tiktokGift.coins,
|
||||
};
|
||||
|
||||
tiktokGiftMessage(data);
|
||||
|
||||
|
||||
break;
|
||||
|
||||
case 'streamlabs-tip' :
|
||||
|
||||
var data = {
|
||||
from: user.name,
|
||||
formattedAmount: Math.floor(Math.random() * 2000) + 1,
|
||||
currency: 'USD',
|
||||
message: messagetext
|
||||
};
|
||||
|
||||
streamLabsEventMessage(data);
|
||||
|
||||
break;
|
||||
|
||||
case 'streamelements-tip' :
|
||||
|
||||
var data = {
|
||||
username: user.name,e,
|
||||
amount: Math.floor(Math.random() * 2000) + 1,
|
||||
currency: 'USD',
|
||||
message: messagetext
|
||||
};
|
||||
|
||||
streamElementsEventMessage(data);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Function to start the mockup system
|
||||
function startMockupSystem() {
|
||||
if (!isMockupActive) {
|
||||
console.debug('Starting mockup system...');
|
||||
isMockupActive = true;
|
||||
mockupConnectionState = false;
|
||||
|
||||
// Add a notification about mockup mode
|
||||
notifyInfo({
|
||||
title: "Streamer.Bot Disconnected",
|
||||
text: "Running in mockup mode. Showing sample events."
|
||||
});
|
||||
|
||||
// Start with a few initial events
|
||||
for (let i = 0; i < 3; i++) {
|
||||
setTimeout(() => generateMockEvent(), i * 500);
|
||||
}
|
||||
|
||||
// Set interval for regular events
|
||||
mockupInterval = setInterval(generateMockEvent, mockupDelay);
|
||||
|
||||
// Update statistics for demo
|
||||
updateMockStatistics();
|
||||
}
|
||||
}
|
||||
|
||||
// Function to stop the mockup system
|
||||
function stopMockupSystem() {
|
||||
if (isMockupActive) {
|
||||
console.debug('Stopping mockup system...');
|
||||
isMockupActive = false;
|
||||
mockupConnectionState = true;
|
||||
clearInterval(mockupInterval);
|
||||
mockupInterval = null;
|
||||
|
||||
document.querySelector('#statistics #twitch .viewers span').textContent = '0';
|
||||
document.querySelector('#statistics #youtube .viewers span').textContent = '0';
|
||||
document.querySelector('#statistics #youtube .likes span').textContent = '0';
|
||||
document.querySelector('#statistics #tiktok .viewers span').textContent = '0';
|
||||
document.querySelector('#statistics #tiktok .likes span').textContent = '0';
|
||||
}
|
||||
}
|
||||
|
||||
// Function to update mock statistics
|
||||
function updateMockStatistics() {
|
||||
if (showPlatformStatistics) {
|
||||
if (showTwitchViewers) {
|
||||
document.querySelector('#statistics #twitch .viewers span').textContent = formatNumber(Math.floor(Math.random() * 500) + 50);
|
||||
}
|
||||
|
||||
if (showYouTubeStatistics) {
|
||||
document.querySelector('#statistics #youtube .viewers span').textContent = formatNumber(Math.floor(Math.random() * 300) + 20);
|
||||
document.querySelector('#statistics #youtube .likes span').textContent = formatNumber(Math.floor(Math.random() * 1000) + 100);
|
||||
}
|
||||
|
||||
if (showTikTokStatistics) {
|
||||
document.querySelector('#statistics #tiktok .viewers span').textContent = formatNumber(Math.floor(Math.random() * 800) + 200);
|
||||
document.querySelector('#statistics #tiktok .likes span').textContent = formatNumber(Math.floor(Math.random() * 5000) + 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function randomIntFromInterval(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
}
|
||||
|
||||
|
||||
function randomString(length) {
|
||||
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
let result = "";
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function randomColor() {
|
||||
const randomColor = "hsl(" + Math.random() * 360 + ", 100%, 75%)";
|
||||
return randomColor;
|
||||
}
|
||||
292
js/app.js
Normal file
292
js/app.js
Normal file
@@ -0,0 +1,292 @@
|
||||
/* ----------------------- */
|
||||
/* OPTIONS */
|
||||
/* ----------------------- */
|
||||
|
||||
const streamerBotServerAddress = getURLParam("streamerBotServerAddress", "127.0.0.1");
|
||||
const streamerBotServerPort = getURLParam("streamerBotServerPort", "8080");
|
||||
let streamerBotConnected = false;
|
||||
const chatThreshhold = 50;
|
||||
const chatContainer = document.querySelector('#chat');
|
||||
const currentLang = lang[getURLParam("language", 'ptbr')];
|
||||
const eventsMockup = getURLParam("eventsMockup", true);
|
||||
const chatHorizontal = getURLParam("chatHorizontal", false);
|
||||
const showPlatform = getURLParam("showPlatform", false);
|
||||
const showAvatar = getURLParam("showAvatar", false);
|
||||
const showTimestamps = getURLParam("showTimestamps", false);
|
||||
const ampmTimeStamps = getURLParam("ampmTimeStamps", false);
|
||||
const showBadges = getURLParam("showBadges", true);
|
||||
const showPlatformStatistics = getURLParam("showPlatformStatistics", false);
|
||||
const hideAfter = getURLParam("hideAfter", 0);
|
||||
const ignoreChatters = getURLParam("ignoreChatters", "");
|
||||
const excludeCommands = getURLParam("excludeCommands", true);
|
||||
|
||||
const avatars = new Map();
|
||||
const userColors = new Map();
|
||||
|
||||
const ignoreUserList = ignoreChatters.split(',').map(item => item.trim().toLowerCase()) || [];
|
||||
|
||||
/* ----------------------- */
|
||||
/* START */
|
||||
/* ----------------------- */
|
||||
|
||||
if (showPlatformStatistics == false) { document.querySelector('#statistics').style.display = 'none'; }
|
||||
if (chatHorizontal == true) { chatContainer.classList.add('horizontal'); }
|
||||
|
||||
/* ----------------------- */
|
||||
/* STREAMER.BOT CONNECTION */
|
||||
/* ----------------------- */
|
||||
|
||||
const streamerBotClient = new StreamerbotClient({
|
||||
host: streamerBotServerAddress,
|
||||
port: streamerBotServerPort,
|
||||
onConnect: (data) => {
|
||||
console.debug( currentLang.streamerbotconnected );
|
||||
console.debug(data);
|
||||
streamerBotConnected = true;
|
||||
notifySuccess({
|
||||
title: currentLang.streamerbotconnected,
|
||||
text: ``
|
||||
});
|
||||
if (eventsMockup == true) { stopMockupSystem(); }
|
||||
},
|
||||
onDisconnect: () => {
|
||||
console.error(currentLang.streamerbotdisconnected);
|
||||
streamerBotConnected = false;
|
||||
if (eventsMockup == true) { startMockupSystem(); }
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* ----------------------- */
|
||||
/* UTILITIES */
|
||||
/* ----------------------- */
|
||||
|
||||
|
||||
|
||||
async function addMessageToChat(userID, messageID, platform, data) {
|
||||
|
||||
const html = DOMPurify.sanitize(`
|
||||
<div id="${messageID}" data-user="${userID}" class="${platform} ${data.classes} message" style="">
|
||||
<div class="animate__animated ${chatHorizontal == true ? 'animate__fadeInRight' : 'animate__fadeInUp'} animate__faster">
|
||||
|
||||
${!data.shared ? '' : data.shared}
|
||||
|
||||
${showTimestamps == true ? '<span class="time">'+whatTimeIsIt()+'</span>' : ''}
|
||||
|
||||
${showPlatform == true ? '<i class="platform fa-brands fa-'+platform+'"></i>' : '' }
|
||||
|
||||
${showAvatar == true ? '<span class="avatar"><img src="'+data.avatar+'"></span>' : ''}
|
||||
|
||||
${showBadges == true ? '<span class="badges">'+data.badges+'</span>' : ''}
|
||||
|
||||
<span style="color: ${data.color}" class="user">${data.userName}:</span>
|
||||
|
||||
${!data.reply ? '' : data.reply}
|
||||
|
||||
<span class="text">${data.message}</span>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
chatContainer.insertAdjacentHTML('beforeend', html);
|
||||
|
||||
const messageElement = document.getElementById(messageID);
|
||||
|
||||
if (hideAfter > 0) {
|
||||
setTimeout(function () {
|
||||
messageElement.style.opacity = 0;
|
||||
setTimeout(function () {
|
||||
messageElement.remove();
|
||||
}, 1000);
|
||||
}, Math.floor(hideAfter * 1000));
|
||||
}
|
||||
|
||||
removeExtraChatMessages();
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function addEventToChat(userID, messageID, platform, data) {
|
||||
|
||||
const html = DOMPurify.sanitize(`
|
||||
<div id="${messageID}" data-user="${userID}" class="${platform} ${data.classes} message event" style="">
|
||||
<div class="animate__animated ${chatHorizontal == true ? 'animate__fadeInRight' : 'animate__fadeInUp'} animate__faster">
|
||||
${!data.reply ? '' : data.reply}
|
||||
|
||||
${showPlatform == true ? '<i class="platform '+(platform == 'money' ? 'fa-solid' : 'fa-brands')+' fa-'+platform+'"></i>' : ' ' }
|
||||
|
||||
<span class="info">
|
||||
<!--<span class="avatar"><img src="${data.avatar}"></span>-->
|
||||
<span style="color: ${data.color}" class="user">${data.userName}</span>
|
||||
<span class="text">${data.message}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
chatContainer.insertAdjacentHTML('beforeend', html);
|
||||
|
||||
const messageElement = document.getElementById(messageID);
|
||||
|
||||
if (hideAfter > 0) {
|
||||
setTimeout(function () {
|
||||
messageElement.style.opacity = 0;
|
||||
setTimeout(function () {
|
||||
messageElement.remove();
|
||||
}, 1000);
|
||||
}, Math.floor(hideAfter * 1000));
|
||||
}
|
||||
|
||||
removeExtraChatMessages();
|
||||
}
|
||||
|
||||
|
||||
const whatTimeIsIt = () => {
|
||||
const now = new Date();
|
||||
const hours24 = now.getHours();
|
||||
const minutes = now.getMinutes().toString().padStart(2, '0');
|
||||
const ampm = hours24 >= 12 ? 'PM' : 'AM';
|
||||
const hours12 = (hours24 % 12) || 12;
|
||||
|
||||
if (ampmTimeStamps == true) { return `${hours12}:${minutes} ${ampm}`; }
|
||||
else { return `${hours24}:${minutes}`; }
|
||||
};
|
||||
|
||||
|
||||
function removeExtraChatMessages() {
|
||||
const chatMessages = chatContainer.querySelectorAll('div.message').length;
|
||||
if (chatMessages >= chatThreshhold) {
|
||||
for (let i = 0; i < Math.floor(chatThreshhold/2); i++) {
|
||||
chatContainer.removeChild(chatContainer.firstElementChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Function to format large numbers (e.g., 1000 => '1K')
|
||||
function formatNumber(num) {
|
||||
if (num >= 1000000) {
|
||||
let numStr = (num / 1000000).toFixed(1);
|
||||
if (numStr.endsWith('.0')) {
|
||||
numStr = numStr.slice(0, -2);
|
||||
}
|
||||
return numStr + 'M';
|
||||
}
|
||||
else if (num >= 1000) {
|
||||
let numStr = (num / 1000).toFixed(1);
|
||||
if (numStr.endsWith('.0')) {
|
||||
numStr = numStr.slice(0, -2);
|
||||
}
|
||||
return numStr + 'K';
|
||||
}
|
||||
return num.toString();
|
||||
}
|
||||
|
||||
|
||||
function formatCurrency(amount, currencyCode) {
|
||||
return new Intl.NumberFormat(undefined, {
|
||||
style: 'currency',
|
||||
currency: currencyCode,
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 2
|
||||
}).format(amount);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function createRandomColor(platform, username) {
|
||||
if (userColors.get(platform).has(username)) {
|
||||
return userColors.get(platform).get(username);
|
||||
}
|
||||
else {
|
||||
const randomColor = "hsl(" + Math.random() * 360 + ", 100%, 75%)";
|
||||
userColors.get(platform).set(username, randomColor);
|
||||
return randomColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function createRandomString(length) {
|
||||
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
let result = "";
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function getURLParam(param, defaultValue) {
|
||||
const chatQueryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(chatQueryString);
|
||||
const paramVar = urlParams.get(param);
|
||||
|
||||
switch (paramVar) {
|
||||
case 'true':
|
||||
return true;
|
||||
|
||||
case 'false':
|
||||
return false;
|
||||
|
||||
case null:
|
||||
case undefined:
|
||||
return defaultValue;
|
||||
|
||||
default:
|
||||
return paramVar;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const pushNotify = (data) => {
|
||||
|
||||
const SimpleNotify = {
|
||||
effect: 'fade',
|
||||
speed: 500,
|
||||
customClass: 'toasty',
|
||||
customIcon: '',
|
||||
showIcon: true,
|
||||
showCloseButton: true,
|
||||
autoclose: true,
|
||||
autotimeout: 5000,
|
||||
notificationsGap: null,
|
||||
notificationsPadding: null,
|
||||
type: 'outline',
|
||||
position: 'x-center bottom',
|
||||
customWrapper: '',
|
||||
};
|
||||
|
||||
const mergedData = {
|
||||
...SimpleNotify,
|
||||
...data
|
||||
}
|
||||
|
||||
new Notify (mergedData);
|
||||
}
|
||||
|
||||
const notifyError = (err) => {
|
||||
err.status = 'error';
|
||||
pushNotify(err);
|
||||
}
|
||||
|
||||
const notifyInfo = (info) => {
|
||||
info.status = 'info';
|
||||
pushNotify(info);
|
||||
}
|
||||
|
||||
const notifyWarning = (warn) => {
|
||||
warn.status = 'warning';
|
||||
pushNotify(warn);
|
||||
}
|
||||
|
||||
|
||||
const notifySuccess = (success) => {
|
||||
success.status = 'success';
|
||||
pushNotify(success);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function escapeRegex(string) {
|
||||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
}
|
||||
76
js/lang/en.js
Normal file
76
js/lang/en.js
Normal file
@@ -0,0 +1,76 @@
|
||||
const en = {
|
||||
streamerbotconnected: 'Streamer.bot Online!',
|
||||
streamerbotdisconnected: 'Streamer.bot Disconnected!',
|
||||
|
||||
twitch : {
|
||||
follow : () => ` followed the channel`,
|
||||
announcement : () => ` <div class="reply">📢 <strong>Announcement</strong></div>`,
|
||||
channelpoints : ({ title }) => ` <div class="reply"><i class="fa-solid fa-wand-magic-sparkles"></i> <strong>Channel Points - ${title}</strong></div>`,
|
||||
bits : ({ bits, message }) => ` cheered <i class="fa-regular fa-gem fall-and-bounce"></i> <strong>${bits} bits</strong>${message ? '<br>'+message : ''}`,
|
||||
|
||||
sub : ({ months, isPrime, tier }) => ` subscribed for
|
||||
${isPrime == true ? '<i class="fa-solid fa-crown"></i>' : '<i class="fa-solid fa-star"></i>'}
|
||||
<strong>${months || 1 } ${months == 1 ? 'month' : 'months'}
|
||||
(${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)})</strong>`,
|
||||
|
||||
resub : ({ months, isPrime, tier, message }) => ` subscribed for
|
||||
${isPrime == true ? '<i class="fa-solid fa-crown"></i>' : '<i class="fa-solid fa-star"></i>'}
|
||||
<strong>${months || 1 } ${months == 1 ? 'month' : 'months'}
|
||||
(${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)})</strong>
|
||||
${message ? '<br>'+message : '' }`,
|
||||
|
||||
gifted : ({ gifted, months, tier }) => ` gifted
|
||||
<strong>${months || 1 } ${months == 1 ? 'month' : 'months'}
|
||||
of Tier ${tier.toString().charAt(0)} ${months == 1 ? 'sub' : 'subs'}</strong>
|
||||
to <i class="fa-solid fa-gift"></i> <strong>${gifted}</strong>`,
|
||||
|
||||
giftedbomb : ({ count, total, tier }) => ` gifted <i class="fa-solid fa-gift"></i> <strong>${count} subs (Tier ${tier.toString().charAt(0)})</strong> to the Community, <strong>${total || 1} ${total == 1 ? 'gift' : 'gifts'} in total</strong>`,
|
||||
|
||||
raid : ({ viewers }) => ` raided the channel with <i class="fa-solid fa-users"></i> <strong>${viewers} viewers</strong>`
|
||||
|
||||
},
|
||||
|
||||
|
||||
youtube : {
|
||||
superchat : ({ money, message }) => ` superchatted <i class="fa-solid fa-comments-dollar"></i> <strong>${money}</strong>
|
||||
${message ? '<br>'+message : ''}
|
||||
`,
|
||||
|
||||
supersticker : ({ money, sticker }) => `
|
||||
${sticker ? '<br>': ''}
|
||||
sent a supersticker of <i class="fa-solid fa-comments-dollar"></i> <strong>${money}</strong>
|
||||
${sticker ? '</span></span><span class="sticker"><img src="'+sticker+'"></span>': ''}
|
||||
`,
|
||||
|
||||
member : ({ months, tier, message }) => ` became a member for
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<strong>${months || 1 } ${months && months > 1 ? 'months' : 'month'}
|
||||
(Tier ${tier})</strong>
|
||||
${message ? '<br>'+message : ''}`,
|
||||
|
||||
giftedmembers : ({ total, tier }) => ` gifted <i class="fa-solid fa-gift"></i> <strong>${total} ${total == 1 ? 'membership' : 'memberships'} (Tier ${tier}) to the channel</strong>`,
|
||||
|
||||
giftedtrainmembers : ({ gifted, tier }) => ` gifted a membership
|
||||
<strong>(${tier})</strong>
|
||||
to <i class="fa-solid fa-gift"></i> <strong>${gifted}</strong>`,
|
||||
|
||||
},
|
||||
|
||||
|
||||
streamlabs : {
|
||||
tip : ({ money, message }) => ` donated 🪙 <strong>${money}</strong>${message ? '<br>'+message : ''}`,
|
||||
},
|
||||
|
||||
|
||||
streamelements : {
|
||||
tip : ({ money, message }) => ` donated 🪙 <strong>${money}</strong>${message ? '<br>'+message : ''}`,
|
||||
},
|
||||
|
||||
|
||||
tiktok : {
|
||||
follow : () => ` followed the channel`,
|
||||
sub : ({ months }) => ` subscribed for <i class="fa-solid fa-star"></i> <strong>${months || 1 } ${(months && months > 1) ? 'months' : 'month'}</strong>`,
|
||||
gift : ({ gift, count, coins }) => ` gifted <strong>${gift} x${count}</strong> (🪙 <strong>${coins} ${(coins && coins > 1) ? 'coins' : 'coin'})</strong>`,
|
||||
|
||||
}
|
||||
}
|
||||
69
js/lang/es.js
Normal file
69
js/lang/es.js
Normal file
@@ -0,0 +1,69 @@
|
||||
const es = {
|
||||
streamerbotconnected: '¡Streamer.bot en línea!',
|
||||
streamerbotdisconnected: '¡Streamer.bot desconectado!',
|
||||
|
||||
twitch : {
|
||||
follow : () => ` siguió el canal`,
|
||||
announcement : () => ` <div class="reply">📢 <strong>Anuncio</strong></div>`,
|
||||
channelpoints : ({ title }) => ` <div class="reply"><i class="fa-solid fa-wand-magic-sparkles"></i> <strong>Puntos del canal - ${title}</strong></div>`,
|
||||
bits : ({ bits, message }) => ` envió <i class="fa-regular fa-gem fall-and-bounce"></i> <strong>${bits} bits</strong>${message ? '<br>'+message : ''}`,
|
||||
|
||||
sub : ({ months, isPrime, tier }) => ` se suscribió por
|
||||
${isPrime == true ? '<i class="fa-solid fa-crown"></i>' : '<i class="fa-solid fa-star"></i>'}
|
||||
<strong>${months || 1 } ${months == 1 ? 'mes' : 'meses'}
|
||||
(${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)})</strong>`,
|
||||
|
||||
resub : ({ months, isPrime, tier, message }) => ` se volvió a suscribir por
|
||||
${isPrime == true ? '<i class="fa-solid fa-crown"></i>' : '<i class="fa-solid fa-star"></i>'}
|
||||
<strong>${months || 1 } ${months == 1 ? 'mes' : 'meses'}
|
||||
(${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)})</strong>
|
||||
${message ? '<br>'+message : '' }`,
|
||||
|
||||
gifted : ({ gifted, months, tier }) => ` regaló
|
||||
<strong>${months || 1 } ${months == 1 ? 'mes' : 'meses'}
|
||||
de Tier ${tier.toString().charAt(0)} ${months == 1 ? 'suscripción' : 'suscripciones'}</strong>
|
||||
a <i class="fa-solid fa-gift"></i> <strong>${gifted}</strong>`,
|
||||
|
||||
giftedbomb : ({ count, total, tier }) => ` regaló <i class="fa-solid fa-gift"></i> <strong>${count} suscripciones (Tier ${tier.toString().charAt(0)})</strong> a la comunidad, <strong>${total || 1} ${total == 1 ? 'regalo' : 'regalos'} en total</strong>`,
|
||||
|
||||
raid : ({ viewers }) => ` hizo una raid al canal con <i class="fa-solid fa-users"></i> <strong>${viewers} espectadores</strong>`
|
||||
},
|
||||
|
||||
youtube : {
|
||||
superchat : ({ money, message }) => ` envió un superchat <i class="fa-solid fa-comments-dollar"></i> <strong>${money}</strong>
|
||||
${message ? '<br>'+message : ''}
|
||||
`,
|
||||
|
||||
supersticker : ({ money, sticker }) => `
|
||||
${sticker ? '<br>': ''}
|
||||
envió un supersticker de <i class="fa-solid fa-comments-dollar"></i> <strong>${money}</strong>
|
||||
${sticker ? '</span></span><span class="sticker"><img src="'+sticker+'"></span>': ''}
|
||||
`,
|
||||
|
||||
member : ({ months, tier, message }) => ` se hizo miembro por
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<strong>${months || 1 } ${months && months > 1 ? 'meses' : 'mes'}
|
||||
(Tier ${tier})</strong>
|
||||
${message ? '<br>'+message : ''}`,
|
||||
|
||||
giftedmembers : ({ total, tier }) => ` regaló <i class="fa-solid fa-gift"></i> <strong>${total} ${total == 1 ? 'membresía' : 'membresías'} (Tier ${tier}) al canal</strong>`,
|
||||
|
||||
giftedtrainmembers : ({ gifted, tier }) => ` regaló una membresía
|
||||
<strong>(Tier ${tier})</strong>
|
||||
a <i class="fa-solid fa-gift"></i> <strong>${gifted}</strong>`,
|
||||
},
|
||||
|
||||
streamlabs : {
|
||||
tip : ({ money, message }) => ` donó 🪙 <strong>${money}</strong>${message ? '<br>'+message : ''}`,
|
||||
},
|
||||
|
||||
streamelements : {
|
||||
tip : ({ money, message }) => ` donó 🪙 <strong>${money}</strong>${message ? '<br>'+message : ''}`,
|
||||
},
|
||||
|
||||
tiktok : {
|
||||
follow : () => ` siguió el canal`,
|
||||
sub : ({ months }) => ` se suscribió por <i class="fa-solid fa-star"></i> <strong>${months || 1 } ${(months && months > 1) ? 'meses' : 'mes'}</strong>`,
|
||||
gift : ({ gift, count, coins }) => ` regaló <strong>${gift} x${count}</strong> (🪙 <strong>${coins} ${(coins && coins > 1) ? 'monedas' : 'moneda'})</strong>`,
|
||||
}
|
||||
}
|
||||
5
js/lang/lang.js
Normal file
5
js/lang/lang.js
Normal file
@@ -0,0 +1,5 @@
|
||||
const lang = {
|
||||
ptbr : ptbr,
|
||||
en : en,
|
||||
es: es
|
||||
}
|
||||
76
js/lang/ptbr.js
Normal file
76
js/lang/ptbr.js
Normal file
@@ -0,0 +1,76 @@
|
||||
const ptbr = {
|
||||
streamerbotconnected: 'Streamer.bot Conectado!',
|
||||
streamerbotdisconnected: 'Streamer.bot Desconectado!',
|
||||
|
||||
twitch : {
|
||||
follow : () => ` seguiu o canal`,
|
||||
announcement : () => ` <div class="reply">📢 <strong>Anúncio</strong></div>`,
|
||||
channelpoints : ({ title }) => ` <div class="reply"><i class="fa-solid fa-wand-magic-sparkles"></i> <strong>Pontos do Canal - ${title}</strong></div>`,
|
||||
bits : ({ bits, message }) => ` doou <i class="fa-regular fa-gem fall-and-bounce"></i> <strong>${bits} bits</strong>${message ? '<br>'+message : ''}`,
|
||||
|
||||
sub : ({ months, isPrime, tier }) => ` se inscreveu por
|
||||
${isPrime == true ? '<i class="fa-solid fa-crown"></i>' : '<i class="fa-solid fa-star"></i>'}
|
||||
<strong>${months || 1 } ${months == 1 ? 'mês' : 'meses'}
|
||||
(${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)})</strong>`,
|
||||
|
||||
resub : ({ months, isPrime, tier, message }) => ` se inscreveu por
|
||||
${isPrime == true ? '<i class="fa-solid fa-crown"></i>' : '<i class="fa-solid fa-star"></i>'}
|
||||
<strong>${months || 1 } ${months == 1 ? 'mês' : 'meses'}
|
||||
(${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)})</strong>
|
||||
${message ? '<br>'+message : '' }`,
|
||||
|
||||
gifted : ({ gifted, months, tier }) => ` doou
|
||||
<strong>${months || 1 } ${months == 1 ? 'mês' : 'meses'}
|
||||
de Tier ${tier.toString().charAt(0)}</strong>
|
||||
para <i class="fa-solid fa-gift"></i> <strong>${gifted}</strong>`,
|
||||
|
||||
giftedbomb : ({ count, total, tier }) => ` doou <i class="fa-solid fa-gift"></i> <strong>${count} inscrições (Tier ${tier.toString().charAt(0)})</strong> para a Comunidade, totalizando <strong>${total || 1} ${total == 1 ? 'doação' : 'doações'}</strong>`,
|
||||
|
||||
raid : ({ viewers }) => ` raidou o canal com <i class="fa-solid fa-users"></i> <strong>${viewers} pessoas</strong>`
|
||||
|
||||
},
|
||||
|
||||
|
||||
youtube : {
|
||||
superchat : ({ money, message }) => ` fez um superchat de <i class="fa-solid fa-comments-dollar"></i> <strong>${money}</strong>
|
||||
${message ? '<br>'+message : ''}
|
||||
`,
|
||||
|
||||
supersticker : ({ money, sticker }) => `
|
||||
${sticker ? '<br>': ''}
|
||||
enviou um super sticker de <i class="fa-solid fa-comments-dollar"></i> <strong>${money}</strong>
|
||||
${sticker ? '</span></span><span class="sticker"><img src="'+sticker+'"></span>': ''}
|
||||
`,
|
||||
|
||||
member : ({ months, tier, message }) => ` se inscreveu por
|
||||
<i class="fa-solid fa-star"></i>
|
||||
<strong>${months || 1 } ${months && months > 1 ? 'meses' : 'mês'}
|
||||
(Tier ${tier})</strong>
|
||||
${message ? '<br>'+message : ''}`,
|
||||
|
||||
giftedmembers : ({ total, tier }) => ` doou <i class="fa-solid fa-gift"></i> <strong>${total} ${total == 1 ? 'inscrição' : 'inscrições'} (Tier ${tier}) para o canal</strong>`,
|
||||
|
||||
giftedtrainmembers : ({ gifted, tier }) => ` doou uma assinatura
|
||||
<strong>(${tier})</strong>
|
||||
para <i class="fa-solid fa-gift"></i> <strong>${gifted}</strong>`,
|
||||
|
||||
},
|
||||
|
||||
|
||||
streamlabs : {
|
||||
tip : ({ money, message }) => ` doou 🪙 <strong>${money}</strong>${message ? '<br>'+message : ''}`,
|
||||
},
|
||||
|
||||
|
||||
streamelements : {
|
||||
tip : ({ money, message }) => ` doou 🪙 <strong>${money}</strong>${message ? '<br>'+message : ''}`,
|
||||
},
|
||||
|
||||
|
||||
tiktok : {
|
||||
follow : () => ` seguiu o canal`,
|
||||
sub : ({ months }) => ` se inscreveu por <i class="fa-solid fa-star"></i> <strong>${months || 1 } ${(months && months > 1) ? 'meses' : 'mês'}</strong>`,
|
||||
gift : ({ gift, count, coins }) => ` doou <strong>${gift} x${count}</strong> (🪙 <strong>${coins} ${(coins && coins > 1) ? 'moedas' : 'moeda'})</strong>`,
|
||||
|
||||
}
|
||||
}
|
||||
316
js/settings.js
Normal file
316
js/settings.js
Normal file
@@ -0,0 +1,316 @@
|
||||
let streamerBotClient;
|
||||
let streamerBotConnected = false;
|
||||
|
||||
async function saveSettingsToLocalStorage() {
|
||||
const checkboxes = document.querySelectorAll("input[type=checkbox]:not(.avoid)");
|
||||
const textfields = document.querySelectorAll("input[type=text]:not(.avoid)");
|
||||
const numberfields = document.querySelectorAll("input[type=number]:not(.avoid)");
|
||||
const selects = document.querySelectorAll("select:not(.avoid)");
|
||||
|
||||
const hiddenField = document.querySelector("textarea[name=youTubeCustomEmotes]:not(.avoid)");
|
||||
|
||||
const settings = {};
|
||||
|
||||
checkboxes.forEach((checkbox) => {
|
||||
settings[checkbox.name] = checkbox.checked;
|
||||
});
|
||||
textfields.forEach((textfield) => {
|
||||
settings[textfield.name] = textfield.value;
|
||||
});
|
||||
numberfields.forEach((numberfield) => {
|
||||
settings[numberfield.name] = numberfield.value;
|
||||
});
|
||||
selects.forEach((select) => {
|
||||
settings[select.name] = select.value;
|
||||
});
|
||||
|
||||
localStorage.setItem("chatWidgetSettings", JSON.stringify(settings));
|
||||
|
||||
if (streamerBotConnected == true) {
|
||||
streamerBotClient.doAction(
|
||||
{ name : "YouTube Custom Emotes" },
|
||||
{
|
||||
"chatrdytcustomemotes": JSON.stringify(hiddenField.value.trim()),
|
||||
}
|
||||
).then( (setglobals) => {
|
||||
console.debug('Saving YouTube Emotes from Streamer.Bot', setglobals);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
async function loadSettingsFromLocalStorage() {
|
||||
const saved = localStorage.getItem("chatWidgetSettings");
|
||||
if (!saved) return;
|
||||
|
||||
const settings = JSON.parse(saved);
|
||||
|
||||
Object.keys(settings).forEach((key) => {
|
||||
const input = document.querySelector(`[name="${key}"]`);
|
||||
if (input) {
|
||||
if (input.type === "checkbox") {
|
||||
input.checked = settings[key];
|
||||
} else {
|
||||
input.value = settings[key];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var streamerBotServerAddress = document.querySelector('input[type=text][name=streamerBotServerAddress]').value;
|
||||
var streamerBotServerPort = document.querySelector('input[type=text][name=streamerBotServerPort]').value;
|
||||
|
||||
streamerBotClient = new StreamerbotClient({
|
||||
host: streamerBotServerAddress,
|
||||
port: streamerBotServerPort,
|
||||
onConnect: (data) => {
|
||||
streamerBotConnected = true;
|
||||
|
||||
var sbstatus = document.getElementById('memberemotesbstatus');
|
||||
|
||||
sbstatus.style.color = '#00dd63';
|
||||
sbstatus.textContent = 'Streamer.Bot is Online!';
|
||||
|
||||
streamerBotClient.getGlobals().then( (getglobals) => {
|
||||
const settings = JSON.parse(getglobals.variables.chatrdytcustomemotes.value);
|
||||
console.debug('Getting YouTube Emotes from Streamer.Bot', settings);
|
||||
const textarea = document.querySelector("textarea[name=youTubeCustomEmotes]");
|
||||
textarea.value = settings;
|
||||
|
||||
populateEmoteList();
|
||||
});
|
||||
|
||||
},
|
||||
onDisconnect: () => {
|
||||
console.error('Streamer.bot Disconnected!');
|
||||
|
||||
streamerBotConnected = false;
|
||||
|
||||
var sbstatus = document.getElementById('memberemotesbstatus');
|
||||
sbstatus.style.color = '#ff0000';
|
||||
sbstatus.textContent = 'Streamer.Bot Needs to be Online!';
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
async function pushChangeEvents() {
|
||||
const checkboxes = document.querySelectorAll("input[type=checkbox]:not(.avoid)");
|
||||
const textfields = document.querySelectorAll("input[type=text]:not(.avoid)");
|
||||
const numberfields = document.querySelectorAll("input[type=number]:not(.avoid)");
|
||||
const selects = document.querySelectorAll("select:not(.avoid)");
|
||||
|
||||
checkboxes.forEach((checkbox) => {
|
||||
checkbox.addEventListener('change', () => {
|
||||
generateUrl();
|
||||
saveSettingsToLocalStorage();
|
||||
});
|
||||
});
|
||||
textfields.forEach((textfield) => {
|
||||
textfield.addEventListener('input', () => {
|
||||
generateUrl();
|
||||
saveSettingsToLocalStorage();
|
||||
});
|
||||
});
|
||||
numberfields.forEach((numberfield) => {
|
||||
numberfield.addEventListener('input', () => {
|
||||
generateUrl();
|
||||
saveSettingsToLocalStorage();
|
||||
});
|
||||
});
|
||||
selects.forEach((select) => {
|
||||
select.addEventListener('change', () => {
|
||||
generateUrl();
|
||||
saveSettingsToLocalStorage();
|
||||
});
|
||||
});
|
||||
textfields.forEach((textfield) => {
|
||||
textfield.addEventListener('input', () => {
|
||||
generateUrl();
|
||||
saveSettingsToLocalStorage();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
async function generateUrl() {
|
||||
document.getElementById("outputUrl").value = '';
|
||||
|
||||
var runThisLocally = document.querySelector("input[type=checkbox][name=runThisLocally]").checked;
|
||||
var baseUrl = '';
|
||||
|
||||
if (runThisLocally == false) {
|
||||
baseUrl = 'https://vortisrd.github.io/chatrd/chat.html'
|
||||
}
|
||||
|
||||
const checkboxes = document.querySelectorAll("input[type=checkbox]:not(.avoid)");
|
||||
const textfields = document.querySelectorAll("input[type=text]:not(.avoid)");
|
||||
const numberfields = document.querySelectorAll("input[type=number]:not(.avoid)");
|
||||
const selects = document.querySelectorAll("select:not(.avoid)");
|
||||
|
||||
const params = new URLSearchParams();
|
||||
|
||||
selects.forEach((select) => {
|
||||
params.set(select.name, select.value);
|
||||
});
|
||||
checkboxes.forEach((checkbox) => {
|
||||
params.set(checkbox.name, checkbox.checked);
|
||||
});
|
||||
textfields.forEach((textfield) => {
|
||||
params.set(textfield.name, textfield.value);
|
||||
});
|
||||
numberfields.forEach((numberfield) => {
|
||||
params.set(numberfield.name, numberfield.value);
|
||||
});
|
||||
|
||||
document.getElementById("outputUrl").value = baseUrl + '?' + params.toString();
|
||||
document.querySelector('#chat-preview iframe').src = 'chat.html?'+params.toString();
|
||||
}
|
||||
|
||||
async function copyUrl() {
|
||||
|
||||
const output = document.getElementById("outputUrl");
|
||||
|
||||
output.select();
|
||||
document.execCommand("copy");
|
||||
|
||||
const button = document.querySelector('.url-bar button');
|
||||
const buttonDefaulText = 'Copy URL';
|
||||
|
||||
button.textContent = 'ChatRD URL Copied!';
|
||||
button.style.backgroundColor = "#00dd63";
|
||||
|
||||
setTimeout(() => {
|
||||
button.textContent = buttonDefaulText;
|
||||
button.removeAttribute('style');
|
||||
}, 3000);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function setupAddEmoteModal() {
|
||||
const modal = document.getElementById("addEmoteModal");
|
||||
const nameInput = document.getElementById("newEmoteName");
|
||||
const urlInput = document.getElementById("newEmoteURL");
|
||||
const confirmBtn = document.getElementById("confirmAddEmote");
|
||||
const cancelBtn = document.getElementById("cancelAddEmote");
|
||||
const addButton = document.querySelector("#youtube .emote-item:last-child .add");
|
||||
const textarea = document.querySelector("textarea[name=youTubeCustomEmotes]");
|
||||
|
||||
if (!modal || !addButton || !textarea) return;
|
||||
|
||||
// Show modal
|
||||
addButton.onclick = () => {
|
||||
if (streamerBotConnected == true) {
|
||||
nameInput.value = "";
|
||||
urlInput.value = "";
|
||||
modal.classList.remove("hidden");
|
||||
nameInput.focus();
|
||||
}
|
||||
else {
|
||||
alert("Streamer.bot is Offline!");
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
// Cancel
|
||||
cancelBtn.onclick = () => {
|
||||
modal.classList.add("hidden");
|
||||
};
|
||||
|
||||
// Confirm
|
||||
confirmBtn.onclick = () => {
|
||||
const name = nameInput.value.trim();
|
||||
const url = urlInput.value.trim();
|
||||
|
||||
if (!name || !url) {
|
||||
alert("Both fields are required.");
|
||||
return;
|
||||
}
|
||||
|
||||
let emotes;
|
||||
try {
|
||||
emotes = JSON.parse(textarea.value);
|
||||
} catch (err) {
|
||||
console.error("Invalid JSON", err);
|
||||
alert("Emote data is invalid.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (emotes[name]) {
|
||||
alert(`Emote "${name}" already exists.`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Add and update
|
||||
emotes[name] = url;
|
||||
textarea.value = JSON.stringify(emotes, null, 4);
|
||||
modal.classList.add("hidden");
|
||||
populateEmoteList();
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function populateEmoteList() {
|
||||
const textarea = document.querySelector("textarea[name=youTubeCustomEmotes]");
|
||||
const emoteList = document.querySelector("#youtube .emote-list");
|
||||
|
||||
if (!textarea || !emoteList) return;
|
||||
|
||||
const addButtonSpan = emoteList.querySelector(".emote-item:last-child");
|
||||
|
||||
// Remove all emote items except the add button
|
||||
emoteList.querySelectorAll(".emote-item").forEach(item => {
|
||||
if (item !== addButtonSpan) {
|
||||
item.remove();
|
||||
}
|
||||
});
|
||||
|
||||
let emotes;
|
||||
try {
|
||||
emotes = JSON.parse(textarea.value);
|
||||
} catch (e) {
|
||||
console.error("Invalid JSON in YouTube Emotes textarea", e);
|
||||
return;
|
||||
}
|
||||
|
||||
// Recreate each emote item
|
||||
for (const [emoteName, emoteUrl] of Object.entries(emotes)) {
|
||||
const span = document.createElement("span");
|
||||
span.classList.add("emote-item");
|
||||
span.innerHTML = `
|
||||
<img data-emote="${emoteName}" src="${emoteUrl}" alt="">
|
||||
<em>${emoteName}</em>
|
||||
<button class="delete"><i class="fa-solid fa-trash-can"></i></button>
|
||||
`;
|
||||
|
||||
// Add delete handler directly to the button
|
||||
const deleteBtn = span.querySelector(".delete");
|
||||
deleteBtn.addEventListener("click", () => {
|
||||
if (confirm(`Are you sure you want to delete '${emoteName}'?`)) {
|
||||
delete emotes[emoteName];
|
||||
textarea.value = JSON.stringify(emotes, null, 4);
|
||||
populateEmoteList(); // Re-render everything
|
||||
}
|
||||
});
|
||||
|
||||
emoteList.insertBefore(span, addButtonSpan);
|
||||
}
|
||||
|
||||
setupAddEmoteModal();
|
||||
generateUrl();
|
||||
saveSettingsToLocalStorage();
|
||||
}
|
||||
|
||||
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
loadSettingsFromLocalStorage();
|
||||
generateUrl();
|
||||
pushChangeEvents();
|
||||
populateEmoteList();
|
||||
});
|
||||
45
js/streamelements/module.js
Normal file
45
js/streamelements/module.js
Normal file
@@ -0,0 +1,45 @@
|
||||
const showStreamElementsTips = getURLParam("showStreamElementsTips", true);
|
||||
|
||||
const streamElementsHandlers = {
|
||||
'StreamElements.Tip': (response) => {
|
||||
console.debug(response.data);
|
||||
if (showStreamElementsTips == false)
|
||||
return;
|
||||
streamElementsEventMessage(response.data);
|
||||
},
|
||||
};
|
||||
for (const [event, handler] of Object.entries(streamElementsHandlers)) {
|
||||
streamerBotClient.on(event, handler);
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function streamElementsEventMessage(data) {
|
||||
const {
|
||||
username: userName,
|
||||
amount: moneyFromUser,
|
||||
currency: currencyFromUser,
|
||||
message: messageFromUser,
|
||||
} = data;
|
||||
|
||||
const userID = createRandomString(40);
|
||||
const messageID = createRandomString(40);
|
||||
const [avatar, message] = await Promise.all([
|
||||
'',
|
||||
currentLang.streamlabs.tip({
|
||||
money : formatCurrency(moneyFromUser,currencyFromUser),
|
||||
message : messageFromUser
|
||||
})
|
||||
]);
|
||||
const classes = 'streamelements';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
addEventToChat(userID, messageID, 'dollar-sign', messageData);
|
||||
}
|
||||
43
js/streamlabs/module.js
Normal file
43
js/streamlabs/module.js
Normal file
@@ -0,0 +1,43 @@
|
||||
const showStreamlabsDonations = getURLParam("showStreamlabsDonations", true);
|
||||
|
||||
const streamLabsHandlers = {
|
||||
'Streamlabs.Donation': (response) => {
|
||||
console.debug(response.data);
|
||||
if (showStreamlabsDonations == false)
|
||||
return;
|
||||
streamLabsEventMessage(response.data);
|
||||
},
|
||||
};
|
||||
for (const [event, handler] of Object.entries(streamLabsHandlers)) {
|
||||
streamerBotClient.on(event, handler);
|
||||
}
|
||||
|
||||
async function streamLabsEventMessage(data) {
|
||||
const {
|
||||
from: userName,
|
||||
formattedAmount: moneyFromUser,
|
||||
currency: currencyFromUser,
|
||||
message: messageFromUser,
|
||||
} = data;
|
||||
|
||||
const userID = createRandomString(40);
|
||||
const messageID = createRandomString(40);
|
||||
const [avatar, message] = await Promise.all([
|
||||
'',
|
||||
currentLang.streamlabs.tip({
|
||||
money : formatCurrency(moneyFromUser,currencyFromUser),
|
||||
message : messageFromUser
|
||||
})
|
||||
]);
|
||||
const classes = 'streamlabs';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
addEventToChat(userID, messageID, 'dollar-sign', messageData);
|
||||
}
|
||||
231
js/tiktok/module.js
Normal file
231
js/tiktok/module.js
Normal file
@@ -0,0 +1,231 @@
|
||||
/* ----------------------------------------------------------------------------------------- */
|
||||
/* TikFinity >< Streamer.Bot */
|
||||
/* ----------------------------------------------------------------------------------------- */
|
||||
/* In Streamer.bot, go into Servers/Clients, then Websocket clients, */
|
||||
/* and add the server info for TikFinity Desktop App. */
|
||||
/* ----------------------------------------------------------------------------------------- */
|
||||
/* If it's also running on the same computer, the address will be: ws://127.0.0.1:21213/ */
|
||||
/* ----------------------------------------------------------------------------------------- */
|
||||
|
||||
const showTikTokMessages = getURLParam("showTikTokMessages", true);
|
||||
const showTikTokFollows = getURLParam("showTikTokFollows", true);
|
||||
const showTikTokGifts = getURLParam("showTikTokGifts", true);
|
||||
const showTikTokSubs = getURLParam("showTikTokSubs", true);
|
||||
const showTikTokStatistics = getURLParam("showTikTokStatistics", true);
|
||||
|
||||
userColors.set('tiktok', new Map());
|
||||
|
||||
if (showTikTokStatistics == false) { document.querySelector('#statistics #tiktok').style.display = 'none'; }
|
||||
|
||||
|
||||
|
||||
streamerBotClient.on('General.Custom', (response) => {
|
||||
if (response.data.platform === 'TikTok') {
|
||||
|
||||
let json = response.data;
|
||||
let jsonData = json.data.data;
|
||||
|
||||
switch (json.data.event) {
|
||||
case 'roomUser' :
|
||||
tiktokUpdateStatistics(jsonData, 'viewers');
|
||||
break;
|
||||
case 'like' :
|
||||
tiktokUpdateStatistics(jsonData, 'likes');
|
||||
break;
|
||||
case 'chat' :
|
||||
console.log('TikTok Chat', jsonData);
|
||||
tiktokChatMessage(jsonData);
|
||||
break;
|
||||
case 'follow' :
|
||||
console.log('TikTok Follow', jsonData);
|
||||
tiktokFollowMessage(jsonData);
|
||||
break;
|
||||
case 'subscribe' :
|
||||
console.log('TikTok Sub', jsonData);
|
||||
tiktokSubMessage(jsonData);
|
||||
break;
|
||||
case 'gift' :
|
||||
console.log('TikTok Gift', jsonData);
|
||||
tiktokGiftMessage(jsonData);
|
||||
break;
|
||||
default:
|
||||
//console.debug(json);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
async function tiktokChatMessage(data) {
|
||||
|
||||
if (showTikTokMessages == false) return;
|
||||
if (ignoreUserList.includes(data.nickname.toLowerCase())) return;
|
||||
if (data.comment.startsWith("!") && excludeCommands == true) return;
|
||||
|
||||
|
||||
const {
|
||||
userId: userID,
|
||||
msgId: messageID,
|
||||
profilePictureUrl: avatar,
|
||||
comment: message,
|
||||
emotes,
|
||||
nickname: userName,
|
||||
isSubscriber,
|
||||
isModerator,
|
||||
} = data;
|
||||
|
||||
const badgesHTML = [
|
||||
isSubscriber && '<i class="fa-solid fa-star"></i>',
|
||||
isModerator && '<i class="fa-solid fa-user-gear"></i>',
|
||||
].filter(Boolean).join('');
|
||||
|
||||
const classes = [
|
||||
isSubscriber && 'sub',
|
||||
isModerator && 'mod',
|
||||
].filter(Boolean);
|
||||
|
||||
var fullmessage = message;
|
||||
|
||||
if (emotes.length > 0) {
|
||||
emotes.forEach(emote => {
|
||||
var emotetoadd = ` <img src="${emote.emoteImageUrl}" class="emote" data-emote-id="${emote.emoteId}"> `;
|
||||
var position = emote.placeInComment;
|
||||
fullmessage = [fullmessage.slice(0, position), emotetoadd, fullmessage.slice(position)].join('');
|
||||
});
|
||||
}
|
||||
|
||||
const messageData = {
|
||||
classes: classes.join(' '),
|
||||
avatar,
|
||||
badges: badgesHTML,
|
||||
userName,
|
||||
color: await createRandomColor('tiktok', userID),
|
||||
message: fullmessage,
|
||||
reply: '',
|
||||
};
|
||||
|
||||
addMessageToChat(userID, messageID, 'tiktok', messageData);
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function tiktokFollowMessage(data) {
|
||||
|
||||
if (showTikTokFollows == false) return;
|
||||
|
||||
const {
|
||||
userId: userID,
|
||||
msgId: messageID,
|
||||
profilePictureUrl: avatar,
|
||||
nickname: userName,
|
||||
} = data;
|
||||
|
||||
const message = currentLang.tiktok.follow();
|
||||
const classes = 'follow'
|
||||
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
|
||||
addEventToChat(userID, messageID, 'tiktok', messageData);
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function tiktokSubMessage(data) {
|
||||
|
||||
if (showTikTokSubs == false) return;
|
||||
|
||||
const {
|
||||
userId: userID,
|
||||
msgId: messageID,
|
||||
profilePictureUrl: avatar,
|
||||
nickname: userName,
|
||||
} = data;
|
||||
|
||||
const message = currentLang.tiktok.sub({
|
||||
months : data.subMonth
|
||||
});
|
||||
|
||||
const classes = 'sub'
|
||||
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
|
||||
addEventToChat(userID, messageID, 'tiktok', messageData);
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function tiktokGiftMessage(data) {
|
||||
|
||||
if (showTikTokGifts == false) return;
|
||||
if (data.giftType === 1 && !data.repeatEnd) {}
|
||||
else {
|
||||
const {
|
||||
userId: userID,
|
||||
msgId: messageID,
|
||||
profilePictureUrl: avatar,
|
||||
nickname: userName,
|
||||
} = data;
|
||||
|
||||
var coins = Math.floor(data.repeatCount*data.diamondCount);
|
||||
|
||||
const message = currentLang.tiktok.gift({
|
||||
gift : data.giftName,
|
||||
count : data.repeatCount,
|
||||
coins : coins
|
||||
});
|
||||
|
||||
const classes = 'gift'
|
||||
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
|
||||
addEventToChat(userID, messageID, 'tiktok', messageData);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
async function tiktokUpdateStatistics(data, type) {
|
||||
|
||||
if (showPlatformStatistics == false || showTikTokStatistics == false) return;
|
||||
|
||||
if (type == 'viewers') {
|
||||
const viewers = DOMPurify.sanitize(data.viewerCount);
|
||||
document.querySelector('#statistics #tiktok .viewers span').textContent = formatNumber(viewers);
|
||||
}
|
||||
|
||||
if (type == 'likes') {
|
||||
const likes = DOMPurify.sanitize(data.totalLikeCount);
|
||||
document.querySelector('#statistics #tiktok .likes span').textContent = formatNumber(likes);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
579
js/twitch/module.js
Normal file
579
js/twitch/module.js
Normal file
@@ -0,0 +1,579 @@
|
||||
const showTwitchMessages = getURLParam("showTwitchMessages", true);
|
||||
const showTwitchFollows = getURLParam("showTwitchFollows", true);
|
||||
const showTwitchBits = getURLParam("showTwitchBits", true);
|
||||
const showTwitchAnnouncements = getURLParam("showTwitchAnnouncements", true);
|
||||
const showTwitchSubs = getURLParam("showTwitchSubs", true);
|
||||
const showTwitchGiftedSubs = getURLParam("showTwitchGiftedSubs", true);
|
||||
const showTwitchGiftedSubsUserTrain = getURLParam("showTwitchGiftedSubsUserTrain", true);
|
||||
const showTwitchMassGiftedSubs = getURLParam("showTwitchMassGiftedSubs", true);
|
||||
const showTwitchRewardRedemptions = getURLParam("showTwitchRewardRedemptions", true);
|
||||
const showTwitchRaids = getURLParam("showTwitchRaids", true);
|
||||
const showTwitchSharedChat = getURLParam("showTwitchSharedChat", true);
|
||||
const showTwitchViewers = getURLParam("showTwitchViewers", true);
|
||||
|
||||
if (showTwitchViewers == false) { document.querySelector('#statistics #twitch').style.display = 'none'; }
|
||||
|
||||
const twitchMessageHandlers = {
|
||||
'Twitch.ChatMessage': (response) => {
|
||||
console.debug('Twitch Chat', response.data);
|
||||
twitchChatMessage(response.data);
|
||||
},
|
||||
'Twitch.Follow': (response) => {
|
||||
console.debug('Twitch Follow', response.data);
|
||||
twitchFollowMessage(response.data);
|
||||
},
|
||||
'Twitch.Announcement': (response) => {
|
||||
console.debug('Twitch Announcements', response.data);
|
||||
twitchAnnouncementMessage(response.data);
|
||||
},
|
||||
'Twitch.Cheer': (response) => {
|
||||
console.debug('Twitch Cheer/Bits', response.data);
|
||||
twitchBitsMessage(response.data);
|
||||
},
|
||||
'Twitch.AutomaticRewardRedemption': (response) => {
|
||||
console.debug('Twitch Auto Reward Redemption', response.data);
|
||||
twitchChatMessageGiantEmote(response.data);
|
||||
},
|
||||
'Twitch.RewardRedemption': (response) => {
|
||||
console.debug('Twitch Reward Redemption', response.data);
|
||||
twitchRewardRedemption(response.data);
|
||||
},
|
||||
'Twitch.Sub': (response) => {
|
||||
console.debug('Twitch Sub', response.data);
|
||||
twitchSubMessage(response.data);
|
||||
},
|
||||
'Twitch.ReSub': (response) => {
|
||||
console.debug('Twitch Resub', response.data);
|
||||
twitchReSubMessage(response.data);
|
||||
},
|
||||
'Twitch.GiftSub': (response) => {
|
||||
console.debug('Twitch Gift Sub', response.data);
|
||||
twitchGiftMessage(response.data);
|
||||
|
||||
},
|
||||
'Twitch.GiftBomb': (response) => {
|
||||
console.debug('Twitch Gift Bomb', response.data);
|
||||
twitchGiftSubsMessage(response.data);
|
||||
},
|
||||
'Twitch.Raid': (response) => {
|
||||
console.debug('Twitch Raid', response.data);
|
||||
twitchRaidMessage(response.data);
|
||||
},
|
||||
'Twitch.ChatMessageDeleted': (response) => {
|
||||
console.debug('Twitch Chat Deleted', response.data);
|
||||
twitchChatMessageDeleted(response.data);
|
||||
},
|
||||
'Twitch.UserBanned': (response) => {
|
||||
console.debug('Twitch Ban', response.data);
|
||||
twitchUserBanned(response.data);
|
||||
},
|
||||
'Twitch.UserTimedOut': (response) => {
|
||||
console.debug('Twitch Timeout', response.data);
|
||||
twitchUserBanned(response.data);
|
||||
},
|
||||
'Twitch.ViewerCountUpdate': (response) => {
|
||||
console.debug('Twitch View Count Update', response.data);
|
||||
twitchUpdateStatistics(response.data);
|
||||
},
|
||||
'Twitch.ChatCleared': (response) => {
|
||||
console.debug('Twitch Chat Clear', response.data);
|
||||
twitchChatClearMessages();
|
||||
}
|
||||
};
|
||||
|
||||
for (const [event, handler] of Object.entries(twitchMessageHandlers)) {
|
||||
streamerBotClient.on(event, handler);
|
||||
}
|
||||
|
||||
|
||||
async function twitchChatMessage(data) {
|
||||
|
||||
if (showTwitchMessages == false) return;
|
||||
if (ignoreUserList.includes(data.message.username.toLowerCase())) return;
|
||||
if (data.message.message.startsWith("!") && excludeCommands == true) return;
|
||||
|
||||
const {
|
||||
message: {
|
||||
username: userID,
|
||||
color,
|
||||
displayName: userName,
|
||||
message : text,
|
||||
firstMessage,
|
||||
isReply,
|
||||
isSharedChat,
|
||||
reply: replyData,
|
||||
},
|
||||
messageId,
|
||||
} = data;
|
||||
|
||||
const [avatar, message, badges] = await Promise.all([
|
||||
getTwitchAvatar(userID),
|
||||
getTwitchEmotes(data),
|
||||
getTwitchBadges(data),
|
||||
]);
|
||||
|
||||
const classes = firstMessage ? ['first-message'] : [];
|
||||
|
||||
const replyHTML = isReply ?
|
||||
`<div class="reply"><i class="fa-solid fa-arrow-turn-up"></i> <strong>${replyData.userName}:</strong> ${replyData.msgBody}</div>` :
|
||||
'';
|
||||
|
||||
var sharedChat = '';
|
||||
if (isSharedChat) {
|
||||
if (showTwitchSharedChat == true) {
|
||||
if (!data.sharedChat.primarySource)
|
||||
{
|
||||
var sharedChat = `<div class="shared"><span><i class="fa-solid fa-comments"></i> <strong>${data.sharedChat.sourceRoom.name}</strong></span> <i class="fa-solid fa-arrow-turn-down"></i></div>`;
|
||||
}
|
||||
}
|
||||
else if (!data.sharedChat.primarySource && showTwitchSharedChat == false) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const messageData = {
|
||||
classes: classes.join(' '),
|
||||
avatar,
|
||||
badges,
|
||||
userName,
|
||||
color,
|
||||
message,
|
||||
shared: sharedChat,
|
||||
reply: replyHTML,
|
||||
};
|
||||
|
||||
addMessageToChat(userID, messageId, 'twitch', messageData);
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function twitchChatMessageGiantEmote(data) {
|
||||
|
||||
if (showTwitchMessages == false) return;
|
||||
|
||||
const {
|
||||
user_login: userID,
|
||||
gigantified_emote: { id: emoteGigantify }
|
||||
} = data;
|
||||
const userMessages = chatContainer.querySelectorAll(`.twitch.message[data-user="${userID}"]`);
|
||||
|
||||
if (userMessages.length === 0) return;
|
||||
|
||||
const firstMessage = userMessages[0];
|
||||
const emoteImages = firstMessage.querySelectorAll(`img[data-emote-id="${emoteGigantify}"]`);
|
||||
|
||||
if (emoteImages.length === 0) return;
|
||||
|
||||
emoteImages.forEach(img => {
|
||||
img.classList.add("gigantify");
|
||||
if (img.src.endsWith("2.0")) {
|
||||
img.src = img.src.replace("2.0", "3.0");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function twitchFollowMessage(data) {
|
||||
|
||||
if (showTwitchFollows == false) return;
|
||||
|
||||
const {
|
||||
user_id : userID,
|
||||
user_name : userName
|
||||
} = data;
|
||||
|
||||
const messageID = createRandomString(40);
|
||||
|
||||
const [avatar, message] = await Promise.all([
|
||||
'',
|
||||
currentLang.twitch.follow(),
|
||||
]);
|
||||
|
||||
const classes = 'follow';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
|
||||
addEventToChat(userID, messageID, 'twitch', messageData);
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function twitchBitsMessage(data) {
|
||||
|
||||
if (showTwitchBits == false) return;
|
||||
|
||||
const {
|
||||
messageId : messageID,
|
||||
user : {
|
||||
id : userID,
|
||||
name : userName
|
||||
}
|
||||
} = data;
|
||||
|
||||
data.message.message = data.message.message.replace(/\bCheer\d+\b/g, '').replace(/\s+/g, ' ').trim();
|
||||
|
||||
const [avatar, message] = await Promise.all([
|
||||
'',
|
||||
currentLang.twitch.bits({
|
||||
bits: data.message.bits,
|
||||
message : await getTwitchEmotes(data)
|
||||
}),
|
||||
]);
|
||||
|
||||
const classes = 'bits';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
|
||||
addEventToChat(userID, messageID, 'twitch', messageData);
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function twitchAnnouncementMessage(data) {
|
||||
|
||||
if (showTwitchAnnouncements == false) return;
|
||||
|
||||
const {
|
||||
messageId : messageID,
|
||||
user : {
|
||||
id : userID,
|
||||
name : userName
|
||||
}
|
||||
} = data;
|
||||
|
||||
|
||||
data.message = {
|
||||
message: await getTwitchAnnouncementEmotes(data)
|
||||
};
|
||||
|
||||
|
||||
const replyHTML = currentLang.twitch.announcement();
|
||||
|
||||
const [avatar, message] = await Promise.all([
|
||||
'',
|
||||
` ${data.message.message}`
|
||||
]);
|
||||
|
||||
const classes = 'announcement';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: replyHTML,
|
||||
};
|
||||
|
||||
addEventToChat(userID, messageID, 'twitch', messageData);
|
||||
}
|
||||
|
||||
|
||||
async function twitchRewardRedemption(data) {
|
||||
|
||||
if (showTwitchRewardRedemptions == false) return;
|
||||
|
||||
const {
|
||||
user_id : userID,
|
||||
user_name : userName,
|
||||
} = data;
|
||||
const messageID = createRandomString(40);
|
||||
const replyHTML = currentLang.twitch.channelpoints({ title : data.reward.title });
|
||||
const [avatar, message] = await Promise.all([
|
||||
'',
|
||||
` ${data.user_input}`
|
||||
]);
|
||||
const classes = 'rewards-redemption';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: replyHTML,
|
||||
};
|
||||
|
||||
addEventToChat(userID, messageID, 'twitch', messageData);
|
||||
}
|
||||
|
||||
|
||||
async function twitchSubMessage(data) {
|
||||
|
||||
if (showTwitchSubs == false) return;
|
||||
|
||||
const {
|
||||
user : {
|
||||
id : userID,
|
||||
name : userName
|
||||
}
|
||||
} = data;
|
||||
|
||||
const messageID = createRandomString(40);
|
||||
const [avatar, message] = await Promise.all([
|
||||
'',
|
||||
currentLang.twitch.sub({
|
||||
months : data.duration_months,
|
||||
isPrime : data.isPrime,
|
||||
tier : data.sub_tier
|
||||
})
|
||||
]);
|
||||
|
||||
const classes = 'sub';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
addEventToChat(userID, messageID, 'twitch', messageData);
|
||||
}
|
||||
|
||||
|
||||
async function twitchReSubMessage(data) {
|
||||
|
||||
if (showTwitchSubs == false) return;
|
||||
|
||||
const {
|
||||
user : {
|
||||
id : userID,
|
||||
name : userName
|
||||
},
|
||||
text
|
||||
} = data;
|
||||
|
||||
const messageID = createRandomString(40);
|
||||
|
||||
const [avatar, message] = await Promise.all([
|
||||
'',
|
||||
currentLang.twitch.resub({
|
||||
months : data.cumulativeMonths,
|
||||
isPrime : data.isPrime,
|
||||
tier : data.subTier,
|
||||
message : text
|
||||
})
|
||||
]);
|
||||
|
||||
const classes = 'sub';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
|
||||
addEventToChat(userID, messageID, 'twitch', messageData);
|
||||
}
|
||||
|
||||
|
||||
async function twitchGiftMessage(data) {
|
||||
|
||||
if (data.fromCommunitySubGift === false) {
|
||||
if (showTwitchSubs == false || showTwitchGiftedSubs == false) return;
|
||||
}
|
||||
else {
|
||||
if (showTwitchSubs == false || showTwitchGiftedSubsUserTrain == false) return;
|
||||
}
|
||||
|
||||
|
||||
const {
|
||||
user : {
|
||||
id : userID,
|
||||
name : userName
|
||||
}
|
||||
} = data;
|
||||
|
||||
const messageID = createRandomString(40);
|
||||
|
||||
const [avatar, message] = await Promise.all([
|
||||
'',
|
||||
currentLang.twitch.gifted({
|
||||
gifted : data.recipient.name,
|
||||
months : data.durationMonths,
|
||||
tier : data.subTier,
|
||||
total : data.cumlativeTotal
|
||||
})
|
||||
]);
|
||||
|
||||
const classes = 'sub';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
|
||||
addEventToChat(userID, messageID, 'twitch', messageData);
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function twitchGiftSubsMessage(data) {
|
||||
|
||||
if (showTwitchSubs == false || showTwitchMassGiftedSubs == false) return;
|
||||
|
||||
const {
|
||||
user : {
|
||||
id : userID,
|
||||
name : userName
|
||||
}
|
||||
} = data;
|
||||
|
||||
const messageID = createRandomString(40);
|
||||
|
||||
const [avatar, message] = await Promise.all([
|
||||
'',
|
||||
currentLang.twitch.giftedbomb({ count : data.total, tier : data.sub_tier, total : data.cumulative_total })
|
||||
]);
|
||||
|
||||
const classes = 'sub';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
addEventToChat(userID, messageID, 'twitch', messageData);
|
||||
}
|
||||
|
||||
|
||||
async function twitchRaidMessage(data) {
|
||||
|
||||
if (showTwitchRaids == false) return;
|
||||
|
||||
const {
|
||||
from_broadcaster_user_login: userID,
|
||||
from_broadcaster_user_name: userName
|
||||
} = data;
|
||||
|
||||
const messageID = createRandomString(40);
|
||||
const [avatar, message] = await Promise.all([
|
||||
'',
|
||||
currentLang.twitch.raid({ viewers : data.viewers })
|
||||
]);
|
||||
|
||||
const classes = 'raid';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
};
|
||||
|
||||
addEventToChat(userID, messageID, 'twitch', messageData);
|
||||
}
|
||||
|
||||
|
||||
async function twitchChatMessageDeleted(data) {
|
||||
document.getElementById(data.messageId)?.remove();
|
||||
}
|
||||
|
||||
|
||||
async function twitchUserBanned(data) {
|
||||
chatContainer.querySelectorAll(`[data-user="${data.user_login}"]`).forEach(element => {
|
||||
element.remove();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
async function twitchChatClearMessages() {
|
||||
chatContainer.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
async function twitchUpdateStatistics(data) {
|
||||
|
||||
if (showPlatformStatistics == false || showTwitchViewers == false) return;
|
||||
|
||||
const viewers = DOMPurify.sanitize(data.viewers);
|
||||
document.querySelector('#statistics #twitch .viewers span').textContent = formatNumber(viewers);
|
||||
}
|
||||
|
||||
|
||||
async function getTwitchEmotes(data) {
|
||||
const message = data.message.message;
|
||||
const emotes = data.emotes;
|
||||
const words = message.split(" ");
|
||||
emotes.sort((a, b) => b.startIndex - a.startIndex);
|
||||
for (let i = 0; i < words.length; i++) {
|
||||
emotes.forEach(emote => {
|
||||
if (words[i] === emote.name) {
|
||||
words[i] = `<img src="${emote.imageUrl}" data-emote-id="${emote.id}" alt="${emote.name}" class="emote">`;
|
||||
}
|
||||
});
|
||||
}
|
||||
return words.join(" ");
|
||||
}
|
||||
|
||||
|
||||
async function getTwitchAnnouncementEmotes(data) {
|
||||
const message = data.text;
|
||||
const emotes = data.parts;
|
||||
const words = message.split(" ");
|
||||
emotes.sort((a, b) => b.startIndex - a.startIndex);
|
||||
for (let i = 0; i < words.length; i++) {
|
||||
emotes.forEach(emote => {
|
||||
if (words[i] === emote.text) {
|
||||
words[i] = `<img src="${emote.imageUrl}" alt="${emote.text}" class="emote">`;
|
||||
}
|
||||
});
|
||||
}
|
||||
return words.join(" ");
|
||||
}
|
||||
|
||||
|
||||
async function getTwitchBadges(data) {
|
||||
const badges = data.message.badges;
|
||||
var htmlBadges = '';
|
||||
badges.forEach((badge) => {
|
||||
htmlBadges += `<img src="${badge.imageUrl}" class="badge">`;
|
||||
});
|
||||
return htmlBadges;
|
||||
}
|
||||
|
||||
|
||||
async function getTwitchAvatar(user) {
|
||||
if (showAvatar == true) {
|
||||
if (avatars.has(user)) {
|
||||
console.debug(`Avatar found for ${user}!`);
|
||||
return avatars.get(user);
|
||||
}
|
||||
else {
|
||||
console.debug(`Avatar not found for ${user}! Getting it from DECAPI!`);
|
||||
var decapi = await fetch('https://decapi.me/twitch/avatar/' + user);
|
||||
var newavatar = await decapi.text()
|
||||
avatars.set(user, newavatar);
|
||||
return newavatar;
|
||||
}
|
||||
}
|
||||
}
|
||||
401
js/youtube/module.js
Normal file
401
js/youtube/module.js
Normal file
@@ -0,0 +1,401 @@
|
||||
const showYouTubeMessages = getURLParam("showYouTubeMessages", true);
|
||||
const showYouTubeSuperChats = getURLParam("showYouTubeSuperChats", true);
|
||||
const showYouTubeSuperStickers = getURLParam("showYouTubeSuperStickers", true);
|
||||
const showYouTubeSuperStickerGif = getURLParam("showYouTubeSuperStickerGif", true);
|
||||
const showYouTubeMemberships = getURLParam("showYouTubeMemberships", true);
|
||||
const showYouTubeGiftMemberships = getURLParam("showYouTubeGiftMemberships", true);
|
||||
const showYouTubeMembershipsTrain = getURLParam("showYouTubeMembershipsTrain", true);
|
||||
const showYouTubeStatistics = getURLParam("showYouTubeStatistics", true);
|
||||
|
||||
let youTubeCustomEmotes = [];
|
||||
|
||||
let youTubeBTTVEmotes = [];
|
||||
|
||||
userColors.set('youtube', new Map());
|
||||
|
||||
if (showYouTubeStatistics == false) { document.querySelector('#statistics #youtube').style.display = 'none'; }
|
||||
|
||||
const youtubeMessageHandlers = {
|
||||
'YouTube.Message': (response) => {
|
||||
console.debug('YouTube Chat', response.data);
|
||||
youTubeChatMessage(response.data);
|
||||
},
|
||||
'YouTube.UserBanned': (response) => {
|
||||
console.debug('YouTube Timeout/Hide/Ban', response.data);
|
||||
youTubeUserBanned(response.data);
|
||||
},
|
||||
'YouTube.SuperChat': (response) => {
|
||||
console.debug('YouTube SuperChat', response.data);
|
||||
youTubeSuperChatMessage(response.data);
|
||||
},
|
||||
'YouTube.SuperSticker': (response) => {
|
||||
console.debug('YouTube Super Sticker', response.data);
|
||||
youTubeSuperStickerMessage(response.data);
|
||||
},
|
||||
'YouTube.NewSponsor': (response) => {
|
||||
console.debug('YouTube New Member', response.data);
|
||||
youTubeNewSponsorMessage(response.data);
|
||||
},
|
||||
'YouTube.MemberMileStone': (response) => {
|
||||
console.debug('YouTube Member Milestone', response.data);
|
||||
youTubeNewSponsorMessage(response.data);
|
||||
},
|
||||
'YouTube.MembershipGift': (response) => {
|
||||
console.debug('YouTube Gifted Membership', response.data);
|
||||
youTubeGiftedMembersMessage(response.data);
|
||||
},
|
||||
'YouTube.GiftMembershipReceived': (response) => {
|
||||
console.debug('YouTube Gifted Membership Bomb', response.data);
|
||||
YouTubeGiftReceivedMessage(response.data);
|
||||
},
|
||||
'YouTube.StatisticsUpdated': (response) => {
|
||||
console.debug(response.data);
|
||||
youTubeUpdateStatistics(response.data);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
for (const [event, handler] of Object.entries(youtubeMessageHandlers)) {
|
||||
streamerBotClient.on(event, handler);
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function youTubeChatMessage(data) {
|
||||
|
||||
if (showYouTubeMessages == false) return;
|
||||
if (ignoreUserList.includes(data.user.name.toLowerCase())) return;
|
||||
if (data.message.startsWith("!") && excludeCommands == true) return;
|
||||
|
||||
if (streamerBotConnected == true) {
|
||||
if (youTubeCustomEmotes.length == 0) {
|
||||
streamerBotClient.getGlobals().then( (getglobals) => {
|
||||
youTubeCustomEmotes = JSON.parse(JSON.parse(getglobals.variables.chatrdytcustomemotes.value));
|
||||
console.debug('Getting YouTube Emotes from Streamer.Bot', youTubeCustomEmotes);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
user: {
|
||||
id: userID,
|
||||
profileImageUrl: avatar,
|
||||
name: userName,
|
||||
isVerified,
|
||||
isSponsor,
|
||||
isModerator,
|
||||
isOwner,
|
||||
},
|
||||
eventId: messageID,
|
||||
} = data;
|
||||
|
||||
var messageHTML = await getYouTubeEmotes(data);
|
||||
|
||||
const badgesHTML = [
|
||||
isVerified && '<i class="fa-solid fa-check"></i>',
|
||||
isSponsor && '<i class="fa-solid fa-star"></i>',
|
||||
isModerator && '<i class="fa-solid fa-wrench"></i>',
|
||||
isOwner && '<i class="fa-solid fa-video"></i>',
|
||||
].filter(Boolean).join('');
|
||||
|
||||
const classes = [
|
||||
isSponsor && 'sub',
|
||||
isModerator && 'mod',
|
||||
isOwner && 'owner',
|
||||
].filter(Boolean);
|
||||
|
||||
const messageData = {
|
||||
classes: classes.join(' '),
|
||||
avatar,
|
||||
badges: badgesHTML,
|
||||
userName,
|
||||
color: await createRandomColor('youtube', userID),
|
||||
message : messageHTML,
|
||||
reply: '',
|
||||
};
|
||||
addMessageToChat(userID, messageID, 'youtube', messageData);
|
||||
}
|
||||
|
||||
|
||||
async function youTubeUserBanned(data) {
|
||||
chatContainer.querySelectorAll(`[data-user="${data.bannedUser.id}"]`).forEach(element => {
|
||||
element.remove();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
async function youTubeSuperChatMessage(data) {
|
||||
|
||||
if (showYouTubeSuperChats == false) return;
|
||||
|
||||
const {
|
||||
user: {
|
||||
id: userID,
|
||||
name: userName,
|
||||
},
|
||||
eventId: messageID,
|
||||
amount,
|
||||
message : textmessage
|
||||
} = data;
|
||||
|
||||
var money = amount;
|
||||
|
||||
const [avatar, message] = await Promise.all([
|
||||
``,
|
||||
currentLang.youtube.superchat({
|
||||
money : money,
|
||||
message : textmessage
|
||||
})
|
||||
]);
|
||||
|
||||
const classes = 'superchat';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
}
|
||||
addEventToChat(userID, messageID, 'youtube', messageData);
|
||||
}
|
||||
|
||||
|
||||
async function youTubeSuperStickerMessage(data) {
|
||||
|
||||
if (showYouTubeSuperStickers == false) return;
|
||||
|
||||
const {
|
||||
user: {
|
||||
id: userID,
|
||||
name: userName,
|
||||
},
|
||||
eventId: messageID,
|
||||
amount
|
||||
} = data;
|
||||
|
||||
var money = amount;
|
||||
var youtubeStickerUrl = '';
|
||||
|
||||
if (showYouTubeSuperStickerGif == true) {
|
||||
youtubeStickerUrl = await getYouTubeStickerImage(data);
|
||||
}
|
||||
|
||||
const [avatar, message] = await Promise.all([
|
||||
``,
|
||||
currentLang.youtube.supersticker({
|
||||
money : money,
|
||||
sticker : youtubeStickerUrl
|
||||
})
|
||||
]);
|
||||
|
||||
const classes = 'supersticker';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
}
|
||||
addEventToChat(userID, messageID, 'youtube', messageData);
|
||||
}
|
||||
|
||||
async function youTubeNewSponsorMessage(data) {
|
||||
|
||||
if (showYouTubeMemberships == false) return;
|
||||
|
||||
const {
|
||||
user: {
|
||||
id: userID,
|
||||
name: userName,
|
||||
},
|
||||
eventId: messageID,
|
||||
levelName,
|
||||
months,
|
||||
message: messagetext,
|
||||
} = data;
|
||||
|
||||
const [avatar, message] = await Promise.all([
|
||||
``,
|
||||
currentLang.youtube.member({
|
||||
months : months,
|
||||
tier : levelName,
|
||||
message: messagetext
|
||||
})
|
||||
]);
|
||||
|
||||
const classes = 'member';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
}
|
||||
addEventToChat(userID, messageID, 'youtube', messageData);
|
||||
}
|
||||
|
||||
|
||||
async function youTubeGiftedMembersMessage(data) {
|
||||
|
||||
if (showYouTubeGiftMemberships == false) return;
|
||||
|
||||
const {
|
||||
user: {
|
||||
id: userID,
|
||||
name: userName,
|
||||
},
|
||||
eventId: messageID,
|
||||
tier,
|
||||
count
|
||||
} = data;
|
||||
const [avatar, message] = await Promise.all([
|
||||
``,
|
||||
currentLang.youtube.giftedmembers({
|
||||
total : count,
|
||||
tier : tier
|
||||
})
|
||||
]);
|
||||
const classes = 'giftedmembers';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
}
|
||||
addEventToChat(userID, messageID, 'youtube', messageData);
|
||||
}
|
||||
|
||||
async function YouTubeGiftReceivedMessage(data) {
|
||||
|
||||
if (showYouTubeMembershipsTrain == false) return;
|
||||
|
||||
const {
|
||||
user: {
|
||||
id: userID,
|
||||
name: userName,
|
||||
},
|
||||
gifter: {
|
||||
id : gifterUserId,
|
||||
name: gifterUserName
|
||||
},
|
||||
eventId: messageID,
|
||||
tier
|
||||
} = data;
|
||||
const [avatar, message] = await Promise.all([
|
||||
``,
|
||||
currentLang.youtube.giftedmembers({
|
||||
gifted : gifterUserName,
|
||||
tier : tier
|
||||
})
|
||||
]);
|
||||
const classes = 'giftedtrainmembers';
|
||||
const messageData = {
|
||||
classes: classes,
|
||||
avatar,
|
||||
badges: '',
|
||||
userName,
|
||||
color: '#FFF',
|
||||
message,
|
||||
reply: '',
|
||||
}
|
||||
addEventToChat(gifterUserId, messageID, 'youtube', messageData);
|
||||
}
|
||||
|
||||
|
||||
async function youTubeUpdateStatistics(data) {
|
||||
|
||||
if (showYouTubeStatistics == false) return;
|
||||
|
||||
const viewers = DOMPurify.sanitize(data.concurrentViewers);
|
||||
const likes = DOMPurify.sanitize(data.likeCount);
|
||||
document.querySelector('#statistics #youtube .viewers span').textContent = formatNumber(viewers);
|
||||
document.querySelector('#statistics #youtube .likes span').textContent = formatNumber(likes);
|
||||
}
|
||||
|
||||
|
||||
async function getYouTubeEmotes(data) {
|
||||
let message = data.message;
|
||||
|
||||
const channelId = data.broadcast?.channelId;
|
||||
if (!channelId) return message;
|
||||
|
||||
// Load emotes if not already loaded
|
||||
if (youTubeBTTVEmotes.length === 0) {
|
||||
try {
|
||||
const res = await fetch(`https://api.betterttv.net/3/cached/users/youtube/${channelId}`);
|
||||
const emoteData = await res.json();
|
||||
youTubeBTTVEmotes = [
|
||||
...(emoteData.sharedEmotes || []),
|
||||
...(emoteData.channelEmotes || [])
|
||||
];
|
||||
} catch (err) {
|
||||
console.warn("Failed to load BTTV emotes:", err);
|
||||
}
|
||||
}
|
||||
|
||||
// Replace BTTV emotes
|
||||
for (const emote of youTubeBTTVEmotes) {
|
||||
const escapedCode = escapeRegex(emote.code);
|
||||
const emoteRegex = new RegExp(`(?<!\\S)${escapedCode}(?!\\S)`, 'g');
|
||||
|
||||
const imageUrl = `https://cdn.betterttv.net/emote/${emote.id}/1x`;
|
||||
const emoteElement = `<img src="${imageUrl}" class="emote">`;
|
||||
|
||||
message = message.replace(emoteRegex, emoteElement);
|
||||
}
|
||||
|
||||
// Replace built-in YouTube emotes
|
||||
if (data.emotes) {
|
||||
for (const emote of data.emotes) {
|
||||
const emoteRegex = new RegExp(escapeRegex(emote.name), 'g');
|
||||
const emoteElement = `<img src="${emote.imageUrl}" class="emote">`;
|
||||
message = message.replace(emoteRegex, emoteElement);
|
||||
}
|
||||
}
|
||||
|
||||
// Replace Custom Member Emotes Defined at Settings.
|
||||
// Shows if user is a Member
|
||||
if (data.user.isSponsor == true) {
|
||||
message = message.replace(/:([a-zA-Z0-9_]+):/g, (match, emoteName) => {
|
||||
if (youTubeCustomEmotes[emoteName]) {
|
||||
return `<img src="${youTubeCustomEmotes[emoteName]}" class="emote">`;
|
||||
}
|
||||
return match;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return message;
|
||||
}
|
||||
|
||||
// ChatGPT created this. :)
|
||||
async function getYouTubeStickerImage(data) {
|
||||
const stack = [data];
|
||||
|
||||
while (stack.length) {
|
||||
const current = stack.pop();
|
||||
|
||||
if (current && typeof current === 'object') {
|
||||
if ('imageUrl' in current && typeof current.imageUrl === 'string') {
|
||||
return current.imageUrl;
|
||||
}
|
||||
|
||||
for (const key in current) {
|
||||
if (Object.hasOwn(current, key)) {
|
||||
stack.push(current[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
1
streamerbot-import.vortisrd
Normal file
1
streamerbot-import.vortisrd
Normal file
@@ -0,0 +1 @@
|
||||
U0JBRR+LCAAAAAAABADVV1lz4kYQfk9V/gPFc8TqMkKu2gcjAwbvsgZzyWEf5pKsMNIomhFY3vJ/z0gcRgg2m31JQhUlqb+e7p4+Z779+kutVg+JAPXr2rf8Q35GICTys+48AzG+rf+2I4NUPLMkB2YsEQE/gtYk4QGLckxtqA3jAGDCURLEYgcey2LjNLpBOyRKKd1jYRAFYRrODjJzMMfeCo46BiVrQSGDS8rvW0ptDxVwgHPF2PO8poEsBZiopZjQtBSo4ZaCPNswNY8Qr2XvjSuW/ZmSlJQNK+gkApCSXKZIUlJCXhBNMekmLLwLuGBJJpk8QPklrgcS4SDyz3HtIzAJVhO2qnXWJBK8ZJ+fsDSuBmnrEboBGZfuPSc6ARFm4cHxFRyxCKVJIhWe2aNIAt+XcTl29onDt0JoIAX0C9cbNiEAaEhpAk3LXe8ptm5jBVpm00bY0mATHJt/FLUrA9jEAqbSagEZNeNKxo/ApkJaFtItzzIg1CpLRRbnvmupV6fIxdi9R4bvU+nrMfr2/vG15Ohq6p3zxj6aFVMvVMd7rIhHZCQQqagoYOd6uZwHMpwbvlx+DlDCOPNEY9iZLJfdRCrdsGTVNJfLtZkXpWpo9nIZcsQSGsAGprReFvn1VD/MBHEYLozHi2EMQ+RPDfqKezPxZaPe72mTcGbgnp0i3Q6xc3Uvn+mn1UsMo451O2JDJ2prbvgSu1n7D9jrvqKsfTvtPA+gpMFwKnE+dIIbv++0N3g+4GD+2XdDew2ddpf0Zn/gxZjeO6s9Ty5TPm+2/7uhikKaPmVt8bQYvrpzTPu3qu8uBhHSeADns1ekd6OnxwH+RMfrqTHOwPwqkvLKcjrxgxvG1DVGPoiGaxjc2Ee0dNrrZkifsnd5J+tv1PvDu9PW3UXfR6HkLfwy9R8e2+nTAvmPKzsAodyT5HdGNJcxkE/Yj9rcXYxDaAxEn6qS/yaY9Wgy69lJP9gMHX81cGY8eOp1VVfuJd9jYadfyLHzeDij1UDqL3hHWrv/iWLqSh5XFxR3BhnUuytX777iTvwKdZMd2ZdKPRN8N8jjye63e9v5e/uXvCpeDNL+3TjD8+lh795IvfdGHz9WkjdOCGJhHFByps3s0p+C7FGARFzi4GBNxoSnVEzYDCRBXr/f4y1xVetp21VsqwWsVlNVMLJkV/FMIrsKNpQr02x6GHhm0zQrSzck8J9zO+V8u9Bx7Px3iu379MkcKbDv9yNZ2OQlV/jjnaiXK9u2r3JLpxTEnOAjfA+/HRirQ9ODEJmejhTZo03FNC3ZiAmxFehhjDzLQwa0/oND02XpJIWk5qRSYFjrhEyQf2N4VtDj6fkzc0SOCxFEYKe8kobrXeoPd35AcnMJzgQq/EAqbigWxfkpi4uLWchZmiByXh1Nf1zPNqM0CxPLk7Mc6oalmFgl8iwgp3rTMkCrBZHlEftnSk/T9f9d4W1f9vzb2imJkMvDUCZcmbghkDO0IuKRJOuTZHoHneIA9jeH4n96Mjs+lnblIV1k9XKV45gFRerXN/z6wwdNtxr5dUC71jVdMz6UuAXlDwkTTPqIn6RXcTtwWBQRdLaO8sFSgF+i24CjA+Npc0mISLJ+JKSjAJW4UVISEs6BT0a7nlVouRQcEYR7Vx9dRN5vPZq2pZCXWF6NCM471fYypDda221XrzUFaipQXr4aTXkUe/sLjCjDvI0NAAA=
|
||||
Reference in New Issue
Block a user