Release version 2.3.7

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ttv-lol-pro",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "description": "TTV LOL PRO removes most livestream ads from Twitch.",
   "@parcel/bundler-default": {
     "minBundles": 10000000,
@@ -48,19 +48,19 @@
   },
   "devDependencies": {
     "@parcel/config-webextension": "^2.12.0",
-    "@types/chrome": "^0.0.263",
+    "@types/chrome": "^0.0.267",
     "@types/ip": "^1.1.3",
     "@types/webextension-polyfill": "^0.10.7",
     "buffer": "^6.0.3",
     "os-browserify": "^0.3.0",
     "parcel": "^2.12.0",
-    "postcss": "^8.4.37",
+    "postcss": "^8.4.38",
     "prettier": "2.8.8",
     "prettier-plugin-css-order": "^1.3.1",
     "prettier-plugin-organize-imports": "^3.2.4",
     "shx": "^0.3.4",
-    "typescript": "^5.4.2",
-    "webextension-polyfill": "^0.10.0"
+    "typescript": "^5.4.5",
+    "webextension-polyfill": "^0.11.0"
   },
   "private": true
 }

src/background/handlers/onResponseStarted.ts

@@ -85,7 +85,7 @@ export default async function onResponseStarted(
         proxied: false,
         proxyHost: streamStatus?.proxyHost ? streamStatus.proxyHost : undefined,
         proxyCountry: streamStatus?.proxyCountry,
-        reason: `Proxied: ${stats.proxied} | Not proxied: ${stats.notProxied}`,
+        reason: streamStatus?.reason ?? "",
         stats,
       });
       console.log(
@@ -98,7 +98,7 @@ export default async function onResponseStarted(
       proxied: true,
       proxyHost: proxy,
       proxyCountry: streamStatus?.proxyCountry,
-      reason: `Proxied: ${stats.proxied} | Not proxied: ${stats.notProxied}`,
+      reason: "",
       stats,
     });
     console.log(
@@ -142,6 +142,7 @@ function getProxyFromDetails(
     );
     if (possibleProxies.length === 1)
       return getUrlFromProxyInfo(possibleProxies[0]);
+    // TODO: Set reason to some error message about DNS.
     return dnsResponse.host;
   } else {
     const proxyInfo = details.proxyInfo; // Firefox only.

src/common/ts/regexes.ts

@@ -6,6 +6,6 @@ export const twitchGqlHostRegex = /^gql\.twitch\.tv$/i;
 export const twitchTvHostRegex = /^(?:www|m)\.twitch\.tv$/i;
 export const usherHostRegex = /^usher\.ttvnw\.net$/i;
 export const videoWeaverHostRegex =
-  /^(?:\w+\.playlist\.live-video\.net|video-weaver\.\w+\.hls\.ttvnw\.net)$/i;
+  /^(?:\w+\.playlist\.(?:live-video|ttvnw)\.net|video-weaver\.\w+\.hls\.ttvnw\.net)$/i;
 export const videoWeaverUrlRegex =
-  /^https?:\/\/(?:\w+\.playlist\.live-video\.net|video-weaver\.\w+\.hls\.ttvnw\.net)\/v1\/playlist\/.+\.m3u8$/gim;
+  /^https?:\/\/(?:\w+\.playlist\.(?:live-video|ttvnw)\.net|video-weaver\.\w+\.hls\.ttvnw\.net)\/v1\/playlist\/.+\.m3u8$/gim;

src/manifest.chromium.json

@@ -3,7 +3,7 @@
   "name": "TTV LOL PRO",
   "description": "TTV LOL PRO removes most livestream ads from Twitch.",
   "homepage_url": "https://github.com/younesaassila/ttv-lol-pro",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "background": {
     "service_worker": "background/background.ts",
     "type": "module"

src/manifest.firefox.json

@@ -3,7 +3,7 @@
   "name": "TTV LOL PRO",
   "description": "TTV LOL PRO removes most livestream ads from Twitch.",
   "homepage_url": "https://github.com/younesaassila/ttv-lol-pro",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "background": {
     "scripts": ["background/background.ts"],
     "persistent": false

src/options/options.ts

@@ -106,6 +106,8 @@ const generateTwitchTabsReportButtonElement = $(
 ) as HTMLButtonElement;
 // Footer
 const versionElement = $("#version") as HTMLParagraphElement;
+// Main
+const mainElement = $("main") as HTMLElement;
 //#endregion
 
 const DEFAULT_STATE: Readonly<State> = Object.freeze(getDefaultState());
@@ -213,6 +215,8 @@ function main() {
   versionElement.textContent = `Version ${
     browser.runtime.getManifest().version
   }`;
+  // Main
+  mainElement.style.display = "block";
 }
 
 function updateProxyUsage() {

src/options/style.css

@@ -73,6 +73,7 @@ body {
 }
 
 main {
+  display: none;
   padding: 2rem;
 }
 

src/page/getFetch.ts

@@ -46,10 +46,10 @@ export function getFetch(pageState: PageState): typeof fetch {
             type: MessageType.NewPlaybackAccessTokenResponse,
             newPlaybackAccessToken,
           };
-          pageState.twitchWorker?.postMessage({
-            type: MessageType.WorkerScriptMessage,
-            message,
-          });
+          pageState.sendMessageToWorkerScripts(
+            pageState.twitchWorkers,
+            message
+          );
           break;
       }
     });

src/page/page.ts

@@ -7,8 +7,8 @@ import {
   getSendMessageToContentScriptAndWaitForResponse,
   getSendMessageToPageScript,
   getSendMessageToPageScriptAndWaitForResponse,
-  getSendMessageToWorkerScript,
-  getSendMessageToWorkerScriptAndWaitForResponse,
+  getSendMessageToWorkerScripts,
+  getSendMessageToWorkerScriptsAndWaitForResponse,
 } from "./sendMessage";
 import type { PageState } from "./types";
 
@@ -22,21 +22,21 @@ const sendMessageToContentScriptAndWaitForResponse =
 const sendMessageToPageScript = getSendMessageToPageScript();
 const sendMessageToPageScriptAndWaitForResponse =
   getSendMessageToPageScriptAndWaitForResponse();
-const sendMessageToWorkerScript = getSendMessageToWorkerScript();
-const sendMessageToWorkerScriptAndWaitForResponse =
-  getSendMessageToWorkerScriptAndWaitForResponse();
+const sendMessageToWorkerScripts = getSendMessageToWorkerScripts();
+const sendMessageToWorkerScriptsAndWaitForResponse =
+  getSendMessageToWorkerScriptsAndWaitForResponse();
 
 const pageState: PageState = {
   isChromium: params.isChromium,
   scope: "page",
   state: undefined,
-  twitchWorker: undefined,
+  twitchWorkers: [],
   sendMessageToContentScript,
   sendMessageToContentScriptAndWaitForResponse,
   sendMessageToPageScript,
   sendMessageToPageScriptAndWaitForResponse,
-  sendMessageToWorkerScript,
-  sendMessageToWorkerScriptAndWaitForResponse,
+  sendMessageToWorkerScripts,
+  sendMessageToWorkerScriptsAndWaitForResponse,
 };
 
 window.fetch = getFetch(pageState);
@@ -93,7 +93,7 @@ window.Worker = class Worker extends window.Worker {
       new Blob([wrapperScript], { type: "text/javascript" })
     );
     super(wrapperScriptURL, options);
-    pageState.twitchWorker = this;
+    pageState.twitchWorkers.push(this);
     this.addEventListener("message", event => {
       if (
         event.data?.type === MessageType.ContentScriptMessage ||
@@ -111,7 +111,7 @@ let sendStoreStateToWorker = false;
 window.addEventListener("message", event => {
   // Relay messages from the content script to the worker script.
   if (event.data?.type === MessageType.WorkerScriptMessage) {
-    sendMessageToWorkerScript(pageState.twitchWorker, event.data.message);
+    sendMessageToWorkerScripts(pageState.twitchWorkers, event.data.message);
     return;
   }
 
@@ -123,7 +123,7 @@ window.addEventListener("message", event => {
   switch (message.type) {
     case MessageType.GetStoreState: // From Worker
       if (pageState.state != null) {
-        sendMessageToWorkerScript(pageState.twitchWorker, {
+        sendMessageToWorkerScripts(pageState.twitchWorkers, {
           type: MessageType.GetStoreStateResponse,
           state: pageState.state,
         });
@@ -141,7 +141,7 @@ window.addEventListener("message", event => {
       const state = message.state;
       pageState.state = state;
       if (sendStoreStateToWorker) {
-        sendMessageToWorkerScript(pageState.twitchWorker, {
+        sendMessageToWorkerScripts(pageState.twitchWorkers, {
           type: MessageType.GetStoreStateResponse,
           state,
         });
@@ -210,7 +210,7 @@ onChannelChange((_channelName, oldChannelName) => {
     type: MessageType.ClearStats,
     channelName: oldChannelName,
   });
-  sendMessageToWorkerScript(pageState.twitchWorker, {
+  sendMessageToWorkerScripts(pageState.twitchWorkers, {
     type: MessageType.ClearStats,
     channelName: oldChannelName,
   });

src/page/sendMessage.ts

@@ -1,9 +1,9 @@
 import { MessageType } from "../types";
 import type {
   SendMessageAndWaitForResponseFn,
-  SendMessageAndWaitForResponseWorkerFn,
+  SendMessageAndWaitForResponseWorkersFn,
   SendMessageFn,
-  SendMessageWorkerFn,
+  SendMessageWorkersFn,
 } from "./types";
 
 // TODO: Secure communication between content, page, and worker scripts.
@@ -104,28 +104,34 @@ export function getSendMessageToPageScriptAndWaitForResponse(): SendMessageAndWa
   };
 }
 
-export function getSendMessageToWorkerScript(): SendMessageWorkerFn {
-  return (worker: Worker | undefined, message: any) =>
-    sendMessage(worker, MessageType.WorkerScriptMessage, message);
+export function getSendMessageToWorkerScripts(): SendMessageWorkersFn {
+  return (workers: Worker[], message: any) =>
+    workers.forEach(worker =>
+      sendMessage(worker, MessageType.WorkerScriptMessage, message)
+    );
 }
 
-export function getSendMessageToWorkerScriptAndWaitForResponse(): SendMessageAndWaitForResponseWorkerFn {
+export function getSendMessageToWorkerScriptsAndWaitForResponse(): SendMessageAndWaitForResponseWorkersFn {
   return async (
-    worker: Worker | undefined,
+    workers: Worker[],
     message: any,
     responseMessageType: MessageType,
     scope: "page" | "worker",
     responseTimeout: number = 5000
   ) => {
-    return sendMessageAndWaitForResponse(
-      worker,
-      MessageType.WorkerScriptMessage,
-      message,
-      scope === "page"
-        ? MessageType.PageScriptMessage
-        : MessageType.WorkerScriptMessage,
-      responseMessageType,
-      responseTimeout
+    return Promise.any(
+      workers.map(worker =>
+        sendMessageAndWaitForResponse(
+          worker,
+          MessageType.WorkerScriptMessage,
+          message,
+          scope === "page"
+            ? MessageType.PageScriptMessage
+            : MessageType.WorkerScriptMessage,
+          responseMessageType,
+          responseTimeout
+        )
+      )
     );
   };
 }

src/page/types.ts

@@ -2,18 +2,15 @@ import type { State } from "../store/types";
 import { MessageType } from "../types";
 
 export type SendMessageFn = (message: any) => void;
-export type SendMessageWorkerFn = (
-  worker: Worker | undefined,
-  message: any
-) => void;
+export type SendMessageWorkersFn = (workers: Worker[], message: any) => void;
 export type SendMessageAndWaitForResponseFn = (
   scope: "page" | "worker",
   message: any,
   responseMessageType: MessageType,
   responseTimeout?: number
 ) => Promise<any>;
-export type SendMessageAndWaitForResponseWorkerFn = (
-  worker: Worker | undefined,
+export type SendMessageAndWaitForResponseWorkersFn = (
+  workers: Worker[],
   message: any,
   responseMessageType: MessageType,
   scope: "page" | "worker",
@@ -24,13 +21,13 @@ export interface PageState {
   isChromium: boolean;
   scope: "page" | "worker";
   state?: State;
-  twitchWorker?: Worker;
+  twitchWorkers: Worker[];
   sendMessageToContentScript: SendMessageFn;
   sendMessageToContentScriptAndWaitForResponse: SendMessageAndWaitForResponseFn;
   sendMessageToPageScript: SendMessageFn;
   sendMessageToPageScriptAndWaitForResponse: SendMessageAndWaitForResponseFn;
-  sendMessageToWorkerScript: SendMessageWorkerFn;
-  sendMessageToWorkerScriptAndWaitForResponse: SendMessageAndWaitForResponseWorkerFn;
+  sendMessageToWorkerScripts: SendMessageWorkersFn;
+  sendMessageToWorkerScriptsAndWaitForResponse: SendMessageAndWaitForResponseWorkersFn;
 }
 
 export interface UsherManifest {

src/page/worker.ts

@@ -5,8 +5,8 @@ import {
   getSendMessageToContentScriptAndWaitForResponse,
   getSendMessageToPageScript,
   getSendMessageToPageScriptAndWaitForResponse,
-  getSendMessageToWorkerScript,
-  getSendMessageToWorkerScriptAndWaitForResponse,
+  getSendMessageToWorkerScripts,
+  getSendMessageToWorkerScriptsAndWaitForResponse,
 } from "./sendMessage";
 import type { PageState } from "./types";
 
@@ -27,21 +27,21 @@ const sendMessageToContentScriptAndWaitForResponse =
 const sendMessageToPageScript = getSendMessageToPageScript();
 const sendMessageToPageScriptAndWaitForResponse =
   getSendMessageToPageScriptAndWaitForResponse();
-const sendMessageToWorkerScript = getSendMessageToWorkerScript();
-const sendMessageToWorkerScriptAndWaitForResponse =
-  getSendMessageToWorkerScriptAndWaitForResponse();
+const sendMessageToWorkerScripts = getSendMessageToWorkerScripts();
+const sendMessageToWorkerScriptsAndWaitForResponse =
+  getSendMessageToWorkerScriptsAndWaitForResponse();
 
 const pageState: PageState = {
   isChromium: params.isChromium,
   scope: "worker",
   state: undefined,
-  twitchWorker: undefined, // Can't get the worker instance from inside the worker.
+  twitchWorkers: [], // Always empty in workers.
   sendMessageToContentScript,
   sendMessageToContentScriptAndWaitForResponse,
   sendMessageToPageScript,
   sendMessageToPageScriptAndWaitForResponse,
-  sendMessageToWorkerScript,
-  sendMessageToWorkerScriptAndWaitForResponse,
+  sendMessageToWorkerScripts,
+  sendMessageToWorkerScriptsAndWaitForResponse,
 };
 
 self.fetch = getFetch(pageState);

src/popup/popup.ts

@@ -115,6 +115,9 @@ function setProxyStatus(
   if (status.reason) {
     reasonElement.textContent = status.reason;
     reasonElement.style.display = "";
+  } else if (status.stats) {
+    reasonElement.textContent = `Proxied: ${status.stats.proxied} | Not proxied: ${status.stats.notProxied}`;
+    reasonElement.style.display = "";
   } else {
     reasonElement.style.display = "none";
   }

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2021",
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true,
     "noEmit": true,