bump version

Fixes #815

README.md

@@ -75,4 +75,4 @@ Icons made by:
 
 ### License
 
-This project is licensed under GNU LGPL v3 or any later version
+This project is licensed under GNU GPL v3 or any later version

manifest/manifest.json

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

public/content.css

@@ -780,6 +780,18 @@ input::-webkit-inner-spin-button {
     line-height: 1.5em;
 }
 
+/* Description on right layout */
+#title > #categoryPillParent {
+	font-size: 2rem;
+	font-weight: bold;
+	display: flex;
+	justify-content: center;
+	line-height: 2.8rem;
+}
+#title > #categoryPillParent > #categoryPill.cbPillOpen {
+	margin-bottom: 5px;
+}
+
 #categoryPillParent {
 	height: fit-content;
     margin-top: auto;

src/background.ts

@@ -160,8 +160,8 @@ async function registerFirefoxContentScript(options: Registration) {
             ids: [options.id]
         }).catch(() => []);
 
-        if (existingRegistrations.length > 0 
-            && existingRegistrations[0].matches.every((match) => options.matches.includes(match))) {
+        if (existingRegistrations && existingRegistrations.length > 0 
+            && options.matches.every((match) => existingRegistrations[0].matches.includes(match))) {
             // No need to register another script, already registered
             return;
         }
@@ -222,27 +222,35 @@ async function submitVote(type: number, UUID: string, category: string) {
 
     const typeSection = (type !== undefined) ? "&type=" + type : "&category=" + category;
 
-    //publish this vote
-    const response = await asyncRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + typeSection);
-
-    if (response.ok) {
-        return {
-            successType: 1,
-            responseText: await response.text()
-        };
-    } else if (response.status == 405) {
-        //duplicate vote
-        return {
-            successType: 0,
-            statusCode: response.status,
-            responseText: await response.text()
-        };
-    } else {
-        //error while connect
+    try {
+        const response = await asyncRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + typeSection);
+    
+        if (response.ok) {
+            return {
+                successType: 1,
+                responseText: await response.text()
+            };
+        } else if (response.status == 405) {
+            //duplicate vote
+            return {
+                successType: 0,
+                statusCode: response.status,
+                responseText: await response.text()
+            };
+        } else {
+            //error while connect
+            return {
+                successType: -1,
+                statusCode: response.status,
+                responseText: await response.text()
+            };
+        }
+    } catch (e) {
+        console.error(e);
         return {
             successType: -1,
-            statusCode: response.status,
-            responseText: await response.text()
+            statusCode: -1,
+            responseText: ""
         };
     }
 }

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";
 
