Merge branch 'master' of https://github.com/ajayyy/SponsorBlock

33 files changed, 410 insertions, 416 deletions

diff --git a/.eslintrc.json b/.eslintrc.json
index 9744cc74..4310d618 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -23,7 +23,8 @@
         "@typescript-eslint/no-unused-vars": "error",
         "no-self-assign": "off",
         "@typescript-eslint/no-empty-interface": "off",
-        "react/prop-types": [2, { "ignore": ["children"] }]
+        "react/prop-types": [2, { "ignore": ["children"] }],
+        "@typescript-eslint/member-delimiter-style": "warn"
     },
     "settings": {
         "react": {
diff --git a/oss-attribution/licenseInfos.json b/oss-attribution/licenseInfos.json
index 80dc7c2f..72f18799 100644
--- a/oss-attribution/licenseInfos.json
+++ b/oss-attribution/licenseInfos.json
@@ -1 +1 @@
-{"js-tokens":{"ignore":false,"name":"js-tokens","version":"4.0.0","authors":"Simon Lydell","url":"https://github.com/lydell/js-tokens","license":"MIT","licenseText":"The MIT License (MIT)\n\nCopyright (c) 2014, 2015, 2016, 2017, 2018 Simon Lydell\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"},"loose-envify":{"ignore":false,"name":"loose-envify","version":"1.4.0","authors":"Andres Suarez <[email protected]>","url":"https://github.com/zertosh/loose-envify","license":"MIT","licenseText":"The MIT License (MIT)\n\nCopyright (c) 2015 Andres Suarez <[email protected]>\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"},"object-assign":{"ignore":false,"name":"object-assign","version":"4.1.1","authors":"Sindre Sorhus <[email protected]>","url":"https://github.com/sindresorhus/object-assign","license":"MIT","licenseText":"The MIT License (MIT)\n\nCopyright (c) Sindre Sorhus <[email protected]> (sindresorhus.com)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"},"react-dom":{"ignore":false,"name":"react-dom","version":"17.0.2","url":"https://github.com/facebook/react","license":"MIT","licenseText":"MIT License\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"},"react":{"ignore":false,"name":"react","version":"17.0.2","url":"https://github.com/facebook/react","license":"MIT","licenseText":"MIT License\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"},"scheduler":{"ignore":false,"name":"scheduler","version":"0.20.2","url":"https://github.com/facebook/react","license":"MIT","licenseText":"MIT License\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"}}
\ No newline at end of file
+{"js-tokens":{"ignore":false,"name":"js-tokens","version":"4.0.0","authors":"Simon Lydell","url":"https://github.com/lydell/js-tokens","license":"MIT","licenseText":"The MIT License (MIT)\n\nCopyright (c) 2014, 2015, 2016, 2017, 2018 Simon Lydell\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"},"loose-envify":{"ignore":false,"name":"loose-envify","version":"1.4.0","authors":"Andres Suarez <[email protected]>","url":"https://github.com/zertosh/loose-envify","license":"MIT","licenseText":"The MIT License (MIT)\n\nCopyright (c) 2015 Andres Suarez <[email protected]>\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"},"react-dom":{"ignore":false,"name":"react-dom","version":"18.2.0","url":"https://github.com/facebook/react","license":"MIT","licenseText":"MIT License\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"},"react":{"ignore":false,"name":"react","version":"18.2.0","url":"https://github.com/facebook/react","license":"MIT","licenseText":"MIT License\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"},"scheduler":{"ignore":false,"name":"scheduler","version":"0.23.0","url":"https://github.com/facebook/react","license":"MIT","licenseText":"MIT License\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"}}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 16f6fdad..c92982f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,15 +27,15 @@
       ],
       "license": "LGPL-3.0-or-later",
       "dependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
       },
       "devDependencies": {
         "@types/chrome": "^0.0.197",
         "@types/firefox-webext-browser": "^94.0.1",
         "@types/jest": "^29.1.2",
-        "@types/react": "^17.0.47",
-        "@types/react-dom": "^17.0.17",
+        "@types/react": "^18.0.21",
+        "@types/react-dom": "^18.0.6",
         "@types/selenium-webdriver": "^4.1.5",
         "@types/wicg-mediasession": "^1.1.4",
         "@typescript-eslint/eslint-plugin": "^5.39.0",
@@ -1942,9 +1942,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "17.0.47",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz",
-      "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==",
+      "version": "18.0.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1953,12 +1953,12 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "17.0.17",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz",
-      "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==",
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
       "dev": true,
       "dependencies": {
-        "@types/react": "^17"
+        "@types/react": "*"
       }
     },
     "node_modules/@types/responselike": {
@@ -10299,6 +10299,7 @@
     "node_modules/object-assign": {
       "version": "4.1.1",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11071,26 +11072,26 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.2.0"
       }
     },
     "node_modules/react-is": {
@@ -11471,11 +11472,11 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/schema-utils": {
@@ -15065,9 +15066,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "17.0.47",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz",
-      "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==",
+      "version": "18.0.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz",
+      "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
@@ -15076,12 +15077,12 @@
       }
     },
     "@types/react-dom": {
-      "version": "17.0.17",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz",
-      "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==",
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
+      "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==",
       "dev": true,
       "requires": {
-        "@types/react": "^17"
+        "@types/react": "*"
       }
     },
     "@types/responselike": {
@@ -21217,7 +21218,8 @@
     },
     "object-assign": {
       "version": "4.1.1",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
     },
     "object-inspect": {
       "version": "1.12.0",
@@ -21792,20 +21794,20 @@
       }
     },
     "react": {
-      "version": "17.0.2",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "react-dom": {
-      "version": "17.0.2",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
       }
     },
     "react-is": {
@@ -22099,11 +22101,11 @@
       }
     },
     "scheduler": {
-      "version": "0.20.2",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "schema-utils": {
diff --git a/package.json b/package.json
index 2fc6ec2a..fc1a14f9 100644
--- a/package.json
+++ b/package.json
@@ -4,15 +4,15 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.197",
     "@types/firefox-webext-browser": "^94.0.1",
     "@types/jest": "^29.1.2",
-    "@types/react": "^17.0.47",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
     "@types/selenium-webdriver": "^4.1.5",
     "@types/wicg-mediasession": "^1.1.4",
     "@typescript-eslint/eslint-plugin": "^5.39.0",
diff --git a/public/oss-attribution/attribution.txt b/public/oss-attribution/attribution.txt
index 2c928295..4f0f164b 100644
--- a/public/oss-attribution/attribution.txt
+++ b/public/oss-attribution/attribution.txt
@@ -52,35 +52,8 @@ THE SOFTWARE.
 
 ******************************
 
-object-assign
-4.1.1 <https://github.com/sindresorhus/object-assign>
-The MIT License (MIT)
-
-Copyright (c) Sindre Sorhus <[email protected]> (sindresorhus.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-
-******************************
-
 react
-17.0.2 <https://github.com/facebook/react>
+18.2.0 <https://github.com/facebook/react>
 MIT License
 
 Copyright (c) Facebook, Inc. and its affiliates.
@@ -107,7 +80,7 @@ SOFTWARE.
 ******************************
 
 react-dom
-17.0.2 <https://github.com/facebook/react>
+18.2.0 <https://github.com/facebook/react>
 MIT License
 
 Copyright (c) Facebook, Inc. and its affiliates.
@@ -134,7 +107,7 @@ SOFTWARE.
 ******************************
 
 scheduler
-0.20.2 <https://github.com/facebook/react>
+0.23.0 <https://github.com/facebook/react>
 MIT License
 
 Copyright (c) Facebook, Inc. and its affiliates.
diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx
index ec8139fa..3202c6ac 100644
--- a/src/components/NoticeComponent.tsx
+++ b/src/components/NoticeComponent.tsx
@@ -8,41 +8,42 @@ enum CountdownMode {
 }
 
 export interface NoticeProps {
-    noticeTitle: string,
-
-    maxCountdownTime?: () => number,
-    dontPauseCountdown?: boolean,
-    amountOfPreviousNotices?: number,
-    showInSecondSlot?: boolean,
-    timed?: boolean,
-    idSuffix?: string,
-
-    fadeIn?: boolean,
-    startFaded?: boolean,
-    firstColumn?: React.ReactElement[] | React.ReactElement,
-    firstRow?: React.ReactElement,
-    bottomRow?: React.ReactElement[],
-
-    smaller?: boolean,
-    limitWidth?: boolean,
-    extraClass?: string,
-    hideLogo?: boolean,
-    hideRightInfo?: boolean,
+    noticeTitle: string;
+
+    maxCountdownTime?: () => number;
+    dontPauseCountdown?: boolean;
+    amountOfPreviousNotices?: number;
+    showInSecondSlot?: boolean;
+    timed?: boolean;
+    idSuffix?: string;
+
+    fadeIn?: boolean;
+    startFaded?: boolean;
+    firstColumn?: React.ReactElement[] | React.ReactElement;
+    firstRow?: React.ReactElement;
+    bottomRow?: React.ReactElement[];
+
+    smaller?: boolean;
+    limitWidth?: boolean;
+    extraClass?: string;
+    hideLogo?: boolean;
+    hideRightInfo?: boolean;
 
     // Callback for when this is closed
-    closeListener: () => void,
-    onMouseEnter?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void,
+    closeListener: () => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 
-    zIndex?: number,
-    style?: React.CSSProperties
+    zIndex?: number;
+    style?: React.CSSProperties;
     biggerCloseButton?: boolean;
+    children?: React.ReactNode;
 }
 
 export interface NoticeState {
-    maxCountdownTime: () => number,
+    maxCountdownTime: () => number;
 
-    countdownTime: number,
-    countdownMode: CountdownMode,
+    countdownTime: number;
+    countdownMode: CountdownMode;
 
     mouseHovering: boolean;
 
diff --git a/src/components/NoticeTextSectionComponent.tsx b/src/components/NoticeTextSectionComponent.tsx
index 122d0fde..04262289 100644
--- a/src/components/NoticeTextSectionComponent.tsx
+++ b/src/components/NoticeTextSectionComponent.tsx
@@ -1,10 +1,11 @@
 import * as React from "react";
 
 export interface NoticeTextSelectionProps {
-    icon?: string,
-    text: string,
-    idSuffix: string,
-    onClick?: (event: React.MouseEvent) => unknown
+    icon?: string;
+    text: string;
+    idSuffix: string;
+    onClick?: (event: React.MouseEvent) => unknown;
+    children?: React.ReactNode;
 }
 
 export interface NoticeTextSelectionState {
diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 9519c1f8..7446c9ca 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -14,15 +14,16 @@ import { DEFAULT_CATEGORY } from "../utils/categoryUtils";
 const utils = new Utils();
 
 export interface SponsorTimeEditProps {
-    index: number,
+    index: number;
 
-    idSuffix: string,
+    idSuffix: string;
     // Contains functions and variables from the content script needed by the skip notice
-    contentContainer: ContentContainer,
+    contentContainer: ContentContainer;
 
     submissionNotice: SubmissionNoticeComponent;
     categoryList?: Category[];
     categoryChangeListener?: (index: number, category: Category) => void;
+    children?: React.ReactNode;
 }
 
 export interface SponsorTimeEditState {
diff --git a/src/components/SubmissionNoticeComponent.tsx b/src/components/SubmissionNoticeComponent.tsx
index 471ab8e3..e81c2bdf 100644
--- a/src/components/SubmissionNoticeComponent.tsx
+++ b/src/components/SubmissionNoticeComponent.tsx
@@ -20,8 +20,8 @@ export interface SubmissionNoticeProps {
 }
 
 export interface SubmissionNoticeState {
-    noticeTitle: string,
-    messages: string[],
+    noticeTitle: string;
+    messages: string[];
     idSuffix: string;
 }
 
diff --git a/src/components/options/CategorySkipOptionsComponent.tsx b/src/components/options/CategorySkipOptionsComponent.tsx
index a7aa55d9..486a43ed 100644
--- a/src/components/options/CategorySkipOptionsComponent.tsx
+++ b/src/components/options/CategorySkipOptionsComponent.tsx
@@ -13,6 +13,7 @@ export interface CategorySkipOptionsProps {
     category: Category;
     defaultColor?: string;
     defaultPreviewColor?: string;
+    children?: React.ReactNode;
 }
 
 export interface CategorySkipOptionsState {
diff --git a/src/components/options/KeybindComponent.tsx b/src/components/options/KeybindComponent.tsx
index 34345301..4d49c7f4 100644
--- a/src/components/options/KeybindComponent.tsx
+++ b/src/components/options/KeybindComponent.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import Config from "../../config";
 import { Keybind } from "../../types";
 import KeybindDialogComponent from "./KeybindDialogComponent";
@@ -14,6 +14,7 @@ export interface KeybindState {
 }
 
 let dialog;
+let root: Root;
 
 class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
     constructor(props: KeybindProps) {
@@ -56,11 +57,12 @@ class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
         dialog = parent.document.createElement("div");
         dialog.id = "keybind-dialog";
         parent.document.body.prepend(dialog);
-        ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog);
+        root = createRoot(dialog);
+        root.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />);
     }
 
     closeEditDialog(updateWith: Keybind): void {
-        ReactDOM.unmountComponentAtNode(dialog);
+        root.unmount();
         dialog.remove();
         if (updateWith != null)
             this.setState({keybind: updateWith});
diff --git a/src/components/options/UnsubmittedVideoListItem.tsx b/src/components/options/UnsubmittedVideoListItem.tsx
index d670461d..b2150457 100644
--- a/src/components/options/UnsubmittedVideoListItem.tsx
+++ b/src/components/options/UnsubmittedVideoListItem.tsx
@@ -5,6 +5,7 @@ import { exportTimes, exportTimesAsHashParam } from "../../utils/exporter";
 
 export interface UnsubmittedVideosListItemProps {
     videoID: string;
+    children?: React.ReactNode;
 }
 
 export interface UnsubmittedVideosListItemState {
diff --git a/src/components/options/UnsubmittedVideosComponent.tsx b/src/components/options/UnsubmittedVideosComponent.tsx
index 892c49be..3806b881 100644
--- a/src/components/options/UnsubmittedVideosComponent.tsx
+++ b/src/components/options/UnsubmittedVideosComponent.tsx
@@ -7,7 +7,7 @@ export interface UnsubmittedVideosProps {
 }
 
 export interface UnsubmittedVideosState {
-    tableVisible: boolean,
+    tableVisible: boolean;
 }
 
 class UnsubmittedVideosComponent extends React.Component<UnsubmittedVideosProps, UnsubmittedVideosState> {
diff --git a/src/config.ts b/src/config.ts
index 3913c656..f23c60b5 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -8,122 +8,122 @@ export interface Permission {
 }
 
 interface SBConfig {
-    userID: string,
-    isVip: boolean,
-    permissions: Record<Category, Permission>,
+    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[],
-    forceChannelCheck: boolean,
-    minutesSaved: number,
-    skipCount: number,
-    sponsorTimesContributed: number,
-    submissionCountSinceCategories: number, // New count used to show the "Read The Guidelines!!" message
-    showTimeWithSkips: boolean,
-    disableSkipping: boolean,
-    muteSegments: boolean,
-    fullVideoSegments: boolean,
-    manualSkipOnFullVideo: boolean,
-    trackViewCount: boolean,
-    trackViewCountInPrivate: boolean,
-    trackDownvotes: boolean,
-    dontShowNotice: boolean,
-    noticeVisibilityMode: NoticeVisbilityMode,
-    hideVideoPlayerControls: boolean,
-    hideInfoButtonPlayerControls: boolean,
-    hideDeleteButtonPlayerControls: boolean,
-    hideUploadButtonPlayerControls: boolean,
-    hideSkipButtonPlayerControls: boolean,
-    hideDiscordLaunches: number,
-    hideDiscordLink: boolean,
-    invidiousInstances: string[],
-    supportInvidious: boolean,
-    serverAddress: string,
-    minDuration: number,
-    skipNoticeDuration: number,
-    audioNotificationOnSkip: boolean,
-    checkForUnlistedVideos: boolean,
-    testingServer: boolean,
-    refetchWhenNotFound: boolean,
-    ytInfoPermissionGranted: boolean,
-    allowExpirements: boolean,
-    showDonationLink: boolean,
-    showPopupDonationCount: number,
-    showUpsells: boolean,
-    donateClicked: number,
-    autoHideInfoButton: boolean,
-    autoSkipOnMusicVideos: boolean,
+    unsubmittedSegments: Record<string, SponsorTime[]>;
+    defaultCategory: Category;
+    renderSegmentsAsChapters: boolean;
+    whitelistedChannels: string[];
+    forceChannelCheck: boolean;
+    minutesSaved: number;
+    skipCount: number;
+    sponsorTimesContributed: number;
+    submissionCountSinceCategories: number; // New count used to show the "Read The Guidelines!!" message
+    showTimeWithSkips: boolean;
+    disableSkipping: boolean;
+    muteSegments: boolean;
+    fullVideoSegments: boolean;
+    manualSkipOnFullVideo: boolean;
+    trackViewCount: boolean;
+    trackViewCountInPrivate: boolean;
+    trackDownvotes: boolean;
+    dontShowNotice: boolean;
+    noticeVisibilityMode: NoticeVisbilityMode;
+    hideVideoPlayerControls: boolean;
+    hideInfoButtonPlayerControls: boolean;
+    hideDeleteButtonPlayerControls: boolean;
+    hideUploadButtonPlayerControls: boolean;
+    hideSkipButtonPlayerControls: boolean;
+    hideDiscordLaunches: number;
+    hideDiscordLink: boolean;
+    invidiousInstances: string[];
+    supportInvidious: boolean;
+    serverAddress: string;
+    minDuration: number;
+    skipNoticeDuration: number;
+    audioNotificationOnSkip: boolean;
+    checkForUnlistedVideos: boolean;
+    testingServer: boolean;
+    refetchWhenNotFound: boolean;
+    ytInfoPermissionGranted: boolean;
+    allowExpirements: boolean;
+    showDonationLink: boolean;
+    showPopupDonationCount: number;
+    showUpsells: boolean;
+    donateClicked: number;
+    autoHideInfoButton: boolean;
+    autoSkipOnMusicVideos: boolean;
     colorPalette: {
-        red: string,
-        white: string,
-        locked: string
-    },
-    scrollToEditTimeUpdate: boolean,
-    categoryPillUpdate: boolean,
-    showChapterInfoMessage: boolean,
-    darkMode: boolean,
-    showCategoryGuidelines: boolean,
-    showCategoryWithoutPermission: boolean,
-    showSegmentNameInChapterBar: boolean,
+        red: string;
+        white: string;
+        locked: string;
+    };
+    scrollToEditTimeUpdate: boolean;
+    categoryPillUpdate: boolean;
+    showChapterInfoMessage: boolean;
+    darkMode: boolean;
+    showCategoryGuidelines: boolean;
+    showCategoryWithoutPermission: boolean;
+    showSegmentNameInChapterBar: boolean;
 
     // Used to cache calculated text color info
     categoryPillColors: {
         [key in Category]: {
-            lastColor: string,
-            textColor: string
+            lastColor: string;
+            textColor: string;
         }
-    }
+    };
 
-    skipKeybind: Keybind,
-    startSponsorKeybind: Keybind,
-    submitKeybind: Keybind,
-    nextChapterKeybind: Keybind,
-    previousChapterKeybind: Keybind,
+    skipKeybind: Keybind;
+    startSponsorKeybind: Keybind;
+    submitKeybind: Keybind;
+    nextChapterKeybind: Keybind;
+    previousChapterKeybind: Keybind;
 
     // What categories should be skipped
-    categorySelections: CategorySelection[],
+    categorySelections: CategorySelection[];
 
     payments: {
-        licenseKey: string,
-        lastCheck: number,
-        lastFreeCheck: number,
-        freeAccess: boolean,
-        chaptersAllowed: boolean
-    }
+        licenseKey: string;
+        lastCheck: number;
+        lastFreeCheck: number;
+        freeAccess: boolean;
+        chaptersAllowed: boolean;
+    };
 
     // Preview bar
     barTypes: {
-        "preview-chooseACategory": PreviewBarOption,
-        "sponsor": PreviewBarOption,
-        "preview-sponsor": PreviewBarOption,
-        "selfpromo": PreviewBarOption,
-        "preview-selfpromo": PreviewBarOption,
-        "exclusive_access": PreviewBarOption,
-        "interaction": PreviewBarOption,
-        "preview-interaction": PreviewBarOption,
-        "intro": PreviewBarOption,
-        "preview-intro": PreviewBarOption,
-        "outro": PreviewBarOption,
-        "preview-outro": PreviewBarOption,
-        "preview": PreviewBarOption,
-        "preview-preview": PreviewBarOption,
-        "music_offtopic": PreviewBarOption,
-        "preview-music_offtopic": PreviewBarOption,
-        "poi_highlight": PreviewBarOption,
-        "preview-poi_highlight": PreviewBarOption,
-        "filler": PreviewBarOption,
-        "preview-filler": PreviewBarOption,
-    }
+        "preview-chooseACategory": PreviewBarOption;
+        "sponsor": PreviewBarOption;
+        "preview-sponsor": PreviewBarOption;
+        "selfpromo": PreviewBarOption;
+        "preview-selfpromo": PreviewBarOption;
+        "exclusive_access": PreviewBarOption;
+        "interaction": PreviewBarOption;
+        "preview-interaction": PreviewBarOption;
+        "intro": PreviewBarOption;
+        "preview-intro": PreviewBarOption;
+        "outro": PreviewBarOption;
+        "preview-outro": PreviewBarOption;
+        "preview": PreviewBarOption;
+        "preview-preview": PreviewBarOption;
+        "music_offtopic": PreviewBarOption;
+        "preview-music_offtopic": PreviewBarOption;
+        "poi_highlight": PreviewBarOption;
+        "preview-poi_highlight": PreviewBarOption;
+        "filler": PreviewBarOption;
+        "preview-filler": PreviewBarOption;
+    };
 }
 
-export type VideoDownvotes = { segments: { uuid: HashedValue, hidden: SponsorHideType }[] , lastAccess: number };
+export type VideoDownvotes = { segments: { uuid: HashedValue; hidden: SponsorHideType }[] ; lastAccess: number };
 
 interface SBStorage {
     /* VideoID prefixes to UUID prefixes */
-    downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>,
-    navigationApiAvailable: boolean,
+    downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>;
+    navigationApiAvailable: boolean;
 }
 
 export interface SBObject {
@@ -340,7 +340,7 @@ const Config: SBObject = {
 
 // Function setup
 
-function configProxy(): { sync: SBConfig, local: SBStorage } {
+function configProxy(): { sync: SBConfig; local: SBStorage } {
     chrome.storage.onChanged.addListener((changes: {[key: string]: chrome.storage.StorageChange}, areaName) => {
         if (areaName === "sync") {
             for (const key in changes) {
diff --git a/src/content.ts b/src/content.ts
index afe19ccf..4cc55e6e 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -8,6 +8,7 @@ import {
     ContentContainer,
     HashedValue,
     Keybind,
+    PageType,
     ScheduledTime,
     SegmentUUID,
     SkipToTimeParams,
@@ -18,7 +19,6 @@ import {
     ToggleSkippable,
     VideoID,
     VideoInfo,
-    PageType
 } from "./types";
 import Utils from "./utils";
 import PreviewBar, { PreviewBarSegment } from "./js-components/previewBar";
@@ -68,7 +68,7 @@ let channelIDInfo: ChannelIDInfo;
 // Locked Categories in this tab, like: ["sponsor","intro","outro"]
 let lockedCategories: Category[] = [];
 // Used to calculate a more precise "virtual" video time
-let lastKnownVideoTime: { videoTime: number, preciseTime: number } = {
+let lastKnownVideoTime: { videoTime: number; preciseTime: number } = {
     videoTime: null,
     preciseTime: null
 };
@@ -125,7 +125,7 @@ let categoryPill: CategoryPill = null;
 let controls: HTMLElement | null = null;
 
 /** Contains buttons created by `createButton()`. */
-const playerButtons: Record<string, {button: HTMLButtonElement, image: HTMLImageElement, setupListener: boolean}> = {};
+const playerButtons: Record<string, {button: HTMLButtonElement; image: HTMLImageElement; setupListener: boolean}> = {};
 
 // Direct Links after the config is loaded
 utils.wait(() => Config.config !== null, 1000, 1).then(() => videoIDChange(getYouTubeVideoID(document)));
@@ -948,13 +948,13 @@ async function sponsorsLookup(keepOldSubmissions = true) {
     setupVideoMutationListener();
 
     const showChapterMessage = Config.config.showUpsells
-        && Config.config.payments.lastCheck !== 0 
+        && Config.config.payments.lastCheck !== 0
         && !noRefreshFetchingChaptersAllowed()
         && Config.config.showChapterInfoMessage
         && Config.config.skipCount > 200;
 
-    if (!showChapterMessage 
-            && Config.config.showChapterInfoMessage 
+    if (!showChapterMessage
+            && Config.config.showChapterInfoMessage
             && Config.config.payments.freeAccess) {
         Config.config.showChapterInfoMessage = false;
 
@@ -1238,7 +1238,7 @@ function getYouTubeVideoID(document: Document, url?: string): string | boolean {
 function getYouTubeVideoIDFromDocument(hideIcon = true, pageHint = PageType.Watch): string | boolean {
     const selector = "a.ytp-title-link[data-sessionlink='feature=player-title']";
     // get ID from document (channel trailer / embedded playlist)
-    const element = pageHint === PageType.Embed ? document.querySelector(selector) 
+    const element = pageHint === PageType.Embed ? document.querySelector(selector)
         : video?.parentElement?.parentElement?.querySelector(selector);
     const videoURL = element?.getAttribute("href");
     if (videoURL) {
@@ -1403,7 +1403,7 @@ async function whitelistCheck() {
  * Returns info about the next upcoming sponsor skip
  */
 function getNextSkipIndex(currentTime: number, includeIntersectingSegments: boolean, includeNonIntersectingSegments: boolean):
-        {array: ScheduledTime[], index: number, endIndex: number, extraIndexes: number[], openNotice: boolean} {
+        {array: ScheduledTime[]; index: number; endIndex: number; extraIndexes: number[]; openNotice: boolean} {
 
     const autoSkipSorter = (segment: ScheduledTime) => {
         const skipOption = utils.getCategorySelection(segment.category)?.option;
@@ -1515,7 +1515,7 @@ function getLatestEndTimeIndex(sponsorTimes: SponsorTime[], index: number, hideH
  *  the current time, but end after
  */
 function getStartTimes(sponsorTimes: SponsorTime[], includeIntersectingSegments: boolean, includeNonIntersectingSegments: boolean,
-    minimum?: number, hideHiddenSponsors = false): {includedTimes: ScheduledTime[], scheduledTimes: number[]} {
+    minimum?: number, hideHiddenSponsors = false): {includedTimes: ScheduledTime[]; scheduledTimes: number[]} {
     if (!sponsorTimes) return {includedTimes: [], scheduledTimes: []};
 
     const includedTimes: ScheduledTime[] = [];
@@ -1751,7 +1751,7 @@ function createButton(baseID: string, title: string, callback: () => void, image
 }
 
 function shouldAutoSkip(segment: SponsorTime): boolean {
-    return (!Config.config.manualSkipOnFullVideo || !sponsorTimes?.some((s) => s.category === segment.category && s.actionType === ActionType.Full)) 
+    return (!Config.config.manualSkipOnFullVideo || !sponsorTimes?.some((s) => s.category === segment.category && s.actionType === ActionType.Full))
         && (utils.getCategorySelection(segment.category)?.option === CategorySkipOption.AutoSkip ||
             (Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic")
                 && segment.actionType !== ActionType.Poi));
@@ -1904,11 +1904,15 @@ function isSegmentCreationInProgress(): boolean {
 
 function cancelCreatingSegment() {
     if (isSegmentCreationInProgress()) {
-        sponsorTimesSubmitting.splice(sponsorTimesSubmitting.length - 1, 1);
-        Config.config.unsubmittedSegments[sponsorVideoID] = sponsorTimesSubmitting;
+        if (sponsorTimesSubmitting.length > 1) {  // If there's more than one segment: remove last
+            sponsorTimesSubmitting.pop();
+            Config.config.unsubmittedSegments[sponsorVideoID] = sponsorTimesSubmitting;
+        } else {  // Otherwise delete the video entry & close submission menu
+            resetSponsorSubmissionNotice();
+            sponsorTimesSubmitting = [];
+            delete Config.config.unsubmittedSegments[sponsorVideoID];
+        }
         Config.forceSyncUpdate("unsubmittedSegments");
-
-        if (sponsorTimesSubmitting.length <= 0) resetSponsorSubmissionNotice();
     }
 
     updateEditButtonsOnPlayer();
diff --git a/src/document.ts b/src/document.ts
index fc6b123a..595595b7 100644
--- a/src/document.ts
+++ b/src/document.ts
@@ -6,26 +6,26 @@
 import { PageType } from "./types";
 
 interface StartMessage {
-    type: "navigation",
-    pageType: PageType
-    videoID: string | null,
+    type: "navigation";
+    pageType: PageType;
+    videoID: string | null;
 }
 
 interface FinishMessage extends StartMessage {
-    channelID: string,
-    channelTitle: string
+    channelID: string;
+    channelTitle: string;
 }
 
 interface AdMessage {
-    type: "ad",
-    playing: boolean
+    type: "ad";
+    playing: boolean;
 }
 
 interface VideoData {
-    type: "data",
-    videoID: string,
-    isLive: boolean,
-    isPremiere: boolean
+    type: "data";
+    videoID: string;
+    isLive: boolean;
+    isPremiere: boolean;
 }
 
 type WindowMessage = StartMessage | FinishMessage | AdMessage | VideoData;
diff --git a/src/globals.d.ts b/src/globals.d.ts
index ed8547a0..aaaab851 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -1,6 +1,6 @@
 import { SBObject } from "./config";
 declare global {
-    interface Window { SB: SBObject; }
+    interface Window { SB: SBObject }
     // Remove this once the API becomes stable and types are shipped in @types/chrome
     namespace chrome {
         namespace declarativeContent {
diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts
index 8a9834c1..46042c8c 100644
--- a/src/js-components/previewBar.ts
+++ b/src/js-components/previewBar.ts
@@ -651,7 +651,7 @@ class PreviewBar {
     }
 
     private findLeftAndScale(selector: string, currentElement: HTMLElement, progressBar: HTMLElement): 
-            { left: number, scale: number } {
+            { left: number; scale: number } {
         const sections = currentElement.parentElement.parentElement.parentElement.children;
         let currentWidth = 0;
         let lastWidth = 0;
diff --git a/src/options.ts b/src/options.ts
index c9596abb..888e7aaf 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 
 import Config from "./config";
 import * as CompileConfig from "../config.json";
@@ -258,7 +258,8 @@ async function init() {
                 break;
             }
             case "keybind-change": {
-                ReactDOM.render(React.createElement(KeybindComponent, {option: option}), optionsElements[i].querySelector("div"));
+                const root = createRoot(optionsElements[i].querySelector("div"));
+                root.render(React.createElement(KeybindComponent, {option: option}));
                 break;
             }
             case "display": {
diff --git a/src/popup.ts b/src/popup.ts
index 37f2b799..1fc1acc6 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -61,9 +61,9 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     localizeHtmlPage();
 
     type InputPageElements = {
-        whitelistToggle?: HTMLInputElement,
-        toggleSwitch?: HTMLInputElement,
-        usernameInput?: HTMLInputElement,
+        whitelistToggle?: HTMLInputElement;
+        toggleSwitch?: HTMLInputElement;
+        usernameInput?: HTMLInputElement;
     };
     type PageElements = { [key: string]: HTMLElement } & InputPageElements
 
diff --git a/src/render/CategoryChooser.tsx b/src/render/CategoryChooser.tsx
index 0f5d557f..5b708a3f 100644
--- a/src/render/CategoryChooser.tsx
+++ b/src/render/CategoryChooser.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
+
 import CategoryChooserComponent from "../components/options/CategoryChooserComponent";
 
 class CategoryChooser {
@@ -9,9 +10,9 @@ class CategoryChooser {
     constructor(element: Element) {
         this.ref = React.createRef();
 
-        ReactDOM.render(
-            <CategoryChooserComponent ref={this.ref} />,
-            element
+        const root = createRoot(element);
+        root.render(
+            <CategoryChooserComponent ref={this.ref} />
         );
     }
 
diff --git a/src/render/ChapterVote.tsx b/src/render/ChapterVote.tsx
index 1a3f8999..9112d719 100644
--- a/src/render/ChapterVote.tsx
+++ b/src/render/ChapterVote.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import ChapterVoteComponent, { ChapterVoteState } from "../components/ChapterVoteComponent";
 import { VoteResponse } from "../messageTypes";
 import { Category, SegmentUUID, SponsorTime } from "../types";
@@ -7,6 +7,7 @@ import { Category, SegmentUUID, SponsorTime } from "../types";
 export class ChapterVote {
     container: HTMLElement;
     ref: React.RefObject<ChapterVoteComponent>;
+    root: Root;
 
     unsavedState: ChapterVoteState;
 
@@ -19,10 +20,8 @@ export class ChapterVote {
         this.container.id = "chapterVote";
         this.container.style.height = "100%";
 
-        ReactDOM.render(
-            <ChapterVoteComponent ref={this.ref} vote={vote} />,
-            this.container
-        );
+        this.root = createRoot(this.container);
+        this.root.render(<ChapterVoteComponent ref={this.ref} vote={vote} />);
     }
 
     getContainer(): HTMLElement {
@@ -30,7 +29,7 @@ export class ChapterVote {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
         this.container.remove();
     }
 
diff --git a/src/render/GenericNotice.tsx b/src/render/GenericNotice.tsx
index 63a4c879..f3cc7a2e 100644
--- a/src/render/GenericNotice.tsx
+++ b/src/render/GenericNotice.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import NoticeComponent from "../components/NoticeComponent";
 
 import Utils from "../utils";
@@ -9,17 +9,17 @@ import { ButtonListener, ContentContainer } from "../types";
 import NoticeTextSelectionComponent from "../components/NoticeTextSectionComponent";
 
 export interface TextBox {
-    icon: string,
-    text: string
+    icon: string;
+    text: string;
 }
 
 export interface NoticeOptions {
-    title: string,
-    referenceNode?: HTMLElement,
-    textBoxes?: TextBox[],
-    buttons?: ButtonListener[],
-    fadeIn?: boolean,
-    timed?: boolean
+    title: string;
+    referenceNode?: HTMLElement;
+    textBoxes?: TextBox[];
+    buttons?: ButtonListener[];
+    fadeIn?: boolean;
+    timed?: boolean;
     style?: React.CSSProperties;
     extraClass?: string;
     maxCountdownTime?: () => number;
@@ -35,6 +35,7 @@ export default class GenericNotice {
     noticeElement: HTMLDivElement;
     noticeRef: React.MutableRefObject<NoticeComponent>;
     idSuffix: string;
+    root: Root;
 
     constructor(contentContainer: ContentContainer, idSuffix: string, options: NoticeOptions) {
         this.noticeRef = React.createRef();
@@ -49,11 +50,13 @@ export default class GenericNotice {
 
         referenceNode.prepend(this.noticeElement);
 
-        this.update(options);        
+        this.root = createRoot(this.noticeElement);
+
+        this.update(options);
     }
 
     update(options: NoticeOptions): void {
-        ReactDOM.render(
+        this.root.render(
             <NoticeComponent
                 noticeTitle={options.title}
                 idSuffix={this.idSuffix}
@@ -92,8 +95,7 @@ export default class GenericNotice {
                         </>
                     : null}
 
-            </NoticeComponent>,
-            this.noticeElement
+            </NoticeComponent>
         );
     }
 
@@ -137,7 +139,7 @@ export default class GenericNotice {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();
 
         this.noticeElement.remove();
     }
diff --git a/src/render/RectangleTooltip.tsx b/src/render/RectangleTooltip.tsx
index ea019db7..1b357fa8 100644
--- a/src/render/RectangleTooltip.tsx
+++ b/src/render/RectangleTooltip.tsx
@@ -1,26 +1,26 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 
 export interface RectangleTooltipProps {
-    text: string, 
-    link?: string,
-    referenceNode: HTMLElement,
-    prependElement?: HTMLElement, // Element to append before
-    bottomOffset?: string,
-    leftOffset?: string,
-    timeout?: number,
-    htmlId?: string,
-    maxHeight?: string,
-    maxWidth?: string,
-    backgroundColor?: string,
-    fontSize?: string,
+    text: string; 
+    link?: string;
+    referenceNode: HTMLElement;
+    prependElement?: HTMLElement; // Element to append before
+    bottomOffset?: string;
+    leftOffset?: string;
+    timeout?: number;
+    htmlId?: string;
+    maxHeight?: string;
+    maxWidth?: string;
+    backgroundColor?: string;
+    fontSize?: string;
     buttonFunction?: () => void;
 }
 
 export class RectangleTooltip {
     text: string;   
     container: HTMLDivElement;
-
+    root: Root;
     timer: NodeJS.Timeout;
     
     constructor(props: RectangleTooltipProps) {
@@ -47,7 +47,8 @@ export class RectangleTooltip {
             this.timer = setTimeout(() => this.close(), props.timeout * 1000);
         }
 
-        ReactDOM.render(
+        this.root = createRoot(this.container);
+        this.root.render(
             <div style={{
                 bottom: props.bottomOffset, 
                 left: props.leftOffset,
@@ -81,13 +82,12 @@ export class RectangleTooltip {
 
                         {chrome.i18n.getMessage("GotIt")}
                     </button>
-            </div>,
-            this.container
+            </div>
         )
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
         this.container.remove();
 
         if (this.timer) clearTimeout(this.timer);
diff --git a/src/render/SkipNotice.tsx b/src/render/SkipNotice.tsx
index f5a81033..b1be46a2 100644
--- a/src/render/SkipNotice.tsx
+++ b/src/render/SkipNotice.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 
 import Utils from "../utils";
 const utils = new Utils();
@@ -18,6 +18,7 @@ class SkipNotice {
     noticeElement: HTMLDivElement;
 
     skipNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
+    root: Root;
 
     constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, unskipTime: number = null, startReskip = false) {
         this.skipNoticeRef = React.createRef();
@@ -41,7 +42,8 @@ class SkipNotice {
 
         referenceNode.prepend(this.noticeElement);
 
-        ReactDOM.render(
+        this.root = createRoot(this.noticeElement);
+        this.root.render(
             <SkipNoticeComponent segments={segments} 
                 autoSkip={autoSkip} 
                 startReskip={startReskip}
@@ -50,8 +52,7 @@ class SkipNotice {
                 closeListener={() => this.close()}
                 smaller={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAll 
                     || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)}
-                unskipTime={unskipTime} />,
-            this.noticeElement
+                unskipTime={unskipTime} />
         );
     }
 
@@ -62,7 +63,7 @@ class SkipNotice {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();
 
         this.noticeElement.remove();
 
diff --git a/src/render/SubmissionNotice.tsx b/src/render/SubmissionNotice.tsx
index 9164666d..295d8e2b 100644
--- a/src/render/SubmissionNotice.tsx
+++ b/src/render/SubmissionNotice.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 
 import Utils from "../utils";
 const utils = new Utils();
@@ -17,6 +17,8 @@ class SubmissionNotice {
 
     noticeElement: HTMLDivElement;
 
+    root: Root;
+
     constructor(contentContainer: ContentContainer, callback: () => unknown) {
         this.noticeRef = React.createRef();
 
@@ -30,13 +32,13 @@ class SubmissionNotice {
 
         referenceNode.prepend(this.noticeElement);
 
-        ReactDOM.render(
+        this.root = createRoot(this.noticeElement);
+        this.root.render(
             <SubmissionNoticeComponent
                 contentContainer={contentContainer}
                 callback={callback} 
                 ref={this.noticeRef}
-                closeListener={() => this.close(false)} />,
-            this.noticeElement
+                closeListener={() => this.close(false)} />
         );
     }
 
@@ -46,7 +48,7 @@ class SubmissionNotice {
 
     close(callRef = true): void {
         if (callRef) this.noticeRef.current.cancel();
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();
 
         this.noticeElement.remove();
     }
diff --git a/src/render/Tooltip.tsx b/src/render/Tooltip.tsx
index dd9a26cc..7c89dd8e 100644
--- a/src/render/Tooltip.tsx
+++ b/src/render/Tooltip.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import { ButtonListener } from "../types";
 
 export interface TooltipProps {
@@ -26,6 +26,7 @@ export class Tooltip {
     container: HTMLDivElement;
 
     timer: NodeJS.Timeout;
+    root: Root;
     
     constructor(props: TooltipProps) {
         props.bottomOffset ??= "70px";
@@ -54,8 +55,9 @@ export class Tooltip {
         }
 
         const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`;
-        
-        ReactDOM.render(
+
+        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>
@@ -93,8 +95,7 @@ export class Tooltip {
                         {chrome.i18n.getMessage("GotIt")}
                     </button>
                 : null}
-            </div>,
-            this.container
+            </div>
         )
     }
 
@@ -120,7 +121,7 @@ export class Tooltip {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
         this.container.remove();
 
         if (this.timer) clearTimeout(this.timer);
diff --git a/src/render/UnsubmittedVideos.tsx b/src/render/UnsubmittedVideos.tsx
index 26796754..3b3b3855 100644
--- a/src/render/UnsubmittedVideos.tsx
+++ b/src/render/UnsubmittedVideos.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import UnsubmittedVideosComponent from "../components/options/UnsubmittedVideosComponent";
 
 class UnsubmittedVideos {
@@ -9,9 +9,9 @@ class UnsubmittedVideos {
     constructor(element: Element) {
         this.ref = React.createRef();
 
-        ReactDOM.render(
-            <UnsubmittedVideosComponent ref={this.ref} />,
-            element
+        const root = createRoot(element);
+        root.render(
+            <UnsubmittedVideosComponent ref={this.ref} />
         );
     }
 
diff --git a/src/types.ts b/src/types.ts
index 50b20374..9be4f9ce 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -4,32 +4,32 @@ import SkipNotice from "./render/SkipNotice";
 
 export interface ContentContainer {
     (): {
-        vote: (type: number, UUID: SegmentUUID, category?: Category, skipNotice?: SkipNoticeComponent) => void,
-        dontShowNoticeAgain: () => void,
-        unskipSponsorTime: (segment: SponsorTime, unskipTime: number, forceSeek?: boolean) => void,
-        sponsorTimes: SponsorTime[],
-        sponsorTimesSubmitting: SponsorTime[],
-        skipNotices: SkipNotice[],
-        v: HTMLVideoElement,
-        sponsorVideoID,
-        reskipSponsorTime: (segment: SponsorTime, forceSeek?: boolean) => void,
-        updatePreviewBar: () => void,
-        onMobileYouTube: boolean,
-        sponsorSubmissionNotice: SubmissionNotice,
-        resetSponsorSubmissionNotice: (callRef?: boolean) => void,
-        updateEditButtonsOnPlayer: () => void,
-        previewTime: (time: number, unpause?: boolean) => void,
-        videoInfo: VideoInfo,
-        getRealCurrentTime: () => number,
-        lockedCategories: string[],
-        channelIDInfo: ChannelIDInfo
-    }
+        vote: (type: number, UUID: SegmentUUID, category?: Category, skipNotice?: SkipNoticeComponent) => void;
+        dontShowNoticeAgain: () => void;
+        unskipSponsorTime: (segment: SponsorTime, unskipTime: number, forceSeek?: boolean) => void;
+        sponsorTimes: SponsorTime[];
+        sponsorTimesSubmitting: SponsorTime[];
+        skipNotices: SkipNotice[];
+        v: HTMLVideoElement;
+        sponsorVideoID;
+        reskipSponsorTime: (segment: SponsorTime, forceSeek?: boolean) => void;
+        updatePreviewBar: () => void;
+        onMobileYouTube: boolean;
+        sponsorSubmissionNotice: SubmissionNotice;
+        resetSponsorSubmissionNotice: (callRef?: boolean) => void;
+        updateEditButtonsOnPlayer: () => void;
+        previewTime: (time: number, unpause?: boolean) => void;
+        videoInfo: VideoInfo;
+        getRealCurrentTime: () => number;
+        lockedCategories: string[];
+        channelIDInfo: ChannelIDInfo;
+    };
 }
 
 export interface FetchResponse {
-    responseText: string,
-    status: number,
-    ok: boolean
+    responseText: string;
+    status: number;
+    ok: boolean;
 }
 
 export type HashedValue = string & { __hashBrand: unknown };
@@ -46,7 +46,7 @@ export enum CategorySkipOption {
 
 export interface CategorySelection {
     name: Category;
-    option: CategorySkipOption
+    option: CategorySkipOption;
 }
 
 export enum SponsorHideType {
@@ -97,95 +97,95 @@ export interface ScheduledTime extends SponsorTime {
 }
 
 export interface PreviewBarOption {
-    color: string,
-    opacity: string
+    color: string;
+    opacity: string;
 }
 
 
 export interface Registration {
-    message: string,
-    id: string,
-    allFrames: boolean,
-    js: browser.extensionTypes.ExtensionFileOrCode[],
-    css: browser.extensionTypes.ExtensionFileOrCode[],
-    matches: string[]
+    message: string;
+    id: string;
+    allFrames: boolean;
+    js: browser.extensionTypes.ExtensionFileOrCode[];
+    css: browser.extensionTypes.ExtensionFileOrCode[];
+    matches: string[];
 }
 
 export interface BackgroundScriptContainer {
-    registerFirefoxContentScript: (opts: Registration) => void,
-    unregisterFirefoxContentScript: (id: string) => void
+    registerFirefoxContentScript: (opts: Registration) => void;
+    unregisterFirefoxContentScript: (id: string) => void;
 }
 
 export interface VideoInfo {
     responseContext: {
-        serviceTrackingParams: Array<{service: string, params: Array<{key: string, value: string}>}>,
+        serviceTrackingParams: Array<{service: string; params: Array<{key: string; value: string}>}>;
         webResponseContextExtensionData: {
-            hasDecorated: boolean
-        }
-    },
+            hasDecorated: boolean;
+        };
+    };
     playabilityStatus: {
-        status: string,
-        playableInEmbed: boolean,
+        status: string;
+        playableInEmbed: boolean;
         miniplayer: {
             miniplayerRenderer: {
-                playbackMode: string
-            }
-        }
+                playbackMode: string;
+            };
+        };
     };
     streamingData: unknown;
     playbackTracking: unknown;
     videoDetails: {
-        videoId: string,
-        title: string,
-        lengthSeconds: string,
-        keywords: string[],
-        channelId: string,
-        isOwnerViewing: boolean,
-        shortDescription: string,
-        isCrawlable: boolean,
+        videoId: string;
+        title: string;
+        lengthSeconds: string;
+        keywords: string[];
+        channelId: string;
+        isOwnerViewing: boolean;
+        shortDescription: string;
+        isCrawlable: boolean;
         thumbnail: {
-            thumbnails: Array<{url: string, width: number, height: number}>
-        },
-        averageRating: number,
-        allowRatings: boolean,
-        viewCount: string,
-        author: string,
-        isPrivate: boolean,
-        isUnpluggedCorpus: boolean,
-        isLiveContent: boolean,
+            thumbnails: Array<{url: string; width: number; height: number}>;
+        };
+        averageRating: number;
+        allowRatings: boolean;
+        viewCount: string;
+        author: string;
+        isPrivate: boolean;
+        isUnpluggedCorpus: boolean;
+        isLiveContent: boolean;
     };
     playerConfig: unknown;
     storyboards: unknown;
     microformat: {
         playerMicroformatRenderer: {
             thumbnail: {
-                thumbnails: Array<{url: string, width: number, height: number}>
-            },
+                thumbnails: Array<{url: string; width: number; height: number}>;
+            };
             embed: {
-                iframeUrl: string,
-                flashUrl: string,
-                width: number,
-                height: number,
-                flashSecureUrl: string,
-            },
+                iframeUrl: string;
+                flashUrl: string;
+                width: number;
+                height: number;
+                flashSecureUrl: string;
+            };
             title: {
-                simpleText: string,
-            },
+                simpleText: string;
+            };
             description: {
-                simpleText: string,
-            },
-            lengthSeconds: string,
-            ownerProfileUrl: string,
-            externalChannelId: string,
-            availableCountries: string[],
-            isUnlisted: boolean,
-            hasYpcMetadata: boolean,
-            viewCount: string,
-            category: Category,
-            publishDate: string,
-            ownerChannelName: string,
-            uploadDate: string,
-        }
+                simpleText: string;
+            };
+            lengthSeconds: string;
+            ownerProfileUrl: string;
+            externalChannelId: string;
+            availableCountries: string[];
+            isUnlisted: boolean;
+            hasYpcMetadata: boolean;
+            viewCount: string;
+            category: Category;
+            publishDate: string;
+            ownerChannelName: string;
+            uploadDate: string;
+        };
     };
     trackingParams: string;
     attestation: unknown;
@@ -205,17 +205,17 @@ export enum ChannelIDStatus {
 }
 
 export interface ChannelIDInfo {
-    id: string,
-    status: ChannelIDStatus
+    id: string;
+    status: ChannelIDStatus;
 }
 
 export interface SkipToTimeParams {
-    v: HTMLVideoElement, 
-    skipTime: number[], 
-    skippingSegments: SponsorTime[], 
-    openNotice: boolean, 
-    forceAutoSkip?: boolean,
-    unskipTime?: number
+    v: HTMLVideoElement; 
+    skipTime: number[]; 
+    skippingSegments: SponsorTime[]; 
+    openNotice: boolean; 
+    forceAutoSkip?: boolean;
+    unskipTime?: number;
 }
 
 export interface ToggleSkippable {
@@ -232,11 +232,11 @@ export enum NoticeVisbilityMode {
 }
 
 export type Keybind = {
-    key: string,
-    code?: string,
-    ctrl?: boolean,
-    alt?: boolean,
-    shift?: boolean
+    key: string;
+    code?: string;
+    ctrl?: boolean;
+    alt?: boolean;
+    shift?: boolean;
 }
 
 export enum PageType {
@@ -249,6 +249,6 @@ export enum PageType {
 }
 
 export interface ButtonListener {
-    name: string,
-    listener: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+    name: string;
+    listener: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
\ No newline at end of file
diff --git a/src/utils.ts b/src/utils.ts
index fd24cc3b..15cfd001 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -24,7 +24,7 @@ export default class Utils {
     /* Used for waitForElement */
     creatingWaitingMutationObserver = false;
     waitingMutationObserver: MutationObserver = null;
-    waitingElements: { selector: string, visibleCheck: boolean, callback: (element: Element) => void }[] = [];
+    waitingElements: { selector: string; visibleCheck: boolean; callback: (element: Element) => void }[] = [];
 
     constructor(backgroundScriptContainer: BackgroundScriptContainer = null) {
         this.backgroundScriptContainer = backgroundScriptContainer;
diff --git a/src/utils/animationUtils.ts b/src/utils/animationUtils.ts
index 933e6446..d7302c48 100644
--- a/src/utils/animationUtils.ts
+++ b/src/utils/animationUtils.ts
@@ -25,7 +25,7 @@ function applyLoadingAnimation(element: HTMLElement, time: number, callback?: ()
     });
 }
 
-function setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void, show: () => void } {
+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");
diff --git a/src/utils/genericUtils.ts b/src/utils/genericUtils.ts
index 8b07e699..144c0438 100644
--- a/src/utils/genericUtils.ts
+++ b/src/utils/genericUtils.ts
@@ -93,7 +93,7 @@ function getLuminance(color: string): number {
 }
 
 /* From https://stackoverflow.com/a/5624139 */
-function hexToRgb(hex: string): {r: number, g: number, b: number} {
+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) {
diff --git a/src/utils/warnings.ts b/src/utils/warnings.ts
index 09423e03..f2f2657e 100644
--- a/src/utils/warnings.ts
+++ b/src/utils/warnings.ts
@@ -6,9 +6,9 @@ import { GenericUtils } from "./genericUtils";
 const utils = new Utils();
 
 export interface ChatConfig {
-    displayName: string,
-    composerInitialValue?: string,
-    customDescription?: string
+    displayName: string;
+    composerInitialValue?: string;
+    customDescription?: string;
 }
 
 export async function openWarningDialog(contentContainer: ContentContainer): Promise<void> {