Make highlight bigger on timeline when skip to highlight button hovered

This commit is contained in:
Ajay 2023-10-31 01:16:36 -04:00
parent ca7eb50a82
commit 6f54c8a731
2 changed files with 21 additions and 5 deletions

View file

@ -302,8 +302,7 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
reskipSponsorTime(sponsorTimes.find((segment) => segment.UUID === request.UUID), true);
break;
case "selectSegment":
selectedSegment = request.UUID;
updatePreviewBar();
selectSegment(request.UUID);
break;
case "submitVote":
vote(request.type, request.UUID).then((response) => sendResponse(response));
@ -1071,6 +1070,7 @@ function setupSkipButtonControlBar() {
openNotice: true,
forceAutoSkip: true
}),
selectSegment,
onMobileYouTube: isOnMobileYouTube()
});
}
@ -1349,6 +1349,11 @@ function updatePreviewBarPositionMobile(parent: HTMLElement) {
}
}
function selectSegment(UUID: SegmentUUID): void {
selectedSegment = UUID;
updatePreviewBar();
}
function updatePreviewBar(): void {
if (previewBar === null) return;

View file

@ -1,11 +1,12 @@
import Config from "../config";
import { SponsorTime } from "../types";
import { SegmentUUID, SponsorTime } from "../types";
import { getSkippingText } from "../utils/categoryUtils";
import { AnimationUtils } from "../utils/animationUtils";
import { keybindToString } from "../../maze-utils/src/config";
export interface SkipButtonControlBarProps {
skip: (segment: SponsorTime) => void;
selectSegment: (UUID: SegmentUUID) => void;
onMobileYouTube: boolean;
}
@ -54,8 +55,18 @@ export class SkipButtonControlBar {
this.container.appendChild(this.skipIcon);
this.container.appendChild(this.textContainer);
this.container.addEventListener("click", () => this.toggleSkip());
this.container.addEventListener("mouseenter", () => this.stopTimer());
this.container.addEventListener("mouseleave", () => this.startTimer());
this.container.addEventListener("mouseenter", () => {
this.stopTimer();
if (this.segment) {
props.selectSegment(this.segment.UUID);
}
});
this.container.addEventListener("mouseleave", () => {
this.startTimer();
props.selectSegment(null);
});
if (this.onMobileYouTube) {
this.container.addEventListener("touchstart", (e) => this.handleTouchStart(e));
this.container.addEventListener("touchmove", (e) => this.handleTouchMove(e));