bump version

Fixes #2021

.eslintrc.json

@@ -24,7 +24,10 @@
         "no-self-assign": "off",
         "@typescript-eslint/no-empty-interface": "off",
         "react/prop-types": [2, { "ignore": ["children"] }],
-        "@typescript-eslint/member-delimiter-style": "warn"
+        "@typescript-eslint/member-delimiter-style": "warn",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-this-alias": "off"
     },
     "settings": {
         "react": {

.github/pull_request_template.md

@@ -1,4 +1,4 @@
-- [ ] I agree to license my contribution under LGPL-3.0 **or** my contribution is from another project with a license compatible with LGPL-3.0
+- [ ] I agree to license my contribution under GPL-3.0 and agree to allow distribution on app stores as outlined in [LICENSE-APPSTORE](https://github.com/ajayyy/SponsorBlock/blob/master/LICENSE-APPSTORE.txt)
 
 To test this pull request, follow the [instructions in the wiki](https://github.com/ajayyy/SponsorBlock/wiki/Testing-a-Pull-Request).
 

.github/workflows/updateInvidous.yml

@@ -11,9 +11,10 @@ jobs:
       - uses: actions/checkout@v3
         with:
           submodules: recursive
-      - name: Download instance list
+      - name: Download instance lists
         run: |
-          wget https://api.invidious.io/instances.json -O ci/data.json
+          wget https://api.invidious.io/instances.json -O ci/invidious_instances.json
+          wget  https://github.com/TeamPiped/piped-uptime/raw/master/history/summary.json -O ci/piped_instances.json
       - name: Install dependencies
         run: npm ci
       - name: "Run CI"
@@ -24,7 +25,7 @@ jobs:
         # v4.2.3
         with:
           commit-message: Update Invidious List
-          author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
+          author: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
           branch: ci/update_invidious_list
           title: Update Invidious List
           body: Automated Invidious list update

.gitignore

@@ -7,5 +7,6 @@ web-ext-artifacts
 dist/
 tmp/
 .DS_Store
-ci/data.json
+ci/invidious_instances.json
+ci/piped_instances.json
 test-results

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "public/_locales"]
 	path = public/_locales
 	url = https://github.com/ajayyy/ExtensionTranslations
+[submodule "maze-utils"]
+	path = maze-utils
+	url = https://github.com/ajayyy/maze-utils

CONTRIBUTING.md

@@ -1 +1,31 @@
-If you make any contributions to SponsorBlock after this file was created, you are agreeing that any code you have contributed will be licensed under LGPL-3.0.
+If you make any contributions to SponsorBlock after this file was created, you are agreeing that any code you have contributed will be licensed under GPL-3.0 and agree to allow distribution on app stores as outlined in LICENSE-APPSTORE.
+
+# Translations
+https://crowdin.com/project/sponsorblock
+
+# Building
+## Building locally
+0. You must have [Node.js 16 or later](https://nodejs.org/) and npm installed. Works best on Linux
+1. Clone with submodules
+  ```bash
+  git clone --recursive https://github.com/ajayyy/SponsorBlock
+  ```
+  Or if you already cloned it, pull submodules with
+  ```bash
+  git submodule update --init --recursive
+  ```
+2. Copy the file `config.json.example` to `config.json` and adjust configuration as desired.
+  - Comments are invalid in JSON, make sure they are all removed.
+  - You will need to repeat this step in the future if you get build errors related to `CompileConfig` or `property does not exist on type ConfigClass`. This can happen for example when a new category is added.
+3. Run `npm ci` in the repository to install dependencies.
+4. Run `npm run build:dev` (for Chrome) or `npm run build:dev:firefox` (for Firefox) to generate a development version of the extension with source maps.
+    - You can also run `npm run build` (for Chrome) or `npm run build:firefox` (for Firefox) to generate a production build.
+5. The built extension is now in `dist/`. You can load this folder directly in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/#manifest), or convert it to a zip file to load it as a [temporary extension](https://developer.mozilla.org/docs/Tools/about:debugging#loading_a_temporary_extension) in Firefox.
+
+## Developing with a clean profile and hot reloading
+Run `npm run dev` (for Chrome) or `npm run dev:firefox` (for Firefox) to run the extension using a clean browser profile with hot reloading. This uses [`web-ext run`](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#commands).
+
+Known chromium bug: Extension is not loaded properly on first start. Visit `chrome://extensions/` and reload the extension.
+
+For Firefox for Android, use `npm run dev:firefox-android -- --adb-device <ip-address of the device>`. See the [Firefox documentation](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/#debug-your-extension) for more information. You may need to edit package.json and add the parameters directly there.
+

LICENSE

@@ -1,165 +1,674 @@
-                   GNU LESSER GENERAL PUBLIC LICENSE
+                    GNU GENERAL PUBLIC LICENSE
                        Version 3, 29 June 2007
 
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
  Everyone is permitted to copy and distribute verbatim copies
  of this license document, but changing it is not allowed.
 
+                            Preamble
 
-  This version of the GNU Lesser General Public License incorporates
-the terms and conditions of version 3 of the GNU General Public
-License, supplemented by the additional permissions listed below.
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
 
-  0. Additional Definitions.
+  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.
 
-  As used herein, "this License" refers to version 3 of the GNU Lesser
-General Public License, and the "GNU GPL" refers to version 3 of the GNU
-General Public License.
+  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.
 
-  "The Library" refers to a covered work governed by this License,
-other than an Application or a Combined Work as defined below.
+  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.
 
-  An "Application" is any work that makes use of an interface provided
-by the Library, but which is not otherwise based on the Library.
-Defining a subclass of a class defined by the Library is deemed a mode
-of using an interface provided by the Library.
+  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.
 
-  A "Combined Work" is a work produced by combining or linking an
-Application with the Library.  The particular version of the Library
-with which the Combined Work was made is also called the "Linked
-Version".
+  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.
 
-  The "Minimal Corresponding Source" for a Combined Work means the
-Corresponding Source for the Combined Work, excluding any source code
-for portions of the Combined Work that, considered in isolation, are
-based on the Application, and not on the Linked Version.
+  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.
 
-  The "Corresponding Application Code" for a Combined Work means the
-object code and/or source code for the Application, including any data
-and utility programs needed for reproducing the Combined Work from the
-Application, but excluding the System Libraries of the Combined Work.
+  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.
 
-  1. Exception to Section 3 of the GNU GPL.
+  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.
 
-  You may convey a covered work under sections 3 and 4 of this License
-without being bound by section 3 of the GNU GPL.
+  The precise terms and conditions for copying, distribution and
+modification follow.
 
-  2. Conveying Modified Versions.
+                       TERMS AND CONDITIONS
 
-  If you modify a copy of the Library, and, in your modifications, a
-facility refers to a function or data to be supplied by an Application
-that uses the facility (other than as an argument passed when the
-facility is invoked), then you may convey a copy of the modified
-version:
+  0. Definitions.
 
-   a) under this License, provided that you make a good faith effort to
-   ensure that, in the event an Application does not supply the
-   function or data, the facility still operates, and performs
-   whatever part of its purpose remains meaningful, or
+  "This License" refers to version 3 of the GNU General Public License.
 
-   b) under the GNU GPL, with none of the additional permissions of
-   this License applicable to that copy.
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
 
-  3. Object Code Incorporating Material from Library Header Files.
+  "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.
 
-  The object code form of an Application may incorporate material from
-a header file that is part of the Library.  You may convey such object
-code under terms of your choice, provided that, if the incorporated
-material is not limited to numerical parameters, data structure
-layouts and accessors, or small macros, inline functions and templates
-(ten or fewer lines in length), you do both of the following:
+  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) Give prominent notice with each copy of the object code that the
-   Library is used in it and that the Library and its use are
-   covered by this License.
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
 
-   b) Accompany the object code with a copy of the GNU GPL and this license
-   document.
+  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.
 
-  4. Combined Works.
+  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.
 
-  You may convey a Combined Work under terms of your choice that,
-taken together, effectively do not restrict modification of the
-portions of the Library contained in the Combined Work and reverse
-engineering for debugging such modifications, if you also do each of
-the following:
+  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.
 
-   a) Give prominent notice with each copy of the Combined Work that
-   the Library is used in it and that the Library and its use are
-   covered by this License.
+  1. Source Code.
 
-   b) Accompany the Combined Work with a copy of the GNU GPL and this license
-   document.
+  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.
 
-   c) For a Combined Work that displays copyright notices during
-   execution, include the copyright notice for the Library among
-   these notices, as well as a reference directing the user to the
-   copies of the GNU GPL and this license document.
+  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.
 
-   d) Do one of the following:
+  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.
 
-       0) Convey the Minimal Corresponding Source under the terms of this
-       License, and the Corresponding Application Code in a form
-       suitable for, and under terms that permit, the user to
-       recombine or relink the Application with a modified version of
-       the Linked Version to produce a modified Combined Work, in the
-       manner specified by section 6 of the GNU GPL for conveying
-       Corresponding Source.
+  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.
 
-       1) Use a suitable shared library mechanism for linking with the
-       Library.  A suitable mechanism is one that (a) uses at run time
-       a copy of the Library already present on the user's computer
-       system, and (b) will operate properly with a modified version
-       of the Library that is interface-compatible with the Linked
-       Version.
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
 
-   e) Provide Installation Information, but only if you would otherwise
-   be required to provide such information under section 6 of the
-   GNU GPL, and only to the extent that such information is
-   necessary to install and execute a modified version of the
-   Combined Work produced by recombining or relinking the
-   Application with a modified version of the Linked Version. (If
-   you use option 4d0, the Installation Information must accompany
-   the Minimal Corresponding Source and Corresponding Application
-   Code. If you use option 4d1, you must provide the Installation
-   Information in the manner specified by section 6 of the GNU GPL
-   for conveying Corresponding Source.)
+  The Corresponding Source for a work in source code form is that
+same work.
 
-  5. Combined Libraries.
+  2. Basic Permissions.
 
-  You may place library facilities that are a work based on the
-Library side by side in a single library together with other library
-facilities that are not Applications and are not covered by this
-License, and convey such a combined library under terms of your
-choice, if you do both of the following:
+  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.
 
-   a) Accompany the combined library with a copy of the same work based
-   on the Library, uncombined with any other library facilities,
-   conveyed under the terms of this License.
+  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.
 
-   b) Give prominent notice with the combined library that part of it
-   is a work based on the Library, and explaining where to find the
-   accompanying uncombined form of the same work.
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
 
-  6. Revised Versions of the GNU Lesser General Public License.
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
 
-  The Free Software Foundation may publish revised and/or new versions
-of the GNU Lesser 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.
+  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.
 
-  Each version is given a distinguishing version number. If the
-Library as you received it specifies that a certain numbered version
-of the GNU Lesser General Public License "or any later version"
-applies to it, you have the option of following the terms and
-conditions either of that published version or of any later version
-published by the Free Software Foundation. If the Library as you
-received it does not specify a version number of the GNU Lesser
-General Public License, you may choose any version of the GNU Lesser
-General Public License ever published by the Free Software Foundation.
+  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.
 
-  If the Library as you received it specifies that a proxy can decide
-whether future versions of the GNU Lesser General Public License shall
-apply, that proxy's public statement of acceptance of any version is
-permanent authorization for you to choose that version for the
-Library.
+  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 <http://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
+<http://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
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.

LICENSE-APPSTORE.txt

@@ -0,0 +1,13 @@
+The developers are aware that the terms of service that
+apply to apps distributed via Apple's App Store services and similar app stores may conflict
+with rights granted under the SponsorBlock license, the GNU General
+Public License, version 3. The copyright holders of the SponsorBlock 
+project do not wish this conflict to prevent the otherwise-compliant 
+distribution of derived apps via the App Store and similar app stores. 
+Therefore, we have committed not to pursue any license
+violation that results solely from the conflict between the GNU GPLv3
+and the Apple App Store terms of service or similar app stores. In
+other words, as long as you comply with the GPL in all other respects,
+including its requirements to provide users with source code and the
+text of the license, we will not object to your distribution of the
+SponsorBlock project through the App Store.

LICENSE-HISTORY.txt

@@ -0,0 +1,171 @@
+Prior to commit 7338af3b384e2297eaf710443121ac840099a9f1, this project was licensed under LGPL 3.0.
+
+You must follow LICENSE instead if you want to use any newer version.
+
+----
+
+                   GNU LESSER 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.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser 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
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

README.md

@@ -38,7 +38,7 @@
 
 SponsorBlock is an open-source crowdsourced browser extension to skip sponsor segments in YouTube videos. Users submit when a sponsor happens from the extension, and the extension automatically skips sponsors it knows about. It also supports skipping other categories, such as intros, outros and reminders to subscribe.
 
-It also supports Invidio.us.
+It also supports Invidious.
 
 **Translate:** [![Crowdin](https://badges.crowdin.net/sponsorblock/localized.svg)](https://crowdin.com/project/sponsorblock)
 
@@ -56,47 +56,14 @@ The dataset and API are now being used in some [ports](https://github.com/ajayyy
 
 # API
 
-You can read the API docs [here](https://wiki.sponsor.ajay.app/index.php/API_Docs).
+You can read the API docs [here](https://wiki.sponsor.ajay.app/w/API_Docs).
 
 # Building
-
-You must have [Node.js 16](https://nodejs.org/) and npm installed.
-
-1. Clone with submodules
-
-```bash
-git clone https://github.com/ajayyy/SponsorBlock --recurse-submodules=yes
-```
-
-Or if you already cloned it, pull submodules with
-
-```bash
-git submodule update --init --recursive
-```
-
-2. Copy the file `config.json.example` to `config.json` and adjust configuration as desired.
-
-    - You will need to repeat this step in the future if you get build errors related to `CompileConfig`. This can happen for example when a new category is added.
-
-3. Run `npm install` in the repository to install dependencies.
-
-4. Run `npm run build:dev` (for Chrome) or `npm run build:dev:firefox` (for Firefox) to generate a development version of the extension with source maps.
-
-    - You can also run `npm run build` (for Chrome) or `npm run build:firefox` (for Firefox) to generate a production build.
-
-5. The built extension is now in `dist/`. You can load this folder directly in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/#manifest), or convert it to a zip file to load it as a [temporary extension](https://developer.mozilla.org/en-US/docs/Tools/about:debugging#loading_a_temporary_extension) in Firefox.
-
-### Developing with a clean profile and hot reloading
-
-Run `npm run dev` (for Chrome) or `npm run dev:firefox` (for Firefox) to run the extension using a clean browser profile with hot reloading. This uses [`web-ext run`](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#commands).
-
-Known chromium bug: Extension is not loaded properly on first start. Visit `chrome://extensions/` and reload the extension.
-
-For Firefox for Android, use `npm run dev:firefox-android -- --adb-device <ip-address of the device>`. See the [Firefox documentation](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/#debug-your-extension) for more information.
+See [CONTRIBUTING.md](CONTRIBUTING.md)
 
 # Credit
 
-The awesome [Invidious API](https://docs.invidious.io/API.md) was previously used, and the server is now using [NewLeaf](https://git.sr.ht/~cadence/NewLeaf) as a to get video info from YouTube.
+The awesome [Invidious API](https://docs.invidious.io/) was previously used, and the server is now using [NewLeaf](https://git.sr.ht/~cadence/NewLeaf) as a to get video info from YouTube.
 
 Originally forked from [YTSponsorSkip](https://github.com/NDevTK/YTSponsorSkip), but very little code remains.
 
@@ -108,4 +75,4 @@ Icons made by:
 
 ### License
 
-This project is licensed under GNU LGPL v3 or any later version
+This project is licensed under GNU GPL v3 or any later version

ci/generateList.ts

@@ -0,0 +1,63 @@
+/*
+This file is only ran by GitHub Actions in order to populate the Invidious instances list
+
+This file should not be shipped with the extension
+*/
+
+/*
+Criteria for inclusion:
+Invidious
+- 30d uptime >= 90%
+- available for at least 80/90 days
+- must have been up for at least 90 days
+- HTTPS only
+- url includes name (this is to avoid redirects)
+
+Piped
+- 30d uptime >= 90%
+- available for at least 80/90 days
+- must have been up for at least 90 days
+- must not be a wildcard redirect to piped.video
+- must be currently up
+- must have a functioning frontend
+- must have a functioning API
+*/
+
+import { writeFile, existsSync } from "fs"
+import { join } from "path"
+import { getInvidiousList } from "./invidiousCI";
+// import { getPipedList } from "./pipedCI";
+
+const checkPath = (path: string) => existsSync(path);
+const fixArray = (arr: string[]) => [...new Set(arr)].sort()
+
+async function generateList() {
+  // import file from https://api.invidious.io/instances.json
+  const invidiousPath = join(__dirname, "invidious_instances.json");
+  // import file from https://github.com/TeamPiped/piped-uptime/raw/master/history/summary.json
+  const pipedPath = join(__dirname, "piped_instances.json");
+
+  // check if files exist
+  if (!checkPath(invidiousPath) || !checkPath(pipedPath)) {
+    console.log("Missing files")
+    process.exit(1);
+  }
+
+  // static non-invidious instances
+  const staticInstances = ["www.youtubekids.com"];
+  // invidious instances
+  const invidiousList = fixArray(getInvidiousList())
+  // piped instnaces
+  // const pipedList = fixArray(await getPipedList())
+
+  console.log([...staticInstances, ...invidiousList])
+
+  writeFile(
+    join(__dirname, "./invidiouslist.json"),
+    JSON.stringify([...staticInstances, ...invidiousList]),
+    (err) => {
+      if (err) return console.log(err);
+    }
+  );
+}
+generateList()

ci/invidiousCI.ts

@@ -1,55 +1,31 @@
-/*
-This file is only ran by GitHub Actions in order to populate the Invidious instances list
+import { InvidiousInstance, instanceMap } from "./invidiousType"
 
-This file should not be shipped with the extension
-*/
-
-import { writeFile, existsSync } from 'fs';
-import { join } from 'path';
-
-// import file from https://api.invidious.io/instances.json
-if (!existsSync(join(__dirname, "data.json"))) {
-  process.exit(1);
-}
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import * as data from "../ci/data.json";
-
-type instanceMap = {
-  name: string;
-  url: string;
-  dailyRatios: {ratio: string; label: string }[];
-  thirtyDayUptime: string;
-}[]
+import * as data from "../ci/invidious_instances.json";
 
 // only https servers
 const mapped: instanceMap = data
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  .filter((i: any) => i[1]?.type === 'https')
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  .map((instance: any) => {
+  .filter((i: InvidiousInstance) => i[1]?.type === "https")
+  .map((instance: InvidiousInstance) => {
     return {
       name: instance[0],
       url: instance[1].uri,
       dailyRatios: instance[1].monitor.dailyRatios,
-      thirtyDayUptime: instance[1]?.monitor['30dRatio'].ratio,
+      thirtyDayUptime: instance[1]?.monitor["30dRatio"].ratio,
     }
-  })
+  });
 
 // reliability and sanity checks
 const reliableCheck = mapped
-  .filter((instance) => {
+  .filter(instance => {
     // 30d uptime >= 90%
-    const thirtyDayUptime = Number(instance.thirtyDayUptime) >= 90
+    const thirtyDayUptime = Number(instance.thirtyDayUptime) >= 90;
     // available for at least 80/90 days
-    const dailyRatioCheck = instance.dailyRatios.filter(status => status.label !== "black")
-    return (thirtyDayUptime && dailyRatioCheck.length >= 80)
+    const dailyRatioCheck = instance.dailyRatios.filter(status => status.label !== "black");
+    return thirtyDayUptime && dailyRatioCheck.length >= 80;
   })
   // url includes name
-  .filter(instance => instance.url.includes(instance.name))
+  .filter(instance => instance.url.includes(instance.name));
 
-// finally map to array
-const result: string[] = reliableCheck.map(instance => instance.name).sort()
-writeFile(join(__dirname, "./invidiouslist.json"), JSON.stringify(result), (err) => {
-  if (err) return console.log(err);
-})
+export function getInvidiousList(): string[] {
+  return reliableCheck.map(instance => instance.name).sort()
+}

ci/invidiousType.ts

@@ -0,0 +1,54 @@
+type ratio = {
+  ratio: string;
+  label: string;
+}
+
+export type instanceMap = {
+  name: string;
+  url: string;
+  dailyRatios: {ratio: string; label: string }[];
+  thirtyDayUptime: string;
+}[]
+
+export type InvidiousInstance = [
+  string,
+  {
+    flag: string;
+    region: string;
+    stats: null | {
+      version: string;
+      software: {
+        name: string;
+        version: string;
+        branch: string;
+      };
+      openRegistrations: boolean;
+      usage: {
+        users: {
+          total: number;
+          activeHalfyear: number;
+          activeMonth: number;
+        };
+      };
+      metadata: {
+        updatedAt: number;
+        lastChannelRefreshedAt: number;
+      };
+    };
+    cors: boolean | null;
+    api: boolean | null;
+    type: "https" | "http" | "onion" | "i2p";
+    uri: string;
+    monitor: null | {
+      monitorId: number;
+      createdAt: number;
+      statusClass: string;
+      name: string;
+      url: string | null;
+      type: "HTTP(s)";
+      dailyRatios: ratio[];
+      "90dRatio": ratio;
+      "30dRatio": ratio;
+    };
+  }
+]

ci/invidiouslist.json

@@ -1 +1 @@
-["inv.bp.projectsegfau.lt","inv.odyssey346.dev","inv.riverside.rocks","inv.vern.cc","invidious.baczek.me","invidious.epicsite.xyz","invidious.esmailelbob.xyz","invidious.flokinet.to","invidious.lidarshield.cloud","invidious.nerdvpn.de","invidious.privacydev.net","invidious.snopyta.org","invidious.tiekoetter.com","invidious.weblibre.org","iv.melmac.space","vid.puffyan.us","watch.thekitty.zone","y.com.sb","yewtu.be","yt.artemislena.eu","yt.funami.tech","yt.oelrichsgarcia.de"]
+["www.youtubekids.com","anontube.lvkaszus.pl","inv.citw.lgbt","inv.in.projectsegfau.lt","inv.tux.pizza","inv.zzls.xyz","invidious.asir.dev","invidious.drgns.space","invidious.fdn.fr","invidious.flokinet.to","invidious.io.lol","invidious.lunar.icu","invidious.nerdvpn.de","invidious.no-logs.com","invidious.perennialte.ch","invidious.privacydev.net","invidious.private.coffee","invidious.projectsegfau.lt","invidious.protokolla.fi","invidious.slipfox.xyz","iv.datura.network","iv.ggtyler.dev","iv.melmac.space","iv.nboeck.de","onion.tube","vid.priv.au","vid.puffyan.us","yewtu.be","yt.artemislena.eu","yt.cdaut.de","yt.drgnz.club","yt.oelrichsgarcia.de"]

ci/pipedCI.ts

@@ -0,0 +1,92 @@
+import * as data from "../ci/piped_instances.json";
+
+type percent = string
+type dailyMinutesDown = Record<string, number>
+
+type PipedInstance = {
+  name: string;
+  url: string;
+  icon: string;
+  slug: string;
+  status: string;
+  uptime: percent;
+  uptimeDay: percent;
+  uptimeWeek: percent;
+  uptimeMonth: percent;
+  uptimeYear: percent;
+  time: number;
+  timeDay: number;
+  timeWeek: number;
+  timeMonth: number;
+  timeYear: number;
+  dailyMinutesDown: dailyMinutesDown
+}
+
+const percentNumber = (percent: percent) => Number(percent.replace("%", ""))
+const ninetyDaysAgo = new Date(Date.now() - 90 * 24 * 60 * 60 * 1000)
+
+function dailyMinuteFilter (dailyMinutesDown: dailyMinutesDown) {
+  let daysDown = 0
+  for (const [date, minsDown] of Object.entries(dailyMinutesDown)) {
+    if (new Date(date) >= ninetyDaysAgo && minsDown > 1000) { // if within 90 days and down for more than 1000 minutes
+      daysDown++
+    }
+  }
+  // return true f less than 10 days down
+  return daysDown < 10
+}
+
+const getHost = (url: string) => new URL(url).host
+
+const getWatchPage = async (instance: PipedInstance) =>
+  fetch(`https://${getHost(instance.url)}`, { redirect: "manual" })
+    .then(res => res.headers.get("Location"))
+    .catch(e => { console.log (e); return null })
+
+const siteOK = async (instance) => {
+  // check if entire site is redirect
+  const notRedirect = await fetch(instance.url, { redirect: "manual" })
+    .then(res => res.status == 200)
+  // only allow kavin to return piped.video
+  // if (instance.url.startsWith("https://piped.video") && instance.slug !== "kavin-rocks-official") return false
+  // check if frontend is OK
+  const watchPageStatus = await fetch(instance.frontendUrl)
+    .then(res => res.ok)
+  // test API - stream returns ok result
+  const streamStatus = await fetch(`${instance.apiUrl}/streams/BaW_jenozKc`)
+    .then(res => res.ok)
+  // get startTime of monitor
+  const age = await fetch(instance.historyUrl)
+    .then(res => res.text())
+    .then(text => { // startTime greater than 90 days ago
+      const date = text.match(/startTime: (.+)/)[1]
+      return Date.parse(date) < ninetyDaysAgo.valueOf()
+    })
+  // console.log(notRedirect, watchPageStatus, streamStatus, age, instance.frontendUrl, instance.apiUrl)
+  return notRedirect && watchPageStatus && streamStatus && age
+}
+
+const staticFilters = (data as PipedInstance[])
+  .filter(instance => {
+    const isup = instance.status === "up"
+    const monthCheck = percentNumber(instance.uptimeMonth) >= 90
+    const dailyMinuteCheck = dailyMinuteFilter(instance.dailyMinutesDown)
+    return isup && monthCheck && dailyMinuteCheck
+  })
+  .map(async instance => {
+    // get frontend url
+    const frontendUrl = await getWatchPage(instance)
+    if (!frontendUrl) return null // return false if frontend doesn't resolve
+    // get api base
+    const apiUrl = instance.url.replace("/healthcheck", "")
+    const historyUrl = `https://raw.githubusercontent.com/TeamPiped/piped-uptime/master/history/${instance.slug}.yml`
+    const pass = await siteOK({ apiUrl, historyUrl, frontendUrl, url: instance.url })
+    const frontendHost = getHost(frontendUrl)
+    return pass ? frontendHost : null
+  })
+
+export async function getPipedList(): Promise<string[]> {
+  const instances = await Promise.all(staticFilters)
+    .then(arr => arr.filter(i => i !== null))
+  return instances
+}

config.json.example

@@ -31,10 +31,16 @@
         "mute": "https://wiki.sponsor.ajay.app/w/Mute_Segment",
         "chapter": "https://wiki.sponsor.ajay.app/w/Chapter"
     },
-    "extensionCommunicationAllowList": [
-        "enamippconapkdmgfgjchkhakpfinmaj",
-        "deArrow@ajay.app",
-        "deArrowBETA@ajay.app",
-        "app.ajay.dearrow.extension"
-    ]
+    "extensionImportList": {
+        "chromium": [
+            "enamippconapkdmgfgjchkhakpfinmaj"
+        ],
+        "firefox": [
+            "deArrow@ajay.app",
+            "deArrowBETA@ajay.app"
+        ],
+        "safari": [
+            "app.ajay.dearrow.extension"
+        ]
+    }
 }

manifest/chrome-manifest-extra.json

@@ -1,8 +1,12 @@
 {
   "optional_permissions": [
-    "declarativeContent"
+    "declarativeContent",
+    "webNavigation"
   ],
   "background": {
     "persistent": false
-  }
+  },
+  "permissions": [
+    "https://*.youtube.com/*"
+  ]
 }

manifest/firefox-manifest-extra.json

@@ -1,7 +1,20 @@
 {
   "browser_specific_settings": {
     "gecko": {
-      "id": "sponsorBlocker@ajay.app"
+      "id": "sponsorBlocker@ajay.app",
+      "strict_min_version": "56.0"
+    },
+    "gecko_android": {
+      "strict_min_version": "113.0"
     }
+  },
+  "background": {
+    "persistent": false
+  },
+  "permissions": [
+    "scripting"
+  ],
+  "browser_action": {
+    "default_area": "navbar"
   }
 }

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "5.4.8",
+    "version": "5.6.1",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "homepage_url": "https://sponsor.ajay.app",
@@ -17,9 +17,7 @@
         ],
         "css": [
             "content.css",
-            "shared.css",
-            "./libs/Source+Sans+Pro.css",
-            "popup.css"
+            "shared.css"
         ]
     }],
     "web_accessible_resources": [
@@ -67,6 +65,7 @@
         "icons/export.svg",
         "icons/PlayerInfoIconSponsorBlocker.svg",
         "icons/PlayerDeleteIconSponsorBlocker.svg",
+        "icons/dearrow.svg",
         "popup.html",
         "popup.css",
         "content.css",
@@ -83,8 +82,7 @@
         "https://sponsor.ajay.app/*"
     ],
     "optional_permissions": [
-        "*://*/*",
-        "webNavigation"
+        "*://*/*"
     ],
     "browser_action": {
         "default_title": "SponsorBlock",
@@ -115,6 +113,21 @@
                 "light": "icons/IconSponsorBlocker128px.png",
                 "dark": "icons/IconSponsorBlocker128px.png",
                 "size": 128
+            },
+            {
+                "light": "icons/IconSponsorBlocker256px.png",
+                "dark": "icons/IconSponsorBlocker256px.png",
+                "size": 256
+            },
+            {
+                "light": "icons/IconSponsorBlocker512px.png",
+                "dark": "icons/IconSponsorBlocker512px.png",
+                "size": 512
+            },
+            {
+                "light": "icons/IconSponsorBlocker1024px.png",
+                "dark": "icons/IconSponsorBlocker1024px.png",
+                "size": 1024
             }
         ]
     }, 

manifest/safari-manifest-extra.json

@@ -1,5 +1,11 @@
 {
   "background": {
     "persistent": false
-  }
+  },
+  "permissions": [
+    "scripting"
+  ],
+  "optional_permissions": [
+    "webNavigation"
+  ]
 }

package.json

@@ -4,11 +4,15 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
-    "@ajayyy/maze-utils": "1.1.29",
     "content-scripts-register-polyfill": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
+  "overrides": {
+    "content-scripts-register-polyfill": {
+      "webext-content-scripts": "v2.5.5"
+    }
+  },
   "devDependencies": {
     "@types/chrome": "^0.0.220",
     "@types/firefox-webext-browser": "^111.0.0",
@@ -34,7 +38,7 @@
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "typescript": "4.9",
-    "web-ext": "^7.6.2",
+    "web-ext": "^7.10.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0"
@@ -56,7 +60,7 @@
     "build:watch": "npm run build:watch:chrome",
     "build:watch:chrome": "webpack --env browser=chrome --config webpack/webpack.dev.js --watch",
     "build:watch:firefox": "webpack --env browser=firefox --config webpack/webpack.dev.js --watch",
-    "ci:invidious": "ts-node ci/invidiousCI.ts",
+    "ci:invidious": "ts-node ci/generateList.ts",
     "dev": "npm run build:dev && concurrently \"npm run web-run\" \"npm run build:watch\"",
     "dev:firefox": "npm run build:dev:firefox && concurrently \"npm run web-run:firefox\" \"npm run build:watch:firefox\"",
     "dev:firefox-android": "npm run build:dev:firefox && concurrently \"npm run web-run:firefox-android\" \"npm run build:watch:firefox\"",
@@ -92,6 +96,6 @@
     "url": "git+https://github.com/ajayyy/SponsorBlock.git"
   },
   "author": "Ajay Ramachandran",
-  "license": "LGPL-3.0-or-later",
+  "license": "GPL-3.0",
   "private": true
 }

public/content.css

@@ -7,7 +7,7 @@
 	--sb-dark-red-outline: rgb(130,0,0,0.9);
 }
 
-.hidden {
+.sbhidden {
 	display: none;
 }
 
@@ -26,6 +26,11 @@
 	transition: transform .1s cubic-bezier(0,0,0.2,1);
 }
 
+/* May 2024 hover preview */
+.YtPlayerProgressBarProgressBar #previewbar {
+	transform: none;
+}
+
 .ytp-big-mode #previewbar {
 	transform: scaleY(0.625) translateY(-30%) translateY(1.5px);
 }
