diff --git a/src/js-components/skipButtonControlBar.ts b/src/js-components/skipButtonControlBar.ts index 36ecb0c0..6f898d7f 100644 --- a/src/js-components/skipButtonControlBar.ts +++ b/src/js-components/skipButtonControlBar.ts @@ -32,6 +32,10 @@ export class SkipButtonControlBar { hideButton: () => void; showButton: () => void; + // Used by mobile only for swiping away + left = 0; + swipeStart = 0; + constructor(props: SkipButtonControlBarProps) { this.skip = props.skip; this.onMobileYouTube = props.onMobileYouTube; @@ -53,6 +57,11 @@ export class SkipButtonControlBar { this.container.addEventListener("click", () => this.toggleSkip()); this.container.addEventListener("mouseenter", () => this.stopTimer()); this.container.addEventListener("mouseleave", () => this.startTimer()); + if (this.onMobileYouTube) { + this.container.addEventListener("touchstart", (e) => this.handleTouchStart(e)); + this.container.addEventListener("touchmove", (e) => this.handleTouchMove(e)); + this.container.addEventListener("touchend", () => this.handleTouchEnd()); + } } getElement(): HTMLElement { @@ -176,5 +185,37 @@ export class SkipButtonControlBar { private getChapterPrefix(): HTMLElement { return document.querySelector(".ytp-chapter-title-prefix"); } + + // Swiping away on mobile + private handleTouchStart(event: TouchEvent): void { + this.swipeStart = event.touches[0].clientX; + } + + // Swiping away on mobile + private handleTouchMove(event: TouchEvent): void { + const distanceMoved = this.swipeStart - event.touches[0].clientX; + this.left = Math.min(-distanceMoved, 0); + + this.updateLeftStyle(); + } + + // Swiping away on mobile + private handleTouchEnd(): void { + if (this.left < -this.container.offsetWidth / 2) { + this.disableText(); + + // Don't let animation play + this.skipIcon.style.display = "none"; + setTimeout(() => this.skipIcon.style.removeProperty("display"), 200); + } + + this.left = 0; + this.updateLeftStyle(); + } + + // Swiping away on mobile + private updateLeftStyle() { + this.container.style.left = this.left + "px"; + } }