bump version

Fixes #1838

ci/invidiouslist.json

@@ -1 +1 @@
-["www.youtubekids.com","inv.bp.projectsegfau.lt","inv.tux.pizza","inv.zzls.xyz","invidious.0011.lt","invidious.lunar.icu","invidious.privacydev.net","invidious.tiekoetter.com","iv.ggtyler.dev","iv.melmac.space","vid.priv.au","vid.puffyan.us","yewtu.be","yt.artemislena.eu"]
+["www.youtubekids.com","inv.bp.projectsegfau.lt","inv.citw.lgbt","inv.in.projectsegfau.lt","inv.makerlab.tech","inv.pistasjis.net","inv.tux.pizza","inv.zzls.xyz","invidious.0011.lt","invidious.io.lol","invidious.lunar.icu","invidious.no-logs.com","invidious.projectsegfau.lt","invidious.protokolla.fi","invidious.slipfox.xyz","invidious.tiekoetter.com","iv.ggtyler.dev","iv.melmac.space","iv.nboeck.de","onion.tube","vid.priv.au","vid.puffyan.us","yewtu.be","yt.artemislena.eu","yt.oelrichsgarcia.de"]

manifest/firefox-manifest-extra.json

@@ -9,5 +9,8 @@
   },
   "permissions": [
     "scripting"
-  ]
+  ],
+  "browser_action": {
+    "default_area": "navbar"
+  }
 }

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "5.4.18",
+    "version": "5.4.20",
     "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": [

oss-attribution/licenseInfos.json

@@ -62,7 +62,7 @@
   "webext-content-scripts": {
     "ignore": false,
     "name": "webext-content-scripts",
-    "version": "2.5.2",
+    "version": "2.5.5",
     "authors": "Federico Brigante <me@fregante.com> (https://fregante.com)",
     "url": "https://github.com/fregante/webext-content-scripts",
     "license": "MIT",
@@ -80,7 +80,7 @@
   "webext-polyfill-kinda": {
     "ignore": false,
     "name": "webext-polyfill-kinda",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "authors": "Federico Brigante <me@fregante.com> (https://fregante.com)",
     "url": "https://github.com/fregante/webext-polyfill-kinda",
     "license": "MIT",

package-lock.json

@@ -27,7 +27,7 @@
       ],
       "license": "LGPL-3.0-or-later",
       "dependencies": {
-        "@ajayyy/content-scripts-register-polyfill": "^4.0.2-safari-fix",
+        "content-scripts-register-polyfill": "^4.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -65,34 +65,6 @@
         "node": ">=16"
       }
     },
-    "node_modules/@ajayyy/content-scripts-register-polyfill": {
-      "version": "4.0.2-safari-fix",
-      "resolved": "https://registry.npmjs.org/@ajayyy/content-scripts-register-polyfill/-/content-scripts-register-polyfill-4.0.2-safari-fix.tgz",
-      "integrity": "sha512-okyqlFmLUmOZQrkZ6ChUbfcNXadamlaIGqzb6fi5MRnzvr+myoG4sK+whxhCY9hPmU///dqMGtV8FVom8sJpHA==",
-      "dependencies": {
-        "@ajayyy/webext-content-scripts": "^2.5.4-safari-fix",
-        "webext-patterns": "^1.3.0",
-        "webext-polyfill-kinda": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fregante"
-      }
-    },
-    "node_modules/@ajayyy/webext-content-scripts": {
-      "version": "2.5.4-safari-fix",
-      "resolved": "https://registry.npmjs.org/@ajayyy/webext-content-scripts/-/webext-content-scripts-2.5.4-safari-fix.tgz",
-      "integrity": "sha512-gn1PF4+dfld6whvmjjnYGvB26z9ja0SNIcgHVQl42Bh/lz89hviH8HWqi1p7XXN/p0BsOwJAx8jzqkmb2IAQvQ==",
-      "dependencies": {
-        "webext-patterns": "^1.3.0",
-        "webext-polyfill-kinda": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fregante"
-      }
-    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -4282,6 +4254,19 @@
         "url": "https://github.com/yeoman/configstore?sponsor=1"
       }
     },