@@ -49,7 +54,13 @@ div:hover > #previewbar.sbNotInvidious {
 }
 
 .previewbar.requiredSegment {
-	transform: scaleY(3)
+	transform: scaleY(3);
+}
+
+.previewbar.selectedSegment {
+	opacity: 1 !important;
+	z-index: 100;
+	transform: scaleY(1.5);
 }
 
 /* Make sure settings are upfront */
@@ -145,7 +156,7 @@ div:hover > .sponsorBlockChapterBar {
 	vertical-align: top;
 }
 
-.playerButton.hidden:not(.autoHiding) {
+.playerButton.sbhidden:not(.autoHiding) {
 	display: none !important;
 }
 
@@ -163,13 +174,13 @@ div:hover > .sponsorBlockChapterBar {
 	overflow: visible !important;
 }
 
-.autoHiding:not(.hidden) {
+.autoHiding:not(.sbhidden) {
 	transform: translateX(0%) scale(1);
 	/* opacity is from YouTube page */
 	transition: transform 0.2s, width 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
 }
 
-.autoHiding.hidden {
+.autoHiding.sbhidden {
 	transform: translateX(100%) scale(0);
 	/* opacity is from YouTube page */
 	transition: transform 0.2s, width 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
@@ -177,7 +188,7 @@ div:hover > .sponsorBlockChapterBar {
 	width: 0px !important;
 }
 
-.autoHiding.hidden.autoHideLeft {
+.autoHiding.sbhidden.autoHideLeft {
 	transform: translateX(-100%) scale(0);
 }
 
@@ -198,6 +209,11 @@ div:hover > .sponsorBlockChapterBar {
 	float: left;
 }
 
+#categoryPill .sbPillNoText .sponsorSkipLogo {
+	margin-top: calc(2.6rem - 18px);
+    margin-bottom: calc(2.6rem - 18px);
+}
+
 @keyframes fadeIn {
 	from { opacity: 0; }
 }
@@ -238,11 +254,6 @@ div:hover > .sponsorBlockChapterBar {
 	border-collapse: unset;
 }
 
-.sponsorSkipNoticeParent {
-	min-width: 350px;
-	max-width: 50%;
-}
-
 .sponsorSkipNotice {
 	width: 100%;
 }
@@ -266,7 +277,7 @@ div:hover > .sponsorBlockChapterBar {
 	max-width: calc(100% - 50px);
 }
 
-.sponsorSkipNotice .hidden {
+.sponsorSkipNotice .sbhidden {
 	display: none;
 }
 
@@ -314,11 +325,6 @@ div:hover > .sponsorBlockChapterBar {
     padding-bottom: 7.8%;
 }
 
-/* if two are very close to eachother */
-.secondSkipNotice {
-	bottom: 290px;
-}
-
 .noticeLeftIcon {
 	display: flex;
   	align-items: center;
@@ -565,8 +571,8 @@ div:hover > .sponsorBlockChapterBar {
 .sponsorTimeEditButton {
 	text-decoration: underline;
 
-	margin-left: 20px;
-	margin-right: 20px;
+	margin-left: 13px;
+	margin-right: 13px;
 
 	font-size: 13px;
 
@@ -685,7 +691,7 @@ input::-webkit-inner-spin-button {
     color: white;
 }
 
-.skipButtonControlBarContainer.hidden {
+.skipButtonControlBarContainer.sbhidden {
 	display: none !important;
 }
 
@@ -730,11 +736,13 @@ input::-webkit-inner-spin-button {
     border-radius: 5px;
     padding: 10px;
     max-width: 300px;
+	width: max-content;
     white-space: normal;
     line-height: 1.5em;
 	color: white;
 	font-size: 12px;
-	z-index: 1000;
+	z-index: 10000;
+	font-weight: normal;
 }
 
 .sponsorBlockTooltip a {
@@ -757,6 +765,12 @@ input::-webkit-inner-spin-button {
 	right: 50%;
 }
 
+.sponsorBlockTooltip.sbTriangle.sbTopTriangle::after {
+	bottom: 100%;
+	top: unset;
+	border-color: transparent transparent rgba(28, 28, 28, 0.7) transparent;
+}
+
 .sponsorBlockLockedColor {
 	color: #ffc83d !important;
 }
@@ -771,6 +785,26 @@ input::-webkit-inner-spin-button {
     line-height: 1.5em;
 }
 
+/* Description on right layout */
+#title > #categoryPillParent {
+	font-size: 2rem;
+	font-weight: bold;
+	display: flex;
+	justify-content: center;
+	line-height: 2.8rem;
+}
+#title > #categoryPillParent > #categoryPill.cbPillOpen {
+	margin-bottom: 5px;
+}
+
+#categoryPillParent {
+	height: fit-content;
+    margin-top: auto;
+	margin-bottom: auto;
+
+    position: relative;
+}
+
 .sponsorBlockCategoryPill {
     border-radius: 25px;
 	padding-left: 8px;
@@ -853,3 +887,7 @@ input::-webkit-inner-spin-button {
 .sponsorThumbnailLabel:hover span {
 	display: inline;
 }
+
+.sponsorblock-chapter-visible {
+	display: inherit !important;
+}

public/help/index.html

@@ -34,6 +34,20 @@
 	      Come contribute, make some suggestions and help out on <a href="https://discord.gg/SponsorBlock">Discord</a> or on <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org">Matrix</a>.
     </p>
 
+    <a href="https://dearrow.ajay.app"
+        target="_blank"
+        id="dearrow-link"
+        class="dearrow-link hidden"
+        rel="noreferrer">
+        <img src="/icons/dearrow.svg"/>
+
+        <span id="dearrow-link-text">
+          
+        </span>
+
+        <img src="/icons/close.png" class="close-button"/>
+    </a>
+
     <p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
 
     <p class="smallText">

public/help/styles.css

@@ -322,4 +322,33 @@ svg {
   cursor: default;
   background-color: var(--disabled);
   color: grey;
+}
+
+.dearrow-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+
+  font-size: 16px;
+}
+
+.dearrow-link img {
+  width: 35px;
+  padding: 10px
+}
+
+.dearrow-link .close-button {
+  opacity: 0;
+  width: 15px;
+  filter: invert(0.3);
+  transition: opacity 0.2s;
+}
+
+.dearrow-link:hover .close-button {
+  opacity: 1;
+}
+
+.hidden {
+  display: none;
 }

public/icons/dearrow.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg
+   width="800px"
+   height="800px"
+   viewBox="0 0 36 36"
+   aria-hidden="true"
+   role="img"
+   class="iconify iconify--twemoji"
+   preserveAspectRatio="xMidYMid meet"
+   version="1.1"
+   id="svg10"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.65479573"
+     inkscape:cx="493.2836"
+     inkscape:cy="514.66432"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="435"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     fill="#1213BD"
+     d="M36 18.302c0 4.981-2.46 9.198-5.655 12.462s-7.323 5.152-12.199 5.152s-9.764-1.112-12.959-4.376S0 23.283 0 18.302s2.574-9.38 5.769-12.644S13.271 0 18.146 0s9.394 2.178 12.589 5.442C33.931 8.706 36 13.322 36 18.302z"
+     id="path2" />
+  <path
+     fill="#ffffff"
+     d="m 30.394282,18.410186 c 0,3.468849 -1.143025,6.865475 -3.416513,9.137917 -2.273489,2.272442 -5.670115,2.92874 -9.137918,2.92874 -3.467803,0 -6.373515,-1.147212 -8.6470033,-3.419654 -2.2734888,-2.272442 -3.5871299,-5.178154 -3.5871299,-8.647003 0,-3.46885 0.9420533,-6.746149 3.2144954,-9.0196379 2.2724418,-2.2734888 5.5507878,-3.9513905 9.0196378,-3.9513905 3.46885,0 6.492841,1.9322561 8.76633,4.204698 2.273489,2.2724424 3.788101,5.2974804 3.788101,8.7663304 z"
+     id="path4"
+     style="fill:#88c9f9;fill-opacity:1;stroke-width:1.04673" />
+  <path
+     fill="#292f33"
+     d="m 23.95823,17.818306 c 0,3.153748 -2.644888,5.808102 -5.798635,5.808102 -3.153748,0 -5.599825,-2.654354 -5.599825,-5.808102 0,-3.153747 2.446077,-5.721714 5.599825,-5.721714 3.153747,0 5.798635,2.567967 5.798635,5.721714 z"
+     id="path8"
+     style="stroke-width:1.18339;fill:#0a62a5;fill-opacity:1" />
+</svg>

public/options/options.css

@@ -38,7 +38,7 @@
     --white: black;
 }
 
-.medium-description, .switch-container, .optionLabel, .categoryTableElement {
+.medium-description, .switch-container, .optionLabel, .categoryTableElement, .promotion-description {
     color: var(--white);
 }
 
@@ -257,7 +257,7 @@ input[type='number'] {
     opacity: 0;
 }
 
-.hidden {
+.hidden, .sbhidden {
     display: none !important;
 }
 
@@ -701,4 +701,32 @@ svg {
 .no-bottom-border {
     border: none !important;
     padding: 20px 0px 0px 0px !important;
+}
+
+.promotion-container {
+    width: fit-content;
+}
+
+.dearrow-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+}
+
+.dearrow-link > img {
+    width: 40px;
+    margin-right: 4px;
+}
+
+.dearrow-link .close-button {
+    opacity: 0;
+    width: 15px;
+    filter: invert(0.3);
+    transition: opacity 0.2s;
+    margin-left: 10px;
+}
+  
+.dearrow-link:hover .close-button {
+    opacity: 1;
 }

public/options/options.html

@@ -65,6 +65,21 @@
 
 				</div>
 
+				<div id="deArrowPromotion" class="promotion-container hidden">
+					<a class="dearrow-link"
+                        href="https://dearrow.ajay.app"
+                        target="_blank"
+                        rel="noreferrer">
+                        <img src="/icons/dearrow.svg"/>
+
+                        <span class="promotion-description">
+                            __MSG_DeArrowPromotionMessage__
+                        </span>
+
+						<img src="/icons/close.png" class="close-button"/>
+                    </a>
+				</div>
+
 				<div data-type="toggle" data-sync="muteSegments">
 					<div class="switch-container">
 						<label class="switch">
@@ -167,6 +182,20 @@
 					<div class="small-description">__MSG_whatShowCategoryWithoutPermission__</div>
 				</div>
 
+				<div id="ytNeuterPromotion" class="promotion-container">
+					<a class="dearrow-link"
+                        href="https://github.com/mchangrh/yt-neuter/blob/main/docs/filters/sponsorblock.md#install"
+                        target="_blank"
+                        rel="noreferrer">
+
+                        <span class="promotion-description">
+                            __MSG_YtNeuterMessage__
+                        </span>
+                    </a>
+
+					<div class="small-description">__MSG_requiresUblock__</div>
+				</div>
+
 			</div>
 
 			<div id="interface" class="option-group hidden">
@@ -190,20 +219,22 @@
 							__MSG_showSkipNotice__
 						</label>
 					</div>
+
+					<div data-type="selector" data-sync="noticeVisibilityMode" data-dependent-on="dontShowNotice">
+						<br/>
+						
+						<label class="optionLabel" for="noticeVisibilityMode">__MSG_noticeVisibilityLabel__:</label>
+	
+						<select id="noticeVisibilityMode" class="selector-element optionsSelector" >
+							<option value="0">__MSG_noticeVisibilityMode0__</option>
+							<option value="1">__MSG_noticeVisibilityMode1__</option>
+							<option value="2">__MSG_noticeVisibilityMode2__</option>
+							<option value="3">__MSG_noticeVisibilityMode3__</option>
+							<option value="4">__MSG_noticeVisibilityMode4__</option>
+						</select>
+					</div>
 				</div>
 	
-				<div data-type="selector" data-sync="noticeVisibilityMode">
-					<label class="optionLabel" for="noticeVisibilityMode">__MSG_noticeVisibilityLabel__:</label>
-
-					<select id="noticeVisibilityMode" class="selector-element optionsSelector" >
-						<option value="0">__MSG_noticeVisibilityMode0__</option>
-						<option value="1">__MSG_noticeVisibilityMode1__</option>
-						<option value="2">__MSG_noticeVisibilityMode2__</option>
-						<option value="3">__MSG_noticeVisibilityMode3__</option>
-						<option value="4">__MSG_noticeVisibilityMode4__</option>
-					</select>
-				</div>
-
 				<div data-type="toggle" data-sync="showCategoryGuidelines">
 					<div class="switch-container">
 						<label class="switch">
@@ -330,6 +361,18 @@
 					<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
 				</div>
 
+				<div data-type="toggle" data-sync="cleanPopup" data-no-safari="true">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="cleanPopup" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="cleanPopup">
+							__MSG_cleanPopup__
+						</label>
+					</div>
+				</div>
+
 				<div data-type="toggle" data-sync="darkMode">
 					<div class="switch-container">
 						<label class="switch">
@@ -342,6 +385,18 @@
 					</div>
 				</div>
 
+				<div data-type="toggle" data-toggle-type="reverse" data-sync="showNewFeaturePopups">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="showNewFeaturePopups" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="showNewFeaturePopups">
+							__MSG_hideNewFeatureUpdates__
+						</label>
+					</div>
+				</div>
+
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="showDonationLink" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
@@ -375,12 +430,32 @@
 					<div class="inline"></div>
 				</div>
 
+				<div data-type="keybind-change" data-sync="skipToHighlightKeybind">	
+					<label class="optionLabel">__MSG_skip_to_category__:</label>
+					<div class="inline"></div>
+				</div>
+
+				<div data-type="keybind-change" data-sync="closeSkipNoticeKeybind">	
+					<label class="optionLabel">__MSG_setCloseSkipNoticeKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+
 				<div data-type="keybind-change" data-sync="startSponsorKeybind">	
 					<label class="optionLabel">__MSG_setStartSponsorShortcut__:</label>
 					<div class="inline"></div>
 				</div>
 
 				<div data-type="keybind-change" data-sync="submitKeybind">	
+					<label class="optionLabel">__MSG_setOpenSubmissionMenuKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+
+				<div data-type="keybind-change" data-sync="previewKeybind">	
+					<label class="optionLabel">__MSG_setPreviewKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+
+				<div data-type="keybind-change" data-sync="actuallySubmitKeybind">	
 					<label class="optionLabel">__MSG_setSubmitKeybind__:</label>
 					<div class="inline"></div>
 				</div>
@@ -444,6 +519,31 @@
 					</div>
 				</div>
 
+				<div data-type="private-text-change" data-sync-type="local" data-sync="*" data-confirm-message="exportOptionsWarning">
+					<h2>__MSG_exportOtherData__</h2>
+					
+					<div>
+						<div class="option-button trigger-button inline">
+							__MSG_exportOptionsCopy__
+						</div>
+						<div class="option-button download-button inline">
+							__MSG_exportOptionsDownload__
+						</div>
+						<label for="importLocalOptions" class="option-button inline">
+							__MSG_exportOptionsUpload__
+						</label>
+						<input id="importLocalOptions" type="file" class="upload-button hidden" />
+					</div>
+	
+					<div class="option-hidden-section hidden spacing indent">	
+						<textarea class="option-text-box" rows="10" style="width:80%"></textarea>
+	
+						<div class="option-button text-change-set">
+							__MSG_setOptions__
+						</div>
+					</div>
+				</div>
+
 				<div data-type="button-press" data-sync="resetToDefault" data-confirm-message="confirmResetToDefault">
 					<div class="option-button trigger-button">
 						__MSG_resetToDefault__
@@ -465,7 +565,7 @@
 						</label>
 					</div>
 	
-					<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube, Piped)</div>
+					<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube, Piped, YouTube Kids)</div>
 					<div class="small-description">__MSG_supportOtherSitesDescription__ </div>
 				</div>
 	
@@ -536,7 +636,19 @@
 	
 					<div class="small-description">__MSG_whatTrackDownvotes__</div>
 				</div>
-	
+
+				<div data-type="toggle" data-sync="trackDownvotesInPrivate" data-confirm-on="false">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="trackDownvotesInPrivate" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="trackDownvotesInPrivate">
+							__MSG_enableTrackDownvotesInPrivate__
+						</label>
+					</div>
+				</div>
+
 				<div data-type="button-press" data-sync="copyDebugInformation" data-confirm-message="copyDebugInformation">
 					<div class="option-button trigger-button">
 						__MSG_copyDebugInformation__

public/oss-attribution/attribution.txt

@@ -1,174 +1,3 @@
-@ajayyy/maze-utils
-1.1.7 <https://github.com/ajayyy/SponsorBlock>
-                   GNU LESSER 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.
-
-
-  This version of the GNU Lesser General Public License incorporates
-the terms and conditions of version 3 of the GNU General Public
-License, supplemented by the additional permissions listed below.
-
-  0. Additional Definitions.
-
-  As used herein, "this License" refers to version 3 of the GNU Lesser
-General Public License, and the "GNU GPL" refers to version 3 of the GNU
-General Public License.
-
-  "The Library" refers to a covered work governed by this License,
-other than an Application or a Combined Work as defined below.
-
-  An "Application" is any work that makes use of an interface provided
-by the Library, but which is not otherwise based on the Library.
-Defining a subclass of a class defined by the Library is deemed a mode
-of using an interface provided by the Library.
-
-  A "Combined Work" is a work produced by combining or linking an
-Application with the Library.  The particular version of the Library
-with which the Combined Work was made is also called the "Linked
-Version".
-
-  The "Minimal Corresponding Source" for a Combined Work means the
-Corresponding Source for the Combined Work, excluding any source code
-for portions of the Combined Work that, considered in isolation, are
-based on the Application, and not on the Linked Version.
-
-  The "Corresponding Application Code" for a Combined Work means the
-object code and/or source code for the Application, including any data
-and utility programs needed for reproducing the Combined Work from the
-Application, but excluding the System Libraries of the Combined Work.
-
-  1. Exception to Section 3 of the GNU GPL.
-
-  You may convey a covered work under sections 3 and 4 of this License
-without being bound by section 3 of the GNU GPL.
-
-  2. Conveying Modified Versions.
-
-  If you modify a copy of the Library, and, in your modifications, a
-facility refers to a function or data to be supplied by an Application
-that uses the facility (other than as an argument passed when the
-facility is invoked), then you may convey a copy of the modified
-version:
-
-   a) under this License, provided that you make a good faith effort to
-   ensure that, in the event an Application does not supply the
-   function or data, the facility still operates, and performs
-   whatever part of its purpose remains meaningful, or
-
-   b) under the GNU GPL, with none of the additional permissions of
-   this License applicable to that copy.
-
-  3. Object Code Incorporating Material from Library Header Files.
-
-  The object code form of an Application may incorporate material from
-a header file that is part of the Library.  You may convey such object
-code under terms of your choice, provided that, if the incorporated
-material is not limited to numerical parameters, data structure
-layouts and accessors, or small macros, inline functions and templates
-(ten or fewer lines in length), you do both of the following:
-
-   a) Give prominent notice with each copy of the object code that the
-   Library is used in it and that the Library and its use are
-   covered by this License.
-
-   b) Accompany the object code with a copy of the GNU GPL and this license
-   document.
-
-  4. Combined Works.
-
-  You may convey a Combined Work under terms of your choice that,
-taken together, effectively do not restrict modification of the
-portions of the Library contained in the Combined Work and reverse
-engineering for debugging such modifications, if you also do each of
-the following:
-
-   a) Give prominent notice with each copy of the Combined Work that
-   the Library is used in it and that the Library and its use are
-   covered by this License.
-
-   b) Accompany the Combined Work with a copy of the GNU GPL and this license
-   document.
-
-   c) For a Combined Work that displays copyright notices during
-   execution, include the copyright notice for the Library among
-   these notices, as well as a reference directing the user to the
-   copies of the GNU GPL and this license document.
-
-   d) Do one of the following:
-
-       0) Convey the Minimal Corresponding Source under the terms of this
-       License, and the Corresponding Application Code in a form
-       suitable for, and under terms that permit, the user to
-       recombine or relink the Application with a modified version of
-       the Linked Version to produce a modified Combined Work, in the
-       manner specified by section 6 of the GNU GPL for conveying
-       Corresponding Source.
-
-       1) Use a suitable shared library mechanism for linking with the
-       Library.  A suitable mechanism is one that (a) uses at run time
-       a copy of the Library already present on the user's computer
-       system, and (b) will operate properly with a modified version
-       of the Library that is interface-compatible with the Linked
-       Version.
-
-   e) Provide Installation Information, but only if you would otherwise
-   be required to provide such information under section 6 of the
-   GNU GPL, and only to the extent that such information is
-   necessary to install and execute a modified version of the
-   Combined Work produced by recombining or relinking the
-   Application with a modified version of the Linked Version. (If
-   you use option 4d0, the Installation Information must accompany
-   the Minimal Corresponding Source and Corresponding Application
-   Code. If you use option 4d1, you must provide the Installation
-   Information in the manner specified by section 6 of the GNU GPL
-   for conveying Corresponding Source.)
-
-  5. Combined Libraries.
-
-  You may place library facilities that are a work based on the
-Library side by side in a single library together with other library
-facilities that are not Applications and are not covered by this
-License, and convey such a combined library under terms of your
-choice, if you do both of the following:
-
-   a) Accompany the combined library with a copy of the same work based
-   on the Library, uncombined with any other library facilities,
-   conveyed under the terms of this License.
-
-   b) Give prominent notice with the combined library that part of it
-   is a work based on the Library, and explaining where to find the
-   accompanying uncombined form of the same work.
-
-  6. Revised Versions of the GNU Lesser General Public License.
-
-  The Free Software Foundation may publish revised and/or new versions
-of the GNU Lesser 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
-Library as you received it specifies that a certain numbered version
-of the GNU Lesser General Public License "or any later version"
-applies to it, you have the option of following the terms and
-conditions either of that published version or of any later version
-published by the Free Software Foundation. If the Library as you
-received it does not specify a version number of the GNU Lesser
-General Public License, you may choose any version of the GNU Lesser
-General Public License ever published by the Free Software Foundation.
-
-  If the Library as you received it specifies that a proxy can decide
-whether future versions of the GNU Lesser General Public License shall
-apply, that proxy's public statement of acceptance of any version is
-permanent authorization for you to choose that version for the
-Library.
-
-
-******************************
-
 content-scripts-register-polyfill
 4.0.2 <https://github.com/fregante/content-scripts-register-polyfill>
 MIT License
