Add better indication for when DeArrow is disabled

ajayyy · Sep 2, 2024 · 871978c · 871978c
1 parent 4a39e30
commit 871978c
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 5 deletions.
diff --git a/maze-utils b/maze-utils
diff --git a/public/_locales b/public/_locales
diff --git a/src/submission/submitButton.tsx b/src/submission/submitButton.tsx
@@ -18,6 +18,27 @@ const submitButtonIcon = `
     <path d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"/>
 </svg>`;
 
+const disabledIcon = `
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<filter id="c" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+<feColorMatrix values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "/>
+</filter>
+<filter id="b" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+<feColorMatrix values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "/>
+</filter>
+<filter id="a" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+<feColorMatrix values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "/>
+</filter>
+</defs>
+<path d="m36 18.344c0 4.981-2.46 9.198-5.655 12.462s-7.323 5.152-12.199 5.152-9.764-1.112-12.959-4.376-5.187-8.257-5.187-13.238 2.574-9.38 5.769-12.644 7.502-5.658 12.377-5.658 9.394 2.178 12.589 5.442c3.196 3.264 5.265 7.88 5.265 12.86z" fill="#1213bd" filter="url(#a)"/>
+<path d="m30.394 18.41c0 3.4688-1.143 6.8655-3.4165 9.1379-2.2735 2.2724-5.6701 2.9287-9.1379 2.9287s-6.3735-1.1472-8.647-3.4197c-2.2735-2.2724-3.5871-5.1782-3.5871-8.647 0-3.4688 0.94205-6.7461 3.2145-9.0196 2.2724-2.2735 5.5508-3.9514 9.0196-3.9514s6.4928 1.9323 8.7663 4.2047c2.2735 2.2724 3.7881 5.2975 3.7881 8.7663z" fill="#88c9f9" filter="url(#b)" stroke-width="1.0467"/>
+<path d="m23.958 17.818c0 3.1537-2.6449 5.8081-5.7986 5.8081-3.1537 0-5.5998-2.6544-5.5998-5.8081 0-3.1537 2.4461-5.7217 5.5998-5.7217 3.1537 0 5.7986 2.568 5.7986 5.7217z" fill="#0a62a5" filter="url(#c)" stroke-width="1.1834"/>
+<rect transform="rotate(45)" x="4.207" y="-2.7506" width="42.498" height="5.5013" ry="1.381" fill="#6a0000" stroke-opacity="0"/>
+<rect transform="rotate(135)" x="-21.249" y="-28.206" width="42.498" height="5.5013" ry="1.381" fill="#6a0000" stroke-opacity="0"/>
+</svg>`;
+
 export class SubmitButton {
     button: HTMLButtonElement;
     container: HTMLElement | null;
@@ -59,14 +80,19 @@ export class SubmitButton {
 
                     this.button = document.createElement('button');
                     this.button.className = "cbSubmitButton cbButton" + (onMobile() ? " cbMobileButton" : "");
-                    this.button.innerHTML = submitButtonIcon;
+                    this.updateIcon();
                     this.button.draggable = false;
 
                     this.button.addEventListener("click", (e) => {
                         if (!chrome.runtime?.id) return;
-
                         e.stopPropagation();
-                        this.openOrClose().catch(logError);
+
+                        if (Config.config!.extensionEnabled) {
+                            this.openOrClose().catch(logError);
+                        } else {
+                            Config.config!.extensionEnabled = true;
+                            this.updateIcon();
+                        }
                     });
                 }
 
@@ -79,6 +105,16 @@ export class SubmitButton {
         });
     }
 
+    updateIcon(): void {
+        if (Config.config!.extensionEnabled) {
+            this.button.innerHTML = submitButtonIcon;
+            this.button.title = chrome.i18n.getMessage("OpenSubmissionMenu");
+        } else {
+            this.button.innerHTML = disabledIcon;
+            this.button.title = chrome.i18n.getMessage("DeArrowIsDisabled");
+        }
+    }
+
     close(): void {
         if (this.container) {
             // Experimental YouTube layout with description on right

diff --git a/src/videoBranding/videoBranding.ts b/src/videoBranding/videoBranding.ts
@@ -14,6 +14,7 @@ import { cleanEmojis, cleanResultingTitle } from "../titles/titleFormatter";
 import { shouldDefaultToCustom, shouldDefaultToCustomFastCheck, shouldUseCrowdsourcedTitles } from "../config/channelOverrides";
 import { onMobile } from "../../maze-utils/src/pageInfo";
 import { addMaxTitleLinesCssToPage } from "../utils/cssInjector";
+import { submitButton } from "../video";
 
 export type BrandingUUID = string & { readonly __brandingUUID: unique symbol };
 
@@ -443,6 +444,10 @@ export function setupOptionChangeListener(): void {
                     updateBranding().catch(logError);
                 }
             }
+
+            if (changes["extensionEnabled"]) {
+                submitButton.updateIcon();
+            }
         }
 
         if (changes.titleMaxLines
+7 −5		src/background-request-proxy.ts
+2 −2		src/cleanup.ts
+2 −1		src/dom.ts
+57 −1		src/injected/document.ts
+5 −1		src/thumbnailManagement.ts
+1 −1		src/version.json
+47 −1		src/video.ts