+    "node_modules/content-scripts-register-polyfill": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/content-scripts-register-polyfill/-/content-scripts-register-polyfill-4.0.2.tgz",
+      "integrity": "sha512-8hDm+tu3BkxHZP7EUIIIo/495F6QNXF7cI9Lwr4PQaiohw2wWmi9k2SE4W4kNrAaLnFw6RZ2ev8EmrQb+sCoGQ==",
+      "dependencies": {
+        "webext-content-scripts": "^2.5.2",
+        "webext-patterns": "^1.3.0",
+        "webext-polyfill-kinda": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fregante"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
@@ -12975,6 +12960,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/webext-content-scripts": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/webext-content-scripts/-/webext-content-scripts-2.5.5.tgz",
+      "integrity": "sha512-CIq1LA/nHIXE43v8qlpqNPcbsSzGuQBkeykbqOWvKJ1Rx/q7zgdZsLgxwyoonWiQcJczslVmGWCfdBY04JwIyw==",
+      "dependencies": {
+        "webext-patterns": "^1.3.0",
+        "webext-polyfill-kinda": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fregante"
+      }
+    },
     "node_modules/webext-patterns": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/webext-patterns/-/webext-patterns-1.3.0.tgz",
@@ -13578,25 +13578,6 @@
     }
   },
   "dependencies": {
-    "@ajayyy/content-scripts-register-polyfill": {
-      "version": "4.0.2-safari-fix",
-      "resolved": "https://registry.npmjs.org/@ajayyy/content-scripts-register-polyfill/-/content-scripts-register-polyfill-4.0.2-safari-fix.tgz",
-      "integrity": "sha512-okyqlFmLUmOZQrkZ6ChUbfcNXadamlaIGqzb6fi5MRnzvr+myoG4sK+whxhCY9hPmU///dqMGtV8FVom8sJpHA==",
-      "requires": {
-        "@ajayyy/webext-content-scripts": "^2.5.4-safari-fix",
-        "webext-patterns": "^1.3.0",
-        "webext-polyfill-kinda": "^1.0.0"
-      }
-    },
-    "@ajayyy/webext-content-scripts": {
-      "version": "2.5.4-safari-fix",
-      "resolved": "https://registry.npmjs.org/@ajayyy/webext-content-scripts/-/webext-content-scripts-2.5.4-safari-fix.tgz",
-      "integrity": "sha512-gn1PF4+dfld6whvmjjnYGvB26z9ja0SNIcgHVQl42Bh/lz89hviH8HWqi1p7XXN/p0BsOwJAx8jzqkmb2IAQvQ==",
-      "requires": {
-        "webext-patterns": "^1.3.0",
-        "webext-polyfill-kinda": "^1.0.2"
-      }
-    },
     "@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -16756,6 +16737,16 @@
         "xdg-basedir": "^5.0.1"
       }
     },
+    "content-scripts-register-polyfill": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/content-scripts-register-polyfill/-/content-scripts-register-polyfill-4.0.2.tgz",
+      "integrity": "sha512-8hDm+tu3BkxHZP7EUIIIo/495F6QNXF7cI9Lwr4PQaiohw2wWmi9k2SE4W4kNrAaLnFw6RZ2ev8EmrQb+sCoGQ==",
+      "requires": {
+        "webext-content-scripts": "v2.5.5",
+        "webext-patterns": "^1.3.0",
+        "webext-polyfill-kinda": "^1.0.0"
+      }
+    },
     "convert-source-map": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
@@ -23107,6 +23098,15 @@
       "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
       "dev": true
     },
+    "webext-content-scripts": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/webext-content-scripts/-/webext-content-scripts-2.5.5.tgz",
+      "integrity": "sha512-CIq1LA/nHIXE43v8qlpqNPcbsSzGuQBkeykbqOWvKJ1Rx/q7zgdZsLgxwyoonWiQcJczslVmGWCfdBY04JwIyw==",
+      "requires": {
+        "webext-patterns": "^1.3.0",
+        "webext-polyfill-kinda": "^1.0.2"
+      }
+    },
     "webext-patterns": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/webext-patterns/-/webext-patterns-1.3.0.tgz",

package.json

@@ -4,10 +4,15 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
-    "@ajayyy/content-scripts-register-polyfill": "^4.0.2-safari-fix",
+    "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",

public/content.css

@@ -49,7 +49,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 */
@@ -243,11 +249,6 @@ div:hover > .sponsorBlockChapterBar {
 	border-collapse: unset;
 }
 
-.sponsorSkipNoticeParent {
-	min-width: 350px;
-	max-width: 50%;
-}
-
 .sponsorSkipNotice {
 	width: 100%;
 }
@@ -570,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;
 