@@ -335,7 +164,7 @@ SOFTWARE.
 ******************************
 
 webext-content-scripts
-2.5.2 <https://github.com/fregante/webext-content-scripts>
+2.5.5 <https://github.com/fregante/webext-content-scripts>
 MIT License
 
 Copyright (c) Federico Brigante <me@fregante.com> (https://fregante.com)
@@ -365,7 +194,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 ******************************
 
 webext-polyfill-kinda
-1.0.0 <https://github.com/fregante/webext-polyfill-kinda>
+1.0.2 <https://github.com/fregante/webext-polyfill-kinda>
 MIT License
 
 Copyright (c) Federico Brigante <me@fregante.com> (https://fregante.com)

public/permissions/styles.css

@@ -19,7 +19,7 @@ body {
     font-weight: bold;
 }
 
-.hidden {
+.hidden, .sbhidden {
     display: none !important;
 }
 

public/popup.css

@@ -27,7 +27,7 @@
   position: relative;
 }
 
-#sponsorBlockPopupBody .hidden {
+#sponsorBlockPopupBody .hidden, #sponsorBlockPopupBody .sbhidden {
   display: none !important;
 }
 
@@ -130,6 +130,7 @@
   top: 5px;
   right: 5px;
   opacity: 0.5;
+  z-index: 1;
 }
 
 .sbCloseButton:hover {
@@ -260,19 +261,6 @@
   text-align: right;
 }
 
-/*
- * Buttons that appear under a segment on click
- */
-.voteButton {
-  height: 20px;
-  padding: 0 5px;
-  cursor: pointer;
-}
-
-.voteButton:hover {
-  opacity: 0.8;
-}
-
 /*
  * "Voted!" text that appears after voting on a segment
  */

public/popup.html

@@ -20,7 +20,7 @@
         __MSG_betaServerWarning__
       </div>
 
-      <header class="sbPopupLogo">
+      <header id="sbPopupLogo" class="sbPopupLogo">
         <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
         <p class="u-mZ">SponsorBlock</p>
       </header>
@@ -111,7 +111,7 @@
       </div>
 
       <!-- Your Work box -->
-      <div class="sbYourWorkBox">
+      <div id="sbYourWorkBox" class="sbYourWorkBox">
         <h1 class="sbHeader" style="padding: 8px 15px;">
           __MSG_yourWork__
         </h1>
@@ -195,7 +195,7 @@
         <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
         <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a>
         <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a>
-        <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">$</a>
+        <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">__MSG_Donate__</a>
       </footer>
 
       <button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>

public/shared.css

@@ -14,7 +14,7 @@
 }
 
 .sponsorSkipNoticeParent {
-	min-width: 350px;
+	min-width: 390px;
 	max-width: 50%;
 }
 
@@ -36,7 +36,7 @@
 	max-width: calc(100% - 50px);
 }
 
-.sponsorSkipNotice .hidden {
+.sponsorSkipNotice .sbhidden {
 	display: none;
 }
 
@@ -216,4 +216,17 @@
 
 	display: flex;
 	align-items: center;
+}
+
+/*
+ * Buttons that appear under a segment on click
+ */
+.voteButton {
+	height: 20px;
+	padding: 0 5px;
+	cursor: pointer;
+}
+
+.voteButton:hover {
+	opacity: 0.8;
 }

src/background.ts

@@ -3,15 +3,20 @@ import * as CompileConfig from "../config.json";
 import Config from "./config";
 import { Registration } from "./types";
 import "content-scripts-register-polyfill";
-import { sendRealRequestToCustomServer, setupBackgroundRequestProxy } from "@ajayyy/maze-utils/lib/background-request-proxy";
-import { setupTabUpdates } from "@ajayyy/maze-utils/lib/tab-updates";
-import { generateUserID } from "@ajayyy/maze-utils/lib/setup";
+import { sendRealRequestToCustomServer, setupBackgroundRequestProxy } from "../maze-utils/src/background-request-proxy";
+import { setupTabUpdates } from "../maze-utils/src/tab-updates";
+import { generateUserID } from "../maze-utils/src/setup";
 
 // Make the config public for debugging purposes
 
 window.SB = Config;
 
 import Utils from "./utils";
