bump version

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "homepage_url": "https://sponsor.ajay.app",

src/components/CategoryPillComponent.tsx

@@ -6,7 +6,7 @@ import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
-import { AnimationUtils } from "../utils/animationUtils";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 import { Tooltip } from "../render/Tooltip";
 import { getErrorMessage } from "../../maze-utils/src/formating";
 

src/components/ChapterVoteComponent.tsx

@@ -6,7 +6,7 @@ import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
-import { AnimationUtils } from "../utils/animationUtils";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 import { Tooltip } from "../render/Tooltip";
 import { getErrorMessage } from "../../maze-utils/src/formating";
 

src/content.ts

@@ -26,7 +26,7 @@ import { SkipButtonControlBar } from "./js-components/skipButtonControlBar";
 import { getStartTimeFromUrl } from "./utils/urlParser";
 import { getControls, getExistingChapters, getHashParams, isPlayingPlaylist, isVisible } from "./utils/pageUtils";
 import { CategoryPill } from "./render/CategoryPill";
-import { AnimationUtils } from "./utils/animationUtils";
+import { AnimationUtils } from "../maze-utils/src/animationUtils";
 import { GenericUtils } from "./utils/genericUtils";
 import { logDebug, logWarn } from "./utils/logger";
 import { importTimes } from "./utils/exporter";

src/js-components/previewBar.ts

@@ -274,6 +274,7 @@ class PreviewBar {
             return (b[1] - b[0]) - (a[1] - a[0]);
         });
         for (const segment of sortedSegments) {
+            if (segment.actionType === ActionType.Chapter) continue;
             const bar = this.createBar(segment);
 
             this.container.appendChild(bar);
@@ -313,7 +314,7 @@ class PreviewBar {
         bar.style.left = this.timeToPercentage(startTime);
 
         if (duration > 0) {
-            bar.style.right = this.timeToPercentage(this.videoDuration - endTime);
+            bar.style.right = this.timeToRightPercentage(endTime);
         }
         if (this.chapterFilter(barSegment) && segment[1] < this.videoDuration) {
             bar.style.marginRight = `${this.chapterMargin}px`;
@@ -886,6 +887,10 @@ class PreviewBar {
         return `${this.timeToDecimal(time) * 100}%`
     }
 
+    timeToRightPercentage(time: number): string {
+        return `${(1 - this.timeToDecimal(time)) * 100}%`
+    }
+
     timeToDecimal(time: number): number {
         return this.decimalTimeConverter(time, true);
     }

src/js-components/skipButtonControlBar.ts

@@ -1,7 +1,7 @@
 import Config from "../config";
 import { SegmentUUID, SponsorTime } from "../types";
 import { getSkippingText } from "../utils/categoryUtils";
-import { AnimationUtils } from "../utils/animationUtils";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 import { keybindToString } from "../../maze-utils/src/config";
 import { isMobileControlsOpen } from "../utils/mobileUtils";
 

src/popup.ts

@@ -19,7 +19,7 @@ import {
     VoteResponse,
 } from "./messageTypes";
 import { showDonationLink } from "./utils/configUtils";
-import { AnimationUtils } from "./utils/animationUtils";
+import { AnimationUtils } from "../maze-utils/src/animationUtils";
 import { shortCategoryName } from "./utils/categoryUtils";
 import { localizeHtmlPage } from "../maze-utils/src/setup";
 import { exportTimes } from "./utils/exporter";

src/utils/animationUtils.ts

@@ -1,78 +0,0 @@
- /**
- * 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("sbhidden");
-    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("sbhidden");
-            }
-        },
-        show: () => {
-            mouseEntered = true;
-            element.classList.remove("animationDone");
-
-            // Wait for next event loop
-            setTimeout(() => {
-                if (mouseEntered) element.classList.remove("sbhidden")
-            }, 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("sbhidden");
-}
-
-function disableAutoHideAnimation(element: Element): void {
-    element.classList.remove("autoHiding");
-    element.classList.remove("sbhidden");
-}
-
-export const AnimationUtils = {
-    applyLoadingAnimation,
-    setupAutoHideAnimation,
-    setupCustomHideAnimation,
-    enableAutoHideAnimation,
-    disableAutoHideAnimation
-};