🔖 Release version 2.3.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ttv-lol-pro",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "TTV LOL PRO removes most livestream ads from Twitch.",
   "@parcel/bundler-default": {
     "minBundles": 10000000,

src/background/handlers/onContentScriptMessage.ts

@@ -6,6 +6,9 @@ import { MessageType, ProxyRequestType } from "../../types";
 type Timeout = string | number | NodeJS.Timeout | undefined;
 
 const timeoutMap: Map<ProxyRequestType, Timeout> = new Map();
+const fetchTimeoutMsOverride: Map<ProxyRequestType, number> = new Map([
+  [ProxyRequestType.Usher, 7000], // Account for slow page load.
+]);
 
 export default function onContentScriptMessage(
   message: any,
@@ -23,13 +26,15 @@ export default function onContentScriptMessage(
     }
 
     // Set new timeout for request type.
-    const fetchTimeoutMs = 3000; // Time for fetch to be called.
+    const fetchTimeoutMs = fetchTimeoutMsOverride.has(requestType)
+      ? fetchTimeoutMsOverride.get(requestType)!
+      : 3000; // Time for fetch to be called.
     const replyTimeoutMs = Date.now() - message.timestamp; // Time for reply to be received.
     timeoutMap.set(
       requestType,
       setTimeout(() => {
         console.log(
-          `[TTV LOL PRO] Disabling full mode (request type: ${requestType}, timeout)`
+          `🔴 Disabled full mode (request type: ${requestType}, timeout)`
         );
         timeoutMap.delete(requestType);
         if (store.state.chromiumProxyActive) {
@@ -42,7 +47,7 @@ export default function onContentScriptMessage(
     }
 
     console.log(
-      `[TTV LOL PRO] Enabled full mode for ${
+      `🟢 Enabled full mode for ${
         fetchTimeoutMs + replyTimeoutMs
       }ms (request type: ${requestType})`
     );
@@ -51,10 +56,7 @@ export default function onContentScriptMessage(
         type: MessageType.EnableFullModeResponse,
       });
     } catch (error) {
-      console.error(
-        "[TTV LOL PRO] Failed to send EnableFullModeResponse message",
-        error
-      );
+      console.error("❌ Failed to send EnableFullModeResponse message", error);
     }
   }
 
@@ -68,8 +70,6 @@ export default function onContentScriptMessage(
     if (store.state.chromiumProxyActive) {
       updateProxySettings([...timeoutMap.keys()]);
     }
-    console.log(
-      `[TTV LOL PRO] Disabled full mode (request type: ${requestType})`
-    );
+    console.log(`🔴 Disabled full mode (request type: ${requestType})`);
   }
 }

src/common/ts/findChannelFromTwitchTvUrl.ts

@@ -1,7 +1,7 @@
 import { twitchChannelNameRegex } from "./regexes";
 
 /**
- * Returns the channel name from a Twitch.tv URL.
+ * Returns the channel name from a Twitch.tv URL in lowercase.
  * Returns `null` if the URL is not a valid Twitch.tv URL.
  * @param twitchTvUrl
  * @returns
@@ -13,5 +13,5 @@ export default function findChannelFromTwitchTvUrl(
   const match = twitchChannelNameRegex.exec(twitchTvUrl);
   if (!match) return null;
   const [, channelName] = match;
-  return channelName;
+  return channelName.toLowerCase();
 }

src/common/ts/updateDnsResponses.ts

@@ -41,7 +41,14 @@ export default async function updateDnsResponses() {
     }
 
     try {
-      const response = await fetch(`https://dns.google/resolve?name=${host}`);
+      const response = await fetch(
+        `https://cloudflare-dns.com/dns-query?name=${host}`,
+        {
+          headers: {
+            Accept: "application/dns-json",
+          },
+        }
+      );
       const json = await response.json();
       const { Answer } = json;
       if (!Array.isArray(Answer)) {

src/content/content.ts

@@ -40,25 +40,22 @@ function injectPageScript() {
 
 function onStoreLoad() {
   // Clear stats for stream on page load/reload.
-  clearStats();
+  const channelName = findChannelFromTwitchTvUrl(location.href);
+  clearStats(channelName);
 }
 
 /**
  * Clear stats for stream on page load/reload.
  * @returns
  */
-function clearStats() {
-  const channelName = findChannelFromTwitchTvUrl(location.href);
+function clearStats(channelName: string | null) {
   if (!channelName) return;
-
-  if (store.state.streamStatuses.hasOwnProperty(channelName)) {
-    setStreamStatus(channelName, {
-      proxied: false,
-      reason: "",
-    });
+  const channelNameLower = channelName.toLowerCase();
+  if (store.state.streamStatuses.hasOwnProperty(channelNameLower)) {
+    delete store.state.streamStatuses[channelNameLower];
   }
   console.log(
-    `[TTV LOL PRO] Cleared stats for channel '${channelName}' (content script).`
+    `[TTV LOL PRO] Cleared stats for channel '${channelNameLower}' (content script).`
   );
 }
 
@@ -154,7 +151,7 @@ function onPageMessage(event: MessageEvent) {
       });
       break;
     case MessageType.ClearStats:
-      clearStats();
+      clearStats(message.channelName);
       break;
   }
 }

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.3",
+  "version": "2.3.4",
   "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.3",
+  "version": "2.3.4",
   "background": {
     "scripts": ["background/background.ts"],
     "persistent": false

src/options/page.html

@@ -31,6 +31,16 @@ <h1 class="title">Options</h1>
         <!-- Passport -->
         <section id="passport" class="section">
           <h2>Passport</h2>
+          <small>
+            Controls which types of requests are proxied. Increase the slider
+            <b>only if you are seeing ads</b> with the current setting.
+          </small>
+          <br />
+          <small>
+            If you are seeing "Commercial break in progress" ads, increasing the
+            slider will not help.
+          </small>
+          <br />
           <div id="passport-level-container">
             <img
               src="../common/images/passport.png"

src/page/getFetch.ts

@@ -69,10 +69,17 @@ export function getFetch(pageState: PageState): typeof fetch {
     switch (message.type) {
       case MessageType.ClearStats:
         console.log("[TTV LOL PRO] Cleared stats (getFetch).");
-        usherManifests = [];
-        cachedPlaybackTokenRequestHeaders = null;
-        cachedPlaybackTokenRequestBody = null;
-        cachedUsherRequestUrl = null;
+        const channelNameLower = message.channelName.toLowerCase();
+        usherManifests = usherManifests.filter(
+          manifest => manifest.channelName !== channelNameLower
+        );
+        if (cachedPlaybackTokenRequestBody?.includes(channelNameLower)) {
+          cachedPlaybackTokenRequestHeaders = null;
+          cachedPlaybackTokenRequestBody = null;
+        }
+        if (cachedUsherRequestUrl?.includes(channelNameLower)) {
+          cachedUsherRequestUrl = null;
+        }
         break;
     }
   });

src/page/page.ts

@@ -148,7 +148,9 @@ window.addEventListener("message", event => {
   }
 });
 
-function onChannelChange(callback: (channelName: string) => void) {
+function onChannelChange(
+  callback: (channelName: string, oldChannelName: string | null) => void
+) {
   let channelName: string | null = findChannelFromTwitchTvUrl(location.href);
 
   const NATIVE_PUSH_STATE = window.history.pushState;
@@ -161,8 +163,9 @@ function onChannelChange(callback: (channelName: string) => void) {
     const fullUrl = toAbsoluteUrl(url.toString());
     const newChannelName = findChannelFromTwitchTvUrl(fullUrl);
     if (newChannelName != null && newChannelName !== channelName) {
+      const oldChannelName = channelName;
       channelName = newChannelName;
-      callback(channelName);
+      callback(channelName, oldChannelName);
     }
     return NATIVE_PUSH_STATE.call(window.history, data, unused, url);
   }
@@ -178,8 +181,9 @@ function onChannelChange(callback: (channelName: string) => void) {
     const fullUrl = toAbsoluteUrl(url.toString());
     const newChannelName = findChannelFromTwitchTvUrl(fullUrl);
     if (newChannelName != null && newChannelName !== channelName) {
+      const oldChannelName = channelName;
       channelName = newChannelName;
-      callback(channelName);
+      callback(channelName, oldChannelName);
     }
     return NATIVE_REPLACE_STATE.call(window.history, data, unused, url);
   }
@@ -188,17 +192,25 @@ function onChannelChange(callback: (channelName: string) => void) {
   window.addEventListener("popstate", () => {
     const newChannelName = findChannelFromTwitchTvUrl(location.href);
     if (newChannelName != null && newChannelName !== channelName) {
+      const oldChannelName = channelName;
       channelName = newChannelName;
-      callback(channelName);
+      callback(channelName, oldChannelName);
     }
   });
 }
 
-onChannelChange(() => {
-  sendMessageToContentScript({ type: MessageType.ClearStats });
-  sendMessageToPageScript({ type: MessageType.ClearStats });
+onChannelChange((channelName, oldChannelName) => {
+  sendMessageToContentScript({
+    type: MessageType.ClearStats,
+    channelName: oldChannelName,
+  });
+  sendMessageToPageScript({
+    type: MessageType.ClearStats,
+    channelName: oldChannelName,
+  });
   sendMessageToWorkerScript(pageState.twitchWorker, {
     type: MessageType.ClearStats,
+    channelName: oldChannelName,
   });
 });
 

src/popup/popup.ts

@@ -8,6 +8,7 @@ import {
 import { alpha2 } from "../common/ts/countryCodes";
 import findChannelFromTwitchTvUrl from "../common/ts/findChannelFromTwitchTvUrl";
 import isChannelWhitelisted from "../common/ts/isChannelWhitelisted";
+import isChromium from "../common/ts/isChromium";
 import store from "../store";
 import type { StreamStatus } from "../types";
 
@@ -183,6 +184,7 @@ copyDebugInfoButtonElement.addEventListener("click", async e => {
     channelNameLower != null
       ? store.state.streamStatuses[channelNameLower]
       : null;
+  const proxySettings = await browser.proxy.settings.get({});
 
   const debugInfo = [
     `**Debug Info**\n`,
@@ -221,6 +223,9 @@ copyDebugInfoButtonElement.addEventListener("click", async e => {
                 `- Country: ${status.proxyCountry ?? "N/A"}\n`,
               ].join("")
             : "",
+          isChromium
+            ? `Proxy level of control: ${proxySettings.levelOfControl}\n`
+            : "",
         ].join("")
       : "",
     store.state.adLog.length > 0