Add vote buttons to pill that open on click

src/utils/animationUtils.ts

@@ -0,0 +1,78 @@
+ /**
+ * Starts a spinning animation and returns a function to be called when it should be stopped
+ * The callback will be called when the animation is finished 
+ * It waits until a full rotation is complete
+ */
+function applyLoadingAnimation(element: HTMLElement, time: number, callback?: () => void): () => Promise<void> {
+    element.style.animation = `rotate ${time}s 0s infinite`;
+
+    return async () => new Promise((resolve) => {
+        // Make the animation finite
+        element.style.animation = `rotate ${time}s`;
+
+        // When the animation is over, hide the button
+        const animationEndListener = () => {
+            if (callback) callback();
+
+            element.style.animation = "none";
+
+            element.removeEventListener("animationend", animationEndListener);
+
+            resolve();
+        };
+
+        element.addEventListener("animationend", animationEndListener);
+    });
+}
+
+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");
+    if (!rightSlide) element.classList.add("autoHideLeft");
+
+    let mouseEntered = false;
+
+    return {
+        hide: () => {
+            mouseEntered = false;
+            if (element.classList.contains("autoHiding")) {
+                element.classList.add("hidden");
+            }
+        },
+        show: () => {
+            mouseEntered = true;
+            element.classList.remove("animationDone");
+
+            // Wait for next event loop
+            setTimeout(() => {
+                if (mouseEntered) element.classList.remove("hidden")
+            }, 10);
+        }
+    };
+}
+
+function setupAutoHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): void {
+    const { hide, show } = this.setupCustomHideAnimation(element, container, enabled, rightSlide);
+
+    container.addEventListener("mouseleave", () => hide());
+    container.addEventListener("mouseenter", () => show());
+}
+
+function enableAutoHideAnimation(element: Element): void {
+    element.classList.add("autoHiding");
+    element.classList.add("hidden");
+}
+
+function disableAutoHideAnimation(element: Element): void {
+    element.classList.remove("autoHiding");
+    element.classList.remove("hidden");
+}
+
+export const AnimationUtils = {
+    applyLoadingAnimation,
+    setupAutoHideAnimation,
+    setupCustomHideAnimation,
+    enableAutoHideAnimation,
+    disableAutoHideAnimation
+};

src/utils/genericUtils.ts

@@ -21,6 +21,30 @@ async function wait<T>(condition: () => T | false, timeout = 5000, check = 100):
     });
 }
 
+/**
+ * Gets the error message in a nice string
+ * 
+ * @param {int} statusCode 
+ * @returns {string} errorMessage
+ */
+function getErrorMessage(statusCode: number, responseText: string): string {
+    let errorMessage = "";
+    const postFix = (responseText ? "\n\n" + responseText : "");
+                        
+    if([400, 429, 409, 502, 503, 0].includes(statusCode)) {
+        //treat them the same
+        if (statusCode == 503) statusCode = 502;
+
+        errorMessage = chrome.i18n.getMessage(statusCode + "") + " " + chrome.i18n.getMessage("errorCode") + statusCode
+                        + "\n\n" + chrome.i18n.getMessage("statusReminder");
+    } else {
+        errorMessage = chrome.i18n.getMessage("connectionError") + statusCode;
+    }
+
+    return errorMessage + postFix;
+}
+
 export const GenericUtils = {
-    wait
+    wait,
+    getErrorMessage
 }

src/utils/noticeUtils.ts

@@ -0,0 +1,21 @@
+import Config from "../config";
+import { SponsorTime } from "../types";
+
+export enum SkipNoticeAction {
+    None,
+    Upvote,
+    Downvote,
+    CategoryVote,
+    CopyDownvote,
+    Unskip
+}
+
+export function downvoteButtonColor(segments: SponsorTime[], actionState: SkipNoticeAction, downvoteType: SkipNoticeAction): string {
+    // Also used for "Copy and Downvote"
+    if (segments?.length > 1) {
+        return (actionState === downvoteType) ? Config.config.colorPalette.red : Config.config.colorPalette.white;
+    } else {
+        // You dont have segment selectors so the lockbutton needs to be colored and cannot be selected.
+        return Config.config.isVip && segments[0].locked === 1 ? Config.config.colorPalette.locked : Config.config.colorPalette.white;
+    }
+}