+import { getExtensionIdsToImportFrom } from "./utils/crossExtension";
+import { isFirefoxOrSafari } from "../maze-utils/src";
+import { injectUpdatedScripts } from "../maze-utils/src/cleanup";
+import { logWarn } from "./utils/logger";
+import { chromeP } from "../maze-utils/src/browserApi";
 const utils = new Utils({
     registerFirefoxContentScript,
     unregisterFirefoxContentScript
@@ -23,7 +28,7 @@ const popupPort: Record<string, chrome.runtime.Port> = {};
 const contentScriptRegistrations = {};
 
 // Register content script if needed
-utils.wait(() => Config.config !== null).then(function() {
+utils.wait(() => Config.isReady()).then(function() {
     if (Config.config.supportInvidious) utils.setupExtraSiteContentScripts();
 });
 
@@ -71,7 +76,11 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
         case "infoUpdated":
         case "videoChanged":
             if (sender.tab) {
-                popupPort[sender.tab.id]?.postMessage(request);
+                try {
+                    popupPort[sender.tab.id]?.postMessage(request);
+                } catch (e) {
+                    // This can happen if the popup is closed
+                }
             }
             return false;
         default:
@@ -80,7 +89,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
 });
 
 chrome.runtime.onMessageExternal.addListener((request, sender, callback) => {
-    if (CompileConfig.extensionCommunicationAllowList.includes(sender.id)) {
+    if (getExtensionIdsToImportFrom().includes(sender.id)) {
         if (request.message === "requestConfig") {
             callback({
                 userID: Config.config.userID,
@@ -112,14 +121,15 @@ chrome.runtime.onInstalled.addListener(function () {
         const userID = Config.config.userID;
 
         // If there is no userID, then it is the first install.
-        if (!userID){
+        if (!userID && !Config.local.alreadyInstalled){
             //open up the install page
-            chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
+            chrome.tabs.create({url: chrome.runtime.getURL("/help/index.html")});
 
             //generate a userID
             const newUserID = generateUserID();
             //save this UUID
             Config.config.userID = newUserID;
+            Config.local.alreadyInstalled = true;
 
             // Don't show update notification
             Config.config.categoryPillUpdate = true;
@@ -127,10 +137,15 @@ chrome.runtime.onInstalled.addListener(function () {
 
         if (Config.config.supportInvidious) {
             if (!(await utils.containsInvidiousPermission())) {
-                chrome.tabs.create({url: chrome.extension.getURL("/permissions/index.html")});
+                chrome.tabs.create({url: chrome.runtime.getURL("/permissions/index.html")});
             }
         }
     }, 1500);
+
+    // Only do this once the old version understands how to clean itself up
+    if (!isFirefoxOrSafari() && chrome.runtime.getManifest().version !== "5.4.13") {
+        injectUpdatedScripts().catch(logWarn);
+    }
 });
 
 /**
@@ -139,27 +154,60 @@ chrome.runtime.onInstalled.addListener(function () {
  *
  * @param {JSON} options
  */
-function registerFirefoxContentScript(options: Registration) {
-    const oldRegistration = contentScriptRegistrations[options.id];
-    if (oldRegistration) oldRegistration.unregister();
+async function registerFirefoxContentScript(options: Registration) {
+    if ("scripting" in chrome && "getRegisteredContentScripts" in chrome.scripting) {
+        const existingRegistrations = await chromeP.scripting.getRegisteredContentScripts({
+            ids: [options.id]
+        }).catch(() => []);
+
+        if (existingRegistrations && existingRegistrations.length > 0 
+            && options.matches.every((match) => existingRegistrations[0].matches.includes(match))) {
+            // No need to register another script, already registered
+            return;
+        }
+    }
+
+    await unregisterFirefoxContentScript(options.id);
+
+    if ("scripting" in chrome && "getRegisteredContentScripts" in chrome.scripting) {
+        await chromeP.scripting.registerContentScripts([{
+            id: options.id,
+            runAt: "document_start",
+            matches: options.matches,
+            allFrames: options.allFrames,
+            js: options.js,
+            css: options.css,
+            persistAcrossSessions: true,
+        }]);
+    } else {
+        chrome.contentScripts.register({
+            allFrames: options.allFrames,
+            js: options.js?.map?.(file => ({file})),
+            css: options.css?.map?.(file => ({file})),
+            matches: options.matches
+        }).then((registration) => void (contentScriptRegistrations[options.id] = registration));
+    }
 
-    chrome.contentScripts.register({
-        allFrames: options.allFrames,
-        js: options.js,
-        css: options.css,
-        matches: options.matches
-    }).then((registration) => void (contentScriptRegistrations[options.id] = registration));
 }
 
 /**
  * Only works on Firefox.
  * Firefox requires that this is handled by the background script
- *
  */
-function unregisterFirefoxContentScript(id: string) {
-    if (contentScriptRegistrations[id]) {
-        contentScriptRegistrations[id].unregister();
-        delete contentScriptRegistrations[id];
+async function  unregisterFirefoxContentScript(id: string) {
+    if ("scripting" in chrome && "getRegisteredContentScripts" in chrome.scripting) {
+        try {
+            await chromeP.scripting.unregisterContentScripts({
+                ids: [id]
+            });
+        } catch (e) {
+            // Not registered yet
+        }
+    } else {
+        if (contentScriptRegistrations[id]) {
+            contentScriptRegistrations[id].unregister();
+            delete contentScriptRegistrations[id];
+        }
     }
 }
 
@@ -174,27 +222,35 @@ async function submitVote(type: number, UUID: string, category: string) {
 
     const typeSection = (type !== undefined) ? "&type=" + type : "&category=" + category;
 
-    //publish this vote
-    const response = await asyncRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + typeSection);
-
-    if (response.ok) {
-        return {
-            successType: 1,
-            responseText: await response.text()
-        };
-    } else if (response.status == 405) {
-        //duplicate vote
-        return {
-            successType: 0,
-            statusCode: response.status,
-            responseText: await response.text()
-        };
-    } else {
-        //error while connect
+    try {
+        const response = await asyncRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + typeSection);
+    
+        if (response.ok) {
+            return {
+                successType: 1,
+                responseText: await response.text()
+            };
+        } else if (response.status == 405) {
+            //duplicate vote
+            return {
+                successType: 0,
+                statusCode: response.status,
+                responseText: await response.text()
+            };
+        } else {
+            //error while connect
+            return {
+                successType: -1,
+                statusCode: response.status,
+                responseText: await response.text()
+            };
+        }
+    } catch (e) {
+        console.error(e);
         return {
             successType: -1,
-            statusCode: response.status,
-            responseText: await response.text()
+            statusCode: -1,
+            responseText: ""
         };
     }
 }

src/components/CategoryPillComponent.tsx

@@ -6,12 +6,14 @@ import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
-import { AnimationUtils } from "../utils/animationUtils";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 import { Tooltip } from "../render/Tooltip";
-import { getErrorMessage } from "@ajayyy/maze-utils/lib/formating";
+import { getErrorMessage } from "../../maze-utils/src/formating";
 
 export interface CategoryPillProps {
     vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
+    showTextByDefault: boolean;
+    showTooltipOnClick: boolean;
 }
 
 export interface CategoryPillState {
@@ -21,12 +23,14 @@ export interface CategoryPillState {
 }
 
 class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryPillState> {
-
+    mainRef: React.MutableRefObject<HTMLSpanElement>;
     tooltip?: Tooltip;
 
     constructor(props: CategoryPillProps) {
         super(props);
 
+        this.mainRef = React.createRef();
+
         this.state = {
             segment: null,
             show: false,
@@ -41,20 +45,29 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
             color: this.getTextColor(),
         }
 
+        // To be able to remove the margin from the parent
+        this.mainRef?.current?.parentElement?.classList?.toggle("cbPillOpen", this.state.show);
+
         return (
             <span style={style}
-                className={"sponsorBlockCategoryPill"}
+                className={"sponsorBlockCategoryPill" + (!this.props.showTextByDefault ? " sbPillNoText" : "")}
                 aria-label={this.getTitleText()}
                 onClick={(e) => this.toggleOpen(e)}
                 onMouseEnter={() => this.openTooltip()}
-                onMouseLeave={() => this.closeTooltip()}>
+                onMouseLeave={() => this.closeTooltip()}
+                ref={this.mainRef}>
+                
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
-                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
                     </img>
-                    <span className="sponsorBlockCategoryPillTitle">
-                        {chrome.i18n.getMessage("category_" + this.state.segment?.category)}
-                    </span>
+
+                    {
+                        (this.props.showTextByDefault || this.state.open) &&
+                            <span className="sponsorBlockCategoryPillTitle">
+                                {chrome.i18n.getMessage("category_" + this.state.segment?.category)}
+                            </span>
+                    }
                 </span>
 
                 {this.state.open && (
@@ -79,9 +92,12 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 )}
 
                 {/* Close Button */}
-                <img src={chrome.extension.getURL("icons/close.png")}
+                <img src={chrome.runtime.getURL("icons/close.png")}
                     className="categoryPillClose"
-                    onClick={() => this.setState({ show: false })}>
+                    onClick={() => {
+                        this.setState({ show: false });
+                        this.closeTooltip();
+                    }}>
                 </img>
             </span>
         );
@@ -91,6 +107,14 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
         event.stopPropagation();
 
         if (this.state.show) {
+            if (this.props.showTooltipOnClick) {
+                if (this.state.open) {
+                    this.closeTooltip();
+                } else {
+                    this.openTooltip();
+                }
+            }
+
             this.setState({ open: !this.state.open });
         }
     }
@@ -108,6 +132,8 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                     open: false,
                     show: type === 1
                 });
+
+                this.closeTooltip();
             } else if (response.statusCode !== 403) {
                 alert(getErrorMessage(response.statusCode, response.responseText));
             }
@@ -127,7 +153,11 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
     }
 
     private openTooltip(): void {
-        const tooltipMount = document.querySelector("#above-the-fold") as HTMLElement;
+        if (this.tooltip) {
+            this.tooltip.close();
+        }
+
+        const tooltipMount = document.querySelector("#above-the-fold, ytm-slim-owner-renderer") as HTMLElement;
         if (tooltipMount) {
             this.tooltip = new Tooltip({
                 text: this.getTitleText(),
@@ -143,7 +173,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
     }
 
     private closeTooltip(): void {
-        this.tooltip?.close();
+        this.tooltip?.close?.();
         this.tooltip = null;
     }
 

src/components/ChapterVoteComponent.tsx

@@ -6,9 +6,9 @@ import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
-import { AnimationUtils } from "../utils/animationUtils";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 import { Tooltip } from "../render/Tooltip";
-import { getErrorMessage } from "@ajayyy/maze-utils/lib/formating";
+import { getErrorMessage } from "../../maze-utils/src/formating";
 
 export interface ChapterVoteProps {
     vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
@@ -44,7 +44,7 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote
             <>
                 {/* Upvote Button */}
                 <button id={"sponsorTimesDownvoteButtonsContainerUpvoteChapter"}
-                        className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "hidden" : "")}
+                        className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "sbhidden" : "")}
                         draggable="false"
                         title={chrome.i18n.getMessage("upvoteButtonInfo")}
                         onClick={(e) => this.vote(e, 1)}>
@@ -55,7 +55,7 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote
 
                 {/* Downvote Button */}
                 <button id={"sponsorTimesDownvoteButtonsContainerDownvoteChapter"}
-                        className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "hidden" : "")}
+                        className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "sbhidden" : "")}
                         draggable="false"
                         title={chrome.i18n.getMessage("reportButtonInfo")}
                         onClick={(e) => {

src/components/NoticeComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import Config from "../config";
+import SbSvg from "../svg-icons/sb_svg";
 
 enum CountdownMode {
     Timer,
@@ -28,6 +29,7 @@ export interface NoticeProps {
     extraClass?: string;
     hideLogo?: boolean;
     hideRightInfo?: boolean;
+    logoFill?: string;
 
     // Callback for when this is closed
     closeListener: () => void;
@@ -39,6 +41,13 @@ export interface NoticeProps {
     children?: React.ReactNode;
 }
 
+interface MouseDownInfo {
+    x: number;
+    y: number;
+    right: number;
+    bottom: number;
+}
+
 export interface NoticeState {
     maxCountdownTime: () => number;
 
@@ -48,8 +57,16 @@ export interface NoticeState {
     mouseHovering: boolean;
 
     startFaded: boolean;
+
+    mouseDownInfo: MouseDownInfo | null;
+    mouseMoved: boolean;
+    right: number;
+    bottom: number;
 }
 
+// Limits for dragging notice around
+const bounds = [10, 100, 10, 10];
+
 class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
     countdownInterval: NodeJS.Timeout;
 
@@ -59,6 +76,8 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
 
     parentRef: React.RefObject<HTMLDivElement>;
 
+    handleMouseMoveBinded: (e: MouseEvent) => void = this.handleMouseMove.bind(this);
+
     constructor(props: NoticeProps) {
         super(props);
 
@@ -85,7 +104,12 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
             countdownMode: CountdownMode.Timer,
             mouseHovering: false,
 
-            startFaded: this.props.startFaded ?? false
+            startFaded: this.props.startFaded ?? false,
+
+            mouseDownInfo: null,
+            mouseMoved: false,
+            right: bounds[0],
+            bottom: props.showInSecondSlot ? 290 : bounds[1]
         }
     }
 
@@ -96,6 +120,9 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
     render(): React.ReactElement {
         const noticeStyle: React.CSSProperties = {
             zIndex: this.props.zIndex || (1000 + this.amountOfPreviousNotices),
+            right: this.state.right,
+            bottom: this.state.bottom,
+            userSelect: this.state.mouseDownInfo && this.state.mouseMoved ? "none" : "auto",
             ...(this.props.style ?? {})
         }
 
@@ -105,7 +132,29 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                     + (this.props.showInSecondSlot ? " secondSkipNotice" : "")
                     + (this.props.extraClass ? ` ${this.props.extraClass}` : "")}
                 onMouseEnter={(e) => this.onMouseEnter(e) }
-                onMouseLeave={() => this.timerMouseLeave()}
+                onMouseLeave={() => {
+                    this.timerMouseLeave();
+                }}
+                onMouseDown={(e) => {
+                    document.addEventListener("mousemove", this.handleMouseMoveBinded);
+
+                    this.setState({
+                        mouseDownInfo: {
+                            x: e.clientX,
+                            y: e.clientY,
+                            right: this.state.right,
+                            bottom: this.state.bottom
+                        },
+                        mouseMoved: false
+                    });
+                }}
+                onMouseUp={() => {
+                    document.removeEventListener("mousemove", this.handleMouseMoveBinded);
+
+                    this.setState({
+                        mouseDownInfo: null
+                    });
+                }}
                 ref={this.parentRef}
                 style={noticeStyle} >
                 <div className={"sponsorSkipNoticeTableContainer" 
@@ -122,10 +171,10 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                 <td className="noticeLeftIcon">
                                     {/* Logo */}
                                     {!this.props.hideLogo &&
-                                        <img id={"sponsorSkipLogo" + this.idSuffix} 
-                                            className="sponsorSkipLogo sponsorSkipObject"
-                                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
-                                        </img>
+                                        <SbSvg
+                                            id={"sponsorSkipLogo" + this.idSuffix} 
+                                            fill={this.props.logoFill}
+                                            className="sponsorSkipLogo sponsorSkipObject"/>
                                     }
 
                                     <span id={"sponsorSkipMessage" + this.idSuffix}
@@ -158,7 +207,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                     
 
                                         {/* Close button */}
-                                        <img src={chrome.extension.getURL("icons/close.png")}
+                                        <img src={chrome.runtime.getURL("icons/close.png")}
                                             className={"sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton" 
                                                             + (this.props.biggerCloseButton ? " biggerCloseButton" : "")}
                                             onClick={() => this.close()}>
@@ -194,21 +243,21 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                     <span 
                         id={"skipNoticeTimerText" + this.idSuffix}
                         key="skipNoticeTimerText"
-                        className={this.state.countdownMode !== CountdownMode.Timer ? "hidden" : ""} >
+                        className={this.state.countdownMode !== CountdownMode.Timer ? "sbhidden" : ""} >
                             {chrome.i18n.getMessage("NoticeTimeAfterSkip").replace("{seconds}", this.state.countdownTime.toString())}
                     </span>
                 ),(
                     <img 
                         id={"skipNoticeTimerPaused" + this.idSuffix}
                         key="skipNoticeTimerPaused"
-                        className={this.state.countdownMode !== CountdownMode.Paused ? "hidden" : ""}
+                        className={this.state.countdownMode !== CountdownMode.Paused ? "sbhidden" : ""}
                         src={chrome.runtime.getURL("icons/pause.svg")}
                         alt={chrome.i18n.getMessage("paused")} />
                 ),(
                     <img 
                         id={"skipNoticeTimerStopped" + this.idSuffix}
                         key="skipNoticeTimerStopped"
-                        className={this.state.countdownMode !== CountdownMode.Stopped ? "hidden" : ""}
+                        className={this.state.countdownMode !== CountdownMode.Stopped ? "sbhidden" : ""}
                         src={chrome.runtime.getURL("icons/stop.svg")}
                         alt={chrome.i18n.getMessage("manualPaused")} />
         )];
@@ -393,6 +442,31 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
     getElement(): React.RefObject<HTMLDivElement> {
         return this.parentRef;
     }
+
+    componentWillUnmount(): void {
+        document.removeEventListener("mousemove", this.handleMouseMoveBinded);
+    }
+
+    // For dragging around notice
+    handleMouseMove(e: MouseEvent): void {
+        if (this.state.mouseDownInfo && e.buttons === 1) {
+            const [mouseX, mouseY] = [e.clientX, e.clientY];
+
+            const deltaX = mouseX - this.state.mouseDownInfo.x;
+            const deltaY = mouseY - this.state.mouseDownInfo.y;
+
+            if (deltaX > 0 || deltaY > 0) this.setState({ mouseMoved: true });
+
+            const element = this.parentRef.current;
+            const parent = element.parentElement.parentElement;
+            this.setState({
+                right: Math.min(parent.clientWidth - element.clientWidth - bounds[2], Math.max(bounds[0], this.state.mouseDownInfo.right - deltaX)),
+                bottom: Math.min(parent.clientHeight - element.clientHeight - bounds[3], Math.max(bounds[1], this.state.mouseDownInfo.bottom - deltaY))
+            });
+        } else {
+            document.removeEventListener("mousemove", this.handleMouseMoveBinded);
+        }
+    }
 }
 
 export default NoticeComponent;

src/components/SkipNoticeComponent.tsx

@@ -12,8 +12,9 @@ import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import PencilSvg from "../svg-icons/pencil_svg";
 import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
-import { generateUserID } from "@ajayyy/maze-utils/lib/setup";
-import { keybindToString } from "@ajayyy/maze-utils/lib/config";
+import { generateUserID } from "../../maze-utils/src/setup";
+import { keybindToString } from "../../maze-utils/src/config";
+import { getFormattedTime } from "../../maze-utils/src/formating";
 
 enum SkipButtonState {
     Undo, // Unskip
@@ -177,7 +178,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         ) : null;
 
         return (
-            <NoticeComponent noticeTitle={this.state.noticeTitle}
+            <NoticeComponent 
+                noticeTitle={this.state.noticeTitle}
                 amountOfPreviousNotices={this.amountOfPreviousNotices}
                 showInSecondSlot={this.showInSecondSlot}
                 idSuffix={this.idSuffix}
@@ -191,6 +193,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 ref={this.noticeRef}
                 closeListener={() => this.closeListener()}
                 smaller={this.state.smaller}
+                logoFill={Config.config.barTypes[this.segments[0].category].color}
                 limitWidth={true}
                 firstColumn={firstColumn}
                 bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
@@ -314,6 +317,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                         <select id={"sponsorTimeCategories" + this.idSuffix}
                                 className="sponsorTimeCategories sponsorTimeEditSelector"
                                 defaultValue={this.segments[0].category}
+                                onMouseDown={(e) => e.stopPropagation()}
                                 ref={this.categoryOptionRef}>
 
                             {this.getCategoryOptions()}
@@ -384,8 +388,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                         style={{opacity: this.getSubmissionChooserOpacity(i),
                                 color: this.getSubmissionChooserColor(i)}}
                         onClick={() => this.performAction(i)}
+                        autoFocus={i == 0}
                         key={"submission" + i + this.segments[i].category + this.idSuffix}>
-                    {(i + 1) + ". " + chrome.i18n.getMessage("category_" + this.segments[i].category)}
+                    {`${(i + 1)}. ${chrome.i18n.getMessage("category_" + 
+                        this.segments[i].category)} (${getFormattedTime(this.segments[i].segment[0])})`}
                 </button>
             );
         }
@@ -454,6 +460,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         if (this.segments.length === 1) {
             this.performAction(0, action);
         } else {
+            if (this.state.smaller) {
+                this.setState({
+                    smaller: false
+                });
+
+                this.noticeRef.current.fadedMouseEnter();
+                this.noticeRef.current.resetCountdown();
+            }
+
             switch (action ?? this.state.actionState) {
                 case SkipNoticeAction.None:
                     this.resetStateToStart();
@@ -548,10 +563,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             source: SponsorSourceType.Local
         };
 
-        const segmentTimes = Config.config.unsubmittedSegments[sponsorVideoID] || [];
+        const segmentTimes = Config.local.unsubmittedSegments[sponsorVideoID] || [];
         segmentTimes.push(sponsorTimesSubmitting);
-        Config.config.unsubmittedSegments[sponsorVideoID] = segmentTimes;
-        Config.forceSyncUpdate("unsubmittedSegments");
+        Config.local.unsubmittedSegments[sponsorVideoID] = segmentTimes;
+        Config.forceLocalUpdate("unsubmittedSegments");
 
         this.props.contentContainer().sponsorTimesSubmitting.push(sponsorTimesSubmitting);
         this.props.contentContainer().updatePreviewBar();

src/components/SponsorTimeEditComponent.tsx

@@ -2,14 +2,13 @@ import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config";
 import { ActionType, Category, ChannelIDStatus, ContentContainer, SponsorTime } from "../types";
-import Utils from "../utils";
 import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
 import { RectangleTooltip } from "../render/RectangleTooltip";
 import SelectorComponent, { SelectorOption } from "./SelectorComponent";
 import { DEFAULT_CATEGORY } from "../utils/categoryUtils";
-import { getFormattedTime, getFormattedTimeToSeconds } from "@ajayyy/maze-utils/lib/formating";
-
-const utils = new Utils();
+import { getFormattedTime, getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
+import { asyncRequestToServer } from "../utils/requests";
+import { defaultPreviewTime } from "../utils/constants";
 
 export interface SponsorTimeEditProps {
     index: number;
@@ -28,13 +27,14 @@ export interface SponsorTimeEditState {
     editing: boolean;
     sponsorTimeEdits: [string, string];
     selectedCategory: Category;
+    selectedActionType: ActionType;
     description: string;
     suggestedNames: SelectorOption[];
     chapterNameSelectorOpen: boolean;
     chapterNameSelectorHovering: boolean;
 }
 
-const categoryNamesGrams: string[] = [].concat(...CompileConfig.categoryList.filter((name) => name !== "chapter")
+const categoryNamesGrams: string[] = [].concat(...CompileConfig.categoryList.filter((name) => !["chapter", "intro"].includes(name))
     .map((name) => chrome.i18n.getMessage("category_" + name).split(/\/|\s|-/)));
 
 class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
@@ -70,7 +70,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         this.state = {
             editing: false,
             sponsorTimeEdits: [null, null],
-            selectedCategory: DEFAULT_CATEGORY as Category,
+            selectedCategory: sponsorTime.category ?? DEFAULT_CATEGORY as Category,
+            selectedActionType: sponsorTime.actionType,
             description: sponsorTime.description || "",
             suggestedNames: [],
             chapterNameSelectorOpen: false,
@@ -80,13 +81,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     componentDidMount(): void {
         // Prevent inputs from triggering key events
-        document.getElementById("sponsorTimeEditContainer" + this.idSuffix).addEventListener('keydown', function (event) {
-            event.stopPropagation();
+        document.getElementById("sponsorTimeEditContainer" + this.idSuffix).addEventListener('keydown', (e) => {
+            e.stopPropagation();
         });
 
         // Prevent scrolling while changing times
-        document.getElementById("sponsorTimesContainer" + this.idSuffix).addEventListener('wheel', function (event) {
-            event.preventDefault();
+        document.getElementById("sponsorTimesContainer" + this.idSuffix).addEventListener('wheel', (e) => {
+            if (this.state.editing) {
+                e.preventDefault();
+            }
         }, {passive: false});
 
         // Add as a config listener
@@ -121,13 +124,21 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         const timeDisplayStyle: React.CSSProperties = {};
         const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
         const segment = sponsorTime.segment;
-        if (sponsorTime?.actionType === ActionType.Full) timeDisplayStyle.display = "none";
+        if (this.state.selectedActionType === ActionType.Full) timeDisplayStyle.display = "none";
         if (this.state.editing) {
             timeDisplay = (
                 <div id={"sponsorTimesContainer" + this.idSuffix}
                     style={timeDisplayStyle}
                     className="sponsorTimeDisplay">
 
+                        {this.state.selectedActionType !== ActionType.Poi ? (
+                            <span id={"startButton" + this.idSuffix}
+                                className="sponsorNowButton"
+                                onClick={() => this.setTimeTo(0, 0)}>
+                                    {chrome.i18n.getMessage("bracketStart")}
+                            </span>
+                        ): ""}
+
                         <span id={"nowButton0" + this.idSuffix}
                             className="sponsorNowButton"
                             onClick={() => this.setTimeToNow(0)}>
@@ -137,12 +148,14 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                             className="sponsorTimeEdit sponsorTimeEditInput"
                             type="text"
                             style={{color: "inherit", backgroundColor: "inherit"}}
-                            value={this.state.sponsorTimeEdits[0]}
+                            value={this.state.sponsorTimeEdits[0] ?? ""}
+                            onKeyDown={(e) => e.stopPropagation()}
+                            onKeyUp={(e) => e.stopPropagation()}
                             onChange={(e) => this.handleOnChange(0, e, sponsorTime, e.target.value)}
                             onWheel={(e) => this.changeTimesWhenScrolling(0, e, sponsorTime)}>
                         </input>
 
-                        {sponsorTime.actionType !== ActionType.Poi ? (
+                        {this.state.selectedActionType !== ActionType.Poi ? (
                             <span>
                                 <span>
                                     {" " + chrome.i18n.getMessage("to") + " "}
@@ -152,7 +165,9 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                     className="sponsorTimeEdit sponsorTimeEditInput"
                                     type="text"
                                     style={{color: "inherit", backgroundColor: "inherit"}}
-                                    value={this.state.sponsorTimeEdits[1]}
+                                    value={this.state.sponsorTimeEdits[1] ?? ""}
+                                    onKeyDown={(e) => e.stopPropagation()}
+                                    onKeyUp={(e) => e.stopPropagation()}
                                     onChange={(e) => this.handleOnChange(1, e, sponsorTime, e.target.value)}
                                     onWheel={(e) => this.changeTimesWhenScrolling(1, e, sponsorTime)}>
                                 </input>
@@ -180,7 +195,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     className="sponsorTimeDisplay"
                     onClick={this.toggleEditTime.bind(this)}>
                         {getFormattedTime(segment[0], true) +
-                            ((!isNaN(segment[1]) && sponsorTime.actionType !== ActionType.Poi)
+                            ((!isNaN(segment[1]) && this.state.selectedActionType !== ActionType.Poi)
                                 ? " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segment[1], true) : "")}
                 </div>
             );
@@ -195,9 +210,9 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 <div style={{position: "relative"}}>
                     <select id={"sponsorTimeCategories" + this.idSuffix}
                         className="sponsorTimeEditSelector sponsorTimeCategories"
-                        defaultValue={sponsorTime.category}
                         ref={this.categoryOptionRef}
                         style={{color: "inherit", backgroundColor: "inherit"}}
+                        value={this.state.selectedCategory}
                         onChange={(event) => this.categorySelectionChange(event)}>
                         {this.getCategoryOptions()}
                     </select>
@@ -208,7 +223,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         target="_blank" rel="noreferrer">
                         <img id={"sponsorTimeCategoriesHelpButton" + this.idSuffix}
                             className="helpButton"
-                            src={chrome.extension.getURL("icons/help.svg")}
+                            src={chrome.runtime.getURL("icons/help.svg")}
                             title={chrome.i18n.getMessage("categoryGuidelines")} />
                     </a>
                 </div>
@@ -220,7 +235,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     <div style={{position: "relative"}}>
                         <select id={"sponsorTimeActionTypes" + this.idSuffix}
                             className="sponsorTimeEditSelector sponsorTimeActionTypes"
-                            defaultValue={sponsorTime.actionType}
+                            value={this.state.selectedActionType}
                             style={{color: "inherit", backgroundColor: "inherit"}}
                             ref={this.actionTypeOptionRef}
                             onChange={(e) => this.actionTypeSelectionChange(e)}>
@@ -230,7 +245,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 ): ""}
 
                 {/* Chapter Name */}
-                {sponsorTime.actionType === ActionType.Chapter ? (
+                {this.state.selectedActionType=== ActionType.Chapter ? (
                     <div onBlur={() => this.setState({chapterNameSelectorOpen: false})}>
                         <input id={"chapterName" + this.idSuffix}
                             className="sponsorTimeEdit sponsorTimeEditInput sponsorChapterNameInput"
@@ -238,6 +253,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                             ref={this.descriptionOptionRef}
                             type="text"
                             value={this.state.description}
+                            onKeyDown={(e) => e.stopPropagation()}
+                            onKeyUp={(e) => e.stopPropagation()}
                             onContextMenu={(e) => e.stopPropagation()}
                             onChange={(e) => this.descriptionUpdate(e.target.value)}
                             onFocus={() => this.setState({chapterNameSelectorOpen: true})}>
@@ -255,49 +272,49 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     </div>
                 ): ""}
 
-                <br/>
-
                 {/* Editing Tools */}
 
-                <span id={"sponsorTimeDeleteButton" + this.idSuffix}
-                    className="sponsorTimeEditButton"
-                    onClick={this.deleteTime.bind(this)}>
-                    {chrome.i18n.getMessage("delete")}
-                </span>
-
-                {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(sponsorTime.actionType)) 
-                    && sponsorTime.actionType !== ActionType.Chapter ? (
-                    <span id={"sponsorTimePreviewButton" + this.idSuffix}
+                <div style={{ marginTop: "3px" }}>
+                    <span id={"sponsorTimeDeleteButton" + this.idSuffix}
                         className="sponsorTimeEditButton"
-                        onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey)}>
-                        {chrome.i18n.getMessage("preview")}
+                        onClick={this.deleteTime.bind(this)}>
+                        {chrome.i18n.getMessage("delete")}
                     </span>
-                ): ""}
 
-                {(!isNaN(segment[1]) && sponsorTime.actionType != ActionType.Full) ? (
-                    <span id={"sponsorTimeInspectButton" + this.idSuffix}
-                        className="sponsorTimeEditButton"
-                        onClick={this.inspectTime.bind(this)}>
-                        {chrome.i18n.getMessage("inspect")}
-                    </span>
-                ): ""}
+                    {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(this.state.selectedActionType)) 
+                        && this.state.selectedActionType !== ActionType.Chapter ? (
+                        <span id={"sponsorTimePreviewButton" + this.idSuffix}
+                            className="sponsorTimeEditButton"
+                            onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey)}>
+                            {chrome.i18n.getMessage("preview")}
+                        </span>
+                    ): ""}
 
-                {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(sponsorTime.actionType)) 
-                    && sponsorTime.actionType === ActionType.Chapter ? (
-                    <span id={"sponsorTimePreviewButton" + this.idSuffix}
-                        className="sponsorTimeEditButton"
-                        onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey)}>
-                        {chrome.i18n.getMessage("End")}
-                    </span>
-                ): ""}
+                    {(!isNaN(segment[1]) && this.state.selectedActionType != ActionType.Full) ? (
+                        <span id={"sponsorTimeInspectButton" + this.idSuffix}
+                            className="sponsorTimeEditButton"
+                            onClick={this.inspectTime.bind(this)}>
+                            {chrome.i18n.getMessage("inspect")}
+                        </span>
+                    ): ""}
+
+                    {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(this.state.selectedActionType)) ? (
+                        <span id={"sponsorTimePreviewEndButton" + this.idSuffix}
+                            className="sponsorTimeEditButton"
+                            onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey, true)}>
+                            {chrome.i18n.getMessage("End")}
+                        </span>
+                    ): ""}
+
+                    {(!isNaN(segment[1]) && this.state.selectedActionType != ActionType.Full) ? (
+                        <span id={"sponsorTimeEditButton" + this.idSuffix}
+                            className="sponsorTimeEditButton"
+                            onClick={this.toggleEditTime.bind(this)}>
+                            {this.state.editing ? chrome.i18n.getMessage("save") : chrome.i18n.getMessage("edit")}
+                        </span>
+                    ): ""}
+                </div>
 
-                {(!isNaN(segment[1]) && sponsorTime.actionType != ActionType.Full) ? (
-                    <span id={"sponsorTimeEditButton" + this.idSuffix}
-                        className="sponsorTimeEditButton"
-                        onClick={this.toggleEditTime.bind(this)}>
-                        {this.state.editing ? chrome.i18n.getMessage("save") : chrome.i18n.getMessage("edit")}
-                    </span>
-                ): ""}
             </div>
         );
     }
@@ -441,6 +458,9 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     categorySelectionChange(event: React.ChangeEvent<HTMLSelectElement>): void {
         const chosenCategory = event.target.value as Category;
+        this.setState({
+            selectedCategory: chosenCategory
+        });
 
         // See if show more categories was pressed
         if (chosenCategory !== DEFAULT_CATEGORY && !Config.config.categorySelections.some((category) => category.name === chosenCategory)) {
@@ -468,6 +488,10 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     actionTypeSelectionChange(event: React.ChangeEvent<HTMLSelectElement>): void {
         const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
 
+        this.setState({
+            selectedActionType: event.target.value as ActionType
+        });
+
         this.handleReplacingLostTimes(sponsorTime.category, event.target.value as ActionType, sponsorTime);
         this.saveEditTimes();
     }
@@ -577,7 +601,25 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             getFormattedTime(sponsorTime.segment[1], true)];
     }
 
+    lastEditTime = 0;
+    editTimeTimeout: NodeJS.Timeout | null = null;
     saveEditTimes(): void {
+        // Rate limit edits
+        const timeSinceLastEdit = Date.now() - this.lastEditTime;
+        const rateLimitTime = 200;
+        if (timeSinceLastEdit < rateLimitTime) {
+            if (!this.editTimeTimeout) {
+                this.editTimeTimeout = setTimeout(() => {
+                    this.saveEditTimes();
+                }, rateLimitTime - timeSinceLastEdit)
+            }
+
+            return;
+        }
+
+        this.lastEditTime = Date.now();
+        this.editTimeTimeout = null;
+
         const sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
         const category = this.categoryOptionRef.current.value as Category
 
@@ -593,6 +635,9 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 if (addingTime) {
                     this.props.contentContainer().updateEditButtonsOnPlayer();
                 }
+            } else if (startTime !== null) {
+                // Only start time is valid, still an incomplete segment
+                sponsorTimesSubmitting[this.props.index].segment[0] = startTime;
             }
         } else if (this.state.sponsorTimeEdits[1] === null && category === "outro" && !sponsorTimesSubmitting[this.props.index].segment[1]) {
             sponsorTimesSubmitting[this.props.index].segment[1] = this.props.contentContainer().v.duration;
@@ -603,12 +648,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
         const actionType = this.getNextActionType(category, this.actionTypeOptionRef?.current?.value as ActionType);
         sponsorTimesSubmitting[this.props.index].actionType = actionType;
+        this.setState({
+            selectedActionType: actionType
+        });
 
         const description = actionType === ActionType.Chapter ? this.descriptionOptionRef?.current?.value : "";
         sponsorTimesSubmitting[this.props.index].description = description;
 
-        Config.config.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimesSubmitting;
-        Config.forceSyncUpdate("unsubmittedSegments");
+        Config.local.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimesSubmitting;
+        Config.forceLocalUpdate("unsubmittedSegments");
 
         this.props.contentContainer().updatePreviewBar();
 
@@ -624,22 +672,20 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             : CompileConfig.categorySupport[category]?.[0] ?? ActionType.Skip
     }
 
-    previewTime(ctrlPressed = false, shiftPressed = false): void {
+    previewTime(ctrlPressed = false, shiftPressed = false, skipToEndTime = false): void {
         const sponsorTimes = this.props.contentContainer().sponsorTimesSubmitting;
         const index = this.props.index;
-        let seekTime = 2;
+        let seekTime = defaultPreviewTime;
         if (ctrlPressed) seekTime = 0.5;
         if (shiftPressed) seekTime = 0.25;
 
         const startTime = sponsorTimes[index].segment[0];
         const endTime = sponsorTimes[index].segment[1];
-        const isChapter = sponsorTimes[index].actionType === ActionType.Chapter;
 
         // If segment starts at 0:00, start playback at the end of the segment
-        const skipToEndTime = startTime === 0 || isChapter;
-        const skipTime = skipToEndTime ? endTime : (startTime - (seekTime * this.props.contentContainer().v.playbackRate));
+        const skipTime = (startTime === 0 || skipToEndTime) ? endTime : (startTime - (seekTime * this.props.contentContainer().v.playbackRate));
 
-        this.props.contentContainer().previewTime(skipTime, !isChapter);
+        this.props.contentContainer().previewTime(skipTime, !skipToEndTime);
     }
 
     inspectTime(): void {
@@ -660,11 +706,11 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
   
         //save this
         if (sponsorTimes.length > 0) {
-            Config.config.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimes;
+            Config.local.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimes;
         } else {
-            delete Config.config.unsubmittedSegments[this.props.contentContainer().sponsorVideoID];
+            delete Config.local.unsubmittedSegments[this.props.contentContainer().sponsorVideoID];
         }
-        Config.forceSyncUpdate("unsubmittedSegments");
+        Config.forceLocalUpdate("unsubmittedSegments");
 
         this.props.contentContainer().updatePreviewBar();
         
@@ -699,7 +745,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         if (this.props.contentContainer().channelIDInfo.status !== ChannelIDStatus.Found) return;
 
         this.fetchingSuggestions = true;
-        const result = await utils.asyncRequestToServer("GET", "/api/chapterNames", {
+        const result = await asyncRequestToServer("GET", "/api/chapterNames", {
             description,
             channelID: this.props.contentContainer().channelIDInfo.id
         });

src/components/SubmissionNoticeComponent.tsx

@@ -14,7 +14,7 @@ export interface SubmissionNoticeProps {
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: ContentContainer;
 
-    callback: () => unknown;
+    callback: () => Promise<boolean>;
 
     closeListener: () => void;
 }
@@ -38,6 +38,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
 
     guidelinesReminder: GenericNotice;
 
+    lastSegmentCount: number;
+
     constructor(props: SubmissionNoticeProps) {
         super(props);
         this.noticeRef = React.createRef();
@@ -47,12 +49,14 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
     
         const noticeTitle = chrome.i18n.getMessage("confirmNoticeTitle");
 
+        this.lastSegmentCount = this.props.contentContainer().sponsorTimesSubmitting.length;
+
         // Setup state
         this.state = {
             noticeTitle,
             messages: [],
             idSuffix: "SubmissionNotice"
-        }
+        };
     }
 
     componentDidMount(): void {
@@ -65,6 +69,13 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         this.videoObserver.observe(this.contentContainer().v, {
             attributes: true
         });
+
+        // Prevent zooming while changing times
+        document.getElementById("sponsorSkipNoticeMiddleRow" + this.state.idSuffix).addEventListener('wheel', function (event) {
+            if (event.ctrlKey) {
+                event.preventDefault();
+            }
+        }, {passive: false});
     }
 
     componentWillUnmount(): void {
@@ -73,6 +84,22 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         }
     }
 
+    componentDidUpdate() {
+        const currentSegmentCount = this.props.contentContainer().sponsorTimesSubmitting.length;
+        if (currentSegmentCount > this.lastSegmentCount) {
+            this.lastSegmentCount = currentSegmentCount;
+
+            this.scrollToBottom();
+        }
+    }
+
+    scrollToBottom() {
+        const scrollElement = this.noticeRef.current.getElement().current.querySelector("#sponsorSkipNoticeMiddleRowSubmissionNotice");
+        scrollElement.scrollTo({
+            top: scrollElement.scrollHeight + 1000
+        });
+    }
+
     render(): React.ReactElement {
         const sortButton = 
             <img id={"sponsorSkipSortButton" + this.state.idSuffix} 
@@ -80,7 +107,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                 onClick={() => this.sortSegments()}
                 title={chrome.i18n.getMessage("sortSegments")}
                 key="sortButton"
-                src={chrome.extension.getURL("icons/sort.svg")}>
+                src={chrome.runtime.getURL("icons/sort.svg")}>
             </img>;
         const exportButton = 
             <img id={"sponsorSkipExportButton" + this.state.idSuffix} 
@@ -88,7 +115,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                 onClick={() => this.exportSegments()}
                 title={chrome.i18n.getMessage("exportSegments")}
                 key="exportButton"
-                src={chrome.extension.getURL("icons/export.svg")}>
+                src={chrome.runtime.getURL("icons/export.svg")}>
             </img>;
         return (
             <NoticeComponent noticeTitle={this.state.noticeTitle}
@@ -104,7 +131,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                 {/* Sponsor Time List */}
                 <tr id={"sponsorSkipNoticeMiddleRow" + this.state.idSuffix}
                     className="sponsorTimeMessagesRow"
-                    style={{maxHeight: (this.contentContainer().v.offsetHeight - 200) + "px"}}>
+                    style={{maxHeight: (this.contentContainer().v?.offsetHeight - 200) + "px"}}
+                    onMouseDown={(e) => e.stopPropagation()}>
                     <td style={{width: "100%"}}>
                         {this.getSponsorTimeMessages()}
                     </td>
@@ -211,17 +239,19 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
             }
         }
 
-        this.props.callback();
-
-        this.cancel();
+        this.props.callback().then((success) => {
+            if (success) {
+                this.cancel();
+            }
+        });
     }
 
     sortSegments(): void {
         let sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
         sponsorTimesSubmitting = sponsorTimesSubmitting.sort((a, b) => a.segment[0] - b.segment[0]);
 
-        Config.config.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimesSubmitting;
-        Config.forceSyncUpdate("unsubmittedSegments");
+        Config.local.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimesSubmitting;
+        Config.forceLocalUpdate("unsubmittedSegments");
 
         this.forceUpdate();
     }

src/components/TooltipComponent.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-
-export interface TooltipProps {
-    text: string;
-    show: boolean;
-}
-
-export interface TooltipState {
-
-}
-
-class TooltipComponent extends React.Component<TooltipProps, TooltipState> {
-
-    constructor(props: TooltipProps) {
-        super(props);
-    }
-
-    render(): React.ReactElement {
-        const style: React.CSSProperties = {
-            display: this.props.show ? "flex" : "none",
-            position: "absolute",
-        }
-
-        return (
-            <span style={style}
-                className={"sponsorBlockTooltip"} >
-                <span className="sponsorBlockTooltipText">
-                    {this.props.text}
-                </span>
-            </span>
-        );
-    }
-}
-
-export default TooltipComponent;

src/components/options/CategorySkipOptionsComponent.tsx

@@ -139,6 +139,12 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
             case "autoSkip":
                 option = CategorySkipOption.AutoSkip;
 
+                if (this.props.category === "filler" && !Config.config.isVip) {
+                    if (!confirm(chrome.i18n.getMessage("FillerWarning"))) {
+                        event.target.value = "disable";
+                    }
+                }
+
                 break;
         }
 

src/components/options/KeybindComponent.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { createRoot, Root } from 'react-dom/client';
 import Config from "../../config";
 import KeybindDialogComponent from "./KeybindDialogComponent";
-import { formatKey, Keybind, keybindEquals, keybindToString } from "@ajayyy/maze-utils/lib/config";
+import { formatKey, Keybind, keybindEquals, keybindToString } from "../../../maze-utils/src/config";
 
 export interface KeybindProps { 
     option: string;

src/components/options/KeybindDialogComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ChangeEvent } from "react";
 import Config from "../../config";
-import { Keybind, formatKey, keybindEquals } from "@ajayyy/maze-utils/lib/config";
+import { Keybind, formatKey, keybindEquals } from "../../../maze-utils/src/config";
 
 export interface KeybindDialogProps { 
     option: string;
@@ -141,9 +141,12 @@ class KeybindDialogComponent extends React.Component<KeybindDialogProps, Keybind
                 return {message: chrome.i18n.getMessage("youtubeKeybindWarning"), blocking: false};
         }
 
-        if (this.props.option != "skipKeybind" && this.equals(Config.config['skipKeybind']) ||
-                this.props.option != "submitKeybind" && this.equals(Config.config['submitKeybind']) ||
-                this.props.option != "startSponsorKeybind" && this.equals(Config.config['startSponsorKeybind']))
+        if (this.props.option !== "skipKeybind" && this.equals(Config.config['skipKeybind']) ||
+                this.props.option !== "submitKeybind" && this.equals(Config.config['submitKeybind']) ||
+                this.props.option !== "actuallySubmitKeybind" && this.equals(Config.config['actuallySubmitKeybind']) ||
+                this.props.option !== "previewKeybind" && this.equals(Config.config['previewKeybind']) ||
+                this.props.option !== "closeSkipNoticeKeybind" && this.equals(Config.config['closeSkipNoticeKeybind']) ||
+                this.props.option !== "startSponsorKeybind" && this.equals(Config.config['startSponsorKeybind']))
             return {message: chrome.i18n.getMessage("keyAlreadyUsed"), blocking: true};
 
         return null;

src/components/options/UnsubmittedVideoListComponent.tsx

@@ -24,7 +24,7 @@ class UnsubmittedVideoListComponent extends React.Component<UnsubmittedVideoList
 
     render(): React.ReactElement {
         // Render nothing if there are no unsubmitted segments
-        if (Object.keys(Config.config.unsubmittedSegments).length == 0)
+        if (Object.keys(Config.local.unsubmittedSegments).length == 0)
             return <></>;
 
         return (
@@ -58,7 +58,7 @@ class UnsubmittedVideoListComponent extends React.Component<UnsubmittedVideoList
     getUnsubmittedVideos(): JSX.Element[] {
         const elements: JSX.Element[] = [];
 
-        for (const videoID of Object.keys(Config.config.unsubmittedSegments)) {
+        for (const videoID of Object.keys(Config.local.unsubmittedSegments)) {
             elements.push(
                 <UnsubmittedVideoListItem videoID={videoID} key={videoID}>
                 </UnsubmittedVideoListItem>

src/components/options/UnsubmittedVideoListItem.tsx

@@ -23,7 +23,7 @@ class UnsubmittedVideoListItem extends React.Component<UnsubmittedVideosListItem
     }
 
     render(): React.ReactElement {
-        const segmentCount = Config.config.unsubmittedSegments[this.props.videoID]?.length ?? 0;
+        const segmentCount = Config.local.unsubmittedSegments[this.props.videoID]?.length ?? 0;
 
         return (
             <>
@@ -69,17 +69,17 @@ class UnsubmittedVideoListItem extends React.Component<UnsubmittedVideosListItem
 
     clearSegments(): void {
         if (confirm(chrome.i18n.getMessage("clearThis"))) {
-            delete Config.config.unsubmittedSegments[this.props.videoID];
-            Config.forceSyncUpdate("unsubmittedSegments");
+            delete Config.local.unsubmittedSegments[this.props.videoID];
+            Config.forceLocalUpdate("unsubmittedSegments");
         }
     }
 
     exportSegments(): void {
-        this.copyToClipboard(exportTimes(Config.config.unsubmittedSegments[this.props.videoID]));
+        this.copyToClipboard(exportTimes(Config.local.unsubmittedSegments[this.props.videoID]));
     }
 
     exportSegmentsAsURL(): void {
-        this.copyToClipboard(`https://youtube.com/watch?v=${this.props.videoID}${exportTimesAsHashParam(Config.config.unsubmittedSegments[this.props.videoID])}`)
+        this.copyToClipboard(`https://youtube.com/watch?v=${this.props.videoID}${exportTimesAsHashParam(Config.local.unsubmittedSegments[this.props.videoID])}`)
     }
 
     copyToClipboard(text: string): void {

src/components/options/UnsubmittedVideosComponent.tsx

@@ -21,8 +21,8 @@ class UnsubmittedVideosComponent extends React.Component<UnsubmittedVideosProps,
     }
 
     render(): React.ReactElement {
-        const videoCount = Object.keys(Config.config.unsubmittedSegments).length;
-        const segmentCount = Object.values(Config.config.unsubmittedSegments).reduce((acc: number, vid: Array<unknown>) => acc + vid.length, 0);
+        const videoCount = Object.keys(Config.local.unsubmittedSegments).length;
+        const segmentCount = Object.values(Config.local.unsubmittedSegments).reduce((acc: number, vid: Array<unknown>) => acc + vid.length, 0);
 
         return <>
             <div style={{marginBottom: "10px"}}>
@@ -48,7 +48,7 @@ class UnsubmittedVideosComponent extends React.Component<UnsubmittedVideosProps,
 
     clearAllSegments(): void {
         if (confirm(chrome.i18n.getMessage("clearUnsubmittedSegmentsConfirm")))
-            Config.config.unsubmittedSegments = {};
+            Config.local.unsubmittedSegments = {};
     }
 }
 

src/config.ts

@@ -1,8 +1,8 @@
 import * as CompileConfig from "../config.json";
 import * as invidiousList from "../ci/invidiouslist.json";
 import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType } from "./types";
-import { Keybind, ProtoConfig, keybindEquals } from "@ajayyy/maze-utils/lib/config";
-import { HashedValue } from "@ajayyy/maze-utils/lib/hash";
+import { Keybind, ProtoConfig, keybindEquals } from "../maze-utils/src/config";
+import { HashedValue } from "../maze-utils/src/hash";
 
 export interface Permission {
     canSubmit: boolean;
@@ -12,8 +12,6 @@ interface SBConfig {
     userID: string;
     isVip: boolean;
     permissions: Record<Category, Permission>;
-    /* Contains unsubmitted segments that the user has created. */
-    unsubmittedSegments: Record<string, SponsorTime[]>;
     defaultCategory: Category;
     renderSegmentsAsChapters: boolean;
     whitelistedChannels: string[];
@@ -31,6 +29,7 @@ interface SBConfig {
     trackViewCount: boolean;
     trackViewCountInPrivate: boolean;
     trackDownvotes: boolean;
+    trackDownvotesInPrivate: boolean;
     dontShowNotice: boolean;
     noticeVisibilityMode: NoticeVisbilityMode;
     hideVideoPlayerControls: boolean;
@@ -54,6 +53,7 @@ interface SBConfig {
     showDonationLink: boolean;
     showPopupDonationCount: number;
     showUpsells: boolean;
+    showNewFeaturePopups: boolean;
     donateClicked: number;
     autoHideInfoButton: boolean;
     autoSkipOnMusicVideos: boolean;
@@ -72,6 +72,12 @@ interface SBConfig {
     useVirtualTime: boolean;
     showSegmentFailedToFetchWarning: boolean;
     allowScrollingToEdit: boolean;
+    deArrowInstalled: boolean;
+    showDeArrowPromotion: boolean;
+    showDeArrowInSettings: boolean;
+    shownDeArrowPromotion: boolean;
+    showZoomToFillError2: boolean;
+    cleanPopup: boolean;
 
     // Used to cache calculated text color info
     categoryPillColors: {
@@ -82,10 +88,14 @@ interface SBConfig {
     };
 
     skipKeybind: Keybind;
+    skipToHighlightKeybind: Keybind;
     startSponsorKeybind: Keybind;
     submitKeybind: Keybind;
+    actuallySubmitKeybind: Keybind;
+    previewKeybind: Keybind;
     nextChapterKeybind: Keybind;
     previousChapterKeybind: Keybind;
+    closeSkipNoticeKeybind: Keybind;
 
     // What categories should be skipped
     categorySelections: CategorySelection[];
@@ -129,6 +139,12 @@ interface SBStorage {
     /* VideoID prefixes to UUID prefixes */
     downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>;
     navigationApiAvailable: boolean;
+    
+    // Used when sync storage disabled
+    alreadyInstalled: boolean;
+
+    /* Contains unsubmitted segments that the user has created. */
+    unsubmittedSegments: Record<string, SponsorTime[]>;
 }
 
 class ConfigClass extends ProtoConfig<SBConfig, SBStorage> {
@@ -140,10 +156,26 @@ class ConfigClass extends ProtoConfig<SBConfig, SBStorage> {
             skipCount: this.config.skipCount,
             sponsorTimesContributed: this.config.sponsorTimesContributed
         });
+
+        chrome.storage.local.set({
+            ...this.localDefaults,
+        });
     }
 }
 
 function migrateOldSyncFormats(config: SBConfig) {
+    if (config["showZoomToFillError"]) {
+        chrome.storage.sync.remove("showZoomToFillError");
+    }
+
+    if (config["unsubmittedSegments"] && Object.keys(config["unsubmittedSegments"]).length > 0) {
+        chrome.storage.local.set({
+            unsubmittedSegments: config["unsubmittedSegments"]
+        }, () => {
+            chrome.storage.sync.remove("unsubmittedSegments");
+        });
+    }
+
     if (!config["chapterCategoryAdded"]) {
         config["chapterCategoryAdded"] = true;
 
@@ -157,15 +189,6 @@ function migrateOldSyncFormats(config: SBConfig) {
         }
     }
 
-    if (config["segmentTimes"]) {
-        const unsubmittedSegments = {};
-        for (const item of config["segmentTimes"]) {
-            unsubmittedSegments[item[0]] = item[1];
-        }
-
-        chrome.storage.sync.remove("segmentTimes", () => config.unsubmittedSegments = unsubmittedSegments);
-    }
-
     if (config["exclusive_accessCategoryAdded"] !== undefined) {
         chrome.storage.sync.remove("exclusive_accessCategoryAdded");
     }
@@ -251,7 +274,6 @@ const syncDefaults = {
     userID: null,
     isVip: false,
     permissions: {},
-    unsubmittedSegments: {},
     defaultCategory: "chooseACategory" as Category,
     renderSegmentsAsChapters: false,
     whitelistedChannels: [],
@@ -269,6 +291,7 @@ const syncDefaults = {
     trackViewCount: true,
     trackViewCountInPrivate: true,
     trackDownvotes: true,
+    trackDownvotesInPrivate: false,
     dontShowNotice: false,
     noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
     hideVideoPlayerControls: false,
@@ -292,6 +315,7 @@ const syncDefaults = {
     showDonationLink: true,
     showPopupDonationCount: 0,
     showUpsells: true,
+    showNewFeaturePopups: true,
     donateClicked: 0,
     autoHideInfoButton: true,
     autoSkipOnMusicVideos: false,
@@ -305,6 +329,12 @@ const syncDefaults = {
     useVirtualTime: true,
     showSegmentFailedToFetchWarning: true,
     allowScrollingToEdit: true,
+    deArrowInstalled: false,
+    showDeArrowPromotion: true,
+    showDeArrowInSettings: true,
+    shownDeArrowPromotion: false,
+    showZoomToFillError2: true,
+    cleanPopup: false,
 
     categoryPillColors: {},
 
@@ -316,10 +346,14 @@ const syncDefaults = {
      *      TODO: Find a way to skip having to update these checks. Maybe storing keybinds in a Map?
      */
     skipKeybind: { key: "Enter" },
+    skipToHighlightKeybind: { key: "Enter", ctrl: true },
     startSponsorKeybind: { key: ";" },
     submitKeybind: { key: "'" },
+    actuallySubmitKeybind: { key: "'", ctrl: true },
+    previewKeybind: { key: ";", ctrl: true },
     nextChapterKeybind: { key: "ArrowRight", ctrl: true },
     previousChapterKeybind: { key: "ArrowLeft", ctrl: true },
+    closeSkipNoticeKeybind: { key: "Backspace" },
 
     categorySelections: [{
         name: "sponsor" as Category,
@@ -436,7 +470,10 @@ const syncDefaults = {
 
 const localDefaults = {
     downvotedSegments: {},
-    navigationApiAvailable: null
+    navigationApiAvailable: null,
+    alreadyInstalled: false,
+
+    unsubmittedSegments: {}
 };
 
 const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats);

src/dearrowPromotion.ts

@@ -0,0 +1,74 @@
+import { waitFor } from "../maze-utils/src";
+import { getYouTubeTitleNode } from "../maze-utils/src/elements";
+import { getHash } from "../maze-utils/src/hash";
+import { getVideoID, isOnInvidious, isOnMobileYouTube } from "../maze-utils/src/video";
+import Config from "./config";
+import { Tooltip } from "./render/Tooltip";
+import { isDeArrowInstalled } from "./utils/crossExtension";
+import { isVisible } from "./utils/pageUtils";
+import { asyncRequestToServer } from "./utils/requests";
+
+let tooltip: Tooltip = null;
+const showDeArrowPromotion = false;
+export async function tryShowingDeArrowPromotion() {
+    if (showDeArrowPromotion
+            && Config.config.showDeArrowPromotion
+            && !isOnMobileYouTube()
+            && !isOnInvidious()
+            && document.URL.includes("watch")
+            && Config.config.showUpsells 
+            && Config.config.showNewFeaturePopups
+            && (Config.config.skipCount > 30 || !Config.config.trackViewCount)) {
+
+            if (!await isDeArrowInstalled()) {
+                try {
+                    const element = await waitFor(() => getYouTubeTitleNode(), 5000, 500, (e) => isVisible(e)) as HTMLElement;
+                    if (element && element.innerText && badTitle(element.innerText)) {
+                        const hashPrefix = (await getHash(getVideoID(), 1)).slice(0, 4);
+                        const deArrowData = await asyncRequestToServer("GET", "/api/branding/" + hashPrefix);
+                        if (!deArrowData.ok) return;
+
+                        const deArrowDataJson = JSON.parse(deArrowData.responseText);
+                        const title = deArrowDataJson?.[getVideoID()]?.titles?.[0];
+                        if (title && title.title && (title.locked || title.votes > 0)) {
+                            Config.config.showDeArrowPromotion = false;
+        
+                            tooltip = new Tooltip({
+                                text: chrome.i18n.getMessage("DeArrowTitleReplacementSuggestion") + "\n\n" + title.title,
+                                linkOnClick: () => {
+                                    window.open("https://dearrow.ajay.app");
+                                    Config.config.shownDeArrowPromotion = true;
+                                },
+                                secondButtonText: chrome.i18n.getMessage("hideNewFeatureUpdates"),
+                                referenceNode: element,
+                                prependElement: element.firstElementChild as HTMLElement,
+                                timeout: 15000,
+                                positionRealtive: false,
+                                containerAbsolute: true,
+                                bottomOffset: "inherit",
+                                topOffset: "55px",
+                                leftOffset: "0",
+                                rightOffset: "0",
+                                topTriangle: true,
+                                center: true,
+                                opacity: 1
+                            });
+                        }
+                    }
+                } catch { } // eslint-disable-line no-empty
+            } else {
+                Config.config.showDeArrowPromotion = false;
+            }
+        }
+}
+
+/**
+ * Two upper case words (at least 2 letters long)
+ */
+function badTitle(title: string): boolean {
+    return !!title.match(/\p{Lu}{2,} \p{Lu}{2,}[.!? ]/u);
+}
+
+export function hideDeArrowPromotion(): void {
+    if (tooltip) tooltip.close();
+}

src/document.ts

@@ -1,3 +1,3 @@
-import { init } from "@ajayyy/maze-utils/lib/injected/document";
+import { init } from "../maze-utils/src/injected/document";
 
 init();

src/help.ts

@@ -1,10 +1,41 @@
-import { localizeHtmlPage } from "@ajayyy/maze-utils/lib/setup";
+import { localizeHtmlPage } from "../maze-utils/src/setup";
 import Config from "./config";
 import { showDonationLink } from "./utils/configUtils";
 
-import { waitFor } from "@ajayyy/maze-utils";
+import { waitFor } from "../maze-utils/src";
+import { isDeArrowInstalled } from "./utils/crossExtension";
 
-window.addEventListener('DOMContentLoaded', init);
+if (document.readyState === "complete") {
+    init();
+} else {
+    document.addEventListener("DOMContentLoaded", init);
+}
+
+// DeArrow promotion
+waitFor(() => Config.isReady()).then(() => {
+    if (Config.config.showNewFeaturePopups && Config.config.showUpsells) {
+        isDeArrowInstalled().then((installed) => {
+            if (!installed) {
+                const deArrowPromotion = document.getElementById("dearrow-link");
+                deArrowPromotion.classList.remove("hidden");
+
+                deArrowPromotion.addEventListener("click", () => Config.config.showDeArrowPromotion = false);
+
+                const text = deArrowPromotion.querySelector("#dearrow-link-text");
+                text.textContent = `${chrome.i18n.getMessage("DeArrowPromotionMessage2").split("?")[0]}? ${chrome.i18n.getMessage("DeArrowPromotionMessage3")}`;
+
+                const closeButton = deArrowPromotion.querySelector(".close-button");
+                closeButton.addEventListener("click", (e) => {
+                    e.preventDefault();
+
+                    deArrowPromotion.classList.add("hidden");
+                    Config.config.showDeArrowPromotion = false;
+                    Config.config.showDeArrowInSettings = false;
+                });
+            }
+        });
+    }
+});
 
 async function init() {
     localizeHtmlPage();

src/js-components/previewBar.ts

@@ -1,5 +1,5 @@
 /*
-Parts of this are inspired from code from VideoSegments, but rewritten and under the LGPLv3 license
+Based on code from
 https://github.com/videosegments/videosegments/commits/f1e111bdfe231947800c6efdd51f62a4e7fef4d4/segmentsbar/segmentsbar.js
 */
 
@@ -11,8 +11,9 @@ import { ActionType, Category, SegmentContainer, SponsorHideType, SponsorSourceT
 import { partition } from "../utils/arrayUtils";
 import { DEFAULT_CATEGORY, shortCategoryName } from "../utils/categoryUtils";
 import { normalizeChapterName } from "../utils/exporter";
-import { getFormattedTimeToSeconds } from "@ajayyy/maze-utils/lib/formating";
-import { findValidElement } from "@ajayyy/maze-utils/lib/dom";
+import { findValidElement } from "../../maze-utils/src/dom";
+import { addCleanupListener } from "../../maze-utils/src/cleanup";
+import { isVisible } from "../utils/pageUtils";
 
 const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible';
 const MIN_CHAPTER_SIZE = 0.003;
@@ -26,6 +27,7 @@ export interface PreviewBarSegment {
     description: string;
     source: SponsorSourceType;
     requiredSegment?: boolean;
+    selectedSegment?: boolean;
 }
 
 interface ChapterGroup extends SegmentContainer {
@@ -97,7 +99,8 @@ class PreviewBar {
         this.chapterTooltip = document.createElement("div");
         this.chapterTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
 
-        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper");
+        // global chaper tooltip or duration tooltip
+        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper") ?? document.querySelector("#progress-bar-container.ytk-player > #hover-time-info");
         const originalTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title:not(.sponsorCategoryTooltip)") as HTMLElement;
         if (!tooltipTextWrapper || !tooltipTextWrapper.parentElement) return;
 
@@ -122,34 +125,11 @@ class PreviewBar {
             mouseOnSeekBar = false;
         });
 
-        const observer = new MutationObserver((mutations) => {
-            if (!mouseOnSeekBar || !this.categoryTooltip || !this.categoryTooltipContainer) return;
+        seekBar.addEventListener("mousemove", (e: MouseEvent) => {
+            if (!mouseOnSeekBar || !this.categoryTooltip || !this.categoryTooltipContainer || !chrome.runtime?.id) return;
 
-            // Only care about mutations to time tooltip
-            if (!mutations.some((mutation) => (mutation.target as HTMLElement).classList.contains("ytp-tooltip-text"))) {
-                return;
-            }
-
-            const tooltipTextElements = tooltipTextWrapper.querySelectorAll(".ytp-tooltip-text");
-            let timeInSeconds: number | null = null;
-            let noYoutubeChapters = false;
-
-            for (const tooltipTextElement of tooltipTextElements) {
-                if (tooltipTextElement.classList.contains('ytp-tooltip-text-no-title')) noYoutubeChapters = true;
-
-                const tooltipText = tooltipTextElement.textContent;
-                if (tooltipText === null || tooltipText.length === 0) continue;
-
-                timeInSeconds = getFormattedTimeToSeconds(tooltipText);
-
-                if (timeInSeconds !== null) break;
-            }
-
-            if (timeInSeconds === null) {
-                originalTooltip.style.removeProperty("display");
-
-                return;
-            }
+            let noYoutubeChapters = !!tooltipTextWrapper.querySelector(".ytp-tooltip-text.ytp-tooltip-text-no-title");
+            const timeInSeconds = this.decimalToTime((e.clientX - seekBar.getBoundingClientRect().x) / seekBar.clientWidth);
 
             // Find the segment at that location, using the shortest if multiple found
             const [normalSegments, chapterSegments] =
@@ -195,11 +175,6 @@ class PreviewBar {
                 this.chapterTooltip.style.textAlign = titleTooltip.style.textAlign;
             }
         });
-
-        observer.observe(tooltipTextWrapper, {
-            childList: true,
-            subtree: true,
-        });
     }
 
     private setTooltipTitle(segment: PreviewBarSegment, tooltip: HTMLElement): void {
@@ -217,16 +192,12 @@ class PreviewBar {
         }
     }
 
-    createElement(parent: HTMLElement): void {
-        this.parent = parent;
+    createElement(parent?: HTMLElement): void {
+        if (parent) this.parent = parent;
 
         if (this.onMobileYouTube) {
-            if (parent.classList.contains("progress-bar-background")) {
-                parent.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
-                parent.style.opacity = "1";
-            }
-
             this.container.style.transform = "none";
+            this.container.style.height = "var(--yt-progress-bar-height)";
         } else if (!this.onInvidious) {
             this.container.classList.add("sbNotInvidious");
         }
@@ -255,10 +226,12 @@ class PreviewBar {
         this.segments = segments ?? [];
         this.videoDuration = videoDuration ?? 0;
 
+
         this.updatePageElements();
         // Sometimes video duration is inaccurate, pull from accessibility info
         const ariaDuration = parseInt(this.progressBar?.getAttribute('aria-valuemax')) ?? 0;
-        if (ariaDuration && Math.abs(ariaDuration - this.videoDuration) > 3) {
+        const multipleActiveVideos = [...document.querySelectorAll("video")].filter((v) => isVisible(v)).length > 1;
+        if (!multipleActiveVideos && ariaDuration && Math.abs(ariaDuration - this.videoDuration) > 3) {
             this.videoDuration = ariaDuration;
         }
 
@@ -266,7 +239,7 @@ class PreviewBar {
     }
 
     private updatePageElements(): void {
-        const allProgressBars = document.querySelectorAll('.ytp-progress-bar') as NodeListOf<HTMLElement>;
+        const allProgressBars = document.querySelectorAll(".ytp-progress-bar") as NodeListOf<HTMLElement>;
         this.progressBar = findValidElement(allProgressBars) ?? allProgressBars?.[0];
 
         if (this.progressBar) {
@@ -304,6 +277,7 @@ class PreviewBar {
             return (b[1] - b[0]) - (a[1] - a[0]);
         });
         for (const segment of sortedSegments) {
+            if (segment.actionType === ActionType.Chapter) continue;
             const bar = this.createBar(segment);
 
             this.container.appendChild(bar);
@@ -326,6 +300,7 @@ class PreviewBar {
         const bar = document.createElement('li');
         bar.classList.add('previewbar');
         if (barSegment.requiredSegment) bar.classList.add("requiredSegment");
+        if (barSegment.selectedSegment) bar.classList.add("selectedSegment");
         bar.innerHTML = showLarger ? '&nbsp;&nbsp;' : '&nbsp;';
 
         const fullCategoryName = (unsubmitted ? 'preview-' : '') + category;
@@ -342,7 +317,7 @@ class PreviewBar {
         bar.style.left = this.timeToPercentage(startTime);
 
         if (duration > 0) {
-            bar.style.right = this.timeToPercentage(this.videoDuration - endTime);
+            bar.style.right = this.timeToRightPercentage(endTime);
         }
         if (this.chapterFilter(barSegment) && segment[1] < this.videoDuration) {
             bar.style.marginRight = `${this.chapterMargin}px`;
@@ -625,6 +600,11 @@ class PreviewBar {
         childListObserver.observe(this.originalChapterBar, {
             childList: true
         });
+
+        addCleanupListener(() => {
+            attributeObserver.disconnect();
+            childListObserver.disconnect();
+        });
     }
 
     private updateChapterAllMutation(originalChapterBar: HTMLElement, progressBar: HTMLElement, firstUpdate = false): void {
@@ -771,11 +751,15 @@ class PreviewBar {
 
     updateChapterText(segments: SponsorTime[], submittingSegments: SponsorTime[], currentTime: number): SponsorTime[] {
         if (!Config.config.showSegmentNameInChapterBar
+                || Config.config.disableSkipping
                 || ((!segments || segments.length <= 0) && submittingSegments?.length <= 0)) {
             const chaptersContainer = this.getChaptersContainer();
-            const chapterButton = this.getChapterButton(chaptersContainer);
-            if (chapterButton && chapterButton.classList.contains("ytp-chapter-container-disabled")) {
-                chaptersContainer.style.display = "none";
+            if (chaptersContainer) {
+                chaptersContainer.querySelector(".sponsorChapterText")?.remove();
+                const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
+    
+                chapterTitle.style.removeProperty("display");
+                chaptersContainer.classList.remove("sponsorblock-chapter-visible");
             }
 
             return [];
@@ -801,7 +785,7 @@ class PreviewBar {
 
         if (chaptersContainer) {
             if (segments.length > 0) {
-                chaptersContainer.style.removeProperty("display");
+                chaptersContainer.classList.add("sponsorblock-chapter-visible");
 
                 const chosenSegment = segments.sort((a, b) => {
                     if (a.actionType === ActionType.Chapter && b.actionType !== ActionType.Chapter) {
@@ -818,11 +802,11 @@ class PreviewBar {
                 chapterButton.disabled = false;
 
                 const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
-                chapterTitle.innerText = "";
+                chapterTitle.style.display = "none";
 
-                const chapterCustomText = (chapterTitle.querySelector(".sponsorChapterText") || (() => {
+                const chapterCustomText = (chapterTitle.parentElement.querySelector(".sponsorChapterText") || (() => {
                     const elem = document.createElement("div");
-                    chapterTitle.appendChild(elem);
+                    chapterTitle.parentElement.insertBefore(elem, chapterTitle);
                     elem.classList.add("sponsorChapterText");
                     return elem;
                 })()) as HTMLDivElement;
@@ -853,11 +837,10 @@ class PreviewBar {
             } else {
                 chaptersContainer.querySelector(".sponsorChapterText")?.remove();
                 const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
-                if (chapterTitle.innerText === "") {
-                    chaptersContainer.style.display = "none";
-                } else {
-                    chaptersContainer.style.removeProperty("display");
-                }
+
+                chapterTitle.style.removeProperty("display");
+                chaptersContainer.classList.remove("sponsorblock-chapter-visible");
+                
                 this.chapterVote.setVisibility(false);
             }
         }
@@ -908,7 +891,22 @@ class PreviewBar {
         return `${this.timeToDecimal(time) * 100}%`
     }
 
+    timeToRightPercentage(time: number): string {
+        return `${(1 - this.timeToDecimal(time)) * 100}%`
+    }
+
     timeToDecimal(time: number): number {
+        return this.decimalTimeConverter(time, true);
+    }
+
+    decimalToTime(decimal: number): number {
+        return this.decimalTimeConverter(decimal, false);
+    }
+
+    /**
+     * Decimal to time or time to decimal
+     */
+    decimalTimeConverter(value: number, isTime: boolean): number {
         if (this.originalChapterBarBlocks?.length > 1 && this.existingChapters.length === this.originalChapterBarBlocks?.length) {
             // Parent element to still work when display: none
             const totalPixels = this.originalChapterBar.parentElement.clientWidth;
@@ -918,8 +916,9 @@ class PreviewBar {
                 const chapterElement = this.originalChapterBarBlocks[i];
                 const widthPixels = parseFloat(chapterElement.style.width.replace("px", ""));
 
-                if (time >= this.existingChapters[i].segment[1]) {
-                    const marginPixels = chapterElement.style.marginRight ? parseFloat(chapterElement.style.marginRight.replace("px", "")) : 0;
+                const marginPixels = chapterElement.style.marginRight ? parseFloat(chapterElement.style.marginRight.replace("px", "")) : 0;
+                if ((isTime && value >= this.existingChapters[i].segment[1])
+                        || (!isTime && value >= (pixelOffset + widthPixels + marginPixels) / totalPixels)) {
                     pixelOffset += widthPixels + marginPixels;
                     lastCheckedChapter = i;
                 } else {
@@ -933,13 +932,22 @@ class PreviewBar {
                 const latestWidth = parseFloat(this.originalChapterBarBlocks[lastCheckedChapter + 1].style.width.replace("px", ""));
                 const latestChapterDuration = latestChapter.segment[1] - latestChapter.segment[0];
 
-                const percentageInCurrentChapter = (time - latestChapter.segment[0]) / latestChapterDuration;
-                const sizeOfCurrentChapter = latestWidth / totalPixels;
-                return Math.min(1, ((pixelOffset / totalPixels) + (percentageInCurrentChapter * sizeOfCurrentChapter)));
+                if (isTime) {
+                    const percentageInCurrentChapter = (value - latestChapter.segment[0]) / latestChapterDuration;
+                    const sizeOfCurrentChapter = latestWidth / totalPixels;
+                    return Math.min(1, ((pixelOffset / totalPixels) + (percentageInCurrentChapter * sizeOfCurrentChapter)));
+                } else {
+                    const percentageInCurrentChapter = (value * totalPixels - pixelOffset) / latestWidth;
+                    return Math.max(0, latestChapter.segment[0] + (percentageInCurrentChapter * latestChapterDuration));
+                }
             }
         }
 
-        return Math.min(1, time / this.videoDuration);
+        if (isTime) {
+            return Math.min(1, value / this.videoDuration);
+        } else {
+            return Math.max(0, value * this.videoDuration);
+        }
     }
 
     /*

src/js-components/skipButtonControlBar.ts

@@ -1,11 +1,13 @@
 import Config from "../config";
-import { SponsorTime } from "../types";
+import { SegmentUUID, SponsorTime } from "../types";
 import { getSkippingText } from "../utils/categoryUtils";
-import { AnimationUtils } from "../utils/animationUtils";
-import { keybindToString } from "@ajayyy/maze-utils/lib/config";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import { keybindToString } from "../../maze-utils/src/config";
+import { isMobileControlsOpen } from "../utils/mobileUtils";
 
 export interface SkipButtonControlBarProps {
     skip: (segment: SponsorTime) => void;
+    selectSegment: (UUID: SegmentUUID) => void;
     onMobileYouTube: boolean;
 }
 
@@ -41,7 +43,7 @@ export class SkipButtonControlBar {
 
         this.container = document.createElement("div");
         this.container.classList.add("skipButtonControlBarContainer");
-        this.container.classList.add("hidden");
+        this.container.classList.add("sbhidden");
         if (this.onMobileYouTube) this.container.classList.add("mobile");
 
         this.skipIcon = document.createElement("img");
@@ -54,8 +56,18 @@ export class SkipButtonControlBar {
         this.container.appendChild(this.skipIcon);
         this.container.appendChild(this.textContainer);
         this.container.addEventListener("click", () => this.toggleSkip());
-        this.container.addEventListener("mouseenter", () => this.stopTimer());
-        this.container.addEventListener("mouseleave", () => this.startTimer());
+        this.container.addEventListener("mouseenter", () => {
+            this.stopTimer();
+
+            if (this.segment) {
+                props.selectSegment(this.segment.UUID);
+            }
+        });
+        this.container.addEventListener("mouseleave", () => {
+            this.startTimer();
+
+            props.selectSegment(null);
+        });
         if (this.onMobileYouTube) {
             this.container.addEventListener("touchstart", (e) => this.handleTouchStart(e));
             this.container.addEventListener("touchmove", (e) => this.handleTouchMove(e));
@@ -103,7 +115,7 @@ export class SkipButtonControlBar {
 
         this.refreshText();
         this.container?.classList?.remove("textDisabled");
-        this.textContainer?.classList?.remove("hidden");
+        this.textContainer?.classList?.remove("sbhidden");
         AnimationUtils.disableAutoHideAnimation(this.skipIcon);
 
         this.startTimer();
@@ -111,8 +123,8 @@ export class SkipButtonControlBar {
 
     refreshText(): void {
         if (this.segment) {
-            this.chapterText?.classList?.add("hidden");
-            this.container.classList.remove("hidden");
+            this.chapterText?.classList?.add("sbhidden");
+            this.container.classList.remove("sbhidden");
             this.textContainer.innerText = this.getTitle();
             this.skipIcon.setAttribute("title", this.getTitle());
         }
@@ -134,10 +146,10 @@ export class SkipButtonControlBar {
     }
 
     disable(): void {
-        this.container.classList.add("hidden");
+        this.container.classList.add("sbhidden");
 
-        this.chapterText?.classList?.remove("hidden");
-        this.getChapterPrefix()?.classList?.remove("hidden");
+        this.chapterText?.classList?.remove("sbhidden");
+        this.getChapterPrefix()?.classList?.remove("sbhidden");
 
         this.enabled = false;
     }
@@ -147,8 +159,10 @@ export class SkipButtonControlBar {
     }
 
     toggleSkip(): void {
-        this.skip(this.segment);
-        this.disableText();
+        if (this.segment && this.enabled) {
+            this.skip(this.segment);
+            this.disableText();
+        }
     }
 
     disableText(): void {
@@ -158,10 +172,10 @@ export class SkipButtonControlBar {
         }
 
         this.container.classList.add("textDisabled");
-        this.textContainer?.classList?.add("hidden");
-        this.chapterText?.classList?.remove("hidden");
+        this.textContainer?.classList?.add("sbhidden");
+        this.chapterText?.classList?.remove("sbhidden");
 
-        this.getChapterPrefix()?.classList?.add("hidden");
+        this.getChapterPrefix()?.classList?.add("sbhidden");
 
         AnimationUtils.enableAutoHideAnimation(this.skipIcon);
         if (this.onMobileYouTube) {
@@ -170,10 +184,8 @@ export class SkipButtonControlBar {
     }
 
     updateMobileControls(): void {
-        const overlay = document.getElementById("player-control-overlay");
-
-        if (overlay && this.enabled) {
-            if (overlay?.classList?.contains("fadein")) {
+        if (this.enabled) {
+            if (isMobileControlsOpen()) {
                 this.showButton();
             } else {
                 this.hideButton();
@@ -182,7 +194,7 @@ export class SkipButtonControlBar {
     }
 
     private getTitle(): string {
-        return getSkippingText([this.segment], false) + (this.showKeybindHint ? " (" + keybindToString(Config.config.skipKeybind) + ")" : "");
+        return getSkippingText([this.segment], false) + (this.showKeybindHint ? " (" + keybindToString(Config.config.skipToHighlightKeybind) + ")" : "");
     }
 
     private getChapterPrefix(): HTMLElement {

src/messageTypes.ts

@@ -31,7 +31,7 @@ interface IsInfoFoundMessage {
 }
 
 interface SkipMessage {
-    message: "unskip" | "reskip";
+    message: "unskip" | "reskip" | "selectSegment";
     UUID: SegmentUUID;
 }
 
@@ -103,7 +103,8 @@ export type MessageResponse =
     | IsChannelWhitelistedResponse
     | Record<string, never> // empty object response {}
     | VoteResponse
-    | ImportSegmentsResponse;
+    | ImportSegmentsResponse
+    | RefreshSegmentsResponse;
 
 export interface VoteResponse {
     successType: number;
@@ -115,6 +116,10 @@ interface ImportSegmentsResponse {
     importedSegments: SponsorTime[];
 }
 
+export interface RefreshSegmentsResponse {
+    hasVideo: boolean;
+}
+
 export interface TimeUpdateMessage {
     message: "time";
     time: number;

src/options.ts

@@ -13,17 +13,23 @@ import CategoryChooser from "./render/CategoryChooser";
 import UnsubmittedVideos from "./render/UnsubmittedVideos";
 import KeybindComponent from "./components/options/KeybindComponent";
 import { showDonationLink } from "./utils/configUtils";
-import { localizeHtmlPage } from "@ajayyy/maze-utils/lib/setup";
-import { StorageChangesObject } from "@ajayyy/maze-utils/lib/config";
-import { getHash } from "@ajayyy/maze-utils/lib/hash";
-import { isFirefoxOrSafari } from "@ajayyy/maze-utils";
+import { localizeHtmlPage } from "../maze-utils/src/setup";
+import { StorageChangesObject } from "../maze-utils/src/config";
+import { getHash } from "../maze-utils/src/hash";
+import { isFirefoxOrSafari } from "../maze-utils/src";
+import { isDeArrowInstalled } from "./utils/crossExtension";
+import { asyncRequestToServer } from "./utils/requests";
 const utils = new Utils();
 let embed = false;
 
 const categoryChoosers: CategoryChooser[] = [];
 const unsubmittedVideos: UnsubmittedVideos[] = [];
 
-window.addEventListener('DOMContentLoaded', init);
+if (document.readyState === "complete") {
+    init();
+} else {
+    document.addEventListener("DOMContentLoaded", init);
+}
 
 async function init() {
     localizeHtmlPage();
@@ -56,6 +62,10 @@ async function init() {
         Config.configSyncListeners.push(optionsConfigUpdateListener);
     }
 
+    if (!Config.configLocalListeners.includes(optionsLocalConfigUpdateListener)) {
+        Config.configLocalListeners.push(optionsLocalConfigUpdateListener);
+    }
+
     await utils.wait(() => Config.config !== null);
 
     if (!Config.config.darkMode) {
@@ -68,6 +78,30 @@ async function init() {
         donate.classList.add("hidden");
     }
 
+    // DeArrow promotion
+    if (Config.config.showNewFeaturePopups && Config.config.showUpsells && Config.config.showDeArrowInSettings) {
+        isDeArrowInstalled().then((installed) => {
+            if (!installed) {
+                const deArrowPromotion = document.getElementById("deArrowPromotion");
+                deArrowPromotion.classList.remove("hidden");
+
+                deArrowPromotion.addEventListener("click", () => Config.config.showDeArrowPromotion = false);
+
+                const closeButton = deArrowPromotion.querySelector(".close-button");
+                closeButton.addEventListener("click", (e) => {
+                    e.preventDefault();
+                    
+                    deArrowPromotion.classList.add("hidden");
+                    Config.config.showDeArrowPromotion = false;
+                    Config.config.showDeArrowInSettings = false;
+                });
+            }
+        });
+    }
+
+    const skipToHighlightKeybind = document.querySelector(`[data-sync="skipToHighlightKeybind"] .optionLabel`) as HTMLElement;
+    skipToHighlightKeybind.innerText = `${chrome.i18n.getMessage("skip_to_category").replace("{0}", chrome.i18n.getMessage("category_poi_highlight")).replace("?", "")}:`;
+
     // Set all of the toggle options to the correct option
     const optionsContainer = document.getElementById("options");
     const optionsElements = optionsContainer.querySelectorAll("*");
@@ -223,10 +257,10 @@ async function init() {
 
                 if (option == "*")  {
                     const downloadButton = optionsElements[i].querySelector(".download-button");
-                    downloadButton.addEventListener("click", downloadConfig);
+                    downloadButton.addEventListener("click", () => downloadConfig(optionsElements[i]));
 
                     const uploadButton = optionsElements[i].querySelector(".upload-button");
-                    uploadButton.addEventListener("change", (e) => uploadConfig(e));
+                    uploadButton.addEventListener("change", (e) => uploadConfig(e, optionsElements[i] as HTMLElement));
                 }
 
                 const privateTextChangeOption = optionsElements[i].getAttribute("data-sync");
@@ -252,7 +286,7 @@ async function init() {
                             break;
                         case "resetToDefault":
                             Config.resetToDefault();
-                            window.location.reload();
+                            setTimeout(() => window.location.reload(), 200);
                             break;
                     }
                 });
@@ -376,7 +410,11 @@ function optionsConfigUpdateListener(changes: StorageChangesObject) {
         for (const chooser of categoryChoosers) {
             chooser.update();
         }
-    } else if (changes.unsubmittedSegments) {
+    }
+}
+
+function optionsLocalConfigUpdateListener(changes: StorageChangesObject) {
+    if (changes.unsubmittedSegments) {
         for (const chooser of unsubmittedVideos) {
             chooser.update();
         }
@@ -432,7 +470,12 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
             let instanceList = Config.config[option];
             if (!instanceList) instanceList = [];
 
-            instanceList.push(textBox.value.trim().toLowerCase());
+            let domain = textBox.value.trim().toLowerCase();
+            if (domain.includes(":")) {
+                domain = domain.split(":")[0];
+            }
+
+            instanceList.push(domain);
 
             Config.config[option] = instanceList;
 
@@ -505,6 +548,7 @@ function activatePrivateTextChange(element: HTMLElement) {
 
     const textBox = <HTMLInputElement> element.querySelector(".option-text-box");
     const option = element.getAttribute("data-sync");
+    const optionType = element.getAttribute("data-sync-type");
 
     // See if anything extra must be done
     switch (option) {
@@ -517,7 +561,11 @@ function activatePrivateTextChange(element: HTMLElement) {
     // See if anything extra must be done
     switch (option) {
         case "*": {
-            result = JSON.stringify(Config.cachedSyncConfig);
+            if (optionType === "local") {
+                result = JSON.stringify(Config.cachedLocalStorage);
+            } else {
+                result = JSON.stringify(Config.cachedSyncConfig);
+            }
             break;
         }
     }
@@ -533,7 +581,7 @@ function activatePrivateTextChange(element: HTMLElement) {
     switch (option) {
         case "userID":
             if (Config.config[option]) {
-                utils.asyncRequestToServer("GET", "/api/userInfo", {
+                asyncRequestToServer("GET", "/api/userInfo", {
                     publicUserID: getHash(Config.config[option]),
                     values: ["warnings", "banned"]
                 }).then((result) => {
@@ -560,6 +608,7 @@ function activatePrivateTextChange(element: HTMLElement) {
  */
 async function setTextOption(option: string, element: HTMLElement, value: string, callbackOnError?: () => void) {
     const confirmMessage = element.getAttribute("data-confirm-message");
+    const optionType = element.getAttribute("data-sync-type");
 
     if (confirmMessage === null || confirm(chrome.i18n.getMessage(confirmMessage))) {
 
@@ -569,18 +618,21 @@ async function setTextOption(option: string, element: HTMLElement, value: string
                 try {
                     const newConfig = JSON.parse(value);
                     for (const key in newConfig) {
-                        Config.config[key] = newConfig[key];
+                        if (optionType === "local") {
+                            Config.local[key] = newConfig[key];
+                        } else {
+                            Config.config[key] = newConfig[key];
+                        }
                     }
 
-                    if (newConfig.supportInvidious) {
+                    if (optionType !== "local" && newConfig.supportInvidious) {
                         const checkbox = <HTMLInputElement> document.querySelector("#support-invidious > div > label > input");
 
                         checkbox.checked = true;
                         await invidiousOnClick(checkbox, "supportInvidious");
                     }
 
-                    window.location.reload();
-
+                    setTimeout(() => window.location.reload(), 200);
                 } catch (e) {
                     alert(chrome.i18n.getMessage("incorrectlyFormattedOptions"));
                 }
@@ -595,25 +647,27 @@ async function setTextOption(option: string, element: HTMLElement, value: string
     }
 }
 
-function downloadConfig() {
+function downloadConfig(element: Element) {
+    const optionType = element.getAttribute("data-sync-type");
+
     const file = document.createElement("a");
-    const jsonData = JSON.parse(JSON.stringify(Config.cachedSyncConfig));
+    const jsonData = JSON.parse(JSON.stringify(optionType === "local" ? Config.cachedLocalStorage : Config.cachedSyncConfig));
     const dateTimeString = new Date().toJSON().replace("T", "_").replace(/:/g, ".").replace(/.\d+Z/g, "")
     file.setAttribute("href", `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(jsonData))}`);
-    file.setAttribute("download", `SponsorBlockConfig_${dateTimeString}.json`);
+    file.setAttribute("download", `SponsorBlock${optionType === "local" ? "OtherData" : "Config"}_${dateTimeString}.json`);
     document.body.append(file);
     file.click();
     file.remove();
 }
 
-function uploadConfig(e) {
-    if (e.target.files.length == 1) {
-        const file = e.target.files[0];
+function uploadConfig(e: Event, element: HTMLElement) {
+    const target = e.target as HTMLInputElement;
+    if (target.files.length == 1) {
+        const file = target.files[0];
         const reader = new FileReader();
-        const element = document.querySelector("[data-sync='*']") as HTMLElement;
         reader.onload = function(ev) {
             setTextOption("*", element, ev.target.result as string, () => {
-                e.target.value = null;
+                target.value = null;
             });
         };
         reader.readAsText(file);

src/permissions.ts

@@ -1,13 +1,17 @@
 import Config from "./config";
 import Utils from "./utils";
-import { localizeHtmlPage } from "@ajayyy/maze-utils/lib/setup";
+import { localizeHtmlPage } from "../maze-utils/src/setup";
 const utils = new Utils();
 
 // This is needed, if Config is not imported before Utils, things break.
 // Probably due to cyclic dependencies
 Config.config;
 
-window.addEventListener('DOMContentLoaded', init);
+if (document.readyState === "complete") {
+    init();
+} else {
+    document.addEventListener("DOMContentLoaded", init);
+}
 
 async function init() {
     localizeHtmlPage();

src/popup.ts

@@ -15,18 +15,20 @@ import {
     Message,
     MessageResponse,
     PopupMessage,
+    RefreshSegmentsResponse,
     SponsorStartResponse,
     VoteResponse,
 } from "./messageTypes";
 import { showDonationLink } from "./utils/configUtils";
-import { AnimationUtils } from "./utils/animationUtils";
+import { AnimationUtils } from "../maze-utils/src/animationUtils";
 import { shortCategoryName } from "./utils/categoryUtils";
-import { localizeHtmlPage } from "@ajayyy/maze-utils/lib/setup";
+import { localizeHtmlPage } from "../maze-utils/src/setup";
 import { exportTimes } from "./utils/exporter";
 import GenericNotice from "./render/GenericNotice";
-import { getErrorMessage, getFormattedTime } from "@ajayyy/maze-utils/lib/formating";
-import { StorageChangesObject } from "@ajayyy/maze-utils/lib/config";
-import { getHash } from "@ajayyy/maze-utils/lib/hash";
+import { getErrorMessage, getFormattedTime } from "../maze-utils/src/formating";
+import { StorageChangesObject } from "../maze-utils/src/config";
+import { getHash } from "../maze-utils/src/hash";
+import { asyncRequestToServer, sendRequestToServer } from "./utils/requests";
 
 const utils = new Utils();
 
@@ -71,6 +73,12 @@ window.addEventListener("message", async (e): Promise<void> => {
     if (e.source !== window.parent) return;
     if (e.origin.endsWith('.youtube.com')) {
         allowPopup = true;
+
+        if (e.data && e.data?.type === "style") {
+            const style = document.createElement("style");
+            style.textContent = e.data.css;
+            document.head.appendChild(style);
+        }
     }
 });
 
@@ -87,6 +95,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     type PageElements = { [key: string]: HTMLElement } & InputPageElements
 
     let stopLoadingAnimation = null;
+    // For loading video info from the page
+    let loadRetryCount = 0;
 
     //the start and end time pairs (2d)
     let sponsorTimes: SponsorTime[] = [];
@@ -108,6 +118,10 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     const PageElements: PageElements = {};
 
     [
+        "sbPopupLogo",
+        "sbYourWorkBox",
+        "videoInfo",
+        "sbFooter",
         "sponsorBlockPopupBody",
         "sponsorblockPopup",
         "sponsorStart",
@@ -198,6 +212,16 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     }
     PageElements.sbDonate.addEventListener("click", () => Config.config.donateClicked = Config.config.donateClicked + 1);
 
+    if (Config.config.cleanPopup) {
+        PageElements.sbPopupLogo.classList.add("hidden");
+        PageElements.sbYourWorkBox.classList.add("hidden");
+        PageElements.sbFooter.classList.add("hidden");
+        PageElements.sponsorTimesDonateContainer.classList.add("hidden");
+        PageElements.mainControls.classList.add("hidden");
+
+        PageElements.videoInfo.style.marginTop = "10px";
+    }
+
     if (Config.config.testingServer) {
         PageElements.sbBetaServerWarning.classList.remove("hidden");
         PageElements.sbBetaServerWarning.addEventListener("click", function () {
@@ -281,7 +305,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
     const values = ["userName", "viewCount", "minutesSaved", "vip", "permissions"];
 
-    utils.asyncRequestToServer("GET", "/api/userInfo", {
+    asyncRequestToServer("GET", "/api/userInfo", {
         publicUserID: await getHash(Config.config.userID),
         values
     }).then((res) => {
@@ -388,9 +412,18 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 currentVideoID = result.videoID;
 
                 loadTabData(tabs, updating);
-            } else if (result === undefined && chrome.runtime.lastError) {
-                //this isn't a YouTube video then, or at least the content script is not loaded
+            } else {
+                // Handle error if it exists
+                chrome.runtime.lastError;
+
+                // This isn't a YouTube video then, or at least the content script is not loaded
                 displayNoVideo();
+
+                // Try again in some time if a failure
+                loadRetryCount++;
+                if (loadRetryCount < 6) {
+                    setTimeout(() => getSegmentsFromContentScript(false), 100 * loadRetryCount);
+                }
             }
         });
     }
@@ -403,7 +436,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         }
 
         await utils.wait(() => Config.config !== null, 5000, 10);
-        sponsorTimes = Config.config.unsubmittedSegments[currentVideoID] ?? [];
+        sponsorTimes = Config.local.unsubmittedSegments[currentVideoID] ?? [];
         updateSegmentEditingUI();
 
         messageHandler.sendMessage(
@@ -427,37 +460,35 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             stopLoadingAnimation = null;
         }
 
-        if (chrome.runtime.lastError) {
+        if (chrome.runtime.lastError || request == undefined || request.found == undefined) {
             //This page doesn't have the injected content script, or at least not yet
+            // Or if the request is empty, meaning the current page is not YouTube or a video page
             displayNoVideo();
             return;
         }
 
-        //if request is undefined, then the page currently being browsed is not YouTube
-        if (request != undefined) {
-            //remove loading text
-            PageElements.mainControls.style.display = "block";
-            if (request.onMobileYouTube) PageElements.mainControls.classList.add("hidden");
-            PageElements.whitelistButton.classList.remove("hidden");
-            PageElements.loadingIndicator.style.display = "none";
+        //remove loading text
+        PageElements.mainControls.style.display = "block";
+        if (request.onMobileYouTube) PageElements.mainControls.classList.add("hidden");
+        PageElements.whitelistButton.classList.remove("hidden");
+        PageElements.loadingIndicator.style.display = "none";
 
-            downloadedTimes = request.sponsorTimes ?? [];
-            displayDownloadedSponsorTimes(downloadedTimes, request.time);
-            if (request.found) {
-                PageElements.videoFound.innerHTML = chrome.i18n.getMessage("sponsorFound");
-                PageElements.issueReporterImportExport.classList.remove("hidden");
-            } else if (request.status == 404 || request.status == 200) {
-                PageElements.videoFound.innerHTML = chrome.i18n.getMessage("sponsor404");
-                PageElements.issueReporterImportExport.classList.remove("hidden");
+        downloadedTimes = request.sponsorTimes ?? [];
+        displayDownloadedSponsorTimes(downloadedTimes, request.time);
+        if (request.found) {
+            PageElements.videoFound.innerHTML = chrome.i18n.getMessage("sponsorFound");
+            PageElements.issueReporterImportExport.classList.remove("hidden");
+        } else if (request.status == 404 || request.status == 200) {
+            PageElements.videoFound.innerHTML = chrome.i18n.getMessage("sponsor404");
+            PageElements.issueReporterImportExport.classList.remove("hidden");
+        } else {
+            if (request.status) {
+                PageElements.videoFound.innerHTML = chrome.i18n.getMessage("connectionError") + request.status;
             } else {
-                if (request.status) {
-                    PageElements.videoFound.innerHTML = chrome.i18n.getMessage("connectionError") + request.status;
-                } else {
-                    PageElements.videoFound.innerHTML = chrome.i18n.getMessage("segmentsStillLoading");
-                }
-
-                PageElements.issueReporterImportExport.classList.remove("hidden");
+                PageElements.videoFound.innerHTML = chrome.i18n.getMessage("segmentsStillLoading");
             }
+
+            PageElements.issueReporterImportExport.classList.remove("hidden");
         }
 
         //see if whitelist button should be swapped
@@ -495,7 +526,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     function startSponsorCallback(response: SponsorStartResponse) {
         // Only update the segments after a segment was created
         if (!response.creatingSegment) {
-            sponsorTimes = Config.config.unsubmittedSegments[currentVideoID] || [];
+            sponsorTimes = Config.local.unsubmittedSegments[currentVideoID] || [];
         }
 
         // Update the UI
@@ -530,7 +561,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     return true;
                 }
             })
-            .sort((a, b) => a.segment[1] - b.segment[1])
+            .sort((a, b) => b.segment[1] - a.segment[1])
             .sort((a, b) => a.segment[0] - b.segment[0]);
 
         //add them as buttons to the issue reporting container
@@ -687,6 +718,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 : chrome.i18n.getMessage("skipSegment");
             skipButton.addEventListener("click", () => skipSegment(actionType, UUID, skipButton));
             votingButtons.addEventListener("dblclick", () => skipSegment(actionType, UUID));
+            votingButtons.addEventListener("dblclick", () => skipSegment(actionType, UUID));
+            votingButtons.addEventListener("mouseenter", () => selectSegment(UUID));
 
             //add thumbs up, thumbs down and uuid copy buttons to the container
             voteButtonsContainer.appendChild(upvoteButton);
@@ -718,6 +751,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
             container.appendChild(votingButtons);
         }
+
+        container.addEventListener("mouseleave", () => selectSegment(null));
     }
 
     function submitTimes() {
@@ -733,7 +768,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     }
 
     function isCreatingSegment(): boolean {
-        const segments = Config.config.unsubmittedSegments[currentVideoID];
+        const segments = Config.local.unsubmittedSegments[currentVideoID];
         if (!segments) return false;
         const lastSegment = segments[segments.length - 1];
         return lastSegment && lastSegment?.segment?.length !== 2;
@@ -800,7 +835,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         PageElements.setUsernameStatus.style.display = "unset";
         PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading");
 
-        utils.sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) {
+        sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) {
             if (response.status == 200) {
                 //submitted
                 PageElements.submitUsername.style.display = "none";
@@ -944,9 +979,17 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         stopLoadingAnimation = AnimationUtils.applyLoadingAnimation(PageElements.refreshSegmentsButton, 0.3);
     }
 
-    function refreshSegments() {
+    async function refreshSegments() {
         startLoadingAnimation();
-        sendTabMessage({ message: 'refreshSegments' });
+        const response = await sendTabMessageAsync({ message: 'refreshSegments' }) as RefreshSegmentsResponse;
+
+        if (response == null || !response.hasVideo) {
+            if (stopLoadingAnimation != null) {
+                stopLoadingAnimation();
+                stopLoadingAnimation = null;
+            }
+            displayNoVideo();
+        }
     }
 
     function skipSegment(actionType: ActionType, UUID: SegmentUUID, element?: HTMLElement): void {
@@ -968,6 +1011,13 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         }
     }
 
+    function selectSegment(UUID: SegmentUUID | null): void {
+        sendTabMessage({
+            message: "selectSegment",
+            UUID: UUID
+        });
+    }
+
     /**
      * Should skipping be disabled (visuals stay)
      */
@@ -1041,16 +1091,17 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
      */
     function getFormattedHours(minutes) {
         minutes = Math.round(minutes * 10) / 10;
-        const days = Math.floor(minutes / 1440);
+        const years = Math.floor(minutes / 525600); // Assumes 365.0 days in a year
+        const days = Math.floor(minutes / 1440) % 365;
         const hours = Math.floor(minutes / 60) % 24;
-        return (days > 0 ? days + chrome.i18n.getMessage("dayAbbreviation") + " " : "") + (hours > 0 ? hours + chrome.i18n.getMessage("hourAbbreviation") + " " : "") + (minutes % 60).toFixed(1);
+        return (years > 0 ? years + chrome.i18n.getMessage("yearAbbreviation") + " " : "") + (days > 0 ? days + chrome.i18n.getMessage("dayAbbreviation") + " " : "") + (hours > 0 ? hours + chrome.i18n.getMessage("hourAbbreviation") + " " : "") + (minutes % 60).toFixed(1);
     }
 
     function contentConfigUpdateListener(changes: StorageChangesObject) {
         for (const key in changes) {
             switch(key) {
                 case "unsubmittedSegments":
-                    sponsorTimes = Config.config.unsubmittedSegments[currentVideoID] ?? [];
+                    sponsorTimes = Config.local.unsubmittedSegments[currentVideoID] ?? [];
                     updateSegmentEditingUI();
                     break;
             }
@@ -1100,7 +1151,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 break;
             case "videoChanged":
                 currentVideoID = msg.videoID
-                sponsorTimes = Config.config.unsubmittedSegments[currentVideoID] ?? [];
+                sponsorTimes = Config.local.unsubmittedSegments[currentVideoID] ?? [];
                 updateSegmentEditingUI();
 
                 if (msg.whitelisted) {

src/render/CategoryPill.tsx

@@ -5,8 +5,9 @@ import Config from "../config";
 import { VoteResponse } from "../messageTypes";
 import { Category, SegmentUUID, SponsorTime } from "../types";
 import { Tooltip } from "./Tooltip";
-import { waitFor } from "@ajayyy/maze-utils";
-import { getYouTubeTitleNode } from "@ajayyy/maze-utils/lib/elements";
+import { waitFor } from "../../maze-utils/src";
+import { getYouTubeTitleNode } from "../../maze-utils/src/elements";
+import { addCleanupListener } from "../../maze-utils/src/cleanup";
 
 const id = "categoryPill";
 
@@ -24,6 +25,12 @@ export class CategoryPill {
     
     constructor() {
         this.ref = React.createRef();
+
+        addCleanupListener(() => {
+            if (this.mutationObserver) {
+                this.mutationObserver.disconnect();
+            }
+        });
     }
 
     async attachToPage(onMobileYouTube: boolean, onInvidious: boolean,
@@ -36,9 +43,15 @@ export class CategoryPill {
     }
 
     private async attachToPageInternal(): Promise<void> {
-        const referenceNode = 
+        let referenceNode = 
             await waitFor(() => getYouTubeTitleNode());
 
+        // Experimental YouTube layout with description on right
+        const isOnDescriptionOnRightLayout = document.querySelector("#title #description");
+        if (isOnDescriptionOnRightLayout) {
+            referenceNode = referenceNode.parentElement;
+        }
+
         if (referenceNode && !referenceNode.contains(this.container)) {
             if (!this.container) {
                 this.container = document.createElement('span');
@@ -47,7 +60,11 @@ export class CategoryPill {
 
                 this.root = createRoot(this.container);
                 this.ref = React.createRef();
-                this.root.render(<CategoryPillComponent ref={this.ref} vote={this.vote} />);
+                this.root.render(<CategoryPillComponent 
+                        ref={this.ref}
+                        vote={this.vote} 
+                        showTextByDefault={!this.onMobileYouTube}
+                        showTooltipOnClick={this.onMobileYouTube} />);
 
                 if (this.onMobileYouTube) {
                     if (this.mutationObserver) {
@@ -76,10 +93,13 @@ export class CategoryPill {
             // Use a parent because YouTube does weird things to the top level object
             // react would have to rerender if container was the top level
             const parent = document.createElement("span");
+            parent.id = "categoryPillParent";
             parent.appendChild(this.container);
 
             referenceNode.prepend(parent);
-            referenceNode.style.display = "flex";
+            if (!isOnDescriptionOnRightLayout) {
+                referenceNode.style.display = "flex";
+            }
         }
     }
 

src/render/GenericNotice.tsx

@@ -5,8 +5,9 @@ import NoticeComponent from "../components/NoticeComponent";
 import Utils from "../utils";
 const utils = new Utils();
 
-import { ButtonListener, ContentContainer } from "../types";
+import { ContentContainer } from "../types";
 import NoticeTextSelectionComponent from "../components/NoticeTextSectionComponent";
+import { ButtonListener } from "../../maze-utils/src/components/component-types";
 
 export interface TextBox {
     icon: string;
@@ -46,6 +47,7 @@ export default class GenericNotice {
         const referenceNode = options.referenceNode ?? utils.findReferenceNode();
     
         this.noticeElement = document.createElement("div");
+        this.noticeElement.className = "sponsorSkipNoticeContainer";
         this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
         referenceNode.prepend(this.noticeElement);

src/render/RectangleTooltip.tsx

@@ -59,7 +59,7 @@ export class RectangleTooltip {
                     className="sponsorBlockRectangleTooltip" >
                     <div>
                         <img className="sponsorSkipLogo sponsorSkipObject"
-                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                            src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
                         </img>
                         <span className="sponsorSkipObject">
                             {this.text + (props.link ? ". " : "")}

src/render/SkipNotice.tsx

@@ -38,6 +38,7 @@ class SkipNotice {
         idSuffix += amountOfPreviousNotices;
 
         this.noticeElement = document.createElement("div");
+        this.noticeElement.className = "sponsorSkipNoticeContainer";
         this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
         referenceNode.prepend(this.noticeElement);

src/render/SubmissionNotice.tsx

@@ -11,7 +11,7 @@ class SubmissionNotice {
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: () => unknown;
 
-    callback: () => unknown;
+    callback: () => Promise<boolean>;
 
     noticeRef: React.MutableRefObject<SubmissionNoticeComponent>;
 
@@ -19,7 +19,7 @@ class SubmissionNotice {
 
     root: Root;
 
-    constructor(contentContainer: ContentContainer, callback: () => unknown) {
+    constructor(contentContainer: ContentContainer, callback: () => Promise<boolean>) {
         this.noticeRef = React.createRef();
 
         this.contentContainer = contentContainer;
@@ -52,6 +52,14 @@ class SubmissionNotice {
 
         this.noticeElement.remove();
     }
+
+    submit(): void {
+        this.noticeRef.current?.submit?.();
+    }
+
+    scrollToBottom(): void {
+        this.noticeRef.current?.scrollToBottom?.();
+    }
 }
 
 export default SubmissionNotice;

src/render/Tooltip.tsx

@@ -1,129 +1,7 @@
-import * as React from "react";
-import { createRoot, Root } from 'react-dom/client';
-import { ButtonListener } from "../types";
+import { GenericTooltip, TooltipProps } from "../../maze-utils/src/components/Tooltip";
 
-export interface TooltipProps {
-    text?: string; 
-    link?: string;
-    linkOnClick?: () => void;
-    referenceNode: HTMLElement;
-    prependElement?: HTMLElement; // Element to append before
-    bottomOffset?: string;
-    leftOffset?: string;
-    rightOffset?: string;
-    timeout?: number;
-    opacity?: number;
-    displayTriangle?: boolean;
-    extraClass?: string;
-    showLogo?: boolean;
-    showGotIt?: boolean;
-    positionRealtive?: boolean;
-    buttons?: ButtonListener[];
-}
-
-export class Tooltip {
-    text?: string;   
-    container: HTMLDivElement;
-
-    timer: NodeJS.Timeout;
-    root: Root;
-    
+export class Tooltip extends GenericTooltip {
     constructor(props: TooltipProps) {
-        props.bottomOffset ??= "70px";
-        props.leftOffset ??= "inherit";
-        props.rightOffset ??= "inherit";
-        props.opacity ??= 0.7;
-        props.displayTriangle ??= true;
-        props.extraClass ??= "";
-        props.showLogo ??= true;
-        props.showGotIt ??= true;
-        props.positionRealtive ??= true;
-        this.text = props.text;
-
-        this.container = document.createElement('div');
-        this.container.id = "sponsorTooltip" + props.text;
-        if (props.positionRealtive) this.container.style.position = "relative";
-
-        if (props.prependElement) {
-            props.referenceNode.insertBefore(this.container, props.prependElement);
-        } else {
-            props.referenceNode.appendChild(this.container);
-        }
-
-        if (props.timeout) {
-            this.timer = setTimeout(() => this.close(), props.timeout * 1000);
-        }
-
-        const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`;
-
-        this.root = createRoot(this.container);
-        this.root.render(
-            <div style={{bottom: props.bottomOffset, left: props.leftOffset, right: props.rightOffset, backgroundColor}} 
-                className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "") + ` ${props.extraClass}`}>
-                <div>
-                    {props.showLogo ? 
-                        <img className="sponsorSkipLogo sponsorSkipObject"
-                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
-                        </img>
-                    : null}
-                    {this.text ? 
-                        <span className={`sponsorSkipObject${!props.showLogo ? ` sponsorSkipObjectFirst` : ``}`}>
-                            {this.text + (props.link ? ". " : "")}
-                            {props.link ? 
-                                <a style={{textDecoration: "underline"}} 
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        href={props.link}>
-                                    {chrome.i18n.getMessage("LearnMore")}
-                                </a> 
-                            : (props.linkOnClick ? 
-                                <a style={{textDecoration: "underline", marginLeft: "5px", cursor: "pointer"}} 
-                                        onClick={props.linkOnClick}>
-                                    {chrome.i18n.getMessage("LearnMore")}
-                                </a> 
-                            : null)}
-                        </span>
-                    : null}
-
-                    {this.getButtons(props.buttons)}
-                </div>
-                {props.showGotIt ?
-                    <button className="sponsorSkipObject sponsorSkipNoticeButton"
-                        style ={{float: "right" }}
-                        onClick={() => this.close()}>
-
-                        {chrome.i18n.getMessage("GotIt")}
-                    </button>
-                : null}
-            </div>
-        )
-    }
-
-    getButtons(buttons?: ButtonListener[]): JSX.Element[] {
-        if (buttons) {
-            const result: JSX.Element[] = [];
-
-            for (const button of buttons) {
-                result.push(
-                    <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
-                            key={button.name}
-                            onClick={(e) => button.listener(e)}>
-
-                            {button.name}
-                    </button>
-                )
-            }
-
-            return result;
-        } else {
-            return null;
-        }
-    }
-
-    close(): void {
-        this.root.unmount();
-        this.container.remove();
-
-        if (this.timer) clearTimeout(this.timer);
+        super(props, "icons/IconSponsorBlocker256px.png")
     }
 }

src/svg-icons/sb_svg.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+
+export interface SbIconProps {
+  id?: string;
+  fill?: string;
+  className?: string;
+  width?: string;
+  height?: string;
+  onClick?: () => void;
+}
+
+export default function SbSvg({
+  id = "",
+  fill = "#ff0000",
+  className = "",
+  onClick
+}: SbIconProps): JSX.Element {
+  return (
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      viewBox="0 0 565.15 568"
+      id={id}
+      className={className}
+      onClick={() => onClick?.() } >
+      <g
+      id="Layer_2"
+      data-name="Layer 2">
+        <g
+          id="Layer_1-2"
+          data-name="Layer 1"
+          style={{
+            fill
+          }}>
+          <path
+            d="M282.58,568a65,65,0,0,1-34.14-9.66C95.41,463.94,2.54,300.46,0,121A64.91,64.91,0,0,1,34,62.91a522.56,522.56,0,0,1,497.16,0,64.91,64.91,0,0,1,34,58.12c-2.53,179.43-95.4,342.91-248.42,437.3A65,65,0,0,1,282.58,568Zm0-548.31A502.24,502.24,0,0,0,43.4,80.22a45.27,45.27,0,0,0-23.7,40.53c2.44,172.67,91.81,330,239.07,420.83a46.19,46.19,0,0,0,47.61,0C453.64,450.73,543,293.42,545.45,120.75a45.26,45.26,0,0,0-23.7-40.54A502.26,502.26,0,0,0,282.58,19.69Z"
+            id="path8"
+            style={{
+              fill
+            }} />
+          <path
+            style={{
+              fill
+            }}
+            d="M 284.70508 42.693359 A 479.9 479.9 0 0 0 54.369141 100.41992 A 22.53 22.53 0 0 0 42.669922 120.41992 C 45.069922 290.25992 135.67008 438.63977 270.83008 522.00977 A 22.48 22.48 0 0 0 294.32031 522.00977 C 429.48031 438.63977 520.08047 290.25992 522.48047 120.41992 A 22.53 22.53 0 0 0 510.7793 100.41992 A 479.9 479.9 0 0 0 284.70508 42.693359 z M 220.41016 145.74023 L 411.2793 255.93945 L 220.41016 366.14062 L 220.41016 145.74023 z "
+            id="path10" />
+        </g>
+      </g>
+      <polygon style={{
+          fill: "#fff"
+        }}
+        points="411.28 255.94 220.41 145.74 220.41 366.14 411.28 255.94"
+      />
+    </svg>
+  );
+}

src/types.ts

@@ -99,8 +99,8 @@ export interface Registration {
     message: string;
     id: string;
     allFrames: boolean;
-    js: browser.extensionTypes.ExtensionFileOrCode[];
-    css: browser.extensionTypes.ExtensionFileOrCode[];
+    js: string[];
+    css: string[];
     matches: string[];
 }
 
@@ -220,9 +220,4 @@ export enum NoticeVisbilityMode {
     MiniForAll = 2,
     FadedForAutoSkip = 3,
     FadedForAll = 4
-}
-
-export interface ButtonListener {
-    name: string;
-    listener: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }

src/utils.ts

@@ -1,12 +1,10 @@
 import Config, { VideoDownvotes } from "./config";
 import { CategorySelection, SponsorTime, BackgroundScriptContainer, Registration, VideoID, SponsorHideType, CategorySkipOption } from "./types";
 
-import { getHash, HashedValue } from "@ajayyy/maze-utils/lib/hash";
-import * as CompileConfig from "../config.json";
-import { isFirefoxOrSafari, waitFor } from "@ajayyy/maze-utils";
-import { findValidElementFromSelector } from "@ajayyy/maze-utils/lib/dom";
-import { FetchResponse, sendRequestToCustomServer } from "@ajayyy/maze-utils/lib/background-request-proxy"
-import { isSafari } from "@ajayyy/maze-utils/lib/config";
+import { getHash, HashedValue } from "../maze-utils/src/hash";
+import { isFirefoxOrSafari, waitFor } from "../maze-utils/src";
+import { findValidElementFromSelector } from "../maze-utils/src/dom";
+import { isSafari } from "../maze-utils/src/config";
 
 export default class Utils {
     
@@ -47,9 +45,13 @@ export default class Utils {
      * @param {CallableFunction} callback
      */
     setupExtraSitePermissions(callback: (granted: boolean) => void): void {
-        let permissions = ["webNavigation"];
-        if (!isSafari()) permissions.push("declarativeContent");
-        if (isFirefoxOrSafari() && !isSafari()) permissions = [];
+        const permissions = [];
+        if (!isFirefoxOrSafari()) {
+            permissions.push("declarativeContent");
+        }
+        if (!isFirefoxOrSafari() || isSafari()) {
+            permissions.push("webNavigation");
+        }
 
         chrome.permissions.request({
             origins: this.getPermissionRegex(),
@@ -73,21 +75,12 @@ export default class Utils {
      * For now, it is just SB.config.invidiousInstances.
      */
     setupExtraSiteContentScripts(): void {
-        const firefoxJS = [];
-        for (const file of this.js) {
-            firefoxJS.push({file});
-        }
-        const firefoxCSS = [];
-        for (const file of this.css) {
-            firefoxCSS.push({file});
-        }
-
         const registration: Registration = {
             message: "registerContentScript",
             id: "invidious",
             allFrames: true,
-            js: firefoxJS,
-            css: firefoxCSS,
+            js: this.js,
+            css: this.css,
             matches: this.getPermissionRegex()
         };
 
@@ -245,50 +238,6 @@ export default class Utils {
         return permissionRegex;
     }
 
-    /**
-     * Sends a request to a custom server
-     * 
-     * @param type The request type. "GET", "POST", etc.
-     * @param address The address to add to the SponsorBlock server address
-     * @param callback 
-     */    
-    asyncRequestToCustomServer(type: string, url: string, data = {}): Promise<FetchResponse> {
-        return sendRequestToCustomServer(type, url, data);
-    }
-
-    /**
-     * Sends a request to the SponsorBlock server with address added as a query
-     * 
-     * @param type The request type. "GET", "POST", etc.
-     * @param address The address to add to the SponsorBlock server address
-     * @param callback 
-     */    
-    async asyncRequestToServer(type: string, address: string, data = {}): Promise<FetchResponse> {
-        const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
-
-        return await (this.asyncRequestToCustomServer(type, serverAddress + address, data));
-    }
-
-    /**
-     * Sends a request to the SponsorBlock server with address added as a query
-     * 
-     * @param type The request type. "GET", "POST", etc.
-     * @param address The address to add to the SponsorBlock server address
-     * @param callback 
-     */
-    sendRequestToServer(type: string, address: string, callback?: (response: FetchResponse) => void): void {
-        const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
-
-        // Ask the background script to do the work
-        chrome.runtime.sendMessage({
-            message: "sendRequest",
-            type,
-            url: serverAddress + address
-        }, (response) => {
-            callback(response);
-        });
-    }
-
     findReferenceNode(): HTMLElement {
         const selectors = [
             "#player-container-id", // Mobile YouTube
@@ -299,7 +248,8 @@ export default class Utils {
             "#main-panel.ytmusic-player-page", // YouTube music
             "#player-container .video-js", // Invidious
             ".main-video-section > .video-container", // Cloudtube
-            ".shaka-video-container" // Piped
+            ".shaka-video-container", // Piped
+            "#player-container.ytk-player", // YT Kids
         ];
 
         let referenceNode = findValidElementFromSelector(selectors)
@@ -331,7 +281,8 @@ export default class Utils {
     }
 
     async addHiddenSegment(videoID: VideoID, segmentUUID: string, hidden: SponsorHideType) {
-        if (chrome.extension.inIncognitoContext || !Config.config.trackDownvotes) return;
+        if ((chrome.extension.inIncognitoContext && !Config.config.trackDownvotesInPrivate)
+                || !Config.config.trackDownvotes) return;
 
         const hashedVideoID = (await getHash(videoID, 1)).slice(0, 4) as VideoID & HashedValue;
         const UUIDHash = await getHash(segmentUUID, 1);

src/utils/animationUtils.ts

@@ -1,78 +0,0 @@
- /**
- * Starts a spinning animation and returns a function to be called when it should be stopped
- * The callback will be called when the animation is finished 
- * It waits until a full rotation is complete
- */
-function applyLoadingAnimation(element: HTMLElement, time: number, callback?: () => void): () => Promise<void> {
-    element.style.animation = `rotate ${time}s 0s infinite`;
-
-    return async () => new Promise((resolve) => {
-        // Make the animation finite
-        element.style.animation = `rotate ${time}s`;
-
-        // When the animation is over, hide the button
-        const animationEndListener = () => {
-            if (callback) callback();
-
-            element.style.animation = "none";
-
-            element.removeEventListener("animationend", animationEndListener);
-
-            resolve();
-        };
-
-        element.addEventListener("animationend", animationEndListener);
-    });
-}
-
-function setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void; show: () => void } {
-    if (enabled) element.classList.add("autoHiding");
-    element.classList.add("hidden");
-    element.classList.add("animationDone");
-    if (!rightSlide) element.classList.add("autoHideLeft");
-
-    let mouseEntered = false;
-
-    return {
-        hide: () => {
-            mouseEntered = false;
-            if (element.classList.contains("autoHiding")) {
-                element.classList.add("hidden");
-            }
-        },
-        show: () => {
-            mouseEntered = true;
-            element.classList.remove("animationDone");
-
-            // Wait for next event loop
-            setTimeout(() => {
-                if (mouseEntered) element.classList.remove("hidden")
-            }, 10);
-        }
-    };
-}
-
-function setupAutoHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): void {
-    const { hide, show } = this.setupCustomHideAnimation(element, container, enabled, rightSlide);
-
-    container.addEventListener("mouseleave", () => hide());
-    container.addEventListener("mouseenter", () => show());
-}
-
-function enableAutoHideAnimation(element: Element): void {
-    element.classList.add("autoHiding");
-    element.classList.add("hidden");
-}
-
-function disableAutoHideAnimation(element: Element): void {
-    element.classList.remove("autoHiding");
-    element.classList.remove("hidden");
-}
-
-export const AnimationUtils = {
-    applyLoadingAnimation,
-    setupAutoHideAnimation,
-    setupCustomHideAnimation,
-    enableAutoHideAnimation,
-    disableAutoHideAnimation
-};

src/utils/compatibility.ts

@@ -0,0 +1,15 @@
+import Config from "../config";
+
+export function runCompatibilityChecks() {
+    if (Config.config.showZoomToFillError2 && document.URL.includes("watch?v=")) {
+        setTimeout(() => {
+            const zoomToFill = document.querySelector(".zoomtofillBtn");
+    
+            if (zoomToFill) {
+                alert(chrome.i18n.getMessage("zoomToFillUnsupported"));
+            }
+
+            Config.config.showZoomToFillError2 = false;
+        }, 10000);
+    }
+}

src/utils/constants.ts

@@ -157,4 +157,6 @@ export function getGuidelineInfo(category: Category): TextBox[] {
                 text: chrome.i18n.getMessage(`generic_guideline2`)
             }];
     }
-}
+}
+
+export const defaultPreviewTime = 2;

src/utils/crossExtension.ts

@@ -0,0 +1,44 @@
+import * as CompileConfig from "../../config.json";
+
+import Config from "../config";
+import { isSafari } from "../../maze-utils/src/config";
+import { isFirefoxOrSafari } from "../../maze-utils/src";
+
+export function isDeArrowInstalled(): Promise<boolean> {
+    if (Config.config.deArrowInstalled) {
+        return Promise.resolve(true);
+    } else {
+        return new Promise((resolve) => {
+            const extensionIds = getExtensionIdsToImportFrom();
+
+            let count = 0;
+            for (const id of extensionIds) {
+                chrome.runtime.sendMessage(id, { message: "isInstalled" }, (response) => {
+                    if (chrome.runtime.lastError) {
+                        count++;
+
+                        if (count === extensionIds.length) {
+                            resolve(false);
+                        }
+                        return;
+                    }
+
+                    resolve(response);
+                    if (response) {
+                        Config.config.deArrowInstalled = true;
+                    }
+                });
+            }
+        });
+    }
+}
+
+export function getExtensionIdsToImportFrom(): string[] {
+    if (isSafari()) {
+        return CompileConfig.extensionImportList.safari;
+    } else if (isFirefoxOrSafari()) {
+        return CompileConfig.extensionImportList.firefox;
+    } else {
+        return CompileConfig.extensionImportList.chromium;
+    }
+}

src/utils/exporter.ts

@@ -1,8 +1,8 @@
 import { ActionType, Category, SegmentUUID, SponsorSourceType, SponsorTime } from "../types";
 import { shortCategoryName } from "./categoryUtils";
 import * as CompileConfig from "../../config.json";
-import { getFormattedTime, getFormattedTimeToSeconds } from "@ajayyy/maze-utils/lib/formating";
-import { generateUserID } from "@ajayyy/maze-utils/lib/setup";
+import { getFormattedTime, getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
+import { generateUserID } from "../../maze-utils/src/setup";
 
 const inTest = typeof chrome === "undefined";
 
@@ -53,24 +53,23 @@ export function importTimes(data: string, videoDuration: number): SponsorTime[]
                 titleRight = removeIf(split2[split2.length - 1], specialCharMatchers)
 
                 const title = titleLeft?.length > titleRight?.length ? titleLeft : titleRight;
-                if (title) {
-                    const determinedCategory = chapterNames.find(c => c.names.includes(title))?.code as Category;
+                const determinedCategory = chapterNames.find(c => c.names.includes(title))?.code as Category;
 
-                    const segment: SponsorTime = {
-                        segment: [startTime, getFormattedTimeToSeconds(match[1])],
-                        category: determinedCategory ?? ("chapter" as Category),
-                        actionType: determinedCategory ? ActionType.Skip : ActionType.Chapter,
-                        description: title,
-                        source: SponsorSourceType.Local,
-                        UUID: generateUserID() as SegmentUUID
-                    };
+                const category = title ? (determinedCategory ?? ("chapter" as Category)) : "chooseACategory" as Category;
+                const segment: SponsorTime = {
+                    segment: [startTime, getFormattedTimeToSeconds(match[1])],
+                    category,
+                    actionType: category === "chapter" ? ActionType.Chapter : ActionType.Skip,
+                    description: category === "chapter" ? title : null,
+                    source: SponsorSourceType.Local,
+                    UUID: generateUserID() as SegmentUUID
+                };
 
-                    if (result.length > 0 && result[result.length - 1].segment[1] === null) {
-                        result[result.length - 1].segment[1] = segment.segment[0];
-                    }
-
-                    result.push(segment);
+                if (result.length > 0 && result[result.length - 1].segment[1] === null) {
+                    result[result.length - 1].segment[1] = segment.segment[0];
                 }
+
+                result.push(segment);
             }
         }
     }
@@ -106,5 +105,5 @@ export function exportTimesAsHashParam(segments: SponsorTime[]): string {
 
 
 export function normalizeChapterName(description: string): string {
-    return description.toLowerCase().replace(/\.|:|-/g, "").replace(/\s+/g, " ");
+    return description.toLowerCase().replace(/[.:'’`‛‘"‟”-]/ug, "").replace(/\s+/g, " ");
 }

src/utils/genericUtils.ts

@@ -4,20 +4,17 @@ function getLuminance(color: string): number {
     return Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
 }
 
-/* From https://stackoverflow.com/a/5624139 */
-function hexToRgb(hex: string): {r: number; g: number; b: number} {
-    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
-      return r + r + g + g + b + b;
-    });
-  
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-      r: parseInt(result[1], 16),
-      g: parseInt(result[2], 16),
-      b: parseInt(result[3], 16)
-    } : null;
+/* Converts hex color to rgb color */
+const hexChars = "0123456789abcdef";
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  if (hex.length == 4)
+    hex = "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+  return /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    ? {
+        r: hexChars.indexOf(hex[1]) * 16 + hexChars.indexOf(hex[2]),
+        g: hexChars.indexOf(hex[3]) * 16 + hexChars.indexOf(hex[4]),
+        b: hexChars.indexOf(hex[5]) * 16 + hexChars.indexOf(hex[6]),
+  }: null;
 }
 
 /**
@@ -31,4 +28,4 @@ function indexesOf<T>(array: T[], value: T): number[] {
 export const GenericUtils = {
     getLuminance,
     indexesOf
-}
+}

src/utils/mobileUtils.ts

@@ -0,0 +1,9 @@
+export function isMobileControlsOpen(): boolean {
+    const overlay = document.getElementById("player-control-overlay");
+
+    if (overlay) {
+        return !!overlay?.classList?.contains("fadein");
+    }
+
+    return false;
+}

src/utils/pageCleaner.ts

@@ -0,0 +1,8 @@
+export function cleanPage() {
+    // For live-updates
+    if (document.readyState === "complete") {
+        for (const element of document.querySelectorAll("#categoryPillParent, .playerButton, .sponsorThumbnailLabel, #submissionNoticeContainer, .sponsorSkipNoticeContainer, #sponsorBlockPopupContainer, .skipButtonControlBarContainer, #previewbar, .sponsorBlockChapterBar")) {
+            element.remove();
+        }
+    }
+}

src/utils/pageUtils.ts

@@ -1,5 +1,5 @@
 import { ActionType, Category, SponsorSourceType, SponsorTime, VideoID } from "../types";
-import { getFormattedTimeToSeconds } from "@ajayyy/maze-utils/lib/formating";
+import { getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
 
 export function getControls(): HTMLElement {
     const controlsSelectors = [
@@ -93,4 +93,8 @@ export function getExistingChapters(currentVideoID: VideoID, duration: number):
     }
 
     return chapters;
+}
+
+export function isPlayingPlaylist() {
+    return !!document.URL.includes("&list=");
 }

src/utils/requests.ts

@@ -0,0 +1,47 @@
+import Config from "../config";
+import * as CompileConfig from "../../config.json";
+import { FetchResponse, sendRequestToCustomServer } from "../../maze-utils/src/background-request-proxy";
+
+/**
+ * Sends a request to a custom server
+ * 
+ * @param type The request type. "GET", "POST", etc.
+ * @param address The address to add to the SponsorBlock server address
+ * @param callback 
+ */    
+export function asyncRequestToCustomServer(type: string, url: string, data = {}): Promise<FetchResponse> {
+    return sendRequestToCustomServer(type, url, data);
+}
+
+/**
+ * Sends a request to the SponsorBlock server with address added as a query
+ * 
+ * @param type The request type. "GET", "POST", etc.
+ * @param address The address to add to the SponsorBlock server address
+ * @param callback 
+ */    
+export async function asyncRequestToServer(type: string, address: string, data = {}): Promise<FetchResponse> {
+    const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
+
+    return await (asyncRequestToCustomServer(type, serverAddress + address, data));
+}
+
+/**
+ * Sends a request to the SponsorBlock server with address added as a query
+ * 
+ * @param type The request type. "GET", "POST", etc.
+ * @param address The address to add to the SponsorBlock server address
+ * @param callback 
+ */
+export function sendRequestToServer(type: string, address: string, callback?: (response: FetchResponse) => void): void {
+    const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
+
+    // Ask the background script to do the work
+    chrome.runtime.sendMessage({
+        message: "sendRequest",
+        type,
+        url: serverAddress + address
+    }, (response) => {
+        callback(response);
+    });
+}

src/utils/thumbnails.ts

@@ -1,7 +1,7 @@
-import { isOnInvidious, parseYouTubeVideoIDFromURL } from "@ajayyy/maze-utils/lib/video";
+import { isOnInvidious, parseYouTubeVideoIDFromURL } from "../../maze-utils/src/video";
 import Config from "../config";
 import { getVideoLabel } from "./videoLabels";
-import { setThumbnailListener } from "@ajayyy/maze-utils/lib/thumbnailManagement";
+import { setThumbnailListener } from "../../maze-utils/src/thumbnailManagement";
 
 export async function labelThumbnails(thumbnails: HTMLImageElement[]): Promise<void> {
     await Promise.all(thumbnails.map((t) => labelThumbnail(t)));

src/utils/videoLabels.ts

@@ -1,7 +1,8 @@
 import { Category, CategorySkipOption, VideoID } from "../types";
-import { getHash } from "@ajayyy/maze-utils/lib/hash";
+import { getHash } from "../../maze-utils/src/hash";
 import Utils from "../utils";
 import { logWarn } from "./logger";
+import { asyncRequestToServer } from "./requests";
 
 const utils = new Utils();
 
@@ -20,7 +21,7 @@ async function getLabelHashBlock(hashPrefix: string): Promise<LabelCacheEntry |
         return cachedEntry;
     }
 
-    const response = await utils.asyncRequestToServer("GET", `/api/videoLabels/${hashPrefix}`);
+    const response = await asyncRequestToServer("GET", `/api/videoLabels/${hashPrefix}`);
     if (response.status !== 200) {
         // No video labels or server down
         labelCache[hashPrefix] = {

src/utils/warnings.ts

@@ -1,10 +1,9 @@
-import { objectToURI } from "@ajayyy/maze-utils";
-import { getHash } from "@ajayyy/maze-utils/lib/hash";
+import { objectToURI } from "../../maze-utils/src";
+import { getHash } from "../../maze-utils/src/hash";
 import Config from "../config";
 import GenericNotice, { NoticeOptions } from "../render/GenericNotice";
 import { ContentContainer } from "../types";
-import Utils from "../utils";
-const utils = new Utils();
+import { asyncRequestToServer } from "./requests";
 
 export interface ChatConfig {
     displayName: string;
@@ -13,20 +12,20 @@ export interface ChatConfig {
 }
 
 export async function openWarningDialog(contentContainer: ContentContainer): Promise<void> {
-    const userInfo = await utils.asyncRequestToServer("GET", "/api/userInfo", {
+    const userInfo = await asyncRequestToServer("GET", "/api/userInfo", {
         publicUserID: await getHash(Config.config.userID),
         values: ["warningReason"]
     });
 
     if (userInfo.ok) {
         const warningReason = JSON.parse(userInfo.responseText)?.warningReason;
-        const userNameData = await utils.asyncRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID);
+        const userNameData = await asyncRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID);
         const userName = userNameData.ok ? JSON.parse(userNameData.responseText).userName : "";
         const publicUserID = await getHash(Config.config.userID);
 
         let notice: GenericNotice = null;
         const options: NoticeOptions = {
-            title: chrome.i18n.getMessage("warningTitle"),
+            title: chrome.i18n.getMessage("deArrowMessageRecieved"),
             textBoxes: [{
                 text: chrome.i18n.getMessage("warningChatInfo"),
                 icon: null
@@ -43,7 +42,7 @@ export async function openWarningDialog(contentContainer: ContentContainer): Pro
                 {
                     name: chrome.i18n.getMessage("warningConfirmButton"),
                     listener: async () => {
-                        const result = await utils.asyncRequestToServer("POST", "/api/warnUser", {
+                        const result = await asyncRequestToServer("POST", "/api/warnUser", {
                             userID: Config.config.userID,
                             enabled: false
                         });

tsconfig-production.json

@@ -16,5 +16,8 @@
             "dom",
             "dom.iterable"
         ]
-    }
+    },
+    "include": [
+        "src/**/*"
+    ]
 }

tsconfig.json

@@ -16,5 +16,8 @@
             "dom",
             "dom.iterable"
         ]
-    }
+    },
+    "include": [
+        "src/**/*"
+    ]
 }

webpack/webpack.common.js

@@ -123,7 +123,8 @@ module.exports = env => {
             ]
         },
         resolve: {
-            extensions: ['.ts', '.tsx', '.js']
+            extensions: ['.ts', '.tsx', '.js'],
+            symlinks: false
         },
         plugins: [
             // Prehook to start building document script before normal build
@@ -159,7 +160,7 @@ module.exports = env => {
                             if (path.match(/(\/|\\)_locales(\/|\\).+/)) {
                                 const parsed = JSON.parse(content.toString());
                                 if (env.browser.toLowerCase() === "safari") {
-                                    parsed.fullName.message = parsed.fullName.message.match(/^.+(?= -)/)?.[0] || parsed.fullName.message;
+                                    parsed.fullName.message = parsed.fullName.message.match(/^.+(?= [-–])/)?.[0] || parsed.fullName.message;
                                     if (parsed.fullName.message.length > 50) {
                                         parsed.fullName.message = parsed.fullName.message.slice(0, 47) + "...";
                                     }