@@ -23,12 +23,14 @@ export interface CategoryPillState {
 }
 
 class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryPillState> {
-
+    mainRef: React.MutableRefObject<HTMLSpanElement>;
     tooltip?: Tooltip;
 
     constructor(props: CategoryPillProps) {
         super(props);
 
+        this.mainRef = React.createRef();
+
         this.state = {
             segment: null,
             show: false,
@@ -43,13 +45,17 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
             color: this.getTextColor(),
         }
 
+        // To be able to remove the margin from the parent
+        this.mainRef?.current?.parentElement?.classList?.toggle("cbPillOpen", this.state.show);
+
         return (
             <span style={style}
                 className={"sponsorBlockCategoryPill" + (!this.props.showTextByDefault ? " sbPillNoText" : "")}
                 aria-label={this.getTitleText()}
                 onClick={(e) => this.toggleOpen(e)}
                 onMouseEnter={() => this.openTooltip()}
-                onMouseLeave={() => this.closeTooltip()}>
+                onMouseLeave={() => this.closeTooltip()}
+                ref={this.mainRef}>
                 
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"

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/components/SubmissionNoticeComponent.tsx

@@ -14,7 +14,7 @@ export interface SubmissionNoticeProps {
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: ContentContainer;
 
-    callback: () => unknown;
+    callback: () => Promise<boolean>;
 
     closeListener: () => void;
 }
@@ -239,9 +239,11 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
             }
         }
 
-        this.props.callback();
-
-        this.cancel();
+        this.props.callback().then((success) => {
+            if (success) {
+                this.cancel();
+            }
+        });
     }
 
     sortSegments(): void {

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";
@@ -454,7 +454,9 @@ function videoIDChange(): void {
 }
 
 function handleMobileControlsMutations(): void {
-    if (!chrome.runtime?.id) return;
+    // Don't update while scrubbing
+    if (!chrome.runtime?.id 
+            || document.querySelector(".YtProgressBarProgressBarPlayheadDotInDragging")) return;
 
     updateVisibilityOfPlayerControlsButton();
 
@@ -770,6 +772,7 @@ function getVirtualTime(): number {
 
 function inMuteSegment(currentTime: number, includeOverlap: boolean): boolean {
     const checkFunction = (segment) => segment.actionType === ActionType.Mute
+        && segment.hidden === SponsorHideType.Visible
         && segment.segment[0] <= currentTime
         && (segment.segment[1] > currentTime || (includeOverlap && segment.segment[1] + 0.02 > currentTime));
     return sponsorTimes?.some(checkFunction) || sponsorTimesSubmitting.some(checkFunction);
@@ -2263,21 +2266,22 @@ function submitSegments() {
 
 //send the message to the background js
 //called after all the checks have been made that it's okay to do so
-async function sendSubmitMessage() {
+async function sendSubmitMessage(): Promise<boolean> {
     // check if all segments are full video
     const onlyFullVideo = sponsorTimesSubmitting.every((segment) => segment.actionType === ActionType.Full);
     // Block if submitting on a running livestream or premiere
     if (!onlyFullVideo && (getIsLivePremiere() || isVisible(document.querySelector(".ytp-live-badge")))) {
         alert(chrome.i18n.getMessage("liveOrPremiere"));
-        return;
+        return false;
     }
 
     if (!previewedSegment 
             && !sponsorTimesSubmitting.every((segment) => 
                 [ActionType.Full, ActionType.Chapter, ActionType.Poi].includes(segment.actionType) 
-                    || segment.segment[1] >= getVideo()?.duration)) {
+                    || segment.segment[1] >= getVideo()?.duration
+                    || segment.segment[0] === 0)) {
         alert(`${chrome.i18n.getMessage("previewSegmentRequired")} ${keybindToString(Config.config.previewKeybind)}`);
-        return;
+        return false;
     }
 
     // Add loading animation
@@ -2303,7 +2307,7 @@ async function sendSubmitMessage() {
                 const confirmShort = chrome.i18n.getMessage("shortCheck") + "\n\n" +
                     getSegmentsMessage(sponsorTimesSubmitting);
 
-                if(!confirm(confirmShort)) return;
+                if(!confirm(confirmShort)) return false;
             }
         }
     }
@@ -2353,6 +2357,8 @@ async function sendSubmitMessage() {
         if (fullVideoSegment) {
             categoryPill?.setSegment(fullVideoSegment);
         }
+
+        return true;
     } else {
         // Show that the upload failed
         playerButtons.submit.button.style.animation = "unset";
@@ -2364,6 +2370,8 @@ async function sendSubmitMessage() {
             alert(getErrorMessage(response.status, response.responseText));
         }
     }
+
+    return false;
 }
 
 //get the message that visually displays the video times
@@ -2389,6 +2397,8 @@ function getSegmentsMessage(sponsorTimes: SponsorTime[]): string {
 }
 
 function updateActiveSegment(currentTime: number): void {
+    previewBar?.updateChapterText(sponsorTimes, sponsorTimesSubmitting, currentTime);
+
     chrome.runtime.sendMessage({
         message: "time",
         time: currentTime

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/render/CategoryPill.tsx

@@ -43,9 +43,15 @@ export class CategoryPill {
     }
 
     private async attachToPageInternal(): Promise<void> {
-        const referenceNode = 
+        let referenceNode = 
             await waitFor(() => getYouTubeTitleNode());
 
+        // Experimental YouTube layout with description on right
+        const isOnDescriptionOnRightLayout = document.querySelector("#title #description");
+        if (isOnDescriptionOnRightLayout) {
+            referenceNode = referenceNode.parentElement;
+        }
+
         if (referenceNode && !referenceNode.contains(this.container)) {
             if (!this.container) {
                 this.container = document.createElement('span');
@@ -91,7 +97,9 @@ export class CategoryPill {
             parent.appendChild(this.container);
 
             referenceNode.prepend(parent);
-            referenceNode.style.display = "flex";
+            if (!isOnDescriptionOnRightLayout) {
+                referenceNode.style.display = "flex";
+            }
         }
     }
 

src/render/SubmissionNotice.tsx

@@ -11,7 +11,7 @@ class SubmissionNotice {
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: () => unknown;
 
-    callback: () => unknown;
+    callback: () => Promise<boolean>;
 
     noticeRef: React.MutableRefObject<SubmissionNoticeComponent>;
 
@@ -19,7 +19,7 @@ class SubmissionNotice {
 
     root: Root;
 
-    constructor(contentContainer: ContentContainer, callback: () => unknown) {
+    constructor(contentContainer: ContentContainer, callback: () => Promise<boolean>) {
         this.noticeRef = React.createRef();
 
         this.contentContainer = contentContainer;

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
-};