diff --git a/maze-utils b/maze-utils index 27db39e3..65609595 160000 --- a/maze-utils +++ b/maze-utils @@ -1 +1 @@ -Subproject commit 27db39e39b922b4e09f557ea7cb8eec88f6d475c +Subproject commit 65609595a9af1cdc66ab49e765d3759cf5a56ca3 diff --git a/src/components/CategoryPillComponent.tsx b/src/components/CategoryPillComponent.tsx index c72dc18e..36e31b47 100644 --- a/src/components/CategoryPillComponent.tsx +++ b/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"; diff --git a/src/components/ChapterVoteComponent.tsx b/src/components/ChapterVoteComponent.tsx index d50878a6..677a966d 100644 --- a/src/components/ChapterVoteComponent.tsx +++ b/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"; diff --git a/src/content.ts b/src/content.ts index 2b8e3213..71434eb7 100644 --- a/src/content.ts +++ b/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"; diff --git a/src/js-components/skipButtonControlBar.ts b/src/js-components/skipButtonControlBar.ts index 321e4cf6..b5c18386 100644 --- a/src/js-components/skipButtonControlBar.ts +++ b/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"; diff --git a/src/popup.ts b/src/popup.ts index e1e5757f..86e79f54 100644 --- a/src/popup.ts +++ b/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"; diff --git a/src/utils/animationUtils.ts b/src/utils/animationUtils.ts deleted file mode 100644 index 08a59ce0..00000000 --- a/src/utils/animationUtils.ts +++ /dev/null @@ -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 { - 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 -}; \ No newline at end of file