public/oss-attribution/attribution.txt

@@ -164,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)
@@ -194,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/popup.html

@@ -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: 375px;
 	max-width: 50%;
 }
 

src/background.ts

@@ -2,7 +2,7 @@ import * as CompileConfig from "../config.json";
 
 import Config from "./config";
 import { Registration } from "./types";
-import "@ajayyy/content-scripts-register-polyfill";
+import "content-scripts-register-polyfill";
 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";

src/components/SponsorTimeEditComponent.tsx

@@ -128,6 +128,12 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     style={timeDisplayStyle}
                     className="sponsorTimeDisplay">
 
+                        <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)}>
@@ -138,6 +144,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                             type="text"
                             style={{color: "inherit", backgroundColor: "inherit"}}
                             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>
@@ -153,6 +161,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                     type="text"
                                     style={{color: "inherit", backgroundColor: "inherit"}}
                                     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>
@@ -238,6 +248,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})}>
@@ -282,11 +294,10 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     </span>
                 ): ""}
 
-                {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(sponsorTime.actionType)) 
-                    && sponsorTime.actionType === ActionType.Chapter ? (
+                {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(sponsorTime.actionType)) ? (
                     <span id={"sponsorTimePreviewButton" + this.idSuffix}
                         className="sponsorTimeEditButton"
-                        onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey)}>
+                        onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey, true)}>
                         {chrome.i18n.getMessage("End")}
                     </span>
                 ): ""}
@@ -624,7 +635,7 @@ 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;
@@ -633,13 +644,11 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
         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 {

src/content.ts

@@ -63,7 +63,7 @@ utils.wait(() => Config.isReady(), 5000, 10).then(() => {
             && Config.config.showDeArrowPromotion
             && Config.config.showUpsells 
             && Config.config.showNewFeaturePopups
-            && (Config.config.skipCount > 100 || !Config.config.trackViewCount)
+            && (Config.config.skipCount > 30 || !Config.config.trackViewCount)
             && Math.random() < 0.05) {
 
             if (!await isDeArrowInstalled()) {
@@ -110,6 +110,7 @@ const skipNotices: SkipNotice[] = [];
 let activeSkipKeybindElement: ToggleSkippable = null;
 let retryFetchTimeout: NodeJS.Timeout = null;
 let shownSegmentFailedToFetchWarning = false;
+let selectedSegment: SegmentUUID | null = null;
 
 // JSON video info
 let videoInfo: VideoInfo = null;
@@ -300,6 +301,10 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
         case "reskip":
             reskipSponsorTime(sponsorTimes.find((segment) => segment.UUID === request.UUID), true);
             break;
+        case "selectSegment":
+            selectedSegment = request.UUID;
+            updatePreviewBar();
+            break;
         case "submitVote":
             vote(request.type, request.UUID).then((response) => sendResponse(response));
             return true;
@@ -1369,7 +1374,8 @@ function updatePreviewBar(): void {
                 showLarger: segment.actionType === ActionType.Poi,
                 description: segment.description,
                 source: segment.source,
-                requiredSegment: requiredSegment && (segment.UUID === requiredSegment || segment.UUID.startsWith(requiredSegment))
+                requiredSegment: requiredSegment && (segment.UUID === requiredSegment || segment.UUID.startsWith(requiredSegment)),
+                selectedSegment: selectedSegment && segment.UUID === selectedSegment
             });
         });
     }

src/js-components/previewBar.ts

@@ -27,6 +27,7 @@ export interface PreviewBarSegment {
     description: string;
     source: SponsorSourceType;
     requiredSegment?: boolean;
+    selectedSegment?: boolean;
 }
 
 interface ChapterGroup extends SegmentContainer {
@@ -332,6 +333,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 ? '  ' : ' ';
 
         const fullCategoryName = (unsubmitted ? 'preview-' : '') + category;

src/messageTypes.ts

@@ -31,7 +31,7 @@ interface IsInfoFoundMessage {
 }
 
 interface SkipMessage {
-    message: "unskip" | "reskip";
+    message: "unskip" | "reskip" | "selectSegment";
     UUID: SegmentUUID;
 }
 

src/popup.ts

@@ -687,6 +687,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 +720,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
             container.appendChild(votingButtons);
         }
+
+        container.addEventListener("mouseleave", () => selectSegment(null));
     }
 
     function submitTimes() {
@@ -968,6 +972,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)
      */

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
-}
+}