Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-09 13:07:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added swiping away for skip to highlight on mobile

Browse Source
This commit is contained in:
Ajay Ramachandran
2021-10-21 22:33:49 -04:00
parent 8e254c5807
commit 628abd03f0
1 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/js-components/skipButtonControlBar.ts
View File

@@ -32,6 +32,10 @@ export class SkipButtonControlBar {
hideButton: () => void; hideButton: () => void;
showButton: () => void; showButton: () => void;
// Used by mobile only for swiping away
left = 0;
swipeStart = 0;
constructor(props: SkipButtonControlBarProps) { constructor(props: SkipButtonControlBarProps) {
this.skip = props.skip; this.skip = props.skip;
this.onMobileYouTube = props.onMobileYouTube; this.onMobileYouTube = props.onMobileYouTube;
@@ -53,6 +57,11 @@ export class SkipButtonControlBar {
this.container.addEventListener("click", () => this.toggleSkip()); this.container.addEventListener("click", () => this.toggleSkip());
this.container.addEventListener("mouseenter", () => this.stopTimer()); this.container.addEventListener("mouseenter", () => this.stopTimer());
this.container.addEventListener("mouseleave", () => this.startTimer()); 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 { getElement(): HTMLElement {
@@ -176,5 +185,37 @@ export class SkipButtonControlBar {
private getChapterPrefix(): HTMLElement { private getChapterPrefix(): HTMLElement {
return document.querySelector(".ytp-chapter-title-prefix"); 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";
}
} }